:root{
  --ink:#0c1622;--ink2:#11202f;--panel:#13283a;--panel2:#163146;--line:#23445e;
  --blue:#54c8e6;--blue-dim:#2e6f8a;--amber:#f4a836;--red:#ff6b6b;--green:#5fd39a;
  --paper:#eaf2f6;--paper-dim:#9fb6c4;--grid:#1a3145;
  --field:#0e2333;--btn:#10293a;--plot-bg:#0a1622;--on-accent:#072233;--hover:#123247;
  --bar:#0c1a27;--row-line:#1a3145;--badge-bg:#0c2230;--panel-side:#0a1a27;
  --overlay:rgba(10,22,34,.72);--glow:#1a3a52;--cavity:#0c1f2e;
  --ok-bg:#0f2a22;--ok-line:#2f6b54;--warn-bg:#2a2008;--warn-line:#7a5a18;
  --bad-bg:#2a1620;--bad-line:#7a2a2a;
  --tagsub-bg:#2a1633;--tagsub-line:#6b4a7a;--tagsub-ink:#d39af4;
}
html.light{
  --ink:#eef3f6;--ink2:#e2ebf1;--panel:#ffffff;--panel2:#f0f6f9;--line:#c3d2dc;
  --blue:#0a7ea4;--blue-dim:#7db4c9;--amber:#a06600;--red:#c22f2f;--green:#177a4c;
  --paper:#17252e;--paper-dim:#546874;--grid:#d5e0e7;
  --field:#ffffff;--btn:#e6f0f6;--plot-bg:#f6fafc;--on-accent:#ffffff;--hover:#d9e8f0;
  --bar:#e7eef3;--row-line:#dbe5ec;--badge-bg:#e3f0f5;--panel-side:#eef4f8;
  --overlay:rgba(255,255,255,.82);--glow:#d3e6f0;--cavity:#e9f1f5;
  --ok-bg:#e4f5ec;--ok-line:#93cdb0;--warn-bg:#faf1da;--warn-line:#d9b56e;
  --bad-bg:#fbe8e8;--bad-line:#e29c9c;
  --tagsub-bg:#f1e5f8;--tagsub-line:#bb92d1;--tagsub-ink:#7a3f9d;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:radial-gradient(1200px 600px at 80% -10%, var(--glow) 0%, transparent 60%),var(--ink);
  color:var(--paper);font-family:'Segoe UI',system-ui,sans-serif;line-height:1.45;
  -webkit-font-smoothing:antialiased;height:100vh;overflow:hidden;display:flex;flex-direction:column;
}
.mono{font-family:'Consolas','JetBrains Mono',monospace;}

/* ---------- top bar ---------- */
header.top{
  display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink2),var(--ink));flex:0 0 auto;
}
header .brand h1{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em;}
header .brand .sub{color:var(--paper-dim);font-size:12px;margin-top:2px;}
header .spacer{flex:1;}
.badge{font-family:'Consolas',monospace;font-size:11px;color:var(--blue);border:1px solid var(--blue-dim);
  border-radius:5px;padding:5px 9px;background:var(--badge-bg);white-space:nowrap;}

/* ---------- tabs ---------- */
nav.tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--bar);flex:0 0 auto;}
nav.tabs button{
  background:none;border:none;border-bottom:2px solid transparent;color:var(--paper-dim);
  font-size:13px;font-weight:600;padding:12px 16px;cursor:pointer;transition:.15s;font-family:inherit;
}
nav.tabs button:hover{color:var(--paper);}
nav.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);}

/* ---------- view container ---------- */
main{flex:1 1 auto;overflow:hidden;display:flex;min-height:0;}
.view{display:none;flex:1;min-height:0;}
.view.active{display:flex;}
#view-library.active{flex-direction:column;}

/* ---------- driver library ---------- */
.lib{display:flex;flex:1;min-height:0;}
.lib-list{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);}
.lib-controls{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bar);flex:0 0 auto;}
.lib-controls .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.search{flex:1 1 240px;min-width:180px;background:var(--field);color:var(--paper);border:1px solid var(--line);
  border-radius:7px;padding:9px 12px;font-size:14px;font-family:inherit;}
.search:focus{outline:none;border-color:var(--blue-dim);}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-family:'Consolas',monospace;font-size:11px;border:1px solid var(--line);background:var(--field);
  color:var(--paper-dim);border-radius:14px;padding:6px 12px;cursor:pointer;transition:.12s;}
.chip:hover{border-color:var(--blue-dim);color:var(--paper);}
.chip.active{background:var(--blue);color:var(--on-accent);border-color:var(--blue);font-weight:700;}
.chip-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);margin-right:2px;align-self:center;}
.lib-count{font-family:'Consolas',monospace;font-size:11px;color:var(--paper-dim);margin-left:auto;align-self:center;}

.table-scroll{overflow:auto;flex:1 1 auto;}
table.drivers{width:100%;border-collapse:collapse;font-size:13px;}
table.drivers thead th{
  position:sticky;top:0;background:var(--bar);z-index:2;text-align:right;padding:9px 10px;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:600;
  border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none;
}
table.drivers thead th:first-child{text-align:left;}
table.drivers thead th:hover{color:var(--paper);}
table.drivers thead th .arrow{opacity:.5;font-size:9px;}
table.drivers td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--row-line);font-family:'Consolas',monospace;white-space:nowrap;}
table.drivers td:first-child{text-align:left;font-family:'Segoe UI',sans-serif;font-weight:600;}
table.drivers tbody tr{cursor:pointer;}
table.drivers tbody tr:hover{background:var(--field);}
table.drivers tbody tr.sel{background:var(--hover);box-shadow:inset 3px 0 0 var(--blue);}
.tag{font-family:'Consolas',monospace;font-size:10px;padding:2px 7px;border-radius:10px;display:inline-block;}
.tag.sub{background:var(--tagsub-bg);color:var(--tagsub-ink);border:1px solid var(--tagsub-line);}
.tag.woofer{background:var(--badge-bg);color:var(--blue);border:1px solid var(--blue-dim);}
.tag.midrange,.tag.midbass{background:var(--ok-bg);color:var(--green);border:1px solid var(--ok-line);}
.tag.compression{background:var(--warn-bg);color:var(--amber);border:1px solid var(--warn-line);}

/* ---------- detail panel ---------- */
.lib-detail{flex:0 0 380px;overflow:auto;padding:20px;background:var(--panel-side);}
.lib-detail .empty{color:var(--paper-dim);font-size:13px;text-align:center;margin-top:60px;line-height:1.7;}
.dt-head h2{margin:0;font-size:22px;font-weight:800;}
.dt-head .meta{color:var(--paper-dim);font-size:12px;margin-top:3px;font-family:'Consolas',monospace;}
.beginner{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);
  border-radius:10px;padding:14px;margin:16px 0;font-size:13.5px;line-height:1.6;}
.beginner b{color:var(--blue);}
.spec-grp{margin-top:18px;}
.spec-grp h3{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:700;margin:0 0 8px;}
.spec-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--row-line);font-size:13px;}
.spec-row .k{color:var(--paper-dim);}
.spec-row .v{font-family:'Consolas',monospace;color:var(--paper);}
.flag{margin-top:8px;padding:9px 12px;border-radius:8px;font-size:12.5px;border:1px solid;}
.flag.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}
.flag.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--amber);}

/* add-to-build button + horn picker (detail panel) */
.add-build{width:100%;margin:14px 0;background:var(--btn);border:1px solid var(--blue-dim);color:var(--blue);
  border-radius:8px;padding:11px;cursor:pointer;font-size:13.5px;font-weight:700;font-family:inherit;}
.add-build:hover{background:var(--hover);}
.add-build.added{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}
.hf-horn-pick{width:100%;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:7px;
  padding:9px;font-size:13px;font-family:'Consolas',monospace;}
.hf-horn-pick:focus{outline:none;border-color:var(--blue-dim);}

/* ---------- build tray (Driver Library footer) ---------- */
.build-tray{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--bar);}
.bt-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);flex:0 0 auto;}
.bt-chips{flex:1 1 auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0;}
.bt-empty{font-size:12px;color:var(--paper-dim);font-style:italic;}
.bt-chip{display:inline-flex;align-items:center;gap:3px;font-family:'Consolas',monospace;font-size:11px;
  background:var(--field);border:1px solid var(--blue-dim);color:var(--paper);border-radius:14px;padding:3px 5px;}
.bt-q{font-weight:700;color:var(--blue);margin:0 1px;}
.bt-step{background:none;border:none;color:var(--paper-dim);cursor:pointer;font-size:13px;line-height:1;padding:1px 5px;border-radius:8px;font-family:inherit;}
.bt-step:hover{color:var(--blue);background:var(--btn);}
.bt-x{background:none;border:none;color:var(--paper-dim);cursor:pointer;font-size:11px;line-height:1;padding:2px 4px;border-radius:8px;}
.bt-x:hover{color:var(--red);background:var(--bad-bg);}
/* "+ Add" button in each driver-table row */
.add-col{white-space:nowrap;}
td.add-cell{text-align:center;}
.add-row{background:var(--btn);border:1px solid var(--blue-dim);color:var(--blue);border-radius:6px;
  padding:3px 9px;cursor:pointer;font-size:11px;font-weight:700;font-family:inherit;white-space:nowrap;}
.add-row:hover{background:var(--hover);}
.add-row.added{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}
.bt-go{flex:0 0 auto;background:var(--blue);color:var(--on-accent);border:1px solid var(--blue);border-radius:7px;
  padding:10px 16px;cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;white-space:nowrap;}
.bt-go:hover:not(:disabled){background:var(--blue);}
.bt-go:disabled{opacity:.4;cursor:not-allowed;}

.help{cursor:help;border-bottom:1px dotted var(--paper-dim);}

/* ---------- generic placeholder view ---------- */
.placeholder{margin:auto;text-align:center;color:var(--paper-dim);max-width:520px;padding:40px;}
.placeholder h2{color:var(--paper);font-size:20px;}
.placeholder .roadmap{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:18px 22px;margin-top:18px;font-size:13.5px;line-height:1.8;}
.placeholder .roadmap b{color:var(--blue);}
.placeholder > .bt-go{margin-top:16px;}
/* The `hidden` attribute must actually hide things. The UA rule that implements
   it is `[hidden]{display:none}`, which LOSES to any author rule that sets
   display — so `.shelf-in{display:flex}` left the signed-in panel permanently on
   screen, showing "Signed in as" with no name while the sign-in form sat right
   above it. Global, because every future flex/grid block hits the same trap. */
[hidden]{display:none!important;}

.shelf-bar{display:block;margin:14px 0 4px;}
.shelf-row{display:flex;gap:8px;}
.shelf-row .search{flex:1;min-width:0;}
.shelf-pw{flex:0 1 190px!important;}
.shelf-alts{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;}
.shelf-msg{margin-top:8px;font-size:12px;line-height:1.5;color:var(--paper-dim);min-height:1em;}
.shelf-msg.bad{color:var(--red);}
.shelf-in{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.shelf-who{font-size:13px;color:var(--paper-dim);}
.shelf-who b{color:var(--blue);font-family:'Consolas',monospace;}

/* The recovery code is shown exactly once — only its hash is kept server-side —
   so this deliberately interrupts rather than sitting quietly in a corner. */
.shelf-code{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:14px 16px;}
.shelf-code-h{font-size:12.5px;font-weight:700;color:var(--amber);margin-bottom:9px;}
.shelf-code-val{font-family:'Consolas',monospace;font-size:19px;letter-spacing:.06em;color:var(--paper);
  background:var(--cavity);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
  text-align:center;user-select:all;margin-bottom:9px;word-break:break-all;}
.shelf-code-note{font-size:12px;line-height:1.55;color:var(--paper-dim);margin-bottom:11px;}
button.badge{cursor:pointer;font-family:inherit;font-size:inherit;}
button.badge:hover{border-color:var(--blue);}
.saved-row.resume{border-color:var(--blue-dim);background:var(--field);}
.saved-row{padding:9px 11px;border:1px solid var(--line);border-radius:8px;margin-bottom:7px;cursor:pointer;transition:.12s;}
.saved-row:hover{border-color:var(--blue-dim);background:var(--btn);}
.saved-row .saved-drv{color:var(--paper-dim);font-size:12px;}
.saved-row .saved-when{display:block;color:var(--paper-dim);font-size:11px;font-family:'Consolas',monospace;margin-top:3px;}

/* ---------- cabinet designer ---------- */
.dz{display:flex;flex:1;min-height:0;}
.dz-controls{flex:0 0 360px;overflow:auto;padding:16px 18px;background:var(--panel-side);}
.dz-results{flex:1 1 auto;overflow:auto;padding:18px 22px;min-width:0;}
/* draggable column dividers (widths persist in localStorage) */
.dz-split{flex:0 0 6px;cursor:col-resize;background:var(--line);opacity:.55;transition:opacity .15s,background .15s;}
.dz-split:hover,.dz-split.drag{background:var(--blue-dim);opacity:1;}
/* the live 3D panel riding along in the designer */
.dz .view3d{flex:0 0 32%;min-width:240px;background:var(--plot-bg);}
.dz-empty{color:var(--paper-dim);text-align:center;margin-top:60px;font-size:14px;}

/* 3D preview tab */
.view3d{position:relative;flex:1 1 auto;min-height:0;}
#cab3d{display:block;width:100%;height:100%;}
.view3d-legend{position:absolute;top:14px;left:16px;display:flex;flex-direction:column;gap:5px;background:var(--overlay);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:11.5px;color:var(--paper-dim);pointer-events:none;}
.view3d-legend span{display:flex;align-items:center;gap:7px;}
.view3d-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;box-sizing:border-box;}
.view3d-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--overlay);border:1px solid var(--line);border-radius:20px;padding:5px 14px;font-size:11.5px;color:var(--paper-dim);pointer-events:none;}
.view3d-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--paper-dim);text-align:center;font-size:14px;pointer-events:none;}

.dz-name-row{display:flex;gap:8px;margin-bottom:14px;}
.dz-name{flex:1;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:9px 11px;font-size:14px;font-weight:600;font-family:inherit;}
.dz-name:focus{outline:none;border-color:var(--blue-dim);}
.dz-unit{flex:0 0 44px;background:var(--blue);color:var(--on-accent);border:none;border-radius:7px;font-weight:700;font-family:'Consolas',monospace;cursor:pointer;font-size:13px;}

.dz-sec{margin-bottom:18px;}
.dz-sec h3{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:700;margin:0 0 9px;}
.dz-fields{display:flex;flex-direction:column;gap:9px;}
.dz-fields label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--paper-dim);}
.dz-fields input,.dz-fields select{flex:0 0 130px;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:13px;font-family:'Consolas',monospace;}
.dz-fields input:focus,.dz-fields select:focus{outline:none;border-color:var(--blue-dim);}
.dz-note{font-size:11px;color:var(--paper-dim);margin-top:7px;line-height:1.5;}

.dz-way{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.dz-rbadge{flex:0 0 32px;text-align:center;font-family:'Consolas',monospace;font-size:10px;font-weight:700;border-radius:5px;padding:5px 0;}
.dz-rbadge.woofer,.dz-rbadge.sub{background:var(--badge-bg);color:var(--blue);border:1px solid var(--blue-dim);}
.dz-rbadge.mid{background:var(--ok-bg);color:var(--green);border:1px solid var(--ok-line);}
.dz-rbadge.hf{background:var(--tagsub-bg);color:var(--tagsub-ink);border:1px solid var(--tagsub-line);}
.dz-role{flex:0 0 96px;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px;font-size:12px;}
.dz-drv{flex:1 1 auto;min-width:0;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:6px;font-size:12px;font-family:'Consolas',monospace;}
.dz-del{flex:0 0 26px;background:none;border:1px solid var(--line);color:var(--paper-dim);border-radius:6px;cursor:pointer;padding:5px 0;}
.dz-del:hover{border-color:var(--red);color:var(--red);}
.dz-add{margin-top:6px;background:var(--field);border:1px dashed var(--blue-dim);color:var(--blue);border-radius:7px;padding:8px;width:100%;cursor:pointer;font-size:12.5px;font-family:inherit;}
.dz-add:hover{background:var(--btn);}

/* suggest-a-box recommendation */
.dz-suggest{margin-top:10px;width:100%;background:var(--btn);border:1px solid var(--blue-dim);color:var(--blue);border-radius:7px;padding:9px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;}
.dz-suggest:hover{background:var(--hover);}
.dz-rec{margin-top:10px;display:flex;flex-direction:column;gap:9px;}
.dz-rec-hint{font-size:11.5px;color:var(--paper-dim);}
.dz-rec-note{font-size:12px;color:var(--paper-dim);padding:8px;border:1px dashed var(--line);border-radius:7px;}
.dz-rec-opt{background:var(--plot-bg);border:1px solid var(--line);border-radius:9px;padding:10px 11px;}
.dz-rec-opt.pref{border-color:var(--blue-dim);box-shadow:inset 0 0 0 1px rgba(84,200,230,.18);}
.dz-rec-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;}
.dz-rec-title{font-size:13px;font-weight:700;color:var(--paper);}
.dz-rec-badge{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue-dim);border-radius:10px;padding:2px 7px;font-weight:700;margin-left:6px;}
.dz-rec-apply{background:var(--blue);color:var(--on-accent);border:none;border-radius:6px;padding:6px 14px;font-weight:700;cursor:pointer;font-family:inherit;font-size:12px;}
.dz-rec-apply:hover{filter:brightness(1.08);}
.dz-rec-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;}
.dz-rec-k{color:var(--paper-dim);}
.dz-rec-val{font-family:'Consolas',monospace;color:var(--paper);text-align:right;}
.dz-rec-warn{margin-top:7px;font-size:11.5px;color:var(--amber);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:6px;padding:6px 8px;}
.dz-rec-foot{font-size:11px;color:var(--paper-dim);line-height:1.5;}
.dz-rec-foot b{color:var(--paper);}

.dz-actions{display:flex;gap:8px;}
.dz-btn{flex:1;background:var(--btn);border:1px solid var(--line);color:var(--paper);border-radius:7px;padding:10px;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;}
.dz-btn:hover{border-color:var(--blue-dim);}
.dz-btn.primary{background:var(--blue);color:var(--on-accent);border-color:var(--blue);}

/* results */
.dz-grid2{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.dz-card{flex:1 1 220px;background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:11px;padding:15px 17px;}
.dz-card-h{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);font-weight:700;}
.dz-big{font-size:30px;font-weight:800;margin:6px 0 2px;font-family:'Consolas',monospace;color:var(--paper);}
.dz-big.ok{color:var(--green);} .dz-big.warn{color:var(--amber);} .dz-big.bad{color:var(--red);}
.dz-unit-sm{font-size:14px;font-weight:400;color:var(--paper-dim);}
.dz-sub{font-size:12px;color:var(--paper-dim);margin-top:5px;line-height:1.5;}
.dz-bar{position:relative;height:9px;background:var(--cavity);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:8px 0 2px;}
.dz-bar-fill{height:100%;background:var(--blue);}
.dz-bar-fill.ok{background:var(--green);} .dz-bar-fill.warn{background:var(--amber);} .dz-bar-fill.bad{background:var(--red);} .dz-bar-fill.neutral{background:var(--blue);}
.dz-bar-mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--paper);box-shadow:0 0 0 1px #0008;}

.dz-sec2{margin:20px 0;}
.dz-sec2 h3{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 11px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.dz-h-note,.dz-sec2 h3 .dz-h-note{color:var(--paper-dim);font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;}
.dz-h-btn{margin-left:auto;background:var(--btn);border:1px solid var(--blue-dim);color:var(--blue);border-radius:6px;padding:4px 11px;cursor:pointer;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:inherit;}
.dz-h-btn:hover{background:var(--blue);color:var(--on-accent);border-color:var(--blue);}

/* inline glossary: a small "?" chip with a pure-CSS hover tooltip */
.gloss{position:relative;cursor:help;}
.gloss-q{display:inline-flex;align-items:center;justify-content:center;margin-left:3px;width:13px;height:13px;font-size:9px;font-weight:700;line-height:1;color:var(--blue);border:1px solid var(--blue-dim);border-radius:50%;vertical-align:middle;}
.gloss:hover .gloss-q{background:var(--blue);color:var(--on-accent);}
.gloss::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 9px);width:230px;background:var(--cavity);border:1px solid var(--blue-dim);color:var(--paper);padding:9px 11px;border-radius:8px;font-size:11.5px;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s,transform .12s;z-index:50;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.55);}
.gloss::before{content:"";position:absolute;left:11px;top:calc(100% + 4px);border:5px solid transparent;border-bottom-color:var(--blue-dim);opacity:0;visibility:hidden;transition:opacity .12s;z-index:51;}
.gloss:hover::after,.gloss:hover::before{opacity:1;visibility:visible;transform:translateY(0);}
/* keep the right-edge cards' tooltips from clipping: grow them leftward */
.dz-pcards .dz-pcard:last-child .gloss::after,.dz-grid2 .dz-card:last-child .gloss::after{left:auto;right:0;}
.dz-pcards .dz-pcard:last-child .gloss::before,.dz-grid2 .dz-card:last-child .gloss::before{left:auto;right:11px;}

.dz-checks{display:flex;flex-direction:column;gap:7px;}
.dz-check{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:8px;border:1px solid;font-size:12.5px;}
.dz-check b{font-size:12.5px;}
.dz-check span{color:var(--paper-dim);line-height:1.5;}
.dz-check.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}
.dz-check.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--amber);}
.dz-check.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--red);}

.dz-views{display:flex;gap:14px;}
.dz-view{flex:1;background:var(--plot-bg);border:1px solid var(--line);border-radius:10px;padding:8px;}
.dz-view.wide{margin-top:12px;}
.dz-view svg{width:100%;height:auto;display:block;max-height:420px;}
.dz-view.wide svg{max-height:180px;}
.dz-vh{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);font-weight:700;margin-bottom:4px;}

.dz-table{width:100%;border-collapse:collapse;font-size:13px;}
.dz-table th{text-align:right;padding:7px 10px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);border-bottom:1px solid var(--line);}
.dz-table th:first-child{text-align:left;}
.dz-table td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--row-line);font-family:'Consolas',monospace;}
.dz-table td:first-child{text-align:left;font-family:'Segoe UI',sans-serif;}
.dz-pill{font-family:'Consolas',monospace;font-size:9px;padding:1px 6px;border-radius:8px;margin-left:6px;}
.dz-pill.ok{background:var(--ok-bg);color:var(--green);border:1px solid var(--ok-line);}
.dz-pill.warn{background:var(--warn-bg);color:var(--amber);border:1px solid var(--warn-line);}

.dz-sheets{display:flex;gap:16px;flex-wrap:wrap;}
.dz-sheet{flex:1 1 440px;max-width:620px;}
.dz-sheet svg{display:block;border-radius:4px;width:100%;height:auto;}

/* ---------- physics: performance cards + plots ---------- */
.dz-pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.dz-pcard{background:var(--plot-bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.dz-pc-h{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--paper-dim);font-weight:700;margin-bottom:5px;}
.dz-pc-v{font-size:21px;font-weight:700;font-family:'Consolas',monospace;color:var(--paper);line-height:1.1;}
.dz-pc-s{font-size:10.5px;color:var(--paper-dim);margin-top:3px;}
.dz-pcard.ok .dz-pc-v{color:var(--green);}
.dz-pcard.warn{border-color:var(--warn-line);}
.dz-pcard.warn .dz-pc-v{color:var(--amber);}
.dz-pcard.bad{border-color:var(--bad-line);}
.dz-pcard.bad .dz-pc-v{color:var(--red);}
.dz-plots{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:14px;}
.dz-plot{background:var(--plot-bg);border:1px solid var(--line);border-radius:10px;padding:10px;}
.dz-plot svg{width:100%;height:auto;display:block;}
@media(max-width:980px){.dz-pcards{grid-template-columns:repeat(2,1fr);}}

/* ---------- crossover plan ---------- */
.dz-xstyle{margin-left:auto;display:inline-flex;border:1px solid var(--blue-dim);border-radius:7px;overflow:hidden;}
.dz-xstyle-btn{background:var(--field);color:var(--paper-dim);border:none;padding:5px 12px;font-size:11px;font-family:inherit;font-weight:700;letter-spacing:.03em;cursor:pointer;}
.dz-xstyle-btn+.dz-xstyle-btn{border-left:1px solid var(--blue-dim);}
.dz-xstyle-btn.on{background:var(--blue-dim);color:var(--ink);}
.dz-xstyle-btn:not(.on):hover{color:var(--paper);background:var(--hover);}
.dz-xmode{margin-left:8px;background:var(--field);color:var(--paper);border:1px solid var(--blue-dim);border-radius:6px;padding:4px 8px;font-size:11px;font-family:inherit;cursor:pointer;}
.dz-xmode:focus{outline:none;border-color:var(--blue);}
.dz-xopt{display:inline-block;margin-left:6px;font-size:9px;letter-spacing:.05em;color:var(--paper-dim);background:var(--field);border:1px solid var(--line);border-radius:9px;padding:1px 7px;vertical-align:middle;}
.dz-xpad-sub{color:var(--paper-dim);}
.dz-xpoints{display:flex;flex-direction:column;gap:10px;}
.dz-xpoint{background:var(--plot-bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;}
.dz-xp-top{display:flex;align-items:center;gap:10px;}
.dz-xp-title{font-size:13px;font-weight:700;color:var(--paper);}
.dz-xp-fc{margin-left:auto;font-size:11.5px;color:var(--paper-dim);display:flex;align-items:center;gap:7px;}
.dz-xfc{width:78px;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12.5px;font-family:'Consolas',monospace;text-align:right;}
.dz-xfc:focus{outline:none;border-color:var(--blue-dim);}
.dz-xhp{width:78px;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12.5px;font-family:'Consolas',monospace;text-align:right;}
.dz-xhp:focus{outline:none;border-color:var(--blue-dim);}
.dz-xhp::placeholder{color:var(--paper-dim);opacity:.75;}
.dz-xp-meta{font-size:11px;color:var(--paper-dim);font-family:'Consolas',monospace;margin-top:4px;}
.dz-xwarn{margin-top:8px;font-size:11.5px;color:var(--amber);background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:6px;padding:6px 8px;line-height:1.45;}
.dz-xsug{margin-top:6px;font-size:11px;color:var(--paper-dim);}
.dz-xp-secs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.dz-xsec-h{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:6px;}
.dz-chips{display:flex;flex-wrap:wrap;gap:6px;}
.dz-chip{font-size:11px;font-family:'Consolas',monospace;color:var(--paper-dim);background:var(--field);border:1px solid var(--line);border-radius:13px;padding:4px 10px;}
.dz-chip b{color:var(--paper);font-weight:700;}
.dz-chip.L{border-color:var(--blue-dim);}
.dz-chip.C{border-color:var(--ok-line);}
.dz-xpads{margin-top:12px;background:var(--plot-bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;}
.dz-xpads-h{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:8px;}
.dz-xpad{display:flex;align-items:baseline;gap:10px;font-size:12.5px;padding:4px 0;border-top:1px solid var(--panel);}
.dz-xpad:first-of-type{border-top:none;}
.dz-xpad-name{flex:0 0 auto;font-weight:600;color:var(--paper);}
.dz-xpad-val{color:var(--paper-dim);font-family:'Consolas',monospace;font-size:11.5px;}
.dz-xpad-val b{color:var(--paper);}
@media(max-width:980px){.dz-xp-secs{grid-template-columns:1fr;}}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--hover);border:1px solid var(--blue-dim);color:var(--paper);padding:11px 18px;border-radius:9px;
  font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:50;box-shadow:0 8px 30px #0008;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--ink);}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- print / PDF build sheet ---------- */
/* The build-sheet cover header is print-only; the rest of the designer's
   results pane is reused as the document body. */
.print-only{display:none;}

@media print{
  @page{margin:14mm;}

  /* The app is a fixed-height, single-screen, dark-themed layout. Unfreeze it
     so the whole results pane flows across pages on white paper. */
  html,body{height:auto!important;overflow:visible!important;display:block!important;background:#fff!important;color:#111;}
  main{display:block!important;overflow:visible!important;height:auto!important;min-height:0!important;}

  /* Repaint the palette for ink on white. The SVG drawings/plots use literal
     colors (not these vars), so they're untouched and stay as dark figure
     tiles via print-color-adjust below. */
  :root{
    --ink:#fff;--ink2:#fff;--panel:#fff;--panel2:#fff;--grid:#ddd;--line:#c8d0d6;
    --paper:#111;--paper-dim:#555;--blue:var(--blue-dim);--blue-dim:var(--paper-dim);
    --amber:var(--warn-line);--red:var(--red);--green:var(--ok-line);
  }

  /* Show only the designer's results; drop all chrome + interactive controls. */
  header.top,nav.tabs,.dz-controls,#toast,.dz-split,#view3d,#view-library,#view-saved{display:none!important;}
  #view-designer{display:block!important;}
  .dz{display:block!important;}
  .dz-results{flex:none!important;overflow:visible!important;height:auto!important;padding:0!important;}
  .dz-h-btn,.dz-xstyle,.dz-actions{display:none!important;}
  .gloss-q{display:none!important;}

  /* Flatten the surviving form controls (crossover mode + fc inputs) to text. */
  .dz-xmode,.dz-xfc{border:none!important;background:transparent!important;color:#111!important;
    -webkit-appearance:none;appearance:none;padding:0!important;font-weight:700;}

  /* Keep the technical figures as their dark on-screen tiles. */
  .dz-view,.dz-plot,.dz-sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact;}

  /* Build-sheet cover header. */
  .print-only{display:block!important;}
  .buildsheet-head{margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid #111;}
  .buildsheet-head .bs-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;}
  .buildsheet-head .bs-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666;font-weight:700;}
  .buildsheet-head .bs-name{font-size:24px;font-weight:800;color:#111;line-height:1.1;}
  .buildsheet-head .bs-date{font-size:11px;color:#666;white-space:nowrap;}
  .buildsheet-head .bs-specs{display:flex;gap:32px;margin-top:12px;font-size:12px;}
  .buildsheet-head .bs-col-h,.buildsheet-head dt{color:#666;font-weight:600;}
  .buildsheet-head .bs-dl{margin:0;display:grid;grid-template-columns:auto auto;gap:3px 14px;align-content:start;}
  .buildsheet-head .bs-dl dd{margin:0;font-family:'Consolas',monospace;color:#111;text-align:right;}
  .buildsheet-head .bs-drivers{list-style:none;margin:4px 0 0;padding:0;}
  .buildsheet-head .bs-drivers li{margin:2px 0;color:#111;}
  .buildsheet-head .bs-role{display:inline-block;min-width:110px;color:#666;font-weight:600;}

  /* Don't split figures, cards, or table rows across page breaks. */
  .dz-sec2,.dz-view,.dz-plot,.dz-sheet,.dz-card,.dz-pcard,.dz-xpoint,.dz-check,.dz-table tr{
    break-inside:avoid;page-break-inside:avoid;}
  .dz-sec2 h3{break-after:avoid;page-break-after:avoid;}
}

/* ---------- Compare tab ---------- */
.cmp{max-width:1240px;margin:0 auto;padding:18px 22px;width:100%;}
.cmp-pick{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.cmp-pick select{
  background:var(--panel2);color:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font-size:13px;min-width:240px;
}
.cmp-a{color:var(--blue);font-weight:700;}
.cmp-b{color:var(--amber);font-weight:700;}
.cmp-empty{color:var(--paper-dim);padding:40px;text-align:center;}
.cmp-table{margin-bottom:18px;}
.cmp-table th.cmp-a,.cmp-table th.cmp-b{text-align:right;}
.cmp-table td.cmp-best{color:var(--green);font-weight:700;}
.cmp-fronts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:16px;}
.cmp .dz-sub{color:var(--paper-dim);font-size:12px;margin:6px 0 14px;}

/* ---------- Guide tab ---------- */
.guide{max-width:860px;margin:0 auto;padding:26px 30px 60px;color:var(--paper-dim);line-height:1.6;}
.guide h2{color:var(--paper);font-size:22px;margin:0 0 6px;}
.guide h3{color:var(--blue);font-size:15px;margin:26px 0 8px;letter-spacing:.02em;}
.guide p{margin:8px 0;}
.guide ul{margin:8px 0;padding-left:22px;}
.guide li{margin:5px 0;}
.guide b{color:var(--paper);}
.guide i{color:var(--paper);}
/* `main` is overflow:hidden and .view is a flex container, so any tab whose
   content is taller than the viewport must opt into scrolling HERE, on the
   section — not on the inner wrapper. The DSP and Tune tabs were both added
   without it and were silently clipped at the fold. */
#view-compare.active,#view-guide.active,#view-dsp.active,#view-tune.active,#view-system.active{overflow:auto;}
.view3d-tools{position:absolute;top:14px;right:16px;display:flex;gap:7px;}
/* per-gap driver spacing rows (between driver rows in the designer) */
.dz-gap{display:flex;align-items:center;gap:6px;margin:1px 0 1px 34px;font-size:11px;color:var(--paper-dim);}
.dz-gap input{width:64px;background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:11px;font-family:inherit;}
.dz-gap input::placeholder{color:var(--paper-dim);opacity:.7;}
/* saved-design row actions (rename / duplicate / delete) */
.saved-row{display:flex;align-items:flex-start;gap:10px;}
.saved-row .saved-main{flex:1 1 auto;min-width:0;}
.saved-actions{flex:0 0 auto;display:flex;gap:5px;opacity:.35;transition:.12s;}
.saved-row:hover .saved-actions{opacity:1;}
.sv-btn{background:var(--btn);border:1px solid var(--line);color:var(--paper-dim);border-radius:6px;
  padding:3px 8px;cursor:pointer;font-size:12px;line-height:1;}
.sv-btn:hover{color:var(--blue);border-color:var(--blue-dim);}
.sv-btn.danger:hover{color:var(--red);border-color:var(--bad-line);}
/* "Keeping you honest": two categories, passed checks behind a strip */
.dz-checkgrp{margin-bottom:14px;}
.dz-checkgrp h4{margin:0 0 7px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-dim);
  display:flex;align-items:baseline;gap:8px;}
.dz-checkcount{font-size:10.5px;text-transform:none;letter-spacing:0;color:var(--paper-dim);opacity:.8;}
.dz-pass-strip{width:100%;text-align:left;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--green);
  border-radius:7px;padding:6px 10px;margin-top:6px;cursor:pointer;font-size:11.5px;font-family:inherit;
  display:flex;align-items:center;gap:7px;}
.dz-pass-strip:hover{filter:brightness(1.12);}
.dz-pass-caret{font-size:10px;}
.dz-pass-hint{margin-left:auto;opacity:.75;font-size:10.5px;}
.dz-passed{margin-top:6px;}
/* absolute per-driver polarity in the crossover plan */
.dz-pol-inv{color:var(--amber);}
.dz-xreq{font-size:10.5px;color:var(--amber);text-transform:none;letter-spacing:0;}
/* per-design bolt-pattern toggle on a driver row */
.dz-bolt{flex:0 0 auto;background:var(--btn);border:1px solid var(--line);color:var(--paper-dim);
  border-radius:6px;padding:3px 6px;cursor:pointer;font-size:11px;font-family:'Consolas',monospace;line-height:1;}
.dz-bolt:hover{color:var(--blue);border-color:var(--blue-dim);}
/* editable bolt facts in the driver detail pane */
.bolt-edit{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:4px;}
.bolt-edit label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--paper-dim);}
.bolt-edit select,.bolt-edit input{background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12px;font-family:inherit;}
.bolt-edit input{width:80px;}
.bolt-note{flex-basis:100%;font-size:11px;color:var(--paper-dim);}
/* Build Pack tab: toolbar + full-height PDF preview */
#view-pack{display:none;flex-direction:column;gap:10px;}
#view-pack.active{display:flex;}
.pack-bar{display:flex;align-items:center;gap:10px;}
.pack-status{font-size:12px;color:var(--paper-dim);font-family:'Consolas',monospace;}
#packFrame{flex:1 1 auto;width:100%;min-height:70vh;border:1px solid var(--line);border-radius:8px;background:#525659;}
/* live spacing arithmetic under the top/gap/bottom stack */
.dz-space-sum{margin:5px 0 2px 34px;font-size:11px;line-height:1.5;color:var(--paper-dim);
  border:1px solid transparent;border-radius:6px;}
.dz-space-sum.ok,.dz-space-sum.bad{padding:5px 8px;}
.dz-space-sum.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}
.dz-space-sum.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--red);}
.dz-ss-arith{font-family:'Consolas',monospace;font-size:10.5px;opacity:.85;}
.dz-ss-fit{background:var(--btn);border:1px solid var(--line);color:var(--paper);border-radius:6px;
  padding:2px 7px;margin-left:4px;cursor:pointer;font-size:11px;font-family:inherit;}
.dz-ss-fit:hover{color:var(--blue);border-color:var(--blue-dim);}
/* unsaved-changes badge beside the design name */
.dz-dirty{display:none;align-self:center;white-space:nowrap;font-size:11px;color:var(--amber);}
.dz-dirty.on{display:inline;}
/* inline input + small action button (e.g. port length + "auto" reset) */
.dz-inline{display:flex;align-items:center;gap:6px;}
.dz-inline input{flex:1 1 auto;min-width:0;}
/* design switcher in the name row */
.dz-switch{flex:0 1 130px;min-width:44px;background:var(--btn);color:var(--paper-dim);border:1px solid var(--line);
  border-radius:7px;padding:0 4px;font-size:12px;font-family:inherit;cursor:pointer;text-overflow:ellipsis;}
.dz-switch:hover{color:var(--blue);border-color:var(--blue-dim);}
/* resume-row provenance + per-design version history panel */
.saved-prov{font-size:11.5px;color:var(--paper-dim);}
.saved-prov.warn{color:var(--amber);}
.saved-hist{border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;
  margin:-8px 0 7px 14px;padding:7px 11px;background:var(--panel-side);}
.sh-empty{font-size:11.5px;color:var(--paper-dim);}
.sh-row{display:flex;align-items:baseline;gap:10px;padding:3px 0;border-bottom:1px solid var(--row-line);}
.sh-row:last-child{border-bottom:none;}
.sh-when{flex:0 0 auto;font-family:'Consolas',monospace;font-size:10.5px;color:var(--paper-dim);}
.sh-what{flex:1 1 auto;min-width:0;font-size:11.5px;}
.sh-open{flex:0 0 auto;}

/* ===== DSP tab ===== */
.dsp{max-width:960px;margin:0 auto;padding-bottom:40px;}
.dsp-intro h2{margin:0 0 8px;font-size:20px;}
.dsp-dev{font-size:12px;color:var(--paper-dim);font-weight:400;font-family:'Consolas',monospace;}
.dsp-intro p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--paper-dim);}
.dsp-intro b{color:var(--paper);}
.dsp-warn{color:var(--amber);}
.dsp-note{font-size:12px;line-height:1.6;color:var(--paper-dim);margin:6px 0 0;}
.dsp-note b{color:var(--paper);}

.dsp-block{margin:22px 0;}
.dsp-block h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;
  margin:0 0 11px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.dsp-block svg{width:100%;height:auto;display:block;background:var(--plot-bg);
  border:1px solid var(--line);border-radius:9px;margin-bottom:8px;}
.dsp-diff{margin:0 0 10px;padding-left:20px;font-size:12.5px;line-height:1.7;color:var(--amber);}
.dsp-diff b{color:var(--paper);}
.dsp-block>.dz-btn{flex:0 0 auto;padding:7px 12px;}

.dsp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;}
.dsp-card{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:11px;padding:14px 16px;}
.dsp-card-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  border-bottom:1px solid var(--line);padding-bottom:7px;}
.dsp-card-h b{font-size:14px;color:var(--blue);}
.dsp-drv{font-size:11px;color:var(--paper-dim);font-family:'Consolas',monospace;}
.dsp-out{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);
  background:var(--cavity);border:1px solid var(--line);border-radius:5px;padding:2px 7px;}

.dsp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px 12px;}
.dsp-grid label{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--paper-dim);}
.dsp-in{background:var(--field);color:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;font-size:12.5px;font-family:'Consolas',monospace;}
.dsp-in:focus{outline:none;border-color:var(--blue-dim);}
.dsp-grid input.dsp-in{width:66px;text-align:right;}
.dsp-sel{font-family:inherit;font-size:11px;padding:4px 6px;cursor:pointer;}
.dsp-in::placeholder{color:var(--paper-dim);opacity:.7;}
.dsp-toggle{background:var(--btn);color:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;}
.dsp-toggle.on{background:var(--tagsub-bg);border-color:var(--tagsub-line);color:var(--tagsub-ink);}

.dsp-eq-wrap{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
.dsp-eq-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);font-weight:700;margin-bottom:6px;}
.dsp-eq{font-size:12px;}
.dsp-eq th{font-size:9.5px;padding:4px 6px;}
.dsp-eq td{padding:4px 6px;}
.dsp-eq input.dsp-num{width:64px;text-align:right;}
.dsp-none{color:var(--paper-dim);font-style:italic;text-align:center!important;font-family:'Segoe UI',sans-serif!important;}
.dsp-x{background:none;border:none;color:var(--paper-dim);cursor:pointer;font-size:13px;padding:0 4px;}
.dsp-x:hover{color:var(--red);}
.dsp-add{margin-top:7px;flex:0 0 auto;padding:5px 10px;font-size:11.5px;}
.dsp-add:disabled{opacity:.5;cursor:default;}

/* Published datasheet figures, and how the current settings compare. */
.dsp-spec{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;}
.dsp-spec-h{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);font-weight:700;margin-bottom:7px;}
.dsp-spec-tbl{width:100%;border-collapse:collapse;font-size:11.5px;}
.dsp-spec-tbl td{padding:3px 0;vertical-align:top;border-bottom:1px solid var(--row-line);}
.dsp-spec-tbl td:first-child{color:var(--paper-dim);white-space:nowrap;padding-right:12px;width:1%;}
.dsp-spec-tbl td:last-child{font-family:'Consolas',monospace;color:var(--paper);}
.dsp-spec-tbl b{color:var(--amber);}
.dsp-none-inline{color:var(--paper-dim);font-style:italic;font-family:'Segoe UI',sans-serif;}
.dsp-verdict{margin-top:8px;font-size:11.5px;line-height:1.55;padding:7px 9px;border-radius:7px;border:1px solid;}
.dsp-verdict b{color:var(--paper);}
.dsp-verdict.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--amber);}
.dsp-verdict.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--red);}
.dsp-verdict.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--green);}

/* ===== System tab (reuses the dsp-* skeleton) ===== */
.sys-members{display:flex;gap:20px;flex-wrap:wrap;}
.sys-members label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--paper-dim);}
.sys-members select{min-width:240px;}
.sys-grid label{white-space:nowrap;}
.sys-grid input.dsp-in{width:70px;text-align:right;}
.sys-name{width:260px;}
.sys-sheet td{font-size:11.5px;}
.sys-sheet td:nth-child(-n+3){font-family:'Segoe UI',sans-serif;text-align:left;}
.sys-note{color:var(--paper-dim);font-size:10px;font-family:'Segoe UI',sans-serif;margin-top:2px;}
.saved-sys{font-size:9px;letter-spacing:.08em;background:var(--tagsub-bg);border:1px solid var(--tagsub-line);color:var(--tagsub-ink);border-radius:4px;padding:1px 6px;vertical-align:1px;}

/* ===== Tune tab ===== */
.tune{max-width:900px;margin:0 auto;padding-bottom:40px;}
.tn-intro h2{margin:0 0 8px;font-size:20px;}
.tn-intro p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--paper-dim);}
.tn-intro b{color:var(--paper);}

.tn-setup{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:12px 15px;margin:14px 0 18px;}
.tn-setup .dz-btn{flex:0 0 auto;}
.tn-lvl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--paper-dim);}
.tn-lvl input[type=range]{width:130px;}
.tn-lvl span{font-family:'Consolas',monospace;color:var(--paper);min-width:34px;}

.tn-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin-bottom:22px;}
.tn-card{background:linear-gradient(180deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:11px;padding:13px 15px;}
.tn-card.has{border-color:var(--blue-dim);}
.tn-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;}
.tn-card-head b{font-size:13px;}
.tn-card-btns{display:flex;gap:7px;flex:0 0 auto;}
.tn-card-btns .dz-btn{flex:0 0 auto;padding:6px 11px;font-size:12px;}
.tn-hint{font-size:12px;line-height:1.55;color:var(--paper-dim);margin-bottom:6px;}
.tn-where{font-size:11.5px;color:var(--paper);background:var(--cavity);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;margin-bottom:8px;}
.tn-status{font-size:11.5px;line-height:1.6;}
.tn-empty{color:var(--paper-dim);font-style:italic;}
.tn-meta{color:var(--paper-dim);font-family:'Consolas',monospace;font-size:10.5px;}
.tn-ok{color:var(--green);} .tn-warn{color:var(--amber);} .tn-bad{color:var(--red);}
.tn-prog{height:7px;background:var(--cavity);border:1px solid var(--line);border-radius:5px;overflow:hidden;margin:9px 0 4px;}
.tn-prog-bar{height:100%;width:0;background:var(--blue);transition:width .15s linear;}
.tn-prog-txt{font-family:'Consolas',monospace;font-size:10.5px;color:var(--paper-dim);}

.tn-block{margin:22px 0;}
.tn-block h3{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;
  margin:0 0 11px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.tn-sub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);margin:16px 0 6px;}
.tn-block svg{width:100%;height:auto;display:block;background:var(--plot-bg);
  border:1px solid var(--line);border-radius:9px;margin-bottom:8px;}
.tn-note{font-size:12px;line-height:1.6;color:var(--paper-dim);margin:6px 0 0;}
.tn-note b{color:var(--paper);}
.tn-block .tn-ok,.tn-block .tn-warn,.tn-block .tn-bad{font-size:13px;line-height:1.6;padding:9px 12px;border-radius:8px;border:1px solid;}
.tn-block .tn-ok{background:var(--ok-bg);border-color:var(--ok-line);}
.tn-block .tn-warn{background:var(--warn-bg);border-color:var(--warn-line);}
.tn-block .tn-bad{background:var(--bad-bg);border-color:var(--bad-line);}
.tn-block p.tn-note.tn-warn{background:none;border:none;padding:0;color:var(--amber);}
.tn-tbl{margin-top:10px;}
.tn-tbl td.tn-why{text-align:left;font-family:'Segoe UI',sans-serif;color:var(--paper-dim);font-size:12px;}
.tn-tbl th.num,.tn-tbl td.num{text-align:right;}