/* Compact original fader bank, full-width limiter analyzer. */
body:not(.setup-body) { min-height: 100dvh; background: radial-gradient(ellipse at 50% 0, var(--ambient), transparent 65%), var(--bg); }
body:not(.setup-body) .topbar { max-width: 904px; margin: 0 auto; padding: 0 16px; height: 82px; gap: 12px; background: transparent; border: 0; }
body:has(#login:not([hidden])) .topbar { max-width: 1040px; padding-left: 12px; padding-right: 12px; }
.topbar .product-label, #account-name, #role-label { display: none; }
.topbar .brand { gap: 7px; }.topbar .brand-mark { width: 25px; }.topbar .brand-mark svg { width: 24px; }.topbar .brand-word { font-size: 21px; font-weight: 600; letter-spacing: -.65px; }
.topbar .theme-control { gap: 0; }.topbar .theme-control>span { display: none; }.topbar .theme-control select { width: 78px; min-height: 44px; font-size: 12px; padding: 8px 5px; }
.topbar .account { gap: 2px; }.topbar .account-avatar { width: 26px; height: 26px; }.topbar #logout { width: 38px; padding: 6px; }.logout-label { display: none; }.logout-icon { display: block; }
.app-layout { display: block; min-height: 0; max-width: 904px; padding: 0 12px 40px; margin: 0 auto; }
.app-layout:has(#mixer-page:not([hidden])), body:has(#workspace:not([hidden]) #mixer-page:not([hidden])) .topbar { max-width: 468px; }
.control-workspace { width: 100%; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow), inset 0 1px 0 #ffffff05; overflow: clip; }
.device-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 18px 18px 24px; }
.device-identity { min-width: 0; flex: 1; }
#device-select { width: 100%; max-width: 260px; padding: 0 25px 0 0; border: 0; border-radius: 5px; background: transparent; font-size: 22px; font-weight: 600; letter-spacing: -.6px; min-height: 36px; text-overflow: ellipsis; }
#device-select option { font-size: 15px; background: var(--panel); color: var(--ink); }
.device-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.device-meta .live-status { font-size: 12px; gap: 5px; }.device-meta .status-dot { width: 4px; height: 4px; }.device-meta .live-status.online .status-dot { background: var(--muted); }
.meta-separator { color: var(--muted); }.device-actions { display: flex; gap: 2px; flex-shrink: 0; }
.toolbar-button { display: grid; place-items: center; height: 44px; width: 44px; padding: 9px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; }
.toolbar-button svg { width: 21px; height: 21px; }.toolbar-button:hover { background: var(--raised); color: var(--ink); }
#manage-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 9px 12px; font-size: 12px; }#manage-button span { white-space: nowrap; }
.mixer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--toolbar); }
.mixer-nav { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--field); flex-shrink: 0; }
.mixer-nav button { border: 0; min-height: 44px; padding: 7px 13px; background: transparent; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 550; }
.mixer-nav button:hover { color: var(--ink); }.mixer-nav button[aria-selected=true] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 4px #00000024, inset 0 1px 0 #ffffff08; }
.preset-control { position: relative; margin: 0; min-width: 0; height: 44px; text-align: right; }
.preset-control>span { position: absolute; right: 20px; top: 0; font-size: 11px; font-weight: 400; color: var(--muted); pointer-events: none; }
#preset-select { min-height: 44px; height: 44px; padding: 13px 2px 0; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; max-width: 135px; text-overflow: ellipsis; }
#preset-select option { background: var(--panel); color: var(--ink); font-size: 14px; }
.mixer-layout { padding: 28px; }
.mixer-console { display: grid; grid-template-columns: repeat(3,minmax(0,114px)); justify-content: center; align-items: start; gap: 14px; }
.mixer-strip { min-width: 0; text-align: center; position: relative; }
.mixer-strip dp-fader { width: 100%; height: 402px; --dp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --dp-confirm-louder-than: 100; --dp-fader-min-track: 130px; --dp-accent: var(--accent); --dp-unity: var(--dp-on-well); --dp-ink-3: var(--muted); --dp-strip-bg: #20252e; --dp-strip-edge: #353b46; --dp-surface-2: #292f39; --dp-radius-l: 13px; --dp-radius-s: 7px; }
[data-theme="light"] .mixer-strip dp-fader { --dp-strip-bg: #ffffff; --dp-strip-edge: #d9dce3; --dp-surface-2: #f0f1f5; }
.mixer-strip dp-fader::part(keys) { min-height: 44px; padding: 0 6px; }
.mixer-strip dp-fader::part(readout) { height: 40px; line-height: 40px; }
.strip-range { font-size: 11px; color: var(--muted); margin-top: 7px; }
.confirmed { font-size: 11px; color: var(--muted); margin-top: 7px; font-variant-numeric: tabular-nums; }
.strip-feedback { font-size: 11px; line-height: 1.5; margin-top: 8px; color: var(--accent); }.strip-feedback[data-kind=error] { color: var(--danger); }
#connection-message { margin: 0 18px 16px; }#mixer-message { margin: 0 20px 18px; font-size: 12px; padding: 8px 12px; }
.preview-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); background: var(--toolbar); }.preview-note .text-link { font-size: 11px; }
.dynamics-console { margin: 22px; overflow: hidden; border: 1px solid #35373d; border-radius: 10px; background: #181a1e; --analyzer-ink: #93969e; --analyzer-grid: #ffffff0d; --analyzer-left: #d1d4da; --analyzer-right: #747981; --analyzer-fill: #acb2bc88; --analyzer-accent: #e3b66e; }
.analyzer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px 8px 20px; }
.analyzer-identity { display: flex; align-items: baseline; gap: 10px; }.analyzer-identity h2 { font-size: 14px; letter-spacing: 0; font-weight: 550; }.analyzer-identity>span { font-size: 11px; color: var(--analyzer-ink); }
.analyzer-modes { display: flex; gap: 3px; }.analyzer-modes button { min-height: 44px; padding: 7px 12px; border: 0; border-radius: 6px; color: var(--analyzer-ink); background: transparent; font-size: 12px; }.analyzer-modes button[aria-pressed=true] { color: var(--ink); background: #ffffff08; }.analyzer-modes button:hover { color: var(--ink); }
.analyzer-display { display: flex; height: 330px; padding: 0 18px 0 16px; background: linear-gradient(180deg,#ffffff00,#ffffff02); }
.analyzer-plot { flex: 1; min-width: 0; position: relative; }.analyzer-plot canvas { display: block; width: 100%; height: 100%; }
.analyzer-meters { width: 31px; flex-shrink: 0; margin-left: 5px; position: relative; }.analyzer-meter-labels { display: flex; gap: 5px; position: absolute; bottom: -1px; width: 100%; color: var(--analyzer-ink); font-size: 9px; text-align: center; }.analyzer-meter-labels span { width: 13px; }.analyzer-meter-tracks { display: flex; gap: 5px; height: calc(100% - 27px); margin-top: 10px; }
.analyzer-meter { position: relative; width: 13px; overflow: hidden; background: #0c0e12; border-radius: 2px; box-shadow: inset 0 0 0 1px #ffffff09; }.analyzer-meter i { position: absolute; inset: 0; background: linear-gradient(0deg,#8c9dac,#c4ccd2 82%,#e3b66e 98%); clip-path: inset(calc(100% - var(--level,0%)) 0 0); }.analyzer-meter b { position: absolute; width: 100%; height: 2px; background: var(--analyzer-accent); bottom: clamp(0px,var(--peak,0%),calc(100% - 2px)); }.analyzer-meter.unavailable { opacity: .3; }.analyzer-meter.unavailable b { display: none; }
.analyzer-footer { min-height: 44px; display: flex; align-items: center; gap: 18px; padding: 0 13px 0 20px; font-size: 10px; color: var(--analyzer-ink); position: relative; }
.analyzer-legend { display: flex; gap: 13px; }.analyzer-legend span { display: flex; align-items: center; gap: 5px; }.analyzer-legend i { width: 10px; height: 3px; background: var(--analyzer-left); }.analyzer-legend span+span i { background: var(--analyzer-right); }
#analyzer-scale-label { margin-left: auto; }.analyzer-info { position: relative; }.analyzer-info summary { display: grid; place-content: center; width: 30px; height: 44px; cursor: pointer; list-style: none; font-family: Georgia,serif; font-style: italic; font-size: 14px; }.analyzer-info summary::-webkit-details-marker { display: none; }.analyzer-info p { position: absolute; bottom: 40px; right: 0; width: min(285px,calc(100vw - 70px)); padding: 14px 16px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.6; z-index: 2; box-shadow: 0 6px 20px #0003; }
.limiter-strip { display: grid; grid-template-columns: 168px minmax(0,1fr); column-gap: 26px; align-items: center; padding: 18px 22px; background: #ffffff04; border-top: 1px solid #ffffff0b; }
.threshold-heading label { margin: 0 0 2px; font-size: 11px; font-weight: 450; color: var(--muted); }.limiter-value { color: var(--analyzer-accent); font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }.limiter-value small { font-size: 11px; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.threshold-adjust { display: flex; align-items: center; gap: 13px; }.threshold-adjust button { border: 1px solid var(--line-soft); background: transparent; color: var(--muted); border-radius: 7px; width: 44px; height: 44px; flex-shrink: 0; padding: 0; font-size: 20px; }.threshold-adjust button:hover { color: var(--ink); background: var(--field); }
#limiter-threshold { --position: 0%; appearance: none; -webkit-appearance: none; min-width: 0; flex: 1; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; cursor: ew-resize; background: transparent; touch-action: pan-y; }
#limiter-threshold::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg,var(--analyzer-accent) var(--position),#3b3e44 var(--position)); box-shadow: inset 0 1px 2px #0005; }
#limiter-threshold::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 30px; margin-top: -13px; border: 1px solid #79808d; border-radius: 5px; background: linear-gradient(90deg,#5c626e,#242932 45%,#424954); box-shadow: inset 0 1px 0 #ffffff3b,0 2px 5px #0008; }
#limiter-threshold::-moz-range-track { height: 5px; border-radius: 3px; background: linear-gradient(90deg,var(--analyzer-accent) var(--position),#3b3e44 var(--position)); }
#limiter-threshold::-moz-range-thumb { width: 24px; height: 30px; border: 1px solid #79808d; border-radius: 5px; background: linear-gradient(90deg,#5c626e,#242932 45%,#424954); }
#limiter-threshold:disabled { cursor: default; }.limiter-strip .strip-range,.limiter-strip .confirmed,.limiter-strip .strip-feedback { grid-column: 1 / -1; }
[data-theme="light"] .dynamics-console { border-color: #d6d8df; background: #f0f1f4; --analyzer-ink: #727780; --analyzer-grid: #25293812; --analyzer-left: #515864; --analyzer-right: #9097a3; --analyzer-fill: #737e8d80; --analyzer-accent: #946422; }
[data-theme="light"] .analyzer-modes button[aria-pressed=true] { background: #fff; }[data-theme="light"] .analyzer-meter { background: #dcdfe5; }[data-theme="light"] .analyzer-meter i { background: linear-gradient(0deg,#748392,#596e80 82%,#ac843f 98%); }[data-theme="light"] .limiter-strip { background: #fafafc; border-top-color: #dcdfe5; }
[data-theme="light"] #limiter-threshold::-webkit-slider-thumb { border-color: #a3aab5; background: linear-gradient(90deg,#fdfefe,#d7dce4 45%,#f0f2f6); box-shadow: inset 0 1px 0 #fff,0 2px 5px #0002; }

.manage-dialog { width: min(580px,calc(100vw - 32px)); max-height: 90dvh; overflow-y: auto; border-radius: 22px; }
.manage-dialog h2 { font-size: 27px; margin: 18px 0 12px; }.manage-dialog>p { font-size: 13px; line-height: 1.7; color: var(--muted); }
.manage-dialog .policy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 22px 0; }
.manage-dialog .policy-channel { background: var(--field); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; }
.manage-dialog .policy-channel h3 { font-size: 15px; margin-bottom: 4px; }.manage-dialog .policy-range { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); align-items: end; gap: 7px; margin-top: 12px; }
.manage-dialog .policy-range>span { padding-bottom: 19px; font-size: 12px; text-align: center; color: var(--muted); }
.manage-dialog label { font-size: 12px; min-width: 0; }.manage-dialog input { margin-top: 6px; font-size: 16px; }.manage-dialog #save-policy { margin-top: 20px; width: 100%; }.manage-dialog #policy-message { margin-top: 16px; }
.empty-state { min-height: 400px; padding: 30px; }.empty-state h1 { font-size: 26px; }.empty-state>p { font-size: 14px; }
@media(max-width:759px) {
  body:not(.setup-body) .topbar, .app-layout { max-width: 520px; }
  #manage-button { width: 44px; padding: 9px; }#manage-button span { display: none; }
  .mixer-layout { display: block; padding: 22px; }.mixer-console { gap: 12px; }
  .dynamics-console { margin: 16px; }.analyzer-display { height: 255px; }.limiter-strip { grid-template-columns: 1fr; gap: 8px; padding: 16px; }.threshold-heading { display: flex; justify-content: space-between; align-items: center; }.threshold-heading label { font-size: 12px; margin: 0; }.limiter-value { font-size: 22px; }
}
@media(max-width:480px) {
  body:not(.setup-body) .topbar { height: 64px; padding: 0 18px; gap: 9px; }.topbar .brand-word { font-size: 20px; }.topbar .brand { gap: 5px; }.topbar .theme-control select { width: 73px; }.topbar #logout { width: 34px; }
  .app-layout { padding: 0 12px 24px; }.control-workspace { border-radius: 21px; }.device-toolbar { padding: 16px 12px 16px 18px; }#device-select { font-size: 21px; min-height: 36px; max-width: 240px; }.device-meta, .device-meta .live-status { font-size: 11px; gap: 5px; }.device-actions { gap: 0; }
  .mixer-toolbar { padding: 10px 16px; gap: 10px; }.mixer-nav button { padding: 7px 10px; }#preset-select { font-size: 12px; max-width: 125px; }
  .mixer-layout { padding: 18px 12px; }.mixer-console { gap: 8px; }.mixer-strip dp-fader { height: 386px; --dp-fader-min-track: 120px; }.preview-note { padding: 11px 17px; font-size: 10px; }.preview-note .text-link { font-size: 10px; }
  .dynamics-console { margin: 12px; }.analyzer-header { padding: 7px 7px 5px 13px; gap: 5px; }.analyzer-identity { flex-direction: column; gap: 2px; }.analyzer-identity h2 { font-size: 13px; }.analyzer-identity>span { font-size: 10px; }.analyzer-modes button { padding: 6px 9px; font-size: 11px; }.analyzer-display { padding-left: 8px; padding-right: 12px; }.analyzer-footer { padding-left: 12px; padding-right: 3px; gap: 7px; }.analyzer-legend { gap: 9px; }.threshold-adjust { gap: 10px; }
  .manage-dialog { padding: 20px; }.manage-dialog .policy-channel { padding: 12px; }.manage-dialog .policy-range { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); gap: 4px; }.manage-dialog input { padding: 8px 4px; }
}
@media(max-width:360px) {
  body:not(.setup-body) .topbar { padding: 0 12px; }.topbar .account-avatar { display: none; }.app-layout { padding: 0 8px 20px; }.device-toolbar { padding-left: 13px; }#device-select { font-size: 19px; }.mixer-toolbar { padding: 9px 10px; gap: 7px; }.mixer-nav button { padding: 7px 8px; font-size: 11px; }#preset-select { max-width: 110px; font-size: 11px; }.mixer-layout { padding: 16px 8px; }.mixer-console { gap: 6px; }.mixer-strip dp-fader::part(keys) { padding: 0 2px; gap: 3px; }.dynamics-console { margin: 10px; }.analyzer-display { height: 235px; }.limiter-strip { padding: 13px; }.manage-dialog .policy-grid { grid-template-columns: 1fr; }
}