:root{
  color-scheme: dark;
  --bg:#11161d;
  --panel:#1a212b;
  --panel2:#222b37;
  --raise:#2a3543;
  --line:#2f3a48;
  --line-soft:#252e3a;
  --text:#e8edf2;
  --dim:#94a3b4;
  --faint:#64717f;
  --amber:#e0a341;
  --amber-soft:rgba(224,163,65,.14);
  --teal:#47b3a8;
  --teal-soft:rgba(71,179,168,.14);
  --red:#d9694a;
  --red-soft:rgba(217,105,74,.14);
  --violet:#8b7fd4;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#f2f4f7; --panel:#ffffff; --panel2:#f7f9fb; --raise:#eef1f5;
    --line:#d4dbe3; --line-soft:#e4e9ef;
    --text:#151b23; --dim:#5a6875; --faint:#8b97a3;
    --amber-soft:rgba(190,130,20,.13); --teal-soft:rgba(30,140,128,.13); --red-soft:rgba(190,70,40,.13);
    --amber:#b5811f; --teal:#1e8c80; --red:#c0543a; --violet:#6a5cc0;
  }
}
html{scroll-padding-top: env(safe-area-inset-top, 0px);}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

.shell{max-width:1680px;margin:0 auto;padding:20px 18px 60px;}

/* ---------- masthead ---------- */
.masthead{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.masthead h1{font-size:19px;font-weight:600;margin:0 0 3px;letter-spacing:-.01em;}
.masthead p{margin:0;color:var(--dim);font-size:12.5px;max-width:58ch;}
.mast-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:7px 12px;border-radius:6px;font-size:12.5px;transition:border-color .15s,background .15s;
}
.btn:hover{border-color:var(--amber);color:var(--amber);}
.btn.primary{background:var(--amber-soft);border-color:var(--amber);color:var(--amber);}
.btn.ghost{background:transparent;}

/* ---------- drivers ---------- */
.drivers{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:14px 16px;margin-bottom:18px;
}
.drivers-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.drivers-head h2{font-size:13px;font-weight:600;margin:0;}
.drivers-head span{font-size:11.5px;color:var(--faint);}
.driver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;}
.driver label{display:block;font-size:11.5px;color:var(--dim);margin-bottom:5px;}
.driver input,.driver select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:6px 9px;border-radius:5px;font-family:var(--mono);font-size:13px;
}
.driver input:hover,.driver select:hover{border-color:var(--raise);}
.driver .hint{font-size:11px;color:var(--faint);margin-top:5px;line-height:1.45;}
.formula{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:13px;}
.formula h3{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin:0 0 9px;font-weight:500;}
.fml{background:var(--bg);border:1px solid var(--line-soft);border-radius:7px;padding:12px 14px;margin-bottom:10px;}
.fml code{font-family:var(--mono);font-size:12px;color:var(--amber);display:block;line-height:1.75;}
.fml .val{color:var(--teal);}
.fml .lbl{font-size:11px;color:var(--dim);margin-bottom:7px;}
.fml-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.fml-k{background:var(--panel2);border:1px solid var(--line-soft);border-radius:6px;padding:9px 11px;}
.fml-k .kl{font-size:10.5px;color:var(--faint);}
.fml-k .kv{font-family:var(--mono);font-size:14px;color:var(--teal);margin-top:2px;}
.presets{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  padding:4px 10px;border-radius:20px;font-size:11.5px;transition:all .15s;
}
.chip:hover,.chip.on{border-color:var(--teal);color:var(--teal);background:var(--teal-soft);}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:262px 1fr;gap:16px;align-items:start;}
@media (max-width:1100px){.workspace{grid-template-columns:1fr;}}

.rail{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:13px;position:sticky;top:12px;max-height:calc(100vh - 40px);overflow-y:auto;
}
@media (max-width:1100px){.rail{position:static;max-height:none;}}
.rail h2{font-size:12.5px;font-weight:600;margin:0 0 3px;}
.rail .sub{font-size:11px;color:var(--faint);margin:0 0 11px;}
.cat-group{margin-bottom:13px;}
.cat-group > .gh{font-size:10.5px;color:var(--faint);margin-bottom:6px;padding-left:7px;border-left:2px solid var(--line);}

.svc{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:7px 9px;margin-bottom:5px;cursor:grab;transition:border-color .13s,transform .13s;
  display:flex;justify-content:space-between;align-items:center;gap:8px;
}
.svc:hover{border-color:var(--amber);}
.svc:active{cursor:grabbing;}
.svc.dragging{opacity:.4;}
.svc.placed{cursor:default;}
.svc.placed:hover{border-color:var(--line);}
.svc.placed .fig{color:var(--teal);}
.svc .nm{font-size:12px;font-weight:500;}
.svc .fig{font-size:10.5px;color:var(--faint);font-family:var(--mono);white-space:nowrap;}

/* ---------- nodes ---------- */
.nodes{display:flex;flex-direction:column;gap:14px;}
.node{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;
  transition:border-color .15s;
}
.node.over{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset;}
.node.breach{border-color:var(--red);}
.node-head{padding:12px 14px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.node-id{display:flex;align-items:center;gap:9px;}
.node-id input{
  background:transparent;border:1px solid transparent;color:var(--text);
  font-family:var(--sans);font-size:14px;font-weight:600;padding:2px 5px;border-radius:4px;width:170px;
}
.node-id input:hover,.node-id input:focus{border-color:var(--line);background:var(--bg);outline:none;}
.node-cfg{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.cfg-f{display:flex;align-items:center;gap:5px;}
.cfg-f span{font-size:10.5px;color:var(--faint);}
.cfg-f select,.cfg-f input{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:4px 7px;border-radius:5px;font-family:var(--mono);font-size:12px;
}
.cfg-f input{width:62px;}
.x{background:none;border:none;color:var(--faint);font-size:16px;line-height:1;padding:3px 6px;border-radius:4px;}
.x:hover{color:var(--red);background:var(--red-soft);}

/* capacity meters — the hero */
.meters{padding:11px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;background:var(--panel2);border-bottom:1px solid var(--line-soft);}
.meter .mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;}
.meter .ml{font-size:11px;color:var(--dim);}
.meter .mv{font-size:12px;font-family:var(--mono);font-weight:500;}
.track{height:7px;background:var(--bg);border-radius:4px;overflow:hidden;position:relative;border:1px solid var(--line-soft);}
.fill{height:100%;border-radius:3px;transition:width .34s cubic-bezier(.4,0,.2,1),background .2s;}
.fill.ok{background:var(--teal);}
.fill.warn{background:var(--amber);}
.fill.over{background:var(--red);}
.meter .mf{font-size:10.5px;color:var(--faint);margin-top:4px;font-family:var(--mono);}

.dropzone{padding:12px 14px;min-height:74px;display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;}
.dropzone.empty{
  align-items:center;justify-content:center;color:var(--faint);font-size:12px;
  border:1px dashed var(--line);border-radius:7px;margin:12px 14px;min-height:56px;
}
/* architecture bands */
.arch{padding:10px 14px 13px;}
.band{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:8px 0;border-left:2px solid var(--tc);padding-left:11px;margin-bottom:5px;position:relative;}
.band + .band::before{
  content:'';position:absolute;left:-2px;top:-5px;height:5px;width:2px;background:var(--line);
}
.band-rail{display:flex;flex-direction:column;gap:1px;padding-top:2px;}
.band-l{font-size:11.5px;color:var(--tc);font-weight:500;line-height:1.25;}
.band-z{font-size:10px;color:var(--faint);}
.band-t{font-size:10px;color:var(--faint);margin-top:2px;}
.band-body{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;}
@media (max-width:640px){
  .band{grid-template-columns:1fr;gap:6px;}
  .band-rail{flex-direction:row;align-items:baseline;gap:8px;}
}
/* bench */
.bench{background:var(--panel);border:1px dashed var(--line);border-radius:9px;margin-top:14px;overflow:hidden;}
.bench.over{border-color:var(--violet);border-style:solid;}
.bench-head{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);}
.bench-head h3{font-size:13px;font-weight:600;margin:0 0 2px;color:var(--violet);}
.bench-head p{margin:0;font-size:11px;color:var(--faint);}
.bench-sum{font-family:var(--mono);font-size:12px;color:var(--violet);}
.bench-body{padding:12px 14px;display:flex;flex-wrap:wrap;gap:7px;min-height:52px;align-items:center;}
.bench-body .hintx{color:var(--faint);font-size:12px;}
.bench-body .placed-svc{border-style:dashed;}
.placed-svc{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:6px 9px;display:flex;align-items:center;gap:9px;cursor:grab;font-size:12px;
  transition:border-color .13s;
}
.placed-svc:hover{border-color:var(--amber);}
.placed-svc.dragging{opacity:.4;}
.placed-svc .pv{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.placed-svc .pv.manual{color:var(--violet);}
.placed-svc button{background:none;border:none;color:var(--faint);font-size:14px;line-height:1;padding:0 2px;}
.placed-svc button:hover{color:var(--red);}

.warnbar{padding:9px 14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px;}
.warn{font-size:11.5px;display:flex;gap:7px;align-items:flex-start;}
.warn .tag{font-family:var(--mono);font-size:9.5px;padding:1px 6px;border-radius:3px;white-space:nowrap;margin-top:1px;}
.warn.err .tag{background:var(--red-soft);color:var(--red);border:1px solid var(--red);}
.warn.cau .tag{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber);}
.warn.inf .tag{background:var(--teal-soft);color:var(--teal);border:1px solid var(--teal);}
.warn .wt{color:var(--dim);}

.addnode{
  width:100%;background:transparent;border:1px dashed var(--line);color:var(--faint);
  padding:12px;border-radius:9px;font-size:12.5px;transition:all .15s;
}
.addnode:hover{border-color:var(--teal);color:var(--teal);}

/* ---------- output ---------- */
.output{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.out-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.out-head h2{font-size:14px;font-weight:600;margin:0;}
.out-head .meta{font-size:11.5px;color:var(--faint);font-family:var(--mono);}
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:840px;}
th{
  text-align:left;padding:9px 12px;font-size:11px;color:var(--faint);font-weight:500;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel2);
  position:sticky;top:0;
}
td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
tr:last-child td{border-bottom:none;}
td.n{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums;}
td.why{color:var(--dim);font-size:11.5px;line-height:1.45;min-width:270px;}
tr.nodehdr td{background:var(--panel2);font-weight:600;font-size:12px;padding:7px 12px;}
tr.total td{background:var(--panel2);font-weight:600;border-top:1px solid var(--line);}
.edit{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  width:66px;padding:3px 6px;border-radius:4px;font-family:var(--mono);font-size:12px;
}
.edit.manual{border-color:var(--violet);color:var(--violet);}
.rst{background:none;border:none;color:var(--faint);font-size:11px;padding:2px 4px;}
.rst:hover{color:var(--amber);}

.legend{padding:11px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap;}
.legend b{color:var(--violet);font-weight:500;}


/* ---------- detail drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,9,13,.62);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;}
.scrim.show{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,100%);
  background:var(--panel);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:61;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.show{transform:translateX(0);}
@media (max-width:600px){.drawer{width:100%;border-left:none;}}
.dw-head{padding:16px 18px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.dw-head h3{margin:0 0 5px;font-size:16px;font-weight:600;line-height:1.3;}
.dw-badges{display:flex;gap:6px;flex-wrap:wrap;}
.bdg{font-size:10.5px;padding:2px 8px;border-radius:20px;border:1px solid var(--tc,var(--line));color:var(--tc,var(--dim));}
.bdg.pl{border-color:var(--teal);color:var(--teal);}
.bdg.un{border-color:var(--faint);color:var(--faint);}
.bdg.bn{border-color:var(--violet);color:var(--violet);}
.dw-body{padding:16px 18px 30px;overflow-y:auto;flex:1;}
.dw-sec{margin-bottom:19px;}
.dw-sec > h4{font-size:10.5px;color:var(--faint);font-weight:500;margin:0 0 7px;letter-spacing:.04em;text-transform:uppercase;}
.dw-sec p{margin:0;font-size:13px;line-height:1.55;color:var(--text);}
.dw-sec p.soft{color:var(--dim);font-size:12.5px;}
.res{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:7px;overflow:hidden;}
.res div{background:var(--panel2);padding:9px 11px;}
.res .rl{font-size:10.5px;color:var(--faint);margin-bottom:2px;}
.res .rv{font-size:14px;font-family:var(--mono);font-weight:500;}
.res .rv.man{color:var(--violet);}
.dw-note{border-left:2px solid var(--amber);padding:2px 0 2px 11px;}
.dw-note p{font-size:12.5px;color:var(--dim);line-height:1.55;}
.dwx{background:none;border:none;color:var(--faint);font-size:22px;line-height:1;padding:0 4px;}
.dwx:hover{color:var(--red);}
.svc,.placed-svc{cursor:pointer;}
.svc[draggable="true"],.placed-svc[draggable="true"]{cursor:grab;}


/* ---------- procurement spec ---------- */
.spec{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.spec-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.spec-head h2{font-size:14px;font-weight:600;margin:0 0 2px;}
.spec-head p{margin:0;font-size:11.5px;color:var(--faint);}
.spec-body{padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;}
.sv{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel2);}
.sv-h{padding:10px 13px;border-bottom:1px solid var(--line);background:var(--raise);}
.sv-h strong{font-size:13px;display:block;}
.sv-h span{font-size:11px;color:var(--dim);}
.sv table{width:100%;min-width:0;font-size:12px;}
.sv th,.sv td{background:transparent;position:static;border-bottom:1px solid var(--line-soft);padding:7px 13px;}
.sv th{width:112px;color:var(--faint);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;vertical-align:top;}
.sv td{font-family:var(--mono);font-size:12px;line-height:1.5;}
.sv tr:last-child th,.sv tr:last-child td{border-bottom:none;}
.sv .warnrow td{font-family:var(--sans);color:var(--amber);font-size:11.5px;}
.spec-notes{padding:0 16px 16px;}
.spec-notes h4{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;font-weight:500;}
.spec-notes ul{margin:0;padding-left:18px;}
.spec-notes li{font-size:12px;color:var(--dim);line-height:1.6;margin-bottom:5px;}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--panel2);border:1px solid var(--teal);color:var(--teal);
  padding:9px 16px;border-radius:7px;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .22s;z-index:50;
}
.toast.show{opacity:1;}