:root{
  --navy:#1F3864;--blue:#2F5496;--sky:#5B9BD5;--red:#C00000;--green:#1E8E3E;--amber:#E08A00;--purple:#7030A0;
  --bg:#F3F5F9;--card:#fff;--line:#DDE3EC;--text:#1B2430;--muted:#5F6B7A;--head:#EEF2F8;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--text);background:var(--bg)}
body{display:flex;flex-direction:column;min-height:100vh}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
.hidden{display:none!important}
#topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;padding:8px 18px;gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{background:#fff;color:var(--navy);font-weight:800;border-radius:8px;padding:6px 10px;font-size:15px;letter-spacing:.5px}
.logo span{color:var(--red)}
.titles .t1{font-weight:700;font-size:16px}
.titles .t2{font-size:11.5px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
.hdr-right{display:flex;align-items:center;gap:8px}
.pill{background:rgba(255,255,255,.14);border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.3px}
.pill.warn{background:var(--amber);color:#fff}
.btn{border:1px solid transparent;border-radius:6px;padding:6px 12px;font-weight:600;font-size:12px;background:#fff;color:var(--navy)}
.btn.primary{background:var(--red);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.small{padding:3px 8px;font-size:11px}
.btn.sec{background:var(--head);color:var(--navy);border-color:var(--line)}
.btn.danger{background:#fff;color:var(--red);border-color:var(--red)}
.btn:disabled{opacity:.45;cursor:not-allowed}
#tabs{flex-shrink:0;display:flex;gap:2px;background:var(--blue);padding:0 12px;overflow-x:auto}
#tabs button{background:transparent;border:0;color:#DCE6F5;padding:10px 14px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
#tabs button.active{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.08)}
#view{flex:1;padding:14px 18px 30px;max-width:1900px;width:100%;margin:0 auto}
#foot{flex-shrink:0;display:flex;justify-content:space-between;padding:8px 18px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);background:#fff}
.loading{padding:60px;text-align:center;color:var(--muted)}

/* layout helpers */
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.g4,.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.card h3 .sub{font-weight:500;text-transform:none;letter-spacing:0}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .v{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1}
.kpi .v.red{color:var(--red)}.kpi .v.green{color:var(--green)}.kpi .v.amber{color:var(--amber)}
.kpi .s{font-size:11.5px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.mt{margin-top:12px}
.muted{color:var(--muted)}.small{font-size:11px}.mono{font-family:var(--mono)}
.right{text-align:right}.center{text-align:center}
.tag{display:inline-block;border-radius:4px;padding:1px 6px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.tag.ok{background:#E6F4EA;color:var(--green)}.tag.late{background:#FDE7E7;color:var(--red)}.tag.warn{background:#FFF3E0;color:var(--amber)}.tag.cp{background:var(--red);color:#fff}.tag.ms{background:#EDE7F6;color:var(--purple)}.tag.fx{background:#E3ECFA;color:var(--blue)}.tag.link{background:#E6F4EA;color:var(--green)}
.badge-lock{font-size:10px;color:var(--muted);margin-left:6px}

/* tables */
table.tb{width:100%;border-collapse:collapse;font-size:12px}
.tb th{background:var(--head);color:var(--navy);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.tb td{padding:5px 8px;border-bottom:1px solid #EEF1F6;vertical-align:middle}
.tb tr:hover td{background:#F7F9FD}
.tb td.num,.tb th.num{text-align:right;font-variant-numeric:tabular-nums}
.tb tr.sum td{background:#E9EEF7;font-weight:700}
.tb tr.tot td{background:#DDE6F5;font-weight:700;border-top:2px solid var(--blue)}
.tb tr.ms td{background:#F6F1FB}
.tb tr.crit td.name{color:var(--red);font-weight:600}
.tb tr.sel td{background:#FFF8E1!important}
.tb td.edit{cursor:text;background:#FFFDF2;box-shadow:inset 0 0 0 1px #F1E3A6;border-radius:3px}
.tb td.edit:hover{background:#FFF7CC}
.scroll{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.heat{background:linear-gradient(90deg,#E3ECFA var(--p),transparent var(--p))}
input.cell{width:100%;border:1px solid var(--blue);border-radius:3px;padding:2px 4px;font-size:12px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.form label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:600}
.form input,.form select,.form textarea{border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12.5px;color:var(--text);background:#fff}
.form input:disabled{background:#F3F5F9;color:var(--muted)}
.form .full{grid-column:1/-1}
.help{font-size:11px;color:var(--muted);line-height:1.45}
.alert{border-left:4px solid var(--amber);background:#FFF8E8;padding:8px 10px;border-radius:6px;font-size:12px;margin-bottom:8px}
.alert.red{border-color:var(--red);background:#FDEDED}.alert.blue{border-color:var(--blue);background:#EEF3FB}.alert.green{border-color:var(--green);background:#EDF7EF}
.chart-wrap{position:relative;height:280px}
.chart-wrap.tall{height:340px}
.legend{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:4px;vertical-align:-2px}

/* gantt */
#gantt-wrap{display:flex;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;height:calc(100vh - 235px);min-height:480px}
#gantt-left{flex:0 0 812px;overflow:auto;border-right:2px solid var(--line)}
#gantt-right{flex:1;overflow:auto;position:relative}
#gantt-left table{border-collapse:collapse;width:800px;table-layout:fixed;font-size:12px}
#gantt-left th{position:sticky;top:0;background:var(--head);z-index:2;height:44px;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--navy);border-bottom:1px solid var(--line);padding:0 6px;text-align:left}
#gantt-left td{height:26px;border-bottom:1px solid #EEF1F6;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gantt-left tr.sum td{background:#E9EEF7;font-weight:700}
#gantt-left tr.sel td{background:#FFF8E1}
#gantt-left tr.crit td.name{color:var(--red)}
#gantt-left tr.ms td{background:#F8F4FC}
#gantt-left td.num{text-align:right;font-variant-numeric:tabular-nums}
#gantt-left td.edit{background:#FFFDF2;cursor:text}
#gantt-left td.edit:hover{background:#FFF3B8}
.wbs-toggle{display:inline-block;width:14px;color:var(--muted);cursor:pointer;font-weight:700}
#gantt-svg{display:block}
.gbar{rx:3}
.gbar.task{fill:var(--sky)}.gbar.crit{fill:var(--red)}.gbar.sum{fill:#44546A}.gbar.done{fill:#2E7D32}
.gprog{fill:rgba(0,0,0,.28)}
.gms{fill:var(--purple)}.gms.crit{fill:var(--red)}
.glink{fill:none;stroke:#7A8BA6;stroke-width:1.1}.glink.crit{stroke:var(--red);stroke-width:1.4}
.gtext{font-size:10.5px;fill:#334;pointer-events:none}
.gtoday{stroke:var(--green);stroke-width:1.5;stroke-dasharray:4 3}
.gdead{stroke:#8A5A00;stroke-width:1;stroke-dasharray:3 3}
.gmonth{fill:var(--head);stroke:var(--line)}
.gmonth-t{font-size:11px;fill:var(--navy);font-weight:700}
.gweek-t{font-size:9.5px;fill:var(--muted)}
.grow-alt{fill:#F8FAFD}
.grow-sel{fill:#FFF8E1}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.toolbar .sep{width:1px;height:22px;background:var(--line)}
.toolbar select,.toolbar input[type=text]{border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12px}

/* modal & toast */
#modal-root .backdrop{position:fixed;inset:0;background:rgba(15,25,45,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:12px;width:min(880px,94vw);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .mh{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700;color:var(--navy)}
.modal .mb{padding:14px 16px}
.modal .mf{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:#FAFBFD}
#toast-root{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:60}
.toast{background:var(--navy);color:#fff;padding:9px 14px;border-radius:8px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.25);animation:fade .25s}
.toast.err{background:var(--red)}.toast.ok{background:var(--green)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.slider{display:grid;grid-template-columns:200px 1fr 90px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.slider input[type=range]{width:100%}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chain .node{background:#FDE7E7;border:1px solid #F3B4B4;border-radius:6px;padding:4px 8px;font-size:11px;max-width:220px}
.chain .node b{display:block;color:var(--red)}
.chain .arr{color:var(--red);font-weight:700}
.ms-card{border-left:4px solid var(--green);padding:8px 10px;background:#fff;border-radius:8px;border:1px solid var(--line)}
.ms-card.late{border-left-color:var(--red)}.ms-card.warn{border-left-color:var(--amber)}
.ms-card .c{font-weight:800;color:var(--navy)}
.ms-card .n{font-size:11px;color:var(--muted);margin:2px 0 4px;line-height:1.35}
.ms-card .d{font-size:11.5px}
.bar-row{display:flex;align-items:center;gap:8px;font-size:11px}
.bar-row .bar{height:8px;border-radius:4px;background:var(--sky)}
.detail dl{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;font-size:12px;margin:0}
.detail dt{color:var(--muted)}
@media print{#tabs,#topbar .hdr-right,#foot{display:none}#view{padding:0}#gantt-wrap{height:auto}}