:root {
  --bg:#181b20;
  --panel:#22262d;
  --panel-2:#1f2329;
  --border:#313844;
  --hdr:#1d2127;
  --blue:#4f8ef7;
  --cyan:#22d3ee;
  --green:#22c55e;
  --orange:#f59e0b;
  --red:#ef4444;
  --gray:#64748b;
  --text:#e2e8f0;
  --dim:#94a3b8;
  --row:34px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}
.toolbar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--hdr);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.toolbar h1{font-size:15px;font-weight:700;color:var(--cyan);white-space:nowrap}
.sep{width:1px;height:24px;background:var(--border)}
.btn,.upload-btn{padding:5px 12px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;line-height:1.2}
.btn:hover,.upload-btn:hover{background:var(--blue);border-color:var(--blue)}
.btn:disabled,.upload-btn.busy{opacity:.55;cursor:wait}
.upload-btn input{display:none}
.icon-btn{width:28px;padding:5px 0;text-align:center}
select{padding:5px 8px;background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:4px;font-size:12px;cursor:pointer}
.zoom-lbl{font-size:12px;color:var(--dim);min-width:42px;text-align:center}
.file-lbl{font-size:11px;color:var(--dim);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px}
.statsbar{display:flex;gap:16px;padding:6px 14px;background:var(--hdr);border-bottom:1px solid var(--border);flex-shrink:0;font-size:12px;overflow:auto}
.stat{display:flex;align-items:center;gap:6px;white-space:nowrap}
.stat-total{margin-left:auto}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-done{background:var(--green)}
.dot-prog{background:var(--orange)}
.dot-act{background:var(--blue)}
.dot-pend{background:var(--gray)}
.main{display:flex;flex:1;overflow:hidden}
.names-col{width:340px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border)}
.names-hdr{height:52px;background:var(--hdr);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;flex-shrink:0}
.names-body{flex:1;overflow-y:auto;overflow-x:hidden}
.names-body::-webkit-scrollbar{width:4px}
.names-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.nrow{height:var(--row);display:flex;align-items:center;padding:0 6px;border-bottom:1px solid rgba(49,56,68,.5);font-size:12px;cursor:pointer;gap:4px;user-select:none}
.nrow:nth-child(even){background:rgba(29,33,39,.6)}
.nrow:hover{background:rgba(71,85,105,.22)}
.nrow.sel{background:rgba(79,142,247,.15)!important;border-left:2px solid var(--blue)}
.nrow.summary{font-weight:700;color:var(--cyan)}
.nrow.milestone-row{color:var(--orange);font-style:italic}
.nrow.critical-row .nname{color:#fca5a5}
.toggle{font-size:10px;color:var(--dim);width:12px;text-align:center;flex-shrink:0;cursor:pointer}
.indent{flex-shrink:0}
.nname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.npct{font-size:10px;color:var(--dim);flex-shrink:0}
.gantt-right{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}
.gscroll{flex:1;overflow:auto;position:relative}
.gscroll::-webkit-scrollbar{height:8px;width:4px}
.gscroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ginner{position:relative;min-height:100%}
.dhdr{position:sticky;top:0;z-index:20;background:var(--hdr);border-bottom:1px solid var(--border);height:52px}
.months-row{position:absolute;top:0;left:0;height:26px;display:flex}
.weeks-row{position:absolute;top:26px;left:0;height:26px;display:flex}
.mcell{border-right:1px solid var(--border);padding:0 6px;display:flex;align-items:center;font-size:11px;font-weight:700;color:var(--cyan);overflow:hidden;white-space:nowrap;position:absolute}
.wcell{border-right:1px solid rgba(49,56,68,.5);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--dim);white-space:nowrap;flex-shrink:0;position:absolute;height:100%}
.wcell.today{background:rgba(245,158,11,.08);color:var(--orange)}
.grows{position:relative}
.grow{height:var(--row);border-bottom:1px solid rgba(49,56,68,.4);position:relative}
.grow:nth-child(even){background:rgba(29,33,39,.4)}
.grow:hover{background:rgba(71,85,105,.12)}
.grow.sel{background:rgba(79,142,247,.08)!important}
.today-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(245,158,11,.7);z-index:10;pointer-events:none}
.bar{position:absolute;top:6px;height:22px;border-radius:3px;cursor:pointer;display:flex;align-items:center;overflow:hidden;transition:filter .15s;z-index:2}
.bar:hover{filter:brightness(1.2);box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:5}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.2);border-radius:3px 0 0 3px}
.bar-lbl{position:relative;z-index:1;font-size:10px;font-weight:600;color:#fff;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar.done{background:linear-gradient(90deg,#15803d,#22c55e)}
.bar.inprog{background:linear-gradient(90deg,#b45309,#f59e0b)}
.bar.active{background:linear-gradient(90deg,#1d4ed8,#4f8ef7)}
.bar.pending{background:linear-gradient(90deg,#334155,#64748b)}
.bar.critical{outline:1px solid #ef4444}
.bar.sum-bar{background:linear-gradient(90deg,#0e7490,#22d3ee);height:10px;top:12px;border-radius:2px}
.bar.mile{width:14px!important;height:14px!important;top:10px;border-radius:0;transform:rotate(45deg);background:var(--orange);padding:0}
.tt{position:fixed;background:#1e2229;border:1px solid var(--blue);border-radius:6px;padding:10px 14px;font-size:12px;z-index:999;pointer-events:none;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:320px}
.tt.show{display:block}
.tt-title{font-weight:700;color:var(--cyan);margin-bottom:8px;font-size:13px}
.tt-row{display:flex;justify-content:space-between;gap:16px;margin-bottom:3px;color:var(--dim)}
.tt-row span:last-child{color:var(--text);font-weight:600;text-align:right}
.search-box{padding:6px 10px}
.search-box input{width:100%;padding:6px 8px;background:rgba(71,85,105,.3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:12px}
.search-box input::placeholder{color:var(--dim)}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--dim)}
.empty-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.empty-text{font-size:13px;max-width:520px;line-height:1.5}
.status{position:fixed;right:16px;bottom:16px;max-width:min(520px,calc(100vw - 32px));padding:10px 12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:6px;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:none;z-index:1000}
.status.show{display:block}
.status.error{border-color:var(--red);color:#fecaca}
@media (max-width:760px){
  .names-col{width:260px}
  .file-lbl{max-width:100%;margin-left:0}
  .stat-total{margin-left:0}
}