/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/LICENSE-FONTS.txt) */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/michroma-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/instrument-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

/* Layout: a schematic "signal board" (left) wired stage-to-stage, with a part picker rail (right).
   Below 1180px the picker becomes a bottom sheet; below ~680px the board runs top-to-bottom. */
:root{
  --bg:#E4E8EB; --panel:#F3F5F6; --raise:#FFFFFF; --ink:#12171C; --ink2:#2C343B; --mute:#56616B; --faint:#86909A;
  --line:#C8CFD5; --grid:#C3CAD0; --shadow:rgba(20,32,44,.14); --scrim:rgba(10,14,18,.45);
  --accent:#B86B00; --accent-ink:#8A4F00; --accent-soft:#F7E6C9; --act:#8A4F00; --on-act:#FFFFFF;
  --display-bg:#15191C; --display-fg:#F2A93B; --display-dim:#8C6A3A;
  --sig-digital:#1A72B5; --sig-phono:#7148B8; --sig-line:#B86B00; --sig-amp:#B03F28; --pulse:rgba(255,255,255,.95);
  --warn:#9A5200; --warn-soft:#FBEACF; --info:#1A5F94; --info-soft:#E0ECF6; --ok:#2E7A4D;
  --g-src:#3B6E8F; --g-prep:#7148B8; --g-amp:#B86B00; --g-out:#B03F28; --g-ext:#7D8891;
  --dev-body:#1C2227; --dev-detail:#F1F3F4; --dev-edge:transparent; --dev-screen:#323C44;
  --f-display:'Michroma','Eurostile','Microgramma','Arial Black',sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1215; --panel:#141B20; --raise:#1A2229; --ink:#E6EBEF; --ink2:#C7D0D7; --mute:#97A3AE; --faint:#66727D;
    --line:#29333C; --grid:#253038; --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
    --accent:#F0A532; --accent-ink:#F5BE69; --accent-soft:#3A2A12; --act:#F0A532; --on-act:#1A1206;
    --display-bg:#06080A; --display-fg:#F4B04A; --display-dim:#7A5A2C;
    --sig-digital:#55B3F0; --sig-phono:#A98CF2; --sig-line:#F0A532; --sig-amp:#EE7B5C; --pulse:rgba(255,255,255,.85);
    --warn:#F2AE4A; --warn-soft:#33240F; --info:#7CC0F2; --info-soft:#132636; --ok:#62C48C;
    --g-src:#6FA6CB; --g-prep:#A98CF2; --g-amp:#F0A532; --g-out:#EE7B5C; --g-ext:#7E8A94;
    --dev-body:#2B353D; --dev-detail:#E3E8EC; --dev-edge:#4A5762; --dev-screen:#3C4852;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1215; --panel:#141B20; --raise:#1A2229; --ink:#E6EBEF; --ink2:#C7D0D7; --mute:#97A3AE; --faint:#66727D;
  --line:#29333C; --grid:#253038; --shadow:rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
  --accent:#F0A532; --accent-ink:#F5BE69; --accent-soft:#3A2A12; --act:#F0A532; --on-act:#1A1206;
  --display-bg:#06080A; --display-fg:#F4B04A; --display-dim:#7A5A2C;
  --sig-digital:#55B3F0; --sig-phono:#A98CF2; --sig-line:#F0A532; --sig-amp:#EE7B5C; --pulse:rgba(255,255,255,.85);
  --warn:#F2AE4A; --warn-soft:#33240F; --info:#7CC0F2; --info-soft:#132636; --ok:#62C48C;
  --g-src:#6FA6CB; --g-prep:#A98CF2; --g-amp:#F0A532; --g-out:#EE7B5C; --g-ext:#7E8A94;
  --dev-body:#2B353D; --dev-detail:#E3E8EC; --dev-edge:#4A5762; --dev-screen:#3C4852;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:1440px;margin:0 auto;padding-block:18px 48px}
.lbl{display:block;font:400 10px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{text-wrap:balance}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding-block:6px 18px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:14px;align-items:center;min-width:0;flex:1 1 420px}
.brand svg{flex:none;width:46px;height:46px}
.brand h1{margin:0;font:400 21px/1.15 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.brand p{margin:5px 0 0;color:var(--mute);font-size:14px;max-width:62ch}
.readout{display:flex;align-items:center;gap:14px;background:var(--display-bg);border-radius:10px;padding:10px 16px;box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 1px 0 var(--raise);min-width:0}
.readout .lbl{color:var(--display-dim)}
.readout .val{font:500 28px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--display-fg);text-shadow:0 0 12px rgba(242,169,59,.45);letter-spacing:.02em}
.readout .meta{font:400 11px/1.35 var(--f-mono);color:var(--display-dim)}

/* ---------- setup strip ---------- */
.setup{display:grid;grid-template-columns:1.25fr 1.35fr 1fr;padding-block:18px;border-bottom:1px solid var(--line)}
.ctl{min-width:0;padding-inline:22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ctl:first-child{padding-left:0;border-left:0}
.ctl:last-child{padding-right:0}
.ctl-help{margin:0;font-size:13px;color:var(--mute);min-height:2.6em}
@media (max-width:960px){.setup{grid-template-columns:1fr;gap:20px}.ctl{padding:0;border:0}.ctl-help{min-height:0}}
.seg{display:flex;gap:3px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.seg input,.chip input,.switch input,.acc-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px;border-radius:7px;cursor:pointer;font-weight:600;font-size:14px;line-height:1.15;color:var(--mute);text-align:center;transition:background .15s,color .15s}
.seg label small{font:400 11px/1 var(--f-mono);color:var(--faint);font-variant-numeric:tabular-nums}
.seg label:hover{color:var(--ink)}
.seg input:checked+label{background:var(--raise);color:var(--ink);box-shadow:0 1px 2px var(--shadow),inset 0 0 0 1px var(--line)}
.seg input:checked+label small{color:var(--accent-ink)}
.seg input:focus-visible+label,.chip input:focus-visible+label,.switch input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip label{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;font-weight:600;font-size:14px;color:var(--mute);transition:border-color .15s,background .15s,color .15s}
.chip label svg{width:20px;height:20px}
.chip label:hover{color:var(--ink)}
.chip input:checked+label{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.chip input:checked+label svg{color:var(--accent-ink)}
.switch label{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink2)}
.switch .track{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--raise);box-shadow:0 1px 2px var(--shadow);transition:transform .15s}
.switch input:checked+label .track{background:var(--act)}
.switch input:checked+label .track::after{transform:translateX(16px)}
.switch input:disabled+label{opacity:.45;cursor:not-allowed}

/* ---------- main ---------- */
.main{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-top:22px}
.left{display:flex;flex-direction:column;gap:22px;min-width:0}
@media (min-width:1180px){
  .main{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .picker{position:sticky;top:calc(14px + env(safe-area-inset-top,0px));max-height:calc(100vh - 28px);overflow:auto}
  .pk-close,.mobile-bar,.sheet-backdrop{display:none!important}
}

/* ---------- board ---------- */
.board-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px 12px}
.board-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 22px;margin-bottom:12px}
.board-head h2{margin:0;font:400 12px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{display:inline-block;width:22px;height:0;border-top:2.5px solid currentColor;border-radius:2px}
.legend .l-digital{color:var(--sig-digital)}.legend .l-phono{color:var(--sig-phono)}.legend .l-line{color:var(--sig-line)}.legend .l-amp{color:var(--sig-amp)}
.legend .l-amp i{border-top-width:3.5px}
.legend .l-int{color:var(--faint)}.legend .l-int i{border-top-style:dotted;border-top-width:3px}
.legend b{font-weight:500;color:var(--ink2)}
.board{position:relative;border-radius:10px;padding:12px 8px 16px;background-color:var(--bg);background-image:radial-gradient(var(--grid) 1px,transparent 1.3px);background-size:16px 16px;background-position:8px 8px}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cols{position:relative;display:grid;gap:34px;min-height:280px}
.col{display:flex;flex-direction:column;min-width:0;gap:10px}
.col-h{font:400 9.5px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-align:center;padding-top:2px}
.col-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px}
.board.vert .cols{grid-template-columns:1fr!important;gap:30px;min-height:0}
.board.vert .col-h{text-align:left;padding-left:2px}
.board.vert .col-body{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px}
.board.vert .node{flex:1 1 132px;max-width:260px}
.board-hint{margin:10px 2px 0;font-size:12.5px;color:var(--mute)}

.node{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;padding:10px 12px 11px;background:var(--raise);border:1px solid var(--line);border-radius:10px;cursor:pointer;box-shadow:0 1px 0 var(--shadow),0 8px 18px -12px var(--shadow);transition:border-color .15s,transform .15s,box-shadow .15s}
.node:hover{border-color:var(--mute);transform:translateY(-1px)}
.node.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 8px 18px -12px var(--shadow)}
.n-stage{display:flex;align-items:center;gap:6px;font:400 8.5px/1.2 var(--f-display);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.n-stage svg{width:17px;height:17px;flex:none;color:var(--g)}
.n-name{font-weight:600;font-size:13.5px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.n-brand{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.n-foot{display:flex;justify-content:space-between;align-items:center;gap:4px 8px;flex-wrap:wrap}
.n-price{font:500 13px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.n-inc{font-size:11px;font-weight:600;color:var(--accent-ink);line-height:1.2}
.node.ghost{background:var(--panel);border-style:dashed;box-shadow:none}
.node.ghost .n-inside{font-size:12.5px;line-height:1.3;color:var(--mute)}
.node.ghost .n-inside b{font-weight:600;color:var(--ink2)}
.node.ghost .n-incl{font:500 11px/1 var(--f-mono);color:var(--faint)}
.node.warn::after{content:"!";position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;background:var(--warn);color:var(--raise);font:700 12px/18px var(--f-body);text-align:center;box-shadow:0 0 0 3px var(--bg)}

.w path{fill:none}
.w-base{stroke-width:2.25;stroke-linecap:round;transition:opacity .2s}
.w-digital .w-base,.w-digital .w-jack{stroke:var(--sig-digital);fill:var(--sig-digital)}
.w-phono .w-base,.w-phono .w-jack{stroke:var(--sig-phono);fill:var(--sig-phono)}
.w-line .w-base,.w-line .w-jack{stroke:var(--sig-line);fill:var(--sig-line)}
.w-amp .w-base,.w-amp .w-jack{stroke:var(--sig-amp);fill:var(--sig-amp)}
.w path.w-base{fill:none}
.w-amp .w-base{stroke-width:3.5}
.w.internal .w-base{stroke-dasharray:.5 6;stroke-width:2.75;opacity:.75}
.w-flow{stroke:var(--pulse);stroke-width:1.75;stroke-linecap:round;stroke-dasharray:1.5 22;animation:flow 1.8s linear infinite}
.w-amp .w-flow{stroke-width:2.25}
@keyframes flow{to{stroke-dashoffset:-23.5}}
.wires .w{transition:opacity .2s}
.wires.focus .w{opacity:.18}
.wires.focus .w.hot{opacity:1}
@media (prefers-reduced-motion:reduce){.w-flow{animation:none;opacity:0}.node,.seg label,.picker{transition:none!important}.node:hover{transform:none}}

/* ---------- advice ---------- */
.advice{display:flex;flex-direction:column;gap:10px}
.advice:empty{display:none}
.note{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.note .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--f-body);margin-top:1px}
.note.warn{background:var(--warn-soft);border-color:transparent}
.note.warn .ic{background:var(--warn);color:var(--raise)}
.note.info .ic{background:var(--info-soft);color:var(--info)}
.note.tip .ic{background:var(--accent-soft);color:var(--accent-ink)}
.note p{margin:0;font-size:14px;color:var(--ink2);max-width:72ch}
.note p b{color:var(--ink);font-weight:600}
.note .btn{align-self:center}
@media (max-width:560px){.note{grid-template-columns:22px minmax(0,1fr)}.note .btn{grid-column:2;justify-self:start}}

/* ---------- parts ---------- */
.parts{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.parts-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.parts h2{margin:0;font:400 12px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase}
.parts-head .meta{font-size:13px;color:var(--mute)}
.split{margin:16px 0 4px}
.split-bar{display:flex;gap:3px;height:12px}
.split-bar span{border-radius:3px;min-width:3px}
.split-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:9px;font-size:12.5px;color:var(--mute)}
.split-key span{display:inline-flex;align-items:center;gap:6px}
.split-key i{width:10px;height:10px;border-radius:2px;display:inline-block}
.split-key b{font:500 12.5px var(--f-mono);color:var(--ink2);font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto;margin-top:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:400 9.5px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
th:last-child,td:last-child{text-align:right;padding-right:0}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
td.stage{color:var(--mute);font-size:13px;white-space:nowrap;width:1%}
td.part a{font-weight:600;text-decoration:none;color:var(--ink)}
td.part a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
td.part .ext{font-size:11px;color:var(--faint);margin-left:4px}
tr.ghost td{color:var(--faint);font-size:13px}
tr.sect td{border-bottom:0;padding-top:18px;padding-bottom:4px}
tr.sect td span{font:400 9.5px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
tr.off td.part a,tr.off td.part{color:var(--faint)}
tr.off .price{color:var(--faint);text-decoration:line-through}
.acc-row{display:flex;align-items:center;gap:10px;cursor:pointer}
.acc-box{width:18px;height:18px;border:1.5px solid var(--mute);border-radius:4px;display:grid;place-items:center;flex:none;background:var(--raise)}
.acc-box svg{width:12px;height:12px;opacity:0;color:var(--on-act)}
.acc-cb:checked+.acc-row .acc-box{background:var(--act);border-color:var(--act)}
.acc-cb:checked+.acc-row .acc-box svg{opacity:1}
.acc-cb:focus-visible+.acc-row .acc-box{outline:2px solid var(--accent);outline-offset:2px}
.tag{display:inline-block;font:600 10.5px/1 var(--f-body);padding:3px 6px;border-radius:4px;margin-left:6px;vertical-align:1px;letter-spacing:.02em}
.tag.need{background:var(--accent-soft);color:var(--accent-ink)}
.tag.sugg{background:var(--info-soft);color:var(--info)}
.totals{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;margin-top:14px;font-size:14px;align-items:center}
.totals .k{color:var(--mute)}
.totals .v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.totals .grand{font-size:18px;font-weight:600;color:var(--ink)}
.totals .grand.v{font-weight:600}
.taxsel{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
select{background:var(--raise);border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:13.5px;max-width:100%}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.copy-fallback{width:100%;min-height:160px;margin-top:12px;font:12.5px/1.45 var(--f-mono);background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:10px}
.fine{font-size:12.5px;color:var(--mute);max-width:90ch;margin:0}
.fine b{color:var(--ink2);font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:var(--raise);font-weight:600;font-size:13.5px;line-height:1.1;cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--mute)}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--act);border-color:var(--act);color:var(--on-act)}
.btn-primary:hover{border-color:var(--act);filter:brightness(1.08)}
.btn-on{background:transparent;border-color:var(--accent);color:var(--accent-ink);cursor:default}
.btn-on:hover{border-color:var(--accent)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--mute);padding-inline:8px}
.btn-quiet:hover{color:var(--ink);border-color:transparent}

/* ---------- picker ---------- */
.picker{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.pk-head{position:sticky;top:0;z-index:2;background:var(--panel);padding:16px 18px 14px;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}
.pk-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pk-stage{display:flex;align-items:center;gap:8px;font:400 9.5px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.pk-stage svg{width:20px;height:20px;color:var(--g)}
.pk-close{display:inline-flex;width:34px;height:34px;padding:0;border-radius:50%}
.pk-head h2{margin:8px 0 6px;font-size:19px;line-height:1.2;font-weight:700}
.pk-explain{margin:0;font-size:13.5px;color:var(--ink2)}
.pk-body{padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}
.banner{padding:12px 14px;border-radius:10px;background:var(--accent-soft);font-size:13.5px;color:var(--ink2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.banner b{color:var(--ink);font-weight:600}
.banner p{margin:0}
.banner.info{background:var(--info-soft)}
.pk-sub{margin:6px 2px 0;font:400 9.5px/1.2 var(--f-display);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.pcard{background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pcard.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pc-brand{font-size:12px;font-weight:500;color:var(--mute)}
.pcard h3{margin:1px 0 0;font-size:16px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.lvl{display:inline-block;margin-left:6px;font:600 10px/1 var(--f-body);padding:3px 6px;border-radius:4px;background:var(--bg);color:var(--mute);vertical-align:2px}
.pc-why{margin:0;font-size:13.5px;color:var(--ink2)}
.ptags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0;padding:0}
.ptags li{font:500 11px/1.2 var(--f-mono);padding:4px 7px;border-radius:5px;background:var(--panel);border:1px solid var(--line);color:var(--mute)}
.pc-covers{margin:0;font-size:12.5px;color:var(--accent-ink);font-weight:600}
.pc-note{margin:0;font-size:12.5px;color:var(--mute)}
.pc-issue{margin:0;font-size:12.5px;color:var(--warn);background:var(--warn-soft);padding:7px 9px;border-radius:7px}
.pc-actions{display:flex;gap:8px;flex-wrap:wrap}
.more{align-self:flex-start}

.price{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;background:none;border:1px dashed transparent;border-radius:6px;padding:3px 5px;margin:-3px -5px;cursor:text;font:500 15px/1.1 var(--f-mono);font-variant-numeric:tabular-nums}
.price:hover{border-color:var(--line)}
.price .est{font:400 10px/1 var(--f-body);color:var(--faint)}
.price.edited{color:var(--accent-ink)}
.price.edited .est{color:var(--accent-ink)}
td .price{font-size:14px}
.price-edit{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono)}
.price-edit input{width:88px;padding:4px 6px;border:1px solid var(--accent);border-radius:6px;background:var(--raise);font:500 14px var(--f-mono);text-align:right}
.price-edit button{border:0;background:none;color:var(--mute);font-size:11px;cursor:pointer;text-decoration:underline;padding:2px}

/* ---------- mobile sheet + bar ---------- */
.sheet-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:39;opacity:0;transition:opacity .2s}
.sheet-backdrop.show{opacity:1}
@media (max-width:1179px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .picker{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:86vh;overflow:auto;border-radius:18px 18px 0 0;border-bottom:0;
    padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;box-shadow:0 -12px 40px var(--shadow)}
  .picker.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .pk-head{border-radius:18px 18px 0 0}
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
    background:var(--display-bg);box-shadow:0 -6px 20px var(--shadow)}
  .mobile-bar .val{font:500 22px/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--display-fg);text-shadow:0 0 10px rgba(242,169,59,.4)}
  .mobile-bar .meta{display:block;font:400 11px/1.3 var(--f-mono);color:var(--display-dim);margin-top:3px}
  .mobile-bar .btn{background:transparent;border-color:var(--display-dim);color:var(--display-fg)}
}
@media (max-width:640px){.readout{display:none}}
html.lock{overflow:hidden}
.visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:60;background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:8px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:1180px){.toast{bottom:calc(24px + env(safe-area-inset-bottom,0px))}}

/* ---------- view switch + setup schematic ---------- */
.bh-left{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.seg-sm{display:inline-flex}
.seg-sm label{flex:0 0 auto;padding:6px 13px;font-size:13px}
.setup-scroll{overflow-x:auto;border-radius:10px;background-color:var(--bg);background-image:radial-gradient(var(--grid) 1px,transparent 1.3px);background-size:16px 16px;background-position:8px 8px;-webkit-overflow-scrolling:touch}
.setup-scroll svg{display:block;width:100%;height:auto;margin-inline:auto}
.legend .l-wl{color:var(--sig-digital)}
.legend .l-wl i{border-top-style:dotted;border-top-width:3px}
.d-body{fill:var(--dev-body);stroke:var(--dev-edge);stroke-width:1.5}
.d-det{fill:var(--dev-detail)}
.d-scr{fill:var(--dev-screen)}
.d-acc{fill:var(--display-fg)}
.d-arm{fill:none;stroke:var(--dev-detail);stroke-width:4;stroke-linecap:round}
.d-band{fill:none;stroke:var(--dev-body);stroke-width:10;stroke-linecap:round}
.d-sel{fill:none;stroke:transparent;stroke-width:2}
.dev{cursor:pointer;outline:none}
.dev:hover .d-sel{stroke:var(--mute)}
.dev.sel .d-sel,.dev:focus-visible .d-sel{stroke:var(--accent);stroke-width:2.5}
.fp-brand{font:500 11px var(--f-body);fill:var(--dev-detail);opacity:.72}
.fp-model{font:600 14px var(--f-body);fill:var(--dev-detail)}
.fp-inside{font:600 11.5px var(--f-body);fill:var(--display-fg)}
.fp-tag{font:400 9px var(--f-display);letter-spacing:.12em;fill:var(--display-fg)}
.sx-brand{font:500 13px var(--f-body);fill:var(--mute)}
.sx-model{font:600 15px var(--f-body);fill:var(--ink)}
.sx-inside{font:600 12.5px var(--f-body);fill:var(--accent-ink)}
.sx-side{font:400 11px var(--f-display);letter-spacing:.1em;fill:var(--dev-detail)}
.cb{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.cb-digital{stroke:var(--sig-digital)}.cb-phono{stroke:var(--sig-phono)}.cb-line{stroke:var(--sig-line)}.cb-amp{stroke:var(--sig-amp);stroke-width:4}
.cb.cb-wl{stroke-dasharray:1 8;stroke-width:3.2}
.pill rect{fill:var(--raise);stroke-width:1.4}
.pill text{font:600 12px var(--f-body);fill:var(--ink2)}
.p-digital rect{stroke:var(--sig-digital)}.p-phono rect{stroke:var(--sig-phono)}.p-line rect{stroke:var(--sig-line)}.p-amp rect{stroke:var(--sig-amp)}
.warnb circle{fill:var(--warn)}
.warnb text{font:700 13px var(--f-body);fill:var(--raise)}
.cbg{transition:opacity .2s}
#setupSvg.focus .cbg{opacity:.15}
#setupSvg.focus .cbg.hot{opacity:1}

/* ---------- standalone site ---------- */
:root{padding-top:env(safe-area-inset-top,0px)}
.load-msg{grid-column:1/-1;align-self:center;justify-self:center;max-width:52ch;display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:10px;background:var(--warn-soft);color:var(--ink2);font-size:14px}
.load-msg b{color:var(--ink)}
.loading-msg{grid-column:1/-1;align-self:center;justify-self:center;color:var(--mute);font-size:14px}
.site-foot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--faint);padding-top:4px}