*{box-sizing:border-box}html,body,#root{min-height:100%;height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#070d19;color:#e5eefc;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.app-shell{width:100%;height:100vh;padding:10px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:8px 10px;border-radius:16px;background:#0f172ac7;border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 50px #0003}.brand-block{display:flex;align-items:baseline;gap:12px;min-width:max-content}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.14em;color:#8bb4ff;font-size:11px}h1,h2,h3,p{margin:0}h1{font-size:clamp(24px,2.1vw,34px);line-height:1}h2{font-size:18px}.subtle{color:#94a3b8;margin-top:4px;line-height:1.35}.top-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.status-chip,.mode-badge{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 10px;border-radius:999px;background:#1e293be6;border:1px solid rgba(148,163,184,.15);color:#dbeafe;font-size:12px;font-weight:800;white-space:nowrap}.status-chip.primary{color:#fff}.status-chip.online{color:#bbf7d0}.status-chip.offline{color:#fecaca}.mode-badge{background:#60a5fa1f;color:#bfdbfe;border-color:#60a5fa38}.mode-badge.real{background:#10b9811f;color:#a7f3d0;border-color:#10b98138}.dot{width:9px;height:9px;border-radius:999px;flex:none;box-shadow:0 0 0 3px #ffffff08}.dot.ok{background:#22c55e}.dot.bad{background:#ef4444}.primary-btn,.secondary-btn,.icon-btn{border:0;border-radius:12px;color:#fff;font-weight:800}.primary-btn{padding:12px 16px;background:linear-gradient(135deg,#2563eb,#7c3aed)}.secondary-btn{padding:12px 16px;background:#475569f2}.secondary-btn.slim{min-height:32px;padding:6px 12px;border-radius:999px;font-size:12px}.icon-btn{width:38px;height:38px;background:#475569b3;font-size:24px;line-height:1}.mixer-stage{position:relative;min-width:0;min-height:0;height:100%;overflow:hidden}.mixer-layout{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:10px;height:100%;min-height:0}.error-badge,.loading-badge{position:absolute;z-index:5;top:12px;right:12px;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:800}.error-badge{background:#ef44441f;color:#fca5a5;border:1px solid rgba(239,68,68,.18)}.loading-badge{background:#1e293be6;color:#bfdbfe;border:1px solid rgba(148,163,184,.15)}.mixer-scroll{min-width:0;min-height:0;height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,1fr);gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x proximity}.channel-strip,.master-strip{position:relative;min-width:0;min-height:0;height:100%;border-radius:14px;background:linear-gradient(180deg,#0f172afa,#0a0f1cfa);border:1px solid rgba(148,163,184,.14);box-shadow:inset 0 1px #ffffff0a}.channel-strip{scroll-snap-align:start;display:grid;grid-template-rows:48px minmax(0,1fr) 46px;gap:8px;min-width:92px;padding:10px 8px}.channel-strip.muted{opacity:.88;background:linear-gradient(180deg,#3b0c12fa,#1c060afa);border-color:#ef444447}.strip-top{display:grid;gap:3px;align-content:start}.master-top{margin-bottom:6px}.channel-number{color:#8bb4ff;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.strip-top h3{font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-body{min-height:0;display:grid;grid-template-columns:1fr 1.05fr;gap:5px;align-items:stretch;justify-items:center}.vertical-meter,.vertical-fader{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:6px;height:100%}.vertical-meter-label,.vertical-fader-label{color:#94a3b8;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.vertical-meter-track,.vertical-fader-track{position:relative;width:22px;height:100%;min-height:260px;border-radius:999px;background:#0f172a;border:1px solid rgba(148,163,184,.16);overflow:hidden}.vertical-meter-track{background:linear-gradient(180deg,#0c111df2,#0f172afa)}.vertical-meter-ticks,.vertical-fader-track:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to top,rgba(255,255,255,.18) 0 1px,transparent 1px 12.5%,rgba(255,255,255,.08) 12.5% 13px,transparent 13px 25%);opacity:.28;pointer-events:none}.vertical-meter-zone{position:absolute;left:0;width:100%;pointer-events:none;opacity:.24}.zone-safe{bottom:0;height:62%;background:linear-gradient(180deg,#22c55ef2,#22c55e1f)}.zone-warn{bottom:62%;height:24%;background:linear-gradient(180deg,#eab308e6,#eab3081a)}.zone-danger{bottom:86%;height:14%;background:linear-gradient(180deg,#ef4444eb,#ef444414)}.vertical-meter-fill,.vertical-fader-fill{position:absolute;left:0;bottom:0;width:100%;border-radius:inherit}.vertical-meter-fill{background:linear-gradient(180deg,#22c55e,#16a34a 48%,#eab308 75%,#ef4444);box-shadow:0 0 18px #22c55e3d}.master-left{background:linear-gradient(180deg,#22c55e,#16a34a 46%,#eab308 74%,#ef4444)}.master-right{background:linear-gradient(180deg,#60a5fa,#3b82f6 46%,#eab308 74%,#ef4444)}.vertical-fader-fill{background:linear-gradient(180deg,#60a5fa14,#60a5fa2e)}.vertical-fader-block{position:relative;min-height:0;display:grid;grid-template-columns:12px 1fr;gap:4px;align-items:stretch}.vertical-fader-scale{display:grid;grid-template-rows:repeat(6,1fr);justify-items:end;gap:0;min-height:260px;pointer-events:none;padding:2px 0}.vertical-fader-scale span{display:flex;align-items:center;justify-content:flex-end;padding-right:4px;color:#e2e8f085;font-size:7px;line-height:1;position:relative}.vertical-fader-scale span:after{content:"";width:4px;height:1px;background:#94a3b84d;margin-left:4px;flex:none}.vertical-fader input[type=range]{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;width:100%;height:100%;writing-mode:vertical-rl;direction:rtl;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;background:transparent;accent-color:#8b5cf6;cursor:ns-resize}.vertical-fader input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:9px;border-radius:3px;background:linear-gradient(180deg,#f8fafc,#cbd5e1);border:1px solid rgba(15,23,42,.75);box-shadow:0 5px 14px #00000061,inset 0 1px #ffffff73}.vertical-fader input[type=range]::-moz-range-thumb{width:22px;height:9px;border-radius:3px;background:linear-gradient(180deg,#f8fafc,#cbd5e1);border:1px solid rgba(15,23,42,.75);box-shadow:0 5px 14px #00000061,inset 0 1px #ffffff73}.vertical-meter strong,.vertical-fader strong{font-size:10px;color:#e5eefc}.fader-value{color:#f8fafc;text-shadow:0 0 12px rgba(139,92,246,.28)}.master-strip{width:158px;display:grid;grid-template-rows:auto 1fr auto auto;gap:8px;padding:10px 8px;position:sticky;top:0}.master-meter-stack{display:grid;grid-template-columns:1fr 1fr;gap:4px;min-height:0}.master-meter-channel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:4px;min-height:0}.master-fader-wrap{position:relative;min-height:0;display:grid;grid-template-columns:12px 1fr;gap:4px;align-items:stretch}.master-scale{min-height:260px}.master-fader{min-height:0}.master-mute{min-height:42px}.mute-strip{border:0;border-radius:12px;background:linear-gradient(180deg,#22c55e29,#22c55e14);color:#bbf7d0;font-weight:900;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.mute-strip.active{background:linear-gradient(180deg,#ef44443d,#ef44441f);color:#fecaca;box-shadow:0 0 0 1px #ef44442e inset}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:20px;background:#020617b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-card{width:min(680px,100%);display:grid;gap:18px;padding:20px;border-radius:20px;background:#0f172afa;border:1px solid rgba(148,163,184,.18);box-shadow:0 24px 80px #00000073}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.connect-row{display:grid;gap:12px;grid-template-columns:minmax(220px,1fr) auto;align-items:end}.field{display:grid;gap:8px}.field span{color:#94a3b8;font-size:13px}.field input,.select-input{width:100%;padding:13px 15px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:#0f172a;color:#e5eefc;outline:none}.field input:focus,.select-input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa26}.button-row{display:flex;gap:10px;flex-wrap:wrap}@media (min-width: 1300px){.mixer-scroll{grid-auto-columns:minmax(96px,1fr)}}@media (max-width: 980px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;overflow:visible}.topbar{align-items:flex-start;flex-direction:column}.brand-block{flex-direction:column;gap:4px}.top-status{justify-content:flex-start}.mixer-layout{grid-template-columns:1fr}.master-strip{width:100%;position:static}.mixer-stage{min-height:980px}}@media (max-width: 640px){.app-shell{padding:10px}.connect-row{grid-template-columns:1fr}.mixer-scroll{grid-auto-columns:92px}.vertical-meter-track,.vertical-fader-track{min-height:220px}}