:root{
  --bg:#f4f6f8; --panel:#ffffff; --text:#17202a; --muted:#727b86; --line:#d6dbe1;
  --shadow:0 10px 28px rgba(20,31,44,.08); --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;color:var(--text);touch-action:none}
button{font:inherit}
.app-shell{height:100dvh;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.93);border:1px solid #e4e8ec;border-radius:20px;padding:12px 14px 12px 18px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#173c66;color:#fff;font-size:25px;font-weight:700}.title{font-size:22px;font-weight:760;letter-spacing:-.3px}.subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.top-actions{display:flex;align-items:center;gap:12px}.status-pill{display:flex;align-items:center;gap:8px;background:#f1f3f5;border:1px solid #e2e6ea;border-radius:999px;padding:9px 13px;font-size:14px;font-weight:650}.status-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.035)}.status-dot.online{background:#2eb05f}.status-dot.offline{background:#d94646}.status-dot.starting{background:#d79a24;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}
.session-button{border:0;border-radius:13px;padding:12px 18px;font-weight:760;min-width:196px;cursor:pointer}.session-button.start{background:#173c66;color:#fff}.session-button.stop{background:#fbecec;color:#a92828;border:1px solid #f0c6c6}.session-button:disabled{opacity:.55;cursor:not-allowed}
.notice{border-radius:12px;padding:9px 14px;background:#fff4df;border:1px solid #edcf91;color:#6f4b03;font-size:13px}.hidden{display:none!important}
.mixer-area{flex:1;min-height:0;display:grid;grid-template-columns:1.22fr 12px repeat(6,1fr) 12px 1.22fr;gap:8px;align-items:stretch}
.divider{height:92%;align-self:center;border-left:2px dashed #c8ced5}
.channel{--accent:#4b5563;min-width:0;background:var(--panel);border:1px solid #e1e5e9;border-radius:var(--radius);box-shadow:0 8px 22px rgba(24,35,48,.055);padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}
.channel.wide{padding-left:12px;padding-right:12px;border-color:#d6dce3;box-shadow:0 10px 28px rgba(24,35,48,.09)}
.mute-btn{width:46px;height:40px;border:1px solid #d9dde2;background:#eef1f4;border-radius:12px;display:grid;place-items:center;color:#555d66;margin-bottom:6px;cursor:pointer;transition:.12s}.mute-btn svg{width:22px;height:22px}.mute-btn.active{background:#d83a3a;border-color:#c82f2f;color:#fff}.mute-spacer{height:46px}
.fader-zone{flex:1;width:100%;min-height:0;display:flex;justify-content:center;align-items:stretch;gap:8px;padding:0 4px}
.meter{width:10px;border-radius:999px;background:#e9edf0;border:1px solid #dce1e5;position:relative;overflow:hidden;margin:8px 0 20px}.meter-fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(to top,#34a85b 0%,#34a85b 68%,#e4b329 68%,#e4b329 88%,#d74343 88%,#d74343 100%);transition:height 55ms linear}.meter.unsupported{opacity:.42}.meter.unsupported:after{content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;border-radius:2px;background:#8c949c}
.fader{position:relative;width:52px;flex:1;min-height:260px;margin:8px 0 20px;touch-action:none;user-select:none}.track-bg{position:absolute;width:8px;top:0;bottom:0;left:50%;transform:translateX(-50%);border-radius:999px;background:#e1e5e9}.track-fill{position:absolute;width:8px;left:50%;bottom:0;transform:translateX(-50%);height:0%;border-radius:999px;background:var(--accent)}.fader-scale{position:absolute;left:2px;right:2px;top:0;bottom:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(10% - 1px),rgba(84,92,102,.14) calc(10% - 1px),rgba(84,92,102,.14) 10%)}.knob{position:absolute;left:50%;bottom:0%;transform:translate(-50%,50%);width:45px;height:22px;border-radius:7px;background:linear-gradient(#fff,#d8dde2);border:1px solid #aeb5bc;box-shadow:0 2px 5px rgba(20,30,40,.22);transition:bottom 45ms linear}.knob:after{content:"";position:absolute;left:7px;right:7px;top:50%;height:2px;transform:translateY(-50%);background:var(--accent);border-radius:2px}
.db-value{height:22px;font-size:13px;font-variant-numeric:tabular-nums;color:#4d5660;font-weight:650}.db-value.blank{visibility:hidden}.channel-name{font-size:15px;font-weight:800;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:2px}.wide .channel-name{font-size:17px}
.channel.disabled{opacity:.52}.channel.disabled .fader,.channel.disabled .mute-btn{pointer-events:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,28,36,.3);backdrop-filter:blur(7px);display:grid;place-items:center;z-index:50}.modal-card{width:min(480px,86vw);background:#fff;border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.18)}.modal-card h2{margin:0 0 8px;font-size:22px}.modal-card p{margin:0 0 22px;color:#67717c}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.modal-actions button{border:0;border-radius:12px;padding:12px 15px;font-weight:720}.secondary{background:#edf0f3;color:#27313b}.danger{background:#c93636;color:#fff}
@media(max-height:650px){.topbar{height:64px}.brand-mark{width:38px;height:38px}.title{font-size:19px}.subtitle{display:none}.channel{padding-top:7px;padding-bottom:7px}.fader{min-height:210px}.mute-btn{height:36px}.db-value{height:18px}}