:root{--bg-color:#0b0c10;--panel-bg:rgba(22,24,29,.7);--panel-border:hsla(0,0%,100%,.05);--accent-cyan:#45f3ff;--accent-magenta:#ff2a6d;--text-primary:#e0e6ed;--text-secondary:#8c9baf;--grid-color:hsla(0,0%,100%,.1);--btn-hover:#1f2229;--header-h:120px}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}body{background-color:var(--bg-color);color:var(--text-primary);font-family:Inter,sans-serif;height:100vh;overflow:hidden;width:100vw}.app-container{display:grid;grid-template-areas:"header header header" "meter main sidebar";grid-template-columns:220px 1fr 340px;grid-template-rows:var(--header-h) 1fr;height:100%;transition:grid-template-columns .3s cubic-bezier(.2,.8,.2,1),grid-template-rows .3s cubic-bezier(.2,.8,.2,1);width:100%}.app-container.header-collapsed{--header-h:0px}.app-container.focus-layout{grid-template-columns:0 1fr 0}.app-container.focus-layout.meter-open{grid-template-columns:220px 1fr 0}.glass-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--panel-bg);border:1px solid var(--panel-border)}.top-bar{border-bottom:1px solid var(--panel-border);box-shadow:0 4px 30px #00000080;grid-area:header;justify-content:space-between;overflow:hidden;padding:8px 24px;z-index:10}.header-toggle-tab,.top-bar{align-items:center;display:flex}.header-toggle-tab{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:0 0 10px 10px;border-top:none;box-shadow:0 4px 16px #0006;color:var(--text-secondary);cursor:pointer;font-size:10px;font-weight:600;gap:6px;left:50%;letter-spacing:1.5px;padding:3px 16px 5px;position:fixed;top:var(--header-h);transform:translate(-50%);transition:top .3s cubic-bezier(.2,.8,.2,1),background .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:30}.header-toggle-tab:hover{background:#45f3ff1a;border-color:#45f3ff40;color:var(--accent-cyan)}.header-toggle-tab .tab-chevron{display:inline-block;font-size:9px;line-height:1;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.app-container.header-collapsed .header-toggle-tab .tab-chevron{transform:rotate(180deg)}.logo h1{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-magenta));-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:800;letter-spacing:2px;-webkit-text-fill-color:transparent}.logo .subtitle{color:var(--text-secondary);font-size:11px;letter-spacing:1px;text-transform:uppercase}.audio-controls{align-items:flex-end;display:flex;flex-direction:column;gap:6px}.panel-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.panel-toggle-btn{margin-top:0}.panel-toggle-btn.is-active{background:#45f3ff24;border-color:var(--accent-cyan);color:#fff}.input-selector{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}.status-message{color:var(--text-secondary);font-size:12px;max-width:460px;text-align:right}.status-message:empty{display:none}.status-message.success{color:#0fa}.status-message.error{color:#ff6b8f}select{background:#00000080;border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:var(--text-primary);cursor:pointer;font-family:Inter,sans-serif;font-size:13px;outline:none;padding:8px 12px}select:focus{border-color:var(--accent-cyan)}.btn-primary,.btn-secondary{border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .2s ease}.btn-primary{background:var(--accent-cyan);color:#000}.btn-primary.is-connected{background:#0fa}.btn-primary.is-error{background:#ff6b8f;color:#fff}.btn-primary:active{transform:translateY(2px)}.btn-primary:disabled,.btn-secondary:disabled{cursor:not-allowed;opacity:.55;transform:none}.btn-secondary{background:transparent;border:1px solid var(--text-secondary);color:var(--text-primary);margin-top:10px;width:100%}.btn-inline{margin-top:0;width:auto}.btn-secondary:hover{background:#ffffff0d}.classic-meter-panel{align-items:center;background:#08090a;border-right:1px solid var(--panel-border);box-shadow:inset 20px 0 30px #00000080,10px 0 20px #0000004d;display:flex;flex-direction:column;grid-area:meter;overflow:hidden;padding:15px;white-space:nowrap;z-index:15}.app-container.focus-layout .classic-meter-panel{opacity:0;padding:15px 0;transition:opacity .2s,visibility .2s,padding .3s;visibility:hidden}.app-container.focus-layout.meter-open .classic-meter-panel{opacity:1;padding:15px;visibility:visible}.panel-backdrop{background:#0103084d;bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:var(--header-h);transition:opacity .24s ease,top .3s cubic-bezier(.2,.8,.2,1);z-index:18}.app-container.focus-layout.controls-open .panel-backdrop{opacity:1;pointer-events:auto}.app-container.focus-layout .control-panel{bottom:0;position:fixed;top:var(--header-h);transition:transform .28s ease,box-shadow .28s ease,top .3s cubic-bezier(.2,.8,.2,1)}.meter-title{color:var(--text-secondary);font-size:11px;font-weight:800;letter-spacing:1px;margin-bottom:10px}.meter-readouts{display:flex;gap:4px;justify-content:space-between;width:90%}.val-box{background:#111;border:1px solid #333;border-radius:3px;color:#45f3ff;font-family:monospace;font-size:13px;padding:6px 0;text-align:center;width:100%}.peak-val{color:#ff2a6d}.rms-val{color:#0fa}.readout-labels{color:#555;display:flex;font-size:9px;font-weight:700;justify-content:space-between;margin-top:5px;width:90%}.meter-dr-display{align-items:center;background:#000c;border:1px solid hsla(0,0%,100%,.1);border-radius:4px;display:flex;flex-direction:column;margin:15px 0;padding:8px 10px;width:80%}.dr-label{color:#888;font-size:10px}.dr-value{color:#0fa;font-size:22px;font-weight:800;text-shadow:0 0 10px rgba(0,255,170,.4)}.meter-dr-status{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;width:88%}.dr-status-row{align-items:center;background:#ffffff08;border:1px solid hsla(0,0%,100%,.08);border-radius:4px;display:flex;gap:10px;justify-content:space-between;padding:6px 8px}.dr-status-resettable{cursor:pointer}.dr-status-resettable:hover{background:#45f3ff0f;border-color:#45f3ff47}.dr-status-label{color:#7f8a97;font-size:10px;letter-spacing:.6px;text-transform:uppercase}.dr-status-value{color:#ffcf6b;font-family:monospace;font-size:11px}.dr-status-mode{color:#45f3ff;font-weight:700}.dr-scale-wrapper{display:flex;flex:1;justify-content:center;margin:10px 0;min-height:200px;width:100%}.dr-scale-labels{color:#666;display:flex;flex-direction:column;font-size:9px;font-weight:600;justify-content:space-between;padding:0 4px}.dr-bar-container{background:#0a0a0c;border:1px solid #222;border-radius:3px;box-shadow:inset 0 0 10px #000;position:relative;width:120px}.dr-bar-bg{bottom:0;display:flex;height:100%;justify-content:space-between;left:0;padding:2px;position:absolute;width:100%}.dr-channel{background:#ffffff05;border-radius:1px;height:100%;position:relative;width:45%}.dr-rms-fill{background:linear-gradient(0deg,#0fa 0 60%,#ff0 80%,#ff2a6d);height:0;opacity:.8;transition:height .15s ease-out}.dr-peak-tick,.dr-rms-fill{bottom:0;left:0;position:absolute;width:100%}.dr-peak-tick{background:#fff;box-shadow:0 0 4px #ff2a6d;height:3px;transition:bottom .05s ease-out}.menu-toggle-tab{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:10px 0 0 10px;border-right:none;box-shadow:-4px 0 16px #0006;cursor:pointer;display:flex;justify-content:center;padding:20px 4px;position:fixed;right:0;top:50%;transform:translateY(-50%);transition:right .28s ease,background .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:20px;z-index:21}.menu-toggle-tab:hover{background:#45f3ff1a;border-color:#45f3ff40}.menu-toggle-tab:hover .menu-tab-chevron{color:var(--accent-cyan)}.menu-tab-chevron{color:var(--text-secondary);display:block;font-size:16px;line-height:1;transition:transform .28s ease,color .2s}.app-container.focus-layout.controls-open .menu-toggle-tab{right:min(340px,90vw)}.app-container.focus-layout.controls-open .menu-tab-chevron{transform:rotate(180deg)}.workspace{background:#000;display:flex;flex-direction:column;gap:2px;grid-area:main;min-height:0;position:relative;transition:opacity .28s ease}.app-container.focus-layout.controls-open .workspace{opacity:.85}.workspace.panels-1{display:flex;flex-direction:column}.workspace.panels-1 .visualizer-container:not(.hidden){flex:1 1 100%}.workspace.panels-2{display:flex;flex-direction:column}.workspace.panels-2 .visualizer-container:not(.hidden){flex:0 0 calc(50% - 1px);max-height:calc(50% - 1px)}.workspace.panels-3{display:grid;gap:2px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.workspace.panels-3 .visualizer-container.panel-primary{grid-column:1/-1}.workspace.panels-4{display:grid;gap:2px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.visualizer-container{flex:1 1 auto;height:auto;min-height:0;overflow:hidden;position:relative;width:100%}.visualizer-container.hidden{display:none}canvas{cursor:grab;display:block;height:100%;width:100%}canvas:active{cursor:grabbing}.overlay-labels{color:#ffffff4d;font-size:10px;font-weight:800;left:10px;letter-spacing:2px;pointer-events:none;position:absolute;top:10px}.control-panel{border-left:1px solid var(--panel-border);display:flex;flex-direction:column;gap:30px;grid-area:sidebar;overflow-y:auto;padding:24px}.app-container.focus-layout .control-panel{border-left:1px solid var(--panel-border);box-shadow:-16px 0 32px #0006;right:0;transform:translate(100%);width:min(340px,90vw);z-index:20}.app-container.focus-layout.controls-open .control-panel{transform:translate(0)}.control-group{display:flex;flex-direction:column;gap:16px}h3{border-bottom:1px solid hsla(0,0%,100%,.1);color:var(--text-secondary);font-size:14px;letter-spacing:1px;padding-bottom:8px;text-transform:uppercase}.control-item{display:flex;flex-direction:column;gap:8px}.control-item label{color:var(--text-secondary);font-size:12px}.checkbox-row{align-items:center;color:var(--text-primary);cursor:pointer;display:flex;gap:10px}.checkbox-row input[type=checkbox]{accent-color:var(--accent-cyan);cursor:pointer;height:14px;width:14px}.peak-status-grid{gap:10px}.peak-status-card{align-items:center;background:#00000047;border:1px solid hsla(0,0%,100%,.08);border-radius:6px;display:flex;gap:12px;justify-content:space-between;padding:10px 12px}.peak-status-label{color:var(--text-secondary);font-size:12px}.peak-status-value{color:#ffcf6b;font-family:monospace;font-size:12px;text-align:right}.button-row{display:flex;gap:10px}.button-row .btn-secondary{flex:1;margin-top:0;width:auto}.mode-selector{background:#0000004d;border:1px solid hsla(0,0%,100%,.1);border-radius:6px;display:flex;flex-direction:row;padding:4px}.mode-btn{background:transparent;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;flex:1;font-size:12px;font-weight:600;padding:6px 0;transition:all .3s ease}.mode-btn.active{background:var(--accent-magenta);color:#fff}.slider-header{display:flex;justify-content:space-between}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--accent-cyan);border-radius:50%;cursor:pointer;height:16px;margin-top:-6px;width:16px}input[type=range]::-webkit-slider-runnable-track{background:#333;border-radius:2px;cursor:pointer;height:4px;width:100%}.hint{color:var(--text-secondary);font-size:11px;font-style:italic}@media(max-width:768px){:root{--header-h:auto}body{overflow-x:hidden;overflow-y:auto}.app-container,.app-container.focus-layout,.app-container.focus-layout.meter-open{display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none;height:100vh;height:100dvh}.top-bar{align-items:stretch;flex-direction:column;gap:8px;min-height:0;overflow:visible;padding:10px 12px}.logo{align-items:center;display:flex;gap:10px}.logo h1{font-size:18px}.logo .subtitle{font-size:9px}.audio-controls{align-items:stretch;gap:6px}.input-selector{gap:6px;justify-content:stretch}.input-selector label{display:none}.input-selector select{flex:1;font-size:12px;min-width:0;padding:10px 8px}.input-selector .btn-primary,.input-selector .btn-secondary{font-size:12px;padding:10px 12px}.status-message{font-size:11px;max-width:none;text-align:center}.panel-actions{flex-wrap:nowrap;gap:6px;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}.panel-toggle-btn{flex-shrink:0;font-size:11px;min-height:44px;min-width:44px;padding:8px 12px;white-space:nowrap}.header-toggle-tab{align-self:center;left:0;margin:-4px 0 0;padding:4px 24px;position:relative;top:0;transform:none;z-index:10}.workspace{flex:1 1 0;min-height:200px}.workspace.panels-3,.workspace.panels-4{display:flex;flex-direction:column}.workspace.panels-3 .visualizer-container:not(.hidden),.workspace.panels-4 .visualizer-container:not(.hidden){flex:1 1 0;max-height:none;width:100%}.workspace.panels-3 .visualizer-container.panel-primary{grid-column:unset}.app-container.focus-layout .classic-meter-panel,.app-container.focus-layout.meter-open .classic-meter-panel,.classic-meter-panel{align-items:center;border-right:none;border-top:1px solid var(--panel-border);flex-direction:row;gap:10px;inset:auto 0 0;max-height:120px;opacity:1;overflow-x:auto;overflow-y:hidden;padding:8px 12px;position:fixed;transition:transform .28s ease;visibility:visible;white-space:nowrap;z-index:25}.app-container.focus-layout .classic-meter-panel{transform:translateY(100%)}.app-container.focus-layout.meter-open .classic-meter-panel{transform:translateY(0)}.meter-title{font-size:10px;margin-bottom:0}.meter-readouts{flex-direction:column;gap:2px;width:auto}.meter-dr-display{margin:0;padding:4px 8px;width:auto}.dr-value{font-size:16px}.meter-dr-status{gap:4px;margin-bottom:0;width:auto}.dr-scale-wrapper{flex-shrink:0;height:80px;margin:0;min-height:80px;width:80px}.dr-bar-container{width:60px}.readout-labels{margin-top:2px;width:auto}.app-container.focus-layout .control-panel,.control-panel{border-left:none;border-radius:16px 16px 0 0;border-top:1px solid var(--panel-border);box-shadow:0 -8px 32px #00000080;inset:auto 0 0;max-height:70vh;overflow-y:auto;padding:20px 16px;position:fixed;transform:translateY(100%);width:100%;z-index:30;-webkit-overflow-scrolling:touch}.app-container.focus-layout.controls-open .control-panel{transform:translateY(0)}.menu-toggle-tab{border-bottom:none;border-radius:10px 10px 0 0;border-right:1px solid var(--panel-border);box-shadow:0 -4px 16px #0006;inset:auto auto 0 50%;padding:6px 24px;position:fixed;transform:translate(-50%);width:auto}.menu-tab-chevron{transform:rotate(-90deg)}.app-container.focus-layout.controls-open .menu-toggle-tab{bottom:70vh;right:auto}.app-container.focus-layout.controls-open .menu-tab-chevron{transform:rotate(90deg)}.panel-backdrop{top:0}.btn-primary,.btn-secondary,select{font-size:13px;min-height:44px}.mode-btn{font-size:11px;min-height:40px}input[type=range]{height:44px}input[type=range]::-webkit-slider-thumb{height:24px;margin-top:-10px;width:24px}.checkbox-row input[type=checkbox]{height:20px;width:20px}}