:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7c3aed;
  --accent2:#06b6d4;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#071028 0%, #0b1320 100%); color:#e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.app{max-width:none;width:100%;margin:0;padding:12px 18px;display:flex;flex-direction:column;height:100vh}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:6px}
.brand h1{margin:0;font-size:18px}
.brand .muted{margin:6px 0 0;color:var(--muted);font-size:13px}
.controls{display:flex;gap:10px;align-items:center}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:inherit;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#5b21b6);border:none}
.zoom{display:flex;align-items:center;gap:8px;background:var(--glass);padding:6px;border-radius:8px}
.zoom button{width:34px;height:34px;border-radius:6px}
.main{display:flex;gap:12px;margin-top:8px;flex:1;align-items:stretch;min-height:0}
.gantt-area{flex:1;min-width:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:8px;border-radius:8px;transition:all .18s ease;display:flex;flex-direction:column;min-height:0}
.sidebar{width:320px;transition:all .18s ease;align-self:stretch;display:flex;flex-direction:column;overflow:auto;padding:10px 0;height:100%}
.sidebar.hidden{width:0;min-width:0;padding:0;border:none;margin:0;overflow:hidden}
.main.sidebar-hidden .gantt-area{flex:1 1 100%}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:10px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.03);flex:0 0 auto}
.card h2{margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:13px}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-toggle{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px}
.card.collapsed{padding:8px 12px;height:40px;overflow:hidden}
.floating-open{position:fixed;right:24px;bottom:24px;background:linear-gradient(90deg,var(--accent),#5b21b6);color:#fff;padding:10px 12px;border-radius:999px;box-shadow:0 8px 30px rgba(4,7,23,0.6);cursor:pointer;border:none}
.timeline-header{min-height:40px;border-bottom:1px dashed rgba(255,255,255,0.03);position:relative;flex:0 0 auto}
.timeline-header{overflow-x:auto;white-space:nowrap}
.timeline-header .th-inner{height:40px}
.timeline-header .th{padding-top:8px}
.th-ticks{height:12px;position:relative}
.th-ticks .tick{height:12px;display:inline-block;vertical-align:top}
.tick-line{width:1px;height:8px;margin:0 auto;background:rgba(255,255,255,0.06)}
.tick-line.major{height:12px;background:rgba(255,255,255,0.12);width:2px}

.today-line{position:absolute;top:0;width:2px;background:rgba(255,80,80,0.95);box-shadow:0 0 12px rgba(255,80,80,0.18);z-index:15}

.project-line{position:absolute;top:0;width:3px;background:linear-gradient(180deg,#34d399,#10b981);box-shadow:0 6px 18px rgba(16,185,129,0.12);z-index:16}
.project-due{position:absolute;top:0;width:3px;background:linear-gradient(180deg,#fb7185,#ef4444);box-shadow:0 6px 18px rgba(239,68,68,0.12);z-index:16}
.project-label{position:absolute;bottom:6px;top:auto;background:rgba(0,0,0,0.6);padding:4px 8px;border-radius:6px;font-size:12px;color:#fff;transform:translateX(8px);z-index:17;pointer-events:none}

.project-actual{font-weight:700;color:var(--muted);}
.project-actual.overdue{color:#ff6b6b}

.month-row{height:20px;display:block;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,0.02);}
.month-cell{display:inline-block;height:20px;line-height:20px}
.day-row{height:20px;display:block;white-space:nowrap}
.day-cell{display:inline-block;height:20px;line-height:20px;color:var(--muted);font-size:11px}
.timeline-scroll{position:relative;overflow:auto;flex:1;height:auto}
.rows{position:relative;padding:8px}
.row{height:44px;display:flex;align-items:center;padding:6px 4px;border-radius:6px;position:relative}
.row + .row{margin-top:8px}
.task-bar{position:absolute;height:32px;border-radius:8px;background:linear-gradient(90deg,var(--accent) 0%, var(--accent2) 120%);box-shadow:0 6px 18px rgba(2,6,23,0.6);display:flex;align-items:center;padding:6px 10px;color:white;cursor:grab;user-select:none}
.task-bar.selected{
  /* prominent left accent stripe and glow for clear visibility */
  border-left:6px solid #ffffff;
  background:linear-gradient(90deg,#b794f4 0%, #06b6d4 120%);
  box-shadow:0 18px 50px rgba(124,58,237,0.22), 0 0 0 4px rgba(255,255,255,0.03);
  transform:translateY(-3px);
  z-index:30;
}
.task-bar.selected.pulse{animation:selPulse .9s ease-in-out 1}
@keyframes selPulse{0%{box-shadow:0 6px 18px rgba(124,58,237,0.1)}50%{box-shadow:0 20px 50px rgba(124,58,237,0.28)}100%{box-shadow:0 14px 40px rgba(124,58,237,0.18)}}
.task-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handle{position:absolute;right:2px;top:4px;width:10px;height:24px;border-radius:4px;background:rgba(255,255,255,0.12);cursor:e-resize}
.task-bullet{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;box-shadow:0 8px 18px rgba(3,7,18,0.5);z-index:22;transition:background .18s ease, transform .12s ease, box-shadow .18s ease}
.task-bullet.unlocked{background:linear-gradient(90deg,#10b981,#34d399);border:1px solid rgba(255,255,255,0.06)}
.task-bullet.locked{background:linear-gradient(90deg,#ef4444,#fb7185);border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 26px rgba(239,68,68,0.18);transform:translateY(-1px)}
.task-bar .overlap-left{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg, rgba(255,80,80,0.95), rgba(255,80,80,0.5));border-top-left-radius:8px;border-bottom-left-radius:8px;z-index:5}
.task-bar.locked{opacity:0.9}
.task-badge-locked{margin-left:8px;background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:6px;font-size:12px}

.task-extension{position:absolute;right:-1px;top:0;height:100%;background:repeating-linear-gradient(45deg, rgba(255,80,80,0.14) 0 4px, rgba(255,80,80,0.06) 4px 8px);border-top-right-radius:8px;border-bottom-right-radius:8px;z-index:4;pointer-events:none}
.task-extension.faint{background:repeating-linear-gradient(45deg, rgba(255,80,80,0.10) 0 6px, rgba(255,80,80,0.04) 6px 12px)}
.task-extension .ext-hint{position:absolute;right:6px;top:6px;color:#ffb4b4;font-size:11px}
.task-bar.floating{background:linear-gradient(90deg, rgba(124,58,237,0.12), rgba(6,182,212,0.06));color:var(--muted);border:1px dashed rgba(255,255,255,0.06);}
.dep-warning{color:#ffb347;font-size:12px}
.svg-deps{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.svg-deps{z-index:18}

.svg-deps path{
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:3;
  stroke: rgba(124,58,237,0.92); /* purple accent */
  fill: none;
  filter: drop-shadow(0 6px 18px rgba(2,6,23,0.6));
}
.svg-deps circle{
  stroke: #fff;
  stroke-width: 1;
  fill: rgba(124,58,237,0.98);
}
.sidebar label{display:block;margin-bottom:10px}
.sidebar input[type="text"], .sidebar input[type="date"], .sidebar select{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.sidebar textarea{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.row-inline{display:flex;gap:8px}
.row-inline label{flex:1}
.advanced-toggle .btn{padding:6px 10px}
.muted small kbd{background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:4px;margin-left:4px}
.task-badge{margin-left:8px;background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:6px;font-size:12px}
.editor-focus{outline:3px solid rgba(124,58,237,0.18);}
.footer{margin-top:8px;color:var(--muted);font-size:13px}
/* helpers */
.row-ghost{height:44px;background:transparent}
.row-ghost{border:2px dashed rgba(255,255,255,0.06);border-radius:8px;margin:8px 0}
.legend{font-size:12px;color:var(--muted)}
@media (max-width:900px){
  .app{padding:10px}
  .sidebar{display:none}
}