/* Music 63 v2.22 — accessible light-first studio UI.
   Separate overrides intentionally preserve the existing notation canvas and audio engines. */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f6fb;--panel:#fff;--panel2:#f7f9fd;--ink:#1b2d45;--muted:#526783;
  --line:#d8e2ef;--accent:#257a5b;--cyan:#187b9f;--danger:#bb4054;
  --ui-card:#fff;--ui-elev:#fff;--ui-sidebar:#fff;--ui-top:#fffefdf2;
  --ui-hover:#eaf2f9;--ui-nav-active:#e5f4ed;--ui-nav-ink:#236249;
  --ui-input:#fff;--ui-border:#c9d7e7;--ui-note:#f1f7fc;--ui-soft:#ecf3f9;
  --ui-primary:#287d5c;--ui-primary-ink:#fff;--ui-action:#e3f4fc;--ui-action-ink:#155e7a;
  --ui-shadow:0 12px 35px rgba(25,49,81,.055);--ui-hero-a:#edf9f5;--ui-hero-b:#f6f9ff;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1321;--panel:#111f32;--panel2:#172942;--ink:#ecf4ff;--muted:#adc0d5;
  --line:#2b415c;--accent:#9be5bf;--cyan:#84d9f2;--danger:#f2a0aa;
  --ui-card:#132238;--ui-elev:#172940;--ui-sidebar:#0e1a2c;--ui-top:#0c1728ed;
  --ui-hover:#1b334e;--ui-nav-active:#214d43;--ui-nav-ink:#c6f7da;
  --ui-input:#0d1b2f;--ui-border:#3c5573;--ui-note:#162941;--ui-soft:#1a2d46;
  --ui-primary:#9be5bf;--ui-primary-ink:#11261c;--ui-action:#174762;--ui-action-ink:#d0f2ff;
  --ui-shadow:0 18px 40px rgba(0,0,0,.18);--ui-hero-a:#152e37;--ui-hero-b:#18223e;
}
html,body{min-width:0;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.48}
body{accent-color:var(--ui-primary)}
:where(button,input,select,textarea,a):focus-visible{outline:3px solid #398bb8;outline-offset:2px}
a{color:var(--ui-primary);text-underline-offset:3px}
a:hover{filter:brightness(.9)}
button:disabled{cursor:not-allowed}
.layout{grid-template-columns:228px minmax(0,1fr)}
.sidebar{padding:21px 13px;background:var(--ui-sidebar);border-color:var(--line);box-shadow:3px 0 22px rgba(45,64,81,.025)}
.sidebar .brand{padding:0 12px 20px}.brand h1{font-size:21px;font-weight:750;letter-spacing:-.03em;color:var(--ink)}
.brand p{color:var(--muted);font-size:12px}
.sidebar .brand img{width:42px;height:42px}
.nav{gap:5px}.nav button{padding:11px 13px;font-size:13px;font-weight:620;border-radius:11px;color:var(--muted);transition:background .15s,color .15s}
.nav button:hover{background:var(--ui-hover);color:var(--ink)}
.nav button.active{background:var(--ui-nav-active);color:var(--ui-nav-ink);font-weight:730}
.sidebar-foot{border-color:var(--line);padding:13px 4px 1px}
.topbar{background:var(--ui-top);border-color:var(--line);padding:13px 23px;gap:16px;box-shadow:0 1px 0 rgba(38,67,95,.025)}
.topbar h2{font-size:clamp(19px,1.9vw,23px);line-height:1.23;letter-spacing:-.025em;font-weight:760}
.topbar .toolbar{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.content{max-width:1480px;padding:23px 27px}
.card,.boot-card,.login-card{background:var(--ui-card);border:1px solid var(--line);box-shadow:var(--ui-shadow);border-radius:16px;color:var(--ink)}
.card h3{font-size:18px;letter-spacing:-.018em;line-height:1.36;font-weight:720;color:var(--ink)}
.card-lite,.song-card,.source-resource,.media-row,.cache-settings{background:var(--ui-elev);border-color:var(--line);color:var(--ink)}
.song-card{transition:border-color .15s,transform .15s,box-shadow .15s}
.song-card:hover{border-color:var(--ui-primary);transform:translateY(-1px);box-shadow:var(--ui-shadow)}
.field span,.label{color:var(--ink);font-size:12.5px;font-weight:620}
.input,.select,.textarea,.top-language,.sidebar-language select{
  background:var(--ui-input);color:var(--ink);border:1px solid var(--ui-border);border-radius:10px;
  min-height:40px;padding:9px 11px;box-shadow:0 1px 0 rgba(30,52,79,.025);font-weight:450
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.83}
.input:focus,.select:focus,.textarea:focus{border-color:#468cb9;outline:2px solid rgba(52,145,192,.18);outline-offset:0}
.btn{background:var(--ui-elev);border:1px solid var(--ui-border);border-radius:10px;color:var(--ink);font-weight:620;min-height:38px;padding:8px 12px;line-height:1.3;white-space:normal;text-align:center;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover:not(:disabled){background:var(--ui-hover);border-color:#80a3b6}
.btn.small{min-height:33px;padding:7px 10px;font-size:12px}
.btn.primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-ink)}
.btn.primary:hover:not(:disabled){background:var(--ui-primary);filter:brightness(.94);color:var(--ui-primary-ink)}
.btn.cyan{background:var(--ui-action);color:var(--ui-action-ink);border-color:var(--ui-border)}
.btn.cyan:hover:not(:disabled){filter:brightness(.96)}
.btn.danger{background:var(--ui-soft);color:var(--danger);border-color:var(--line)}
.btn:disabled{opacity:.48}
.top-language,.sidebar-language select{max-width:132px;min-height:34px;padding:6px 9px;color:var(--ink)}
.top-theme-switch{min-width:110px}.login-theme{display:flex;margin:12px auto 0;justify-content:center}
.login-wrap{background:linear-gradient(115deg,var(--ui-hero-b),var(--ui-hero-a))}
.login-card{background:var(--ui-card);max-width:430px}
.muted,.smalltext.muted,.song-meta,.footer-note{color:var(--muted)}
.pill,.tag{background:var(--ui-note);color:var(--ink);border:1px solid var(--line)}
.notice{background:var(--ui-note);color:var(--ink);border-color:var(--line)}
.notice.warn{background:#fff8e5;border-color:#e8d5a2;color:#735719}
.notice.danger{background:#fff1f2;border-color:#f0c1c7;color:#913040}
[data-theme="dark"] .notice.warn{background:#332e1f;color:#f9e1a2;border-color:#756038}
[data-theme="dark"] .notice.danger{background:#3a2030;color:#ffc7ce;border-color:#754057}
.eyebrow,.studio-note-eyebrow{color:var(--ui-primary);font-weight:780;letter-spacing:.11em;font-size:10px}
/* Feature areas inherit their current theme instead of mixing white and dark foregrounds. */
.media-studio{max-width:1330px;gap:18px}
.media-studio-hero,.sources-hero,.audio-workspace-head{
  background:linear-gradient(110deg,var(--ui-hero-a),var(--ui-hero-b));color:var(--ink);border-color:var(--line)
}
.media-studio-hero h3,.sources-hero h3,.audio-workspace-head h3{color:var(--ink);font-size:clamp(20px,2.1vw,26px)}
.media-studio-hero p,.sources-hero p,.audio-workspace-head p{color:var(--muted);font-size:13px;line-height:1.6}
.audio-workspace-head .eyebrow{color:var(--ui-primary)}
.media-studio .grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px}
.remix-card{background:var(--ui-card);border-color:var(--line);color:var(--ink)}
.remix-card .muted,.remix-card p{color:var(--muted)}
.remix-card .field>span,.remix-card .field span{color:var(--ink)}
.remix-card .source-flow span,.source-flow span{background:var(--ui-note);border-color:var(--line);color:var(--ink);font-size:11px}
.remix-card .source-flow span{padding:7px 11px;color:var(--ink)}
.source-flow b{background:var(--ui-primary);color:var(--ui-primary-ink)}
.media-studio .toolbar{gap:9px}
.media-studio .toolbar>.btn,.media-studio .toolbar>button{min-height:38px}
.media-studio .remix-levels input[type=range]{accent-color:var(--ui-primary)}
.media-studio-audio,.media-studio-player{background:#0e1727;border-color:var(--line)}
.source-built-in,.source-own{background:var(--ui-note);color:var(--ink)}
.media-meta span{color:var(--muted);font-size:11px}
/* Audio -> notes: previously hard-coded dark backgrounds caused unreadable light mode. */
.audio-to-notes-standalone{background:var(--ui-card);color:var(--ink);border-color:var(--line);box-shadow:var(--ui-shadow)}
.audio-to-notes-standalone .audio-source-intro p,
.audio-to-notes-standalone .audio-options label>span,
.audio-to-notes-standalone .audio-rights,
.audio-to-notes-standalone .audio-step-banner span,
.audio-to-notes-standalone .audio-draft-meta,
.audio-to-notes-standalone .palette-hint{color:var(--muted)}
.audio-to-notes-standalone .source-url-row input,
.audio-to-notes-standalone .audio-options select,
.audio-to-notes-standalone .audio-options input,
.audio-to-notes-standalone .audio-chord-option select{background:var(--ui-input);color:var(--ink);border-color:var(--ui-border);font-size:12px}
.audio-to-notes-standalone .source-url-row button,
.audio-to-notes-standalone .source-file-btn,
.audio-to-notes-standalone .audio-actions button,
.audio-to-notes-standalone .audio-draft-actions button{background:var(--ui-elev);color:var(--ink);border-color:var(--ui-border)}
.audio-to-notes-standalone .audio-actions .audio-read-primary{background:var(--ui-primary);color:var(--ui-primary-ink);border-color:var(--ui-primary)}
.audio-to-notes-standalone .audio-actions .audio-capture-stop{background:#ae314f;color:#fff;border-color:#ac3850}
.audio-to-notes-standalone .audio-preview,
.audio-to-notes-standalone .audio-source-empty,
.audio-to-notes-standalone .audio-step-banner,
.audio-to-notes-standalone .audio-chord-option,
.audio-to-notes-standalone .audio-convert,
.audio-to-notes-standalone .capture-help,
.audio-to-notes-standalone .audio-progress,
.audio-to-notes-standalone .audio-draft,
.audio-to-notes-standalone .audio-preview-actions{background:var(--ui-note);color:var(--ink);border-color:var(--line)}
.audio-to-notes-standalone .audio-preview-actions a,
.audio-to-notes-standalone .audio-open-source{color:var(--ui-primary)}
.audio-to-notes-standalone .audio-source-empty b{color:var(--ink)}
.audio-to-notes-standalone .audio-note-list span{background:var(--ui-note);border-color:var(--line);color:var(--ink)}
.audio-to-notes-standalone .audio-chord-list span{background:var(--ui-note);border-color:var(--line);color:var(--ink)}
.audio-to-notes-standalone .audio-source-tip{background:var(--ui-soft);border-color:var(--line);color:var(--ink)}
.audio-to-notes-standalone .audio-wizard>div{color:var(--muted)}
.audio-to-notes-standalone .audio-wizard>div b{background:var(--ui-note);color:var(--ink)}
.audio-to-notes-standalone .audio-wizard>i{background:var(--line)}
.audio-target-summary{background:var(--ui-card);color:var(--ink);border-color:var(--line)}
.audio-target-summary span{color:var(--muted)}
/* MIDI panel and live arranger use the same neutral card system. */
.midi-audio-panel .card-lite,.midi-audio-panel .take-box,.take-box,.source-resource,.media-row{background:var(--ui-card);color:var(--ink);border-color:var(--line)}
.live-studio{--text:var(--ink);--ls-soft:var(--ui-note);--ls-accent:var(--ui-primary);color:var(--ink)}
.live-studio .live-intro{background:linear-gradient(115deg,var(--ui-hero-a),var(--ui-hero-b));border-color:var(--line)}
.live-studio .live-status{border-color:var(--line);color:var(--ink)}
.live-studio .live-status[data-error=yes]{color:var(--danger)}
.live-studio .live-variation-buttons .active{color:var(--ui-primary-ink);background:var(--ui-primary);border-color:var(--ui-primary)}
.live-studio .live-chord strong{color:var(--ink)}
/* New media file manager in Studio, not a redundant sidebar page. */
.studio-assets{padding:17px 20px}
.studio-assets-bar,.studio-score-head,.studio-note-context{display:flex;align-items:center;justify-content:space-between;gap:16px}
.studio-assets-bar h3,.studio-score-head h3{margin:3px 0 3px}
.studio-assets-bar p,.studio-score-head p{margin:0;line-height:1.5}
.studio-assets-actions,.studio-score-actions,.studio-note-shortcuts,.studio-remix-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#uploadResult:empty{display:none}#uploadResult:not(:empty){margin-top:10px}
.media-files-details{margin-top:13px;border-top:1px solid var(--line);padding-top:11px}
.media-files-details summary{width:fit-content;cursor:pointer;color:var(--ui-primary);font-weight:650;padding:4px 0}
.media-files-details summary:hover{text-decoration:underline}
.media-files-details .media-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;max-height:410px;overflow:auto}
.media-files-details .media-row{margin:0;padding:12px;align-content:start}
.media-files-details .media-actions .btn{flex:1 1 auto}
.studio-upload-ok{color:var(--ui-nav-ink);background:var(--ui-nav-active)}
.studio-score-card{padding:19px 21px}
.studio-score-head{align-items:start}.studio-score-actions{justify-content:flex-end;max-width:700px}
.studio-track-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:15px}
.studio-track{min-width:0;display:grid;grid-template-columns:32px minmax(100px,1fr) minmax(140px,1.2fr) auto;align-items:center;gap:10px;padding:11px 12px;background:var(--ui-soft);border:1px solid var(--line);border-radius:12px}
.studio-track-dot{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--ui-primary-ink);background:var(--ui-primary);font-weight:700}
.studio-track-name{display:grid;gap:2px;min-width:0}.studio-track-name strong{font-size:12px;overflow-wrap:anywhere}
.studio-track-name span,.studio-track-select span{font-size:11px;color:var(--muted)}
.studio-track-select{display:grid;gap:4px;min-width:0}.studio-track-select .select{font-size:12px;min-height:34px;padding:5px 7px}
.studio-track .btn{min-width:53px}
.studio-writer-link{background:var(--ui-action);color:var(--ui-action-ink);border-color:var(--line);text-decoration:none}
.studio-writer-link:hover{color:var(--ui-action-ink)}
.studio-remix-actions{margin-top:13px}
/* Studio-first note workflow: scan/transcription stays available in advanced mode. */
.studio-note-context{margin:0 0 0;padding:14px 19px;background:var(--ui-hero-a);border-bottom:1px solid var(--line);color:var(--ink)}
.studio-note-context strong{font-size:16px;display:block;margin-top:2px;line-height:1.3}
.studio-note-context p{margin:2px 0 0;color:var(--muted);font-size:12px}
.studio-editor-shell.studio-notes-mode{grid-template-columns:195px minmax(530px,1fr) 240px}
.studio-notes-mode .studio-palette .photo-steps,
.studio-notes-mode .studio-palette .import-photo-btn,
.studio-notes-mode .studio-palette .photo-prepare-btn,
.studio-notes-mode .studio-palette .local-photo-btn,
.studio-notes-mode .studio-palette .ai-ready,
.studio-notes-mode .studio-palette .audio-open-tool,
.studio-notes-mode .studio-palette .palette-hint,
.studio-notes-mode .studio-workspace>.audio-to-notes{display:none!important}
.studio-notes-mode .studio-palette{padding:14px}
.studio-editor-shell .score-paper{background:#fff}
/* Deliberately keep paper/staff black on white in both modes for notation legibility. */
/* Responsive navigation, buttons and studio tracks. */
@media(max-width:1250px){.studio-score-head{display:block}.studio-score-actions{max-width:none;justify-content:flex-start;margin-top:13px}}
@media(max-width:1100px){.studio-editor-shell.studio-notes-mode{grid-template-columns:170px minmax(480px,1fr) 220px}}
@media(max-width:980px){
  .layout{grid-template-columns:1fr}.sidebar{background:var(--ui-sidebar);padding:7px;box-shadow:0 -6px 20px rgba(0,0,0,.07)}
  .nav{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin;white-space:nowrap;padding-bottom:2px}
  .nav button{white-space:nowrap;min-width:max-content;font-size:11px;padding:9px 10px}
  .content{padding:14px}.topbar{padding:10px 13px;flex-wrap:wrap;align-items:center}
  .topbar h2{font-size:19px}.topbar .toolbar{gap:5px}.topbar .toolbar .btn{padding:6px 8px}
  .main{padding-bottom:72px}.media-studio .grid.cols2{grid-template-columns:1fr}
  .studio-editor-shell.studio-notes-mode{display:block}
  .studio-note-context{flex-wrap:wrap;gap:10px}
}
@media(max-width:680px){
  .content{padding:10px}.card{padding:15px}
  .topbar .toolbar{justify-content:flex-start}.top-theme-switch{min-width:auto}
  .media-studio-hero{grid-template-columns:1fr}
  .studio-assets-bar,.studio-score-head{display:grid;gap:10px}
  .studio-score-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-track-list{grid-template-columns:1fr}
  .studio-track{grid-template-columns:30px 1fr auto;gap:8px}
  .studio-track-select{grid-column:2/4;grid-row:2}
  .media-files-details .media-list{grid-template-columns:1fr}
  .studio-note-shortcuts{width:100%}.studio-note-shortcuts>*{flex:1 1 auto}
}
@media print{
  .studio-note-context,.studio-assets,.studio-score-card,.top-theme-switch{display:none!important}
  .card{box-shadow:none}
}
/* The original score inspector uses a permanent pale panel. Its form controls
   must never inherit light-on-dark text from the application theme. */
.studio-editor-shell .arrangement-tools button,
.studio-editor-shell .arrangement-tools select,
.studio-editor-shell .arrangement-tools input,
.studio-editor-shell .instrument-row button,
.studio-editor-shell .instrument-row select,
.studio-editor-shell .note-inspector input,
.studio-editor-shell .note-inspector select{color:#27384e}
.studio-editor-shell .arrangement-tools input::placeholder{color:#67778b;opacity:1}
.studio-editor-shell .arrangement-tools button:hover{background:#ecf3fb;color:#1b3956}
/* Reusable checkboxes were still dark-only in Composer, MIDI and Settings. */
.check,.live-studio .check{background:var(--ui-note);border-color:var(--line);color:var(--ink)}
.check span,.live-studio .check span,.check label,.checkgrid .check{color:var(--ink)}
.feature-list{color:var(--muted);line-height:1.8}
.feature-list li{padding-left:2px}
.controller-row,.controller-meters span{background:var(--ui-note);color:var(--ink);border-color:var(--line)}
.controller-row input{background:var(--ui-input);color:var(--ink);border-color:var(--ui-border)}

/* v2.23: clear separation between recording studio and external score writer. */
.nav .nav-external {display:block;padding:11px 13px;font-size:13px;font-weight:660;color:var(--ui-nav-ink);text-decoration:none;border:1px solid var(--line);background:var(--ui-nav-active);border-radius:11px;margin-top:10px}
.nav .nav-external:hover,.nav .nav-external:focus-visible{color:var(--ink);background:var(--ui-hover);outline-offset:2px}
.studio-project-card{padding:14px 19px}
.studio-project-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(105px,140px) auto;gap:12px;align-items:end}
.studio-project-fields .field{margin:0}
.studio-project-fields .btn{min-height:40px}
@media(min-width:681px){.studio-track{grid-template-columns:32px minmax(120px,1fr) minmax(160px,1.2fr)}}
@media(max-width:980px){.nav .nav-external{white-space:nowrap;min-width:max-content;font-size:11px;padding:9px 11px;margin:0}}
@media(max-width:680px){.studio-project-fields{grid-template-columns:minmax(0,1fr) minmax(100px,130px)}.studio-project-fields .btn{grid-column:1/-1}.studio-track{grid-template-columns:30px minmax(0,1fr)}.studio-track-select{grid-column:2;grid-row:2}}