:root {
  color-scheme: dark;
  --app-bg: #0f1115;
  --app-sidebar: #131519;
  --app-panel: #171a21;
  --app-panel-2: #1d212a;
  --app-elevated: #20252d;
  --app-line: #2b303b;
  --app-text: #f4f5f7;
  --app-muted: #9299a7;
  --app-faint: #606877;
  --app-accent: #75e6aa;
  --app-accent-ink: #0d1914;
  --app-accent-soft: #19382d;
  --app-secondary: #69d1df;
  --app-coral: #ff8e7a;
  --app-warm: #f0bd6b;
  --app-on-coral: #ffffff;
  --app-on-warm: #1a1208;
  --app-glow: #292740;
  --app-shadow: #050609a8;
  --app-highlight: #ffffff14;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-reading: 17px;
  --line-reading: 2;
  --content-readable: 720px;
  --control-height: 36px;
  --control-radius: 6px;
  --panel-radius: 8px;
}

html[data-theme="daylight"] {
  color-scheme: light;
  --app-bg: #eef2f1;
  --app-sidebar: #e4e9e7;
  --app-panel: #f9fbfa;
  --app-panel-2: #e8edeb;
  --app-elevated: #ffffff;
  --app-line: #b9c7c2;
  --app-text: #111a17;
  --app-muted: #465650;
  --app-faint: #65736e;
  --app-accent: #16856b;
  --app-accent-ink: #ffffff;
  --app-accent-soft: #d5ebe4;
  --app-secondary: #2c8294;
  --app-coral: #dd695d;
  --app-warm: #9a6d18;
  --app-glow: #c9ded8;
  --app-shadow: #27342f24;
  --app-highlight: #ffffff;
}

html[data-theme="live"] {
  --app-bg: #151112;
  --app-sidebar: #191415;
  --app-panel: #1f191a;
  --app-panel-2: #292022;
  --app-elevated: #2d2224;
  --app-line: #413033;
  --app-text: #fff6f3;
  --app-muted: #b7a4a3;
  --app-faint: #7e6b6c;
  --app-accent: #ff806f;
  --app-accent-ink: #25100d;
  --app-accent-soft: #482522;
  --app-secondary: #62d7ce;
  --app-coral: #ffbd67;
  --app-warm: #f2c46e;
  --app-glow: #3a2024;
  --app-shadow: #080304b8;
  --app-highlight: #ffffff12;
}

html[data-theme="violet"] {
  --app-bg: #121217;
  --app-sidebar: #16161c;
  --app-panel: #1b1a22;
  --app-panel-2: #24232d;
  --app-elevated: #292735;
  --app-line: #373442;
  --app-text: #f7f5fb;
  --app-muted: #aaa5b5;
  --app-faint: #777181;
  --app-accent: #b8a5ff;
  --app-accent-ink: #171224;
  --app-accent-soft: #342e50;
  --app-secondary: #73d9b9;
  --app-coral: #ff91a7;
  --app-warm: #e9bc72;
  --app-glow: #30294b;
  --app-shadow: #050408b8;
  --app-highlight: #ffffff12;
}

html[data-theme="mist"] {
  color-scheme: light;
  --app-bg: #edf3f3;
  --app-sidebar: #e4eceb;
  --app-panel: #f9fbfb;
  --app-panel-2: #e5eeee;
  --app-elevated: #ffffff;
  --app-line: #b8c9cc;
  --app-text: #102125;
  --app-muted: #465c61;
  --app-faint: #64777b;
  --app-accent: #247a8a;
  --app-accent-ink: #ffffff;
  --app-accent-soft: #d7e9ec;
  --app-secondary: #4d8e77;
  --app-coral: #d96b5f;
  --app-warm: #986b20;
  --app-glow: #c7ddde;
  --app-shadow: #22383b22;
  --app-highlight: #ffffff;
}

html[data-theme="sage"] {
  color-scheme: light;
  --app-bg: #eef3ed;
  --app-sidebar: #e5ece3;
  --app-panel: #fafcf9;
  --app-panel-2: #e7eee5;
  --app-elevated: #ffffff;
  --app-line: #bac9b8;
  --app-text: #122116;
  --app-muted: #4a5d4f;
  --app-faint: #67766a;
  --app-accent: #4f765d;
  --app-accent-ink: #ffffff;
  --app-accent-soft: #dce8de;
  --app-secondary: #567a8a;
  --app-coral: #d8796c;
  --app-warm: #916c27;
  --app-glow: #cfdfd0;
  --app-shadow: #293b2c20;
  --app-highlight: #ffffff;
}

:root {
  --bg: var(--app-bg);
  --ground: var(--app-bg);
  --surface: var(--app-panel);
  --panel: var(--app-panel);
  --surface-2: var(--app-panel-2);
  --panel-2: var(--app-panel-2);
  --line: var(--app-line);
  --text: var(--app-text);
  --ink: var(--app-text);
  --muted: var(--app-muted);
  --faint: var(--app-faint);
  --green: var(--app-accent);
  --mint: var(--app-accent);
  --accent: var(--app-accent);
  --green-deep: var(--app-accent-soft);
  --accent-soft: var(--app-accent-soft);
  --cyan: var(--app-secondary);
  --sky: var(--app-secondary);
  --coral: var(--app-coral);
  --warm: var(--app-warm);
  --violet: var(--app-secondary);
  --radius: var(--panel-radius);
  --color-canvas: var(--app-bg);
  --color-surface: var(--app-panel);
  --color-surface-muted: var(--app-panel-2);
  --color-foreground: var(--app-text);
  --color-foreground-muted: var(--app-muted);
  --color-primary: var(--app-accent);
  --color-primary-soft: var(--app-accent-soft);
  --button-height: var(--control-height);
  --button-radius: var(--control-radius);
  --card-background: var(--color-surface);
  --card-border: var(--app-line);
  --card-radius: var(--panel-radius);
  --control-bg: var(--app-elevated);
  --control-hover: var(--app-panel-2);
  --control-border: var(--app-line);
  --control-text: var(--app-text);
  --control-placeholder: var(--app-faint);
  --state-hover: color-mix(in srgb, var(--app-accent-soft) 62%, var(--app-panel));
  --state-selected: var(--app-accent-soft);
  --state-danger-bg: color-mix(in srgb, var(--app-coral) 12%, var(--app-panel));
  --state-danger-line: color-mix(in srgb, var(--app-coral) 48%, var(--app-line));
  --state-danger-text: var(--app-coral);
  --ai-panel-bg: color-mix(in srgb, var(--app-panel) 94%, var(--app-bg));
  --ai-section-bg: color-mix(in srgb, var(--app-panel-2) 68%, var(--app-panel));
  --ai-control-bg: var(--app-elevated);
  --ai-control-hover: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel));
  --ai-border: var(--app-line);
  --ai-text: var(--app-text);
  --ai-muted: var(--app-muted);
  --ai-faint: var(--app-faint);
  --ai-active-bg: var(--app-accent-soft);
  --ai-active-text: var(--app-accent);
  --ai-code-text: color-mix(in srgb, var(--app-accent) 80%, var(--app-text));
  --button-secondary-bg: var(--app-panel-2);
  --button-secondary-bg-hover: color-mix(in srgb, var(--app-accent-soft) 54%, var(--app-panel-2));
  --button-secondary-border: var(--app-line);
  --button-secondary-text: var(--app-text);
  --button-accent-bg: var(--app-accent-soft);
  --button-accent-border: color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
  --button-accent-text: var(--app-accent);
  --status-success-bg: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel));
  --status-success-text: color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
  --status-warning-bg: color-mix(in srgb, var(--app-warm) 12%, var(--app-panel));
  --status-warning-text: color-mix(in srgb, var(--app-warm) 82%, var(--app-text));
  --status-info-bg: color-mix(in srgb, var(--app-secondary) 12%, var(--app-panel));
  --status-info-text: color-mix(in srgb, var(--app-secondary) 82%, var(--app-text));
  --overlay-backdrop: color-mix(in srgb, var(--app-bg) 78%, transparent);
  --diff-added-bg: color-mix(in srgb, var(--app-accent) 14%, var(--app-panel));
  --diff-added-text: color-mix(in srgb, var(--app-accent) 78%, var(--app-text));
  --diff-removed-bg: color-mix(in srgb, var(--app-coral) 14%, var(--app-panel));
  --diff-removed-text: color-mix(in srgb, var(--app-coral) 78%, var(--app-text));
  --karaoke-stage-bg: radial-gradient(ellipse at 50% 44%, var(--app-glow) 0%, var(--app-panel-2) 42%, var(--app-bg) 100%);
  --karaoke-chrome-bg: color-mix(in srgb, var(--app-bg) 88%, transparent);
  --karaoke-panel-bg: color-mix(in srgb, var(--app-panel) 88%, transparent);
  --karaoke-grid-bg: color-mix(in srgb, var(--app-panel-2) 72%, transparent);
  --karaoke-grid-line: color-mix(in srgb, var(--app-line) 58%, transparent);
  --karaoke-score-bg: color-mix(in srgb, var(--app-panel) 82%, transparent);
  --karaoke-text: var(--app-text);
  --karaoke-muted: var(--app-muted);
  --karaoke-faint: var(--app-faint);
  --karaoke-highlight: var(--app-warm);
  --practice-stage-bg: color-mix(in srgb, var(--app-bg) 96%, var(--app-panel));
  --practice-header-bg: color-mix(in srgb, var(--app-panel) 72%, var(--app-bg));
  --practice-control-strip-bg: color-mix(in srgb, var(--app-panel) 86%, var(--app-bg));
  --practice-overlay-bg: color-mix(in srgb, var(--app-bg) 82%, transparent);
  --practice-canvas-bg: color-mix(in srgb, var(--app-bg) 97%, var(--app-panel));
  --practice-grid-major: color-mix(in srgb, var(--app-line) 78%, transparent);
  --practice-grid-minor: color-mix(in srgb, var(--app-line) 42%, transparent);
  --practice-canvas-label: color-mix(in srgb, var(--app-muted) 82%, transparent);
  --practice-target-future: color-mix(in srgb, var(--app-text) 68%, transparent);
  --practice-target-past: color-mix(in srgb, var(--app-accent) 52%, transparent);
  --practice-target-active: var(--app-warm);
  --practice-target-hit: var(--app-accent);
  --practice-live-line: var(--app-secondary);
  --practice-live-glow: color-mix(in srgb, var(--app-secondary) 65%, transparent);
  --practice-playhead: var(--app-coral);
  --workspace-context-bg: color-mix(in srgb, var(--app-panel) 66%, var(--app-bg));
  --workspace-context-line: var(--app-line);
  --workspace-nav-hover: color-mix(in srgb, var(--app-panel-2) 78%, var(--app-sidebar));
  --workspace-nav-active: color-mix(in srgb, var(--app-accent-soft) 76%, var(--app-sidebar));
  --workspace-step-bg: var(--app-panel-2);
  --workspace-step-hover: var(--state-hover);
  --workspace-step-line: var(--app-line);
}

body { background: var(--app-bg); color: var(--app-text); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::placeholder { color: var(--control-placeholder); opacity: 1; }
.icon { color: var(--app-muted); }
.toast { border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: var(--status-success-bg); color: var(--status-success-text); box-shadow: 0 10px 30px var(--app-shadow); }
.status-error { color: var(--state-danger-text) !important; }
.sidebar { background: var(--app-sidebar); }
.main-content { background: radial-gradient(circle at 82% 0%, var(--app-glow) 0, transparent 30%), var(--app-bg); }
.topbar, .mobile-tabs { border-color: var(--app-line); }
.lyrics-card, .lyrics-panel, .tool-panel, .audio-row, .ai-tools-panel, .library-item, .library-row, .version-card, .mobile-panel, .now-playing, .record-panel, .library-panel, .upload-panel, .guide-step, .model-card { background: var(--app-panel); border-color: var(--app-line); }
.workspace-switcher, .project-search, .segmented, .suno-block, .folder-path, .lyrics-content .lyric-block, .ai-structure-detail, .player-lyrics, .quick-song, .theme-menu { background: color-mix(in srgb, var(--app-panel) 72%, var(--app-bg)); border-color: var(--app-line); }
.primary-btn, .copy-all, .play-btn, .mobile-brand-mark, .mini-control-play, .button.primary { background: var(--app-accent); color: var(--app-accent-ink); border-color: var(--app-accent); }
.button.primary:hover { background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); color: var(--app-accent-ink); }
.button.secondary { border-color: var(--button-secondary-border); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.button.secondary:hover { border-color: var(--app-secondary); background: var(--button-secondary-bg-hover); color: var(--app-secondary); }
.header-download { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); color: var(--app-accent); }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--app-accent); }

/* Public product site surfaces follow the active global palette. */
.hero::before { border-color: color-mix(in srgb, var(--app-secondary) 24%, var(--app-line)); }
.hero-product { border-color: color-mix(in srgb, var(--app-secondary) 42%, var(--app-line)); background: var(--app-panel); box-shadow: 20px 22px 0 var(--app-accent-soft); }
.window-chrome { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-faint); }
.window-chrome span { background: var(--app-faint); }
.window-chrome span:nth-child(1) { background: var(--app-coral); }
.window-chrome span:nth-child(2) { background: var(--app-warm); }
.window-chrome span:nth-child(3) { background: var(--app-accent); }
.product-note { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); background: var(--app-panel); color: color-mix(in srgb, var(--app-accent) 62%, var(--app-text)); }
.note-two { border-color: color-mix(in srgb, var(--app-coral) 46%, var(--app-line)); color: color-mix(in srgb, var(--app-coral) 58%, var(--app-text)); }
.proof-strip { background: var(--app-line); }
.proof-strip > div { background: var(--app-panel); }
.proof-strip b { color: var(--app-accent); }
.feature-grid article { border-color: var(--app-line); background: var(--app-panel); }
.feature-grid article:nth-child(2n) { background: var(--app-panel-2); }
.feature-grid article:hover { border-color: var(--app-accent); background: var(--state-hover); }
.workflow { background: color-mix(in srgb, var(--app-panel) 74%, var(--app-bg)); }
.workflow-shot, .video-promo video { border-color: var(--app-line); background: var(--app-panel); }
.pwa-qr, .guide-pwa { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: var(--app-panel); }
.release-card { border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); background: var(--app-panel); }
.phone-frame { border-color: var(--app-line); background: var(--app-panel); box-shadow: 14px 15px 0 var(--app-accent-soft); }
.demo-lyrics { border-color: var(--app-line); }
.play-row button { background: var(--app-accent); color: var(--app-accent-ink); }
.play-row div { background: var(--app-line); }
.play-row div i { background: var(--app-coral); }

.theme-switcher { position: relative; z-index: 40; flex: 0 0 auto; }
.theme-trigger { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-panel) 80%, transparent); color: var(--app-muted); font: inherit; white-space: nowrap; }
.theme-trigger:hover, .theme-switcher.open .theme-trigger { border-color: color-mix(in srgb, var(--app-accent) 60%, var(--app-line)); color: var(--app-text); background: var(--app-panel-2); }
.theme-trigger b { color: var(--app-faint); font-size: 11px; font-weight: 500; }
.theme-trigger-swatch, .theme-option-swatch { display: inline-flex; align-items: center; }
.theme-trigger-swatch i { width: 8px; height: 18px; border: 2px solid var(--app-panel); border-radius: 4px; background: var(--app-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); }
.theme-trigger-swatch i:nth-child(2) { margin-left: -3px; background: var(--app-secondary); }
.theme-trigger-swatch i:nth-child(3) { margin-left: -3px; background: var(--app-coral); }
.theme-menu { position: absolute; top: calc(100% + 8px); right: 0; display: none; width: 176px; padding: 6px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-panel) 94%, transparent); box-shadow: 0 18px 42px var(--app-shadow); backdrop-filter: blur(18px); }
.theme-switcher.open .theme-menu { display: grid; gap: 2px; }
.theme-menu button { display: grid; grid-template-columns: 36px 1fr 14px; min-height: 40px; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--app-muted); text-align: left; }
.theme-menu button:hover { background: var(--app-panel-2); color: var(--app-text); }
.theme-menu button.active { color: var(--app-accent); font-weight: 700; }
.theme-menu button b { visibility: hidden; font-size: 11px; }
.theme-menu button.active b { visibility: visible; }
.theme-option-swatch i { width: 13px; height: 22px; border: 2px solid var(--app-panel); border-radius: 4px; background: var(--swatch-a); }
.theme-option-swatch i:nth-child(2) { margin-left: -5px; background: var(--swatch-b); }
.theme-option-swatch i:nth-child(3) { margin-left: -5px; background: var(--swatch-c); }
.theme-option-swatch[data-theme-preview="studio"] { --swatch-a: #75e6aa; --swatch-b: #171a21; --swatch-c: #ff8e7a; }
.theme-option-swatch[data-theme-preview="daylight"] { --swatch-a: #16856b; --swatch-b: #f4f7f6; --swatch-c: #dd695d; }
.theme-option-swatch[data-theme-preview="live"] { --swatch-a: #ff806f; --swatch-b: #1c1718; --swatch-c: #62d7ce; }
.theme-option-swatch[data-theme-preview="violet"] { --swatch-a: #b8a5ff; --swatch-b: #191820; --swatch-c: #73d9b9; }
.theme-option-swatch[data-theme-preview="mist"] { --swatch-a: #247a8a; --swatch-b: #f7faf9; --swatch-c: #d96b5f; }
.theme-option-swatch[data-theme-preview="sage"] { --swatch-a: #4f765d; --swatch-b: #f7faf6; --swatch-c: #d8796c; }
.settings-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 20px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; }
.settings-theme-row .theme-trigger { min-width: 132px; justify-content: space-between; }
.workspace-settings-modal { width: min(520px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }
.audio-device-settings { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px 0 18px; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.audio-device-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.audio-device-head strong, .audio-device-head span { display: block; letter-spacing: 0; }
.audio-device-head strong { color: var(--app-text); font-size: 13px; }
.audio-device-head span { margin-top: 3px; color: var(--app-faint); font-size: 10px; }
.audio-device-settings select { width: 100%; min-width: 0; height: 38px; padding: 0 34px 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-surface-strong); color: var(--app-text); }
.audio-device-test { min-height: 34px; display: grid; grid-template-columns:auto minmax(80px,1fr) auto; align-items: center; gap: 10px; color: var(--app-faint); font-size: 10px; }
.audio-device-test .ghost-btn { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); }
.audio-device-test meter { width: 100%; height: 7px; accent-color: var(--app-accent); }
#audioOutputStatus { grid-column: 2 / 4; }

.nav-section-title { margin: 2px 11px 8px; color: var(--app-faint); font: 500 10px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; }
.sidebar .main-nav { gap: 3px; }
.sidebar .nav-item { min-height: 40px; border: 1px solid transparent; }
.sidebar .nav-item.active { border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-text); }
.sidebar .nav-item.active .icon { color: var(--app-accent); }
.sidebar .nav-count { min-width: 20px; text-align: right; }

.workflow-strip { display: grid; grid-template-columns: minmax(126px, .9fr) repeat(5, minmax(112px, 1fr)); gap: 0; max-width: 1440px; margin: 18px 0 22px; padding: 0; overflow-x: auto; border: 1px solid var(--app-line); border-radius: var(--panel-radius); background: var(--app-panel); }
.workflow-label { display: grid; align-content: center; gap: 3px; min-width: 126px; padding: 12px 16px; border-right: 1px solid var(--app-line); }
.workflow-label span { color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.workflow-label strong { color: var(--app-text); font-size: 12px; }
.workflow-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); min-height: 58px; align-items: center; gap: 8px; padding: 8px 12px; border-left: 1px solid var(--app-line); border-radius: 0; background: transparent; color: var(--app-muted); text-align: left; }
.workflow-step:first-of-type { border-left: 0; }
.workflow-step::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ''; background: transparent; }
.workflow-step:hover { background: var(--app-panel-2); color: var(--app-text); }
.workflow-step.active { background: color-mix(in srgb, var(--app-accent-soft) 72%, transparent); color: var(--app-text); }
.workflow-step.active::after { background: var(--app-accent); }
.workflow-step b { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.workflow-step.active b { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.workflow-step > span { display: grid; min-width: 0; gap: 1px; }
.workflow-step > span strong { color: inherit; font-size: 12px; }
.workflow-step > span small { overflow: hidden; color: var(--app-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.lyrics-section-meta { margin: 4px 0 0; color: var(--app-faint); font-size: 10px; }
.lyrics-card { overflow: hidden; border-radius: var(--panel-radius); }
.lyrics-toolbar { display: flex; height: auto; min-height: 62px; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
.lyrics-workspace-status { display: grid; min-width: 104px; align-content: center; gap: 2px; padding-right: 12px; border-right: 1px solid var(--app-line); }
.lyrics-workspace-status strong { color: var(--app-text); font-size: 11px; }
.lyrics-workspace-status span { color: var(--app-faint); font-size: 9px; }
.lyrics-view-controls { display: flex; min-width: 0; flex: 1 1 180px; align-items: center; flex-wrap: wrap; gap: 8px; }
.lyrics-version-tools { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.lyrics-version-tools select { width: auto; max-width: 150px; height: var(--control-height); border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-panel-2); color: var(--app-text); padding: 0 28px 0 9px; }
.lyrics-version-tools .outline-btn { min-height: var(--control-height); padding: 0 10px; background: transparent; font-size: 11px; }
#toggleLyricsEdit { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); color: var(--app-accent); }
.lyrics-card[data-lyrics-mode="edit"] #toggleLyricsEdit { background: var(--app-accent); color: var(--app-accent-ink); }
.lyrics-card[data-lyrics-mode="compare"] #compareLyrics { background: var(--app-accent-soft); color: var(--app-accent); }
.lyrics-toolbar .segmented { flex: 0 0 auto; background: var(--app-panel-2); }
.lyrics-toolbar .count-label { min-width: 42px; flex: 0 0 auto; text-align: right; }

#lyricsContent.read-mode { display: block; min-height: 560px; max-height: min(720px, calc(100vh - 238px)); padding: 0; overflow-y: auto; background: color-mix(in srgb, var(--app-panel) 86%, var(--app-bg)); }
.lyrics-time-source { max-width: var(--content-readable); margin: 18px auto 0; border-radius: 5px; }
.lyrics-reader { width: min(100%, calc(var(--content-readable) + 64px)); margin: 0 auto; padding: 30px 32px 96px; }
.lyrics-reader-section + .lyrics-reader-section { margin-top: 34px; }
.lyrics-reader-section > header { display: flex; align-items: center; gap: 12px; margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid var(--app-line); }
.lyrics-reader-section > header span { color: var(--app-accent); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.lyrics-reader-section > header strong { color: var(--app-text); font-size: 13px; }
.lyrics-reader-lines { display: grid; gap: 2px; }
#lyricsContent.read-mode .lyric-display { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 0 14px; min-height: 44px; padding: 5px 10px; border: 0; border-radius: 4px; }
#lyricsContent.read-mode .lyric-display:hover { background: color-mix(in srgb, var(--app-panel-2) 66%, transparent); }
#lyricsContent.read-mode .lyric-display-head { display: flex; grid-column: 1; grid-row: 1 / span 2; align-items: flex-start; justify-content: flex-end; gap: 4px; margin: 0; padding-top: 9px; }
#lyricsContent.read-mode .lyric-display-head .line-num { color: var(--app-faint); font-size: 9px; }
#lyricsContent.read-mode .lyric-display-zh { grid-column: 2; color: var(--app-text); font-size: var(--font-reading); line-height: var(--line-reading); letter-spacing: 0; }
#lyricsContent.read-mode .lyric-display-en { grid-column: 2; margin: 0 0 5px; color: var(--app-muted); font-size: 12px; line-height: 1.7; }
#lyricsContent.read-mode.timed-mode .lyric-display { grid-template-columns: 76px minmax(0, 1fr); }
#lyricsContent.read-mode .lyric-time { color: var(--app-secondary); font: 500 9px 'DM Mono', ui-monospace, monospace; }
#lyricsContent.read-mode .sync-active { background: var(--app-accent-soft); box-shadow: inset 3px 0 0 var(--app-accent); }
.lyrics-empty { display: grid; min-height: 420px; place-items: center; color: var(--app-muted); }

#lyricsContent:not(.read-mode):not(.compare-mode) { display: block; max-height: min(720px, calc(100vh - 238px)); padding: 12px 24px 80px; overflow-y: auto; background: color-mix(in srgb, var(--app-panel) 88%, var(--app-bg)); }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; max-width: 860px; min-height: 0; margin: 0 auto; padding: 14px 6px; border: 0; border-bottom: 1px solid var(--app-line); border-radius: 0; background: transparent; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block textarea { min-height: 72px; padding: 9px 10px; overflow-y: hidden; resize: vertical; border: 1px solid transparent; border-radius: 5px; background: var(--app-panel); color: var(--app-text); font-size: 14px; line-height: 1.75; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block textarea:hover { border-color: var(--app-line); }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block textarea:focus { border-color: var(--app-accent); background: var(--app-elevated); outline: 0; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block .en-line { margin: 0; color: var(--app-muted); font-size: 12px; }
#lyricsContent:not(.read-mode):not(.compare-mode) .add-line { display: block; width: min(100%, 860px); min-height: 42px; margin: 18px auto 0; border: 1px dashed var(--app-line); border-radius: 6px; color: var(--app-accent); }
#lyricsContent.compare-mode { padding: 18px; background: var(--app-panel); }

@media (min-width: 701px) {
  .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
  .sidebar { width: var(--sidebar-width, 232px); height: 100vh; padding: 22px 14px 16px; overflow-y: auto; }
  .sidebar .brand { margin-bottom: 22px; }
  .main-content { height: 100vh; padding: 0 36px 52px; overflow-y: auto; }
  .topbar { position: sticky; z-index: 30; top: 0; height: 70px; background: color-mix(in srgb, var(--app-bg) 90%, transparent); backdrop-filter: blur(18px); }
  .content-grid { max-width: 1440px; gap: 24px; }
  .editor-column { min-width: 0; }
  .tool-column { min-width: 280px; }
  .editor-column > .section-head { margin-top: 12px; margin-bottom: 14px; }
}

.mobile-tabs { background: color-mix(in srgb, var(--app-panel) 92%, transparent); }
.mobile-tab.active { background: var(--app-accent-soft); color: var(--app-accent); }
.player-control, .volume-control button, .play-mode, .loop-actions button, .playlist-tools button, .lyrics-tool-button, .icon-button { background: var(--app-panel-2); border-color: var(--app-line); color: var(--app-text); }
.player-control-main { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); box-shadow: 0 5px 18px color-mix(in srgb, var(--app-accent) 32%, transparent); }
.play-mode.active, .song-single.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.cover::before { border-color: color-mix(in srgb, var(--app-accent) 62%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 58%, transparent), inset 0 0 8px color-mix(in srgb, var(--app-secondary) 44%, transparent); }
.player-progress input::-webkit-slider-thumb, .player-progress input::-moz-range-thumb { background: var(--app-accent); }
.practice-stats, .stat-grid > div, .player-lyrics-section, .queue-dialog, .install-dialog { background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg)); border-color: var(--app-line); }
.player-lyrics-line { border-bottom-color: var(--app-line); color: var(--app-text); }
.player-lyrics-line.active { background: var(--app-accent-soft); box-shadow: inset 3px 0 0 var(--app-accent); }
.mobile-core-brief { border-left-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 9%, var(--app-panel)); }
.mobile-shell { color: var(--app-text); }
.mobile-header { padding: 2px 0; }
.mobile-tabs { position: sticky; z-index: 20; top: 0; box-shadow: 0 1px 0 var(--app-line); backdrop-filter: blur(18px); }
.mobile-tab { min-height: 38px; color: var(--app-muted); }
.mobile-tab.active { font-weight: 750; }
.now-playing.active { row-gap: 10px; }
.now-copy h2 { color: var(--app-text); letter-spacing: 0; }
.player-page-head .eyebrow, .practice-stats .eyebrow { color: var(--app-faint); }
.practice-stats { border-radius: var(--panel-radius); }
.player-lyrics-section h3, .queue-panel h3, .lyrics-panel h2, .record-panel h2, .library-panel h2 { color: var(--app-text); letter-spacing: 0; }
.player-lyrics { scrollbar-color: var(--app-line) transparent; }
.player-lyrics-line .lyric-copy { color: var(--app-text); font-size: 20px; line-height: 1.85; letter-spacing: 0; }
.fullscreen-lyrics p .lyric-copy { font-size: 25px; line-height: 1.8; letter-spacing: 0; }
.song-row { border-top-color: var(--app-line); }
.song-info strong { color: var(--app-text); font-size: 14px; }
.song-info span, .empty, .form-status { color: var(--app-muted); }

.ai-structure-detail:has(.ai-segment-controls) { display: block; padding: 14px; border-left-width: 3px; }
.ai-structure-detail > strong { display: inline-block; margin-right: 8px; color: var(--app-text); font-size: 13px; }
.ai-structure-detail > span { color: var(--app-muted); }
.ai-structure-detail > code { display: block; margin-top: 9px; color: color-mix(in srgb, var(--app-accent) 82%, var(--app-text)); line-height: 1.65; }
.ai-segment-controls { display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--app-line); }
.ai-segment-controls-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.ai-segment-controls-head > div { display: flex; align-items: baseline; gap: 9px; }
.ai-segment-controls-head strong { color: var(--app-text); font-size: 12px; }
.ai-segment-controls-head > div > span { color: var(--app-faint); font-size: 10px; }
.ai-segment-count { font: 10px 'DM Mono', ui-monospace, monospace; }
.ai-segment-clear { min-height: 28px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; background: transparent; color: var(--app-muted); font-size: 10px; }
.ai-segment-clear:hover:not(:disabled) { border-color: var(--app-coral); color: var(--app-coral); }
.ai-segment-clear:disabled { opacity: .4; cursor: default; }
.ai-segment-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.ai-segment-controls .ai-segment-step { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 8px 9px; min-width: 0; padding: 10px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-panel-2) 54%, transparent); }
.ai-segment-step:hover { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); }
.ai-segment-step.has-transition { border-color: color-mix(in srgb, var(--app-accent) 62%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 64%, var(--app-panel)); box-shadow: inset 2px 0 0 var(--app-accent); }
.ai-segment-order { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 5px; background: var(--app-panel-2); color: var(--app-faint); font: 9px 'DM Mono', ui-monospace, monospace; }
.ai-segment-step.has-transition .ai-segment-order { background: var(--app-accent); color: var(--app-accent-ink); }
.ai-segment-title { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
.ai-segment-title code { min-width: 0; overflow: hidden; color: var(--app-text); font: 10px 'DM Mono', ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ai-segment-title small { flex: 0 0 auto; color: var(--app-faint); font-size: 9px; }
.ai-segment-step select { grid-column: 1 / -1; width: 100%; min-width: 0; height: 32px; padding: 0 28px 0 9px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel); color: var(--app-muted); font-size: 10px; }
.ai-segment-step.has-transition select { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); }

html[data-theme="daylight"] .modal,
html[data-theme="daylight"] .mini-player { background: color-mix(in srgb, var(--app-panel) 94%, transparent); box-shadow: 0 18px 54px var(--app-shadow); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .ai-tools-panel :is(input, select, textarea),
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .modal :is(input, select, textarea),
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .mobile-shell :is(input, select, textarea) { color: var(--app-text); background: var(--app-elevated); border-color: var(--app-line); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.lyrics-card, .tool-panel, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card) { box-shadow: 0 1px 1px var(--app-highlight) inset; }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.lyric-display-head strong, .lyric-display-zh, .lyrics, .player-lyrics-line, .fullscreen-lyrics p) { color: var(--app-text); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .mobile-shell :is(.eyebrow, .mobile-brand div span, .player-meta, .lyrics-select-hint) { color: var(--app-muted); }

html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.breadcrumbs strong, .workspace-switcher, .outline-btn, .storage-row strong, .project-list-item strong) { color: var(--app-text); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.breadcrumbs button, .top-actions .ghost-btn, .panel-copy, .notes, .project-list-item small) { color: var(--app-muted); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.workspace-switcher, #projectSort, .project-search, .audio-search, .audio-library-tools select, .version-settings textarea, .version-rating, .project-root, .folder-path, .library-toolbar, .library-search, .library-toolbar select, .metadata-grid input, .metadata-grid select) {
  border-color: var(--app-line);
  background: var(--app-elevated);
  color: var(--app-text);
}
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.project-list-item:hover, .project-list-item.active) { background: var(--app-accent-soft); color: var(--app-text); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .project-list-item.active { box-shadow: inset 2px 0 0 var(--app-accent); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.storage-card, .audio-pagination button, .folder-btn) { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-text); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.storage-row, .storage-card p, .version-settings label) { color: var(--app-muted); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .progress { background: var(--app-line); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) .suno-block { border-color: var(--app-line); background: var(--app-elevated); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.suno-block p, .block-head) { color: var(--app-muted); }
.segmented button.active { background: var(--app-accent-soft); color: var(--app-accent); }

/* Component theme bridge: legacy screens consume semantic tokens only. */
:is(.ai-tools-panel, .ai-style-tag-picker, .ai-brief-form, .ai-style-analysis-box, .ai-suno-style-box) {
  border-color: var(--ai-border);
  background: var(--ai-panel-bg);
  color: var(--ai-text);
  box-shadow: none;
}
.ai-tools-panel { background: linear-gradient(145deg, color-mix(in srgb, var(--app-secondary) 5%, var(--ai-panel-bg)), var(--ai-panel-bg) 68%); }
:is(.ai-mode-guide, .ai-tool-purpose, .ai-structure-detail, .ai-style-tag-output) {
  border-color: var(--app-accent);
  background: var(--ai-section-bg);
  color: var(--ai-muted);
}
:is(.ai-tools-head h2, .ai-style-tag-head strong, .ai-brief-intro strong, .ai-style-analysis-box strong, .ai-final-prompt-label, .ai-suno-style-head strong, .ai-mode-guide strong, .ai-advanced-tools summary, .ai-segment-controls > strong) { color: var(--ai-text); }
:is(.ai-tools-head p, .ai-style-tag-head span, .ai-brief-intro span, .ai-style-analysis-box span, .ai-final-prompt-label span, .ai-suno-style-head span, .ai-advanced-tools summary span, .ai-memory-actions span, .ai-segment-controls > span) { color: var(--ai-muted); }
:is(.ai-tool-buttons button, .ai-structure-picker button, .ai-quick-tags button, .ai-style-tag-group button, .ai-module-tabbar button, .ai-workflow-mode-tabs button) {
  border-color: var(--ai-border);
  background: var(--ai-control-bg);
  color: var(--ai-muted);
}
:is(.ai-tool-buttons button, .ai-structure-picker button, .ai-quick-tags button, .ai-style-tag-group button, .ai-module-tabbar button, .ai-workflow-mode-tabs button):hover,
:is(.ai-tool-buttons button, .ai-structure-picker button, .ai-style-tag-group button, .ai-module-tabbar button, .ai-workflow-mode-tabs button).active {
  border-color: color-mix(in srgb, var(--app-accent) 62%, var(--ai-border));
  background: var(--ai-active-bg);
  color: var(--ai-active-text);
}
.ai-workflow-mode-tabs button strong { color: var(--ai-text); }
.ai-workflow-mode-tabs button span { color: var(--ai-faint); }
.ai-workflow-mode-tabs button.active strong { color: var(--ai-text); }
.ai-workflow-mode-tabs button.active span { color: var(--ai-active-text); }
:is(.ai-inputs label, .ai-brief-form label) { color: var(--ai-muted); }
:is(.ai-inputs, .ai-brief-form, .ai-style-analysis-box, .ai-suno-style-box, .ai-segment-controls) :is(input, select, textarea),
:is(.ai-prompt-preview, #aiSunoStylePreview) {
  border-color: var(--ai-border);
  background: var(--ai-control-bg);
  color: var(--ai-text);
}
:is(.ai-inputs, .ai-brief-form, .ai-style-analysis-box, .ai-suno-style-box, .ai-segment-controls) :is(input, textarea)::placeholder,
.ai-prompt-preview::placeholder { color: var(--control-placeholder); }
.ai-structure-picker { border-top-color: var(--ai-border); }
.ai-structure-detail strong { color: var(--ai-text); }
:is(.ai-structure-detail code, .ai-style-tag-group > span, .ai-segment-controls code) { color: var(--ai-code-text); }
.ai-style-tag-group { border-top-color: var(--ai-border); }
.ai-module-tabs, .ai-advanced-tools { border-top-color: var(--ai-border); }
.ai-advanced-tools summary::before { border-color: var(--ai-border); color: var(--app-accent); }
:is(.ai-generate-btn, .ai-create-project, .ai-style-analysis-box button, .ai-suno-style-head .copy-small) {
  border-color: color-mix(in srgb, var(--app-accent) 62%, var(--ai-border));
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
:is(.ai-generate-btn, .ai-create-project, .ai-style-analysis-box button, .ai-suno-style-head .copy-small):hover { background: color-mix(in srgb, var(--app-accent) 86%, var(--app-text)); }
:is(.ai-style-tag-head button, .ai-style-clear, .ai-memory-actions button) {
  border-color: var(--state-danger-line);
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
}
:is(.ai-style-tag-head button, .ai-style-clear, .ai-memory-actions button):hover { background: color-mix(in srgb, var(--app-coral) 20%, var(--app-panel)); }
.ai-suno-style-box::after { color: var(--ai-faint); }
.ai-style-tag-more { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--ai-border)) !important; background: var(--ai-section-bg) !important; color: var(--app-accent) !important; }
.ai-style-tag-more:hover { background: var(--ai-active-bg) !important; }
.ai-nav-item { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent) !important; }
.ai-nav-item:hover { background: var(--state-hover) !important; color: var(--app-text) !important; }

:is(.player-bar, .modal, .mini-player, .queue-dialog, .install-dialog) {
  border-color: var(--app-line);
  background: color-mix(in srgb, var(--app-panel) 96%, transparent);
  color: var(--app-text);
  box-shadow: 0 18px 54px var(--app-shadow);
}
.player-bar > button { color: var(--app-muted); }
.player-bar > button:hover { background: var(--app-panel-2); color: var(--app-accent); }
.player-bar .player-play { background: var(--app-accent); color: var(--app-accent-ink); }
:is(.player-bar select, .view-toggle, .pagination button, .pagination select, .trash-row button, .version-settings textarea, .version-rating, .audio-search, .audio-library-tools select, .audio-pagination button, .lrc-capture, .lrc-ai-tools select) {
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
}
:is(.library-item, .trash-row, .version-card, .stem-group, .lrc-line, .lrc-ai-tools) { border-color: var(--app-line); background: var(--app-panel); color: var(--app-text); }
:is(.library-item:hover, .project-list-item:hover) { border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); background: var(--state-hover); }
:is(.version-file, .stem-group-actions button, .stem-mute-toggle, .lrc-align-btn) { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-muted); }
:is(.version-file.now-playing, .version-file.playing, .audio-row.now-playing, .audio-row.playing, .lrc-line.active) { border-color: var(--app-accent); background: var(--app-accent-soft); }
.lrc-line.selected { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 12%, var(--app-panel)); }
:is(.lrc-text, .lrc-time, .lrc-ai-timing strong) { color: var(--app-text); }
:is(.danger-btn, .version-remove, .version-remove-asset, .lrc-auto-wave, .lrc-ai-cancel, .stem-mute-toggle.muted) { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }

.mobile-shell :is(input, select, textarea) { border-color: var(--control-border); background: var(--control-bg); color: var(--control-text); }
:is(.download-button, .player-control, .play-mode, .loop-actions button, .playlist-tools button, .lyrics-tool-button, .volume-popover button, .queue-open, .queue-dialog .icon-button, .header-actions .compact-action) {
  border-color: var(--app-line);
  background: var(--app-panel-2);
  color: var(--app-text);
}
:is(.practice-stats, .player-lyrics-section, .player-lyrics, .queue-panel, .quick-song, .volume-popover, .queue-dialog, .lyrics-panel, .library-panel, .upload-panel, .record-panel) {
  border-color: var(--app-line);
  background: var(--app-panel);
}
.player-lyrics-line { border-bottom-color: var(--app-line); color: var(--app-text); }
.player-lyrics-line > span, .fullscreen-lyrics p > span { color: var(--app-faint); }
:is(.player-lyrics-line.active, .player-lyrics-line.selected, .player-lyrics-line.drag-selected, .fullscreen-lyrics p.active) { background: var(--app-accent-soft); color: var(--app-text); box-shadow: inset 3px 0 0 var(--app-accent); }
.quick-song { color: var(--app-text); }
.loop-toggle input { border-color: var(--app-line); background: var(--app-panel-2); }
.loop-toggle input::after { background: var(--app-muted); }
.loop-toggle input:checked { border-color: var(--app-accent); background: var(--app-accent-soft); }
.loop-toggle input:checked::after { background: var(--app-accent); }
.cover { border-color: var(--app-secondary); background: var(--app-panel-2); color: var(--app-secondary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-secondary) 24%, transparent), 0 0 10px color-mix(in srgb, var(--app-secondary) 20%, transparent); }
.cover::before { border-color: var(--app-coral); box-shadow: 0 0 8px color-mix(in srgb, var(--app-coral) 50%, transparent), inset 0 0 8px color-mix(in srgb, var(--app-secondary) 34%, transparent); }
.cover::after { background: repeating-linear-gradient(90deg, var(--app-secondary) 0 2px, transparent 2px 4px); box-shadow: 0 0 6px var(--app-secondary); }
.player-progress input::-webkit-slider-runnable-track { background: var(--app-line); }
.player-progress input::-moz-range-track { background: var(--app-line); }
.player-progress input::-webkit-slider-thumb { background: var(--app-accent); box-shadow: 0 2px 8px var(--app-shadow); }
.player-progress input::-moz-range-thumb { background: var(--app-accent); box-shadow: 0 2px 8px var(--app-shadow); }

:is(.karaoke-workbench, body.karaoke-mode .karaoke-workbench.active) { background: radial-gradient(ellipse at 50% 44%, var(--app-glow) 0%, var(--app-panel-2) 42%, var(--app-bg) 100%); color: var(--app-text); }
:is(.karaoke-head, .karaoke-import, .pitch-roll-wrap, .tool-chip, .karaoke-score-strip, .karaoke-action, .karaoke-summary, .karaoke-line-score, .karaoke-settings) { border-color: var(--app-line); background: color-mix(in srgb, var(--app-panel) 88%, transparent); color: var(--app-text); }
:is(.karaoke-import span, .karaoke-guide, .karaoke-status, .karaoke-line, .karaoke-score-strip span, .karaoke-progress > div, .karaoke-final-score span, .karaoke-breakdown) { color: var(--app-muted); }
:is(.karaoke-word.played, .karaoke-status span:last-child) { color: var(--app-secondary); }
:is(.karaoke-line.active, .karaoke-breakdown strong) { color: var(--app-text); }
:is(.karaoke-word.singing, .karaoke-score-strip strong, .karaoke-final-score strong, .karaoke-line-score strong) { color: var(--app-warm); }
.karaoke-action[aria-pressed="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.karaoke-play, body.karaoke-mode .karaoke-play { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); box-shadow: 0 8px 22px color-mix(in srgb, var(--app-accent) 34%, transparent); }

html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(
  .nav-item,
  .tag-list button,
  .breadcrumbs,
  .panel-copy,
  .version-help,
  .ai-tools-head p,
  .ai-brief-form label,
  .ai-inputs label,
  .mobile-tab,
  label
) { font-weight: 520; }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(.eyebrow, .side-section-label, .nav-section-title) { color: var(--app-muted); font-weight: 650; }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"]) :is(input, select, textarea) { border-color: var(--app-line); }

/* Desktop workspace migration: remove the remaining fixed legacy palette. */
.sidebar { border-right-color: var(--app-line); }
.brand-mark { background: var(--app-accent); color: var(--app-accent-ink); }
:is(.workspace-switcher, .storage-card, .project-root, .folder-path, .folder-btn, .pill, .segmented, .lyrics-display-toggle) {
  border-color: var(--app-line);
  background: var(--app-panel-2);
  color: var(--app-text);
}
:is(.workspace-switcher, .storage-row, .panel-copy, .suno-block p, .notes, .audio-duration) { color: var(--app-muted); }
:is(.storage-row strong, .project-root strong, .block-head, .folder-path strong) { color: var(--app-text); }
:is(.progress, .mini-progress) { background: var(--app-line); }
.profile { border-top-color: var(--app-line); }
.avatar { background: var(--app-accent-soft); color: var(--app-accent); }
.breadcrumbs b { color: var(--app-faint); }
.outline-btn { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.outline-btn:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.primary-btn, .copy-all { background: var(--app-accent); color: var(--app-accent-ink); }
.cover-art { background: linear-gradient(135deg, var(--app-coral), var(--app-secondary) 55%, var(--app-accent)); box-shadow: 0 12px 30px var(--app-shadow); }
.cover-orbit { border-color: color-mix(in srgb, var(--app-elevated) 58%, transparent); }
.cover-art span { color: var(--app-accent-ink); }
.project-header { border-color: var(--app-line); }
.lyrics-card, .tool-panel, .audio-row, .library-row { background: var(--app-panel); border-color: var(--app-line); }
.lyric-block { border-bottom-color: var(--app-line); }
:is(.line-num, .lyric-block .en-line) { color: var(--app-faint); }
.suno-panel { border-color: color-mix(in srgb, var(--app-secondary) 38%, var(--app-line)); background: color-mix(in srgb, var(--app-secondary) 6%, var(--app-panel)); box-shadow: 0 15px 42px var(--app-shadow); }
.suno-block { border-color: var(--app-line); background: var(--app-elevated); }
.block-head small { color: var(--app-secondary); }
.notes { color: var(--app-text); }
.audio-row.active { border-color: var(--button-accent-border); background: var(--status-success-bg); }
.audio-row:not(.active) .play-btn { background: var(--button-secondary-bg); color: var(--app-muted); }
.version-badge { background: var(--app-accent-soft); color: var(--app-accent); }
.version-badge.muted { background: var(--app-panel-2); color: var(--app-muted); }
.waveform i { background: var(--app-accent); }
.waveform.subtle i { background: var(--app-faint); }

.version-panel { border-color: var(--app-line); }
.version-card { border-color: var(--app-line); background: var(--app-panel); color: var(--app-text); }
.version-card.drop-active { border-color: var(--app-accent); background: var(--status-success-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.version-drop { border-color: var(--app-line); color: var(--app-muted); }
.version-card :is(button, select, textarea) { border-color: var(--button-secondary-border); }
:is(.version-file, .version-reveal-asset, .version-stems, .lrc-align-btn, .stem-group-actions button, .stem-mute-toggle) {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
:is(.version-file, .version-reveal-asset, .version-stems, .lrc-align-btn, .stem-group-actions button, .stem-mute-toggle):hover:not(:disabled) {
  border-color: var(--button-accent-border);
  background: var(--button-secondary-bg-hover);
  color: var(--app-accent);
}
:is(.version-select, .version-pitch, .version-online-upload, .stem-mix-accompaniment) {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
:is(.version-select, .version-pitch, .version-online-upload, .stem-mix-accompaniment):hover:not(:disabled) {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
:is(.version-remove, .version-remove-asset) { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }
:is(.version-remove, .version-remove-asset):hover { background: color-mix(in srgb, var(--app-coral) 20%, var(--app-panel)); }
.stem-group { border-color: var(--app-line); background: var(--app-panel-2); }
.stem-group-body { border-top-color: var(--app-line); }
.stem-group-toggle { color: var(--app-text); }
.stem-mix-choice { color: var(--app-muted); }
.stem-mix-choice:has(input:not(:checked)):not(:has(input:disabled)) { color: var(--app-faint); }
.stem-format-choice { color: var(--app-muted); }
.stem-format-choice select { border-color: var(--app-line); background: var(--app-elevated); color: var(--app-text); }
:is(.accompaniment-ready, .stem-mix-status) { border-color: var(--app-accent); background: var(--status-success-bg); color: var(--status-success-text); }
.stem-mix-status.error { border-color: var(--app-coral); background: var(--state-danger-bg); color: var(--state-danger-text); }
:is(.pitch-status, .stem-mix-hint) { color: var(--app-muted); }
.pitch-status-ready { color: var(--status-success-text); }
.pitch-status-empty { color: var(--status-warning-text); }

:is(.modal-backdrop, .text-prompt-backdrop) { background: var(--overlay-backdrop); }
:is(.modal, .text-prompt) { border-color: var(--app-line); background: var(--app-panel); color: var(--app-text); box-shadow: 0 20px 80px var(--app-shadow); }
:is(.modal label, .text-prompt-path span) { color: var(--app-muted); }
:is(.modal input, .project-modal textarea, .text-prompt-input, .metadata-grid input, .metadata-grid select, .library-search, .project-search, #projectSort) {
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--control-text);
}
.text-prompt-path { border-color: var(--app-line); background: var(--app-panel-2); }
.text-prompt-path strong { color: var(--app-text); }
.text-prompt-input:focus { border-color: var(--app-accent); }
.text-prompt-input.invalid { border-color: var(--app-coral); }

:is(.library-row:hover, .library-item:hover) { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); }
.library-cover { background: var(--app-accent-soft); color: var(--app-accent); }
.trash-row { border-color: var(--app-line); background: var(--app-panel); }
.compare-head { color: var(--app-muted); }
.compare-row { border-top-color: var(--app-line); }
:is(.legend-removed, .compare-old.removed) { color: var(--diff-removed-text); }
:is(.legend-added, .compare-new.added) { color: var(--diff-added-text); }
.compare-row:not(.same) .compare-old { background: var(--diff-removed-bg); color: var(--diff-removed-text); }
.compare-row:not(.same) .compare-new { background: var(--diff-added-bg); color: var(--diff-added-text); }

/* Alignment, playback and utility controls use the same component states. */
.lrc-modal { background: var(--app-panel); color: var(--app-text); }
.lrc-modal :is(input, select, textarea) { border-color: var(--control-border); background: var(--control-bg); color: var(--control-text); }
.lrc-modal button:not(.primary-btn):not(.lrc-delete-line):not(.lrc-ai-cancel) { border-color: var(--button-secondary-border); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.lrc-modal button:not(.primary-btn):not(.lrc-delete-line):not(.lrc-ai-cancel):hover:not(:disabled) { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.lrc-line { border-color: transparent; background: var(--app-panel-2); }
.lrc-line.timed { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel)); }
.lrc-line.past { border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 5%, var(--app-panel-2)); }
.lrc-line.next { border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); background: var(--status-warning-bg); }
.lrc-line.active { border-color: var(--app-accent); background: var(--app-accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent); }
.lrc-line.selected { border-color: var(--app-secondary); background: var(--status-info-bg); }
.lrc-line.locked { border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); background: var(--status-warning-bg); }
.lrc-line.active.selected { border-color: var(--app-accent); background: var(--app-accent-soft); }
:is(.lrc-text, .lrc-time, .lrc-line.locked .lrc-text, .lrc-line.past .lrc-text) { color: var(--app-text); }
:is(.lrc-line.untimed .lrc-text, .lrc-line.next .lrc-text) { color: var(--app-muted); }
:is(.lrc-line.past .lrc-char.played, .lrc-line.active .lrc-char.played, .lrc-line.active .lrc-char.singing) { color: var(--app-accent); }
.lrc-line.active .lrc-char:not(.played) { color: var(--app-text); }
:is(.lrc-time-edit .lrc-time, .lrc-time-column .lrc-time) { color: var(--app-text); }
:is(.lrc-capture-start, .lrc-boundary-start .lrc-time) { color: var(--app-secondary); }
:is(.lrc-capture-end, .lrc-boundary-end .lrc-time) { color: var(--app-coral); }
:is(.lrc-delete-line, .lrc-ai-cancel, .lrc-clear-time) { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }
:is(.lrc-selection, .lrc-inline-edit, .lrc-reference-scope, .lrc-backup-label, .lrc-shortcut-help, .lrc-columns) { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-muted); }
:is(.lrc-capture-notice, .lrc-line.looping) { border-color: var(--app-accent); background: var(--status-success-bg); color: var(--status-success-text); }
.lrc-capture-notice.end { border-color: var(--app-coral); background: var(--state-danger-bg); }
.lrc-capture-notice.end strong { color: var(--state-danger-text); }
.lrc-follow-toggle { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 12%, transparent); }
.lrc-follow-toggle:hover { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.lrc-follow-toggle.paused { border-color: color-mix(in srgb, var(--app-warm) 55%, var(--app-line)); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-follow-toggle.paused:hover { border-color: var(--app-warm); background: var(--app-warm); color: var(--app-accent-ink); }
.lrc-nudge #lrcPreviousEnd { border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-nudge #lrcPreviousEnd:hover { border-color: var(--app-warm); background: color-mix(in srgb, var(--app-warm) 20%, var(--app-panel)); color: var(--status-warning-text); }
.lrc-transfer-tools #lrcClearSelected, .lrc-transfer-tools #lrcClearAll { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }
.lrc-transfer-tools #lrcClearSelected:hover:not(:disabled), .lrc-transfer-tools #lrcClearAll:hover { border-color: var(--app-coral); background: color-mix(in srgb, var(--app-coral) 20%, var(--app-panel)); color: var(--state-danger-text); }
.lrc-backup-tools { border-top-color: var(--app-line); }
.lrc-backup-tools select { border-color: color-mix(in srgb, var(--app-warm) 42%, var(--app-line)); background: var(--control-bg); color: var(--status-warning-text); }
.lrc-backup-tools button { border-color: color-mix(in srgb, var(--app-warm) 48%, var(--app-line)); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-columns { border-bottom-color: var(--app-line); background: var(--app-panel-2); color: var(--app-muted); }
.lrc-column-handle { border-right-color: var(--app-faint); }
.lrc-column-handle:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, transparent); }
.lrc-vocal-role, .vocal-role-badge { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-muted); }
.lrc-vocal-role.vocal-male.active, .vocal-role-badge.vocal-male { border-color: var(--app-secondary); background: var(--status-info-bg); color: var(--status-info-text); }
.lrc-vocal-role.vocal-female.active, .vocal-role-badge.vocal-female { border-color: var(--app-coral); background: var(--state-danger-bg); color: var(--state-danger-text); }
.lrc-vocal-role.vocal-duet.active, .vocal-role-badge.vocal-duet { border-color: var(--app-warm); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-ai-run, .lrc-ai-recognize { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.lrc-ai-run:hover, .lrc-ai-recognize:hover { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.lrc-ai-tools { border-color: var(--app-line); background: var(--app-panel-2); }
.lrc-ai-state, .lrc-ai-timing { color: var(--app-muted); }
.lrc-ai-meter { background: var(--app-line); }
.lrc-ai-confidence { border-color: var(--button-accent-border); background: var(--status-success-bg); color: var(--status-success-text); }
.lrc-ai-confidence.low { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }

:is(.player-bar, .karaoke-overlay, .player-inline-lyrics) { border-color: var(--app-line); background: color-mix(in srgb, var(--app-panel) 96%, transparent); color: var(--app-text); }
.player-bar { pointer-events: none; }
.player-bar :is(.player-drag-handle, .player-controls, .player-controls *) { pointer-events: auto; }
.player-controls > button { color: var(--app-muted); }
.player-controls > button:hover { background: var(--app-panel-2); color: var(--app-accent); }
.player-controls .player-play { background: var(--app-accent); color: var(--app-accent-ink); }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .player-controls {
  display: grid;
  grid-template-columns: 30px 38px 30px minmax(0, 1fr) 34px 34px;
  gap: 5px;
}
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .player-controls .player-track { min-width: 0; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .player-controls :is(.player-volume, #playerMode, #playerSpeed) { display: none; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .player-controls #playerKaraoke { grid-column: 5; }
html:is([data-layout-mode="portrait-preview"], [data-layout-mode="portrait-native"]) .player-controls #playerClose { grid-column: 6; display: grid; place-items: center; }
.player-drag-handle { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-faint); }
.player-drag-handle:hover { color: var(--app-accent); }
:is(.karaoke-prev, .karaoke-next, .player-inline-lyrics .karaoke-prev, .player-inline-lyrics .karaoke-next) { color: var(--app-faint); }
:is(.karaoke-current .current-text, .player-inline-lyrics .karaoke-current .current-text) { color: var(--app-text); }
.karaoke-pitch-lane { border-color: var(--app-line); background: repeating-linear-gradient(to bottom, var(--app-panel) 0 14px, var(--app-panel-2) 14px 15px); }
.karaoke-target-note { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 64%, var(--app-panel)); box-shadow: 0 0 6px color-mix(in srgb, var(--app-accent) 50%, transparent); }
.karaoke-target-note.manual { border-color: var(--app-warm); background: color-mix(in srgb, var(--app-warm) 64%, var(--app-panel)); box-shadow: 0 0 6px color-mix(in srgb, var(--app-warm) 50%, transparent); }
.karaoke-pitch-playhead { background: var(--app-secondary); box-shadow: 0 0 8px var(--app-secondary); }

/* PWA secondary states that previously stayed on the original dark palette. */
.mobile-core-brief { border-left-color: var(--app-secondary); background: var(--status-info-bg); color: var(--app-text); }
.mobile-core-brief span, .mobile-tab-secondary { color: var(--app-muted); }
.mini-player { border-color: var(--app-line); background: color-mix(in srgb, var(--app-panel) 96%, transparent); }
.practice-loop { border-top-color: var(--app-line); }
.record-meter { background: var(--app-panel-2); }
.secondary-button { border-color: var(--button-secondary-border); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
.primary-button, .record-button { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.queue-dialog::backdrop, .install-dialog::backdrop { background: var(--overlay-backdrop); }
.header-actions .compact-action:hover, .header-actions .compact-action:focus-visible { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-countdown.counting { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); box-shadow: 0 0 12px color-mix(in srgb, var(--app-accent) 42%, transparent); }
.lyric-char.singing, .lyrics-line.active .lyric-char.singing, .player-lyrics-line.active .lyric-char.singing, .fullscreen-lyrics p.active .lyric-char.singing { color: var(--app-warm); }
:is(.player-lyrics .lyric-focus, .fullscreen-lyrics .lyric-focus) { color: var(--app-text) !important; text-shadow: 0 0 12px color-mix(in srgb, var(--app-accent) 66%, transparent); }
:is(.player-lyrics .lyric-near.lyric-before, .fullscreen-lyrics .lyric-near.lyric-before) { color: var(--app-coral); }
:is(.player-lyrics .lyric-near.lyric-after, .fullscreen-lyrics .lyric-near.lyric-after) { color: var(--app-muted); }
:is(.player-lyrics .lyric-trail.lyric-before, .fullscreen-lyrics .lyric-trail.lyric-before) { color: color-mix(in srgb, var(--app-coral) 72%, var(--app-muted)); }
:is(.player-lyrics .lyric-trail.lyric-after, .fullscreen-lyrics .lyric-trail.lyric-after) { color: var(--app-faint); }

/* The full-screen practice mode has intentionally stronger selectors. */
body.karaoke-mode { background: var(--app-bg); color: var(--karaoke-text); }
body.karaoke-mode .karaoke-workbench.active { background: var(--karaoke-stage-bg); color: var(--karaoke-text); }
body.karaoke-mode .karaoke-head { border-color: var(--app-line); background: var(--karaoke-chrome-bg); color: var(--karaoke-text); }
body.karaoke-mode .karaoke-head-copy span { color: var(--karaoke-muted); }
body.karaoke-mode .karaoke-head h2 { color: var(--karaoke-text); }
body.karaoke-mode .karaoke-head-button { color: var(--karaoke-text); }
body.karaoke-mode .karaoke-head-button:hover,
body.karaoke-mode .karaoke-head-button:focus-visible { background: var(--state-hover); outline-color: color-mix(in srgb, var(--app-accent) 54%, transparent); }
body.karaoke-mode .karaoke-head-button[aria-expanded="true"] { background: var(--app-accent-soft); color: var(--app-accent); }
body.karaoke-mode .karaoke-status { color: var(--karaoke-muted); }
body.karaoke-mode .karaoke-status #karaokeMode { color: var(--karaoke-highlight); }
body.karaoke-mode .pitch-roll-wrap {
  border-color: var(--app-line);
  background: repeating-linear-gradient(0deg, var(--karaoke-grid-line) 0 1px, transparent 1px 25%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--karaoke-grid-line) 62%, transparent) 0 1px, transparent 1px 12.5%), var(--karaoke-grid-bg);
}
body.karaoke-mode .pitch-cursor { background: var(--karaoke-highlight); box-shadow: 0 0 5px color-mix(in srgb, var(--karaoke-highlight) 70%, transparent), 0 0 18px color-mix(in srgb, var(--karaoke-highlight) 48%, transparent); }
body.karaoke-mode .pitch-cursor::before { background: linear-gradient(90deg, transparent, var(--karaoke-highlight), transparent); }
body.karaoke-mode .pitch-label { color: var(--karaoke-faint); }
body.karaoke-mode .karaoke-score-strip { border-color: var(--app-line); background: var(--karaoke-score-bg); }
body.karaoke-mode .karaoke-score-strip > div + div { border-left-color: var(--app-line); }
body.karaoke-mode .karaoke-score-strip strong { color: var(--karaoke-highlight); }
body.karaoke-mode .karaoke-score-strip span { color: var(--karaoke-muted); }
body.karaoke-mode .karaoke-line { color: var(--karaoke-faint); }
body.karaoke-mode .karaoke-line.active { color: var(--karaoke-text); text-shadow: 0 2px 18px var(--app-shadow); }
body.karaoke-mode .karaoke-word.played { color: var(--karaoke-muted); }
body.karaoke-mode .karaoke-line.active .karaoke-word.singing { color: var(--karaoke-highlight); text-shadow: 0 0 13px color-mix(in srgb, var(--karaoke-highlight) 58%, transparent); }
body.karaoke-mode .karaoke-guide,
body.karaoke-mode .karaoke-progress > div { color: var(--karaoke-muted); }
body.karaoke-mode .karaoke-progress input { accent-color: var(--app-accent); }
body.karaoke-mode .karaoke-settings { border-color: var(--app-line); background: var(--karaoke-panel-bg); }
body.karaoke-mode .karaoke-settings label,
body.karaoke-mode .karaoke-settings button { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--button-secondary-text); }
body.karaoke-mode .karaoke-settings select { color: var(--app-accent); }
body.karaoke-mode .karaoke-action { color: var(--karaoke-text); }
body.karaoke-mode .karaoke-action:disabled { color: var(--karaoke-faint); }
body.karaoke-mode .karaoke-action[aria-pressed="true"] { background: var(--app-accent-soft); color: var(--app-accent); }
body.karaoke-mode .karaoke-play,
body.karaoke-mode .karaoke-play:hover,
body.karaoke-mode .karaoke-play:focus-visible { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); outline-color: color-mix(in srgb, var(--app-accent) 48%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--app-accent) 34%, transparent); }
body.karaoke-mode .karaoke-summary { border-color: var(--app-line); background: color-mix(in srgb, var(--app-panel) 96%, transparent); color: var(--app-text); }

/* Timed lyrics follow the audio clock directly. Color is the only progress cue. */
:is(.lyrics-line, .player-lyrics-line, .fullscreen-lyrics p) .lyric-char {
  transform: none !important;
  transition: none !important;
  text-shadow: none !important;
}
:is(.lyrics-line, .player-lyrics-line, .fullscreen-lyrics p).active .lyric-char { color: var(--app-muted); font-weight: 500; }
:is(.lyrics-line, .player-lyrics-line, .fullscreen-lyrics p).active .lyric-char.played { color: var(--app-accent); font-weight: 720; }
:is(.lyrics-line, .player-lyrics-line, .fullscreen-lyrics p).active .lyric-char.singing { color: var(--app-warm); font-weight: 800; }
:is(.lyrics-line, .player-lyrics-line, .fullscreen-lyrics p):not(.active) .lyric-char.played { color: var(--app-faint); font-weight: 500; }

/* Five-module desktop workspace. Layout and components consume semantic theme tokens only. */
body:not(.karaoke-mode) { overflow-x: hidden; }
.app-shell { width: 100%; min-width: 0; }
.sidebar { width: 252px; padding: 18px 14px 14px; overflow-x: hidden; overflow-y: auto; }
.brand { margin: 0 8px 18px; letter-spacing: 0; }
.brand-mark { flex: 0 0 28px; width: 28px; height: 28px; color: var(--app-accent-ink); }
.brand small { margin-left: auto; color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.workspace-switcher { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; width: 100%; min-height: 58px; height: auto; gap: 3px 9px; margin: 0 0 18px; padding: 9px 11px; background: var(--app-panel); color: var(--app-text); text-align: left; }
.workspace-switcher .status-dot { grid-row: 1 / 3; align-self: center; }
.workspace-switcher > span:not(.status-dot) { color: var(--app-faint); font-size: 9px; }
.workspace-switcher strong { min-width: 0; overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher i { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; }
.sidebar { position: relative; }
.project-browser { display: none; }
.sidebar.project-picker-open .workspace-switcher { border-color: var(--button-accent-border); box-shadow: 0 0 0 2px var(--app-accent-soft); }
.sidebar.project-picker-open .workspace-switcher i { transform: rotate(180deg); }
.sidebar.project-picker-open .project-browser { position: absolute; z-index: 40; top: 112px; right: 12px; left: 12px; display: block; margin: 0; padding: 12px; border: 1px solid var(--button-accent-border); border-radius: 7px; background: var(--app-panel); box-shadow: 0 16px 38px color-mix(in srgb, var(--app-shadow) 72%, transparent); }
.sidebar.project-picker-open .project-list { max-height: min(330px, calc(100vh - 230px)); overflow: auto; }
.nav-section-title { margin: 0 10px 8px; letter-spacing: .08em; }
.module-nav { display: grid; gap: 4px; }
.module-nav .module-nav-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); min-height: 58px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; font-weight: 400; }
.module-nav .module-nav-item:hover { background: var(--workspace-nav-hover); }
.module-nav .module-nav-item.active { border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); background: var(--workspace-nav-active); }
.module-index { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.module-nav-item.active .module-index { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.module-nav-item > span:last-child { display: grid; min-width: 0; gap: 3px; }
.module-nav-item strong { color: var(--app-text); font-size: 12px; font-weight: 700; }
.module-nav-item small { overflow: hidden; color: var(--app-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.library-section-title { margin-top: 20px; }
.library-nav { display: grid; gap: 2px; }
.library-nav .nav-item { min-height: 36px; padding-block: 0; }
.project-browser { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--app-line); }
.project-list { min-height: 0; max-height: 132px; }
.sidebar-settings { flex: 0 0 auto; }
.main-content { min-width: 0; padding: 0 32px 56px; overflow-x: hidden; background: var(--app-bg); }
.topbar { height: 62px; min-width: 0; }
.breadcrumbs { min-width: 0; }
.breadcrumbs strong { overflow: hidden; max-width: 240px; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { align-items: center; flex: 0 0 auto; }
.project-header, .workflow-strip, .layout-focus-tabs { display: none !important; }
.workspace-context { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto; min-height: 128px; align-items: center; gap: 26px; border-bottom: 1px solid var(--workspace-context-line); background: var(--workspace-context-bg); margin: 0 -32px 24px; padding: 22px 32px; }
.workspace-context-copy { min-width: 0; }
.workspace-context h1 { margin: 5px 0 6px; color: var(--app-text); font-size: 24px; letter-spacing: 0; }
.workspace-context p { max-width: 620px; margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.65; }
.workspace-context-route { display: flex; align-items: center; gap: 8px; color: var(--app-faint); font-size: 10px; white-space: nowrap; }
.workspace-context-route span { padding: 6px 8px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--workspace-step-bg); }
.workspace-context-route span.active { border-color: color-mix(in srgb, var(--app-accent) 50%, var(--app-line)); color: var(--app-accent); }
.workspace-context-route i { color: var(--app-faint); font-style: normal; }
.workspace-primary-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); border-radius: 6px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.workspace-primary-action:hover { filter: brightness(1.04); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 400px); width: 100%; max-width: none; gap: 24px; }
.editor-column { width: auto; min-width: 0; padding: 0; }
.tool-column { display: block; min-width: 0; padding: 0; }
.tool-panel { width: 100%; min-width: 0; margin: 0 0 14px; }
.resize-handle { display: none !important; }
.editor-column > .section-head { margin-top: 0; margin-bottom: 14px; }
.editor-column > .section-head h2 { font-size: 20px; letter-spacing: 0; }
.ai-tools-panel { margin-bottom: 26px; }
.delivery-workspace { display: none; }
.delivery-summary { padding: 10px 0 22px; border-bottom: 1px solid var(--app-line); }
.delivery-summary h2 { margin: 7px 0 6px; color: var(--app-text); font-size: 20px; letter-spacing: 0; }
.delivery-summary p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.7; }
.delivery-steps { display: grid; gap: 10px; margin-top: 18px; }
.delivery-steps button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 72px; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--workspace-step-line); border-radius: 7px; background: var(--app-panel); color: var(--app-text); text-align: left; }
.delivery-steps button:hover { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: var(--workspace-step-hover); }
.delivery-steps button > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; background: var(--app-accent-soft); color: var(--app-accent); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.delivery-steps button strong { font-size: 13px; }
.delivery-steps button small { color: var(--app-muted); font-size: 10px; }
.delivery-checklist { display: grid; gap: 8px; margin: 15px 0; }
.delivery-checklist span { position: relative; padding-left: 17px; color: var(--app-muted); font-size: 11px; }
.delivery-checklist span::before { position: absolute; left: 0; content: '✓'; color: var(--app-accent); }
body[data-workspace-module="creation"] :is(.audio-section-head, #audioList, .delivery-workspace, .folder-panel, .version-panel, .delivery-inspector) { display: none; }
body[data-workspace-module="creation"] .audio-pagination { display: none; }
body[data-workspace-module="assets"] :is(#aiToolsPanel, .lyrics-section-head, .lyrics-card, .delivery-workspace, .suno-panel, .creation-notes-panel, .creation-record-panel, .delivery-inspector) { display: none; }
body[data-workspace-module="assets"] :is(.audio-section-head, #audioList, .version-panel) { display: block; }
body[data-workspace-module="assets"] .folder-panel { display: none; }
body[data-workspace-module="delivery"] :is(#aiToolsPanel, .lyrics-section-head, .lyrics-card, .audio-section-head, #audioList, .suno-panel, .creation-notes-panel, .creation-record-panel, .folder-panel, .version-panel) { display: none; }
body[data-workspace-module="delivery"] .audio-pagination { display: none; }
body[data-workspace-module="delivery"] :is(.delivery-workspace, .delivery-inspector) { display: block; }
body.practice-view-open .workspace-context,
body.separation-view-open .workspace-context { display: none; }
.module-nav-item, .workspace-context, .workspace-primary-action, .delivery-steps button, .tool-panel, .audio-row { writing-mode: horizontal-tb; }
.module-nav-item *, .workspace-context *, .delivery-steps button * { writing-mode: horizontal-tb; word-break: normal; }
.version-panel .version-asset-row { grid-template-columns: minmax(0, 1fr) 72px 64px 52px; }
.version-panel .stem-group-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.version-panel .stem-group-toggle { width: 100%; min-width: 0; white-space: normal; }
.version-panel .stem-group-actions { width: 100%; flex-wrap: wrap; }
.version-panel .stem-asset-row { display: flex; align-items: center; flex-wrap: wrap; }
.version-panel .stem-asset-row .version-file { flex: 1 1 100%; }

body[data-workspace-module="assets"] .content-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); align-items: start; }
body[data-workspace-module="assets"] #audioList { display: grid; gap: 8px; }
.asset-folder-hint { max-width: 720px; margin: 7px 0 0; overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-change-project { min-height: 38px; white-space: nowrap; }
.asset-version-folder { display: grid; gap: 8px; padding: 14px 0 18px; border-top: 1px solid var(--app-line); }
.asset-version-folder:first-child { padding-top: 0; border-top: 0; }
.asset-version-folder > header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; }
.asset-version-folder-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel-2); color: var(--app-accent); font: 600 10px 'DM Mono', ui-monospace, monospace; }
.asset-version-folder > header > span:nth-child(2) { min-width: 0; }
.asset-version-folder > header strong, .asset-version-folder > header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-version-folder > header strong { color: var(--app-text); font-size: 13px; }
.asset-version-folder > header small { margin-top: 4px; color: var(--app-faint); font-size: 9px; }
.asset-version-folder > header em { padding: 4px 6px; border: 1px solid var(--app-line); border-radius: 4px; color: var(--app-muted); font: 500 8px 'DM Mono', ui-monospace, monospace; font-style: normal; }
.asset-version-sources { display: grid; gap: 7px; }
.asset-recording-folder { margin-left: 48px; border-top: 1px solid var(--app-line); }
.asset-recording-folder > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; min-height: 38px; align-items: center; gap: 8px; color: var(--app-muted); cursor: pointer; font-size: 10px; list-style: none; }
.asset-recording-folder > summary::-webkit-details-marker { display: none; }
.asset-recording-folder > summary strong { color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; }
.asset-recording-folder > summary i { color: var(--app-faint); font-style: normal; transition: transform 150ms ease; }
.asset-recording-folder[open] > summary i { transform: rotate(180deg); }
.asset-recording-folder > div { display: grid; gap: 6px; padding-bottom: 4px; }
.asset-recording-row { min-height: 64px !important; padding-block: 8px !important; background: var(--app-panel); }
.asset-recording-row .waveform { display: none; }
.audio-empty.compact { padding: 16px; }
body[data-workspace-module="assets"] .audio-row { min-height: 88px; margin: 0; outline: none; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
body[data-workspace-module="assets"] .audio-row:hover { border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); background: var(--state-hover); }
body[data-workspace-module="assets"] .audio-row.active { border-color: var(--button-accent-border); background: var(--state-selected); box-shadow: inset 3px 0 0 var(--app-accent); }
body[data-workspace-module="assets"] .audio-row:focus-visible { box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-accent); }
.asset-inspector-panel { padding: 0 0 0 22px; border: 0; border-left: 1px solid var(--app-line); border-radius: 0; background: transparent; box-shadow: none; }
.asset-inspector-summary, .asset-inspector-section { padding: 0 0 20px; border-bottom: 1px solid var(--app-line); }
.asset-inspector-section { padding-top: 20px; }
.asset-inspector-title, .asset-inspector-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.asset-inspector-title h2 { margin: 6px 0 5px; color: var(--app-text); font-size: 21px; letter-spacing: 0; }
.asset-inspector-title p { max-width: 310px; margin: 0; overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-readiness { flex: 0 0 auto; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); border-radius: 5px; background: var(--status-warning-bg); color: var(--status-warning-text); font: 600 9px 'DM Mono', ui-monospace, monospace; }
.asset-readiness.complete { border-color: var(--button-accent-border); background: var(--status-success-bg); color: var(--status-success-text); }
.asset-parameter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 17px 0 0; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.asset-parameter-grid > div { min-width: 0; padding: 10px 8px; border-right: 1px solid var(--app-line); }
.asset-parameter-grid > div:first-child { padding-left: 0; }
.asset-parameter-grid > div:last-child { border-right: 0; }
.asset-parameter-grid dt { color: var(--app-faint); font-size: 9px; }
.asset-parameter-grid dd { margin: 5px 0 0; overflow: hidden; color: var(--app-text); font: 600 10px 'DM Mono', ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.asset-path-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; margin-top: 11px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel); }
.asset-path-row span, .asset-path-row small, .asset-path-row strong { display: block; min-width: 0; }
.asset-path-row small { color: var(--app-faint); font-size: 9px; }
.asset-path-row strong { margin-top: 4px; overflow: hidden; color: var(--app-muted); font: 9px 'DM Mono', ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.asset-path-row button, .asset-element-row button { width: 32px; height: 32px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-accent); }
.asset-inspector-section-head { align-items: center; margin-bottom: 11px; }
.asset-inspector-section-head h3 { margin: 5px 0 0; color: var(--app-text); font-size: 14px; letter-spacing: 0; }
.asset-complete-action { min-height: 32px; padding: 0 10px; border: 1px solid var(--button-accent-border); border-radius: 5px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 10px; font-weight: 700; }
.asset-check-list { display: grid; border-top: 1px solid var(--app-line); }
.asset-check-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 70px; min-height: 54px; align-items: center; gap: 9px; border-bottom: 1px solid var(--app-line); }
.asset-check-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--app-warm); }
.asset-check-row.ready .asset-check-indicator { background: var(--app-accent); }
.asset-check-row.stale .asset-check-indicator { background: var(--app-secondary); }
.asset-check-row > span:nth-child(2) { min-width: 0; }
.asset-check-row strong, .asset-check-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-check-row strong { color: var(--app-text); font-size: 11px; }
.asset-check-row small { margin-top: 4px; color: var(--app-faint); font-size: 9px; }
.asset-check-row em { color: var(--status-warning-text); font: 600 9px 'DM Mono', ui-monospace, monospace; font-style: normal; }
.asset-check-row.ready em { color: var(--status-success-text); }
.asset-check-row.stale em { color: var(--status-info-text); }
.asset-check-row > button { min-height: 29px; padding: 0 7px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 9px; }
.asset-check-row > button:hover, .asset-path-row button:hover, .asset-element-row button:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.asset-track-count { color: var(--app-faint); font: 9px 'DM Mono', ui-monospace, monospace; }
.asset-element-list { display: grid; gap: 5px; }
.asset-element-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 32px; min-height: 47px; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel); }
.asset-element-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 4px; background: var(--app-panel-2); color: var(--app-accent); }
.asset-element-row > span:nth-child(2) { min-width: 0; }
.asset-element-row strong, .asset-element-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-element-row strong { color: var(--app-text); font-size: 10px; }
.asset-element-row small { margin-top: 3px; color: var(--app-faint); font-size: 9px; }
.asset-element-row em { color: var(--app-muted); font: 8px 'DM Mono', ui-monospace, monospace; font-style: normal; }
.asset-import-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.asset-import-actions button { min-height: 33px; border: 1px dashed var(--app-line); border-radius: 5px; background: transparent; color: var(--app-muted); font-size: 9px; }
.asset-import-actions button:hover { border-color: var(--button-accent-border); background: var(--state-hover); color: var(--app-accent); }
.asset-version-management { margin-top: 18px; }
.asset-version-management > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 2px; border-bottom: 1px solid var(--app-line); color: var(--app-text); cursor: pointer; list-style: none; }
.asset-version-management > summary::-webkit-details-marker { display: none; }
.asset-version-management > summary span:first-child { display: grid; gap: 3px; }
.asset-version-management > summary strong { font-size: 11px; }
.asset-version-management > summary small { color: var(--app-faint); font-size: 9px; }
.asset-version-management[open] > summary > span:last-child { transform: rotate(180deg); }
.asset-version-management-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; color: var(--app-faint); font-size: 9px; }
.asset-version-editor { margin: 0; border-radius: 6px; }
.asset-inspector-empty { display: grid; gap: 6px; padding: 30px 12px; border: 1px dashed var(--app-line); color: var(--app-muted); text-align: center; }
.asset-inspector-empty span { color: var(--app-faint); font-size: 10px; }
.asset-inspector-empty.compact { padding: 16px 8px; }

@media (max-width: 1220px) {
  .sidebar { width: 228px; }
  .main-content { padding-inline: 24px; }
  .workspace-context { grid-template-columns: minmax(260px, 1fr) auto; margin-inline: -24px; padding-inline: 24px; }
  .workspace-context-route { display: none; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tool-panel { margin: 0; }
  .version-panel { grid-column: 1 / -1; }
  body[data-workspace-module="assets"] .content-grid { grid-template-columns: minmax(0, 1fr); }
  .asset-inspector-panel { padding: 20px 0 0; border-top: 1px solid var(--app-line); border-left: 0; }
}

@media (max-width: 820px) {
  .sidebar { width: 206px; padding-inline: 10px; }
  .module-nav .module-nav-item { grid-template-columns: 25px minmax(0, 1fr); gap: 7px; padding-inline: 7px; }
  .module-index { width: 25px; height: 25px; }
  .main-content { padding-inline: 18px; }
  .workspace-context { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-inline: -18px; padding-inline: 18px; }
  .workspace-primary-action { justify-self: start; }
  .tool-column { grid-template-columns: minmax(0, 1fr); }
  .delivery-steps button { grid-template-columns: 34px minmax(0, 1fr); }
  .delivery-steps button small { grid-column: 2; }
  .audio-library-tools { width: 100%; }
  .asset-change-project { flex: 0 0 auto; }
  .asset-recording-folder { margin-left: 0; }
}

/* Current-song recording library and progressively collapsible asset columns. */
.asset-column-toggles { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.asset-column-toggles button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 11px; }
.asset-column-toggles button:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
body[data-workspace-module="assets"].asset-left-column-collapsed .sidebar { display: none; }
body[data-workspace-module="assets"].asset-right-column-collapsed .tool-column { display: none; }
body[data-workspace-module="assets"].asset-right-column-collapsed .content-grid { grid-template-columns: minmax(0, 1fr); }
.practice-recording-library { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--app-line); }
.practice-recording-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.practice-recording-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.practice-recording-accompaniment { display: inline-flex; height: 30px; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 10px; }
.practice-recording-accompaniment i { position: relative; width: 27px; height: 15px; border-radius: 8px; background: var(--app-line); transition: background-color 150ms ease; }
.practice-recording-accompaniment b { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--app-panel); transition: transform 150ms ease, background-color 150ms ease; }
.practice-recording-accompaniment[aria-checked="true"] { border-color: var(--button-accent-border); color: var(--app-accent); }
.practice-recording-accompaniment[aria-checked="true"] i { background: var(--app-accent); }
.practice-recording-accompaniment[aria-checked="true"] b { transform: translateX(12px); background: var(--app-bg); }
.practice-recording-head h2 { margin: 5px 0 5px; color: var(--app-text); font-size: 18px; letter-spacing: 0; }
.practice-recording-head p { max-width: 720px; margin: 0; color: var(--app-muted); font-size: 10px; line-height: 1.6; }
.practice-recording-count { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-panel-2); color: var(--app-muted); font: 600 9px 'DM Mono', ui-monospace, monospace; }
.practice-recording-list { display: grid; border-top: 1px solid var(--app-line); }
.practice-recording-row { display: grid; grid-template-columns: 30px minmax(160px, 1fr) 112px 72px auto; min-height: 68px; align-items: center; gap: 12px; border-bottom: 1px solid var(--app-line); transition: background-color 150ms ease, box-shadow 150ms ease; }
.practice-recording-row:hover { background: var(--state-hover); }
.practice-recording-row.now-playing { background: var(--state-selected); box-shadow: inset 3px 0 0 var(--app-accent); }
.practice-recording-index { color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; text-align: center; }
.practice-recording-main, .practice-recording-range, .practice-recording-duration { display: grid; min-width: 0; gap: 4px; }
.practice-recording-main strong, .practice-recording-range strong, .practice-recording-duration strong { overflow: hidden; color: var(--app-text); text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-main strong { font-size: 11px; }
.practice-recording-range strong, .practice-recording-duration strong { font: 600 10px 'DM Mono', ui-monospace, monospace; }
.practice-recording-main small, .practice-recording-range small, .practice-recording-duration small { overflow: hidden; color: var(--app-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.practice-recording-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.practice-recording-actions button { display: inline-flex; min-width: 58px; height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 10px; }
.practice-recording-actions button:hover:not(:disabled), .practice-recording-actions button.playing { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.practice-recording-actions button:disabled { cursor: not-allowed; opacity: .42; }
.practice-recording-actions button.danger { min-width: 34px; width: 34px; padding: 0; border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); font-size: 16px; }
.practice-recording-empty { display: grid; min-height: 118px; place-content: center; gap: 6px; color: var(--app-muted); text-align: center; }
.practice-recording-empty strong { color: var(--app-text); font-size: 12px; }
.practice-recording-empty span { color: var(--app-faint); font-size: 10px; }
.practice-recording-pagination { display: flex; min-height: 52px; align-items: center; justify-content: flex-end; gap: 5px; }
.practice-recording-pagination button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-muted); font: 600 10px 'DM Mono', ui-monospace, monospace; }
.practice-recording-pagination button:hover:not(:disabled), .practice-recording-pagination button.active { border-color: var(--button-accent-border); background: var(--state-selected); color: var(--app-accent); }
.practice-recording-pagination button:disabled { cursor: not-allowed; opacity: .42; }
.practice-recording-pagination span { margin-left: 5px; color: var(--app-faint); font: 9px 'DM Mono', ui-monospace, monospace; }

@media (max-width: 1600px) {
  .practice-recording-row { grid-template-columns: 28px minmax(130px, 1fr) 102px 64px auto; gap: 8px; }
  .practice-recording-actions button { min-width: 34px; width: 34px; padding: 0; }
  .practice-recording-actions button span { display: none; }
}

@media (max-width: 980px) {
  .audio-library-tools { flex-wrap: wrap; justify-content: flex-end; }
  .practice-recording-row { grid-template-columns: 28px minmax(140px, 1fr) 100px auto; }
  .practice-recording-duration { display: none; }
}

@media (max-width: 700px) {
  .asset-column-toggles { display: none; }
  body[data-workspace-module="assets"].asset-left-column-collapsed .sidebar { display: none; }
  .practice-recording-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding-block: 9px; }
  .practice-recording-range { grid-column: 2; }
  .practice-recording-actions { grid-column: 3; grid-row: 1 / span 2; }
  .practice-recording-actions button { min-width: 34px; width: 34px; padding: 0; }
  .practice-recording-actions button span { display: none; }
}

/* Mobile playback keeps navigation out of the lyric reading surface. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  .mobile-shell > .mobile-tabs { position: static; top: auto; box-shadow: 0 1px 0 var(--app-line); backdrop-filter: none; }
  body.has-active-song .mobile-core-brief { display: none; }
  .now-playing.active { position: relative; }
  .now-playing.active .player-page-head { position: absolute; z-index: 2; top: 2px; right: 0; display: block; width: auto; min-height: 0; padding: 0; }
  .now-playing.active .player-page-head .eyebrow { display: none; }
  .now-playing.active .now-copy { padding-right: 110px; }
  .now-playing.active .queue-open { min-height: 34px; }
  .now-playing.controls-auto-hidden { row-gap: 6px; }
  .now-playing.controls-auto-hidden .playback-controls { display: flex; justify-content: flex-end; }
  .now-playing.controls-auto-hidden .playback-controls .play-mode:not(.source-toggle) { display: none; }
  .player-lyrics-section { position: relative; top: auto; padding-bottom: 0; }
  .player-lyrics { height: clamp(440px, 68dvh, 680px); scroll-padding-top: 12px; scroll-padding-bottom: 12px; }
}

@media (max-width: 700px) {
  .theme-trigger { width: 38px; padding: 0; justify-content: center; }
  .theme-trigger > [data-theme-current], .theme-trigger > b { display: none; }
  .theme-menu { position: fixed; top: max(68px, env(safe-area-inset-top)); right: 14px; width: min(210px, calc(100vw - 28px)); }
  .settings-theme-row .theme-trigger { width: auto; min-width: 132px; padding: 0 10px; }
  .settings-theme-row .theme-trigger > [data-theme-current], .settings-theme-row .theme-trigger > b { display: inline; }
  .ai-structure-detail:has(.ai-segment-controls) { padding: 12px; }
  .ai-segment-controls-head { align-items: flex-start; }
  .ai-segment-controls-head > div:last-child { align-items: flex-end; flex-direction: column; gap: 5px; }
  .ai-segment-flow { grid-template-columns: 1fr; }
  .workflow-strip { grid-template-columns: 116px repeat(5, minmax(104px, 1fr)); margin: 10px 0 16px; }
  .lyrics-toolbar { display: flex; align-items: center; flex-wrap: wrap; }
  .lyrics-workspace-status { order: -2; min-width: 96px; }
  .lyrics-view-controls { order: -1; flex: 1 1 auto; }
  .lyrics-version-tools { width: 100%; overflow-x: auto; }
  #lyricsContent.read-mode { min-height: 460px; max-height: none; }
  .lyrics-reader { padding: 22px 14px 72px; }
  #lyricsContent.read-mode .lyric-display { grid-template-columns: 28px minmax(0, 1fr); gap: 0 8px; padding-inline: 4px; }
  #lyricsContent.read-mode.timed-mode .lyric-display { grid-template-columns: 68px minmax(0, 1fr); }
  #lyricsContent.read-mode .lyric-display-zh { font-size: 16px; }
  #lyricsContent:not(.read-mode):not(.compare-mode) { max-height: none; padding: 8px 12px 56px; }
  #lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block > div:last-child { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-switcher * { transition: none !important; }
}