.app-body{height:100vh;min-height:680px;overflow:hidden;background:#101112}.app-header{height:58px;padding:0 18px;border-bottom:1px solid #2b2e2c;background:#141615;display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(320px,1fr);align-items:center;gap:18px}.app-brand{display:flex;align-items:center;gap:12px;min-width:0}.app-brand .brand{font-size:0;gap:0}.app-brand .brand-logo{display:block;width:168px;max-height:42px;object-fit:contain}.app-edition{border-left:1px solid #383c38;padding-left:12px;font-size:9px;letter-spacing:.14em;color:#7f857c;font-weight:700}.app-header-center{justify-self:center;display:flex;align-items:center;gap:7px;color:#70766e;font-size:9px;letter-spacing:.14em;font-weight:700;white-space:nowrap}.app-header-center .material-symbols-rounded{font-size:16px;color:#8ea66b}.app-body .account-nav{justify-self:end;display:flex;align-items:center;gap:7px;min-width:0}.account-name{display:inline-flex;align-items:center;gap:7px;color:#c8cec4;font-size:11px;padding:7px 9px}.account-dot,.status-led{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #c5f46750}.app-body .account-link{display:inline-flex;align-items:center;gap:5px;border:1px solid #353a34;background:#1c1f1c;color:#9fa79b;border-radius:5px;padding:7px 9px;font-size:10px}.app-body .account-link .material-symbols-rounded{font-size:15px}.app-body .icon-link{width:31px;height:31px;padding:0;justify-content:center}.app-body .account-button{font:inherit}.app-body .logout-form{margin:0;display:flex}
.app-main{height:calc(100vh - 84px);max-width:none;margin:0;padding:0}.app-workspace{height:100%;min-height:0;border:0;border-radius:0;grid-template-columns:272px minmax(0,1fr);background:#171918}.app-sidebar{height:100%;padding:16px 12px 12px;background:#141615;border-right:1px solid #2d302e}.library-head{display:flex;align-items:flex-end;justify-content:space-between;padding:2px 6px 12px;border-bottom:1px solid #292d29}.library-head>div{display:grid;gap:4px}.panel-kicker{font-size:9px;letter-spacing:.13em;color:#747b72;font-weight:700}.library-head strong{font-size:13px;font-weight:550;color:#d9ddd5}.library-head strong span{color:#8f978c;font-size:10px;margin-left:4px}.library-head>#ready-count{font-size:10px;color:#889180}.app-dropzone{margin:10px 0 12px;border:1px dashed #3a4038;border-radius:7px;background:#171a17;padding:8px;display:grid;gap:6px;transition:.18s}.app-dropzone.dragging{border-color:#76934e;background:#20281c}.add-track{height:34px;border:1px solid #435039;background:#232a20;color:var(--accent);border-radius:5px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:650}.add-track .material-symbols-rounded{font-size:17px}.app-dropzone small{text-align:center;font-size:9px;color:#687066}.app-sidebar #tracks{max-height:none;min-height:0;flex:1;overflow-y:auto}.app-sidebar #library-empty{padding:34px 12px 24px;flex:1}.app-sidebar #library-empty p{margin-top:16px}.app-sidebar .library-export{margin-top:10px}
.app-editor{height:100%;min-height:0;overflow-y:auto;padding:20px 24px 24px;background:#191b1a}.app-editor #editor-empty{min-height:100%;padding-bottom:30px}.app-editor #editor-empty h2{font-size:22px;margin-top:10px}.app-editor #editor-empty p{margin:8px 0 16px}.empty-add{display:inline-flex;align-items:center;gap:7px;margin-top:4px}.empty-add .material-symbols-rounded{font-size:17px}.track-heading{align-items:flex-start;margin-bottom:14px}.track-heading p{margin-bottom:0}.track-heading-actions{display:flex;align-items:center;gap:8px}.track-heading-actions .secondary{padding:8px 10px;font-size:11px}.track-heading-actions .secondary .material-symbols-rounded{font-size:16px}.analysis-actions{display:none}.app-editor .analysis-cards>div{background:#1d201e}.app-editor .analysis-note{margin-bottom:16px}.app-editor .wave-header{margin-top:14px}.app-editor .wave-wrap{background:#111412}.app-editor canvas{height:180px}.app-editor .transport{margin-bottom:10px}.app-editor .trim-controls{margin-top:14px}.app-editor .hint{margin-bottom:16px}.app-editor .export-panel{padding-bottom:4px}
.app-statusbar{height:26px;padding:0 14px;border-top:1px solid #2b2f2c;background:#121413;display:flex;align-items:center;gap:18px;color:#697068;font-size:9px;letter-spacing:.08em}.app-statusbar>div{display:flex;align-items:center;gap:7px;color:#87917f;font-weight:700}.app-statusbar .status-version{margin-left:auto;color:#565d55}.app-body #toast{bottom:42px}
@media(max-width:1100px){.app-header{grid-template-columns:minmax(210px,1fr) auto}.app-header-center{display:none}.app-workspace{grid-template-columns:238px minmax(0,1fr)}.app-editor{padding:18px}.app-edition{display:none}.app-body .account-name{display:none}}
@media(max-width:820px){.app-body{overflow:auto;min-height:100vh;height:auto}.app-header{position:sticky;top:0;z-index:20;grid-template-columns:1fr auto}.app-brand .brand-logo{width:150px;max-height:40px}.app-body .account-link:not(.icon-link){font-size:0;width:31px;padding:0;justify-content:center}.app-body .account-link:not(.icon-link) .material-symbols-rounded{font-size:15px}.app-main{height:auto;min-height:calc(100vh - 84px)}.app-workspace{height:auto;grid-template-columns:1fr}.app-sidebar{height:auto;max-height:310px;border-right:0;border-bottom:1px solid #2d302e}.app-sidebar #tracks{max-height:140px}.app-editor{min-height:650px;overflow:visible}.app-statusbar{position:sticky;bottom:0;z-index:20}.app-statusbar>span:nth-child(2){display:none}}

/* Compact DAW header branding: icon left, product name centered. */
.app-header{grid-template-columns:minmax(180px,1fr) auto minmax(320px,1fr)}
.app-brand .brand{display:inline-flex;width:auto;height:auto;background:none}
.app-brand .brand-logo{display:block;width:34px;height:34px;max-height:none;object-fit:contain}
.app-header-center{gap:9px;font-size:9px;letter-spacing:.2em;color:#70766e;font-weight:700;text-transform:uppercase}
.app-header-center .material-symbols-rounded{display:inline-block;font-size:16px;color:#8ea66b;letter-spacing:0}
.app-header-center::after{content:none}
@media(max-width:1100px){.app-header{grid-template-columns:minmax(150px,1fr) auto}.app-brand .brand{width:auto;height:auto}.app-brand .brand-logo{width:32px;height:32px}}
@media(max-width:820px){.app-brand .brand{width:auto;height:auto}.app-brand .brand-logo{width:30px;height:30px}}

/* Keep track-card borders flush with the add-track panel when no scrollbar is needed. */
.app-sidebar #tracks{padding-right:0!important;scrollbar-gutter:auto!important}

/* Desktop waveform controls: zoom and gain share one slider style. Scoped to
   #app-shell so the older .wave-header thumb rules (transport.css,
   loop-previews.css) cannot restyle the zoom slider differently. */
.wave-gain-control{border:0!important;background:transparent!important;border-radius:0!important;padding-left:0!important;padding-right:0!important}
.wave-gain-control:hover{border:0!important;background:transparent!important}
#app-shell .wave-tools{background:transparent;border:0;padding:0;box-shadow:none}
#app-shell .wave-zoom-control output,#app-shell .wave-gain-control output{color:#9aae80;font-size:9px;font-variant-numeric:tabular-nums}
#app-shell .wave-zoom-control input[type="range"],#app-shell .wave-gain-control input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none;outline:0;accent-color:var(--accent);cursor:pointer}
/* The gain slider including its value label is exactly as tall as the
   waveform box. The zoom slider is the same slider turned 90°: same track
   length (--wave-slider-length = gain track, synced in JS), right end flush
   with the waveform box, value at its 1x end on the left, same 6px gap. */
/* Both tracks keep the same 12px distance to the waveform box: the 18px gain
   column puts its centered 4px track 5px + 7px from the box; the header's
   bottom margin does the same for the zoom track. */
#app-shell .wave-header{margin-bottom:6px}
#app-shell .wave-tools{margin-right:23px} /* 18px gain column + 5px stage gap */
#app-shell .wave-zoom-control{display:flex;align-items:center;gap:6px}
#app-shell .wave-zoom-control output{order:-1;min-width:24px;text-align:right}
#app-shell .wave-zoom-control input[type="range"]{flex:none;margin:0;width:var(--wave-slider-length,180px);height:14px}
#app-shell .wave-stage{grid-template-columns:minmax(0,1fr) 18px;grid-template-rows:auto;column-gap:5px}
#app-shell .wave-gain-control{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:stretch;min-height:0;padding:0!important}
#app-shell .wave-gain-control input[type="range"]{flex:1 1 0;min-height:0;height:auto;margin:0}
#app-shell .wave-gain-control output{text-align:center;line-height:10px}
#app-shell .wave-zoom-control input[type="range"]::-webkit-slider-runnable-track{height:4px;background:#394137;border:0;border-radius:999px;box-shadow:none}
#app-shell .wave-gain-control input[type="range"]::-webkit-slider-runnable-track{width:4px;background:#394137;border:0;border-radius:999px;box-shadow:none}
#app-shell .wave-zoom-control input[type="range"]::-webkit-slider-thumb,#app-shell .wave-gain-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:0;border-radius:50%;background:var(--accent);box-shadow:none;transition:box-shadow .15s}
#app-shell .wave-zoom-control input[type="range"]::-webkit-slider-thumb{margin-top:-5px}
#app-shell .wave-gain-control input[type="range"]::-webkit-slider-thumb{margin-left:-5px}
#app-shell .wave-zoom-control input[type="range"]:hover::-webkit-slider-thumb,#app-shell .wave-gain-control input[type="range"]:hover::-webkit-slider-thumb{background:var(--accent);border:0;box-shadow:0 0 0 4px #c5f46726}
#app-shell .wave-zoom-control input[type="range"]:focus-visible::-webkit-slider-thumb,#app-shell .wave-gain-control input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #c5f46726}


/* Desktop transport: round icon buttons and a labelled inline mixer that is
   only shown while the metronome is on. */
#app-shell .transport-icon{width:34px;height:34px;padding:0}
#app-shell .transport-icon .material-symbols-rounded{font-size:19px}
#app-shell .metronome-toggle{background:#1b1f1c;border-color:#343b33;color:#9aa596}
#app-shell .metronome-toggle.active{background:#2b3524;border-color:#78934f;color:var(--accent)}
#app-shell .transport-mix-group{display:flex;align-items:center;gap:18px;margin-left:6px}
#app-shell .transport-mix-group[hidden]{display:none}
#app-shell .transport-mix{display:flex;align-items:center;gap:8px;margin:0;letter-spacing:0}
#app-shell .transport-mix>span{color:#7f867d;font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
#app-shell .transport-mix input[type="range"]{-webkit-appearance:none;appearance:none;width:96px;height:14px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;outline:0;cursor:pointer}
#app-shell .transport-mix input[type="range"]::-webkit-slider-runnable-track{height:4px;background:#394137;border:0;border-radius:999px;box-shadow:none}
#app-shell .transport-mix input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--accent);box-shadow:none;transition:box-shadow .15s}
#app-shell .transport-mix input[type="range"]:hover::-webkit-slider-thumb,#app-shell .transport-mix input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #c5f46726}
#app-shell .transport-mix output{min-width:28px;color:#9aae80;font-size:9px;font-variant-numeric:tabular-nums}
/* Threshold toggle (like Headroom) and a check button that re-analyses
   Sample 0 sit right in the transport row; the Sample 0 status below them. */
#app-shell .sample-zero-row{display:flex;justify-content:flex-end;margin:-4px 0 6px}
#app-shell .sample-zero-row .transport-status{margin-left:0;min-width:0;align-items:flex-end}
#app-shell .transport .trim-controls.auto-sample-zero{display:flex;align-items:center;gap:8px;margin:0 0 0 auto}
#app-shell .transport .threshold-source{display:none}
#app-shell .transport .threshold-label{margin-right:4px}
#app-shell .transport .threshold-segment{height:34px;box-sizing:border-box}
#app-shell .transport .threshold-segment button{height:26px}
#app-shell .transport .threshold-apply{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}
#app-shell .transport .threshold-apply .material-symbols-rounded{font-size:18px}


/* Header account buttons: one height; the admin button keeps icon + label. */
#app-shell .account-nav .account-link{height:31px;box-sizing:border-box}
#app-shell .account-nav #admin-accounts{width:auto;padding:0 10px;gap:6px;font-size:11px;font-weight:600}

/* Analysis cards: ½/×2 as a connected toggle like Headroom, and a slim
   confidence bar next to the status text. */
#app-shell .bpm-row .bpm-factor{display:inline-flex;gap:0;height:34px;box-sizing:border-box}
#app-shell .bpm-row .bpm-factor button{height:26px;min-width:34px;padding:0 9px;border:0;border-radius:4px;background:transparent;font-size:11px}
#app-shell .key-row{position:relative;gap:8px}
#app-shell .key-row .daw-select{display:block;flex:1;min-width:0}
#app-shell .key-row .bpm-factor button{font-size:14px}
#app-shell .confidence-row{display:flex;align-items:center;gap:12px}
#app-shell .key-card{position:relative}
#app-shell .key-info{position:absolute;top:50%;left:0;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:6px;background:transparent;color:#87957f}
#app-shell .key-info:active:not(:disabled){transform:translateY(-50%)}
#app-shell .key-info .material-symbols-rounded{font-size:24px}
#app-shell .key-info:hover,#app-shell .key-info[aria-expanded="true"]{background:#232823;color:var(--accent);filter:none}
#app-shell .key-tuning{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
#app-shell .key-more{position:absolute;z-index:20;left:14px;right:14px;top:calc(100% - 8px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid #46533f;border-radius:7px;background:#151815;box-shadow:0 16px 38px #000a}
#app-shell .key-more[hidden]{display:none}
#app-shell .key-group{display:flex;align-items:center;gap:5px}
#app-shell #key-harmonic-group:not(:first-child){padding-left:12px;border-left:1px solid #2f352f}
#app-shell .key-group>small{font-size:10px;letter-spacing:.04em;margin-right:2px}
#app-shell .key-group>span{display:flex;gap:5px;flex-wrap:wrap}
#app-shell .key-chip{padding:3px 7px;border:1px solid #343a34;border-radius:4px;background:#191c1a;color:#c9cfc6;font-size:11px;white-space:nowrap}
#app-shell .confidence{flex:0 1 160px;height:4px;border-radius:999px;background:#2a302a;overflow:hidden}
#app-shell .confidence>span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .35s ease}
#app-shell .confidence[data-level="mid"]>span{background:#d9c46a}
#app-shell .confidence[data-level="low"]>span{background:#e0865f}
@media (prefers-reduced-motion:reduce){#app-shell .confidence>span{transition:none}}
.app-editor #editor-empty{border:1px dashed transparent;border-radius:12px;transition:border-color .18s,background .18s}.app-editor #editor-empty.dragging{border-color:#76934e;background:#1d2419}