.stereo-upmixer {
  --accent-d: var(--accent-strong);
  --accent-dim: var(--accent-soft);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 28%, var(--header-border));
  --bg: var(--page-bg);
  --surface: var(--panel);
  --surface2: var(--panel-soft);
  --surface3: var(--panel-hover);
  --border: var(--header-border);
  --border2: color-mix(in srgb, var(--text-muted) 35%, var(--header-border));
  --text-bright: var(--text-strong);
  --text-mid: var(--text-soft);
  --text-sub: var(--text-muted);
  --red: #f87171;
  --yellow: #fbbf24;
  --blue: #60a5fa;
  --purple: #c084fc;
  --orange: #fb923c;
  --font-d: var(--font-display);
  --font-b: var(--font-body);
  --font-m: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r: .75rem;
  --cFL: var(--accent);
  --cFR: #60a5fa;
  --cC: #fbbf24;
  --cLFE: #f87171;
  --cLS: #c084fc;
  --cRS: #fb923c;
}

.stereo-upmixer .uw{
  background:var(--bg);min-height:90vh;padding:3rem 0 5rem;
  font-family:var(--font-b);color:var(--text-bright);
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%,color-mix(in srgb, var(--accent) 7%, transparent) 0%,transparent 70%),
    linear-gradient(color-mix(in srgb, var(--accent) 2%, transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb, var(--accent) 2%, transparent) 1px,transparent 1px);
  background-size:100% 100%,40px 40px,40px 40px;
}
.stereo-upmixer .ui{max-width:1100px;margin:0 auto;padding:0 1.25rem;}

/* ── Header ── */
.stereo-upmixer .uh{text-align:center;margin-bottom:2.5rem;}
.stereo-upmixer .uh h1{font-family:var(--font-d);font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;letter-spacing:0;line-height:1.1;}
.stereo-upmixer .uh h1 span{color:var(--accent);}
.stereo-upmixer .uh p{color:var(--text-mid);margin-top:.5rem;font-size:.95rem;}
.stereo-upmixer .badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:.9rem;}
.stereo-upmixer .badge{background:var(--surface2);border:1px solid var(--border2);border-radius:20px;padding:4px 12px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--text-sub);font-family:var(--font-b);}
.stereo-upmixer .badge.hi{border-color:var(--accent-border);color:var(--accent);background:var(--accent-dim);}

/* ── Drop Zone ── */
.stereo-upmixer .drop-zone{
  border:3px dashed var(--border2);border-radius:1rem;padding:3.5rem 2rem;
  text-align:center;cursor:pointer;background:var(--accent-dim);
  transition:all .3s var(--ease);margin-bottom:0;
}
.stereo-upmixer .drop-zone:hover,.stereo-upmixer .drop-zone.dz-over{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent);}
.stereo-upmixer .drop-zone .dz-ico{font-size:3.2rem;margin-bottom:.8rem;display:block;}
.stereo-upmixer .drop-zone h3{font-family:var(--font-d);font-size:1.3rem;font-weight:700;margin-bottom:.3rem;}
.stereo-upmixer .drop-zone p{color:var(--text-mid);font-size:.88rem;}

/* ── Main layout ── */
.stereo-upmixer .main-grid{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;margin-top:1.5rem;}
@media(max-width:900px){.stereo-upmixer .main-grid{grid-template-columns:1fr;}}

/* ── Card ── */
.stereo-upmixer .card{background:var(--surface);border:1px solid var(--border);border-radius:1.1rem;padding:1.4rem;box-shadow:0 8px 32px rgba(0,0,0,.4);}
.stereo-upmixer .card-title{font-family:var(--font-d);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sub);margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);}

/* ── 5.1 Speaker Map ── */
.stereo-upmixer .speaker-map{
  position:relative;width:100%;max-width:420px;margin:0 auto 1.5rem;
  aspect-ratio:4/3;background:radial-gradient(ellipse at center,color-mix(in srgb, var(--accent) 4%, transparent) 0%,transparent 70%);
  border:1px solid var(--border);border-radius:1rem;
}
.stereo-upmixer .sp-room{position:absolute;inset:8px;border:1px dashed rgba(255,255,255,0.06);border-radius:12px;}
.stereo-upmixer .listener{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  width:28px;height:28px;background:var(--surface3);border:2px solid var(--border2);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.stereo-upmixer .sp-node{
  position:absolute;transform:translate(-50%,-50%);text-align:center;cursor:pointer;
  transition:filter .2s;
}
.stereo-upmixer .sp-node:hover .sp-circle{box-shadow:0 0 16px var(--c,var(--accent));}
.stereo-upmixer .sp-circle{
  width:44px;height:44px;border-radius:50%;border:2.5px solid var(--c,var(--accent));
  background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--c,var(--accent));
  font-family:var(--font-m);transition:all .2s;margin:0 auto;
  box-shadow:0 0 0 0 var(--c,var(--accent));
}
.stereo-upmixer .sp-circle.active{box-shadow:0 0 18px var(--c,var(--accent)),0 0 6px var(--c,var(--accent));}
.stereo-upmixer .sp-label{font-size:.6rem;color:var(--text-sub);margin-top:3px;font-family:var(--font-b);white-space:nowrap;}
.stereo-upmixer .sp-line{position:absolute;transform-origin:0 0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.05),transparent);pointer-events:none;}

/* ── Channel Strips ── */
.stereo-upmixer .strips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;}
.stereo-upmixer .strips::-webkit-scrollbar{height:4px;}
.stereo-upmixer .strips::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.stereo-upmixer .strip{
  flex:0 0 auto;width:82px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:.65rem;padding:.75rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  transition:border-color .2s;
}
.stereo-upmixer .strip:hover{border-color:var(--c,var(--border2));}
.stereo-upmixer .strip-name{font-family:var(--font-m);font-size:.7rem;font-weight:600;color:var(--c,var(--text-mid));letter-spacing:.06em;}
.stereo-upmixer .strip-fullname{font-size:.58rem;color:var(--text-sub);font-family:var(--font-b);}

/* VU Meter */
.stereo-upmixer .vu-wrap{width:18px;height:80px;background:var(--surface3);border-radius:3px;position:relative;overflow:hidden;border:1px solid var(--border);}
.stereo-upmixer .vu-fill{position:absolute;bottom:0;left:0;right:0;border-radius:2px;transition:height .08s linear;
  background:linear-gradient(to top,#22c55e 0%,#86efac 60%,#fbbf24 80%,#f87171 100%);}
.stereo-upmixer .vu-peak{position:absolute;left:0;right:0;height:2px;background:#fff;transition:top .1s;}
.stereo-upmixer .vu-label{font-family:var(--font-m);font-size:.58rem;color:var(--text-sub);margin-top:2px;}

/* Volume fader */
.stereo-upmixer .fader-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.stereo-upmixer .fader{
  -webkit-appearance:none;appearance:none;
  writing-mode:vertical-lr;direction:rtl;
  width:6px;height:80px;border-radius:4px;
  background:var(--border2);outline:none;cursor:pointer;
  transition:background .2s;
}
.stereo-upmixer .fader::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:10px;border-radius:4px;
  background:var(--c,var(--accent));cursor:pointer;
  box-shadow:0 0 6px rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.2);
}
.stereo-upmixer .fader:hover{background:var(--border2);}
.stereo-upmixer .fader-db{font-family:var(--font-m);font-size:.65rem;color:var(--c,var(--accent));min-width:32px;text-align:center;}

/* Mute/Solo */
.stereo-upmixer .strip-btns{display:flex;gap:4px;}
.stereo-upmixer .ms-btn{
  width:28px;height:18px;border:1px solid var(--border2);border-radius:4px;
  font-size:.58rem;font-weight:700;cursor:pointer;background:transparent;
  color:var(--text-sub);font-family:var(--font-b);transition:all .15s;
}
.stereo-upmixer .ms-btn.mute-on{background:rgba(248,113,113,.2);border-color:var(--red);color:var(--red);}
.stereo-upmixer .ms-btn.solo-on{background:rgba(251,191,36,.2);border-color:var(--yellow);color:var(--yellow);}
.stereo-upmixer .ms-btn:hover{border-color:var(--text-mid);}

/* ── Crossover Settings ── */
.stereo-upmixer .xover-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
@media(max-width:500px){.stereo-upmixer .xover-grid{grid-template-columns:1fr;}}
.stereo-upmixer .xover-row{display:flex;flex-direction:column;gap:5px;}
.stereo-upmixer .xover-label{font-size:.75rem;color:var(--text-mid);display:flex;justify-content:space-between;align-items:center;}
.stereo-upmixer .xover-val{font-family:var(--font-m);font-size:.75rem;color:var(--accent);}
.stereo-upmixer .xo-range{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;
  border-radius:4px;background:var(--border2);outline:none;cursor:pointer;
}
.stereo-upmixer .xo-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px var(--accent-glow);}

/* ── Matrix Mode ── */
.stereo-upmixer .matrix-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.stereo-upmixer .mx-pill{
  padding:5px 14px;border-radius:20px;border:1.5px solid var(--border2);
  font-size:.75rem;font-weight:700;cursor:pointer;background:transparent;
  color:var(--text-sub);font-family:var(--font-b);transition:all .18s var(--ease);
}
.stereo-upmixer .mx-pill.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

/* ── Info panel ── */
.stereo-upmixer .info-panel{background:var(--surface2);border:1px solid var(--border);border-radius:.65rem;padding:.9rem 1rem;margin-top:1rem;}
.stereo-upmixer .info-row{display:flex;justify-content:space-between;font-size:.8rem;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.stereo-upmixer .info-row:last-child{border-bottom:none;}
.stereo-upmixer .info-row .ik{color:var(--text-sub);}
.stereo-upmixer .info-row .iv{font-family:var(--font-m);color:var(--text-bright);font-size:.78rem;}

/* ── Waveform ── */
.stereo-upmixer .wave-wrap{border-radius:.65rem;overflow:hidden;border:1px solid var(--border);background:#0a0c10;margin-bottom:1rem;}
.stereo-upmixer .wave-canvas{display:block;width:100%;height:60px;}

/* ── Controls ── */
.stereo-upmixer .ctrl-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:.8rem;}
.stereo-upmixer .cbtn{
  display:inline-flex;align-items:center;gap:6px;padding:.6rem 1.2rem;
  border:none;border-radius:.5rem;font-family:var(--font-b);font-size:.88rem;font-weight:700;
  cursor:pointer;transition:all .18s var(--ease);
}
.stereo-upmixer .cbtn:hover{transform:translateY(-1px);}
.stereo-upmixer .cbtn:active{transform:scale(.97);}
.stereo-upmixer .cbtn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;}
.stereo-upmixer .cbtn-accent{background:var(--accent);color:var(--bg);box-shadow:0 4px 16px var(--accent-glow);}
.stereo-upmixer .cbtn-accent:hover{background:var(--accent-d);}
.stereo-upmixer .cbtn-gray{background:var(--surface3);color:var(--text-mid);border:1.5px solid var(--border2);}
.stereo-upmixer .cbtn-yellow{background:rgba(251,191,36,.12);color:var(--yellow);border:1.5px solid rgba(251,191,36,.3);}
.stereo-upmixer .cbtn-yellow:hover{background:rgba(251,191,36,.22);}
.stereo-upmixer .cbtn-red{background:rgba(248,113,113,.1);color:var(--red);border:1.5px solid rgba(248,113,113,.25);}
.stereo-upmixer .cbtn-red:hover{background:rgba(248,113,113,.2);}

/* ── Export ── */
.stereo-upmixer .export-card{background:var(--surface2);border:1px solid var(--border);border-radius:.75rem;padding:1.1rem;margin-top:1rem;}
.stereo-upmixer .prog-wrap{display:none;background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-top:.6rem;}
.stereo-upmixer .prog-bar{height:100%;background:var(--accent);border-radius:4px;width:0%;transition:width .25s;}
.stereo-upmixer .spin{display:inline-block;width:14px;height:14px;border:2.5px solid rgba(13,15,20,.3);border-top-color:var(--bg);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Light mode ── */
[data-theme="light"] .stereo-upmixer .uw{background-color:var(--bg);}
[data-theme="light"] .stereo-upmixer .drop-zone{background:color-mix(in srgb, var(--accent) 7%, transparent);}
[data-theme="light"] .stereo-upmixer .speaker-map{background:radial-gradient(ellipse at center,color-mix(in srgb, var(--accent) 6%, transparent) 0%,transparent 70%);}
[data-theme="light"] .stereo-upmixer .wave-wrap{background:#e8ecf5;}
[data-theme="light"] .stereo-upmixer .vu-wrap{background:var(--surface3);}

@media(max-width:600px){.stereo-upmixer .strips{gap:5px;}.stereo-upmixer .strip{width:70px;}}

/* ── Theater Canvas (added) ──────────────────────────────────────
   Uses hardcoded hex in JS — no CSS vars on canvas — both themes
   handled at draw time by reading data-theme on <html>/<body>.    */
.stereo-upmixer .theater-wrap{position:relative;width:100%;border-radius:.75rem;overflow:hidden;border:1px solid var(--border);background:#08090d;}
.stereo-upmixer #theaterCanvas{display:block;width:100%;height:300px;}
.stereo-upmixer .ch-strip-row{display:grid;grid-template-columns:repeat(6,1fr);background:#06070b;border-top:1px solid var(--border);padding:7px 4px 8px;gap:2px;}
.stereo-upmixer .ch-ind{display:flex;flex-direction:column;align-items:center;gap:3px;}
.stereo-upmixer .ch-ind-dot{width:7px;height:7px;border-radius:50%;transition:box-shadow .08s,opacity .08s;opacity:.35;}
.stereo-upmixer .ch-ind-dot.lit{opacity:1;}
.stereo-upmixer .ch-ind-id{font-family:var(--font-m);font-size:.58rem;font-weight:700;letter-spacing:.05em;}
.stereo-upmixer .ch-ind-nm{font-size:.52rem;color:var(--text-sub);text-align:center;line-height:1.2;}
[data-theme="light"] .stereo-upmixer .theater-wrap{background:#dde6f0;}
[data-theme="light"] .stereo-upmixer .ch-strip-row{background:#c8d5e2;border-top-color:var(--border);}
.stereo-upmixer *,
.stereo-upmixer *::before,
.stereo-upmixer *::after{box-sizing:border-box;}
.stereo-upmixer .file-info{margin-top:1rem;}
.stereo-upmixer .tool-stack{display:flex;flex-direction:column;gap:1.2rem;}
.stereo-upmixer .matrix-desc{font-size:.8rem;color:var(--text-mid);line-height:1.6;padding:.6rem .8rem;background:var(--surface2);border-radius:.5rem;border:1px solid var(--border);}
.stereo-upmixer .accent-text{color:var(--accent);}
.stereo-upmixer .strong-text{color:var(--text-bright);}
.stereo-upmixer .export-help{font-size:.82rem;color:var(--text-mid);margin-bottom:1rem;line-height:1.6;}
.stereo-upmixer .export-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;}
.stereo-upmixer .export-meta{font-size:.82rem;color:var(--text-mid);}
.stereo-upmixer .export-note{margin-top:.85rem;padding:.7rem .8rem;border:1px solid var(--accent-border);border-radius:.55rem;background:var(--accent-dim);color:var(--text-mid);font-size:.8rem;line-height:1.45;}
.stereo-upmixer .export-note strong{color:var(--text-bright);}
.stereo-upmixer .cbtn-export{font-size:1rem;padding:.75rem 1.6rem;}
.stereo-upmixer .export-status{font-size:.78rem;color:var(--text-sub);margin-top:.5rem;font-family:var(--font-m);}
.stereo-upmixer .card-compact{padding:1rem;}
.stereo-upmixer .mixer-actions{display:flex;gap:6px;margin-top:.8rem;flex-wrap:wrap;}
.stereo-upmixer .cbtn-small{font-size:.75rem;padding:.4rem .8rem;}
.stereo-upmixer .signal-flow{font-size:.78rem;color:var(--text-mid);line-height:1.8;font-family:var(--font-m);}
.stereo-upmixer .sig-fl{color:var(--cFL);}.stereo-upmixer .sig-fr{color:var(--cFR);}.stereo-upmixer .sig-c{color:var(--cC);}.stereo-upmixer .sig-lfe{color:var(--cLFE);}.stereo-upmixer .sig-ls{color:var(--cLS);}.stereo-upmixer .sig-rs{color:var(--cRS);}
.stereo-upmixer .coeff-panel{margin-top:.9rem;padding:.7rem;background:var(--surface2);border-radius:.5rem;border:1px solid var(--border);}
.stereo-upmixer .coeff-title{font-size:.72rem;color:var(--text-sub);margin-bottom:.4rem;}
.stereo-upmixer .coeff-display{font-size:.72rem;font-family:var(--font-m);color:var(--text-mid);line-height:1.7;}
.stereo-upmixer .strip-meter-row{display:flex;gap:6px;align-items:flex-end;}