/* Native-app polish: remove remaining browser-default chrome from DAW controls. */
:root{--control-bg:#1d211e;--control-bg-hover:#222720;--control-border:#394137;--control-focus:#76964d;--scroll-track:#121512;--scroll-thumb:#58733d;--scroll-thumb-hover:#83a94f}

html,body,*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--scroll-track)}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:var(--scroll-track)}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea{-webkit-appearance:none;appearance:none;outline:0;background-color:var(--control-bg);border:1px solid var(--control-border);color:var(--text);box-shadow:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover,select:hover,textarea:hover{border-color:#4b5746;background-color:var(--control-bg-hover)}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--control-focus);box-shadow:0 0 0 1px var(--control-focus),0 0 0 4px #c5f46710}
input:disabled,select:disabled,textarea:disabled{opacity:.48;cursor:not-allowed}

input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#88a961 50%),linear-gradient(135deg,#88a961 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
select::-ms-expand{display:none}
select option{background:#171a18;color:#e6e9e2}

.analysis-cards>div{transition:border-color .15s,box-shadow .15s,background-color .15s}
.analysis-cards>div:focus-within{border-color:#5b7143;box-shadow:inset 0 0 0 1px #5b7143,0 0 0 3px #c5f46708;background:#1f221f}
.analysis-cards input,.analysis-cards select{background-color:transparent!important;border:0!important;box-shadow:none!important;outline:0!important}
.analysis-cards input:hover,.analysis-cards select:hover{background-color:transparent!important}
.analysis-cards select{padding-right:38px!important;background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px}
.bpm-row input[type="number"]{appearance:textfield;-moz-appearance:textfield}

.auth-card form:not(.admin-action){row-gap:14px}
.auth-grid>div{display:grid;gap:7px;align-content:start;min-width:0}
.auth-card .auth-grid label{margin:0;line-height:1.2;position:relative;z-index:1}
.auth-card .auth-grid input{margin:0}
.auth-card input:not([type="checkbox"]):focus-visible{outline:0;border-color:var(--control-focus);box-shadow:0 0 0 1px var(--control-focus),0 0 0 4px #c5f4670d}

input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:16px!important;height:16px!important;min-width:16px;padding:0!important;margin:0;border:1px solid #4a5544!important;border-radius:4px;background:#1b1f1b!important;background-position:center;background-repeat:no-repeat;background-size:11px 11px;cursor:pointer;box-shadow:none!important}
input[type="checkbox"]:hover{border-color:#708853!important}
input[type="checkbox"]:checked{border-color:var(--accent)!important;background-color:var(--accent)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.2 6.5 11.3 12.9 4.8' fill='none' stroke='%23182010' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
input[type="checkbox"]:focus-visible{outline:0;box-shadow:0 0 0 3px #c5f46722!important}

progress{-webkit-appearance:none;appearance:none;border:0;border-radius:999px;overflow:hidden;background:#272d26;color:var(--accent)}
progress::-webkit-progress-bar{background:#272d26;border-radius:999px}
progress::-webkit-progress-value{background:var(--accent);border-radius:999px}
progress::-moz-progress-bar{background:var(--accent);border-radius:999px}

/* Keep the sidebar fixed and let only the track list scroll. */
.app-sidebar{overflow:hidden!important;min-height:0!important}
.app-sidebar>.library-head,.app-sidebar>.app-dropzone,.app-sidebar>.library-export{flex:0 0 auto}
.app-sidebar #tracks{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;padding-right:4px;overscroll-behavior:contain;scrollbar-gutter:stable}
.app-sidebar #tracks:empty{flex:0 0 auto!important}
.app-sidebar #library-empty:not([hidden]){flex:1 1 auto}

/* Fully custom DAW dropdowns. The real select remains as an invisible state source. */
.daw-select-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important}
.daw-select{position:relative;min-width:0;width:100%}
.daw-select-trigger{width:100%;height:36px;border:1px solid var(--control-border);border-radius:6px;background:var(--control-bg);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px;font-size:13px;text-align:left;box-shadow:none;transition:border-color .15s,background-color .15s,box-shadow .15s}
.daw-select-trigger:hover:not(:disabled){background:var(--control-bg-hover);border-color:#4b5746;filter:none}
.daw-select-trigger:focus-visible,.daw-select.open .daw-select-trigger{outline:0;border-color:var(--control-focus);box-shadow:0 0 0 1px var(--control-focus),0 0 0 4px #c5f46710}
.daw-select.disabled .daw-select-trigger{opacity:.48;cursor:not-allowed}
.daw-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daw-select-chevron{font-size:18px;color:#8ea66b;transition:transform .15s}
.daw-select.open .daw-select-chevron{transform:rotate(180deg)}
.daw-select-menu{position:absolute;z-index:1000;left:0;right:0;top:calc(100% + 6px);max-height:260px;overflow-y:auto;overflow-x:hidden;padding:5px 7px 5px 5px;border:1px solid #46533f;border-radius:7px;background:#151815;box-shadow:0 16px 38px #000a;scrollbar-width:thin;scrollbar-color:#718f4b transparent}
.daw-select-menu::-webkit-scrollbar{width:7px;height:0}
.daw-select-menu::-webkit-scrollbar-track{background:transparent}
.daw-select-menu::-webkit-scrollbar-thumb{background:#718f4b;background-clip:padding-box;border:2px solid transparent;border-radius:999px}
.daw-select-menu::-webkit-scrollbar-thumb:hover{background:#9ac65e;background-clip:padding-box}
.daw-select-menu::-webkit-scrollbar-button{display:none;width:0;height:0}
.daw-select-menu::-webkit-scrollbar-corner{background:transparent}
.daw-select-option{width:100%;min-height:34px;border:0;border-radius:4px;background:transparent;color:#dfe3dc;display:flex;align-items:center;padding:7px 10px;text-align:left;font-size:12px;box-shadow:none}
.daw-select-option:hover:not(:disabled),.daw-select-option:focus-visible{outline:0;background:#232a20;color:#f3f6ef;filter:none}
.daw-select-option.selected{background:#2a3522;color:var(--accent)}
.daw-select-option.selected::after{content:'check';font-family:'Material Symbols Rounded';font-size:16px;margin-left:auto;color:var(--accent)}

/* Key picker keeps the large analysis-card typography without native select chrome. */
.analysis-cards .daw-select-key .daw-select-trigger{height:auto;min-height:48px;padding:2px 0;border:0;background:transparent;font-size:33px;font-weight:500;letter-spacing:-1px;border-radius:0}
.analysis-cards .daw-select-key .daw-select-trigger:hover:not(:disabled){background:transparent}
.analysis-cards .daw-select-key .daw-select-trigger:focus-visible,.analysis-cards .daw-select-key.open .daw-select-trigger{box-shadow:none;border:0}
.analysis-cards .daw-select-key .daw-select-chevron{font-size:24px;margin-right:2px}
.analysis-cards .daw-select-key .daw-select-menu{left:-8px;right:-8px;top:calc(100% + 7px);max-height:310px}
.analysis-cards .daw-select-key .daw-select-option{font-size:14px;min-height:36px}

.trim-controls .daw-select{min-width:190px}
.trim-controls .daw-select-trigger{height:36px}

/* Optional export headroom: compact segmented control, off by default. */
.export-panel{gap:22px}
.export-info{min-width:0;flex:1}
.export-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.headroom-control{display:grid;grid-template-columns:auto auto;grid-template-areas:'label segment' 'status status';align-items:center;gap:5px 9px;min-width:0}
.headroom-label{grid-area:label;color:#8b9287;font-size:9px;font-weight:700;letter-spacing:.12em}
.headroom-segment{grid-area:segment;display:inline-flex;align-items:center;height:32px;padding:3px;border:1px solid #3b4338;border-radius:6px;background:#1b1f1b}
.headroom-segment button{height:24px;min-width:42px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:#9ea79a;font-size:10px;font-weight:700;letter-spacing:.02em;box-shadow:none}
.headroom-segment button:hover{filter:none;background:#232921;color:#d8ddd4}
.headroom-segment button.active,.headroom-segment button[aria-pressed="true"]{background:#2b3524;color:var(--accent);box-shadow:inset 0 0 0 1px #536a40}
.headroom-segment button:focus-visible{outline:0;box-shadow:0 0 0 2px #c5f46728}
#headroom-status{grid-area:status;color:#727a70;font-size:9px;line-height:1.2;text-align:right;white-space:nowrap}
@media(max-width:900px){.export-panel{align-items:stretch}.export-actions{justify-content:space-between}.headroom-control{margin-right:auto}}
@media(max-width:720px){.export-actions{align-items:stretch;flex-direction:column}.headroom-control{width:100%;grid-template-columns:auto 1fr}.headroom-segment{justify-self:end}#headroom-status{text-align:left}.export-actions .primary{width:100%}}

::selection{background:#c5f46735;color:#f5f7f1}

/*
 * Visual hierarchy
 * Keep the current layout and identity, but make visual loudness semantic:
 * primary action > active interaction > normal interaction > information > container.
 */
.app-body{--daw-surface-quiet:#161817;--daw-surface-control:#1a1d1b;--daw-surface-control-hover:#202420;--daw-border-quiet:#292d2a;--daw-border-control:#343a34;--daw-label:#777f77;--daw-info:#98a097;--daw-active-bg:#232a20;--daw-active-border:#536641}

/* Containers and information stay quiet. */
.app-body .analysis-cards>div{background:#1a1c1b;border-color:var(--daw-border-quiet)}
.app-body .analysis-cards label,.app-body .trim-controls label,.app-body .daw-export-label,.app-body .headroom-label{color:var(--daw-label)}
.app-body .analysis-cards small,.app-body .analysis-note,.app-body .hint{color:#777f77}
.app-body .wave-wrap{border-color:var(--daw-border-quiet)}
.app-body .export-panel{border-top-color:var(--daw-border-quiet)}

/* Normal interaction uses neutral surfaces; lime is held back for state. */
.app-body .secondary,.app-body .icon-button,.app-body .account-link{background:var(--daw-surface-control);border-color:var(--daw-border-control);color:#b6bdb4}
.app-body .secondary:hover:not(:disabled),.app-body .icon-button:hover:not(:disabled),.app-body .account-link:hover:not(:disabled){background:var(--daw-surface-control-hover);border-color:#414841;color:#d5dad2}
.app-body .add-track{background:var(--daw-surface-control);border-color:#354035;color:#c4cbc0}
.app-body .add-track .material-symbols-rounded{color:var(--accent)}
.app-body .bpm-row button{background:var(--daw-surface-control);border-color:var(--daw-border-control);color:#a6aea2}

/* Transport: active state may speak; idle state should not compete. */
.app-body .play-button{background:#1c201d;border-color:#45523d;color:#bfe96c}
.app-body .text-button{color:#aab1a7}
.app-body .transport-toggle{background:var(--daw-surface-control);border-color:var(--daw-border-control);color:#929a90}
.app-body .transport-toggle.active,.app-body .transport-toggle[aria-pressed="true"]{background:var(--daw-active-bg);border-color:var(--daw-active-border);color:var(--accent)}
.app-body .loop-size{background:var(--daw-surface-control);border-color:var(--daw-border-control)}
.app-body .loop-size button{color:#929a90}
.app-body .loop-size button.active,.app-body .loop-size button[aria-pressed="true"]{background:var(--daw-active-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--daw-active-border)}

/* Meter values are information, not buttons. */
.app-body .mix-controls{background:var(--daw-surface-quiet);border-color:var(--daw-border-quiet)}
.app-body .mix-controls label{color:var(--daw-label)}
.app-body .mix-controls output{background:transparent;border:0;padding:0;color:#aebaa6;font-weight:600}
.app-body .transport-status{color:#7b837a}
.app-body .transport-status #loop-info{color:#879184}
.app-body .transport-status #length-info{color:#9aa596}
.app-body .transport-status #length-info.perfect{color:#b8cf91;font-weight:600}

/* Inputs remain clearly editable without looking like calls to action. */
.app-body .trim-controls input,.app-body .trim-controls select,.app-body .daw-export-profile select{background:#1b1e1c;border-color:var(--daw-border-control);color:#d1d6ce}
.app-body .trim-controls .secondary{background:#1e211f;border-color:#3a403a;color:#cbd1c8}
.app-body .sample-row button{background:var(--daw-surface-control);border-color:var(--daw-border-control);color:#aeb6aa}
.app-body .daw-export-profile small{color:#747c73}

/* Export selection is quiet until selected. */
.app-body .headroom-segment{background:var(--daw-surface-quiet);border-color:var(--daw-border-control)}
.app-body .headroom-segment button{background:transparent;color:#899188}
.app-body .headroom-segment button.active,.app-body .headroom-segment button[aria-pressed="true"]{background:var(--daw-active-bg);color:var(--accent)}
.app-body #headroom-status{color:#747c73}
.app-body .export-panel p{color:#aab2a7}

/* Sidebar selection remains obvious without colouring the full row loudly. */
.app-body .track.selected{background:#202320;border-color:#353c34}
.app-body .track .track-icon{background:#292d29;color:#8d9a83}
.app-body .track.selected .track-icon{color:var(--accent)}

/* The primary action intentionally remains the loudest element. */
.app-body .primary{box-shadow:none}