/* Token registry lives in ./global-theme-tokens.css so theme + component
 * shells can also pull them directly. The alias layer lives in
 * ./global-theme-aliases.css for legacy --bg/--surface/--green references.
 * Keep this file as the assembled theme entrypoint: tokens + aliases +
 * theme variants + component-level overrides. */
@import url("./global-theme-tokens.css");
@import url("./global-theme-aliases.css");
@import url("./global-theme-palettes.css");


/* Keep a theme-only ink snapshot so user-authored interface text colors can
 * be removed without losing the active palette's original text hierarchy. */
html[data-theme] {
  --app-lyric-upcoming: var(--app-text);
  --app-lyric-current: var(--app-accent-readable);
  --app-lyric-played: var(--app-muted);
  --app-lyric-shadow: var(--app-shadow);
  --app-lyric-outline: var(--app-bg);
  /* One glyph glow follows its authored current-state color in every theme. */
  --practice-lyric-active-glow: 0 0 .06em currentColor,
    0 0 .24em color-mix(in srgb, currentColor 72%, transparent),
    0 0 .52em color-mix(in srgb, currentColor 38%, transparent);
  --app-theme-text: var(--app-text);
  --app-theme-muted: var(--app-muted);
  --app-theme-faint: var(--app-faint);
  --app-theme-accent-readable: var(--app-accent-readable);
}

/* Product-owned promotion surfaces.  The ad client only renders internal
 * campaigns, feature notices, offers, and account reminders.  Keep the
 * component palette semantic so the same card remains readable in every
 * supported theme and on the admin preview. */
.songrealm-ad-host[hidden] { display: none !important; }
.songrealm-ad-host { min-width: 0; }
.account-ad-slot.songrealm-ad-host { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; border: 1px solid var(--app-line); border-radius: var(--panel-radius); background: var(--app-panel-2); color: var(--app-text); overflow: hidden; text-align: left; }
.account-ad-slot.songrealm-ad-host:not(.has-ad) { display: none; }
.app-ad-host-account.songrealm-ad-host { margin: 8px 0; }
.songrealm-ad-card { display: grid; min-width: 0; gap: 8px; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: var(--panel-radius); background: var(--app-panel-2); color: var(--app-text); text-decoration: none; text-align: left; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.songrealm-ad-card:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel-2)); transform: translateY(-1px); }
.songrealm-ad-card:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.songrealm-ad-card img { display: block; width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--control-radius); background: var(--app-bg); }
.songrealm-ad-card strong { min-width: 0; color: var(--app-text); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.songrealm-ad-card span { min-width: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.songrealm-ad-card em { color: var(--app-accent-readable); font-size: 12px; font-style: normal; font-weight: 800; }
.songrealm-ad-kicker { color: var(--app-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.songrealm-ad-card--info { border-color: color-mix(in srgb, var(--app-secondary) 42%, var(--app-line)); background: var(--status-info-bg); }
.songrealm-ad-card--success { border-color: var(--status-success-border); background: var(--status-success-bg); }
.songrealm-ad-card--warning { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.songrealm-ad-card--neutral { background: var(--app-panel-2); }
.account-ad-slot.songrealm-ad-host > .songrealm-ad-card { border: 0; border-radius: 0; }
.account-ad-slot.songrealm-ad-host > .account-ad-label { padding: 12px 16px 0; color: var(--app-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-ad-preview-card { width: min(100%, 430px); }
@media (max-width: 720px) {
  .songrealm-ad-card { padding: 12px 14px; }
  .account-ad-slot.songrealm-ad-host { border-radius: var(--control-radius); }
}

/* Theme palettes moved to global-theme-palettes.css (loaded above). */

/* Visual composition layer. Palette colors stay independent from surface,
 * icon, and depth choices so one palette can support several experiences. */
html[data-ui-surface="flat"] {
  --panel-radius: 8px;
  --control-radius: 6px;
  --app-card-shadow: none;
  --app-card-surface: transparent;
  --app-control-surface: transparent;
  --app-style-canvas: var(--app-bg);
  --app-style-sidebar: var(--app-bg);
  --app-style-card-border: var(--app-line);
  --app-style-nav-active: transparent;
  --app-style-icon-bg: transparent;
  --app-style-icon-border: transparent;
  --app-style-icon-radius: 0;
  --app-style-icon-padding: 0;
  --app-style-icon-ink: var(--app-faint);
  --app-style-card-offset: 0px;
  --app-icon-shadow: none;
  --app-icon-filter: none;
  --app-icon-scale: 1;
  --app-icon-color: var(--app-muted);
  --app-dialog-radius: 10px;
  --app-dialog-shadow: 0 16px 32px color-mix(in srgb, var(--app-shadow) 72%, transparent);
  --app-popover-shadow: 0 14px 32px color-mix(in srgb, var(--app-shadow) 68%, transparent);
  --app-3d-roughness-scale: 1.18;
  --app-3d-metalness-scale: .72;
}
html[data-ui-surface="soft"] {
  --panel-radius: 12px;
  --control-radius: 8px;
  --app-card-shadow: inset 0 1px 0 var(--app-highlight), 0 8px 24px color-mix(in srgb, var(--app-shadow) 42%, transparent);
  --app-card-surface: color-mix(in srgb, var(--app-panel) 94%, var(--app-panel-2));
  --app-control-surface: color-mix(in srgb, var(--app-panel-2) 78%, var(--app-panel));
  --app-style-canvas: color-mix(in srgb, var(--app-bg) 92%, var(--app-panel));
  --app-style-sidebar: var(--app-panel-2);
  --app-style-card-border: color-mix(in srgb, var(--app-line) 86%, var(--app-secondary));
  --app-style-nav-active: var(--app-accent-soft);
  --app-style-icon-bg: var(--app-accent-soft);
  --app-style-icon-border: color-mix(in srgb, var(--app-accent) 24%, var(--app-line));
  --app-style-icon-radius: 999px;
  --app-style-icon-padding: 4px;
  --app-style-icon-ink: var(--app-accent);
  --app-style-card-offset: 0px;
  --app-icon-shadow: 0 2px 8px color-mix(in srgb, var(--app-shadow) 48%, transparent);
  --app-icon-filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--app-shadow) 48%, transparent));
  --app-icon-scale: 1.03;
  --app-icon-color: color-mix(in srgb, var(--app-muted) 72%, var(--app-secondary));
  --app-dialog-radius: 14px;
  --app-dialog-shadow: 0 24px 54px color-mix(in srgb, var(--app-shadow) 82%, transparent);
  --app-popover-shadow: 0 18px 42px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  --app-3d-roughness-scale: 1;
  --app-3d-metalness-scale: .92;
}
html[data-ui-surface="elevated"] {
  --panel-radius: 14px;
  --control-radius: 9px;
  --app-card-shadow: inset 0 1px 0 var(--app-highlight), 0 14px 32px color-mix(in srgb, var(--app-shadow) 58%, transparent);
  --app-card-surface: color-mix(in srgb, var(--app-elevated) 82%, var(--app-accent-soft));
  --app-control-surface: color-mix(in srgb, var(--app-elevated) 74%, var(--app-panel-2));
  --app-style-canvas: color-mix(in srgb, var(--app-bg) 78%, var(--app-panel-2));
  --app-style-sidebar: var(--app-elevated);
  --app-style-card-border: color-mix(in srgb, var(--app-accent) 34%, var(--app-line));
  --app-style-nav-active: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-elevated));
  --app-style-icon-bg: linear-gradient(145deg, var(--app-accent), var(--app-secondary));
  --app-style-icon-border: var(--app-highlight);
  --app-style-icon-radius: var(--control-radius);
  --app-style-icon-padding: 5px;
  --app-style-icon-ink: var(--app-accent-ink);
  --app-style-card-offset: -2px;
  --app-icon-shadow: 0 3px 12px color-mix(in srgb, var(--app-shadow) 82%, transparent);
  --app-icon-filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--app-shadow) 82%, transparent));
  --app-icon-scale: 1.08;
  --app-icon-color: var(--app-secondary);
  --app-dialog-radius: 16px;
  --app-dialog-shadow: 0 30px 72px color-mix(in srgb, var(--app-shadow) 94%, transparent);
  --app-popover-shadow: 0 24px 56px color-mix(in srgb, var(--app-shadow) 88%, transparent);
  --app-3d-roughness-scale: .78;
  --app-3d-metalness-scale: 1.32;
}
html[data-ui-surface="hard"] {
  --panel-radius: 5px;
  --control-radius: 4px;
  --app-card-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 68%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--app-shadow) 84%, transparent), 0 7px 14px color-mix(in srgb, var(--app-shadow) 76%, transparent);
  --app-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 64%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--app-shadow) 86%, transparent), 0 4px 0 color-mix(in srgb, var(--app-shadow) 70%, transparent), 0 10px 16px color-mix(in srgb, var(--app-shadow) 48%, transparent);
  --app-card-surface: color-mix(in srgb, var(--app-elevated) 92%, var(--app-panel));
  --app-control-surface: color-mix(in srgb, var(--app-elevated) 78%, var(--app-panel-2));
  --app-style-canvas: linear-gradient(135deg, color-mix(in srgb, var(--app-secondary) 7%, var(--app-bg)), var(--app-bg));
  --app-style-sidebar: color-mix(in srgb, var(--app-elevated) 92%, var(--app-panel));
  --app-style-card-border: color-mix(in srgb, var(--app-secondary) 42%, var(--app-line));
  --app-style-nav-active: color-mix(in srgb, var(--app-accent-soft) 88%, var(--app-elevated));
  --app-style-icon-bg: color-mix(in srgb, var(--app-elevated) 82%, var(--app-accent-soft));
  --app-style-icon-border: color-mix(in srgb, var(--app-highlight) 62%, var(--app-line));
  --app-style-icon-radius: 3px;
  --app-style-icon-padding: 4px;
  --app-style-icon-ink: var(--app-accent);
  --app-style-card-offset: -1px;
  --app-icon-shadow: 0 2px 0 color-mix(in srgb, var(--app-shadow) 86%, transparent), 0 5px 9px color-mix(in srgb, var(--app-shadow) 64%, transparent);
  --app-icon-filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--app-shadow) 72%, transparent));
  --app-icon-scale: 1.03;
  --app-icon-color: var(--app-secondary);
  --app-dialog-radius: 8px;
  --app-dialog-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 60%, transparent), 0 4px 0 color-mix(in srgb, var(--app-shadow) 78%, transparent), 0 24px 54px color-mix(in srgb, var(--app-shadow) 92%, transparent);
  --app-popover-shadow: 0 4px 0 color-mix(in srgb, var(--app-shadow) 70%, transparent), 0 18px 38px color-mix(in srgb, var(--app-shadow) 84%, transparent);
  --app-3d-roughness-scale: .88;
  --app-3d-metalness-scale: 1.2;
}
html[data-ui-surface="immersive"] {
  --panel-radius: 18px;
  --control-radius: 12px;
  --app-card-shadow: inset 0 1px 0 var(--app-highlight), inset 0 -1px 0 color-mix(in srgb, var(--app-shadow) 72%, transparent), 0 3px 0 color-mix(in srgb, var(--app-shadow) 70%, transparent), 0 20px 38px color-mix(in srgb, var(--app-shadow) 76%, transparent), 0 34px 68px color-mix(in srgb, var(--app-shadow) 48%, transparent);
  --app-control-shadow: inset 0 1px 0 var(--app-highlight), 0 3px 0 color-mix(in srgb, var(--app-shadow) 72%, transparent), 0 10px 18px color-mix(in srgb, var(--app-shadow) 56%, transparent);
  --app-card-surface: color-mix(in srgb, var(--app-elevated) 68%, var(--app-accent-soft));
  --app-control-surface: color-mix(in srgb, var(--app-elevated) 66%, var(--app-panel-2));
  --app-style-canvas: radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--app-secondary) 16%, transparent), transparent 42%), var(--app-bg);
  --app-style-sidebar: color-mix(in srgb, var(--app-elevated) 92%, var(--app-accent-soft));
  --app-style-card-border: color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  --app-style-nav-active: color-mix(in srgb, var(--app-accent-soft) 82%, var(--app-elevated));
  --app-style-icon-bg: linear-gradient(145deg, var(--app-accent), var(--app-secondary));
  --app-style-icon-border: var(--app-highlight);
  --app-style-icon-radius: var(--control-radius);
  --app-style-icon-padding: 6px;
  --app-style-icon-ink: var(--app-accent-ink);
  --app-style-card-offset: -4px;
  --app-icon-shadow: 0 4px 0 color-mix(in srgb, var(--app-shadow) 78%, transparent), 0 9px 15px color-mix(in srgb, var(--app-shadow) 62%, transparent);
  --app-icon-filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--app-shadow) 82%, transparent));
  --app-icon-scale: 1.14;
  --app-icon-color: var(--app-accent);
  --app-dialog-radius: 20px;
  --app-dialog-shadow: inset 0 1px 0 var(--app-highlight), 0 4px 0 color-mix(in srgb, var(--app-shadow) 72%, transparent), 0 36px 90px color-mix(in srgb, var(--app-shadow) 94%, transparent);
  --app-popover-shadow: 0 5px 0 color-mix(in srgb, var(--app-shadow) 74%, transparent), 0 26px 54px color-mix(in srgb, var(--app-shadow) 90%, transparent);
  --app-3d-roughness-scale: .58;
  --app-3d-metalness-scale: 1.5;
}
html[data-ui-surface="glass"] {
  --panel-radius: 22px;
  --control-radius: 12px;
  --app-card-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 72%, transparent), 0 18px 44px color-mix(in srgb, var(--app-shadow) 54%, transparent), 0 4px 14px color-mix(in srgb, var(--app-shadow) 36%, transparent);
  --app-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 72%, transparent), 0 8px 20px color-mix(in srgb, var(--app-shadow) 42%, transparent);
  --app-card-surface: color-mix(in srgb, var(--app-panel) 56%, transparent);
  --app-control-surface: color-mix(in srgb, var(--app-elevated) 48%, transparent);
  --app-style-canvas: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--app-secondary) 14%, transparent), transparent 42%), radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--app-accent) 12%, transparent), transparent 38%), var(--app-bg);
  --app-style-sidebar: color-mix(in srgb, var(--app-panel) 64%, transparent);
  --app-style-card-border: color-mix(in srgb, var(--app-highlight) 42%, var(--app-line));
  --app-style-nav-active: color-mix(in srgb, var(--app-accent-soft) 64%, transparent);
  --app-style-icon-bg: color-mix(in srgb, var(--app-panel) 48%, transparent);
  --app-style-icon-border: color-mix(in srgb, var(--app-highlight) 62%, var(--app-line));
  --app-style-icon-radius: 12px;
  --app-style-icon-padding: 5px;
  --app-style-icon-ink: var(--app-text);
  --app-style-card-offset: -1px;
  --app-icon-shadow: 0 3px 12px color-mix(in srgb, var(--app-shadow) 46%, transparent);
  --app-icon-filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--app-shadow) 46%, transparent));
  --app-icon-scale: 1.04;
  --app-icon-color: color-mix(in srgb, var(--app-text) 68%, var(--app-secondary));
  --app-dialog-radius: 24px;
  --app-dialog-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 72%, transparent), 0 28px 72px color-mix(in srgb, var(--app-shadow) 82%, transparent);
  --app-popover-shadow: 0 16px 42px color-mix(in srgb, var(--app-shadow) 72%, transparent), 0 4px 12px color-mix(in srgb, var(--app-shadow) 32%, transparent);
  --app-3d-roughness-scale: .82;
  --app-3d-metalness-scale: 1.08;
  --app-glass-blur: blur(18px) saturate(1.16);
  --app-glass-highlight: linear-gradient(135deg, color-mix(in srgb, var(--app-highlight) 42%, transparent), transparent 44%, color-mix(in srgb, var(--app-secondary) 10%, transparent));
}

/* Strength is a third composition axis: the palette and surface stay intact,
 * while the user decides how much edge, shadow, and icon contrast to reveal. */
html[data-ui-strength="soft"] {
  --app-style-border-color: color-mix(in srgb, var(--app-style-card-border) 58%, var(--app-line));
  --app-style-card-shadow: none;
  --app-style-control-shadow: none;
  --app-style-icon-filter: none;
}
html[data-ui-strength="balanced"] {
  --app-style-border-color: var(--app-style-card-border);
  --app-style-card-shadow: var(--app-card-shadow);
  --app-style-control-shadow: var(--app-control-shadow);
  --app-style-icon-filter: var(--app-icon-filter);
}
html[data-ui-strength="bold"] {
  --app-style-border-color: color-mix(in srgb, var(--app-style-card-border) 100%, var(--app-highlight));
  --app-style-card-shadow: var(--app-card-shadow), 0 0 0 1px color-mix(in srgb, var(--app-accent) 18%, transparent);
  --app-style-control-shadow: var(--app-control-shadow), 0 0 0 1px color-mix(in srgb, var(--app-accent) 22%, transparent);
  --app-style-icon-filter: var(--app-icon-filter) drop-shadow(0 0 6px color-mix(in srgb, var(--app-accent) 22%, transparent));
}

html[data-ui-interaction="quiet"] {
  --app-hover-transform: none;
  --app-hover-card-transform: translateY(var(--app-style-card-offset));
  --app-hover-shadow: none;
  --app-hover-filter: none;
  --app-hover-border: var(--app-accent);
  --app-hover-duration: 140ms;
}
html[data-ui-interaction="lift"] {
  --app-hover-transform: translateY(-4px) scale(1.012);
  --app-hover-card-transform: translateY(calc(var(--app-style-card-offset) - 4px)) scale(1.012);
  --app-hover-shadow: 0 5px 0 color-mix(in srgb, var(--app-shadow) 64%, transparent), 0 16px 30px color-mix(in srgb, var(--app-shadow) 72%, transparent);
  --app-hover-filter: brightness(1.04);
  --app-hover-border: color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  --app-hover-duration: 220ms;
}
html[data-ui-interaction="spotlight"] {
  --app-hover-transform: translateY(-2px) scale(1.01);
  --app-hover-card-transform: translateY(calc(var(--app-style-card-offset) - 2px)) scale(1.01);
  --app-hover-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 62%, transparent), 0 12px 28px color-mix(in srgb, var(--app-accent) 24%, var(--app-shadow));
  --app-hover-filter: brightness(1.08) saturate(1.12);
  --app-hover-border: color-mix(in srgb, var(--app-accent) 86%, var(--app-line));
  --app-hover-duration: 260ms;
}

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 {
  position: fixed;
  top: 50%;
  left: 50%;
  bottom: auto;
  z-index: var(--app-layer-toast);
  max-width: min(720px, calc(100vw - 32px));
  padding: 12px 18px;
  text-align: center;
  pointer-events: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  transform: translate(-50%, calc(-50% + 12px));
  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);
}
.toast.show { transform: translate(-50%, -50%); }
.toast.error { border-color: var(--status-danger-border); background: var(--status-danger-bg); color: var(--status-danger-text); }
.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); border-radius: var(--panel-radius); box-shadow: var(--app-card-shadow); }
.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); border-radius: var(--control-radius); }
.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); }
html { overflow-x: clip; accent-color: var(--app-accent); }
select {
  accent-color: var(--app-accent);
  color-scheme: inherit;
}
select option,
select optgroup {
  background-color: var(--app-panel);
  color: var(--app-text);
}

/* 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-switcher.open,
.ui-text-color-switcher.open { z-index: var(--app-layer-menu, 2147483599); }
.theme-trigger { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: var(--control-radius); 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; z-index: var(--app-layer-menu, 2147483599); display: none; width: 176px; padding: 6px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: color-mix(in srgb, var(--app-panel) 94%, transparent); box-shadow: var(--app-popover-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; }
.ui-text-color-switcher { position: relative; z-index: 40; flex: 0 0 auto; }
.ui-text-color-trigger { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: color-mix(in srgb, var(--app-panel) 80%, transparent); color: var(--app-muted); font: inherit; white-space: nowrap; }
.ui-text-color-trigger:hover, .ui-text-color-switcher.open .ui-text-color-trigger { border-color: color-mix(in srgb, var(--app-accent) 60%, var(--app-line)); color: var(--app-text); background: var(--app-panel-2); }
.ui-text-color-trigger b { color: var(--app-faint); font-size: 11px; font-weight: 500; }
.ui-text-color-trigger-letter { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-text); color: var(--app-panel); font: 700 12px/1 var(--font-family-base); }
html[data-ui-text-color="custom"] .ui-text-color-trigger-letter { background: var(--app-ui-text-color); }
.ui-text-color-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--app-layer-menu, 2147483599); display: none; width: 264px; gap: 12px; padding: 14px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: color-mix(in srgb, var(--app-panel) 94%, transparent); box-shadow: var(--app-popover-shadow); backdrop-filter: blur(18px); transform: translate(var(--ui-text-color-drag-x, 0px), var(--ui-text-color-drag-y, 0px)); }
.ui-text-color-switcher.open .ui-text-color-menu { display: grid; }
.ui-text-color-menu[hidden] { display: none; }
.ui-text-color-menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: grab; user-select: none; }
.ui-text-color-menu.is-dragging .ui-text-color-menu-head { cursor: grabbing; }
.ui-text-color-menu-head strong { color: var(--app-text); font-size: 13px; }
.ui-text-color-menu-head span { color: var(--app-accent); font: 500 12px/1 var(--font-family-mono); }
.ui-text-color-picker-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: 38px; color: var(--app-muted); font-size: 12px; }
.ui-text-color-picker-row input[type="color"] { width: 52px; height: 34px; padding: 3px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); cursor: pointer; }
.ui-text-color-help { margin: 0; color: var(--app-faint); font-size: 12px; line-height: 1.55; }
.ui-text-color-reset { min-height: 34px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); font-size: 12px; }
.ui-text-color-reset:hover:not(:disabled), .ui-text-color-reset:focus-visible:not(:disabled) { border-color: var(--app-accent); color: var(--app-accent); }
.ui-text-color-reset:disabled { cursor: not-allowed; opacity: .52; }
.settings-style-row { display: grid; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
.settings-metal-row { display: none; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
html[data-theme="forge"] .settings-metal-row { display: grid; }
.settings-metal-texture-row { display: none; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
html[data-theme="forge"] .settings-metal-texture-row { display: grid; }
.settings-paper-row { display: none; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
html[data-theme="paperback"] .settings-paper-row { display: grid; }
.settings-display-row { display: grid; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
.settings-style-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.settings-style-copy strong { color: var(--app-text); font-size: 13px; }
.settings-style-copy span { color: var(--app-muted); font-size: 12px; }
.settings-style-strength-row { display: grid; gap: 8px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
.style-strength-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.style-strength-control input[type="range"] { width: 100%; min-width: 0; height: 24px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.style-strength-control output { min-width: 68px; color: var(--app-accent); font: 700 12px/1 var(--font-family-mono); text-align: right; }
.style-strength-scale { display: flex; justify-content: space-between; color: var(--app-faint); font-size: 12px; }
.display-calibration-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.display-calibration-control label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; color: var(--app-muted); font-size: 12px; }
.display-calibration-control label span { color: var(--app-text); font-weight: 700; }
.display-calibration-control input[type="range"] { width: 100%; min-width: 0; height: 24px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.display-calibration-control output { min-width: 42px; color: var(--app-accent); font: 700 12px/1 var(--font-family-mono); text-align: right; }
.display-calibration-reset { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); font-size: 12px; }
.display-calibration-reset:hover { border-color: var(--app-accent); color: var(--app-accent); }
.display-calibration-scale { display: flex; justify-content: space-between; padding: 0 76px 0 34px; color: var(--app-faint); font-size: 12px; }
.style-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 52px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-panel); color: var(--app-muted); text-align: left; }
.style-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.style-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.style-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.style-option-list button.active > b { visibility: visible; }
.style-option-copy { display: grid; min-width: 0; gap: 2px; }
.style-option-copy strong { overflow: hidden; color: currentColor; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.style-option-copy small { overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.style-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: end; justify-content: center; gap: 2px; }
.style-option-mark i { display: block; width: 6px; border-radius: 2px; background: var(--style-mark-a); }
.style-option-mark i:nth-child(1) { height: 16px; background: var(--style-mark-a); }
.style-option-mark i:nth-child(2) { height: 20px; background: var(--style-mark-b); }
.style-option-mark i:nth-child(3) { height: 12px; background: var(--style-mark-c); }
.style-option-mark--clear { --style-mark-a: var(--app-text); --style-mark-b: var(--app-line); --style-mark-c: var(--app-faint); }
.style-option-mark--soft { --style-mark-a: var(--app-accent); --style-mark-b: var(--app-accent-soft); --style-mark-c: var(--app-secondary); }
.style-option-mark--stage { --style-mark-a: var(--app-accent); --style-mark-b: var(--app-secondary); --style-mark-c: var(--app-warm); }
.style-option-mark--hard { --style-mark-a: var(--app-secondary); --style-mark-b: var(--app-faint); --style-mark-c: var(--app-accent); }
.style-option-mark--deep { --style-mark-a: var(--app-secondary); --style-mark-b: var(--app-accent); --style-mark-c: var(--app-warm); }
.style-option-mark--glass { --style-mark-a: var(--app-text); --style-mark-b: color-mix(in srgb, var(--app-secondary) 72%, var(--app-text)); --style-mark-c: color-mix(in srgb, var(--app-highlight) 76%, var(--app-text)); }
.metal-finish-option-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.metal-finish-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 58px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); text-align: left; }
.metal-finish-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.metal-finish-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.metal-finish-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.metal-finish-option-list button.active > b { visibility: visible; }
.metal-finish-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: end; justify-content: center; gap: 2px; padding: 3px; border: 1px solid color-mix(in srgb, var(--app-metal-highlight) 48%, var(--app-metal-deep)); border-radius: 5px; background: linear-gradient(145deg, var(--metal-mark-a), var(--metal-mark-b)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-metal-highlight) 42%, transparent), 0 2px 0 color-mix(in srgb, var(--app-metal-deep) 70%, transparent); }
.metal-finish-option-mark i { display: block; width: 5px; height: 16px; border-radius: 2px; background: var(--metal-mark-c); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--app-metal-highlight) 44%, transparent); }
.metal-finish-option-mark i:nth-child(1) { height: 11px; opacity: .72; }
.metal-finish-option-mark i:nth-child(2) { height: 17px; }
.metal-finish-option-mark i:nth-child(3) { height: 14px; opacity: .82; }
.metal-finish-option-mark--copper { --metal-mark-a: #332019; --metal-mark-b: #a76143; --metal-mark-c: #e0a27f; }
.metal-finish-option-mark--bronze { --metal-mark-a: #1e2820; --metal-mark-b: #8e8a61; --metal-mark-c: #c6c79b; }
.metal-finish-option-mark--brass { --metal-mark-a: #332410; --metal-mark-b: #b98d39; --metal-mark-c: #f0cf7f; }
.metal-finish-option-mark--iron { --metal-mark-a: #172126; --metal-mark-b: #8c9aa0; --metal-mark-c: #d8e6e8; }
.metal-texture-option-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.metal-texture-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 58px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); text-align: left; }
.metal-texture-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.metal-texture-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.metal-texture-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.metal-texture-option-list button.active > b { visibility: visible; }
.paper-texture-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paper-texture-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 58px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-paper-control-surface); color: var(--app-muted); text-align: left; }
.paper-texture-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.paper-texture-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.paper-texture-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.paper-texture-option-list button.active > b { visibility: visible; }
.paper-texture-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: end; justify-content: center; gap: 2px; }
.paper-texture-option-mark i { display: block; width: 6px; border-radius: 2px; background: var(--paper-mark-a); }
.paper-texture-option-mark i:nth-child(1) { height: 16px; background: var(--paper-mark-a); }
.paper-texture-option-mark i:nth-child(2) { height: 20px; background: var(--paper-mark-b); }
.paper-texture-option-mark i:nth-child(3) { height: 12px; background: var(--paper-mark-c); }
.paper-texture-option-mark--ivory { --paper-mark-a: var(--app-paper-base); --paper-mark-b: var(--app-paper-fiber); --paper-mark-c: var(--app-text); }
.paper-texture-option-mark--cotton { --paper-mark-a: var(--app-paper-fiber); --paper-mark-b: var(--app-panel); --paper-mark-c: var(--app-accent); }
.paper-texture-option-mark--vellum { --paper-mark-a: var(--app-paper-stain); --paper-mark-b: var(--app-warm); --paper-mark-c: var(--app-text); }
.paper-texture-option-mark--linen { --paper-mark-a: var(--app-secondary); --paper-mark-b: var(--app-paper-fiber); --paper-mark-c: var(--app-accent); }
.paper-texture-option-mark--recycled { --paper-mark-a: var(--app-faint); --paper-mark-b: var(--app-paper-fiber); --paper-mark-c: var(--app-secondary); }
.paper-texture-option-mark--newsprint { --paper-mark-a: var(--app-muted); --paper-mark-b: var(--app-line); --paper-mark-c: var(--app-text); }
.metal-texture-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: end; justify-content: center; gap: 2px; padding: 3px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--app-metal-highlight) 48%, var(--app-metal-deep)); border-radius: 5px; background: var(--texture-mark-bg); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-metal-highlight) 42%, transparent), 0 2px 0 color-mix(in srgb, var(--app-metal-deep) 70%, transparent); }
.metal-texture-option-mark i { display: block; width: 5px; height: 16px; border-radius: 2px; background: var(--texture-mark-ink); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--app-metal-highlight) 44%, transparent); }
.metal-texture-option-mark i:nth-child(1) { height: 11px; opacity: .72; }
.metal-texture-option-mark i:nth-child(2) { height: 17px; }
.metal-texture-option-mark i:nth-child(3) { height: 14px; opacity: .82; }
.metal-texture-option-mark--matte { --texture-mark-bg: repeating-radial-gradient(circle at 30% 30%, var(--app-metal-highlight) 0 1px, var(--app-metal-base) 1px 4px); --texture-mark-ink: var(--app-metal-highlight); }
.metal-texture-option-mark--brushed { --texture-mark-bg: repeating-linear-gradient(90deg, var(--app-metal-deep) 0 2px, var(--app-metal-base) 2px 4px, var(--app-metal-highlight) 4px 5px); --texture-mark-ink: var(--app-metal-highlight); }
.metal-texture-option-mark--hammered { --texture-mark-bg: repeating-radial-gradient(circle at 30% 30%, var(--app-metal-highlight) 0 2px, var(--app-metal-base) 2px 5px, var(--app-metal-deep) 5px 7px); --texture-mark-ink: var(--app-metal-highlight); }
.metal-texture-option-mark--leather { --texture-mark-bg: radial-gradient(circle at 25% 20%, var(--app-metal-highlight) 0 2px, transparent 2px 6px), var(--app-metal-deep); --texture-mark-ink: var(--app-metal-base); }
.metal-texture-option-mark--patina { --texture-mark-bg: radial-gradient(circle at 25% 25%, var(--app-metal-patina), var(--app-metal-base) 42%, var(--app-metal-deep) 100%); --texture-mark-ink: var(--app-metal-patina); }
.settings-interaction-row { display: grid; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
.interaction-option-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.interaction-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 52px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); text-align: left; }
.interaction-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.interaction-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.interaction-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.interaction-option-list button.active > b { visibility: visible; }
.interaction-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: end; justify-content: center; gap: 2px; }
.interaction-option-mark i { display: block; width: 6px; border-radius: 2px; background: var(--app-secondary); }
.interaction-option-mark i:nth-child(1) { height: 10px; }
.interaction-option-mark i:nth-child(2) { height: 16px; }
.interaction-option-mark i:nth-child(3) { height: 21px; }
.interaction-option-mark--quiet { opacity: .55; }
.interaction-option-mark--lift i { box-shadow: 0 3px 0 color-mix(in srgb, var(--app-shadow) 54%, transparent); }
.interaction-option-mark--spotlight i { background: var(--app-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--app-accent) 64%, transparent); }
.settings-click-row { display: grid; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--app-line); }
.click-option-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.click-option-list button { display: grid; min-width: 0; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 8px; min-height: 52px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-muted); text-align: left; }
.click-option-list button:hover { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-panel-2); color: var(--app-text); }
.click-option-list button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.click-option-list button > b { visibility: hidden; color: var(--app-accent); font-size: 12px; }
.click-option-list button.active > b { visibility: visible; }
.click-preview-button { justify-self: start; min-height: 36px; padding: 7px 12px; border: 1px solid var(--app-line-strong); border-radius: var(--control-radius); background: var(--app-control-surface); color: var(--app-text); font-size: 12px; font-weight: 700; }
.click-preview-button:hover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.click-option-mark { display: grid; width: 24px; height: 24px; grid-template-columns: repeat(3, 6px); align-items: center; justify-content: center; gap: 2px; }
.click-option-mark i { display: block; width: 6px; border-radius: 2px; background: var(--app-secondary); }
.click-option-mark--press i:nth-child(1) { height: 15px; }
.click-option-mark--press i:nth-child(2) { height: 11px; }
.click-option-mark--press i:nth-child(3) { height: 15px; }
.click-option-mark--flash i { height: 20px; background: var(--app-warm); box-shadow: 0 0 8px color-mix(in srgb, var(--app-warm) 58%, transparent); }
.click-option-mark--ripple i { height: 10px; border: 1px solid var(--app-secondary); background: transparent; border-radius: 999px; }
.click-option-mark--random i { height: 16px; background: linear-gradient(180deg, var(--app-accent), var(--app-secondary)); }
.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; }
.theme-option-swatch[data-theme-preview="ink"] { --swatch-a: #2b3035; --swatch-b: #f1f2f3; --swatch-c: #727a82; }
.theme-option-swatch[data-theme-preview="paperback"] { --swatch-a: #a45f3f; --swatch-b: #faf7f2; --swatch-c: #66776c; }
.theme-option-swatch[data-theme-preview="forge"] { --swatch-a: #c87852; --swatch-b: #211a17; --swatch-c: #8aa996; }
.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; }
.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-elevated); color: var(--app-text); }
.audio-device-settings select option,
.audio-device-settings select optgroup { background: var(--app-elevated); color: var(--app-text); }
.audio-device-settings select option:checked { background: var(--app-accent-soft); color: var(--app-accent); }
.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); }
.lan-sync-settings { display: grid; gap: 10px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--app-line); }
.lan-sync-settings .lan-sync-urls { margin: 0; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-elevated); color: var(--app-text); font-size: 12px; line-height: 1.55; word-break: break-all; white-space: pre-wrap; min-height: 3.2em; }
.lan-sync-settings .lan-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lan-sync-settings .lan-sync-hint { margin: 0; color: var(--app-faint); font-size: 11px; line-height: 1.45; }
#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: 12px; }
.lyrics-section-head--ai-context { border-left: 3px solid var(--app-secondary); padding-left: 12px; }
.lyrics-section-head--ai-context .lyrics-section-meta { color: var(--app-secondary); font-weight: 600; }
.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="edit"] .lyrics-view-controls,
.lyrics-card[data-lyrics-mode="edit"] #lyricsVersionSelect,
.lyrics-card[data-lyrics-mode="edit"] #restoreOriginalLyrics,
.lyrics-card[data-lyrics-mode="edit"] #saveLyricsVersion,
.lyrics-card[data-lyrics-mode="edit"] #compareLyrics { display: none; }
.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: 14px; line-height: 1.55; font-style: italic; }
#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); }

/* SongRealm lyrics tab bar — sits above the lyrics toolbar and lets the
 * user switch between the three primary tasks in the lyrics area:
 *   1. Lyrics (default) — block-by-block editing
 *   2. Structure & tags — Verse / Chorus / Bridge / Pre-Chorus / Outro
 *   3. AI & versions — lyric remix, version compare, alignment checks
 * The tab bar replaces the previous "everything in one toolbar" pattern
 * that caused the lyrics card to look visually noisy. */
.lyrics-tab-bar { display: flex; align-items: center; gap: 4px; padding: 0 22px; margin: 0 0 10px; border-bottom: 1px solid var(--app-line); }
.lyrics-tab-bar button { appearance: none; background: transparent; border: 0; padding: 10px 16px 12px; color: var(--app-muted); font: 600 13px var(--font-family-base); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.lyrics-tab-bar button:hover { color: var(--app-text); }
.lyrics-tab-bar button[aria-selected="true"] { color: var(--app-accent); border-bottom-color: var(--app-accent); }
.lyrics-tab-bar .lyrics-tab-spacer { flex: 1; }
.lyrics-tab-panel[hidden] { display: none !important; }

/* Tab 2: structure & tags panel */
.lyrics-structure-toolbar { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 8px; }
.lyrics-structure-toolbar strong { font-size: 13px; color: var(--app-text); }
.lyrics-structure-toolbar span { font-size: 12px; color: var(--app-muted); }
.lyrics-structure-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 24px 16px; border-bottom: 1px dashed var(--app-line); }
.lyrics-structure-pill { appearance: none; min-height: 36px; padding: 0 16px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-panel-2); color: var(--app-accent); font: 600 13px var(--font-family-base); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.lyrics-structure-pill:hover { background: var(--app-accent-soft); border-color: var(--app-accent); }
.lyrics-structure-list { padding: 16px 24px; min-height: 220px; color: var(--app-muted); font-size: 12px; }
.lyrics-structure-list small { display: block; padding: 14px; border: 1px dashed var(--app-line); border-radius: 8px; background: var(--app-panel); }

/* Tab 3: AI & versions panel */
.lyrics-ai-toolbar { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 8px; }
.lyrics-ai-toolbar strong { font-size: 13px; color: var(--app-text); }
.lyrics-ai-toolbar span { font-size: 12px; color: var(--app-muted); }
.lyrics-ai-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 24px 16px; border-bottom: 1px dashed var(--app-line); }
.lyrics-ai-actions .outline-btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.lyrics-ai-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding: 18px 24px; }
.lyrics-ai-summary > span { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); }
.lyrics-ai-summary strong { font-size: 12px; color: var(--app-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.lyrics-ai-summary em { font-style: normal; font-size: 22px; color: var(--app-text); font-weight: 700; line-height: 1.15; }

/* Lyrics font scale — a single CSS variable drives text size inside the lyrics card only.
   It does NOT bleed into other panels, so practice, separation, and review sizes stay intact. */
.lyrics-card { --lyrics-font-scale: 1; }
.lyrics-card[data-lyrics-scale="0.9"] { --lyrics-font-scale: 0.9; }
.lyrics-card[data-lyrics-scale="1.1"] { --lyrics-font-scale: 1.1; }
.lyrics-card[data-lyrics-scale="1.25"] { --lyrics-font-scale: 1.25; }
.lyrics-card[data-lyrics-scale="1.5"] { --lyrics-font-scale: 1.5; }
/* Apply the scale only to lyrics content. em-based targeting avoids rewriting dozens of rule sizes. */
.lyrics-card #lyricsContent .lyric-block textarea,
.lyrics-card #lyricsContent .lyric-display-zh,
.lyrics-card #lyricsContent .lyric-display-en,
.lyrics-card #lyricsContent .compare-old,
.lyrics-card #lyricsContent .compare-new,
.lyrics-card #lyricsContent .compare-row .line-num,
.lyrics-card #lyricsContent .lyrics-whole-editor textarea { font-size: calc(1em * var(--lyrics-font-scale)); }
/* Inside the whole-editor, the base font is 17px, so the eM-relative calc above lands at 17 × scale — correct.
   The zh/en display panels already use 16/14, which scale naturally. */
.lyrics-card #lyricsContent .lyric-block .en-line,
.lyrics-card #lyricsContent .lyric-display-en { font-size: calc(13px * var(--lyrics-font-scale)); }
/* Read mode zh-line keeps its reading variable but proportions scale to user preference. */
.lyrics-card #lyricsContent.read-mode .lyric-display-zh { font-size: calc(var(--font-reading) * var(--lyrics-font-scale)); }
/* Compact zoom controls placed on the lyrics toolbar (sits next to count label). */
.lyrics-zoom { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; min-height: 32px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--control-bg); margin-left: auto; }
.lyrics-zoom button { min-width: 30px; min-height: 26px; padding: 0 6px; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-panel); color: var(--app-text); font: 700 12px/1 var(--font-family-base); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.lyrics-zoom button:hover { background: var(--app-accent-soft); border-color: var(--app-accent); color: var(--app-accent); }
.lyrics-zoom output { min-width: 44px; text-align: center; color: var(--app-muted); font: 700 12px/1 var(--font-family-base); padding: 0 4px; }
.lyrics-zoom button[disabled] { opacity: .35; cursor: not-allowed; }
/* Hide-on-click hint inside the AI compare block. */
.ai-compare-block .compare-hint { display: inline-flex; align-items: center; gap: 6px; }
.ai-compare-block .compare-hint-dismiss { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-panel-2); color: var(--app-muted); font: 700 12px/1 var(--font-family-base); cursor: pointer; }
.ai-compare-block .compare-hint-dismiss:hover { color: var(--app-text); border-color: var(--app-accent); }
/* When the user dismisses the hint, remove the trailing gap so the title hugs the right edge. */
.lyrics-card[data-ai-compare-hint-dismissed="true"] .ai-compare-block > header { justify-content: flex-start; gap: 8px; }
.lyrics-card[data-ai-compare-hint-dismissed="true"] .ai-compare-block .compare-hint { display: none; }

/* Lyrics version / compare toolbar — moved out of minified styles.css for typography + theme compliance. */
.lyrics-version-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.lyrics-version-tools select { height: 32px; max-width: 160px; background: var(--control-bg); color: var(--app-text); border: 1px solid var(--app-line); border-radius: 5px; padding: 0 8px; font-size: 12px; }
.lyrics-version-tools .outline-btn { min-height: 32px; padding: 0 12px; font-size: 12px; }
.compare-mode { display: block; max-height: 680px; overflow: auto; padding: 0 18px 24px; }
.compare-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; }
.compare-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-weight: 600; }
.compare-toolbar select { background: var(--control-bg); color: var(--app-text); border: 1px solid var(--app-line); border-radius: 5px; padding: 7px 10px; font-size: 12px; min-height: 32px; }
.compare-legend { display: flex; gap: 14px; margin-left: auto; }
.compare-legend i { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--app-line); background: var(--app-panel); }
.legend-removed { color: var(--diff-removed-text); border-color: color-mix(in srgb, var(--diff-removed-text) 40%, var(--app-line)); background: color-mix(in srgb, var(--diff-removed-bg) 60%, var(--app-panel)); }
.legend-added { color: var(--diff-added-text); border-color: color-mix(in srgb, var(--diff-added-text) 40%, var(--app-line)); background: color-mix(in srgb, var(--diff-added-bg) 60%, var(--app-panel)); }
.compare-head, .compare-row { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 10px; align-items: start; }
.compare-head { padding: 12px 0 8px; color: var(--app-muted); font-size: 13px; font-weight: 600; }
.compare-row { border-top: 1px solid var(--app-line); padding: 10px 0; font-size: 14px; line-height: 1.6; }
.compare-row .line-num { color: var(--app-accent); font: 700 12px var(--font-family-mono); padding-top: 4px; letter-spacing: .04em; }
.compare-old, .compare-new { min-height: 32px; padding: 10px 12px; border-radius: 5px; white-space: normal; overflow-wrap: anywhere; color: var(--app-text); background: transparent; }
/* Softened diff: gentle bg tint + measured text weight + thin rounded pill outline so the two
   columns stay readable in every theme without competing with the surrounding panel. */
.compare-row:not(.same) .compare-old { background: var(--diff-removed-bg); color: var(--diff-removed-text); box-shadow: inset 0 0 0 1px var(--diff-removed-border); }
.compare-row:not(.same) .compare-new { background: var(--diff-added-bg); color: var(--diff-added-text); box-shadow: inset 0 0 0 1px var(--diff-added-border); }
.compare-row.same .compare-old, .compare-row.same .compare-new { color: var(--app-muted); }
.compare-old.removed { color: var(--diff-removed-text); }
.compare-new.added { color: var(--diff-added-text); }
/* Inline version picker so users can pick "对比基准 → 当前版本" without leaving the AI tab. */
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block { margin: 8px 24px 18px; border: 1px solid var(--app-line); border-radius: 10px; padding: 14px 16px; background: var(--app-panel); }
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block > header strong { font-size: 14px; color: var(--app-text); font-weight: 700; }
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block > header span { font-size: 12px; color: var(--app-muted); }
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block > .compare-toolbar { padding-top: 0; padding-bottom: 12px; }
.lyrics-tab-panel[data-lyrics-panel="ai"] .ai-compare-block .compare-rows { max-height: 420px; overflow-y: auto; }
@media (max-width: 700px) {
  .lyrics-version-tools { width: 100%; margin-left: 0; }
  .lyrics-version-tools select { max-width: none; flex: 1; }
  .compare-mode { padding: 0 12px 20px; }
  .compare-toolbar { flex-wrap: wrap; }
  .compare-legend { width: 100%; margin-left: 0; }
  .compare-head, .compare-row { grid-template-columns: 28px 1fr 1fr; gap: 8px; font-size: 13px; }
}

#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: 44px minmax(0, 1fr); gap: 12px; max-width: 860px; min-height: 0; margin: 0 auto; padding: 14px 8px; border: 0; border-bottom: 1px solid var(--app-line); border-radius: 0; background: transparent; position: relative; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--app-accent); opacity: .55; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block > div:last-child { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block textarea { min-height: 76px; padding: 10px 12px; overflow-y: hidden; resize: vertical; border: 1px solid transparent; border-radius: 6px; background: var(--app-panel); color: var(--app-text); font-size: 15px; line-height: 1.8; transition: border-color .15s ease, background .15s ease; }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block .zh-line { font-weight: 500; letter-spacing: .005em; }
#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; box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 14%, transparent); }
#lyricsContent:not(.read-mode):not(.compare-mode) .lyric-block .en-line { margin: 0; color: var(--app-muted); font-size: 13px; }
#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); }
.lyrics-whole-editor { display: grid; width: min(100%, 920px); min-height: 520px; gap: 8px; margin: 8px auto; color: var(--app-text); }
.lyrics-whole-editor > span { font-size: 11px; font-weight: 700; color: var(--app-muted); text-transform: uppercase; letter-spacing: .06em; }
.lyrics-whole-editor > small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.lyrics-whole-editor textarea { width: 100%; min-height: 460px; resize: vertical; padding: 18px 20px; border: 1px solid var(--app-line); border-radius: 8px; outline: none; background: var(--control-bg); color: var(--app-text); font: 500 17px/1.6 var(--font-family-base); letter-spacing: .005em; }
.lyrics-whole-editor textarea:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent); }
#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-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:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"], [data-theme="paperback"]) :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"], [data-theme="paperback"]) .project-list-item.active { box-shadow: inset 2px 0 0 var(--app-accent); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"], [data-theme="paperback"]) :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"], [data-theme="paperback"]) :is(.storage-row, .storage-card p, .version-settings label) { color: var(--app-muted); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"], [data-theme="paperback"]) .progress { background: var(--app-line); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"], [data-theme="paperback"]) .suno-block { border-color: var(--app-line); background: var(--app-elevated); }
html:is([data-theme="daylight"], [data-theme="mist"], [data-theme="sage"], [data-theme="paperback"]) :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-step-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-brief-advanced summary strong, .ai-segment-controls > strong) { color: var(--ai-text); }
:is(.ai-tools-head p, .ai-style-tag-head span, .ai-brief-intro span, .ai-step-intro span, .ai-style-analysis-box span, .ai-final-prompt-label span, .ai-suno-style-head span, .ai-advanced-tools summary span, .ai-brief-advanced 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-brief-advanced { border-color: var(--ai-border); background: var(--ai-control-bg); }
.ai-step-intro { border-bottom: 1px solid color-mix(in srgb, var(--ai-border) 70%, transparent); padding-bottom: 10px; }
.ai-final-prompt-actions #copyAiFull {
  border-color: color-mix(in srgb, var(--app-accent) 62%, var(--ai-border));
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
.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-tools-panel.ai-mode-new .ai-style-analysis-box.ai-style-followup,
.ai-tools-panel.ai-mode-existing .ai-style-analysis-box.ai-style-followup { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.ai-style-followup > div { min-width: 0; }
.ai-style-followup > div strong { font-size: 13px; }
.ai-style-followup > div span { max-width: 720px; line-height: 1.6; }
.ai-style-followup > button { flex: 0 0 auto; min-height: 40px; padding: 0 16px; }
@media (max-width: 720px) {
  .ai-tools-panel.ai-mode-new .ai-style-analysis-box.ai-style-followup,
  .ai-tools-panel.ai-mode-existing .ai-style-analysis-box.ai-style-followup { align-items: stretch; flex-direction: column; }
}
.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; }

/* Style picker: category cards by default, full legacy list on demand. */
.ai-style-tag-head-actions { display: flex; align-items: center; gap: 8px; }
.ai-style-tag-head-actions #aiStyleViewToggle {
  border-color: var(--button-secondary-border);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}
.ai-style-tag-head-actions #aiStyleViewToggle:hover {
  border-color: var(--button-accent-border);
  background: var(--button-secondary-bg-hover);
  color: var(--app-accent);
}
.ai-style-category-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ai-style-tag-picker[data-view="expanded"] .ai-style-category-cards { display: none; }
.ai-style-tag-picker[data-view="cards"] .ai-style-tag-groups { display: none; }
.ai-style-category-card[hidden],
.ai-style-tag-group[hidden],
.ai-orchestra-style-note[hidden] { display: none; }
.ai-style-tag-picker.is-orchestral .ai-style-category-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-orchestra-style-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--ai-border));
  border-radius: 8px;
  background: var(--app-accent-soft);
}
.ai-orchestra-style-note strong { color: var(--app-accent); font-size: 12px; white-space: nowrap; }
.ai-orchestra-style-note span { color: var(--ai-text); font-size: 12px; line-height: 1.55; }
.ai-style-category-card {
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--ai-border);
  border-radius: 8px;
  background: var(--ai-control-bg);
  color: var(--ai-text);
  text-align: left;
}
.ai-style-category-card:hover,
.ai-style-category-card.has-selection {
  border-color: color-mix(in srgb, var(--app-accent) 58%, var(--ai-border));
  background: var(--ai-active-bg);
}
.ai-style-category-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--ai-border);
  border-radius: 7px;
  background: var(--ai-section-bg);
  color: var(--ai-faint);
  font: 11px 'DM Mono', ui-monospace, monospace;
}
.ai-style-category-card.has-selection .ai-style-category-index {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
.ai-style-category-copy { display: grid; min-width: 0; gap: 3px; }
.ai-style-category-copy strong { overflow: hidden; color: var(--ai-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ai-style-category-copy small { color: var(--ai-muted); font-size: 11px; }
.ai-style-category-copy em { overflow: hidden; color: var(--ai-faint); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ai-style-category-card.has-selection .ai-style-category-copy small,
.ai-style-category-card.has-selection .ai-style-category-arrow { color: var(--app-accent); }
.ai-style-category-arrow { color: var(--ai-faint); font-size: 22px; line-height: 1; }
.ai-style-group-dialog {
  position: fixed;
  z-index: 13500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--app-dialog-backdrop-bg);
}
.ai-style-group-dialog[hidden] { display: none; }
.ai-style-group-dialog > section {
  display: flex;
  width: min(var(--app-dialog-width-lg), calc(100vw - var(--app-dialog-viewport-gap)));
  max-height: min(720px, calc(100vh - 48px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--app-dialog-border);
  border-radius: var(--app-dialog-radius);
  background: var(--app-dialog-surface);
  color: var(--app-text);
  box-shadow: var(--app-dialog-shadow);
}
.ai-style-group-dialog header,
.ai-style-group-dialog footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.ai-style-group-dialog header { border-bottom: 1px solid var(--app-line); background: var(--app-dialog-header-bg); }
.ai-style-group-dialog header span { color: var(--app-accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.ai-style-group-dialog h3 { margin: 4px 0 2px; color: var(--app-text); font-size: 20px; }
.ai-style-group-dialog header p { margin: 0; color: var(--app-muted); font-size: 11px; }
.ai-style-group-dialog header button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--button-secondary-border);
  border-radius: 8px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-size: 19px;
}
.ai-style-group-dialog-tags { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-content: flex-start; gap: 9px; overflow: auto; padding: 20px; }
.ai-style-group-dialog-tags button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-size: 11px;
  text-align: left;
}
.ai-style-group-dialog-tags button:hover,
.ai-style-group-dialog-tags button.active {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
.ai-style-group-dialog footer { border-top: 1px solid var(--app-line); background: var(--app-dialog-header-bg); }
.ai-style-group-dialog footer > span { color: var(--app-muted); font-size: 11px; }
.ai-style-group-dialog footer > div { display: flex; gap: 8px; }
.ai-style-group-dialog footer button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-size: 11px;
  font-weight: 750;
}
.ai-style-group-dialog footer [data-style-dialog-done] {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
.ai-custom-select-control {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}
.ai-custom-select-control select { min-width: 0; width: 100%; }
.ai-custom-select-control [data-ai-custom-delete] {
  min-width: 48px;
  padding: 0 9px;
  border: 1px solid var(--state-danger-line);
  border-radius: 6px;
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
  font-size: 11px;
  font-weight: 700;
}
.ai-custom-select-control [data-ai-custom-delete]:hover { background: color-mix(in srgb, var(--app-coral) 20%, var(--app-panel)); }
.ai-custom-select-control [data-ai-custom-delete][hidden] { display: none; }
.ai-brief-grid-reference { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai-brief-choice-input { display: grid; gap: 5px; min-width: 0; }
.ai-brief-choice-input > .ai-custom-select-control,
.ai-brief-choice-input > input { min-width: 0; }
@media (max-width: 900px) { .ai-brief-grid-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ai-brief-grid-reference { grid-template-columns: 1fr; } }
.ai-segment-step > .ai-custom-select-control { grid-column: 1 / -1; }
.ai-structure-picker[data-compact="true"] { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--ai-border); border-radius: 8px; background: color-mix(in srgb, var(--app-panel) 82%, var(--app-bg)); }
.ai-structure-compact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-structure-compact-head > div { display: grid; gap: 2px; }
.ai-structure-compact-head strong { color: var(--ai-text); font-size: 13px; }
.ai-structure-compact-head span { color: var(--ai-muted); font-size: 11px; }
.ai-structure-compact-head output { padding: 4px 8px; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent); font-size: 11px; font-weight: 700; }
.ai-structure-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ai-structure-picker .ai-structure-actions > button { display: grid; min-height: 48px; place-items: center; gap: 2px; padding: 7px; text-align: center; }
.ai-structure-actions > button[data-structure-action="random"] { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--ai-border)); background: var(--app-accent-soft); color: var(--app-accent); }
.ai-structure-actions > button[data-structure-action="manual"] { border-color: color-mix(in srgb, var(--app-accent) 35%, var(--ai-border)); }
.ai-structure-actions button strong { color: inherit; font-size: 12px; }
.ai-structure-actions button span { color: var(--ai-muted); font-size: 10px; }
.ai-structure-detail { margin-top: 8px; padding: 10px 12px; }
.ai-structure-summary { display: grid; gap: 8px; }
.ai-structure-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ai-structure-summary > div strong { color: var(--ai-text); font-size: 12px; }
.ai-structure-summary > div span { color: var(--ai-muted); font-size: 10px; }
.ai-structure-summary code { display: block; overflow: hidden; color: var(--ai-code-text); font: 11px/1.6 'DM Mono', ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ai-structure-dialog { z-index: 12500; }
.ai-structure-dialog > .modal { width: min(980px, calc(100vw - 36px)); max-height: calc(100vh - 48px); }
.ai-structure-common-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-structure-common-list[hidden], .ai-structure-common-list > button[hidden], .ai-structure-manual-flow[hidden] { display: none; }
.ai-structure-common-list > button { display: grid; gap: 6px; min-height: 104px; padding: 14px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-text); text-align: left; }
.ai-structure-common-list > button:hover { border-color: var(--app-accent); background: var(--app-accent-soft); }
.ai-structure-common-list strong { font-size: 13px; }
.ai-structure-common-list span { color: var(--app-muted); font-size: 11px; line-height: 1.5; }
.ai-structure-common-list code { overflow: hidden; color: var(--ai-code-text); font: 10px 'DM Mono', ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ai-structure-manual-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-structure-manual-row { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); }
.ai-structure-manual-row > header { display: flex; align-items: center; gap: 8px; }
.ai-structure-manual-row > header span { color: var(--app-faint); font: 10px 'DM Mono', ui-monospace, monospace; }
.ai-structure-manual-row > header strong { color: var(--app-text); font-size: 12px; }
.ai-structure-manual-row > header button { margin-left: auto; border: 0; background: transparent; color: var(--app-coral); font-size: 11px; }
.ai-structure-manual-row > div { display: grid; grid-template-columns: 1.2fr .8fr 1.2fr; gap: 7px; }
.ai-structure-manual-row label { display: grid; min-width: 0; gap: 4px; color: var(--app-muted); font-size: 10px; }
.ai-structure-manual-row select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel-2); color: var(--app-text); font-size: 11px; }
.ai-manual-add { min-height: 48px; border: 1px dashed var(--app-line); border-radius: 8px; background: transparent; color: var(--app-accent); }
.ai-orchestra-options { display: grid; gap: 9px; margin-top: 10px; padding: 12px; border: 1px solid var(--ai-border); border-radius: 8px; background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg)); }
.ai-orchestra-options[hidden] { display: none; }
.ai-orchestra-options > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-orchestra-options > header > div:first-child { display: grid; gap: 2px; }
.ai-orchestra-options strong { color: var(--ai-text); font-size: 12px; }
.ai-orchestra-options span, .ai-orchestra-options output { color: var(--ai-muted); font-size: 12px; line-height: 1.5; }
.ai-orchestra-options button { min-height: 34px; padding: 0 10px; border: 1px solid var(--ai-border); border-radius: 6px; background: var(--app-panel); color: var(--ai-muted); font-size: 12px; }
.ai-orchestra-options button:hover, .ai-orchestra-options button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.ai-orchestra-instruments { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-orchestra-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ai-orchestra-brief-grid label { display: grid; gap: 5px; font-size: 12px; }
.ai-orchestra-brief-grid select { width: 100%; min-width: 0; height: 36px; font-size: 12px; }
.ai-timing-panel { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--ai-border); border-radius: 8px; background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg)); }
.ai-timing-panel > header > div { display: grid; gap: 3px; }
.ai-timing-panel > header strong { color: var(--ai-text); font-size: 13px; }
.ai-timing-panel > header span { color: var(--ai-muted); font-size: 12px; line-height: 1.5; }
.ai-timing-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-timing-fields > label { display: grid; min-width: 0; gap: 6px; color: var(--ai-muted); font-size: 12px; }
.ai-timing-suggestion { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--ai-border)); border-radius: 7px; background: var(--ai-section-bg); }
.ai-timing-suggestion > div { display: grid; min-width: 0; gap: 3px; }
.ai-timing-suggestion strong { color: var(--ai-text); font-size: 12px; }
.ai-timing-suggestion span { color: var(--ai-muted); font-size: 12px; line-height: 1.5; }
.ai-timing-suggestion output { color: var(--app-accent); font-size: 12px; white-space: nowrap; }
.ai-timing-suggestion button { min-height: 34px; padding: 0 11px; border: 1px solid var(--button-secondary-border); border-radius: 6px; background: var(--button-secondary-bg); color: var(--button-secondary-text); font-size: 12px; }
.ai-timing-suggestion button:hover { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.ai-style-followup-copy { display: grid; gap: 7px; }
#aiStyleRequirementPreview { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--ai-border); border-radius: 7px; background: var(--ai-control-bg); }
#aiStyleRequirementPreview strong { color: var(--app-accent); font-size: 11px; }
#aiStyleRequirementPreview span { color: var(--ai-text); font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .ai-structure-common-list, .ai-structure-manual-flow { grid-template-columns: 1fr; }
  .ai-structure-manual-row > div { grid-template-columns: 1fr; }
  .ai-orchestra-brief-grid { grid-template-columns: 1fr; }
  .ai-timing-fields { grid-template-columns: 1fr; }
  .ai-timing-suggestion { grid-template-columns: 1fr; align-items: stretch; }
  .ai-timing-suggestion output { white-space: normal; }
  .ai-orchestra-options > header { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 860px) {
  .ai-style-category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ai-style-tag-head { align-items: flex-start; flex-direction: column; }
  .ai-style-tag-head-actions { width: 100%; }
  .ai-style-tag-head-actions button { flex: 1; }
  .ai-style-category-cards { grid-template-columns: 1fr; }
  .ai-style-tag-picker.is-orchestral .ai-style-category-cards { grid-template-columns: 1fr; }
  .ai-orchestra-style-note { grid-template-columns: 1fr; }
  .ai-style-group-dialog { padding: 10px; }
  .ai-style-group-dialog > section { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .ai-style-group-dialog footer { align-items: stretch; flex-direction: column; }
  .ai-style-group-dialog footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

: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"], [data-theme="paperback"]) :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"], [data-theme="paperback"]) :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"], [data-theme="paperback"]) :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); }
.sidebar-collapse-handle {
  position: fixed;
  z-index: 80;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width, 232px) - 9px);
  display: grid;
  width: 18px;
  height: 54px;
  margin-block: auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 0 7px 7px 0;
  color: var(--app-muted);
  background: var(--app-panel);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--app-shadow) 42%, transparent);
  cursor: pointer;
  transition: left .18s ease, color .18s ease, background .18s ease;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  touch-action: manipulation;
}
.sidebar-collapse-handle:hover,
.sidebar-collapse-handle:focus-visible {
  color: var(--app-accent);
  background: var(--app-accent-soft);
}
body.sidebar-collapsed {
  --sidebar-width: 0px;
}
body.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding-inline: 0;
  border-right: 0;
  overflow: visible;
}
body.sidebar-collapsed .sidebar-resize-handle { display: none; }
body.sidebar-collapsed .sidebar > * {
  visibility: hidden;
  pointer-events: none;
}
/* Park the reopen tab inside the content, clear of the Electron window
   resize strip, and grow the hit target so it does not slip under the cursor. */
body.sidebar-collapsed .sidebar-collapse-handle {
  left: 8px;
  width: 22px;
  height: 64px;
  border-radius: 7px;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
body.sidebar-collapsed .sidebar-collapse-handle::before {
  content: '';
  position: absolute;
  inset: -18px -14px -18px -6px;
}
@media (max-width: 700px) {
  .sidebar-collapse-handle { display: none; }
}
.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);
}
.folder-import-status { display: block; margin-top: 10px; color: var(--app-muted); font-size: 9px; line-height: 1.5; }
.folder-import-status[data-state="running"] { color: var(--app-accent); }
.folder-import-status[data-state="success"] { color: var(--status-success); }
.folder-import-status[data-state="error"] { color: var(--app-danger); }
.folder-import-primary { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); font-weight: 800; }
.folder-import-primary:disabled { opacity: .56; cursor: wait; }
: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-pitch-edit, .version-online-upload, .stem-mix-accompaniment) {
  min-height: 39px;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
:is(.version-select, .version-pitch, .version-pitch-edit, .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-role-choice { display: inline-flex; align-items: center; gap: 4px; min-width: 92px; color: var(--app-muted); font-size: 9px; white-space: nowrap; }
.stem-role-choice select { min-height: 30px; max-width: 92px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--app-elevated); color: var(--app-text); padding: 0 5px; font-size: 10px; }
.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); }

/* Account center: full workspace on desktop, compact single-column flow on narrow screens. */
#accountModal {
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
  overflow: hidden;
}
body.account-view-open { overflow: hidden; }
body.account-view-open .vc-help { display: none !important; }
body.account-view-open .app-shell {
  visibility: hidden;
  pointer-events: none;
}
body.account-view-open :is(.sidebar, .sidebar-resize-handle, .sidebar-collapse-handle, .topbar, #playerBar, .karaoke-overlay) {
  display: none !important;
}
body.account-view-open #accountModal.open {
  position: fixed;
  inset: 0;
  /* The account center is a blocking application workspace. Keep it above
     teaching, coach, menu, and their independently composited beat markers;
     otherwise descendants that intentionally restore `visibility: visible`
     during playback can leak through the hidden app shell. */
  z-index: var(--app-layer-dialog);
  display: grid !important;
  padding: 0;
}
html.desktop-runtime body.account-view-open #accountModal.open {
  top: 86px;
  height: auto;
}
.account-dialog-toolbar .account-back-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.account-dialog-toolbar .account-back-btn:hover {
  filter: brightness(1.05);
}
.account-modal {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.22fr);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--app-bg);
  box-shadow: none;
}
.account-modal .eyebrow { font-size: 12px; }
.account-hero {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(22px, 4vh, 46px);
  padding: clamp(30px, 5vw, 72px);
  overflow: hidden;
  border-right: 1px solid var(--app-line);
  background:
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--app-panel) 84%, var(--app-bg)), var(--app-bg));
}
.account-hero::after {
  position: absolute;
  right: -14%;
  bottom: -12%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
  border-radius: 50%;
  content: '';
  box-shadow: 0 0 0 42px color-mix(in srgb, var(--app-accent) 5%, transparent), 0 0 0 86px color-mix(in srgb, var(--app-accent) 3%, transparent);
  pointer-events: none;
}
.account-hero-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.account-hero-brand img { width: 42px; height: 42px; }
.account-hero-brand span { display: grid; gap: 2px; }
.account-hero-brand strong { color: var(--app-text); font-size: 20px; letter-spacing: -.02em; }
.account-hero-brand small { color: var(--app-muted); font-size: 12px; }
.account-hero-copy { position: relative; z-index: 1; align-self: center; max-width: 560px; }
.account-hero-copy .eyebrow { color: var(--app-accent); }
.account-hero-copy h2 { max-width: 13em; margin: 14px 0 18px; color: var(--app-text); font-size: clamp(30px, 3.2vw, 52px); line-height: 1.12; letter-spacing: -.045em; }
.account-hero-copy p { max-width: 40em; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.8; }
.account-journey { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.account-journey li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent); }
.account-journey li:last-child { border-bottom: 0; }
.account-journey i { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); border-radius: 7px; color: var(--app-accent); background: var(--app-accent-soft); font-style: normal; font-weight: 800; }
.account-journey span { display: grid; gap: 2px; }
.account-journey strong { color: var(--app-text); font-size: 12px; }
.account-journey small { color: var(--app-faint); font-size: 12px; }
.account-security-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--status-success-border); border-radius: 9px; background: var(--status-success-bg); }
.account-security-note > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--status-success-text); background: color-mix(in srgb, var(--status-success-text) 12%, transparent); font-weight: 900; }
.account-security-note p, .account-security-note strong, .account-security-note small { display: block; margin: 0; }
.account-security-note strong { color: var(--app-text); font-size: 12px; }
.account-security-note small { margin-top: 3px; color: var(--app-muted); font-size: 12px; }
.account-workspace { min-width: 0; display: grid; grid-template-rows: repeat(6, max-content); align-content: start; gap: 18px; padding: clamp(28px, 4vw, 62px) clamp(30px, 5vw, 76px) 24px; overflow: auto; background: var(--app-bg); }
.account-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.account-dialog-head h2 { margin: 6px 0 5px; color: var(--app-text); font-size: clamp(24px, 2vw, 32px); letter-spacing: -.025em; }
.account-dialog-head p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.6; }
.account-dialog-toolbar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.account-dialog-toolbar .account-logout-btn { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); font-size: 12px; white-space: nowrap; }
.account-dialog-toolbar .icon-btn { flex: 0 0 auto; border: 1px solid var(--app-line); background: var(--button-secondary-bg); }
.account-view-switch { width: min(1120px, 100%); display: flex; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel-2); overflow: visible; }
.account-view-switch button { min-height: 38px; flex: 1 1 0; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.account-view-switch button[hidden] { display: none; }
.account-view-switch button:hover { color: var(--app-text); background: var(--state-hover); }
.account-view-switch button.active { color: var(--button-accent-text); background: var(--button-accent-bg); box-shadow: 0 5px 16px color-mix(in srgb, var(--app-shadow) 42%, transparent); }
.account-form-stage { width: min(1120px, 100%); min-height: 0; align-self: start; }
.account-status { min-height: 0; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--status-info-border); border-radius: 7px; color: var(--status-info-text); background: var(--status-info-bg); font-size: 12px; line-height: 1.55; }
.account-status:empty { display: none; }
.account-status.error { border-color: var(--status-danger-border); color: var(--status-danger-text); background: var(--status-danger-bg); }
.account-status.ok { border-color: var(--status-success-border); color: var(--status-success-text); background: var(--status-success-bg); }
.account-view { display: grid; gap: 14px; padding-top: 2px; }
.account-view[hidden] { display: none !important; }
.account-view:is([data-account-panel="login"], [data-account-panel="register"], [data-account-panel="reset"], [data-account-panel="password"], [data-account-panel="redeem"]) { max-width: 620px; }
.account-form-heading { display: grid; gap: 4px; margin-bottom: 2px; }
.account-form-heading strong { color: var(--app-text); font-size: 18px; }
.account-form-heading span { color: var(--app-muted); font-size: 12px; }
.account-view label { display: grid; gap: 7px; color: var(--app-muted); font-size: 12px; font-weight: 650; }
.account-view input, .account-view select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--control-bg); color: var(--app-text); font-size: 13px; }
.account-view input:hover, .account-view select:hover { border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line)); }
.account-view input:focus, .account-view select:focus { border-color: var(--app-accent); outline: 2px solid color-mix(in srgb, var(--app-accent) 20%, transparent); outline-offset: 1px; }
.account-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-complete { display: grid; gap: 6px; }
.account-complete-bar { height: 8px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--app-line) 80%, var(--app-panel)); }
.account-complete-bar span { display: block; height: 100%; width: var(--complete, 0%); background: var(--app-accent); }
.account-complete p { margin: 0; color: var(--app-muted); font-size: 12px; }
.account-bind-block { display: grid; gap: 8px; }
.account-profile-link { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.account-profile-link strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-link small { color: var(--app-accent); font-size: 12px; font-weight: 700; }
.account-profile-link:hover strong { color: var(--app-accent); }
.account-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; }
.account-bind-block .account-code-row { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
.account-code-row .outline-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.account-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-submit { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; border-radius: 7px; font-size: 13px; }
.account-submit:disabled { cursor: wait; opacity: .65; }
.account-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; color: var(--app-faint); font-size: 12px; }
.account-inline-actions button { padding: 0; border: 0; background: transparent; color: var(--app-accent); font-size: 12px; font-weight: 750; cursor: pointer; }
.account-inline-actions button:hover { color: var(--app-text); }
.account-help { margin: -3px 0 0; color: var(--app-faint); font-size: 12px; line-height: 1.6; }
.account-member { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin: 0; padding: 14px 16px; border: 1px solid var(--status-success-border); border-radius: 9px; background: var(--status-success-bg); }
.account-member[hidden] { display: none; }
.account-member-head { min-width: 0; display: grid; gap: 3px; }
.account-member-head span { color: var(--status-success-text); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.account-member-head strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-member-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--status-success-border); }
.account-member-metrics > div { display: grid; gap: 3px; padding: 10px 10px 0; border-right: 1px solid var(--status-success-border); }
.account-member-metrics > div:first-child { padding-left: 0; }
.account-member-metrics > div:last-child { border-right: 0; }
.account-member-metrics span { color: var(--app-faint); font-size: 12px; }
.account-member-metrics strong { color: var(--app-text); font-size: 13px; }
.account-member-metrics small { color: var(--app-faint); font-size: 12px; line-height: 1.4; }
.account-member-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.account-member-actions .primary-btn, .account-member-actions .outline-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; text-decoration: none; font-size: 12px; }
.account-member > .account-help { grid-column: 1 / -1; margin: 0; }
.account-reward-button { min-height: 30px; align-self: center; padding: 0 10px; font-size: 12px; }
.account-billing-view { gap: 12px; }
.account-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-billing-actions button { min-height: 38px; padding: 0 12px; font-size: 12px; }
.account-billing-tabs { display: flex; align-items: stretch; gap: 5px; min-width: 0; padding: 4px; overflow-x: auto; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel-2); scrollbar-width: thin; }
.account-billing-tabs button { min-height: 38px; flex: 1 0 auto; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.account-billing-tabs button[aria-selected='true'] { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-text); }
.account-billing-tabs button:focus-visible { outline: 3px solid color-mix(in srgb, var(--app-accent) 38%, transparent); outline-offset: 1px; }
.account-billing-overview { display: grid; gap: 10px; }
.account-billing-overview[hidden],
.account-billing-section[hidden] { display: none; }
.account-billing-note { margin: 0; padding: 10px 12px; border: 1px solid var(--status-info-border); border-radius: 7px; color: var(--status-info-text); background: var(--status-info-bg); font-size: 12px; line-height: 1.6; }
.account-billing-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.account-billing-stat { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); }
.account-billing-stat span, .account-billing-stat small { color: var(--app-faint); font-size: 12px; line-height: 1.45; }
.account-billing-stat strong { overflow: hidden; color: var(--app-text); font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.account-billing-section { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.account-billing-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.account-billing-section-head strong { color: var(--app-text); font-size: 13px; }
.account-billing-section-head span { color: var(--app-faint); font-size: 12px; text-align: right; }
.account-billing-list { display: grid; gap: 6px; }
.account-billing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel-2); }
.account-billing-row > div { display: grid; gap: 3px; min-width: 0; }
.account-billing-row strong { overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-billing-row span { overflow: hidden; color: var(--app-faint); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.account-billing-row em { color: var(--app-muted); font-size: 12px; font-style: normal; line-height: 1.45; text-align: right; white-space: nowrap; }
.account-billing-empty { margin: 0; padding: 10px 12px; color: var(--app-faint); font-size: 12px; line-height: 1.5; }
.account-device-conflict { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--status-warning-border); border-radius: 8px; background: var(--status-warning-bg); }
.account-device-conflict[hidden] { display: none; }
.account-device-conflict > strong { color: var(--app-text); font-size: 13px; }
.account-device-conflict > p { margin: 0; color: var(--status-warning-text); font-size: 12px; line-height: 1.5; }
.account-device-conflict .account-billing-row { background: var(--app-panel); }
.account-device-conflict .outline-btn { min-height: 32px; white-space: nowrap; }
.account-support-panel { width: min(1120px, 100%); display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel-2); }
.account-support-qr { display: grid; width: 82px; height: 82px; place-items: center; overflow: hidden; border: 1px dashed var(--app-line); border-radius: 8px; background: var(--app-panel); }
.account-support-qr img { width: 100%; height: 100%; object-fit: contain; }
.account-support-qr span { padding: 8px; color: var(--app-faint); font-size: 12px; line-height: 1.45; text-align: center; }
.account-support-copy { min-width: 0; display: grid; gap: 4px; }
.account-support-copy > strong { color: var(--app-text); font-size: 13px; }
.account-support-copy > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.account-support-identities { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--app-faint); font-size: 12px; }
.account-support-identities b { color: var(--app-text); font-weight: 750; }
.account-support-actions { display: grid; gap: 6px; }
.account-support-actions button { min-height: 30px; justify-content: center; white-space: nowrap; font-size: 12px; }
.account-support-actions button:disabled { cursor: not-allowed; opacity: .48; }
.account-footer { width: min(1120px, 100%); display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--app-line); }
.account-footer .ghost-btn, .account-footer .outline-btn { min-height: 34px; display: inline-flex; align-items: center; text-decoration: none; font-size: 12px; }
.account-footer > span { margin-left: auto; color: var(--app-faint); font-size: 12px; }
.support-modal { width: min(680px, calc(100vw - 32px)); }
.support-contact-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; margin: 18px 0 12px; }
.support-qr-card { display: grid; align-content: center; justify-items: center; gap: 9px; min-height: 180px; padding: 14px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); }
.support-qr-card img { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: var(--app-panel); }
.support-qr-card > div { display: grid; width: 140px; height: 140px; place-items: center; padding: 12px; border: 1px dashed var(--app-line); border-radius: 6px; color: var(--app-faint); background: var(--app-panel); font-size: 10px; text-align: center; }
.support-qr-card > div[hidden], .account-support-qr > span[hidden], .site-support-qr > span[hidden] { display: none !important; }
.support-qr-card > span { color: var(--app-muted); font-size: 10px; }
.support-contact-grid .support-items { align-content: start; margin: 0; }
.support-contact-grid .support-item { grid-template-columns: 72px minmax(0, 1fr) auto; }
.support-contact-grid .support-item > div { display: flex; gap: 5px; }
.support-contact-grid .support-item button { min-width: 48px; padding-inline: 8px; }
.support-live-button { justify-content: center; min-height: 38px; }
.site-support-entry { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(280px, .8fr); align-items: center; gap: clamp(18px, 4vw, 46px); padding: clamp(22px, 4vw, 44px); border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-panel); }
.site-support-heading h2 { margin: 7px 0 10px; color: var(--app-text); font-size: clamp(22px, 2.4vw, 34px); line-height: 1.2; }
.site-support-heading > p:last-child { margin: 0; color: var(--app-muted); font-size: 12px; }
.site-support-qr { display: grid; width: 150px; height: 150px; place-items: center; overflow: hidden; border: 1px dashed var(--app-line); border-radius: 12px; background: var(--app-panel-2); }
.site-support-qr img { width: 100%; height: 100%; object-fit: contain; }
.site-support-qr span { padding: 18px; color: var(--app-faint); font-size: 11px; line-height: 1.5; text-align: center; }
.site-support-details { display: grid; gap: 9px; }
.site-support-details > p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; }
.site-support-details strong { color: var(--app-text); }
.site-support-details > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.site-support-details button:disabled { cursor: not-allowed; opacity: .48; }
.account-center > .site-support-entry { grid-column: 1 / -1; margin-top: 20px; }
.membership-page > .site-support-entry { margin-top: 20px; }

@media (max-width: 860px) {
  .account-modal { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .account-hero { grid-template-rows: auto auto; gap: 16px; padding: 24px; border-right: 0; border-bottom: 1px solid var(--app-line); }
  .account-hero-copy h2 { max-width: none; margin-block: 9px; font-size: 26px; }
  .account-hero-copy p { font-size: 11px; }
  .account-journey, .account-security-note { display: none; }
  .account-workspace { overflow: visible; padding: 24px; }
  .account-view-switch, .account-form-stage, .account-member, .account-support-panel, .account-footer { width: 100%; }
}
@media (max-width: 560px) {
  .account-hero { padding: 18px; }
  .account-hero-copy { display: none; }
  .account-workspace { gap: 14px; padding: 20px 16px; }
  .account-dialog-head h2 { font-size: 23px; }
  .account-view-switch { overflow-x: auto; }
  .account-view-switch button { min-width: 92px; }
  .account-billing-tabs button { flex: 0 0 auto; }
  .account-code-row, .account-bind-block .account-code-row, .account-password-grid, .account-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .account-member { grid-template-columns: minmax(0, 1fr); }
  .account-reward-button { justify-self: start; }
  .account-member-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-member-metrics > div { padding: 10px 8px 0; }
  .account-member-metrics > div:nth-child(2) { border-right: 0; }
  .account-billing-summary { grid-template-columns: minmax(0, 1fr); }
  .account-billing-section-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .account-billing-section-head span { text-align: left; }
  .account-billing-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .account-billing-row em { text-align: left; white-space: normal; }
  .account-support-panel { grid-template-columns: 72px minmax(0, 1fr); }
  .account-support-qr { width: 72px; height: 72px; }
  .account-support-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-footer { align-items: stretch; flex-direction: column; }
  .account-footer > span { margin-left: 0; }
  .support-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .site-support-entry { grid-template-columns: 92px minmax(0, 1fr); }
  .site-support-heading { grid-column: 1 / -1; }
  .site-support-qr { width: 92px; height: 92px; }
}
@media (max-height: 720px) and (min-width: 861px) {
  .account-hero { gap: 18px; padding-block: 28px; }
  .account-hero-copy h2 { margin-block: 10px; font-size: 32px; }
  .account-journey li { padding: 6px 0; }
  .account-workspace { gap: 12px; padding-block: 24px 16px; }
  .account-view { gap: 10px; }
  .account-view input, .account-view select, .account-code-row .outline-btn, .account-submit { min-height: 42px; }
}
: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, #projectFilter, #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); }
.confirmation-prompt { border-color: color-mix(in srgb, var(--state-danger-line) 74%, var(--app-line)); }
.confirmation-prompt > p { color: var(--app-muted); }
.confirmation-prompt .text-prompt-confirm { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }
.confirmation-prompt .text-prompt-confirm:hover { background: color-mix(in srgb, var(--state-danger-bg) 78%, var(--state-danger-text)); }
.library-actions { align-items: center; gap: 6px; }
.library-actions button { border: 1px solid transparent; background: transparent; color: var(--app-muted); }
.library-actions button:hover { border-color: var(--button-accent-border); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.library-actions .library-action-text { width: auto; min-width: 0; padding: 0 9px; white-space: nowrap; }
.library-actions .library-action-text span { margin-right: 5px; font-size: 9px; }
.library-actions .library-action-practice { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.library-actions .library-action-delete:hover { border-color: var(--state-danger-line); background: var(--state-danger-bg); color: var(--state-danger-text); }
.library-item.cards .library-actions, .library-item.covers .library-actions { display: flex; flex-wrap: wrap; padding: 0 12px 12px; }
@media (max-width: 1180px) {
  .library-actions .library-action-text { padding-inline: 7px; font-size: 10px; }
}
.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-lyrics-source { display: inline-flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.lrc-lyrics-source select { min-width: 150px; max-width: 210px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--control-bg); color: var(--app-text); padding: 5px 24px 5px 8px; }
.lrc-search { min-width: 260px; max-width: 520px; flex: 1 1 320px; display: flex; align-items: center; gap: 5px; margin-left: auto; }
.lrc-search label { min-width: 140px; flex: 1 1 auto; position: relative; }
.lrc-search label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lrc-search input { width: 100%; min-height: 34px; padding: 0 32px 0 10px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--control-bg); color: var(--control-text); font: 12px var(--app-font-body); }
.lrc-search input:focus { border-color: var(--app-accent); outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent); outline-offset: 1px; }
.lrc-search output { min-width: 54px; color: var(--app-muted); font: 11px 'DM Mono', monospace; text-align: center; white-space: nowrap; }
.lrc-search button { min-height: 32px; padding: 0 8px; white-space: nowrap; }
.lrc-line.is-search-match { border-color: color-mix(in srgb, var(--app-secondary) 48%, var(--app-line)); }
.lrc-line.is-search-current { border-color: var(--app-accent); background: var(--app-accent-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.lrc-playback-toolbar > .lrc-follow-toggle { margin-left: 0; }
.lrc-waveform-panel { --lrc-wave-height: 108px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel-2); color: var(--app-text); }
.lrc-waveform-panel > header { min-height: 30px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-bottom: 1px solid var(--app-line); }
.lrc-waveform-panel > header strong { flex: 0 0 auto; font-size: 11px; }
.lrc-waveform-panel > header span { min-width: 0; overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lrc-waveform-panel > header small { margin-left: auto; color: var(--app-accent); font-size: 10px; white-space: nowrap; }
.lrc-waveform-plot { position: relative; height: var(--lrc-wave-height); overflow: hidden; background: color-mix(in srgb, var(--app-panel) 92%, var(--app-accent)); cursor: crosshair; outline: none; }
.lrc-waveform-plot:focus-visible { box-shadow: inset 0 0 0 2px var(--app-accent); }
.lrc-waveform-plot canvas { width: 100%; height: 100%; display: block; }
.lrc-waveform-selection { position: absolute; inset: 0 auto 0 var(--lrc-wave-left); width: var(--lrc-wave-width); min-width: 3px; border-inline: 2px solid var(--app-accent); background: color-mix(in srgb, var(--app-accent) 14%, transparent); pointer-events: none; }
.lrc-waveform-selection span { position: absolute; top: 22px; left: 4px; max-width: 240px; overflow: hidden; padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--app-panel) 88%, transparent); color: var(--app-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lrc-waveform-cursor { position: absolute; z-index: 4; inset: 0 auto 0 var(--lrc-wave-progress); width: 2px; transform: translateX(-1px); background: var(--app-coral); pointer-events: none; }
.lrc-waveform-drop { position: absolute; z-index: 5; inset: 0 auto 0 var(--lrc-wave-drop); width: 2px; transform: translateX(-1px); background: var(--app-warm); pointer-events: none; }
.lrc-waveform-drop span { position: absolute; top: 5px; left: 5px; padding: 2px 5px; border: 1px solid var(--status-warning-border); border-radius: 4px; background: var(--status-warning-bg); color: var(--status-warning-text); font: 9px 'DM Mono', monospace; white-space: nowrap; }
.lrc-waveform-panel.is-drag-target { border-color: var(--app-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.lrc-waveform-resize { width: 100%; height: 9px; display: grid; place-items: center; padding: 0; border: 0; border-top: 1px solid var(--app-line); border-radius: 0; background: var(--app-panel); color: var(--app-muted); cursor: ns-resize; }
.lrc-waveform-resize::before { content: ''; width: 42px; height: 2px; border-radius: 999px; background: var(--app-faint); }
.lrc-waveform-resize span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lrc-line .lrc-text[draggable="true"] { cursor: grab; }
.lrc-line .lrc-text[draggable="true"]:active { cursor: grabbing; }
.lrc-line.is-dragging-to-waveform { opacity: .62; border-color: var(--app-accent); }
.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-backup-tools :is(#deleteLrcBackup, #clearAutomaticLrcBackups) { border-color: var(--status-danger-border); background: var(--status-danger-bg); color: var(--status-danger-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-tools { display: grid; gap: 0; padding: 0; overflow: hidden; }
.lrc-ai-row { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; }
.lrc-ai-row + .lrc-ai-row { border-top: 1px solid var(--app-line); }
.lrc-ai-row > label { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 10px; white-space: nowrap; }
.lrc-ai-kind { flex: 0 0 52px; color: var(--app-text); font-size: 11px; font-weight: 800; }
.lrc-ai-model-picker { min-width: 250px; display: grid; gap: 5px; }
.lrc-ai-model-picker > label { display: flex; align-items: center; gap: 6px; color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.lrc-ai-model-picker select { min-width: 176px; }
.lrc-ai-model-actions { min-height: 30px; display: flex; align-items: center; gap: 6px; }
.lrc-ai-model-state { min-width: 58px; padding: 4px 7px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-panel); color: var(--app-text-muted); font-size: 12px; font-weight: 750; line-height: 1.2; text-align: center; }
.lrc-ai-model-state[data-state="ready"] { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }
.lrc-ai-model-state[data-state="missing"] { border-color: var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-ai-model-state[data-state="busy"] { border-color: var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-text); }
.lrc-ai-model-actions button { min-height: 30px; padding: 0 9px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.lrc-ai-model-progress {
  display: grid;
  flex: 1 1 100%;
  gap: 5px;
  min-width: 260px;
  padding: 7px 8px;
  border: 1px solid var(--status-info-border);
  border-radius: 7px;
  background: var(--status-info-bg);
  color: var(--status-info-text);
}
.lrc-ai-model-progress[hidden] { display: none; }
.lrc-ai-model-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}
.lrc-ai-model-progress-head output { font-weight: 750; }
.lrc-ai-model-progress progress {
  width: 100%;
  height: 7px;
  accent-color: var(--app-accent);
}
.lrc-ai-model-progress-meta {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}
.lrc-pitch-run { min-height: 36px; border: 1px solid var(--button-accent-border); border-radius: var(--control-radius); padding: 0 12px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 11px; font-weight: 800; white-space: nowrap; }
.lrc-pitch-run:hover:not(:disabled) { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.lrc-pitch-state { min-width: 260px; display: grid; grid-template-columns: 8px minmax(180px, 1fr); align-items: center; gap: 7px; margin-left: auto; color: var(--app-muted); font-size: 10px; }
.lrc-pitch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--app-faint); }
.lrc-ai-pitch-row.running .lrc-pitch-dot { background: var(--app-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 10%, transparent); }
.lrc-ai-pitch-row.error .lrc-pitch-dot { background: var(--app-coral); }
.lrc-pitch-meter { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: var(--control-radius); background: var(--app-line); }
.lrc-pitch-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--app-accent), var(--app-secondary)); transition: width .18s ease; }
@media (max-width: 900px) {
  .lrc-ai-kind { flex-basis: 100%; }
  .lrc-ai-state, .lrc-pitch-state { flex-basis: 100%; max-width: none; margin-left: 0; }
  .lrc-ai-model-picker { min-width: min(100%, 320px); }
}
.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; }
:where(*) {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) transparent !important;
}
:where(*)::-webkit-scrollbar { width: 7px !important; height: 7px !important; }
:where(*)::-webkit-scrollbar-track { background: transparent !important; }
:where(*)::-webkit-scrollbar-thumb {
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--app-scrollbar-thumb) !important;
  background-clip: padding-box;
}
/* Keep the inherited scrollbar-color stable during pointer/focus movement.
 * Updating it on every hovered ancestor invalidates the teaching subtree;
 * real playback traces show hundreds of unnecessary style recalculations.
 * Thumb-local feedback below does not change an inherited property. */
:where(*):hover::-webkit-scrollbar-thumb,
:where(*):focus-within::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb-hover) !important; background-clip: padding-box; }
:where(*)::-webkit-scrollbar-thumb:hover,
:where(*)::-webkit-scrollbar-thumb:active { background: var(--app-scrollbar-thumb-active) !important; background-clip: padding-box; }
.sidebar {
  width: 252px;
  padding: 18px 14px 14px;
  overflow-x: hidden;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--app-scrollbar-thumb) !important;
  background-clip: padding-box;
}
.sidebar:hover::-webkit-scrollbar-thumb,
.sidebar:focus-within::-webkit-scrollbar-thumb { background: var(--app-scrollbar-thumb-hover) !important; background-clip: padding-box; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-active) !important; background-clip: padding-box; }
.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-column: 1; grid-row: 1 / 3; align-self: center; }
.workspace-switcher > span:not(.status-dot):not(.sr-command-icon) { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher strong { grid-column: 2; grid-row: 2; 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; }
.project-browser-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 9px; }
.project-browser-heading-copy { display: grid; min-width: 0; gap: 2px; }
.project-browser-heading strong { color: var(--app-text); font-size: 13px; }
.project-browser-heading small { color: var(--app-muted); font-size: 12px; }
.project-browser-heading > #activeSongClear { min-height: 30px; padding: 0 8px; border: 1px solid var(--state-danger-line); border-radius: var(--control-radius); background: var(--state-danger-bg); color: var(--state-danger-text); font-size: 12px; font-weight: 750; white-space: nowrap; }
.project-browser-heading > #activeSongClear:hover:not(:disabled) { background: color-mix(in srgb, var(--app-coral) 20%, var(--app-panel)); }
.project-browser-heading > #activeSongClear:disabled { opacity: .45; cursor: default; }
.project-browser-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.project-browser-filters select { width: 100%; min-width: 0; height: 34px; padding-inline: 8px; border: 1px solid var(--control-border); border-radius: 5px; background: var(--control-bg); color: var(--control-text); font-size: 12px; }
.project-browser .project-search { height: 38px; }
.project-browser .project-search input,
.project-browser .project-list-item strong,
.project-browser .project-list-item small,
.project-browser .project-empty { font-size: 12px; }
.project-browser .project-list-item small { margin-top: 3px; color: var(--app-muted); }
.project-browser .project-list-item { min-height: 46px; }
.sidebar-lyric-remix { display: grid; width: 100%; min-height: 58px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: -7px 0 17px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--app-secondary) 42%, var(--app-line)); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-secondary) 11%, var(--app-panel)), var(--app-panel)); color: var(--app-text); text-align: left; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.sidebar-lyric-remix:hover { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 14%, var(--app-panel)); transform: translateY(-1px); }
.sidebar-lyric-remix:focus-visible { border-color: var(--app-secondary); outline: 2px solid color-mix(in srgb, var(--app-secondary) 48%, transparent); outline-offset: 2px; }
.sidebar-lyric-remix-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-secondary) 54%, var(--app-line)); border-radius: 7px; background: color-mix(in srgb, var(--app-secondary) 14%, var(--app-panel)); color: var(--app-secondary); font-size: 11px; font-weight: 900; }
.sidebar-lyric-remix > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.sidebar-lyric-remix strong { color: var(--app-text); font-size: 11px; }
.sidebar-lyric-remix small { overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-lyric-remix > i { color: var(--app-secondary); font-size: 15px; font-style: normal; }
.sidebar-lyric-remix[data-state="ready"] { box-shadow: inset 3px 0 0 var(--app-secondary); }
.sidebar-lyric-remix:not([data-state="ready"]) { border-style: dashed; background: var(--app-panel); }
.sidebar-lyric-remix:not([data-state="ready"]) .sidebar-lyric-remix-icon { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-faint); }
.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; }
.desktop-player-nav { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 48px; align-items: center; gap: 10px; margin-top: 12px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line)); border-radius: 6px; background: color-mix(in srgb, var(--app-accent-soft) 62%, var(--app-sidebar)); text-align: left; }
.desktop-player-nav:hover { border-color: var(--app-accent); background: var(--workspace-nav-active); }
.desktop-player-nav.active { border-color: var(--app-accent); background: var(--workspace-nav-active); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent-soft) 68%, transparent); }
.desktop-player-nav > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.desktop-player-nav strong { color: var(--app-text); font-size: 12px; font-weight: 700; }
.desktop-player-nav small { overflow: hidden; color: var(--app-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.desktop-player-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-accent); border-radius: 5px; color: var(--app-accent); font-size: 17px; }
.desktop-player-state { color: var(--app-accent); font: 14px/1 'Segoe UI Symbol', sans-serif; }
.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; }
.main-content { min-width: 0; padding: 0 32px 56px; overflow-x: hidden; background: var(--app-bg); }
.topbar { z-index: 110; display: grid; height: auto; min-height: 96px; min-width: 0; grid-template-columns: minmax(220px, 1fr) auto; grid-template-areas: "breadcrumbs utilities" "song song"; align-content: center; column-gap: 20px; row-gap: 6px; padding-block: 6px; }
.breadcrumbs { grid-area: breadcrumbs; display: flex; align-items: center; gap: 10px; min-width: 0; padding-inline: 2px; }
.breadcrumbs strong { overflow: hidden; max-width: 240px; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs .autosave { flex: 0 0 auto; white-space: nowrap; }
.top-actions { grid-area: utilities; min-width: 0; max-width: 100%; align-items: center; justify-self: end; flex: 0 1 auto; }
.top-actions > * { flex: 0 0 auto; }
.top-actions :is(.account-chip, .support-chip, #openSettings) { white-space: nowrap; }
.top-actions .account-chip { max-width: 260px; }
.top-actions #accountChipLabel { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.top-actions #newProject { display: none; }
.active-song-context { grid-area: song; display: grid; width: 100%; min-width: 0; max-width: none; min-height: 42px; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; justify-self: stretch; padding: 4px 6px 4px 8px; border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--app-line)); border-radius: 10px; background: color-mix(in srgb, var(--app-accent-soft) 54%, var(--app-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 8%, transparent); }
.active-song-context-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 17px; font-weight: 850; }
.active-song-context > div:nth-child(2) { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.active-song-context small { flex: 0 0 auto; color: var(--app-accent); font-size: 12px; font-weight: 800; white-space: nowrap; }
.active-song-context strong { overflow: hidden; min-width: 0; color: var(--app-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.active-song-context em { overflow: hidden; flex: 0 1 auto; color: var(--app-faint); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.active-song-context em::before { content: '·'; margin-right: 8px; color: var(--app-line); }
.active-song-context-actions { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.active-song-context-actions button { min-height: 30px; padding: 0 9px; border: 1px solid var(--button-secondary-border); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-text-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.active-song-context-actions button:hover { border-color: var(--app-accent); background: var(--button-secondary-bg-hover); color: var(--app-text); }
.active-song-context-actions #activeSongRemix { border-color: color-mix(in srgb, var(--app-secondary) 62%, var(--app-line)); background: color-mix(in srgb, var(--app-secondary) 12%, var(--app-panel)); color: var(--app-secondary); }
.active-song-context-actions #activeSongRemix:hover { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 18%, var(--app-panel)); color: var(--app-text); }
.active-song-context-actions #activeSongRemix[data-state="ready"] { box-shadow: inset 2px 0 0 var(--app-secondary); }
.active-song-context-actions #activeSongRemix:not([data-state="ready"]) { border-style: dashed; color: var(--app-muted); }
.active-song-context-actions #activeSongChoose { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.active-song-context-actions #activeSongNew { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.active-song-context-actions #activeSongImport { border-color: color-mix(in srgb, var(--app-warm) 52%, var(--app-line)); color: var(--app-warm); }
.active-song-context-actions #activeSongRecord { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.active-song-context-actions #activeSongRecord:disabled { opacity: .45; cursor: default; }
.active-song-context.is-empty { border-color: color-mix(in srgb, var(--app-warm) 54%, var(--app-line)); background: color-mix(in srgb, var(--app-warm) 8%, var(--app-panel)); }
.active-song-context.is-empty .active-song-context-icon { background: var(--app-warm); color: var(--app-accent-ink); }
.active-song-context.is-empty small { color: var(--app-warm); }
.project-header, .workflow-strip, .layout-focus-tabs { display: none !important; }
/* Page stage header: content-aligned title block, not a full-bleed card strip. */
.workspace-context {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  align-items: start;
  gap: 0;
  margin: 4px 0 18px;
  padding: 4px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--workspace-context-line);
  border-radius: 0;
  background: var(--app-sidebar);
  box-shadow: none;
  transform: none;
}
.workspace-context-copy { display: grid; min-width: 0; gap: 4px; }
.workspace-context .eyebrow {
  color: var(--app-accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
}
.workspace-context h1 {
  margin: 0;
  color: var(--app-text);
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.workspace-context p {
  max-width: 52rem;
  margin: 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 1.55;
}
.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: 12px; font-weight: 800; white-space: nowrap; }
.workspace-primary-action:hover { filter: brightness(1.04); }
.workspace-context-route,
.workspace-context-actions { display: none !important; }
body[data-workspace-module="creation"] .workspace-context.has-practice-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
}
body[data-workspace-module="creation"] .workspace-context.has-practice-entry .workspace-context-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
body[data-workspace-module="creation"] .workspace-context.has-practice-entry .workspace-secondary-action,
body[data-workspace-module="creation"] .workspace-context.has-practice-entry .workspace-import-song-action {
  display: none !important;
}
.workspace-secondary-action { min-height: 38px; white-space: nowrap; }
.workspace-import-song-action { min-height: 38px; border-color: color-mix(in srgb, var(--app-warm) 48%, var(--app-line)); color: var(--app-warm); white-space: nowrap; }
.workspace-import-song-action:hover { border-color: var(--app-warm); background: color-mix(in srgb, var(--app-warm) 10%, var(--app-panel)); color: var(--app-text); }
.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; container-type: inline-size; }
.delivery-summary { display: none; }
.post-workspace-panel[hidden], .post-overview-tools[hidden] { display: none !important; }
.post-workspace-header {
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(520px, 1.28fr);
  align-items: end;
  gap: 20px;
  margin: 4px 0 18px;
  padding: 4px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--workspace-context-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.post-workspace-header > div { display: grid; min-width: 0; gap: 5px; }
.post-workspace-header > div strong { overflow: hidden; color: var(--app-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.post-workspace-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 4px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 54%, var(--app-panel)); }
.post-workspace-tabs button { min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--app-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.post-workspace-tabs button:hover { color: var(--app-text); background: color-mix(in srgb, var(--app-panel-2) 70%, transparent); }
.post-workspace-tabs button[aria-selected="true"] { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.post-workspace-tabs button:focus-visible, .post-overview-cards button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.post-overview-panel { display: grid; gap: 16px; padding: clamp(18px, 2vw, 26px); border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line)); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-panel)), var(--app-panel)); }
.post-overview-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.post-overview-panel h3 { margin: 5px 0 0; color: var(--app-text); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.02em; }
.post-overview-panel > header p { max-width: 460px; margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; text-align: right; }
.post-overview-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 34%, var(--app-panel)); }
.post-overview-status > span { display: grid; min-width: 0; gap: 4px; padding: 12px 14px; border-left: 1px solid var(--app-line); }
.post-overview-status > span:first-child { border-left: 0; }
.post-overview-status small { color: var(--app-muted); font-size: 12px; }
.post-overview-status strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.post-overview-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.post-overview-cards button { position: relative; display: grid; min-height: 138px; align-content: start; gap: 7px; padding: 18px 18px 16px 62px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-panel-2) 52%, var(--app-panel)); color: var(--app-text); text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.post-overview-cards button:hover { border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-panel)); transform: translateY(-2px); }
.post-card-index { position: absolute; top: 18px; left: 18px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); border-radius: 7px; background: var(--app-accent-soft); color: var(--app-accent); font: 750 12px 'DM Mono', ui-monospace, monospace; }
.post-overview-cards strong { color: var(--app-text); font-size: clamp(19px, 1.35vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.post-overview-cards small { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.post-overview-cards em { align-self: end; margin-top: 5px; color: var(--app-accent); font-size: 12px; font-style: normal; font-weight: 750; }
body[data-workspace-module="delivery"] .release-manual-workflow[open] > summary { display: none; }
body[data-post-production-module="professional"] .release-export-section { display: none; }
body[data-post-production-module="publish"] .release-manual-lead,
body[data-post-production-module="publish"] .release-source-card,
body[data-post-production-module="publish"] .release-profile-section,
body[data-post-production-module="publish"] .release-vocal-chain { display: none; }
body[data-post-production-module="publish"] .release-manual-content { padding: 0; }
/* Delivery keeps the release-status inspector only on the publish step. The
   other post-production modules use the full workspace width without an empty
   or out-of-context tool rail. */
body[data-workspace-module="delivery"]:not([data-post-production-module="publish"]) .tool-column { display: none; }
body[data-workspace-module="delivery"]:not([data-post-production-module="publish"]) .content-grid { grid-template-columns: minmax(0, 1fr); }
body[data-workspace-module="delivery"]:not([data-post-production-module="publish"]) .editor-column { grid-column: 1 / -1; }
body[data-workspace-module="delivery"][data-post-production-module="publish"] .delivery-inspector { position: sticky; top: 14px; }
body[data-post-production-module="quick"] .smart-finish-workspace { margin-bottom: 0; }
body[data-post-production-module="preview"] .post-production-transport { margin-top: 0; }
body[data-post-production-module="professional"] .release-manual-workflow,
body[data-post-production-module="publish"] .release-manual-workflow { margin-top: 0; border: 0; background: transparent; }
body[data-post-production-module="professional"] .release-manual-content,
body[data-post-production-module="publish"] .release-manual-content { padding-top: 0; }
@container (max-width: 900px) {
  .post-workspace-header { grid-template-columns: minmax(0, 1fr); }
  .post-workspace-tabs { grid-template-columns: repeat(5, minmax(110px, 1fr)); overflow-x: auto; }
}
@container (max-width: 620px) {
  .post-overview-panel > header { display: grid; }
  .post-overview-panel > header p { text-align: left; }
  .post-overview-status, .post-overview-cards { grid-template-columns: minmax(0, 1fr); }
  .post-overview-status > span { border-top: 1px solid var(--app-line); border-left: 0; }
  .post-overview-status > span:first-child { border-top: 0; }
}
.delivery-summary-title { min-width: 0; }
.delivery-summary h2 { overflow: hidden; margin: 6px 0 0; color: var(--app-text); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.delivery-summary p { display: grid; max-width: 760px; gap: 3px; margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.delivery-summary p strong { color: var(--app-text-muted); font-size: 12px; }
.delivery-summary p span { color: var(--app-muted); }
@container (max-width: 720px) {
  .delivery-summary { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.smart-finish-workspace { margin-bottom: 14px; padding: clamp(16px, 2vw, 24px); border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 42%, var(--app-panel)), var(--app-panel)); box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 36%, transparent); }
.smart-finish-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.smart-finish-kicker { color: var(--app-accent); font: 700 9px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; }
.smart-finish-head h3 { margin: 7px 0 5px; color: var(--app-text); font-size: clamp(17px, 1.8vw, 22px); }
.smart-finish-head p { max-width: 650px; margin: 0; color: var(--app-muted); font-size: 10px; line-height: 1.65; }
.smart-finish-readiness { display: grid; min-width: 120px; gap: 3px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 34%, var(--app-panel)); text-align: right; }
.smart-finish-readiness strong { color: var(--app-text); font-size: 11px; }
.smart-finish-readiness small { color: var(--app-muted); font-size: 8px; }
.smart-finish-readiness[data-state="green"] { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); background: var(--app-accent-soft); }
.smart-finish-readiness[data-state="amber"] { border-color: color-mix(in srgb, var(--app-warm) 58%, var(--app-line)); background: color-mix(in srgb, var(--app-warm) 9%, var(--app-panel)); }
.smart-finish-readiness[data-state="red"] { border-color: color-mix(in srgb, var(--app-danger) 58%, var(--app-line)); background: color-mix(in srgb, var(--app-danger) 9%, var(--app-panel)); }
.smart-finish-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.smart-finish-modes label { position: relative; display: flex; min-height: 84px; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 35%, var(--app-panel)); cursor: pointer; }
.smart-finish-modes label:hover { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); }
.smart-finish-modes label:has(input:checked) { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 20%, transparent); }
.smart-finish-modes input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--app-accent); }
.smart-finish-modes span { display: grid; min-width: 0; gap: 5px; }
.smart-finish-modes strong { color: var(--app-text); font-size: 12px; }
.smart-finish-modes small { color: var(--app-muted); font-size: 9px; line-height: 1.45; }
.smart-finish-modes em { position: absolute; top: 8px; right: 8px; padding: 2px 5px; border-radius: 3px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 8px; font-style: normal; font-weight: 800; }
.smart-finish-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; max-width: 100%; gap: 9px; margin-top: 10px; }
.smart-finish-strength, .smart-finish-option { min-width: 0; padding: 11px 12px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 28%, var(--app-panel)); }
.smart-finish-strength { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.smart-finish-strength span, .smart-finish-option span { display: grid; min-width: 0; gap: 3px; }
.smart-finish-strength strong, .smart-finish-option strong { color: var(--app-text); font-size: 10px; }
.smart-finish-strength small, .smart-finish-option small { color: var(--app-muted); font-size: 8px; line-height: 1.4; }
.smart-finish-strength output { color: var(--app-accent); font: 700 11px 'DM Mono', ui-monospace, monospace; }
.smart-finish-strength input[type="range"] { width: 100%; grid-column: 1 / -1; accent-color: var(--app-accent); }
.smart-finish-option { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.smart-finish-option input { width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--app-accent); }
@container (max-width: 980px) {
  .smart-finish-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 580px) {
  .smart-finish-controls { grid-template-columns: minmax(0, 1fr); }
  .smart-finish-confirmation { align-items: stretch; flex-direction: column; }
  .smart-finish-confirmation > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr); }
}
.smart-finish-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.smart-finish-actions button { min-height: 44px; padding: 0 15px; border-radius: 7px; font-size: 10px; font-weight: 800; }
.smart-finish-analyze { border: 1px solid var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.smart-finish-primary { flex: 1; border: 1px solid var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.smart-finish-primary:disabled, .smart-finish-analyze:disabled { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-faint); cursor: not-allowed; }
.smart-finish-risk { border: 1px solid color-mix(in srgb, var(--app-warm) 58%, var(--app-line)); background: color-mix(in srgb, var(--app-warm) 10%, var(--app-panel)); color: var(--app-warm); }
.smart-finish-cancel { border: 1px solid color-mix(in srgb, var(--app-danger) 56%, var(--app-line)); background: color-mix(in srgb, var(--app-danger) 9%, var(--app-panel)); color: var(--app-danger); }
.smart-finish-confirmation { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--app-warm) 55%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--app-warm) 9%, var(--app-panel)); }
.smart-finish-confirmation[hidden] { display: none; }
.smart-finish-confirmation > div:first-child { display: grid; min-width: 0; gap: 4px; }
.smart-finish-confirmation strong { color: var(--app-text); font-size: 11px; }
.smart-finish-confirmation small { color: var(--app-muted); font-size: 9px; line-height: 1.5; }
.smart-finish-confirmation > div:last-child { display: flex; flex: 0 0 auto; gap: 7px; }
.smart-finish-confirmation button { min-height: 36px; padding: 0 11px; border: 1px solid var(--button-accent-border); border-radius: 6px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 9px; font-weight: 800; }
.smart-finish-confirmation button:first-child { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.smart-finish-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.smart-finish-steps li { display: grid; gap: 3px; justify-items: start; min-height: 52px; padding: 8px 9px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel); color: var(--app-muted); }
.smart-finish-steps li b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--app-faint) 28%, transparent); color: var(--app-text); font-size: 10px; }
.smart-finish-steps li span { font-size: 10px; line-height: 1.35; color: inherit; }
.smart-finish-steps li.is-active { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.smart-finish-steps li.is-active b { background: var(--app-accent); color: var(--app-bg); }
.smart-finish-steps li.is-done { border-color: color-mix(in srgb, var(--status-success, var(--app-accent)) 40%, var(--app-line)); color: var(--app-text); }
.smart-finish-source-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 30%, var(--app-panel)); }
.smart-finish-source-summary span { color: var(--app-muted); font-size: 9px; }
.smart-finish-source-summary strong { overflow: hidden; color: var(--app-text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.smart-finish-source-summary button { min-height: 34px; padding: 0 10px; border: 1px solid var(--button-accent-border); border-radius: 6px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 9px; font-weight: 800; }
.post-session-recovery { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--status-warning-text) 48%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--status-warning-bg) 62%, var(--app-panel)); }
.post-session-recovery[hidden] { display: none; }
.post-session-recovery > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.post-session-recovery > header div { display: grid; gap: 3px; }
.post-session-recovery > header span { color: var(--status-warning-text); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.post-session-recovery > header strong { color: var(--app-text); font-size: 14px; }
.post-session-recovery > header small { max-width: 54ch; color: var(--app-muted); font-size: 12px; line-height: 1.5; text-align: right; }
.post-session-recovery-list { display: grid; gap: 8px; }
.post-session-recovery-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel); }
.post-session-recovery-copy { display: grid; min-width: 0; gap: 4px; }
.post-session-recovery-copy strong { color: var(--app-text); font-size: 13px; }
.post-session-recovery-copy span, .post-session-recovery-copy small { color: var(--app-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.post-session-recovery-copy code { color: var(--app-accent); font: inherit; font-variant-numeric: tabular-nums; }
.post-session-recovery-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.post-session-recovery-actions button { min-height: 40px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 12px; font-weight: 750; cursor: pointer; }
.post-session-recovery-actions button[data-post-session-action="restart"] { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.post-session-recovery-actions button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.post-session-recovery-actions button:disabled { opacity: .45; cursor: wait; }
@media (max-width: 760px) {
  .post-session-recovery > header, .post-session-recovery-item { grid-template-columns: minmax(0, 1fr); display: grid; }
  .post-session-recovery > header small { text-align: left; }
  .post-session-recovery-actions { justify-content: start; }
}
.smart-finish-progress { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); border-radius: 7px; background: var(--app-accent-soft); }
.smart-finish-progress[hidden], .smart-finish-report[hidden], .smart-finish-result[hidden], .smart-finish-actions button[hidden] { display: none; }
.smart-finish-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--app-text); font-size: 10px; }
.smart-finish-progress > div:first-child span { color: var(--app-accent); font-variant-numeric: tabular-nums; }
.smart-finish-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--app-faint) 24%, transparent); }
.smart-finish-progress-track i { display: block; width: var(--smart-finish-progress, 0%); height: 100%; border-radius: inherit; background: var(--app-accent); transition: width .2s ease; }
.smart-finish-progress > small { color: var(--app-muted); font-size: 9px; }
.smart-finish-next-step { display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-line)); color: var(--app-muted); font-size: 9px; }
.smart-finish-next-step strong { flex: 0 0 auto; color: var(--app-accent); }
.smart-finish-report { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 2fr); gap: 10px; margin-top: 12px; }
.smart-finish-score { display: grid; min-height: 104px; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 30%, var(--app-panel)); }
.smart-finish-score strong { color: var(--app-text); font: 750 30px 'DM Mono', ui-monospace, monospace; }
.smart-finish-score span { color: var(--app-muted); font-size: 9px; }
.smart-finish-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.smart-finish-metrics span { display: grid; align-content: center; gap: 4px; min-height: 48px; padding: 8px; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-muted); font-size: 8px; }
.smart-finish-metrics b { color: var(--app-text); font-size: 10px; }
.smart-finish-issues { display: grid; grid-column: 1 / -1; gap: 5px; }
.smart-finish-issues span { padding: 7px 9px; border-left: 2px solid var(--app-line); background: color-mix(in srgb, var(--app-bg) 24%, var(--app-panel)); color: var(--app-muted); font-size: 9px; }
.smart-finish-issues .critical { border-left-color: var(--app-danger); color: var(--app-danger); }
.smart-finish-issues .warning { border-left-color: var(--app-warm); color: var(--app-warm); }
.smart-finish-result { margin-top: 12px; padding: 13px; border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--app-accent-soft) 48%, var(--app-panel)); }
.smart-finish-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.smart-finish-result-head strong, .smart-finish-result-head small { display: block; }
.smart-finish-result-head strong { color: var(--app-text); font-size: 12px; }
.smart-finish-result-head small { margin-top: 3px; color: var(--app-muted); font-size: 8px; }
.smart-finish-result-head .smart-finish-backend { margin-top: 7px; color: var(--app-accent); font-size: 9px; font-weight: 700; }
.smart-finish-result.has-fallback .smart-finish-result-head .smart-finish-backend { color: var(--app-warm); }
.smart-finish-result-head > span { padding: 4px 7px; border-radius: 4px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 8px; font-weight: 850; }
.smart-finish-compare { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.smart-finish-compare button { min-height: 36px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 9px; }
.smart-finish-compare button.is-playing { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.smart-finish-compare [data-smart-accompaniment][aria-checked="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.smart-finish-compare [data-smart-accompaniment]:disabled { opacity: .48; cursor: not-allowed; }
.smart-finish-preview-timeline { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-bg) 28%, var(--app-panel)); color: var(--app-muted); font: 9px 'DM Mono', ui-monospace, monospace; }
.smart-finish-preview-timeline input { width: 100%; accent-color: var(--app-accent); cursor: pointer; }
.smart-finish-output-device { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; align-items: center; gap: 8px; margin-top: 7px; color: var(--app-muted); font-size: 9px; }
.smart-finish-output-device select { width: 100%; min-width: 0; height: 32px; padding: 0 30px 0 9px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-elevated); color: var(--app-text); font-size: 9px; }
.smart-finish-output-device select option { background: var(--app-elevated); color: var(--app-text); }
.smart-finish-output-device button { width: 32px; height: 32px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); cursor: pointer; }
.smart-finish-output-device button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.smart-finish-preview-status { margin-top: 5px; color: var(--app-muted); font-size: 8px; }
.smart-finish-result.is-legacy .smart-finish-result-head > span { background: var(--app-warm); color: var(--app-on-warm); }
.smart-finish-result.is-legacy #smartFinishResultHint { color: var(--app-warm); }
.smart-finish-location { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-bg) 28%, var(--app-panel)); }
.smart-finish-location > span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.smart-finish-location small { color: var(--app-muted); font-size: 8px; }
.smart-finish-location strong { overflow: hidden; color: var(--app-text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-finish-location button { min-height: 32px; padding: 0 10px; border: 1px solid var(--button-accent-border); border-radius: 5px; color: var(--button-accent-text); background: var(--button-accent-bg); font-size: 9px; font-weight: 800; }
.smart-finish-location button[hidden] { display: none; }
.smart-finish-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.smart-finish-summary span { padding: 5px 7px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-muted); font-size: 8px; }
.post-production-transport { position: static; z-index: auto; display: grid; box-sizing: border-box; width: 100%; gap: 8px; margin-top: 16px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 36%, var(--app-line)); border-radius: 9px; background: color-mix(in srgb, var(--app-elevated) 94%, var(--app-panel)); box-shadow: none; transform: none; transition: border-color .16s ease, padding .16s ease; will-change: auto; }
.post-production-transport.is-collapsed { width: 100%; height: auto; gap: 0; margin-left: 0; padding: 10px 12px; border-radius: 9px; box-shadow: none; }
.post-production-transport > header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(160px, .9fr) auto; align-items: center; gap: 10px; }
.post-production-transport-heading { display: grid; min-width: 0; gap: 3px; }
.post-production-transport-heading span { color: var(--app-accent); font: 700 11px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; }
.post-production-transport-heading strong { overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.post-production-transport > header small { min-width: 0; overflow: hidden; color: var(--app-muted); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.post-production-transport-drag, #postProductionTransportReset { display: none !important; }
.post-production-player-glyph { display: none; }
.post-production-transport-actions { display: flex; align-items: center; gap: 6px; }
.post-production-transport-actions button { min-height: 32px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.post-production-transport-actions button:hover, .post-production-transport-actions button:focus-visible { border-color: var(--app-accent); color: var(--app-accent); outline: none; }
.post-production-transport-actions button[hidden], .post-production-transport-body[hidden] { display: none; }
.post-production-transport.is-collapsed > header { display: grid; }
.post-production-transport-body { display: grid; gap: 8px; }
.post-listening-gate {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-bg) 40%, var(--app-panel));
  display: grid;
  gap: 10px;
}
.post-listening-gate header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.post-listening-gate .eyebrow {
  display: block;
  color: var(--app-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.post-listening-gate strong {
  display: block;
  margin-top: 2px;
  color: var(--app-text);
  font-size: 14px;
}
.post-listening-gate header small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}
.post-listening-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: start;
}
.post-listening-gate-grid label,
.post-listening-score {
  display: grid;
  gap: 6px;
  color: var(--app-text);
  font-size: 12px;
}
.post-listening-gate-grid select,
.post-listening-gate-grid textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
  color: var(--app-text);
  font-size: 12px;
}
.post-listening-gate-grid textarea { min-height: 64px; resize: vertical; }
.post-listening-ab {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-listening-ab button,
#postListeningSave {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-panel));
  color: var(--app-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.post-listening-ab button:hover,
#postListeningSave:hover {
  border-color: color-mix(in srgb, var(--app-accent) 50%, var(--app-line));
}
.post-listening-score {
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
}
.post-listening-score legend {
  padding: 0 4px;
  color: var(--app-muted);
  font-size: 12px;
}
.post-listening-score label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.post-listening-status {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}
.is-listening-blocked {
  opacity: 0.55;
  outline: 1px dashed color-mix(in srgb, var(--status-warn, var(--app-warm)) 55%, var(--app-line));
}
.release-platform-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.release-advanced-grid select {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--app-panel);
  color: var(--app-text);
  font-size: 12px;
}
.post-production-transport .smart-finish-compare { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.post-production-transport .smart-finish-compare button { min-height: 40px; font-size: 12px; }
.post-production-transport .smart-finish-compare button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--app-accent) 70%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.post-production-transport .smart-finish-compare button:disabled { opacity: .45; cursor: not-allowed; }
.post-production-transport-lower { display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(240px, .7fr); align-items: stretch; gap: 8px; }
.post-production-playback-controls { display: grid; grid-template-columns: repeat(3, minmax(52px, 1fr)); gap: 6px; }
.post-production-playback-controls button { min-height: 40px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 12px; font-weight: 750; }
.post-production-playback-controls button:first-child { border-color: color-mix(in srgb, var(--app-accent) 64%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.post-production-playback-controls button:disabled { opacity: .42; cursor: not-allowed; }
.post-production-transport .smart-finish-preview-timeline, .post-production-transport .smart-finish-output-device { margin-top: 0; }
.post-production-transport audio { display: none; }
@container (max-width: 580px) {
  .post-production-transport-lower { grid-template-columns: minmax(0, 1fr); }
  .post-production-transport > header { grid-template-columns: minmax(0, 1fr) auto; }
  .post-production-transport > header small { grid-column: 2 / -1; max-width: none; text-align: left; }
  .post-production-transport .smart-finish-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.smart-finish-professional, .release-manual-workflow { margin-top: 12px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 24%, var(--app-panel)); }
.smart-finish-professional > summary, .release-manual-workflow > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; color: var(--app-text); cursor: pointer; list-style: none; }
.smart-finish-professional > summary::-webkit-details-marker, .release-manual-workflow > summary::-webkit-details-marker { display: none; }
.smart-finish-professional > summary span:first-child, .release-manual-workflow > summary span:first-child { display: grid; gap: 3px; }
.smart-finish-professional > summary strong, .release-manual-workflow > summary strong { font-size: 10px; }
.smart-finish-professional > summary small, .release-manual-workflow > summary small { color: var(--app-muted); font-size: 8px; }
.smart-finish-professional > summary span:last-child, .release-manual-workflow > summary span:last-child { color: var(--app-muted); font-size: 8px; }
.smart-finish-professional-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; }
.smart-finish-professional-grid > section { min-width: 0; padding: 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel); }
.smart-finish-professional-grid > section > strong { display: block; margin-bottom: 8px; color: var(--app-text); font-size: 10px; }
.smart-finish-professional-grid small { color: var(--app-muted); font-size: 8px; }
.smart-finish-ranking, .smart-finish-profile-lines, .smart-finish-plan-lines { display: grid; gap: 5px; }
.smart-finish-ranking span, .smart-finish-profile-lines span, .smart-finish-plan-lines span { display: flex; justify-content: space-between; gap: 8px; color: var(--app-muted); font-size: 8px; }
.smart-finish-ranking span:first-child { color: var(--app-accent); }
.release-manual-content { padding: 0 12px 2px; }
.release-manual-lead { margin: 0 0 12px; color: var(--app-muted); font-size: 11px; line-height: 1.5; }
.release-manual-workflow:not([open]) { background: var(--app-panel); }
.release-source-card, .release-profile-section, .release-vocal-chain, .release-export-section { margin-bottom: 12px; padding: 18px; border: 1px solid var(--app-line); border-radius: 9px; background: linear-gradient(145deg, var(--app-panel), color-mix(in srgb, var(--app-panel-2) 62%, var(--app-panel))); box-shadow: 0 10px 28px color-mix(in srgb, var(--app-shadow) 32%, transparent); }
.release-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.release-section-head > div { display: flex; min-width: 0; align-items: center; gap: 10px; }
.release-section-head > div > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); border-radius: 6px; background: var(--app-accent-soft); color: var(--app-accent); font: 700 9px 'DM Mono', ui-monospace, monospace; }
.release-section-head h3 { margin: 0; color: var(--app-text); font-size: 14px; }
.release-section-head > small { overflow: hidden; color: var(--app-muted); font-size: 10px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.release-source-grid { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(210px, 1.3fr) minmax(180px, 1fr); gap: 10px; }
.release-source-grid label, .release-source-item { display: grid; min-width: 0; gap: 6px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 36%, var(--app-panel)); color: var(--app-muted); font-size: 9px; }
.release-source-grid select { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--app-panel-2); color: var(--app-text); font-size: 11px; }
.release-source-item strong { overflow: hidden; color: var(--app-text); font-size: 11px; font-weight: 650; line-height: 32px; text-overflow: ellipsis; white-space: nowrap; }
.release-profile-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.release-profile-card { position: relative; display: grid; min-height: 94px; align-content: center; gap: 8px; padding: 13px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 34%, var(--app-panel)); cursor: pointer; }
.release-profile-card:hover { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); }
.release-profile-card:has(input:checked) { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent); }
.release-profile-card input { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; accent-color: var(--app-accent); }
.release-profile-card > span { display: flex; align-items: center; gap: 7px; }
.release-profile-card b { color: var(--app-text); font-size: 12px; }
.release-profile-card em { padding: 2px 5px; border-radius: 3px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 8px; font-style: normal; font-weight: 800; }
.release-profile-card small { max-width: 190px; color: var(--app-muted); font-size: 9px; line-height: 1.55; }
.release-advanced { margin-top: 11px; border-top: 1px solid var(--app-line); }
.release-advanced > summary { display: flex; min-height: 40px; align-items: center; justify-content: space-between; color: var(--app-text); cursor: pointer; list-style: none; }
.release-advanced > summary::-webkit-details-marker { display: none; }
.release-advanced > summary > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.release-advanced > summary strong { font-size: 10px; }
.release-advanced > summary small { color: var(--app-muted); font-size: 9px; }
.release-advanced > summary > span:last-child { color: var(--app-muted); transition: transform .2s ease; }
.release-advanced[open] > summary > span:last-child { transform: rotate(180deg); }
.release-advanced-grid { display: grid; grid-template-columns: 1fr 1fr minmax(210px, 1.15fr); gap: 12px; padding: 4px 0 3px; }
.release-advanced-grid > label:not(.release-share-toggle) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; color: var(--app-muted); font-size: 10px; }
.release-advanced-grid output { color: var(--app-text); font-variant-numeric: tabular-nums; }
.release-advanced-grid input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--app-accent); }
.release-share-toggle { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 6px; }
.release-share-toggle input { width: 15px; height: 15px; flex: 0 0 15px; accent-color: var(--app-accent); }
.release-share-toggle span { min-width: 0; }
.release-share-toggle strong, .release-share-toggle small { display: block; }
.release-share-toggle strong { color: var(--app-text); font-size: 10px; }
.release-share-toggle small { margin-top: 2px; color: var(--app-muted); font-size: 8px; }
.release-post-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }
.release-post-presets > button { min-height: 32px; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 9px; font-weight: 750; cursor: pointer; }
.release-post-presets > button[aria-pressed="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.release-post-presets > label { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; margin-left: auto; color: var(--app-muted); font-size: 9px; }
.release-post-presets input { accent-color: var(--app-accent); }
.release-vocal-chain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.release-vocal-chain-grid label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-bg) 28%, var(--app-panel)); color: var(--app-muted); font-size: 9px; }
.release-vocal-chain-grid output { color: var(--app-text); font-variant-numeric: tabular-nums; }
.release-vocal-chain-grid input { grid-column: 1 / -1; width: 100%; accent-color: var(--app-accent); }
.release-vocal-chain.is-bypassed .release-vocal-chain-grid { opacity: .48; }
.release-vocal-preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.release-vocal-preview-actions button { min-height: 34px; padding: 0 12px; border: 1px solid var(--button-accent-border); border-radius: 6px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 9px; font-weight: 800; cursor: pointer; }
.release-vocal-preview-actions button:disabled { opacity: .52; cursor: wait; }
.release-vocal-preview-actions span { min-width: 220px; flex: 1; color: var(--app-muted); font-size: 8px; line-height: 1.5; }
.release-export-actions { display: flex; gap: 8px; }
.release-export-primary, .release-export-cancel { min-height: 44px; padding: 0 16px; border-radius: 7px; font-size: 11px; font-weight: 800; }
.release-export-primary { display: inline-flex; flex: 1; align-items: center; justify-content: space-between; border: 1px solid var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.release-export-primary:hover { filter: brightness(1.04); }
.release-export-primary:disabled { border-color: var(--app-line); background: var(--app-panel-2); color: var(--app-faint); cursor: not-allowed; filter: none; }
.release-export-cancel { border: 1px solid color-mix(in srgb, var(--app-danger) 56%, var(--app-line)); background: color-mix(in srgb, var(--app-danger) 10%, var(--app-panel)); color: var(--app-danger); }
.release-progress { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--app-accent) 32%, var(--app-line)); border-radius: 7px; background: var(--app-accent-soft); }
.release-progress[hidden], .release-export-cancel[hidden] { display: none; }
.release-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--app-text); font-size: 10px; }
.release-progress > div:first-child span { color: var(--app-accent); font-variant-numeric: tabular-nums; }
.release-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--app-faint) 24%, transparent); }
.release-progress-track i { display: block; width: var(--release-progress, 0%); height: 100%; border-radius: inherit; background: var(--app-accent); transition: width .2s ease; }
.release-progress > small { color: var(--app-muted); font-size: 9px; }
.release-result { margin-top: 12px; }
.release-result:empty { display: none; }
.release-result-card { padding: 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--app-line)); border-radius: 8px; background: color-mix(in srgb, var(--app-accent-soft) 48%, var(--app-panel)); }
.release-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.release-result-head strong, .release-result-head small { display: block; }
.release-result-head strong { color: var(--app-text); font-size: 12px; }
.release-result-head small { margin-top: 4px; color: var(--app-muted); font-size: 9px; }
.release-result-badge { padding: 4px 7px; border-radius: 4px; background: var(--app-accent); color: var(--app-accent-ink); font-size: 8px; font-weight: 900; white-space: nowrap; }
.release-result-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.release-result-metrics span { padding: 8px; border: 1px solid color-mix(in srgb, var(--app-line) 74%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--app-bg) 32%, transparent); color: var(--app-muted); font-size: 8px; }
.release-result-metrics b { display: block; margin-top: 3px; color: var(--app-text); font-size: 10px; font-weight: 700; }
.release-result-files { display: grid; gap: 5px; margin-top: 10px; }
.release-result-files span { overflow: hidden; color: var(--app-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.release-result-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.release-result-actions button { min-height: 30px; padding: 0 9px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 9px; }
.delivery-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.delivery-steps button { display: grid; grid-template-columns: 38px minmax(0, 1fr); min-height: 66px; align-items: center; gap: 9px; padding: 9px 10px; 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: 36px; height: 30px; grid-row: 1 / 3; place-items: center; border-radius: 5px; background: var(--app-accent-soft); color: var(--app-accent); font: 600 8px 'DM Mono', ui-monospace, monospace; }
.delivery-steps button strong { align-self: end; font-size: 10px; }
.delivery-steps button small { align-self: start; overflow: hidden; color: var(--app-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.delivery-checklist { display: grid; gap: 8px; margin: 15px 0; }
.delivery-checklist span { position: relative; min-height: 26px; padding: 6px 8px 6px 28px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-muted); font-size: 10px; line-height: 1.35; }
.delivery-checklist span::before { position: absolute; top: 5px; left: 8px; content: '•'; color: var(--app-faint); font-weight: 900; }
.delivery-checklist span.is-ready { border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-line)); color: var(--app-text); }
.delivery-checklist span.is-ready::before { content: '✓'; color: var(--app-accent); }
.delivery-checklist span.is-missing::before { content: '!'; color: var(--app-warm); }
.release-inspector-score { color: var(--app-accent); font: 700 12px 'DM Mono', ui-monospace, monospace; }
.release-inspector-hint { margin: 0 0 12px; color: var(--app-muted); font-size: 9px; line-height: 1.55; }
body[data-workspace-module="creation"] :is(.delivery-workspace, .delivery-inspector) { display: none; }
body[data-workspace-module="creation"] :is(.audio-section-head, #audioList, .version-panel, .folder-panel) { display: block; }
body[data-workspace-module="creation"]:not(.ai-tools-visible) :is(#aiToolsPanel, .suno-panel, .creation-notes-panel, .creation-record-panel) { 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; }

/* Performance landing keeps one header and drops import chrome until practice opens. */
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .workspace-context-copy {
  display: grid;
  gap: 4px;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing h1 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing p {
  max-width: none;
  font-size: 12px;
  line-height: 1.45;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .workspace-context-route {
  display: none !important;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .workspace-context-actions {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .workspace-secondary-action,
body[data-workspace-module="performance"]:not(.practice-view-open) .workspace-context.is-performance-landing .workspace-import-song-action {
  display: none !important;
}
.workspace-readiness-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel-2);
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.workspace-readiness-pill.is-complete {
  border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel));
  color: var(--app-accent);
}
.workspace-readiness-pill.is-pending {
  border-color: color-mix(in srgb, var(--app-warm) 44%, var(--app-line));
  color: var(--app-warm);
}
body[data-workspace-module="performance"]:not(.practice-view-open) :is(
  .lyrics-section-head,
  .audio-section-head,
  #audioList,
  .suno-panel,
  .creation-notes-panel,
  .folder-panel,
  .delivery-inspector,
  .song-setup-journey,
  .asset-inspector-summary,
  .asset-version-management
) { display: none !important; }
body[data-workspace-module="performance"]:not(.practice-view-open) .lyrics-section-head + .lyrics-card {
  margin-top: 0;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .asset-inspector-section .asset-inspector-section-head .eyebrow {
  display: none;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .asset-inspector-section .asset-inspector-section-head h3 {
  margin-top: 0;
  font-size: 13px;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .asset-inspector-section ~ .asset-inspector-section {
  display: none !important;
}
body[data-workspace-module="performance"]:not(.practice-view-open) .asset-inspector-panel {
  padding-top: 0;
}
body[data-workspace-module="performance"]:not(.practice-view-open) #practiceRecordingLibrary.has-recordings {
  display: block !important;
}

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="creation"] #audioList,
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="creation"] .audio-row,
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="creation"] .audio-row:hover,
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="creation"] .audio-row.active,
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="creation"] .audio-row:focus-visible,
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 auto; 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-path-row .asset-folder-change { width: auto; min-width: 76px; padding: 0 9px; color: var(--app-text); font-size: 9px; font-weight: 700; }
.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-inspector-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.asset-refresh-action { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 5px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 10px; font-weight: 700; }
.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 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-state { display: grid; justify-items: center; gap: 4px; }
.asset-check-preview-toggle { min-width: 54px; min-height: 24px; padding: 0 6px; border: 1px solid var(--app-line); border-radius: 4px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 8px; cursor: pointer; }
.asset-check-row.is-previewing .asset-check-preview-toggle { border-color: var(--button-accent-border); background: var(--state-selected); color: var(--app-accent); }
.asset-check-preview-progress { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 0 0 8px; }
.asset-check-preview-progress[hidden] { display: none; }
.asset-check-preview-progress input { width: 100%; accent-color: var(--app-accent); cursor: pointer; }
.asset-check-preview-progress output { min-width: 64px; color: var(--app-faint); font: 8px 'DM Mono', ui-monospace, monospace; text-align: right; }
.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-delete { color: var(--status-error-text); border-color: var(--status-error-border); background: var(--status-error-bg); font-size: 12px; font-weight: 700; }
.asset-check-delete-spacer { display: block; min-width: 44px; }
.asset-check-delete:hover { color: var(--status-error-text); border-color: var(--status-error-border); background: color-mix(in srgb, var(--status-error-bg) 78%, var(--app-panel) 22%); }
.asset-check-row > button:hover, .asset-check-preview-toggle: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: 0; padding-inline: 0; }
  .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; }
  .delivery-inspector { 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: 0; padding-inline: 0; }
  .workspace-context-actions { justify-self: start; }
  .tool-column { grid-template-columns: minmax(0, 1fr); }
  .release-source-grid, .release-profile-options, .release-advanced-grid, .release-vocal-chain-grid { grid-template-columns: minmax(0, 1fr); }
  .smart-finish-head { flex-direction: column; }
  .smart-finish-readiness { width: 100%; text-align: left; }
  .smart-finish-modes, .smart-finish-controls, .smart-finish-professional-grid { grid-template-columns: minmax(0, 1fr); }
  .smart-finish-report { grid-template-columns: minmax(0, 1fr); }
  .smart-finish-metrics, .smart-finish-compare, .smart-finish-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-result-metrics, .delivery-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-section-head { align-items: flex-start; flex-direction: column; }
  .release-section-head > small { text-align: left; white-space: normal; }
  .delivery-steps button { grid-template-columns: 38px 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="creation"].asset-left-column-collapsed .sidebar { display: none; }
body[data-workspace-module="creation"].asset-right-column-collapsed .tool-column { display: none; }
body[data-workspace-module="creation"].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 > button[data-recording-batch] { min-height: 30px; padding: 0 10px; border: 1px solid var(--button-accent-border); border-radius: 5px; color: var(--button-accent-text); background: var(--button-accent-bg); cursor: pointer; }
.practice-recording-select { display: grid; place-items: center; width: 22px; flex: 0 0 22px; }
.practice-recording-select input { width: 15px; height: 15px; accent-color: var(--app-accent); }
.practice-recording-mixer { margin-top: 14px; padding: 16px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel); }
.practice-recording-mixer header { display: flex; justify-content: space-between; gap: 14px; }
.practice-recording-mixer header button { width: 30px; height: 30px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--button-secondary-bg); cursor: pointer; }
.practice-mixer-takes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; color: var(--app-muted); font-size: 11px; }
.practice-mixer-takes span { padding: 4px 7px; border: 1px solid var(--app-line); border-radius: 4px; background: var(--app-panel-2); }
.practice-mixer-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.practice-mixer-controls label { display: grid; gap: 5px; color: var(--app-muted); font-size: 11px; }
.practice-mixer-controls output { color: var(--app-text); }
.practice-mixer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.practice-mixer-actions button, .practice-mixer-actions select { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-text); background: var(--button-secondary-bg); cursor: pointer; }
.practice-mixer-actions button[data-mixer-export="mix"] { border-color: var(--button-accent-border); color: var(--button-accent-text); background: var(--button-accent-bg); }
.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="creation"].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 *, .release-progress-track i, .release-advanced > summary > span:last-child { transition: none !important; }
}

/* —— Shell IA + task progress (2026-08-04) —— */
.shell-nav { display: grid; gap: 2px; margin: 0 0 16px; }
.shell-nav-item { min-height: 40px; }
.project-stage-block { margin-bottom: 8px; }
.production-tools-nav { display: grid; gap: 2px; margin: 8px 0 4px; padding: 8px 0 0; border-top: 1px solid var(--app-line); }
.production-tools-title { margin-top: 0; }
.production-tool-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); min-height: 48px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; }
.production-tool-item:hover { background: var(--workspace-nav-hover); }
.production-tool-item.active { border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); background: var(--workspace-nav-active); }
.production-tool-item > span:last-child { display: grid; min-width: 0; gap: 2px; }
.production-tool-item strong { color: var(--app-text); font-size: 11px; font-weight: 700; }
.production-tool-item small { color: var(--app-faint); font-size: 9px; }
.module-nav-item { position: relative; }
.creator-flow-nav { position: relative; gap: 3px; }
.creator-flow-nav .module-nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 23px;
  top: calc(50% + 15px);
  width: 1px;
  height: calc(50% - 1px);
  background: var(--app-line);
}
.creator-flow-nav .module-index { position: relative; z-index: 1; }
.stage-status {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 50%;
  color: var(--app-faint);
  background: var(--app-panel);
  font: 700 9px/1 'DM Mono', ui-monospace, monospace;
}
.stage-status.is-ready {
  border-color: color-mix(in srgb, var(--status-success) 60%, var(--app-line));
  color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 12%, var(--app-panel));
}

.task-center { max-width: 920px; margin: 0 auto; padding: 12px 0 48px; }
.task-center-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.task-center-head h1 { margin: 6px 0; color: var(--app-text); font-size: 24px; }
.task-center-head p { margin: 0; color: var(--app-muted); font-size: 12px; }
.task-center-list { display: grid; gap: 8px; }
.task-center-empty { display: grid; min-height: 160px; place-content: center; gap: 6px; text-align: center; color: var(--app-muted); border: 1px dashed var(--app-line); border-radius: 8px; }
.task-center-empty strong { color: var(--app-text); }
.task-center-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .6fr) 64px; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); }
.task-center-row strong { display: block; color: var(--app-text); font-size: 13px; }
.task-center-row small { display: block; margin-top: 4px; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.task-center-output { max-height: 180px; margin: 9px 0 0; overflow: auto; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-control-surface); color: var(--app-text); font: 12px/1.55 var(--font-family-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-center-meter { height: 6px; overflow: hidden; border-radius: 999px; background: var(--app-panel-2); }
.task-center-meter > i { display: block; height: 100%; width: 0; background: var(--app-accent); }
.task-center-row em { color: var(--app-accent); font: 600 11px "DM Mono", ui-monospace, monospace; font-style: normal; text-align: right; }
.task-center-row[data-status="failed"] em { color: var(--status-danger-text, var(--app-coral)); }
body[data-shell-surface="tasks"] :is(.project-header, #workspaceContext, .song-setup-journey, #creatorGuide, #creatorGuideReturn, #practiceStudio, #separationWorkspace, .writing-workspace-shell, #workspaceHub, #libraryView, #activeSongContext, .topbar .breadcrumbs) { display: none !important; }
body[data-shell-surface="tasks"] #taskCenterView { display: block !important; }
body[data-shell-surface="tasks"] .topbar { justify-content: flex-end; }
body[data-shell-surface="tasks"] .top-actions { margin-left: auto; }

.sr-task-banner {
  position: fixed; left: 50%; bottom: 22px; z-index: 2147483000; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--app-line);
  border-radius: 12px; background: color-mix(in srgb, var(--app-panel) 92%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--app-shadow) 55%, transparent); backdrop-filter: blur(10px);
}
.sr-task-banner-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; }
.sr-task-banner-copy { min-width: 0; }
.sr-task-banner-copy strong { display: block; color: var(--app-text); font-size: 12px; }
.sr-task-banner-copy span { display: block; overflow: hidden; color: var(--app-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sr-task-banner-pct { color: var(--app-accent); font: 700 12px "DM Mono", ui-monospace, monospace; }
.sr-task-banner-actions { display: inline-flex; align-items: center; gap: 6px; }
.sr-task-banner-meter { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--app-panel-2); }
.sr-task-banner-meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 55%, var(--app-secondary, var(--app-accent)))); transition: width 180ms ease; }
.sr-task-banner[data-status="failed"] .sr-task-banner-meter > i { background: var(--status-danger-text, var(--app-coral)); }
.sr-task-banner[data-status="queued"] .sr-task-banner-meter > i { width: 18% !important; background: color-mix(in srgb, var(--app-accent) 55%, var(--app-panel-2)); animation: sr-task-pulse 1.2s ease-in-out infinite; }
.sr-task-banner-open,
.sr-task-banner-cancel,
.sr-task-banner-dismiss { min-height: 28px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 10px; cursor: pointer; }
.sr-task-banner-cancel { border-color: color-mix(in srgb, var(--app-coral, var(--status-danger-text)) 42%, var(--app-line)); color: var(--status-danger-text, var(--app-coral)); }
.sr-task-banner-cancel:hover { background: var(--state-danger-bg, var(--app-panel-2)); }
.sr-task-banner-dismiss { min-width: 28px; padding: 0; font-size: 14px; line-height: 1; }
.sr-task-banner-open:hover,
.sr-task-banner-dismiss:hover { color: var(--app-text); background: var(--state-hover); }
.sr-task-banner button:disabled { opacity: .45; cursor: wait; }
.task-center-row-end { display: grid; justify-items: end; gap: 6px; }
.task-center-row-end button { min-height: 26px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--app-coral, var(--status-danger-text)) 42%, var(--app-line)); border-radius: 5px; background: var(--button-secondary-bg); color: var(--status-danger-text, var(--app-coral)); font-size: 12px; cursor: pointer; }
@keyframes sr-task-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

body.practice-view-open #playerBar,
body.lrc-align-view-open #playerBar,
body.pitch-workspace-open #playerBar { display: none !important; }
body:not([data-workspace-module="creation"]) #practiceRecordingLibrary { display: none !important; }
body[data-workspace-module="creation"] #practiceRecordingLibrary { display: none; }
body[data-workspace-module="creation"] #practiceRecordingLibrary.has-recordings { display: block; }

body.lrc-align-view-open #lrcAlignModal {
  position: fixed; inset: 0; z-index: 120; display: flex !important; align-items: stretch; justify-content: stretch;
  padding: 0; background: var(--app-bg);
}
body.lrc-align-view-open .topbar { pointer-events: none; }
body.lrc-align-view-open .vc-help { display: none !important; }
body.lrc-align-view-open #lrcAlignModal .lrc-modal {
  width: 100%; max-width: none; max-height: none; height: 100%; margin: 0; border-radius: 0;
  border: 0; box-shadow: none;
}
/* Desktop chrome occupies normal viewport space but full-screen workspaces use
   fixed/viewport sizing. Reserve that space so editor headers and actions stay visible. */
html.desktop-runtime body.lrc-align-view-open #lrcAlignModal {
  top: 86px;
  bottom: 0;
  height: auto;
}
html.desktop-runtime body.lrc-align-view-open #lrcAlignModal .lrc-modal {
  height: auto;
  min-height: 0;
}
html.desktop-runtime body.practice-view-open :is(.app-shell, .main-content) {
  height: calc(100vh - 86px);
}
html.desktop-runtime body.practice-view-open .practice-studio {
  --practice-workspace-height: calc(100vh - 86px);
}
html.desktop-runtime body.practice-recording-focus :is(.main-content, #practiceStudio),
html.desktop-runtime body.pitch-workspace-open :is(.main-content, #practiceStudio),
html.desktop-runtime body:has(.practice-studio.pitch-editor-open) :is(.main-content, #practiceStudio) {
  height: calc(100vh - 86px);
  max-height: calc(100vh - 86px);
}
body.pitch-workspace-open .practice-secondary-panel,
body.pitch-workspace-open .practice-source-settings,
body.pitch-workspace-open .practice-readiness { display: none !important; }
body.pitch-workspace-open .practice-head .practice-kicker::after { content: " · 音高编辑工作台"; }

/* Focused production editors use the full canvas; navigation remains one Esc/close away. */
body.pitch-workspace-open :is(.sidebar, .sidebar-resize-handle, .sidebar-collapse-handle, .vc-help) { display: none !important; }
body:has(.practice-studio.pitch-editor-open) :is(.sidebar, .sidebar-resize-handle, .sidebar-collapse-handle, .vc-help) { display: none !important; }
body.pitch-workspace-open .main-content {
  width: 100%;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}
body:has(.practice-studio.pitch-editor-open) .main-content {
  width: 100%;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}
body.pitch-workspace-open #practiceStudio {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-top: 0;
}
body:has(.practice-studio.pitch-editor-open) #practiceStudio {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  border-top: 0;
}

/* Compact project rail: keep all four stages visible on common laptop heights. */
.sidebar { width: var(--sidebar-width, 232px); }
.sidebar .brand { margin-bottom: 13px; }
.sidebar .workspace-switcher { min-height: 52px; margin-bottom: 12px; }
.shell-nav { margin-bottom: 11px; }
.module-nav .module-nav-item { min-height: 50px; }
.production-tools-nav { margin-top: 5px; padding-top: 5px; }
.production-tool-item { min-height: 42px; }
.desktop-player-nav { min-height: 44px; margin-top: 7px; }

/* Guided creator flow: keep the first step focused and leave the full workstation available on demand. */
.production-tools-nav[hidden] { display: none !important; }
.creator-guide,
.creator-guide-return { display: none; }
body[data-workspace-module="creation"][data-creator-mode="guided"] .content-grid { display: none !important; }
body[data-workspace-module="creation"][data-creator-mode="guided"] .creator-guide { display: grid; }
body[data-workspace-module="creation"][data-creator-mode="guided"] .workspace-context { grid-template-columns: minmax(0, 1fr); min-height: 0; }
body[data-workspace-module="creation"][data-creator-mode="guided"] .workspace-context-route,
body[data-workspace-module="creation"][data-creator-mode="guided"] .workspace-context-actions { display: none; }

/* Entry screens are centered compositions — keep the stage header on the same axis. */
body.ai-writing-entry-open .workspace-context,
body:has(#creatorGuide.is-start-choice) .workspace-context {
  justify-items: center;
  text-align: center;
}
body.ai-writing-entry-open .workspace-context-copy,
body:has(#creatorGuide.is-start-choice) .workspace-context-copy {
  justify-items: center;
  width: min(760px, 100%);
}
body.ai-writing-entry-open .workspace-context p,
body:has(#creatorGuide.is-start-choice) .workspace-context p {
  max-width: 42rem;
  margin-inline: auto;
}
body[data-workspace-module="creation"][data-creator-mode="advanced"] .creator-guide-return { display: inline-flex; }

.creator-guide { width: min(1180px, 100%); margin: 18px auto 80px; gap: 18px; }
.creator-guide-head {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 0 2px;
}
/* Empty import start already has the stage header; drop the duplicate guide chrome. */
body:has(#creatorGuide.is-start-choice) .creator-guide-head { display: none; }

.creator-guide-step { display: flex; align-items: center; gap: 14px; }
.creator-guide-step > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 62%, var(--app-line)); border-radius: 12px; background: var(--app-accent-soft); color: var(--app-accent-readable); font: 700 13px 'DM Mono', ui-monospace, monospace; }
.creator-guide-step div { display: grid; gap: 3px; }
.creator-guide-step small { color: var(--app-faint); font-size: 12px; }
.creator-guide-step strong { color: var(--app-text); font-size: 17px; }
.creator-guide-progress { display: flex; align-items: center; gap: 12px; color: var(--app-muted); font-size: 12px; }
.creator-guide-progress > span { width: 160px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--app-line); }
.creator-guide-progress i { display: block; width: var(--creator-progress, 0%); height: 100%; border-radius: inherit; background: var(--app-accent); transition: width 240ms ease; }
.creator-guide-progress strong { color: var(--app-text); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.creator-guide-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); gap: 18px; }
.creator-guide-focus,
.creator-guide-checklist { border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.creator-guide-focus { position: relative; display: grid; min-height: 430px; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 42px; overflow: hidden; padding: 54px; background: radial-gradient(circle at 17% 42%, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--app-panel) 94%, var(--app-accent-soft)), var(--app-panel)); }
.creator-guide-focus::after { position: absolute; right: -90px; bottom: -150px; width: 330px; height: 330px; border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-line)); border-radius: 50%; content: ''; pointer-events: none; }
.creator-guide-symbol { position: relative; display: grid; width: 156px; height: 156px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); border-radius: 38px; background: color-mix(in srgb, var(--app-accent-soft) 82%, var(--app-panel)); color: var(--app-accent); box-shadow: 0 24px 60px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.creator-guide-symbol span { position: relative; z-index: 1; font-size: 66px; line-height: 1; }
.creator-guide-symbol i { position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--app-accent) 30%, transparent); border-radius: 28px; transform: rotate(8deg); }
.creator-guide-copy { position: relative; z-index: 1; min-width: 0; }
.creator-guide-badge { display: inline-flex; padding: 7px 10px; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent-readable); font-size: 12px; font-weight: 700; }
.creator-guide-copy h2 { max-width: 620px; margin: 18px 0 12px; color: var(--app-text); font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.04em; }
.creator-guide-copy > p { max-width: 600px; margin: 0; color: var(--app-muted); font-size: 14px; line-height: 1.8; }
.creator-lyrics-paste { display: grid; gap: 10px; margin-top: 22px; padding: 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); border-radius: 12px; background: color-mix(in srgb, var(--app-bg) 36%, var(--app-panel)); box-shadow: inset 3px 0 0 var(--app-accent); }
.creator-lyrics-paste[hidden] { display: none !important; }
.creator-lyrics-paste > header,
.creator-lyrics-paste > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.creator-lyrics-paste > header > div { display: grid; gap: 3px; }
.creator-lyrics-paste > header strong { color: var(--app-text); font-size: 12px; }
.creator-lyrics-paste > header span,
.creator-lyrics-paste > header output,
.creator-lyrics-paste > footer > span { color: var(--app-faint); font-size: 12px; }
.creator-lyrics-paste > header output { font-variant-numeric: tabular-nums; white-space: nowrap; }
.creator-lyrics-paste textarea { width: 100%; min-height: 190px; resize: vertical; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-text); padding: 12px 13px; line-height: 1.7; }
.creator-lyrics-paste textarea::placeholder { color: var(--app-faint); }
.creator-lyrics-paste textarea:focus { border-color: var(--app-accent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 18%, transparent); }
.creator-lyrics-paste > footer > div { display: flex; flex: 0 0 auto; gap: 7px; }
.creator-lyrics-paste button { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; }
.creator-lyrics-paste #creatorLyricsPasteSave { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); font-weight: 800; }
.creator-lyrics-paste button:disabled { opacity: .5; cursor: not-allowed; }
.creator-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.creator-guide-primary,
.creator-guide-secondary { min-height: 50px; padding: 0 20px; border: 1px solid var(--button-accent-border); border-radius: 10px; font-weight: 800; }
.creator-guide-primary { display: inline-flex; min-width: 190px; align-items: center; justify-content: space-between; gap: 24px; background: var(--button-accent-bg); color: var(--button-accent-text); }
.creator-guide-primary:hover { background: color-mix(in srgb, var(--button-accent-bg) 82%, var(--app-accent)); }
.creator-guide-secondary { background: var(--button-secondary-bg); color: var(--app-text); border-color: var(--button-secondary-border); }
.creator-guide-secondary:hover { background: var(--button-secondary-bg-hover); }
.creator-guide-record { display: grid; min-width: 248px; min-height: 50px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 15px; border: 1px solid var(--app-accent); border-radius: 10px; background: var(--app-accent-soft); color: var(--app-text); text-align: left; }
.creator-guide-record:hover { background: color-mix(in srgb, var(--app-accent-soft) 76%, var(--app-accent)); }
.creator-guide-record-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-accent); border-radius: 50%; color: var(--app-accent-readable); font-size: 12px; }
.creator-guide-record-copy { display: grid; min-width: 0; gap: 2px; }
.creator-guide-record-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-guide-record-copy small { overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-guide-record-arrow { color: var(--app-accent-readable); font-size: 18px; font-weight: 800; }
.creator-guide.is-start-choice .creator-guide-layout { grid-template-columns: minmax(0, 1fr); }
.creator-guide.is-start-choice .creator-guide-focus { min-height: 390px; grid-template-columns: 156px minmax(0, 1fr); }
.creator-guide.is-start-choice .creator-guide-checklist { display: none; }
.creator-guide.is-start-choice .creator-guide-actions { display: grid; max-width: 820px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creator-guide.is-start-choice .creator-guide-actions button { width: 100%; min-height: 62px; justify-content: space-between; text-align: left; }
.creator-import-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); border-radius: 12px; background: color-mix(in srgb, var(--app-accent-soft) 34%, var(--app-panel)); }
.creator-import-progress[hidden] { display: none !important; }
.creator-import-motion { display: flex; min-width: 116px; align-items: center; gap: 8px; color: var(--app-accent-readable); }
.creator-import-folder { display: grid; width: 34px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 50%, var(--app-line)); border-radius: 7px; background: var(--app-accent-soft); font-size: 18px; }
.creator-import-stream { display: flex; width: 34px; justify-content: space-between; }
.creator-import-stream i { width: 5px; height: 5px; border-radius: 50%; background: var(--app-accent); animation: creator-import-flow 1.05s ease-in-out infinite; }
.creator-import-stream i:nth-child(2) { animation-delay: .16s; }
.creator-import-stream i:nth-child(3) { animation-delay: .32s; }
.creator-import-tracks { display: grid; width: 28px; gap: 4px; }
.creator-import-tracks i { height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--app-accent) 72%, var(--app-line)); animation: creator-import-track 1.2s ease-in-out infinite alternate; transform-origin: left center; }
.creator-import-tracks i:nth-child(2) { animation-delay: -.4s; }
.creator-import-tracks i:nth-child(3) { animation-delay: -.8s; }
.creator-import-progress-copy { display: grid; min-width: 0; gap: 3px; }
.creator-import-progress-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.creator-import-progress-copy strong { overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-import-progress-copy output { color: var(--app-accent-readable); font: 700 12px 'DM Mono', ui-monospace, monospace; }
.creator-import-progress-copy p { overflow: hidden; margin: 0; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-import-progress-track { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: var(--app-line); }
.creator-import-progress-track i { display: block; width: var(--creator-import-progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 58%, var(--status-success-text))); transition: width 260ms ease; }
.creator-import-stages { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.creator-import-stages li { display: flex; align-items: center; gap: 5px; color: var(--app-faint); font-size: 12px; }
.creator-import-stages li > i { width: 7px; height: 7px; border: 1px solid var(--app-line); border-radius: 50%; background: var(--app-panel-2); }
.creator-import-stages li.is-active { color: var(--app-text); }
.creator-import-stages li.is-active > i { border-color: var(--app-accent); background: var(--app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 16%, transparent); animation: creator-import-stage 1s ease-in-out infinite; }
.creator-import-stages li.is-complete { color: var(--status-success-text); }
.creator-import-stages li.is-complete > i { border-color: var(--status-success-text); background: var(--status-success-text); }
.creator-import-next { min-height: 34px; padding: 0 11px; border: 1px solid var(--button-accent-border); border-radius: 8px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 12px; font-weight: 800; }
.creator-import-next[hidden] { display: none !important; }
.creator-import-progress.is-complete { border-color: color-mix(in srgb, var(--status-success-text) 52%, var(--app-line)); background: var(--status-success-bg); }
.creator-import-progress.is-error { border-color: color-mix(in srgb, var(--status-error-text) 54%, var(--app-line)); background: var(--status-error-bg); }
.creator-import-progress.is-complete .creator-import-stream i,
.creator-import-progress.is-complete .creator-import-tracks i,
.creator-import-progress.is-error .creator-import-stream i,
.creator-import-progress.is-error .creator-import-tracks i { animation: none; }
@keyframes creator-import-flow { 0%, 100% { opacity: .24; transform: translateX(-3px) scale(.7); } 48% { opacity: 1; transform: translateX(3px) scale(1); } }
@keyframes creator-import-track { from { opacity: .42; transform: scaleX(.45); } to { opacity: 1; transform: scaleX(1); } }
@keyframes creator-import-stage { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--app-accent) 4%, transparent); } }
.creator-guide-reassurance { display: block; margin-top: 18px; color: var(--app-faint); font-size: 12px; line-height: 1.6; }
.creator-guide-checklist { display: grid; align-content: start; gap: 10px; padding: 24px; }
.creator-guide-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 2px 12px; color: var(--app-muted); font-size: 12px; }
.creator-guide-checklist-head strong { color: var(--app-text); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.creator-guide-checklist > button { display: grid; min-height: 76px; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); color: var(--app-text); text-align: left; }
.creator-guide-checklist > button:hover { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); background: var(--state-hover); }
.creator-guide-checklist > button > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-muted); font: normal 600 11px 'DM Mono', ui-monospace, monospace; }
.creator-guide-checklist > button > span { display: grid; min-width: 0; gap: 4px; }
.creator-guide-checklist > button strong { font-size: 13px; }
.creator-guide-checklist > button small { overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-guide-checklist > button em { color: var(--app-accent-readable); font-size: 12px; font-style: normal; font-weight: 700; }
.creator-guide-checklist > button.is-complete { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); background: var(--status-success-bg); }
.creator-guide-checklist > button.is-complete > i { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.creator-guide-checklist > button.is-complete em { color: var(--status-success-text); }
.creator-guide-checklist > button.is-processing { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: var(--app-accent-soft); }
.creator-guide-checklist > button.is-processing > i { border-color: var(--app-accent); color: var(--app-accent-readable); animation: creator-import-stage 1s ease-in-out infinite; }
.creator-guide-checklist-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--app-line); border-radius: 10px; background: var(--app-panel-2); }
.creator-guide-checklist-alt > span { display: grid; min-width: 0; gap: 3px; }
.creator-guide-checklist-alt strong { color: var(--app-text); font-size: 12px; }
.creator-guide-checklist-alt small { overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.creator-guide-checklist-alt button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid var(--button-accent-border); border-radius: 8px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 12px; font-weight: 800; }
.creator-guide-checklist-alt button:hover { background: color-mix(in srgb, var(--button-accent-bg) 82%, var(--app-accent)); }
.creator-guide-next { display: grid; gap: 5px; margin-top: 6px; padding: 18px 14px; border-top: 1px solid var(--app-line); }
.creator-guide-next span { color: var(--app-faint); font-size: 12px; }
.creator-guide-next strong { color: var(--app-text); font-size: 12px; }
.creator-guide-next small { color: var(--app-muted); font-size: 12px; line-height: 1.6; }
.creator-guide-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--app-faint); font-size: 12px; }
.creator-guide-footer button,
.creator-guide-return { min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--button-secondary-bg); color: var(--app-muted); }
.creator-guide-footer button:hover,
.creator-guide-return:hover { border-color: color-mix(in srgb, var(--app-accent) 40%, var(--app-line)); color: var(--app-text); }
.creator-guide-return { margin: 18px 0; }
.creator-guide-ambient {
  display: grid;
  width: min(980px, 82%);
  height: clamp(84px, 10vh, 128px);
  grid-template-columns: repeat(28, minmax(2px, 1fr));
  align-items: end;
  gap: clamp(5px, .75vw, 12px);
  margin: 4px auto -28px;
  opacity: .36;
  pointer-events: none;
}
.creator-guide-ambient i {
  height: var(--ambient-height, 42%);
  min-height: 8px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 28%, transparent), color-mix(in srgb, var(--app-accent) 74%, var(--app-panel)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--app-accent) 16%, transparent);
  transform: scaleY(.58);
  transform-origin: center bottom;
  animation: creator-ambient-pulse var(--ambient-speed, 4.8s) ease-in-out var(--ambient-delay, 0s) infinite alternate;
}
.creator-guide-ambient i:nth-child(7n + 1) { --ambient-height: 28%; --ambient-speed: 4.1s; --ambient-delay: -.8s; }
.creator-guide-ambient i:nth-child(7n + 2) { --ambient-height: 55%; --ambient-speed: 5.3s; --ambient-delay: -2.4s; }
.creator-guide-ambient i:nth-child(7n + 3) { --ambient-height: 82%; --ambient-speed: 4.6s; --ambient-delay: -1.3s; }
.creator-guide-ambient i:nth-child(7n + 4) { --ambient-height: 42%; --ambient-speed: 5.8s; --ambient-delay: -3.1s; }
.creator-guide-ambient i:nth-child(7n + 5) { --ambient-height: 68%; --ambient-speed: 4.9s; --ambient-delay: -1.9s; }
.creator-guide-ambient i:nth-child(7n + 6) { --ambient-height: 36%; --ambient-speed: 5.5s; --ambient-delay: -.4s; }
.creator-guide-ambient i:nth-child(7n) { --ambient-height: 74%; --ambient-speed: 4.4s; --ambient-delay: -2.8s; }
@keyframes creator-ambient-pulse {
  0% { opacity: .44; transform: scaleY(.42); }
  52% { opacity: .76; transform: scaleY(.82); }
  100% { opacity: .56; transform: scaleY(1); }
}

@media (min-width: 1920px) {
  .creator-guide { width: min(1440px, calc(100% - 48px)); }
  .creator-guide-layout { grid-template-columns: minmax(0, 1.7fr) minmax(360px, .8fr); gap: 22px; }
  .creator-guide-focus { min-height: 500px; grid-template-columns: 196px minmax(0, 1fr); gap: 52px; padding: 64px; }
  .creator-guide-checklist { padding: 28px; }
  .creator-guide-step small,
  .creator-guide-progress,
  .creator-guide-progress strong,
  .creator-guide-badge,
  .creator-guide-reassurance,
  .creator-guide-checklist-head,
  .creator-guide-checklist-head strong,
  .creator-guide-checklist > button small,
  .creator-guide-checklist > button em,
  .creator-guide-next span,
  .creator-guide-next small,
  .creator-guide-footer { font-size: 12px; }
  .creator-import-progress-copy strong { font-size: 13px; }
  .creator-import-progress-copy output,
  .creator-import-progress-copy p,
  .creator-import-next { font-size: 12px; }
  .creator-import-stages li { font-size: 11px; }
}

@media (max-width: 1120px) {
  .creator-guide { margin-top: 24px; }
  .creator-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .creator-guide-focus { min-height: 360px; }
  .creator-guide-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-guide-checklist-head,
  .creator-guide-next { grid-column: 1 / -1; }
}

/* Common laptop/desktop heights should keep the next action in the first
   viewport. The guided import surface is a task entry, not a hero page, so
   its decorative breathing room must not push the real controls below the
   fold. */
@media (min-width: 1200px) and (max-height: 1100px) {
  .creator-guide { margin-top: 10px; margin-bottom: 28px; gap: 14px; }
  .creator-guide-focus { min-height: 390px; padding: 42px; }
  .creator-guide-checklist { padding: 20px; }
  .creator-guide-ambient { height: 64px; margin-top: 0; margin-bottom: -14px; }
}

@media (max-width: 760px) {
  .creator-guide-head { align-items: flex-start; flex-direction: column; }
  .creator-guide-progress { width: 100%; }
  .creator-guide-progress > span { flex: 1; }
  .creator-guide-focus { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 30px 24px; }
  .creator-guide-symbol { width: 88px; height: 88px; border-radius: 22px; }
  .creator-guide-symbol span { font-size: 40px; }
  .creator-guide-symbol i { inset: 12px; border-radius: 16px; }
  .creator-guide-copy h2 { font-size: 30px; }
  .creator-import-progress { grid-template-columns: minmax(0, 1fr) auto; }
  .creator-import-motion { grid-column: 1 / -1; }
  .creator-import-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creator-lyrics-paste > header,
  .creator-lyrics-paste > footer { align-items: flex-start; flex-direction: column; }
  .creator-lyrics-paste > footer > div { width: 100%; }
  .creator-lyrics-paste > footer button { flex: 1; }
  .creator-guide-checklist { grid-template-columns: minmax(0, 1fr); }
  .creator-guide-checklist-head,
  .creator-guide-next { grid-column: auto; }
  .creator-guide-footer { align-items: flex-start; flex-direction: column; }
  .creator-guide-ambient { width: 100%; grid-template-columns: repeat(14, minmax(2px, 1fr)); }
  .creator-guide-ambient i:nth-child(n + 15) { display: none; }
}
@media (max-height: 800px) {
  .creator-guide-ambient { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-guide-ambient i { animation: none; opacity: .52; transform: scaleY(.58); }
  .creator-import-stream i,
  .creator-import-tracks i,
  .creator-import-stages li.is-active > i,
  .creator-guide-checklist > button.is-processing > i { animation: none; }
}

/* 总工作台：在不替换经典五步工作区的前提下，提供统一入口。 */
.workspace-experience { display: grid; gap: 7px; margin: 0 0 16px; }
.workspace-experience-label { padding-inline: 4px; color: var(--app-faint); font: 500 9px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; }
.workspace-experience-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid var(--app-line); border-radius: 9px; background: color-mix(in srgb, var(--app-panel-2) 76%, var(--app-bg)); }
.workspace-experience-switch button { display: inline-flex; min-width: 0; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--app-faint); font-size: 9px; font-weight: 750; white-space: nowrap; }
.workspace-experience-switch button:hover { color: var(--app-text); background: var(--state-hover); }
.workspace-experience-switch button.active { border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-line)); background: var(--app-panel); color: var(--app-text); box-shadow: 0 4px 14px color-mix(in srgb, var(--app-shadow) 24%, transparent); }
.workspace-experience-switch button.active span { color: var(--app-accent); }

.workspace-hub { width: min(1420px, 100%); margin: 0 auto; padding: 22px 0 46px; }
.workspace-hub[hidden] { display: none !important; }
.workspace-hub-hero { position: relative; display: grid; min-height: 250px; grid-template-columns: minmax(0, 1fr) minmax(350px, .62fr); align-items: center; gap: 34px; overflow: hidden; padding: 38px 40px; border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--app-line)); border-radius: 18px; background: radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--app-accent) 16%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--app-panel) 92%, var(--app-accent-soft)), var(--app-panel)); box-shadow: var(--app-shadow); }
.workspace-hub-hero::after { position: absolute; right: -84px; bottom: -180px; width: 390px; height: 390px; border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-line)); border-radius: 50%; content: ''; pointer-events: none; }
.workspace-hub-hero-copy { position: relative; z-index: 1; min-width: 0; }
.workspace-hub-hero-copy h1 { max-width: 720px; margin: 10px 0 12px; color: var(--app-text); font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -.045em; }
.workspace-hub-hero-copy > p { max-width: 680px; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.75; }
.workspace-hub-current { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 9px; margin-top: 24px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 34%, var(--app-panel)); }
.workspace-hub-current span { color: var(--app-faint); font-size: 12px; }
.workspace-hub-current strong { overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-current em { padding-left: 9px; border-left: 1px solid var(--app-line); color: var(--app-accent); font-size: 12px; font-style: normal; white-space: nowrap; }
.workspace-hub-progress { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; }
.workspace-hub-progress-ring { --hub-progress: 0%; position: relative; display: grid; width: 96px; height: 96px; flex: 0 0 96px; place-content: center; border-radius: 50%; background: conic-gradient(var(--app-accent) var(--hub-progress), color-mix(in srgb, var(--app-line) 70%, transparent) 0); text-align: center; }
.workspace-hub-progress-ring::before { position: absolute; inset: 7px; border-radius: inherit; background: var(--app-panel); content: ''; }
.workspace-hub-progress-ring strong, .workspace-hub-progress-ring span { position: relative; z-index: 1; display: block; }
.workspace-hub-progress-ring strong { color: var(--app-text); font: 700 20px 'DM Mono', ui-monospace, monospace; }
.workspace-hub-progress-ring span { margin-top: 2px; color: var(--app-faint); font-size: 12px; }
.workspace-hub-progress-copy { display: grid; width: min(276px, 100%); gap: 5px; }
.workspace-hub-progress-copy > strong { color: var(--app-text); font-size: 12px; }
.workspace-hub-progress-copy > span { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.workspace-hub-missing { display: grid; gap: 6px; margin-top: 7px; }
.workspace-hub-missing > strong { color: var(--status-warning-text); font-size: 12px; }
.workspace-hub-missing.is-complete > strong { color: var(--status-success-text); }
.workspace-hub-missing-list { display: grid; gap: 5px; }
.workspace-hub-missing-list > button,
.workspace-hub-missing-complete { display: grid; min-width: 0; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--status-warning-text) 30%, var(--app-line)); border-radius: 7px; background: color-mix(in srgb, var(--status-warning-bg) 58%, var(--app-panel)); color: var(--app-text); text-align: left; }
.workspace-hub-missing-list > button:hover { border-color: color-mix(in srgb, var(--status-warning-text) 60%, var(--app-line)); background: color-mix(in srgb, var(--status-warning-bg) 82%, var(--state-hover)); }
.workspace-hub-missing-list > button:focus-visible { border-color: var(--app-accent); outline: 2px solid color-mix(in srgb, var(--app-accent) 42%, transparent); outline-offset: 1px; }
.workspace-hub-missing-list > button > i,
.workspace-hub-missing-complete > i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: var(--status-warning-bg); color: var(--status-warning-text); font: 700 8px 'DM Mono', ui-monospace, monospace; font-style: normal; }
.workspace-hub-missing-list > button > span,
.workspace-hub-missing-complete > span { display: grid; min-width: 0; gap: 1px; }
.workspace-hub-missing-list > button strong,
.workspace-hub-missing-complete strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-missing-list > button small,
.workspace-hub-missing-complete small { color: var(--app-muted); font-size: 12px; line-height: 1.35; white-space: normal; }
.workspace-hub-missing-list > button em { color: var(--status-warning-text); font-size: 12px; font-style: normal; white-space: nowrap; }
.workspace-hub-missing-complete { border-color: color-mix(in srgb, var(--status-success-text) 30%, var(--app-line)); background: var(--status-success-bg); }
.workspace-hub-missing-complete > i { background: color-mix(in srgb, var(--status-success-text) 14%, var(--status-success-bg)); color: var(--status-success-text); }
.workspace-hub-continue { position: relative; z-index: 1; display: flex; min-height: 58px; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 18px; padding: 0 18px; border: 1px solid var(--button-accent-border); border-radius: 10px; background: var(--button-accent-bg); color: var(--button-accent-text); text-align: left; }
.workspace-hub-continue:hover { background: color-mix(in srgb, var(--button-accent-bg) 84%, var(--app-accent)); transform: translateY(-1px); }
.workspace-hub-continue > span { display: grid; gap: 3px; }
.workspace-hub-continue small { color: color-mix(in srgb, var(--button-accent-text) 70%, transparent); font-size: 12px; }
.workspace-hub-continue strong { font-size: 12px; }
.workspace-hub-continue i { font-size: 20px; font-style: normal; }

.workspace-hub-showcase { display: grid; gap: 14px; margin-top: 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-line)); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent) 9%, var(--app-panel)), color-mix(in srgb, var(--app-panel-2) 84%, var(--app-bg))); box-shadow: var(--app-shadow); }
.workspace-hub-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.workspace-hub-showcase-head h2 { margin: 5px 0 5px; color: var(--app-text); font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }
.workspace-hub-showcase-head p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.workspace-hub-showcase-controls { display: flex; align-items: center; gap: 6px; }
.workspace-hub-showcase-controls > span { min-width: 54px; color: var(--app-faint); font: 600 12px 'DM Mono', ui-monospace, monospace; text-align: center; }
.workspace-hub-showcase-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 17px; }
.workspace-hub-showcase-controls button:hover { border-color: var(--app-accent); background: var(--button-secondary-bg-hover); color: var(--app-accent); }
.workspace-hub-showcase-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .75fr); gap: 14px; }
.workspace-hub-showcase-preview { min-width: 0; overflow: hidden; padding: 13px; border: 1px solid var(--app-line); border-radius: 12px; background: color-mix(in srgb, var(--app-bg) 82%, var(--app-panel)); }
.workspace-hub-showcase-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--app-muted); font-size: 12px; }
.workspace-hub-showcase-preview-head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--app-accent); font-weight: 750; }
.workspace-hub-showcase-preview-head i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.workspace-hub-showcase-preview-head small { color: var(--app-faint); font-size: 12px; }
.workspace-hub-showcase-stage { min-height: 258px; }
.workspace-hub-showcase-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 8px 8px 8px 10px; }
.workspace-hub-showcase-copy-top { display: flex; align-items: center; gap: 9px; color: var(--app-accent); font-size: 12px; font-weight: 750; }
.workspace-hub-showcase-copy-top > span:first-child { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 62%, var(--app-line)); border-radius: 8px; background: var(--app-accent-soft); font: 700 12px 'DM Mono', ui-monospace, monospace; }
.workspace-hub-showcase-copy-top > span:last-child { color: var(--app-muted); }
.workspace-hub-showcase-copy h3 { margin: 14px 0 7px; color: var(--app-text); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.045em; }
.workspace-hub-showcase-copy > p { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.7; }
.workspace-hub-showcase-points { display: grid; gap: 7px; margin: 15px 0 18px; padding: 0; list-style: none; }
.workspace-hub-showcase-points li { display: flex; align-items: start; gap: 8px; color: var(--app-text); font-size: 12px; line-height: 1.45; }
.workspace-hub-showcase-points li::before { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 12%, transparent); content: ''; }
.workspace-hub-showcase-action { display: inline-flex; width: fit-content; min-height: 40px; align-items: center; gap: 12px; padding: 0 13px; border: 1px solid var(--button-accent-border); border-radius: 8px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 12px; font-weight: 800; }
.workspace-hub-showcase-action:hover { background: color-mix(in srgb, var(--button-accent-bg) 84%, var(--app-accent)); transform: translateY(-1px); }
.workspace-hub-showcase-action span { font-size: 17px; }
.workspace-hub-showcase-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.workspace-hub-showcase-tabs button { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 8px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg)); color: var(--app-muted); text-align: left; }
.workspace-hub-showcase-tabs button:hover { border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line)); background: var(--state-hover); }
.workspace-hub-showcase-tabs button[aria-selected="true"] { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)); color: var(--app-text); box-shadow: inset 3px 0 0 var(--app-accent); }
.workspace-hub-showcase-tabs button > span { display: grid; width: 25px; height: 25px; grid-row: 1 / 3; place-items: center; border: 1px solid var(--app-line); border-radius: 6px; color: var(--app-faint); font: 700 11px 'DM Mono', ui-monospace, monospace; }
.workspace-hub-showcase-tabs button[aria-selected="true"] > span { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.workspace-hub-showcase-tabs strong { overflow: hidden; color: inherit; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-showcase-tabs small { overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-showcase-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; color: var(--app-faint); font-size: 12px; }
.workspace-hub-showcase-foot button { padding: 0; border: 0; background: var(--app-bg); color: var(--app-accent); font-size: 12px; font-weight: 750; }
.workspace-hub-showcase-foot button:hover { color: var(--app-text); text-decoration: underline; }

/* 内置演示画面：使用 DOM、CSS 与 SVG 组合，随主题变化，不依赖截图素材。 */
.showcase-demo { position: relative; display: grid; min-height: 258px; align-content: center; gap: 12px; overflow: hidden; padding: 20px; border: 1px solid color-mix(in srgb, var(--app-accent) 22%, var(--app-line)); border-radius: 10px; background: radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--app-accent) 15%, transparent), var(--app-panel) 46%), var(--app-panel); }
.showcase-demo::after { position: absolute; right: -30px; bottom: -70px; width: 190px; height: 190px; border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-line)); border-radius: 50%; content: ''; pointer-events: none; }
.showcase-demo-title { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--app-muted); font-size: 12px; }
.showcase-demo-title strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--app-text); font-size: 14px; }
.showcase-demo-title span { color: var(--app-faint); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.showcase-demo-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); border-radius: 999px; background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); color: var(--app-accent) !important; font: 700 11px var(--app-font-sans); letter-spacing: .01em; }
.showcase-demo-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent) 45%, transparent); animation: showcaseLiveDot 1.35s ease-out infinite; }
.showcase-demo-transport { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--app-faint); font-size: 12px; }
.showcase-demo-play-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--app-accent); color: var(--app-accent-ink); font-size: 9px; animation: showcasePlaybackPulse 1.8s ease-in-out infinite; }
.showcase-demo-transport-line { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--app-line) 70%, var(--app-bg)); }
.showcase-demo-transport-line span { display: block; width: 31%; height: 100%; border-radius: inherit; background: var(--app-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--app-accent) 50%, transparent); animation: showcaseTransportProgress 4.8s linear infinite; }
@keyframes showcaseLiveDot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent) 45%, transparent); opacity: .72; } 45% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 0%, transparent); opacity: 1; } }
@keyframes showcasePlaybackPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes showcaseTransportProgress { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
.showcase-lyric-lines { position: relative; z-index: 1; display: grid; gap: 8px; }
.showcase-lyric-row { display: flex; min-width: 0; align-items: center; gap: 8px; opacity: .52; transform: translateX(0); animation: showcaseLyricRowFlow 5.6s ease-in-out infinite; }
.showcase-lyric-row:nth-child(2) { animation-delay: .6s; }
.showcase-lyric-row:nth-child(3) { animation-delay: 1.2s; }
.showcase-lyric-row:nth-child(4) { animation-delay: 1.8s; }
.showcase-lyric-row > small { width: 36px; flex: 0 0 36px; color: var(--app-faint); font: 600 11px 'DM Mono', ui-monospace, monospace; }
.showcase-lyric-row > div { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 1px; padding: 6px 8px; border-radius: 6px; color: var(--app-faint); font-size: 14px; line-height: 1.4; }
.showcase-lyric-row > em { width: 52px; flex: 0 0 52px; color: var(--app-faint); font-size: 11px; font-style: normal; text-align: right; }
.showcase-lyric-row.is-active > div { border: 1px solid color-mix(in srgb, var(--app-accent) 50%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel)); color: var(--app-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 9%, transparent); }
.showcase-lyric-row.is-past > div { color: var(--app-muted); }
.showcase-lyric-row.is-active > em { color: var(--app-accent); }
.showcase-char { display: inline-block; min-width: .5em; opacity: .35; transform: translateY(2px); animation: workspaceShowcaseWordFlow 5.6s ease-in-out infinite; animation-delay: calc(var(--char-index) * 105ms); }
.showcase-char--more { min-width: auto; animation: none; opacity: .65; transform: none; }
@keyframes showcaseLyricRowFlow { 0%, 12% { opacity: .48; transform: translateX(0); } 25%, 57% { opacity: 1; transform: translateX(3px); } 72%, 100% { opacity: .52; transform: translateX(0); } }
@keyframes workspaceShowcaseWordFlow { 0%, 14% { opacity: .35; color: var(--app-faint); transform: translateY(2px); } 22%, 58% { opacity: 1; color: var(--app-accent); transform: translateY(-1px); } 70%, 100% { opacity: .62; color: var(--app-text); transform: translateY(0); } }
.showcase-lyric-progress { position: relative; z-index: 1; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--app-line) 68%, var(--app-bg)); }
.showcase-lyric-progress span { display: block; width: 58%; height: 100%; border-radius: inherit; background: var(--app-accent); box-shadow: 0 0 16px color-mix(in srgb, var(--app-accent) 48%, transparent); animation: showcaseLyricProgress 5.6s ease-in-out infinite; }
@keyframes showcaseLyricProgress { 0%, 100% { width: 18%; } 58% { width: 82%; } }
.showcase-beat-grid { position: relative; z-index: 1; display: grid; gap: 22px; }
.showcase-beat-track { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; gap: 8px; }
.showcase-beat-track::before { position: absolute; right: 0; left: 0; height: 2px; background: color-mix(in srgb, var(--app-line) 72%, var(--app-bg)); content: ''; }
.showcase-beat-track i { position: relative; z-index: 1; display: grid; width: 12px; height: 12px; place-items: center; justify-self: center; border: 2px solid var(--app-accent); border-radius: 50%; background: var(--app-panel); animation: showcaseBeatPulse 2.6s ease-in-out infinite; animation-delay: calc((var(--beat-index, 0) + 1) * 170ms); }
.showcase-beat-track i b { color: var(--app-faint); font: 700 9px 'DM Mono', ui-monospace, monospace; opacity: 0; transform: scale(.7); }
.showcase-beat-track i:nth-child(2) { --beat-index: 0; }
.showcase-beat-track i:nth-child(3) { --beat-index: 1; }
.showcase-beat-track i:nth-child(4) { --beat-index: 2; }
.showcase-beat-track i:nth-child(5) { --beat-index: 3; }
.showcase-beat-track i:nth-child(6) { --beat-index: 4; }
.showcase-beat-track i:nth-child(7) { --beat-index: 5; }
.showcase-beat-track i:nth-child(8) { --beat-index: 6; }
.showcase-beat-track i:nth-child(9) { --beat-index: 7; }
.showcase-beat-track i:nth-of-type(1), .showcase-beat-track i:nth-of-type(5) { width: 18px; height: 18px; background: var(--app-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--app-accent) 12%, transparent); }
.showcase-beat-track i:nth-of-type(3), .showcase-beat-track i:nth-of-type(7) { border-color: var(--app-secondary); }
.showcase-beat-playhead { position: absolute; z-index: 2; top: -7px; bottom: -7px; left: 0; width: 2px; border-radius: 999px; background: var(--app-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 72%, transparent); animation: showcaseBeatPlayhead 2.6s linear infinite; }
@keyframes showcaseBeatPulse { 0%, 8%, 100% { transform: scale(.82); opacity: .62; } 12%, 26% { transform: scale(1.35); opacity: 1; } 34% { transform: scale(.95); opacity: .88; } }
@keyframes showcaseBeatPlayhead { from { left: 0; } to { left: 100%; } }
.showcase-beat-lyrics { display: grid; gap: 7px; }
.showcase-beat-lyrics span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-left: 3px solid var(--app-line); border-radius: 5px; background: color-mix(in srgb, var(--app-panel-2) 70%, var(--app-bg)); color: var(--app-muted); font-size: 13px; }
.showcase-beat-lyrics span.is-active { border-left-color: var(--app-accent); color: var(--app-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 32%, var(--app-line)); }
.showcase-beat-lyrics small { color: var(--app-accent); font: 600 11px 'DM Mono', ui-monospace, monospace; }
.showcase-beat-hint { display: flex; align-items: center; gap: 8px; color: var(--app-faint); font-size: 12px; }
.showcase-beat-hint strong { padding: 3px 7px; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent); animation: showcaseHintPulse 2.6s ease-in-out infinite; }
.showcase-beat-count { margin-left: auto; color: var(--app-muted); font: 600 12px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; animation: showcaseCountPulse 2.6s steps(4, end) infinite; }
@keyframes showcaseHintPulse { 0%, 24%, 100% { opacity: .58; transform: translateY(1px); } 32%, 48% { opacity: 1; transform: translateY(-1px); } }
@keyframes showcaseCountPulse { 0%, 100% { opacity: .4; } 25%, 50%, 75% { opacity: 1; } }
.showcase-pitch-grid { position: relative; z-index: 1; display: grid; gap: 10px; }
.showcase-pitch-ruler { display: flex; justify-content: space-between; color: var(--app-faint); font: 600 11px 'DM Mono', ui-monospace, monospace; }
.showcase-pitch-canvas { position: relative; height: 112px; overflow: hidden; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--app-line) 42%, transparent) 0 1px, var(--app-bg) 1px 28px); }
.showcase-pitch-canvas::after { position: absolute; top: 0; bottom: 0; left: 56%; border-left: 1px dashed color-mix(in srgb, var(--app-accent) 70%, var(--app-line)); content: ''; }
.showcase-pitch-svg { position: absolute; inset: 12px 0; width: 100%; height: calc(100% - 24px); color: var(--app-accent); }
.showcase-pitch-svg polyline { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; stroke-dasharray: 840; stroke-dashoffset: 840; animation: showcasePitchDraw 5.2s ease-in-out infinite; }
.showcase-pitch-svg circle { fill: var(--app-accent); animation: showcasePitchPoint 5.2s ease-in-out infinite; }
.showcase-pitch-playhead { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: var(--app-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--app-accent) 70%, transparent); animation: showcasePitchPlayhead 5.2s linear infinite; }
@keyframes showcasePitchDraw { 0%, 10% { stroke-dashoffset: 840; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes showcasePitchPlayhead { from { left: 0; } to { left: 100%; } }
@keyframes showcasePitchPoint { 0%, 44%, 100% { opacity: .58; transform: scale(.72); transform-origin: 315px 29px; } 52%, 66% { opacity: 1; transform: scale(1.55); transform-origin: 315px 29px; } }
.showcase-pitch-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; height: 26px; }
.showcase-pitch-bars i { display: block; height: 8px; border-radius: 3px; background: var(--app-secondary); opacity: .72; animation: showcasePitchBar 2.8s ease-in-out infinite; }
.showcase-pitch-bars i:nth-child(2) { animation-delay: .22s; }
.showcase-pitch-bars i:nth-child(3) { animation-delay: .44s; }
.showcase-pitch-bars i:nth-child(4) { animation-delay: .66s; }
.showcase-pitch-bars i:nth-child(5) { animation-delay: .88s; }
.showcase-pitch-bars i:nth-child(6) { animation-delay: 1.1s; }
.showcase-pitch-bars i:nth-child(7) { animation-delay: 1.32s; }
.showcase-pitch-bars i:nth-child(2), .showcase-pitch-bars i:nth-child(5) { height: 18px; background: var(--app-accent); opacity: 1; }
@keyframes showcasePitchBar { 0%, 100% { height: 7px; opacity: .55; } 50% { height: 23px; opacity: 1; } }
.showcase-pitch-status { display: flex; align-items: center; gap: 13px; color: var(--app-faint); font-size: 11px; }
.showcase-pitch-status span { display: inline-flex; align-items: center; gap: 5px; }
.showcase-pitch-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-secondary); }
.showcase-pitch-status span:nth-child(2) i { background: var(--app-accent); }
.showcase-pitch-status strong { margin-left: auto; color: var(--app-accent); font: 700 12px 'DM Mono', ui-monospace, monospace; animation: showcaseScorePulse 2.8s ease-in-out infinite; }
@keyframes showcaseScorePulse { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
.showcase-library-toolbar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--app-faint); font-size: 12px; }
.showcase-library-search { flex: 1; padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-bg) 55%, var(--app-panel)); }
.showcase-library-sync { display: inline-flex; align-items: center; gap: 5px; color: var(--status-success-text); }
.showcase-library-sync i { width: 6px; height: 6px; border-radius: 50%; background: var(--status-success-text); animation: showcaseLiveDot 1.35s ease-out infinite; }
.showcase-library-list { position: relative; z-index: 1; display: grid; gap: 7px; }
.showcase-library-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 6px; background: color-mix(in srgb, var(--app-panel-2) 74%, var(--app-bg)); animation: showcaseLibraryRow 6s ease-in-out infinite; }
.showcase-library-row:nth-child(2) { animation-delay: .8s; }
.showcase-library-row:nth-child(3) { animation-delay: 1.6s; }
.showcase-library-row:nth-child(4) { animation-delay: 2.4s; }
.showcase-library-row > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 6px; background: var(--app-accent-soft); color: var(--app-accent); font-style: normal; }
.showcase-library-row strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.showcase-library-row small { color: var(--app-faint); font-size: 12px; }
.showcase-library-row.is-current { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); }
.showcase-library-row.is-current small { color: var(--app-accent); }
.showcase-library-state { color: var(--app-muted); font-size: 11px; }
.showcase-library-eq { display: inline-flex; align-items: end; gap: 2px; height: 15px; }
.showcase-library-eq b { width: 3px; height: 6px; border-radius: 2px; background: var(--app-accent); animation: showcaseEqualizer .9s ease-in-out infinite alternate; }
.showcase-library-eq b:nth-child(2) { height: 11px; animation-delay: .2s; }
.showcase-library-eq b:nth-child(3) { height: 8px; animation-delay: .4s; }
@keyframes showcaseLibraryRow { 0%, 18%, 100% { transform: translateX(0); } 28%, 46% { transform: translateX(3px); border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); } }
@keyframes showcaseEqualizer { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } }
.showcase-remix-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.showcase-remix-column { display: grid; gap: 7px; min-width: 0; }
.showcase-remix-column > strong { color: var(--app-faint); font-size: 12px; }
.showcase-remix-column > div { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-panel-2) 76%, var(--app-bg)); }
.showcase-remix-column > div span { overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.showcase-remix-column.is-new > strong { color: var(--app-accent); }
.showcase-remix-column.is-new > div { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); }
.showcase-remix-column.is-new > div span { color: var(--app-text); opacity: 0; transform: translateX(-8px); animation: showcaseRemixLineIn 4.8s ease-in-out infinite; }
.showcase-remix-column.is-new > div span:nth-child(2) { animation-delay: .6s; }
.showcase-remix-column.is-new > div span:nth-child(3) { animation-delay: 1.2s; }
.showcase-remix-arrow { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--app-accent); color: var(--app-accent-ink); font-size: 16px; animation: showcaseRemixArrow 2s ease-in-out infinite; }
.showcase-remix-status { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--app-faint); font-size: 11px; }
.showcase-remix-status span { display: inline-flex; align-items: center; gap: 6px; }
.showcase-remix-status span i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-accent); animation: showcaseLiveDot 1.35s ease-out infinite; }
.showcase-remix-status strong { color: var(--status-success-text); font: 700 11px 'DM Mono', ui-monospace, monospace; }
.showcase-remix-progress { position: relative; z-index: 1; height: 4px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--app-line) 70%, var(--app-bg)); }
.showcase-remix-progress span { display: block; width: 28%; height: 100%; border-radius: inherit; background: var(--app-accent); animation: showcaseRemixProgress 4.8s ease-in-out infinite; }
@keyframes showcaseRemixLineIn { 0%, 10% { opacity: 0; transform: translateX(-8px); } 22%, 76% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: .7; transform: translateX(0); } }
@keyframes showcaseRemixArrow { 0%, 100% { transform: scale(.92); opacity: .72; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes showcaseRemixProgress { 0%, 100% { width: 18%; } 70% { width: 86%; } }

.workspace-hub-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 26px 2px 12px; }
.workspace-hub-section-head h2, .workspace-hub-tools h2 { margin: 5px 0 0; color: var(--app-text); font-size: 18px; }
.workspace-hub-section-head > span { color: var(--app-faint); font-size: 12px; }
.workspace-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.workspace-hub-grid { gap: 10px; }
.workspace-hub-card { position: relative; display: grid; min-height: 166px; grid-template-columns: auto 1fr auto; align-content: start; gap: 0 10px; overflow: hidden; padding: 15px 16px; border: 1px solid var(--app-line); border-radius: 11px; background: color-mix(in srgb, var(--app-panel) 90%, var(--app-bg)); color: var(--app-text); text-align: left; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.workspace-hub-card:hover { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: var(--state-hover); transform: translateY(-2px); box-shadow: 0 12px 34px color-mix(in srgb, var(--app-shadow) 28%, transparent); }
.workspace-hub-card:focus-visible { border-color: var(--app-accent); box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-accent); outline: 0; }
.workspace-hub-card-index { display: grid; min-width: 34px; height: 26px; place-items: center; padding-inline: 6px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel-2); color: var(--app-faint); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.workspace-hub-card-status { align-self: center; justify-self: end; padding: 4px 7px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-faint); font-size: 12px; }
.workspace-hub-card > strong { grid-column: 1 / -1; margin-top: 14px; color: var(--app-text); font-size: clamp(19px, 1.35vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.workspace-hub-card > p { grid-column: 1 / -1; min-height: 0; margin: 7px 0 10px; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.workspace-hub-card > small { grid-column: 1 / 3; align-self: end; overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-card > i { grid-column: 3; align-self: end; justify-self: end; color: var(--app-muted); font-size: 16px; font-style: normal; }
.workspace-hub-card.is-complete { border-color: color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); }
.workspace-hub-card.is-complete .workspace-hub-card-index { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.workspace-hub-card.is-complete .workspace-hub-card-status { border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); background: var(--status-success-bg); color: var(--status-success-text); }
.workspace-hub-card.is-recommended { box-shadow: inset 3px 0 0 var(--app-accent); }
.workspace-hub-card.is-recommended > i { color: var(--app-accent); }
.workspace-hub-card-pro { background: linear-gradient(145deg, color-mix(in srgb, var(--app-secondary) 8%, var(--app-panel)), var(--app-panel)); }
.workspace-hub-card-pro .workspace-hub-card-index { border-color: color-mix(in srgb, var(--app-secondary) 42%, var(--app-line)); color: var(--app-secondary); }

.workspace-hub-experimental { margin-top: 22px; padding-top: 3px; border-top: 1px dashed var(--app-line); }
.workspace-hub-experimental-promoted { margin-top: 0; padding-top: 0; border-top: 0; }
.sidebar-experimental-nav {
  position: static;
  flex-shrink: 0;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--app-line);
  background: transparent;
}
.sidebar-experimental-toggle {
  min-height: 38px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--button-secondary-bg);
  cursor: pointer;
  list-style: none;
}
.sidebar-experimental-toggle::-webkit-details-marker { display: none; }
.sidebar-experimental-toggle:hover,
.sidebar-experimental-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--status-warning-text) 52%, var(--app-line));
  background: var(--button-secondary-bg-hover);
}
.sidebar-experimental-toggle small {
  color: var(--status-warning-text);
  font-size: 12px;
}
.sidebar-experimental-toggle i {
  flex: 0 0 auto;
  color: var(--app-muted);
  font-size: 14px;
  font-style: normal;
  transition: transform 140ms ease;
}
.sidebar-experimental-nav[open] .sidebar-experimental-toggle i { transform: rotate(180deg); }
.sidebar-experimental-items {
  display: grid;
  gap: 4px;
  padding-top: 3px;
}
body[data-shell-surface="library"] .sidebar-experimental-nav {
  margin-top: 7px;
}
body[data-shell-surface="library"] .sidebar-experimental-nav .workflow-block-divider span {
  color: var(--status-warning-text);
}
.sidebar-spacer .app-ad-host:not([hidden]) {
  max-height: 96px;
  overflow: hidden;
}
.workspace-hub-subsection-head { margin-top: 16px; margin-bottom: 10px; }
.workspace-hub-experimental-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.workspace-hub-experimental-grid .workspace-hub-card { min-height: 150px; }
.workspace-hub-card-ensemble { border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line)); background: color-mix(in srgb, var(--app-accent) 6%, var(--app-panel)); }
.workspace-hub-card-jianpu { border-color: color-mix(in srgb, var(--status-warning-text) 44%, var(--app-line)); background: color-mix(in srgb, var(--status-warning-bg) 12%, var(--app-panel)); }
.workspace-hub-card-jianpu .workspace-hub-card-index,
.workspace-hub-card-jianpu .workspace-hub-card-status { border-color: color-mix(in srgb, var(--status-warning-text) 50%, var(--app-line)); color: var(--status-warning-text); }

.workspace-hub-tools { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.8fr); align-items: center; gap: 20px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--app-line); border-bottom: 1px solid var(--app-line); }
.workspace-hub-tools nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.workspace-hub-tools nav button { display: grid; min-height: 58px; grid-template-columns: 30px minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 9px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--button-secondary-bg); color: var(--app-text); text-align: left; }
.workspace-hub-tools nav button:hover { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line)); background: var(--button-secondary-bg-hover); }
.workspace-hub-tools nav button > span { display: grid; width: 30px; height: 30px; grid-row: 1 / 3; place-items: center; border-radius: 6px; background: var(--app-accent-soft); color: var(--app-accent); }
.workspace-hub-tools nav button strong { align-self: end; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-hub-tools nav button small { align-self: start; overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

body[data-shell-surface="project"][data-workspace-experience="hub"] :is(.project-header, #workspaceContext, #creatorGuide, #creatorGuideReturn, #practiceStudio, #separationWorkspace, #taskCenterView, #songwritingPanel, .content-grid) { display: none !important; }
body[data-shell-surface="project"][data-workspace-experience="hub"] .workspace-hub { display: block; }
body[data-shell-surface="library"] :is(#workspaceHub, .project-header, #workspaceContext, .main-content > .song-setup-journey, #creatorGuide, #creatorGuideReturn, #practiceStudio, #separationWorkspace, #taskCenterView, .content-grid, #activeSongContext, .topbar .breadcrumbs, .workspace-switcher, .workspace-experience, #projectStageNav, .sidebar-tools-title, .desktop-player-nav) { display: none !important; }
body[data-shell-surface="library"] #experimentalModuleNav { display: block !important; }
body[data-shell-surface="library"] #libraryView { display: block !important; }
body[data-shell-surface="library"] .topbar { justify-content: flex-end; }
body[data-shell-surface="library"] .top-actions { margin-left: auto; }
body[data-shell-surface="library"] #libraryView.library-view { width: 100%; max-width: none; padding-top: 24px; }
body[data-shell-surface="library"] #libraryView .library-header { margin-bottom: 16px; }
body[data-shell-surface="library"] #libraryView .library-header h1 { font-size: 28px; }
body[data-shell-surface="library"] #libraryView .library-header p { font-size: 12px; }
body[data-shell-surface="library"] #libraryView .library-category-tabs { gap: 8px; margin-bottom: 10px; }
body[data-shell-surface="library"] #libraryView .library-category-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-shell-surface="library"] #libraryView .library-category-tabs > button { min-height: 54px; padding: 8px 12px; border-radius: 8px; }
body[data-shell-surface="library"] #libraryView .library-category-tabs strong,
body[data-shell-surface="library"] #libraryView .library-category-tabs small,
body[data-shell-surface="library"] #libraryView .library-toolbar select,
body[data-shell-surface="library"] #libraryView .library-filter-menu summary,
body[data-shell-surface="library"] #libraryView .view-toggle button,
body[data-shell-surface="library"] #libraryView .library-count,
body[data-shell-surface="library"] #libraryView .library-main small,
body[data-shell-surface="library"] #libraryView .library-main em,
body[data-shell-surface="library"] #libraryView .library-readiness-copy strong,
body[data-shell-surface="library"] #libraryView .library-readiness-copy small,
body[data-shell-surface="library"] #libraryView .library-actions button,
body[data-shell-surface="library"] #libraryView .library-more-actions summary,
body[data-shell-surface="library"] #libraryView .pagination { font-size: 12px; }
body[data-shell-surface="library"] #libraryView .library-list-head { font-size: 11px; }
body[data-shell-surface="library"] #libraryView .library-state-badge,
body[data-shell-surface="library"] #libraryView .library-current-badge { font-size: 12px; }
body[data-shell-surface="library"] #libraryView .library-list-head,
body[data-shell-surface="library"] #libraryView .library-item.list {
  --library-row-columns: minmax(280px, 1.5fr) minmax(220px, .85fr) minmax(190px, auto);
  grid-template-columns: var(--library-row-columns);
}
body[data-shell-surface="library"] #libraryView .library-open { padding-block: 12px; }
body[data-shell-surface="library"] #libraryView .library-readiness { padding: 8px 0; }
body[data-shell-surface="library"] #libraryView .library-readiness-copy { display: grid; justify-content: start; gap: 4px; margin: 0; }
body[data-shell-surface="library"] #libraryView .library-readiness-copy small { white-space: normal; }
body[data-shell-surface="library"] #libraryView .library-actions { position: relative; gap: 6px; }
body[data-shell-surface="library"] #libraryView .library-actions > button,
body[data-shell-surface="library"] #libraryView .library-more-actions > summary { min-height: 36px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); }
body[data-shell-surface="library"] #libraryView .library-actions > .library-action-practice,
body[data-shell-surface="library"] #libraryView .library-actions > .library-action-continue { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
body[data-shell-surface="library"] #libraryView .library-more-actions { position: relative; }
body[data-shell-surface="library"] #libraryView .library-more-actions > summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
body[data-shell-surface="library"] #libraryView .library-more-actions > summary::-webkit-details-marker { display: none; }
body[data-shell-surface="library"] #libraryView .library-more-actions > div { position: absolute; z-index: 12; top: 42px; right: 0; display: grid; min-width: 150px; gap: 5px; padding: 7px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-elevated); box-shadow: 0 14px 34px var(--app-shadow); }
body[data-shell-surface="library"] #libraryView .library-more-actions > div button { min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--app-text); text-align: left; }
body[data-shell-surface="library"] #libraryView .library-more-actions > div button:hover { border-color: var(--app-line); background: var(--state-hover); }
body[data-shell-surface="library"] #libraryView .library-more-actions > div .library-action-delete { color: var(--state-danger-text); }
body[data-workspace-experience="hub"] .main-content > .song-setup-journey { display: none; }

/* Unified sidebar rail: one hierarchy, one row rhythm, one active treatment. */
.sidebar { padding-inline: 12px; }
.sidebar-nav-group {
  flex: 0 0 auto;
  min-width: 0;
}
.sidebar-song-picker {
  position: relative;
  z-index: 6;
  margin-bottom: 8px;
}
.sidebar-song-picker .workspace-switcher { margin-bottom: 0; }
.sidebar-library-group { margin-bottom: 2px; }
.sidebar-library-group .shell-nav { margin-bottom: 8px; }
.sidebar.project-picker-open .sidebar-song-picker .project-browser {
  top: calc(100% + 6px);
  right: 0;
  left: 0;
}
.sidebar .nav-section-title,
.sidebar .workspace-experience-label {
  margin: 0 8px 6px;
  padding: 0;
  color: var(--app-faint);
  font: 650 12px/1.4 'DM Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}
.sidebar-quick-title { display: none !important; }
.sidebar-lyric-remix {
  min-height: 50px;
  margin: 0;
  padding: 6px 8px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  border-color: transparent;
  border-style: solid !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar-lyric-remix:hover {
  border-color: var(--app-line);
  background: var(--workspace-nav-hover) !important;
}
.sidebar-lyric-remix[data-state="ready"] {
  border-color: transparent;
  box-shadow: none;
}
.sidebar-lyric-remix-icon {
  width: 28px;
  height: 28px;
  border-color: var(--app-line);
  border-radius: 6px;
  background: var(--app-panel-2);
}
.workflow-nav-item {
  display: grid;
  min-height: 50px;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text);
  text-align: left;
}
.workflow-nav-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-right: 18px;
}
.workflow-nav-item:hover,
.workflow-nav-item:focus-visible {
  border-color: var(--app-line);
  background: var(--workspace-nav-hover);
}
.workflow-nav-item.active {
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  background: var(--workspace-nav-active);
}
.workflow-nav-item .module-index {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  color: var(--app-faint);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.workflow-overview-item.active .module-index {
  border-color: var(--button-accent-border);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
}
.experimental-nav-item {
  margin-top: 4px;
  border-color: color-mix(in srgb, var(--status-warning-text) 34%, var(--app-line));
  background: color-mix(in srgb, var(--status-warning-bg) 28%, transparent);
}
.experimental-nav-item .module-index {
  min-width: 34px;
  border-color: color-mix(in srgb, var(--status-warning-text) 52%, var(--app-line));
  color: var(--status-warning-text);
  font-size: 10px;
}
.experimental-nav-item:hover,
.experimental-nav-item:focus-visible {
  border-color: var(--status-warning-text);
  background: color-mix(in srgb, var(--status-warning-bg) 42%, var(--app-panel));
}
.workflow-remix-entry { margin-top: 2px; }
.workflow-remix-entry[data-state="ready"] {
  border-color: color-mix(in srgb, var(--app-secondary) 34%, var(--app-line));
  background: color-mix(in srgb, var(--app-secondary) 8%, transparent) !important;
}
.workflow-remix-entry[data-state="ready"] .sidebar-lyric-remix-icon {
  border-color: var(--app-secondary);
  color: var(--app-secondary);
}
.workflow-block {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--app-line);
}
.workflow-block-divider {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 8px 4px;
  color: var(--app-faint);
}
.workflow-block-divider span {
  font-size: 12px;
  font-weight: 750;
}
.workflow-block-divider small {
  min-width: 0;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow-experimental-block .workflow-block-divider span {
  color: var(--status-warning-text);
}
.workflow-desktop-block .workflow-block-divider span {
  color: var(--app-muted);
}
.workspace-experience { gap: 5px; margin-bottom: 10px; }
.workspace-experience-switch {
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--app-panel-2);
}
.workspace-experience-switch button { min-height: 34px; border-radius: 6px; font-size: 12px; }
.shell-nav {
  gap: 3px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--app-line);
}
.shell-nav-item.active {
  border-color: var(--app-line) !important;
  background: var(--app-panel-2) !important;
  color: var(--app-text);
}
.shell-nav-item.active .icon { color: var(--app-accent); }

/* The library is the main collection entry, so it needs a persistent visual
 * cue even while the user is inside a current song. Keep the cue semantic so
 * it follows every supported palette instead of introducing a local color. */
:root {
  --app-library-nav-bg: color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-panel));
  --app-library-nav-border: color-mix(in srgb, var(--app-accent) 44%, var(--app-line));
  --app-library-nav-hover: color-mix(in srgb, var(--app-accent-soft) 58%, var(--app-panel));
  --app-library-nav-active: color-mix(in srgb, var(--app-accent-soft) 88%, var(--app-panel));
  --app-library-nav-badge: color-mix(in srgb, var(--app-accent-soft) 74%, var(--app-panel));
}
.shell-nav .shell-nav-item[data-shell="library"] {
  border-color: var(--app-library-nav-border);
  background: var(--app-library-nav-bg);
  color: var(--app-text);
  font-weight: 750;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--app-accent) 74%, transparent);
}
.shell-nav .shell-nav-item[data-shell="library"]:hover,
.shell-nav .shell-nav-item[data-shell="library"]:focus-visible {
  border-color: var(--app-accent);
  background: var(--app-library-nav-hover);
  color: var(--app-text);
  box-shadow: inset 3px 0 0 var(--app-accent), 0 0 0 1px color-mix(in srgb, var(--app-accent) 16%, transparent);
}
.shell-nav .shell-nav-item[data-shell="library"].active {
  border-color: var(--app-accent) !important;
  background: var(--app-library-nav-active) !important;
  color: var(--app-text);
  box-shadow: inset 4px 0 0 var(--app-accent), 0 0 0 1px color-mix(in srgb, var(--app-accent) 20%, transparent);
}
.shell-nav .shell-nav-item[data-shell="library"] > .icon {
  color: var(--app-accent) !important;
}
.shell-nav .shell-nav-item[data-shell="library"] > .nav-count {
  min-width: 28px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  border-radius: 999px;
  background: var(--app-library-nav-badge);
  color: var(--app-accent-readable);
  font-weight: 800;
  text-align: center;
}
.sidebar .nav-item { border-radius: 8px; }
.project-stage-block { margin-bottom: 8px; }
.creator-flow-nav { gap: 3px; }
.production-tools-nav { display: none !important; }
.module-nav .module-nav-item,
.production-tool-item {
  min-height: 50px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  padding: 6px 8px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
}
.module-nav-item > span:nth-child(2),
.production-tool-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-right: 18px;
}
.creator-flow-nav .module-nav-item:not(:last-child)::after { display: none; }
.module-nav .module-nav-item.active,
.production-tool-item.active {
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  background: var(--workspace-nav-active);
  box-shadow: none;
}
.stage-status {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.sidebar-tools-title {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--app-line);
}
.desktop-player-nav {
  min-height: 50px;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  margin-top: 3px;
  padding: 6px 8px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
.desktop-player-nav > .desktop-player-icon { grid-column: 1; }
.desktop-player-nav > span:nth-child(2) { grid-column: 2; }
.desktop-player-nav > .desktop-player-state { grid-column: 3; }
.desktop-player-nav strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-player-nav:hover { border-color: var(--app-line); background: var(--workspace-nav-hover); }
.desktop-player-nav.active { box-shadow: none; }
/* Readability floor: compact layouts must not trade away legible text. */
.app-readable-small {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

:root,
html[data-theme] {
  --app-faint: color-mix(in srgb, var(--app-muted) 84%, var(--app-text));
}

.sidebar .nav-section-title,
.sidebar .workspace-experience-label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 650;
}
.sidebar-lyric-remix strong { font-size: 12px; }
.sidebar-lyric-remix small,
.module-nav-item small,
.production-tool-item small,
.desktop-player-nav small,
.ensemble-nav-entry small,
.library-quick-nav .nav-item small,
.library-quick-nav-title small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}
.module-nav-item strong,
.production-tool-item strong,
.desktop-player-nav strong,
.ensemble-nav-entry strong,
.library-quick-nav .nav-item strong { font-size: 12px; line-height: 1.3; }

.lyric-remix-compare-editor > header small { color: var(--app-muted); font-size: 12px; }
.lyric-remix-compare-editor > header > span { color: var(--app-muted); font-size: 12px; }
.lyric-remix-compare-pane > header strong { font-size: 12px; }
.lyric-remix-compare-pane > header small,
.lyric-remix-compare-pane > header label { color: var(--app-muted); font-size: 12px; }
.lyric-remix-compare-pane > header select { font-size: 12px; }
.lyric-remix-compare-pane > header button { color: var(--app-text); font-size: 12px; }
.lyric-remix-compare-row {
  height: var(--compare-row-height, auto);
  min-height: var(--compare-row-height, 38px);
  grid-template-columns: 34px minmax(96px, 118px) minmax(0, 1fr) 22px;
}
.lyric-remix-line-number { color: var(--app-muted); font-size: 11px; }
.lyric-remix-line-count { color: var(--app-muted); font-size: 11px; line-height: 1.25; white-space: normal; }
.lyric-remix-line-text { font-size: 15px; line-height: 1.32; }
.lyric-remix-line-text[contenteditable="plaintext-only"]:empty::before {
  color: var(--app-muted);
  font-weight: 550;
}
.lyric-remix-compare-editor > footer { color: var(--app-muted); font-size: 12px; line-height: 1.35; }
body:is(.practice-view-open, .lrc-align-view-open, .pitch-workspace-open) .main-content > .song-setup-journey { display: none; }

.song-setup-journey {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, .72fr) minmax(540px, 2fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 8px 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel));
}
.song-setup-journey > header { display: contents; }
.song-setup-journey > header > div { display: grid; min-width: 0; gap: 2px; }
.song-setup-journey > header .eyebrow { display: none; }
.song-setup-journey > header strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.song-setup-journey > header small { overflow: hidden; color: var(--app-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.song-setup-journey [data-journey-primary] { grid-column: 3; display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 0 12px; border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.song-setup-journey [data-journey-primary][hidden] { display: none !important; }
.song-setup-journey [data-journey-collapse] { grid-column: 4; display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 11px; border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--app-text-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.song-setup-journey [data-journey-collapse]:hover { border-color: var(--app-accent); color: var(--app-text); }
.song-setup-journey ol { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.song-setup-journey li { min-width: 0; }
.song-setup-journey li button { display: grid; width: 100%; min-height: 46px; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel-2); color: var(--app-text-muted); text-align: left; }
.song-setup-journey li button > i { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--app-line); border-radius: 5px; color: var(--app-faint); font-style: normal; font-size: 12px; font-weight: 850; }
.song-setup-journey li button > span { display: grid; min-width: 0; }
.song-setup-journey li button strong { color: var(--app-text); font-size: 12px; }
.song-setup-journey li button small { display: none; }
.song-setup-journey li button em { display: block; overflow: hidden; color: var(--app-text-muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.song-setup-journey li button.is-complete { border-color: var(--status-success-border); background: var(--status-success-bg); }
.song-setup-journey li button.is-complete > i { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }
.song-setup-journey li button.is-complete em { color: var(--status-success-text); }
.song-setup-journey li button.is-risk { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.song-setup-journey li button.is-risk > i, .song-setup-journey li button.is-risk em { color: var(--status-warning-text); }
.song-setup-journey li button.is-current { border-color: color-mix(in srgb, var(--app-accent) 68%, var(--app-line)); background: var(--app-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent); }
.song-setup-journey li button.is-current > i { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.song-setup-journey.is-start-choice li button.is-current { border-color: color-mix(in srgb, var(--app-accent) 62%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 78%, var(--app-panel)); }
.song-setup-journey.is-start-choice li:nth-child(2) button.is-current > i { background: var(--app-panel); color: var(--app-accent-readable); }
.song-setup-journey li button:hover { border-color: var(--app-accent); }
.song-setup-journey .sr-command-icon { display: none !important; }
.song-setup-journey.is-collapsed { width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; padding: 7px 9px; border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 24%, var(--app-panel)); }
.song-setup-journey.is-collapsed > header > div { display: grid; grid-column: 1; }
.song-setup-journey.is-collapsed ol { display: none; }
.song-setup-journey.is-collapsed [data-journey-primary] { grid-column: 2; }
.song-setup-journey.is-collapsed [data-journey-collapse] { grid-column: 3; }
@media (min-width: 901px) {
  body[data-shell-surface="project"]:not(.sidebar-collapsed) .main-content > .song-setup-journey { display: none !important; }
}
@media (min-width: 1920px) {
  .song-setup-journey { min-height: 58px; grid-template-columns: minmax(190px, .7fr) minmax(720px, 2fr) auto auto; padding: 8px 12px; }
  .song-setup-journey > header strong { font-size: 13px; }
  .song-setup-journey > header small { font-size: 12px; }
  .song-setup-journey [data-journey-primary],
  .song-setup-journey [data-journey-collapse] { min-height: 38px; font-size: 12px; }
  .song-setup-journey li button { min-height: 48px; padding: 5px 8px; }
  .song-setup-journey li button > i { width: 24px; height: 24px; font-size: 13px; }
  .song-setup-journey li button strong { font-size: 12px; }
}
body.separation-view-open .main-content > .song-setup-journey { margin: 6px 0; }
html.desktop-runtime body.practice-view-open .practice-studio { --practice-workspace-height: calc(100vh - 86px); }

.lrc-quality-guide { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 14px 10px; padding: 11px 13px; border: 1px solid var(--status-warning-border); border-radius: 11px; background: var(--status-warning-bg); }
.lrc-audio-assessment { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 14px 8px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 11px; background: var(--app-panel-2); color: var(--app-text); }
.lrc-audio-assessment[data-state="ready"] { border-color: var(--status-success-border); background: var(--status-success-bg); }
.lrc-audio-assessment[data-state="warning"] { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.lrc-audio-assessment[data-state="loading"] { border-color: var(--status-info-border); background: var(--status-info-bg); }
.lrc-audio-assessment-copy { display: grid; min-width: 0; gap: 2px; }
.lrc-audio-assessment-copy > span { color: var(--app-accent); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.lrc-audio-assessment-copy strong { color: var(--app-text); font-size: 14px; }
.lrc-audio-assessment-copy small { color: var(--app-text-muted); font-size: 12px; line-height: 1.35; }
.lrc-audio-assessment-copy small:empty { display: none; }
.lrc-audio-assessment-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.lrc-audio-assessment-actions label { display: flex; align-items: center; gap: 7px; color: var(--app-text); font-size: 12px; white-space: nowrap; }
.lrc-audio-assessment-actions select { min-width: 250px; min-height: 34px; border: 1px solid var(--control-border); border-radius: 7px; background: var(--control-bg); color: var(--control-text); font-size: 12px; }
.lrc-audio-assessment-actions button { min-height: 34px; padding: 0 11px; border: 1px solid var(--button-accent-border); border-radius: 7px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 12px; font-weight: 750; white-space: nowrap; }
.lrc-audio-assessment-actions button:disabled { opacity: .6; cursor: not-allowed; }
.lrc-audio-assessment-actions button:hover:not(:disabled) { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.lrc-audio-assessment[hidden] { display: none !important; }
.lrc-setup-inspector .lrc-audio-assessment-inline { margin-top: 12px; border-top-width: 1px; }
.lrc-quality-guide.is-ready { border-color: var(--status-success-border); background: var(--status-success-bg); }
.lrc-quality-copy { display: grid; min-width: 0; gap: 2px; }
.lrc-quality-copy > span { color: var(--status-warning-text); font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.lrc-quality-guide.is-ready .lrc-quality-copy > span { color: var(--status-success-text); }
.lrc-quality-copy strong { color: var(--app-text); font-size: 14px; }
.lrc-quality-copy small { overflow: hidden; color: var(--app-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.lrc-quality-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.lrc-quality-actions button { min-height: 34px; padding: 0 11px; }
.lrc-setup-tools { min-height: 40px; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; overflow: hidden; padding: 3px 4px 3px 11px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel-2); }
.lrc-setup-status { min-width: 0; display: flex; flex: 1 1 auto; align-items: baseline; gap: 10px; overflow: hidden; }
.lrc-setup-title { flex: 0 0 auto; color: var(--app-text); font-size: 12px; font-weight: 850; }
.lrc-setup-status small { min-width: 0; overflow: hidden; color: var(--app-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lrc-setup-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.lrc-setup-toolbar button { min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 760; white-space: nowrap; }
.lrc-setup-toolbar button.active { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.lrc-align-workbench { position: relative; min-width: 0; min-height: 0; display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; }
.lrc-align-workbench-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.lrc-setup-inspector { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); color: var(--app-text); box-shadow: 0 18px 48px color-mix(in srgb, var(--app-shadow) 48%, transparent); }
.lrc-setup-inspector[hidden], .lrc-inspector-scrim[hidden] { display: none !important; }
.lrc-inspector-head { min-height: 48px; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--app-line); }
.lrc-inspector-head > div { min-width: 0; display: grid; gap: 1px; }
.lrc-inspector-head span { color: var(--app-muted); font-size: 12px; }
.lrc-inspector-head strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.lrc-inspector-head button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.lrc-inspector-tabs { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border-bottom: 1px solid var(--app-line); background: var(--app-panel-2); }
.lrc-inspector-tabs button { min-width: 0; min-height: 34px; padding: 0 6px; overflow: hidden; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.lrc-inspector-tabs button[aria-selected="true"] { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.lrc-inspector-content { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.lrc-inspector-panel { min-width: 0; }
.lrc-inspector-panel[hidden] { display: none !important; }
.lrc-setup-inspector .lrc-audio-assessment { min-height: 0; align-items: stretch; flex-direction: column; gap: 12px; margin: 0; padding: 12px; }
.lrc-setup-inspector .lrc-audio-assessment-actions { align-items: stretch; flex-direction: column; }
.lrc-setup-inspector .lrc-audio-assessment-actions label { align-items: stretch; flex-direction: column; white-space: normal; }
.lrc-setup-inspector .lrc-audio-assessment-actions select { width: 100%; min-width: 0; }
.lrc-setup-inspector .lrc-inspector-ai-panels { display: contents; }
.lrc-setup-inspector .lrc-ai-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel-2); }
.lrc-setup-inspector .lrc-ai-kind { grid-column: 1 / -1; font-size: 13px; }
.lrc-setup-inspector .lrc-ai-row > :is(label, button) { min-width: 0; min-height: 34px; font-size: 12px; }
.lrc-setup-inspector .lrc-ai-row > label { align-items: stretch; flex-direction: column; white-space: normal; }
.lrc-setup-inspector .lrc-ai-row select { width: 100%; min-width: 0; }
.lrc-setup-inspector .lrc-ai-model-picker,
.lrc-setup-inspector :is(.lrc-ai-state, .lrc-pitch-state) { min-width: 0; width: 100%; max-width: none; grid-column: 1 / -1; margin-left: 0; }
.lrc-setup-inspector .lrc-ai-model-picker > label { align-items: stretch; flex-direction: column; }
.lrc-setup-inspector .lrc-ai-checkbox { justify-content: flex-start; }
.lrc-setup-inspector .lrc-quality-guide { min-height: 0; align-items: stretch; flex-direction: column; gap: 14px; margin: 0; padding: 12px; }
.lrc-setup-inspector .lrc-quality-copy small { overflow: visible; line-height: 1.5; text-overflow: clip; white-space: normal; }
.lrc-setup-inspector .lrc-quality-actions { align-items: stretch; flex-direction: column; }
.lrc-setup-inspector .lrc-quality-actions button { min-height: 36px; }
.lrc-review-workflow { display: grid; gap: 12px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--status-warning-border); border-radius: 9px; background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-panel)); }
.lrc-review-workflow-copy { display: grid; gap: 5px; }
.lrc-review-workflow-copy > span { color: var(--status-warning-text); font-size: 12px; font-weight: 760; }
.lrc-review-workflow-copy > strong { color: var(--app-text); font-size: 15px; line-height: 1.35; }
.lrc-review-workflow-copy > p { margin: 0; color: var(--app-text-muted); font-size: 12px; line-height: 1.55; }
.lrc-review-workflow-copy > output { color: var(--status-warning-text); font-size: 12px; line-height: 1.45; }
.lrc-review-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.lrc-review-steps li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; align-items: baseline; padding-top: 7px; border-top: 1px solid color-mix(in srgb, var(--status-warning-border) 58%, transparent); }
.lrc-review-steps b { color: var(--app-text); font-size: 12px; }
.lrc-review-steps span { color: var(--app-text-muted); font-size: 12px; line-height: 1.45; }
.lrc-review-workflow-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lrc-review-workflow-actions button { min-width: 0; min-height: 36px; padding-inline: 8px; font-size: 12px; }
.lrc-review-workflow-actions .primary-btn { grid-column: 1 / -1; }
.lrc-inspector-scrim { position: absolute; inset: 0; z-index: 7; background: color-mix(in srgb, var(--app-bg) 58%, transparent); }
.lrc-alignment-review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-warning-bg) 62%, var(--app-panel));
  color: var(--app-text);
}
.lrc-alignment-review-copy { display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow: hidden; }
.lrc-alignment-review-copy > span { color: var(--status-warning-text); font-size: 12px; font-weight: 760; letter-spacing: .04em; }
.lrc-alignment-review-copy > strong { flex: 0 0 auto; font-size: 13px; }
.lrc-alignment-review-copy > small { display: none; color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.lrc-alignment-review-copy > output { min-width: 0; overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lrc-alignment-review-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }
.lrc-alignment-review-actions button { min-height: 23px; padding-inline: 8px; font-size: 12px; white-space: nowrap; }
.lrc-line.alignment-review { border-color: color-mix(in srgb, var(--status-warning-text) 52%, var(--app-line)); }
.lrc-review-count { min-height: 24px; padding: 2px 7px; border: 1px solid var(--status-warning-border); border-radius: 999px; background: var(--status-warning-bg); color: var(--status-warning-text); font-size: 12px; font-style: normal; white-space: nowrap; cursor: pointer; }
.lrc-review-count:is(:hover, :focus-visible) { border-color: var(--status-warning-text); background: color-mix(in srgb, var(--status-warning-bg) 78%, var(--app-text)); }
.lrc-char-chip.needs-review { border-color: var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-char-chip.needs-review::after { content: "待复核"; color: var(--status-warning-text); font-size: 12px; }
@media (max-width: 1180px) {
  .lrc-alignment-review { align-items: stretch; flex-direction: column; }
  .lrc-alignment-review-copy { flex-wrap: wrap; }
  .lrc-alignment-review-copy > small { display: block; flex-basis: 100%; }
  .lrc-alignment-review-actions { justify-content: flex-start; }
}
.lrc-line.has-quality-issue { border-color: color-mix(in srgb, var(--status-warning-text) 46%, var(--app-line)); background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-panel)); }
.lrc-edit-text { min-height: 24px; padding: 0 7px; border-color: var(--app-line); background: var(--control-bg); color: var(--app-text-muted); font-size: 12px; }
.lrc-issue-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.lrc-issue-badges :is(i, button) { min-height: 24px; padding: 2px 7px; border: 1px solid var(--status-warning-border); border-radius: 999px; background: var(--status-warning-bg); color: var(--status-warning-text); font-size: 12px; font-style: normal; white-space: nowrap; }
.lrc-issue-badges button { cursor: pointer; }
.lrc-issue-badges button:is(:hover, :focus-visible) { border-color: var(--status-warning-text); background: color-mix(in srgb, var(--status-warning-bg) 78%, var(--app-text)); }
.lrc-edit-chars { min-height: 28px; border-color: var(--app-line); background: var(--control-bg); color: var(--app-accent); }
.lrc-edit-chars.ready { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }
.lrc-line.editing-characters { padding-bottom: 12px; }
.lrc-char-editor { grid-column: 1 / -1; display: grid; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-panel-2) 86%, var(--app-accent)); color: var(--app-text); }
.lrc-char-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lrc-char-editor > header > div { display: grid; gap: 2px; min-width: 0; }
.lrc-char-editor > header strong { font-size: 12px; }
.lrc-char-editor > header small { color: var(--app-text-muted); font-size: 12px; }
.lrc-char-chronology { margin-left: auto; padding: 4px 8px; border: 1px solid var(--app-line); border-radius: 999px; font-size: 12px; white-space: nowrap; }
.lrc-char-chronology.is-ready { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }
.lrc-char-chronology.has-conflict { border-color: var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-text); }
.lrc-char-save-prompt { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px; margin-left: auto; }
.lrc-char-save-state { color: var(--status-success-text); font-size: 12px; font-weight: 750; white-space: nowrap; }
.lrc-char-save-state[data-state="dirty"] { color: var(--status-warning-text); }
.lrc-char-save { min-height: 30px; padding-inline: 10px; font-size: 12px; }
.lrc-char-close { min-height: 28px; border-color: var(--app-line); background: var(--control-bg); color: var(--app-text-muted); }
.lrc-char-strip { display: flex; align-items: stretch; gap: 5px; min-width: 0; padding-bottom: 4px; overflow-x: auto; }
.lrc-char-chip { display: grid; flex: 0 0 78px; gap: 4px; min-height: 66px; place-content: center; border: 1px solid var(--app-line); border-radius: 8px; background: var(--control-bg); color: var(--app-text); }
.lrc-char-chip b { font-size: 16px; }
.lrc-char-chip small { display: grid; gap: 1px; color: var(--app-text-muted); font: 12px 'DM Mono', monospace; }
.lrc-char-chip.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 24%, transparent); }
.lrc-char-boundary { display: grid; grid-template-columns: 104px minmax(160px, 1fr) minmax(270px, auto); align-items: center; gap: 9px; }
.lrc-char-boundary > span { color: var(--app-text); font-size: 12px; font-weight: 750; }
.lrc-char-boundary input { width: 100%; accent-color: var(--app-accent); }
.lrc-char-release-boundary { padding-top: 8px; border-top: 1px solid var(--app-line); }
.lrc-char-release-policy { display: grid; justify-items: end; gap: 2px; min-width: 250px; color: var(--app-text-muted); }
.lrc-char-release-policy label { display: inline-flex; align-items: center; gap: 6px; color: var(--app-text); font-size: 12px; font-weight: 700; }
.lrc-char-release-policy input { width: auto; accent-color: var(--app-accent); }
.lrc-char-release-policy small { font-size: 12px; }
.lrc-char-window { display: flex; justify-content: flex-end; gap: 10px; min-width: 0; color: var(--app-text-muted); font-size: 12px; white-space: nowrap; }
.lrc-char-window span { display: inline-flex; gap: 4px; font-size: 12px; }
.lrc-char-window output { color: var(--app-accent); font: 12px 'DM Mono', monospace; text-align: right; }
.lrc-char-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lrc-char-actions button { min-height: 30px; padding-inline: 9px; border-color: var(--app-line); background: var(--control-bg); color: var(--app-text); }
.lrc-char-actions .lrc-char-ai { border-color: color-mix(in srgb, var(--app-accent) 54%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-accent); }
.lrc-char-actions .lrc-char-validate { margin-left: auto; border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-text); }

.save-recovery-target {
  outline: 2px solid var(--status-warning-border) !important;
  outline-offset: 3px;
  animation: save-recovery-target-pulse 800ms ease-in-out 3;
}
@keyframes save-recovery-target-pulse {
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--status-warning-border) 24%, transparent); }
}

/* The aligner is a workstation, not a setup form. Keep its persistent chrome
   compact and reserve most of the viewport for the lyric rows. */
body.lrc-align-view-open .lrc-modal { padding: 10px 20px 8px; }
body.lrc-align-view-open .lrc-modal .modal-head { min-height: 48px; margin-bottom: 5px; align-items: center; }
body.lrc-align-view-open .lrc-modal .modal-head h2 { margin-top: 2px; font-size: 21px; }
body.lrc-align-view-open .lrc-file-name { margin-top: 2px; }
body.lrc-align-view-open .lrc-ai-tools { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
body.lrc-align-view-open .lrc-ai-row { align-content: center; gap: 6px 8px; padding: 6px 9px; }
body.lrc-align-view-open .lrc-ai-row + .lrc-ai-row { border-top: 0; border-left: 1px solid var(--app-line); }
body.lrc-align-view-open .lrc-ai-row :is(button, select) { min-height: 30px; }
body.lrc-align-view-open .lrc-ai-state,
body.lrc-align-view-open .lrc-pitch-state { min-width: 210px; }
body.lrc-align-view-open .lrc-ai-tools:not(.running) .lrc-ai-timing { display: none; }
body.lrc-align-view-open .lrc-quality-guide { min-height: 54px; margin: 6px; padding: 7px 10px; }
body.lrc-align-view-open .lrc-quality-actions button { min-height: 30px; }
body.lrc-align-view-open .lrc-playback-toolbar { min-height: 44px; padding: 4px 0; }
body.lrc-align-view-open .lrc-overall-seek { min-height: 30px; padding: 2px 0 4px; font-size: 12px; }
body.lrc-align-view-open .lrc-overall-seek output { font-size: 11px; }
body.lrc-align-view-open .lrc-more-tools > summary { min-height: 26px; font-size: 12px; }
body.lrc-align-view-open .lrc-playback-toolbar > :is(#lrcCurrentTime, .lrc-selection) { font-size: 11px; }
body.lrc-align-view-open .lrc-lines { padding-bottom: 2px; }
body.lrc-align-view-open .lrc-columns { min-height: 28px; margin-bottom: 2px; font-size: 11px; }
body.lrc-align-view-open :is(.lrc-line, .lrc-columns) {
  grid-template-columns: var(--lrc-col-select) minmax(0, var(--lrc-col-lyrics)) minmax(0, var(--lrc-col-start)) minmax(0, var(--lrc-col-end)) minmax(var(--lrc-col-actions), 1fr);
}
body.lrc-align-view-open .lrc-line { min-height: 88px; margin-bottom: 2px; }
body.lrc-align-view-open .lrc-line.editing-characters { min-height: 242px; }
.lrc-line-context-menu {
  position: fixed;
  z-index: 10050;
  display: grid;
  width: min(270px, calc(100vw - 16px));
  overflow: hidden;
  padding: 5px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--app-shadow) 52%, transparent);
}
.lrc-line-context-menu[hidden] { display: none; }
.lrc-line-context-menu button {
  display: grid;
  gap: 2px;
  min-height: 46px;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  color: var(--app-text);
  background: transparent;
  text-align: left;
}
.lrc-line-context-menu button:hover,
.lrc-line-context-menu button:focus-visible { color: var(--app-accent); background: var(--app-accent-soft); }
.lrc-line-context-menu button:disabled { color: var(--app-faint); background: transparent; cursor: not-allowed; }
.lrc-line-context-menu strong { font-size: 12px; }
.lrc-line-context-menu small { color: var(--app-muted); font-size: 10px; }
body.lrc-align-view-open .lrc-lyric-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 8px;
}
body.lrc-align-view-open .lrc-vocal-controls { grid-column: 1; grid-row: 1 / 3; align-self: start; padding-top: 1px; }
body.lrc-align-view-open .lrc-text { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.55; overflow-wrap: normal; word-break: break-word; }
body.lrc-align-view-open .lrc-edit-text { grid-column: 3; grid-row: 1; }
body.lrc-align-view-open .lrc-row-quality { grid-column: 2 / 4; grid-row: 2; min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
body.lrc-align-view-open .lrc-row-quality .lrc-issue-badges { min-width: 0; flex: 1 1 auto; }
body.lrc-align-view-open .lrc-modal .modal-actions { min-height: 50px; align-items: center; margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--app-line); }

@media (min-width: 1280px) {
  body.lrc-align-view-open .lrc-align-workbench.has-inspector { grid-template-columns: minmax(0, 1fr) minmax(410px, 460px); gap: 8px; }
  body.lrc-align-view-open .lrc-align-workbench.has-inspector .lrc-setup-inspector { position: relative; z-index: 8; display: flex; box-shadow: none; }
  body.lrc-align-view-open .lrc-align-workbench .lrc-inspector-scrim { display: none !important; }
}

@media (max-width: 1279px) {
  body.lrc-align-view-open .lrc-align-workbench.has-inspector .lrc-setup-inspector { position: absolute; inset: 0 0 0 auto; z-index: 8; display: flex; width: min(460px, calc(100% - 24px)); }
  body.lrc-align-view-open .lrc-align-workbench.has-inspector .lrc-inspector-scrim:not([hidden]) { display: block; }
}

@media (min-width: 1381px) {
  body.lrc-align-view-open .lrc-playback-toolbar {
    display: grid;
    grid-template-columns: auto auto minmax(150px, 210px) minmax(170px, 230px) minmax(320px, 1fr) auto;
    align-items: center;
    gap: 8px;
  }
  body.lrc-align-view-open .lrc-playback-toolbar > button { height: 36px; min-height: 36px; white-space: nowrap; }
  body.lrc-align-view-open .lrc-playback-toolbar > :is(#lrcCurrentTime, .lrc-selection) { white-space: nowrap; }
  body.lrc-align-view-open .lrc-search { width: 100%; min-width: 0; max-width: none; margin-left: 0; }
  body.lrc-align-view-open .lrc-lyrics-source { min-width: 0; flex-direction: row; }
  body.lrc-align-view-open .lrc-lyrics-source > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.lrc-align-view-open .lrc-lyrics-source select { width: 100%; min-width: 0; min-height: 34px; }
}

@media (max-width: 1380px) {
  body.lrc-align-view-open .lrc-ai-tools { grid-template-columns: minmax(0, 1fr); }
  body.lrc-align-view-open .lrc-ai-row + .lrc-ai-row { border-top: 1px solid var(--app-line); border-left: 0; }
  body.lrc-align-view-open .lrc-quality-guide { align-items: stretch; flex-direction: column; }
  body.lrc-align-view-open .lrc-quality-actions { flex-wrap: wrap; }
  body.lrc-align-view-open .lrc-search { order: 5; max-width: none; flex-basis: 100%; margin-left: 0; }
  body.lrc-align-view-open .lrc-follow-toggle { order: 4; margin-left: auto; }
}

@media (max-width: 900px) {
  body.lrc-align-view-open .lrc-setup-tools { padding-left: 6px; }
  body.lrc-align-view-open .lrc-setup-status { flex: 0 1 auto; }
  body.lrc-align-view-open .lrc-setup-status small { display: none; }
  body.lrc-align-view-open .lrc-setup-toolbar { min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
  body.lrc-align-view-open .lrc-setup-toolbar button { min-width: 0; padding-inline: 7px; }
}

@media (max-width: 1320px) {
  body.lrc-align-view-open .lrc-columns { display: none; }
  body.lrc-align-view-open .lrc-line {
    min-height: 164px;
    grid-template-columns: 44px minmax(280px, 1fr) minmax(280px, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
  }
  body.lrc-align-view-open .lrc-index { grid-column: 1; grid-row: 1 / 4; }
  body.lrc-align-view-open .lrc-lyric-cell { grid-column: 2 / 4; grid-row: 1; }
  body.lrc-align-view-open .lrc-time-column.start-column { grid-column: 2; grid-row: 2; }
  body.lrc-align-view-open .lrc-time-column.end-column { grid-column: 3; grid-row: 2; }
  body.lrc-align-view-open .lrc-capture-actions { grid-column: 2 / 4; grid-row: 3; justify-content: flex-end; overflow: visible; }
  body.lrc-align-view-open .lrc-char-editor { grid-column: 1 / 4; grid-row: 4; }
}

@media (max-width: 760px) {
  body.lrc-align-view-open .lrc-modal { padding-inline: 12px; }
  body.lrc-align-view-open .lrc-waveform-panel > header small { display: none; }
  body.lrc-align-view-open .lrc-line {
    min-height: 238px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  body.lrc-align-view-open .lrc-index { grid-column: 1; grid-row: 1 / 5; }
  body.lrc-align-view-open .lrc-lyric-cell { grid-column: 2; grid-row: 1; }
  body.lrc-align-view-open .lrc-time-column.start-column { grid-column: 2; grid-row: 2; }
  body.lrc-align-view-open .lrc-time-column.end-column { grid-column: 2; grid-row: 3; }
  body.lrc-align-view-open .lrc-capture-actions { grid-column: 2; grid-row: 4; justify-content: flex-start; flex-wrap: wrap; }
  body.lrc-align-view-open .lrc-char-editor { grid-column: 1 / 3; grid-row: 5; }
  .lrc-char-boundary { grid-template-columns: minmax(0, 1fr); }
  .lrc-char-boundary > span { grid-column: 1 / -1; }
  .lrc-char-window { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .lrc-char-release-policy { min-width: 0; justify-items: start; }
  .lrc-char-actions .lrc-char-validate { margin-left: 0; }
}

@media (max-width: 1180px) {
  .song-setup-journey:not(.is-collapsed) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .song-setup-journey:not(.is-collapsed) > header > div { grid-column: 1; }
  .song-setup-journey:not(.is-collapsed) ol { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6, minmax(92px, 1fr)); }
  .song-setup-journey:not(.is-collapsed) [data-journey-primary] { grid-column: 2; }
  .song-setup-journey:not(.is-collapsed) [data-journey-collapse] { grid-column: 3; }
  .lrc-quality-guide { align-items: stretch; flex-direction: column; }
  .lrc-quality-actions { flex-wrap: wrap; }
  .lrc-audio-assessment { align-items: stretch; flex-direction: column; }
  .lrc-audio-assessment-actions { flex-wrap: wrap; }
  .lrc-audio-assessment-actions select { min-width: min(100%, 360px); }
}

@media (max-width: 700px) {
  .song-setup-journey.is-collapsed { grid-template-columns: minmax(0, 1fr) auto; }
  .song-setup-journey.is-collapsed > header > div { grid-column: 1 / -1; }
  .song-setup-journey.is-collapsed [data-journey-primary] { grid-column: 1; justify-self: start; }
  .song-setup-journey.is-collapsed [data-journey-collapse] { grid-column: 2; }
  .song-setup-journey:not(.is-collapsed) ol { overflow-x: auto; }
}

@media (max-width: 1180px) {
  .workspace-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-hub-experimental-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-hub-tools { grid-template-columns: minmax(0, 1fr); }
  .workspace-hub-showcase-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .workspace-hub { padding-top: 20px; }
  .workspace-hub-hero { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .workspace-hub-progress { justify-content: flex-start; }
  .workspace-hub-tools nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-hub-showcase-body { grid-template-columns: minmax(0, 1fr); }
  .workspace-hub-showcase-copy { padding: 5px 3px 3px; }
}
@media (max-width: 700px) {
  .workspace-hub-hero { padding: 24px 20px; border-radius: 13px; }
  .workspace-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-hub-experimental-grid { grid-template-columns: minmax(0, 1fr); }
  .workspace-hub-section-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .workspace-hub-showcase { padding: 16px; }
  .workspace-hub-showcase-head { align-items: flex-start; flex-direction: column; }
  .workspace-hub-showcase-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-hub-showcase-foot { align-items: flex-start; flex-direction: column; }
  .showcase-demo { padding: 14px; }
  .showcase-remix-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-remix-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-hub-card, .workspace-hub-continue { transition: none; }
  .workspace-hub-card:hover, .workspace-hub-continue:hover { transform: none; }
  .workspace-hub-showcase-action, .showcase-lyric-row b { animation: none; transition: none; }
}

/* 写歌工作区：主编辑区与创作栏组成真正的双栏布局，收起后主区自然扩展。 */
.writing-workspace-shell { display: contents; }
body[data-workspace-module="writing"] .writing-workspace-shell {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
body[data-workspace-module="writing"].songwriting-panel-open .writing-workspace-shell {
  grid-template-columns: minmax(0, 1fr) minmax(300px, var(--songwriting-panel-width, 380px));
}
body[data-workspace-module="writing"].songwriting-panel-open.songwriting-panel-collapsed .writing-workspace-shell {
  grid-template-columns: minmax(0, 1fr) 48px;
}
body[data-workspace-module="writing"].songwriting-panel-floating .writing-workspace-shell {
  grid-template-columns: minmax(0, 1fr);
}
body[data-workspace-module="writing"] .content-grid {
  grid-template-columns: minmax(0, 1fr);
}
body[data-workspace-module="writing"] .editor-column > :not(#aiToolsPanel),
body[data-workspace-module="writing"] .tool-column {
  display: none !important;
}
body[data-workspace-module="writing"] #aiToolsPanel {
  display: block !important;
  max-width: none;
  margin: 0;
}
body[data-workspace-module="writing"].ai-writing-entry-open .writing-workspace-shell { grid-template-columns: minmax(0, 1fr); }
body[data-workspace-module="writing"].ai-writing-entry-open #songwritingPanel { display: none !important; }
.ai-writing-entry { display: block; margin: 0; }
.ai-tools-panel.ai-entry-open {
  display: grid !important;
  place-items: start;
  min-height: 0;
  margin: 8px 0 0;
  padding: clamp(18px, 3vw, 36px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
html[data-ui-surface] .ai-tools-panel.ai-entry-open {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html[data-ui-surface="glass"] .ai-tools-panel.ai-entry-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: none;
}
.ai-tools-panel.ai-entry-open > :not(#aiLegacyWritingTools) { display: none !important; }
.ai-tools-panel.ai-entry-open > #aiLegacyWritingTools { display: block !important; width: 100%; }
.ai-tools-panel.ai-entry-open > #aiLegacyWritingTools > :not(.ai-writing-entry) { display: none !important; }
/* Entry is a single decision screen. Hide the journey chrome so the start
   choice is not buried under a long checklist + co-writer + history stack. */
body.ai-writing-entry-open .main-content > .song-setup-journey { display: none !important; }
.ai-writing-entry-copy { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.ai-writing-entry-copy > span { color: var(--app-accent); font: 700 12px 'DM Mono', ui-monospace, monospace; letter-spacing: .1em; }
.ai-writing-entry-copy h2 { margin: 10px 0 8px; color: var(--app-text); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.03em; }
.ai-writing-entry-copy p { margin: 0; color: var(--app-muted); font-size: 14px; line-height: 1.65; }
.ai-writing-entry-options { display: grid; width: min(1160px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 auto; }
.ai-writing-entry-options > button { display: grid; min-height: clamp(250px, 28vh, 300px); align-content: center; gap: 13px; padding: clamp(32px, 3vw, 42px); border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-panel); color: var(--app-text); text-align: left; box-shadow: 0 14px 34px color-mix(in srgb, var(--app-shadow) 24%, transparent); }
.ai-tools-panel.ai-entry-open .ai-writing-entry-options > button.active { border-color: var(--app-line); background: var(--app-panel); color: var(--app-text); }
.ai-writing-entry-options > button:hover,
.ai-writing-entry-options > button:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; transform: translateY(-2px); }
.ai-tools-panel.ai-entry-open .ai-writing-entry-options > button.active:hover,
.ai-tools-panel.ai-entry-open .ai-writing-entry-options > button.active:focus-visible { border-color: var(--app-accent); background: var(--state-hover); }
.ai-writing-entry-options > button strong { color: var(--app-text); font-size: clamp(24px, 2.1vw, 28px); line-height: 1.25; }
.ai-writing-entry-options > button span { color: var(--app-muted); font-size: 15px; line-height: 1.65; }
.ai-writing-entry-options > button i { justify-self: start; margin-top: 16px; padding: 10px 16px; border: 1px solid var(--button-accent-border); border-radius: 7px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 13px; font-style: normal; font-weight: 800; }
.ai-tools-panel.ai-entry-open .ai-writing-workbench-nav { display: none; }
.ai-tools-panel:not(.ai-entry-open) .ai-writing-entry-copy,
.ai-tools-panel:not(.ai-entry-open) .ai-writing-entry-options { display: none; }
.ai-writing-workbench-nav { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--workspace-context-line); }
.ai-writing-workbench-nav > span { display: grid; gap: 2px; }
.ai-writing-workbench-nav small { color: var(--app-muted); font-size: 12px; }
.ai-writing-workbench-nav strong { color: var(--app-text); font-size: 13px; }
.ai-writing-workbench-nav button { min-height: 34px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 12px; }
.ai-writing-workbench-nav button:hover { border-color: var(--app-accent); color: var(--app-accent); }

.songwriting-panel {
  position: sticky;
  z-index: 20;
  top: 12px;
  display: flex;
  width: 100%;
  min-width: 300px;
  height: auto;
  max-height: calc(100dvh - 24px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-panel) 96%, var(--app-accent-soft));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--app-shadow) 24%, transparent);
}
.songwriting-panel[hidden] { display: none !important; }
.songwriting-resize-handle {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  cursor: col-resize;
}
.songwriting-resize-handle::after {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 4px;
  width: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  content: '';
}
.songwriting-resize-handle:hover::after,
.songwriting-resize-handle:focus-visible::after,
.songwriting-panel.is-resizing .songwriting-resize-handle::after { background: var(--app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 16%, transparent); }
.songwriting-resize-handle:focus-visible { outline: 0; }
.songwriting-panel-head {
  display: grid;
  min-height: 68px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--app-line);
  background: color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel));
  user-select: none;
}
.songwriting-drag-grip { color: var(--app-faint); font-size: 17px; }
.songwriting-panel:not(.is-floating) .songwriting-drag-grip { font-size: 0; }
.songwriting-panel:not(.is-floating) .songwriting-drag-grip::before { content: '▥'; font-size: 14px; }
.songwriting-panel-head > div:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.songwriting-panel-head strong,
.songwriting-panel-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.songwriting-panel-head strong { color: var(--app-text); font-size: 12px; }
.songwriting-panel-head small { color: var(--app-muted); font-size: 9px; }
.songwriting-panel-head-actions { display: flex; gap: 4px; }
#songwritingPin,
#songwritingClose { display: none; }
.songwriting-panel-head-actions button,
.songwriting-quick-actions button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--app-line);
  border-radius: 6px;
  background: var(--button-secondary-bg);
  color: var(--app-muted);
  font-size: 9px;
}
.songwriting-panel-head-actions button:hover,
.songwriting-quick-actions button:hover { border-color: color-mix(in srgb, var(--app-accent) 44%, var(--app-line)); color: var(--app-text); }
#songwritingPin[aria-pressed="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent-readable); }
.songwriting-panel-body {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-rows: auto auto auto auto minmax(180px, 1fr) auto auto;
  gap: 12px;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 16px;
}
.songwriting-panel-intro { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-accent-soft); }
.songwriting-panel-intro strong { color: var(--app-text); font-size: 10px; }
.songwriting-panel-intro span { color: var(--app-muted); font-size: 9px; line-height: 1.5; }
.songwriting-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.songwriting-steps button {
  min-height: 32px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-panel-2) 66%, var(--app-panel));
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 700;
}
.songwriting-steps button:hover,
.songwriting-steps button:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  color: var(--app-accent);
  outline: 0;
}
.songwriting-document-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px; position: sticky; top: -16px; z-index: 2; padding: 12px 0 10px; background: var(--app-panel); }
.songwriting-panel:not([data-draft-mode="new"]) .songwriting-document-actions { grid-template-columns: minmax(0, 1fr); }
.songwriting-panel:not([data-draft-mode="new"]) #songwritingNew,
.songwriting-panel:not([data-draft-mode="new"]) .songwriting-panel-intro { display: none; }
.songwriting-document-actions button { min-height: 38px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 10px; font-weight: 800; }
.songwriting-document-actions button:hover { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); }
.songwriting-document-actions #songwritingSave { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); }
.songwriting-document-actions #songwritingSave:disabled { cursor: wait; opacity: .68; }
.songwriting-panel[data-draft-mode="new"] .songwriting-panel-intro { border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line)); }
.songwriting-meta-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 10px; align-items: start; }
.songwriting-panel-body > label,
.songwriting-field { display: grid; min-width: 0; gap: 6px; color: var(--app-muted); font-size: 9px; }
.songwriting-panel-body input,
.songwriting-panel-body textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-bg) 42%, var(--app-panel));
  color: var(--app-text);
  line-height: 1.6;
}
.songwriting-panel-body input { height: 38px; padding: 0 10px; }
.songwriting-panel-body textarea { resize: vertical; padding: 9px 10px; }
.songwriting-lyrics-field { min-height: 150px; }
.songwriting-lyrics-field textarea { min-height: 150px; height: 100%; resize: none; }
.songwriting-lyrics-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.songwriting-lyrics-field > span b { color: var(--app-text); font-size: 12px; font-weight: 700; }
.songwriting-lyrics-field > span small { color: var(--app-faint); font-size: 11px; }
.songwriting-panel-body :is(input, textarea)::placeholder { color: var(--app-faint); }
.songwriting-panel-body :is(input, textarea):focus { border-color: var(--app-accent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 18%, transparent); }
.songwriting-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.songwriting-save-state { display: flex; align-items: center; gap: 7px; color: var(--app-faint); font-size: 9px; }
.songwriting-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.songwriting-primary-actions button { min-height: 40px; border: 1px solid var(--button-accent-border); border-radius: 7px; background: var(--button-accent-bg); color: var(--button-accent-text); font-size: 10px; font-weight: 800; }
.songwriting-primary-actions button:first-child { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--app-text); }
.songwriting-panel.is-floating {
  position: fixed;
  z-index: 120;
  top: var(--songwriting-panel-y, 86px);
  right: auto;
  bottom: auto;
  left: var(--songwriting-panel-x, calc(100vw - 420px));
  width: var(--songwriting-panel-width, 380px);
  height: min(720px, calc(100vh - 104px));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--app-shadow) 42%, transparent);
}
.songwriting-panel.is-floating .songwriting-panel-head { cursor: move; }
.songwriting-panel.is-floating .songwriting-resize-handle { display: none; }
.songwriting-panel.is-collapsed {
  width: 48px;
  min-width: 48px;
}
.songwriting-panel.is-collapsed .songwriting-panel-head {
  min-height: 100%;
  grid-template-columns: 1fr;
  align-items: start;
  padding: 8px;
  border: 0;
}
.songwriting-panel.is-collapsed :is(.songwriting-drag-grip, .songwriting-panel-head > div:nth-child(2), #songwritingPin, #songwritingClose, .songwriting-panel-body, .songwriting-resize-handle) { display: none; }
.songwriting-panel.is-collapsed .songwriting-panel-head-actions { display: grid; }
.songwriting-panel.is-collapsed #songwritingCollapse {
  width: 40px;
  min-width: 40px;
  min-height: 132px;
  padding: 12px 0;
  color: var(--app-accent);
  font-size: 0;
}
.songwriting-panel.is-collapsed #songwritingCollapse::before {
  content: '新建歌词  ‹';
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
  writing-mode: vertical-rl;
}

@media (max-width: 1180px) {
  .topbar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "utilities" "song"; }
  .breadcrumbs { display: none; }
  .top-actions { width: 100%; justify-content: flex-end; }
  body[data-workspace-module="writing"].songwriting-panel-open .writing-workspace-shell {
    grid-template-columns: minmax(0, 1fr) minmax(280px, min(var(--songwriting-panel-width, 340px), 36vw));
  }
  body[data-workspace-module="writing"].songwriting-panel-open.songwriting-panel-collapsed .writing-workspace-shell {
    grid-template-columns: minmax(0, 1fr) 48px;
  }
}
@media (max-width: 860px) {
  .topbar { column-gap: 0; row-gap: 8px; }
  .active-song-context { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .active-song-context-icon { width: 28px; height: 28px; }
  .active-song-context em { display: none; }
  .active-song-context-actions button { padding-inline: 7px; }
  .top-actions :is(.account-chip, .support-chip, #openSettings) { display: none; }
  .creator-guide.is-start-choice .creator-guide-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .topbar { min-height: 132px; }
  .active-song-context { grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
  .active-song-context > div:nth-child(2) { display: grid; gap: 1px; }
  .active-song-context-actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; padding-left: 38px; }
  body[data-workspace-module="writing"].songwriting-panel-open .writing-workspace-shell,
  body[data-workspace-module="writing"].songwriting-panel-open.songwriting-panel-collapsed .writing-workspace-shell { grid-template-columns: minmax(0, 1fr); }
  .songwriting-panel,
  .songwriting-panel.is-floating { position: fixed; top: 72px; right: 10px; bottom: 10px; left: 10px; width: auto; min-width: 0; height: auto; }
  .songwriting-panel.is-collapsed { top: 84px; right: 10px; bottom: auto; left: auto; width: 58px; height: 180px; }
  .songwriting-resize-handle, #songwritingPin { display: none; }
  .songwriting-primary-actions { grid-template-columns: minmax(0, 1fr); }
  .songwriting-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .songwriting-meta-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-writing-entry-options { grid-template-columns: minmax(0, 1fr); }
  .ai-writing-entry-options > button { min-height: 190px; }
  .lyric-remix-entry-layout { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-entry-focus { min-height: 360px; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; padding: 28px; }
  .lyric-remix-entry-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lyric-remix-entry-checklist-head,
  .lyric-remix-entry-next { grid-column: 1 / -1; }
}

/* 歌词导入、魔改与双歌词对照：全部复用全局主题语义变量。 */
.creator-lyrics-source-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.creator-lyrics-source-choice button { display: grid; gap: 3px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--button-secondary-bg); color: var(--app-muted); text-align: left; }
.creator-lyrics-source-choice button strong { color: var(--app-text); font-size: 11px; }
.creator-lyrics-source-choice button span { font-size: 9px; }
.creator-lyrics-source-choice button.active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.creator-lyrics-recognition { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); border-radius: 9px; background: color-mix(in srgb, var(--app-accent-soft) 60%, var(--app-panel)); }
.creator-lyrics-recognition[hidden] { display: none; }
.creator-lyrics-recognition > div { display: grid; gap: 5px; }
.creator-lyrics-recognition strong { color: var(--app-text); font-size: 12px; }
.creator-lyrics-recognition p, .creator-lyrics-recognition small { margin: 0; color: var(--app-muted); font-size: 9px; line-height: 1.55; }
.creator-lyrics-recognition button { min-height: 38px; padding: 0 14px; border: 1px solid var(--button-accent-border); border-radius: 7px; background: var(--button-accent-bg); color: var(--button-accent-text); font-weight: 800; }
.creator-lyrics-recognition small { grid-column: 1 / -1; }

.lyric-remix-workspace { display: grid; gap: 14px; margin: 0 0 22px; padding: 20px; border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-line)); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--app-accent-soft) 66%, var(--app-panel)), var(--app-panel)); box-shadow: 0 16px 42px color-mix(in srgb, var(--app-shadow) 32%, transparent); }
.lyric-remix-workspace.is-entry > :not(#lyricRemixEntry) { display: none !important; }
.lyric-remix-entry { display: grid; gap: 22px; align-content: start; width: min(1180px, 100%); min-height: min(72vh, 820px); margin: 18px auto 48px; padding: clamp(10px, 1.8vw, 22px) 0 16px; }
.lyric-remix-entry [data-entry-view][hidden] { display: none !important; }
.lyric-remix-entry-home { display: grid; gap: 22px; align-content: start; }
.lyric-remix-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding: 0 2px; }
.lyric-remix-entry-step { display: flex; align-items: center; gap: 14px; }
.lyric-remix-entry-step > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 62%, var(--app-line)); border-radius: 12px; background: var(--app-accent-soft); color: var(--app-accent-readable); font: 700 13px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-entry-step div { display: grid; gap: 3px; }
.lyric-remix-entry-step small { color: var(--app-faint); font-size: 12px; letter-spacing: 0.04em; }
.lyric-remix-entry-step strong { color: var(--app-text); font-size: 17px; }
.lyric-remix-entry-progress { display: flex; align-items: center; gap: 12px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-entry-progress > span { width: 160px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--app-line); }
.lyric-remix-entry-progress i { display: block; width: var(--remix-entry-progress, 33%); height: 100%; border-radius: inherit; background: var(--app-accent); transition: width 240ms ease; }
.lyric-remix-entry-progress strong { color: var(--app-text); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-entry-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .82fr); gap: 22px; }
.lyric-remix-entry-focus,
.lyric-remix-entry-checklist { border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.lyric-remix-entry-focus { position: relative; display: grid; min-height: 460px; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 48px; overflow: hidden; padding: clamp(36px, 4.5vw, 60px); background: radial-gradient(circle at 17% 42%, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--app-panel) 94%, var(--app-accent-soft)), var(--app-panel)); }
.lyric-remix-entry-focus::after { position: absolute; right: -90px; bottom: -150px; width: 330px; height: 330px; border: 1px solid color-mix(in srgb, var(--app-accent) 20%, var(--app-line)); border-radius: 50%; content: ''; pointer-events: none; }
.lyric-remix-entry-symbol { position: relative; z-index: 1; display: grid; width: 156px; height: 156px; place-items: center; border: 1px solid color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); border-radius: 38px; background: color-mix(in srgb, var(--app-accent-soft) 82%, var(--app-panel)); color: var(--app-accent); box-shadow: 0 24px 60px color-mix(in srgb, var(--app-accent) 14%, transparent); }
.lyric-remix-entry-symbol span { position: relative; z-index: 1; font-size: 62px; line-height: 1; }
.lyric-remix-entry-symbol i { position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--app-accent) 30%, transparent); border-radius: 28px; transform: rotate(8deg); }
.lyric-remix-entry-copy { position: relative; z-index: 1; display: grid; min-width: 0; gap: 0; }
.lyric-remix-entry-badge { display: inline-flex; width: fit-content; padding: 7px 10px; border-radius: 999px; background: var(--app-accent-soft); color: var(--app-accent-readable); font-size: 12px; font-weight: 700; }
.lyric-remix-entry-copy h2 { max-width: 640px; margin: 18px 0 12px; color: var(--app-text); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.04em; }
.lyric-remix-entry-copy > p { max-width: 620px; margin: 0; color: var(--app-muted); font-size: 15px; line-height: 1.75; }
.lyric-remix-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lyric-remix-entry-primary,
.lyric-remix-entry-secondary { min-height: 52px; padding: 0 22px; border: 1px solid var(--button-accent-border); border-radius: 10px; font-size: 14px; font-weight: 800; cursor: pointer; }
.lyric-remix-entry-primary { display: inline-flex; min-width: 210px; align-items: center; justify-content: space-between; gap: 24px; background: var(--button-accent-bg); color: var(--button-accent-text); }
.lyric-remix-entry-primary:hover { background: color-mix(in srgb, var(--button-accent-bg) 82%, var(--app-accent)); }
.lyric-remix-entry-secondary { background: var(--button-secondary-bg); color: var(--app-text); border-color: var(--button-secondary-border); }
.lyric-remix-entry-secondary:hover { background: var(--button-secondary-bg-hover); }
.lyric-remix-entry-reassurance { display: block; margin-top: 18px; color: var(--app-faint); font-size: 12px; line-height: 1.6; }
.lyric-remix-entry-ambient { position: absolute; right: 28px; bottom: 18px; left: 28px; z-index: 0; display: grid; height: 72px; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 8px; opacity: .28; pointer-events: none; }
.lyric-remix-entry-ambient i { height: var(--ambient-height, 42%); min-height: 8px; border-radius: 999px 999px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 28%, transparent), color-mix(in srgb, var(--app-accent) 74%, var(--app-panel))); transform: scaleY(.58); transform-origin: center bottom; animation: creator-ambient-pulse var(--ambient-speed, 4.8s) ease-in-out var(--ambient-delay, 0s) infinite alternate; }
.lyric-remix-entry-ambient i:nth-child(7n + 1) { --ambient-height: 28%; --ambient-speed: 4.1s; --ambient-delay: -.8s; }
.lyric-remix-entry-ambient i:nth-child(7n + 2) { --ambient-height: 55%; --ambient-speed: 5.3s; --ambient-delay: -2.4s; }
.lyric-remix-entry-ambient i:nth-child(7n + 3) { --ambient-height: 82%; --ambient-speed: 4.6s; --ambient-delay: -1.3s; }
.lyric-remix-entry-ambient i:nth-child(7n + 4) { --ambient-height: 42%; --ambient-speed: 5.8s; --ambient-delay: -3.1s; }
.lyric-remix-entry-ambient i:nth-child(7n + 5) { --ambient-height: 68%; --ambient-speed: 4.9s; --ambient-delay: -1.9s; }
.lyric-remix-entry-ambient i:nth-child(7n + 6) { --ambient-height: 36%; --ambient-speed: 5.5s; --ambient-delay: -.4s; }
.lyric-remix-entry-ambient i:nth-child(7n) { --ambient-height: 74%; --ambient-speed: 4.4s; --ambient-delay: -2.8s; }
.lyric-remix-entry-checklist { display: grid; align-content: start; gap: 12px; padding: 28px; }
.lyric-remix-entry-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 2px 12px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-entry-checklist-head strong { color: var(--app-text); font: 600 12px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-entry-checklist > button { display: grid; min-height: 84px; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel-2); color: var(--app-text); text-align: left; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.lyric-remix-entry-checklist > button:hover,
.lyric-remix-entry-checklist > button:focus-visible { border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line)); background: var(--state-hover); outline: 0; transform: translateY(-1px); }
.lyric-remix-entry-checklist > button > i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-muted); font: normal 600 12px 'DM Mono', ui-monospace, monospace; font-style: normal; }
.lyric-remix-entry-checklist > button > span { display: grid; min-width: 0; gap: 4px; }
.lyric-remix-entry-checklist > button strong { font-size: 14px; }
.lyric-remix-entry-checklist > button small { overflow: hidden; color: var(--app-faint); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-entry-checklist > button em { color: var(--app-accent-readable); font-size: 12px; font-style: normal; font-weight: 700; }
.lyric-remix-entry-next { display: grid; gap: 6px; margin-top: 8px; padding: 20px 14px 4px; border-top: 1px solid var(--app-line); }
.lyric-remix-entry-next span { color: var(--app-faint); font-size: 12px; }
.lyric-remix-entry-next strong { color: var(--app-text); font-size: 13px; }
.lyric-remix-entry-next small { color: var(--app-muted); font-size: 12px; line-height: 1.6; }
.lyric-remix-ai-stage.lyric-remix-entry-stage { width: min(1180px, 100%); gap: 20px; margin: 18px auto 48px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.lyric-remix-ai-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 2px; }
.lyric-remix-ai-stage-head-tools { display: flex; align-items: center; gap: 12px; }
.lyric-remix-ai-stage-lead { max-width: 760px; margin: 0; padding: 0 2px; color: var(--app-muted); font-size: 14px; line-height: 1.7; }
.lyric-remix-ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.08fr); gap: 22px; align-items: stretch; }
.lyric-remix-ai-workspace,
.lyric-remix-ai-result { display: grid; gap: 14px; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.lyric-remix-ai-workspace { align-content: start; }
.lyric-remix-ai-result { grid-template-rows: auto minmax(0, 1fr) auto; min-height: min(62vh, 680px); }
.lyric-remix-ai-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--app-line); }
.lyric-remix-ai-result-head > div { display: grid; gap: 4px; }
.lyric-remix-ai-result-head strong { color: var(--app-text); font-size: 15px; }
.lyric-remix-ai-result-head small { color: var(--app-faint); font-size: 12px; }
.lyric-remix-ai-result-head output { flex: 0 1 240px; color: var(--app-muted); font-size: 12px; line-height: 1.5; text-align: right; }
.lyric-remix-ai-lyrics-field { display: grid; min-height: 0; height: 100%; gap: 8px; }
.lyric-remix-ai-lyrics-field textarea { min-height: 360px; height: 100%; }
.lyric-remix-ai-result-foot { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--app-line); }
.lyric-remix-ai-result-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-ai-result-actions output { flex: 1 1 220px; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.lyric-remix-ai-run { min-width: 168px; min-height: 46px; font-weight: 800; }
.lyric-remix-ai-apply { min-width: 168px; min-height: 46px; font-weight: 800; }
.lyric-remix-ai-run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.lyric-remix-ai-source-tabs button { min-height: 58px; padding: 12px 14px; border-radius: 12px; }
.lyric-remix-ai-search-grid { gap: 12px; }
.lyric-remix-ai-query-history { padding: 12px; border: 1px solid var(--app-line); border-radius: 12px; background: color-mix(in srgb, var(--app-bg) 28%, var(--app-panel)); }
.lyric-remix-ai-inspiration-list { max-height: min(44vh, 360px); }
.lyric-remix-entry-stage { display: grid; gap: 16px; width: min(1180px, 100%); margin: 0 auto; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--app-line); border-radius: 16px; background: var(--app-panel); box-shadow: var(--app-shadow); }
.lyric-remix-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lyric-remix-stage-kicker { display: block; color: var(--app-faint); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.lyric-remix-stage-head strong { display: block; margin-top: 4px; color: var(--app-text); font-size: 20px; line-height: 1.3; }
.lyric-remix-stage-head small { display: block; margin-top: 6px; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.lyric-remix-stage-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lyric-remix-stage-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-bg) 36%, var(--app-panel)); color: var(--app-muted); }
.lyric-remix-stage-steps b { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-faint); font-size: 12px; }
.lyric-remix-stage-steps span { font-size: 13px; line-height: 1.35; }
.lyric-remix-stage-steps li.is-current { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-accent-soft); color: var(--app-text); box-shadow: inset 3px 0 0 var(--app-accent); }
.lyric-remix-stage-steps li.is-current b { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-remix-stage-steps li.is-done b { border-color: var(--status-success); background: var(--status-success-bg); color: var(--status-success-text); }
.lyric-remix-field { display: grid; gap: 8px; color: var(--app-text); font-size: 13px; }
.lyric-remix-field input,
.lyric-remix-field textarea { width: 100%; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 42%, var(--app-panel)); color: var(--app-text); }
.lyric-remix-field input { height: 42px; padding: 0 12px; font-size: 14px; }
.lyric-remix-field textarea { min-height: 96px; padding: 12px 14px; line-height: 1.7; font-size: 14px; resize: vertical; }
.lyric-remix-stage-actions output { flex: 1 1 220px; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.lyric-remix-ai-source-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lyric-remix-ai-source-tabs button { display: grid; gap: 3px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-bg) 38%, var(--app-panel)); color: var(--app-muted); text-align: left; font-size: 13px; font-weight: 800; cursor: pointer; }
.lyric-remix-ai-source-tabs button span { color: var(--app-faint); font-size: 12px; font-weight: 500; }
.lyric-remix-ai-source-tabs button:hover,
.lyric-remix-ai-source-tabs button:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; }
.lyric-remix-ai-source-tabs button.is-active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); box-shadow: inset 3px 0 0 var(--app-accent); }
.lyric-remix-ai-source-tabs button.is-active span { color: var(--app-muted); }
.lyric-remix-ai-source-panel[hidden] { display: none; }
.lyric-remix-ai-source-panel { display: grid; gap: 10px; }
.lyric-remix-ai-search-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lyric-remix-ai-query-history { display: grid; gap: 7px; padding-top: 2px; }
.lyric-remix-ai-query-history > header { display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-ai-query-history > header strong { color: var(--app-text); font-size: 12px; }
.lyric-remix-ai-query-history > header span { flex: 1; color: var(--app-faint); }
.lyric-remix-ai-query-history > header button { padding: 0; border: 0; background: transparent; color: var(--app-muted); font-size: 12px; cursor: pointer; }
.lyric-remix-ai-query-history > header button:hover { color: var(--app-accent); text-decoration: underline; }
.lyric-remix-ai-query-history > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.lyric-remix-ai-query-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg)); color: var(--app-text); text-align: left; cursor: pointer; }
.lyric-remix-ai-query-row:hover, .lyric-remix-ai-query-row:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; }
.lyric-remix-ai-query-row > span { display: grid; min-width: 0; gap: 2px; }
.lyric-remix-ai-query-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-ai-query-row small { overflow: hidden; color: var(--app-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-ai-query-row i { flex: 0 0 auto; color: var(--app-accent); font-size: 11px; font-style: normal; }
.lyric-remix-ai-chart-head { display: flex; align-items: center; gap: 9px; }
.lyric-remix-ai-chart-head .lyric-remix-ai-chart-tabs { flex: 1; min-width: 0; }
.lyric-remix-ai-chart-head > button { flex: 0 0 auto; min-height: 32px; padding: 0 9px; font-size: 12px; }
.lyric-remix-ai-chart-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.lyric-remix-ai-chart-tabs button { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--app-panel); color: var(--app-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.lyric-remix-ai-chart-tabs button small { margin-left: 5px; color: var(--status-success-text); font-size: 11px; font-weight: 700; }
.lyric-remix-ai-chart-tabs button:hover,
.lyric-remix-ai-chart-tabs button:focus-visible { border-color: var(--app-accent); background: var(--state-hover); color: var(--app-text); outline: 0; }
.lyric-remix-ai-chart-tabs button.is-active { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-text); }
.lyric-remix-ai-inspiration-list { display: grid; gap: 7px; max-height: min(52vh, 420px); overflow: auto; padding-right: 2px; }
.lyric-remix-ai-chart-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.lyric-remix-ai-chart-pager[hidden] { display: none !important; }
.lyric-remix-ai-chart-pager > button {
  min-height: 34px;
  min-width: 84px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 750;
}
.lyric-remix-ai-chart-pager > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lyric-remix-ai-chart-pager > span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
}
.lyric-remix-ai-inspiration-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-panel); color: var(--app-text); text-align: left; cursor: pointer; }
.lyric-remix-ai-inspiration-row:hover,
.lyric-remix-ai-inspiration-row:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; }
.lyric-remix-ai-inspiration-rank { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-accent); font-size: 12px; font-weight: 800; }
.lyric-remix-ai-inspiration-main { display: grid; gap: 2px; min-width: 0; }
.lyric-remix-ai-inspiration-main strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-ai-inspiration-main small { color: var(--app-muted); font-size: 12px; }
.lyric-remix-ai-inspiration-row i { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); border-radius: 6px; color: var(--app-accent); font-size: 12px; font-style: normal; white-space: nowrap; }
.lyric-remix-ai-inspiration-note { margin: 0; color: var(--app-faint); font-size: 12px; line-height: 1.45; }
.lyric-remix-legal-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
.lyric-remix-legal-note a {
  color: var(--app-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lyric-remix-stage-actions .lyric-remix-legal-note { flex: 1 0 100%; }
.lyric-remix-ai-history-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 1px; color: var(--app-faint); font-size: 12px; }
.lyric-remix-ai-history-tools > span { min-width: 0; line-height: 1.45; }
.lyric-remix-ai-history-tools > button { flex: 0 0 auto; min-height: 30px; padding: 0 9px; font-size: 12px; }
.lyric-remix-ai-more { border-top: 1px solid var(--app-line); padding-top: 8px; }
.lyric-remix-ai-more summary { color: var(--app-muted); font-size: 12px; cursor: pointer; }
.lyric-remix-stage-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-paste-panel { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-panel); }
.lyric-remix-paste-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lyric-remix-paste-panel > header strong { display: block; color: var(--app-text); font-size: 16px; }
.lyric-remix-paste-panel > header small { display: block; margin-top: 4px; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.lyric-remix-paste-editor { display: grid; gap: 8px; color: var(--app-text); font-size: 13px; }
.lyric-remix-paste-editor textarea { width: 100%; min-height: 280px; padding: 14px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 42%, var(--app-panel)); color: var(--app-text); line-height: 1.7; resize: vertical; }
.lyric-remix-paste-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-paste-actions output { flex: 1 1 220px; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.lyric-remix-library-search { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-muted); }
.lyric-remix-library-search input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--app-text); font-size: 14px; outline: 0; }
.lyric-remix-library-list { display: grid; gap: 8px; max-height: min(52vh, 460px); overflow: auto; }
.lyric-remix-library-row { display: grid; gap: 4px; width: 100%; padding: 14px 16px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); color: var(--app-text); text-align: left; }
.lyric-remix-library-row:hover,
.lyric-remix-library-row:focus-visible { border-color: var(--app-accent); background: var(--state-hover); outline: 0; }
.lyric-remix-library-row strong { font-size: 15px; }
.lyric-remix-library-row span { color: var(--app-muted); font-size: 12px; }
.lyric-remix-library-empty { display: grid; gap: 6px; padding: 28px 16px; border: 1px dashed var(--app-line); border-radius: 10px; text-align: center; color: var(--app-muted); }
.lyric-remix-library-empty strong { color: var(--app-text); font-size: 14px; }
.lyric-remix-famous-form { display: grid; gap: 14px; }
.lyric-remix-famous-form label { display: grid; gap: 6px; color: var(--app-text); font-size: 13px; }
.lyric-remix-famous-form input { height: 42px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: color-mix(in srgb, var(--app-bg) 42%, var(--app-panel)); color: var(--app-text); font-size: 14px; }
.lyric-remix-famous-form output { color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.lyric-remix-workspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.lyric-remix-workspace > header > div { display: grid; gap: 5px; }
.lyric-remix-head-actions { display: flex !important; grid-auto-flow: column; align-items: center; gap: 7px !important; }
.lyric-remix-head-actions .icon-btn { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-muted); }
.lyric-remix-workspace h3 { margin: 0; color: var(--app-text); font-size: 20px; }
.lyric-remix-workspace p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.65; }
.lyric-remix-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.lyric-remix-flow-steps li { display: grid; min-width: 0; min-height: 64px; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); }
.lyric-remix-flow-steps b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-faint); font: 700 10px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-flow-steps span { display: grid; min-width: 0; gap: 4px; }
.lyric-remix-flow-steps strong { overflow: hidden; color: var(--app-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-flow-steps small { overflow: hidden; color: var(--app-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-flow-steps li[data-state="active"] { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: var(--app-accent-soft); box-shadow: inset 3px 0 0 var(--app-accent); }
.lyric-remix-flow-steps li[data-state="done"] b { border-color: var(--status-success); background: var(--status-success-bg); color: var(--status-success-text); }
.lyric-remix-flow-steps li[data-navigable="true"] { cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.lyric-remix-flow-steps li[data-navigable="true"]:hover,
.lyric-remix-flow-steps li[data-navigable="true"]:focus-visible { border-color: color-mix(in srgb, var(--app-accent) 72%, var(--app-line)); box-shadow: inset 3px 0 0 var(--app-accent); outline: none; }
.lyric-remix-review-ready { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--status-success-text) 42%, var(--app-line)); border-radius: 10px; background: var(--status-success-bg); }
.lyric-remix-review-ready[hidden] { display: none; }
.lyric-remix-review-ready-copy { display: grid; gap: 4px; min-width: 0; }
.lyric-remix-review-ready-copy strong { color: var(--status-success-text); font-size: 12px; }
.lyric-remix-review-ready-copy span { color: var(--app-text); font-size: 12px; }
.lyric-remix-review-ready .primary-btn { flex: 0 0 auto; min-height: 34px; padding: 6px 14px; font-size: 12px; white-space: nowrap; }
.lyric-remix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lyric-remix-grid label, .lyric-remix-direction { display: grid; gap: 7px; color: var(--app-muted); font-size: 11px; font-weight: 700; }
.lyric-remix-workspace :is(input, select, textarea) { width: 100%; min-width: 0; border: 1px solid var(--app-line); border-radius: 7px; background: color-mix(in srgb, var(--app-bg) 42%, var(--app-panel)); color: var(--app-text); }
.lyric-remix-workspace :is(input, select) { height: 40px; padding: 0 12px; font-size: 12px; }
.lyric-remix-workspace textarea { min-height: 96px; padding: 11px 13px; resize: vertical; line-height: 1.7; font-size: 13px; }
.lyric-remix-workspace :is(input, select, textarea):focus { border-color: var(--app-accent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 16%, transparent); }
.lyric-remix-directions, .lyric-remix-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lyric-remix-directions > span { margin-right: 4px; color: var(--app-faint); font-size: 11px; }
.lyric-remix-directions button { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 11px; }
.lyric-remix-directions button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-remix-directions-more { position: relative; }
.lyric-remix-directions-more summary.lyric-remix-directions-more-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 999px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 11px; cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.lyric-remix-directions-more summary.lyric-remix-directions-more-btn::-webkit-details-marker { display: none; }
.lyric-remix-directions-more summary.lyric-remix-directions-more-btn:hover { border-color: var(--app-secondary); color: var(--app-secondary); }
.lyric-remix-directions-more[open] summary.lyric-remix-directions-more-btn { border-color: var(--app-secondary); color: var(--app-secondary); }
.lyric-remix-directions-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(2, minmax(160px, 240px)); gap: 7px; min-width: 340px; max-width: min(560px, 90vw); padding: 12px; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-panel); box-shadow: 0 14px 36px color-mix(in srgb, var(--app-text) 12%, transparent); }
.lyric-remix-directions-panel button { min-height: 34px; padding: 0 11px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-panel-2); color: var(--app-text); font-size: 11px; text-align: left; }
.lyric-remix-directions-panel button:hover { border-color: var(--app-accent); color: var(--app-accent); background: var(--app-accent-soft); }
.lyric-remix-common-options { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-panel-2) 76%, var(--app-panel)); }
.lyric-remix-common-options > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-common-options > header > div { display: grid; gap: 3px; }
.lyric-remix-common-options > header strong { color: var(--app-text); font-size: 12px; }
.lyric-remix-common-options > header small { color: var(--app-muted); font-size: 11px; }
.lyric-remix-common-options > header button { min-height: 28px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 11px; }
.lyric-remix-common-options > header button:hover { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-remix-common-options > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lyric-remix-common-options label { display: grid; gap: 5px; color: var(--app-muted); font-size: 11px; }
.lyric-remix-common-options select { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--control-bg); color: var(--app-text); font-size: 12px; }
.lyric-remix-common-options select:focus { border-color: var(--app-accent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 16%, transparent); }
.lyric-remix-source-preview { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--app-line); border-radius: 10px; background: color-mix(in srgb, var(--app-panel-2) 74%, var(--app-panel)); }
.lyric-remix-source-preview > header, .lyric-remix-generate-head, .lyric-remix-version-library > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-source-preview > header > div, .lyric-remix-version-library > header > div { display: grid; gap: 3px; }
.lyric-remix-source-preview strong, .lyric-remix-generate-head strong, .lyric-remix-version-library strong { color: var(--app-text); font-size: 12px; }
.lyric-remix-source-preview small, .lyric-remix-generate-head span, .lyric-remix-version-library small { color: var(--app-muted); font-size: 11px; }
.lyric-remix-source-preview button { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 11px; white-space: nowrap; }
.lyric-remix-source-preview pre { max-height: 280px; overflow: auto; margin: 0; padding: 13px 14px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-bg); color: var(--app-text); font: 500 13px/1.85 var(--font-family-base); white-space: pre-wrap; }
.lyric-remix-compare-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lyric-remix-shortcut-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease; }
.lyric-remix-shortcut-btn span { font-size: 13px; font-weight: 700; }
.lyric-remix-shortcut-btn:hover { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-remix-shortcut-btn.is-new { border-color: color-mix(in srgb, var(--app-secondary) 54%, var(--app-line)); color: var(--app-secondary); }
.lyric-remix-shortcut-btn.is-new:hover { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 12%, var(--app-panel)); color: var(--app-text); }
.lyric-remix-shortcut-btn.is-close { margin-left: auto; border-color: color-mix(in srgb, var(--status-danger-text) 54%, var(--app-line)); color: var(--status-danger-text); }
.lyric-remix-shortcut-btn.is-close:hover { border-color: var(--status-danger-text); background: var(--status-danger-bg); color: var(--status-danger-text); }
.lyric-remix-find-replace {
  position: sticky;
  z-index: 3;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(150px, 1fr) auto;
  align-items: end;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-accent-soft));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--app-shadow) 18%, transparent);
}
.lyric-remix-find-replace > strong { align-self: center; color: var(--app-text); font-size: 12px; white-space: nowrap; }
.lyric-remix-find-replace > label { display: grid; gap: 5px; min-width: 0; color: var(--app-muted); font-size: 12px; }
.lyric-remix-find-replace input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  outline: 0;
  background: var(--control-bg);
  color: var(--app-text);
  font-size: 12px;
}
.lyric-remix-find-replace input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 20%, transparent); }
.lyric-remix-find-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lyric-remix-find-actions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--app-text);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.lyric-remix-find-actions button:hover:not(:disabled) { border-color: var(--app-accent); color: var(--app-accent); }
.lyric-remix-find-actions button.is-primary { border-color: var(--button-accent-border); background: var(--button-accent-bg); color: var(--button-accent-text); font-weight: 700; }
.lyric-remix-find-actions button:disabled { opacity: .5; cursor: default; }
.lyric-remix-find-replace > output { grid-column: 2 / 4; color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.lyric-remix-find-replace > output[data-state="match"] { color: var(--status-success-text); }
.lyric-remix-find-replace > output[data-state="empty"] { color: var(--status-warning-text); }
.lyric-remix-find-replace > small { grid-column: 4; color: var(--app-faint); font-size: 12px; line-height: 1.4; text-align: right; }
.lyric-remix-compare-editor {
  --lyric-remix-row-min: 38px;
  --lyric-remix-lyric-size: 15px;
  --lyric-remix-lyric-leading: 1.32;
  --lyric-remix-scroll-height: clamp(520px, calc(100dvh - 320px), 820px);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--app-secondary) 38%, var(--app-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel));
}
.lyric-remix-compare-editor > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lyric-remix-compare-editor > header > div { display: grid; gap: 5px; }
.lyric-remix-compare-editor > header strong { color: var(--app-text); font-size: 13px; }
.lyric-remix-compare-editor > header small { color: var(--app-muted); font-size: 11px; }
.lyric-remix-compare-editor > header small[data-state="success"] { color: var(--status-success-text); }
.lyric-remix-compare-editor > header small[data-state="error"] { color: var(--status-danger-text); }
.lyric-remix-compare-editor > header small[data-state="warning"] { color: var(--status-warning-text); }
.lyric-remix-compare-editor > header > span { color: var(--app-faint); font-size: 11px; white-space: nowrap; }
.lyric-remix-timing-review-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 2px solid var(--status-warning-text);
  border-left-width: 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-warning-bg) 84%, var(--app-panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-warning-text) 16%, transparent), var(--app-card-shadow);
}
.lyric-remix-timing-review-banner[hidden] { display: none; }
.lyric-remix-timing-review-banner[data-state="blocked"] { border-color: var(--status-danger-text); background: color-mix(in srgb, var(--status-danger-bg) 78%, var(--app-panel)); }
.lyric-remix-timing-review-copy { display: flex; min-width: 0; align-items: flex-start; gap: 10px; }
.lyric-remix-timing-review-icon { display: inline-grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 999px; background: var(--status-warning-text); color: var(--status-warning-bg); font-size: 18px; font-style: normal; font-weight: 900; line-height: 1; }
.lyric-remix-timing-review-banner[data-state="blocked"] .lyric-remix-timing-review-icon { background: var(--status-danger-text); color: var(--status-danger-bg); }
.lyric-remix-timing-review-copy > div { display: grid; min-width: 0; gap: 4px; }
.lyric-remix-timing-review-copy strong { color: var(--status-warning-text); font-size: 14px; line-height: 1.35; }
.lyric-remix-timing-review-banner[data-state="blocked"] .lyric-remix-timing-review-copy strong { color: var(--status-danger-text); }
.lyric-remix-timing-review-copy p { margin: 0; color: var(--app-text); font-size: 12px; line-height: 1.55; }
.lyric-remix-timing-review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.lyric-remix-timing-review-actions button { min-height: 36px; padding: 0 13px; border: 1px solid var(--status-warning-text); border-radius: 7px; background: var(--status-warning-text); color: var(--status-warning-bg); font-size: 12px; font-weight: 800; cursor: pointer; }
.lyric-remix-timing-review-actions button:hover { border-color: var(--app-text); background: var(--app-text); color: var(--app-bg); }
.lyric-remix-timing-review-actions button[hidden] { display: none; }
.lyric-remix-timing-review-actions small { flex-basis: 100%; color: var(--status-warning-text); font-size: 12px; line-height: 1.3; text-align: right; }
.lyric-remix-timing-review-banner[data-state="confirmed"] { border-color: var(--status-success-text); background: color-mix(in srgb, var(--status-success-bg) 78%, var(--app-panel)); }
.lyric-remix-timing-review-banner[data-state="confirmed"] .lyric-remix-timing-review-icon { background: var(--status-success-text); color: var(--status-success-bg); }
.lyric-remix-timing-review-banner[data-state="confirmed"] .lyric-remix-timing-review-copy strong,
.lyric-remix-timing-review-banner[data-state="confirmed"] .lyric-remix-timing-review-actions small { color: var(--status-success-text); }
.lyric-remix-timing-review-banner[data-state="blocked"] .lyric-remix-timing-review-actions button { border-color: var(--status-danger-text); background: var(--status-danger-text); color: var(--status-danger-bg); }
.lyric-remix-timing-review-banner[data-state="blocked"] .lyric-remix-timing-review-actions small { color: var(--status-danger-text); }
.lyric-remix-compare-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lyric-remix-compare-pane { min-width: 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 10px; background: var(--app-bg); }
.lyric-remix-compare-pane > header { display: flex; width: 100%; height: 72px; min-height: 72px; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--app-line); background: var(--app-panel); }
.lyric-remix-compare-pane > header > div { display: grid; gap: 4px; }
.lyric-remix-compare-pane > header strong { color: var(--app-text); font-size: 12px; }
.lyric-remix-compare-pane > header small { color: var(--app-muted); font-size: 11px; }
.lyric-remix-compare-pane > header label { display: grid; min-width: 190px; gap: 5px; color: var(--app-muted); font-size: 11px; }
.lyric-remix-compare-pane > header select { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--control-bg); color: var(--app-text); font-size: 12px; }
.lyric-remix-compare-pane > header > .lyric-remix-pane-actions { display: flex; align-items: center; gap: 7px; }
.lyric-remix-compare-pane > header button { min-height: 34px; padding: 0 12px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.lyric-remix-compare-pane > header button:hover { border-color: var(--app-secondary); color: var(--app-secondary); }
.lyric-remix-compare-pane > header button.is-primary { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); font-weight: 700; }
.lyric-remix-compare-pane > header button.is-primary:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); color: var(--app-accent-ink); }
.lyric-remix-compare-pane > header button.is-new-version { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); color: var(--app-accent); font-weight: 700; }
.lyric-remix-compare-pane > header button.is-new-version:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 54%, var(--button-secondary-bg)); color: var(--app-accent); }
.lyric-remix-compare-scroll {
  height: auto;
  min-height: var(--lyric-remix-row-min, 38px);
  max-height: var(--lyric-remix-scroll-height, clamp(520px, calc(100dvh - 320px), 820px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.lyric-remix-compare-scroll:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.lyric-remix-compare-row { position: relative; display: grid; box-sizing: border-box; height: var(--compare-row-height, auto); min-height: var(--compare-row-height, var(--lyric-remix-row-min, 38px)); grid-template-columns: 34px minmax(96px, 118px) minmax(0, 1fr) 24px; align-items: stretch; border-bottom: 1px solid color-mix(in srgb, var(--app-line) 70%, transparent); background: var(--app-bg); color: var(--app-text); transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }
.lyric-remix-line-count { color: var(--app-muted); font-size: 12px; line-height: 1.35; white-space: normal; }
.lyric-remix-fix-bar {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--status-danger-border) 55%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--status-danger-bg) 70%, var(--app-panel));
}
.lyric-remix-fix-bar[hidden] { display: none !important; }
.lyric-remix-fix-bar p {
  margin: 0;
  color: var(--status-danger-text);
  font-size: 12px;
  line-height: 1.5;
}
.lyric-remix-fix-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lyric-remix-fix-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--button-secondary-bg);
  color: var(--app-text);
  font-size: 12px;
}
.lyric-remix-fix-actions button.is-primary {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
  font-weight: 700;
}
.lyric-remix-progress-backdrop { z-index: 12000; }
.lyric-remix-progress-dialog .app-dialog__body { display: grid; gap: 12px; }

/* Project migration V2 uses the shared dialog shell and semantic theme tokens. */
html:has(> body.songroom-migration-open),
body.songroom-migration-open { overflow: hidden; }
.songroom-migration-dialog { width: min(820px, calc(100vw - 32px)); }
.songroom-migration-dialog .app-dialog__footer > button { flex: 0 0 auto; white-space: nowrap; }
.songroom-migration-dialog .app-dialog__footer > .primary-btn { min-width: 138px; }
.songroom-migration-body { display: grid; gap: 14px; }
.songroom-migration-section-heading,
.songroom-migration-progress-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.songroom-migration-section-heading > div { display: grid; gap: 4px; }
.songroom-migration-section-heading span { color: var(--app-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.songroom-migration-section-heading strong,
.songroom-migration-progress-heading strong { color: var(--app-text); font-size: 15px; }
.songroom-migration-section-heading small,
.songroom-migration-progress small,
.songroom-migration-preview-grid small { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.songroom-migration-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.songroom-migration-mode-grid > label { position: relative; min-width: 0; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-panel); cursor: pointer; }
.songroom-migration-mode-grid > label:has(input:checked) { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, var(--app-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 38%, transparent); }
.songroom-migration-mode-grid input { position: absolute; inset: 14px auto auto 14px; }
.songroom-migration-mode-grid label > span { display: grid; gap: 5px; min-height: 92px; padding: 13px 14px 13px 40px; }
.songroom-migration-mode-grid strong { color: var(--app-text); font-size: 14px; }
.songroom-migration-mode-grid em { width: fit-content; border-radius: 999px; background: color-mix(in srgb, var(--app-accent) 16%, var(--app-panel)); color: var(--app-accent); padding: 2px 7px; font-size: 12px; font-style: normal; }
.songroom-migration-mode-grid small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.songroom-migration-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.songroom-migration-custom fieldset { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 9px 14px; min-width: 0; margin: 0; border: 1px solid var(--app-line); border-radius: var(--control-radius); padding: 12px; }
.songroom-migration-custom legend { color: var(--app-text); padding: 0 5px; font-size: 13px; font-weight: 750; }
.songroom-migration-custom label { display: inline-flex; align-items: center; gap: 6px; color: var(--app-text); font-size: 12px; }
.songroom-migration-custom input[type="number"] { width: 82px; min-height: 32px; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--control-bg); color: var(--app-text); padding: 4px 7px; font-size: 12px; }
.songroom-migration-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.songroom-migration-preview-grid > div { display: grid; gap: 4px; min-width: 0; border: 1px solid var(--app-line); border-radius: var(--control-radius); background: var(--app-panel); padding: 10px; }
.songroom-migration-preview-grid strong { overflow: hidden; color: var(--app-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.songroom-migration-omissions { margin-top: 10px; border: 1px solid var(--status-warning-border); border-radius: var(--control-radius); background: var(--status-warning-bg); padding: 10px 12px; color: var(--status-warning-text); font-size: 12px; line-height: 1.55; }
.songroom-migration-progress-heading output { color: var(--app-accent); font-size: 13px; font-weight: 800; }
.songroom-migration-progress-track { height: 8px; overflow: hidden; margin-top: 10px; border-radius: 999px; background: color-mix(in srgb, var(--app-line) 72%, var(--app-panel)); }
.songroom-migration-progress-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--app-accent); transform: scaleX(var(--songroom-migration-progress, 0)); transform-origin: left center; transition: transform 120ms linear; }
.songroom-migration-progress p { margin: 9px 0 3px; color: var(--app-text); font-size: 13px; line-height: 1.5; }
.songroom-migration-result { min-height: 20px; margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.5; }
.songroom-migration-result[data-state="success"] { color: var(--status-success-text); }
.songroom-migration-result[data-state="error"] { color: var(--status-danger-text); }
.songroom-migration-result[data-state="warning"] { color: var(--status-warning-text); }

@media (max-width: 720px) {
  .songroom-migration-mode-grid,
  .songroom-migration-custom { grid-template-columns: 1fr; }
  .songroom-migration-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .songroom-migration-section-heading { align-items: stretch; flex-direction: column; gap: 5px; }
}
.lyric-remix-progress-log {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow: auto;
}
.lyric-remix-progress-log li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.72;
  transform: translateY(2px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.lyric-remix-progress-log li.is-done,
.lyric-remix-progress-log li:last-child {
  opacity: 1;
  transform: none;
}
.lyric-remix-progress-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--app-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent) 45%, transparent);
  animation: lyric-remix-progress-pulse 1.2s ease-out infinite;
}
.lyric-remix-progress-log li.is-done .lyric-remix-progress-dot { animation: none; background: var(--status-success-text); }
@keyframes lyric-remix-progress-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent) 42%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.lyric-remix-progress-preview {
  min-height: 160px;
  max-height: 280px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-bg);
  color: var(--app-text);
  font: 12px/1.55 'DM Mono', ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.lyric-remix-progress-status {
  color: var(--app-muted);
  font-size: 12px;
}
.lyric-remix-compare-row:last-child { border-bottom: 0; }
.lyric-remix-compare-row:hover { background: var(--state-hover); }
.lyric-remix-line-number, .lyric-remix-line-count { display: flex; align-items: center; padding: 4px 7px; border-right: 1px solid color-mix(in srgb, var(--app-line) 72%, transparent); }
.lyric-remix-line-number { justify-content: center; color: var(--app-faint); font: 600 11px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-line-count { color: var(--app-muted); font-size: 11px; line-height: 1.25; white-space: normal; }
.lyric-remix-line-text { min-width: 0; padding: 5px 10px; color: var(--app-text); font-size: var(--lyric-remix-lyric-size, 15px); font-weight: 620; line-height: var(--lyric-remix-lyric-leading, 1.32); white-space: pre-wrap; word-break: break-word; align-self: start; }
.lyric-remix-line-text.is-blank { min-height: 20px; background: color-mix(in srgb, var(--app-line) 18%, transparent); }
.lyric-remix-line-text[contenteditable="plaintext-only"] { cursor: text; user-select: text; -webkit-user-select: text; }
.lyric-remix-line-text[contenteditable="plaintext-only"]:empty::before { color: var(--control-placeholder); content: attr(data-placeholder); font-weight: 500; pointer-events: none; }
.lyric-remix-line-text[contenteditable="plaintext-only"]:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--app-accent); }
.lyric-remix-line-text.is-original-alignment-editor { caret-color: var(--app-accent); }
.lyric-remix-line-text.is-original-alignment-editor:focus { background: color-mix(in srgb, var(--app-accent-soft) 58%, transparent); }
.lyric-remix-line-number { grid-column: 1; grid-row: 1; }
.lyric-remix-line-count { grid-column: 2; grid-row: 1; }
.lyric-remix-line-text { grid-column: 3; grid-row: 1; }
.lyric-remix-line-diff { display: grid; grid-column: 4; grid-row: 1; place-items: center; color: var(--status-danger-text); font-size: 12px; font-style: normal; font-weight: 900; }
.lyric-remix-compare-row[data-state="mismatch"] { background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-danger-text); }
.lyric-remix-compare-row[data-state="mismatch"] .lyric-remix-line-count { color: var(--status-danger-text); }
.lyric-remix-compare-row[data-state="review"] { background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-warning-text); }
.lyric-remix-compare-row[data-state="review"] .lyric-remix-line-count,
.lyric-remix-compare-row[data-state="review"] .lyric-remix-line-diff { color: var(--status-warning-text); }
.lyric-remix-compare-pane.is-candidate .lyric-remix-compare-row[data-state="review"] .lyric-remix-line-diff { width: 20px; height: 20px; margin: auto 1px; border-radius: 999px; background: var(--status-warning-text); color: var(--status-warning-bg); font-size: 13px; }
.lyric-remix-line-actions { position: absolute; z-index: 8; top: 0; right: 6px; display: flex; min-width: 0; max-width: min(420px, calc(100vw - 48px)); align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; padding: 3px; border: 1px solid color-mix(in srgb, var(--app-line) 86%, transparent); border-radius: 7px; background: var(--app-panel); box-shadow: 0 6px 16px color-mix(in srgb, var(--app-shadow) 24%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; }
.lyric-remix-line-actions.is-open,
.lyric-remix-line-actions.is-placed,
.lyric-remix-line-actions:focus-within { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.lyric-remix-line-actions.is-placed,
.lyric-remix-line-actions.is-open.is-placed { position: fixed; right: auto; bottom: auto; max-width: min(420px, calc(100vw - 48px)); }
.lyric-remix-line-actions.is-dragging { transition: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--app-shadow) 36%, transparent); cursor: grabbing; }
.lyric-remix-line-actions.is-spacer { display: none; }
.lyric-remix-line-action-spacer { display: none; }
.lyric-remix-line-actions[hidden] { display: none; }
.lyric-remix-line-actions-handle { display: inline-grid; width: 28px; min-height: 28px; place-items: center; padding: 0; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 14px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
.lyric-remix-line-actions-handle:hover,
.lyric-remix-line-actions-handle:focus-visible { border-color: var(--app-secondary); color: var(--app-secondary); outline: 0; }
.lyric-remix-line-actions.is-dragging .lyric-remix-line-actions-handle { cursor: grabbing; color: var(--app-accent); border-color: var(--app-accent); }
.lyric-remix-line-actions button { min-height: 28px; padding: 3px 8px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-text); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.lyric-remix-line-actions button[data-remix-line-regenerate] { border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--button-secondary-bg)); color: var(--app-accent); font-weight: 700; }
.lyric-remix-line-actions button[data-remix-line-regenerate]:hover { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); }
.lyric-remix-line-actions button[data-review-confirm],
.lyric-remix-line-actions button[data-review-manual] { border-color: var(--status-warning-text); background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--button-secondary-bg)); color: var(--status-warning-text); font-weight: 700; }
.lyric-remix-line-actions button[data-review-confirm]:hover,
.lyric-remix-line-actions button[data-review-manual]:hover { border-color: var(--status-warning-text); background: var(--status-warning-text); color: var(--status-warning-bg); }
.lyric-remix-line-actions button[data-review-manual] { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--app-text); font-weight: 600; }
.lyric-remix-line-actions button[data-review-manual]:hover { border-color: var(--app-secondary); background: var(--app-panel); color: var(--app-secondary); }
.lyric-remix-line-actions button:disabled { border-color: var(--status-success-text); background: var(--status-success-bg); color: var(--status-success-text); cursor: default; }
.lyric-remix-review-actions { display: flex; min-width: 0; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 5px; padding: 0; border-top: 0; }
.lyric-remix-review-actions[hidden] { display: none; }
.lyric-remix-review-actions button { min-height: 28px; padding: 3px 8px; border: 1px solid var(--status-warning-text); border-radius: 6px; background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--button-secondary-bg)); color: var(--status-warning-text); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.lyric-remix-review-actions button:hover { border-color: var(--status-warning-text); background: var(--status-warning-text); color: var(--status-warning-bg); }
.lyric-remix-review-actions button[data-review-manual] { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--app-text); font-weight: 600; }
.lyric-remix-review-actions button[data-review-manual]:hover { border-color: var(--app-secondary); background: var(--app-panel); color: var(--app-secondary); }
.lyric-remix-review-actions button:disabled { border-color: var(--status-success-text); background: var(--status-success-bg); color: var(--status-success-text); cursor: default; }
.lyric-remix-compare-row[data-state="review-confirmed"] { background: color-mix(in srgb, var(--status-success-bg) 78%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-success-text); }
.lyric-remix-compare-row[data-state="review-confirmed"] .lyric-remix-line-count { color: var(--status-success-text); }
.lyric-remix-compare-pane.is-candidate .lyric-remix-compare-row[data-state="review-confirmed"] .lyric-remix-line-diff { width: 20px; height: 20px; margin: auto 1px; border-radius: 999px; background: var(--status-success-text); color: var(--status-success-bg); font-size: 13px; }
.lyric-remix-compare-row.is-review-confirmed { animation: lyric-remix-review-confirmed 1.4s ease-out forwards; }
.lyric-remix-compare-row.is-review-focus { animation: lyric-remix-review-focus 1.8s ease-out forwards; }
.lyric-remix-compare-row.is-new-mismatch { animation: lyric-remix-mismatch-flash 1.6s ease-out forwards; }
@keyframes lyric-remix-review-focus {
  0% { background: color-mix(in srgb, var(--status-warning-bg) 96%, var(--app-panel)); box-shadow: inset 0 0 0 3px var(--status-warning-text); }
  100% { background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-warning-text); }
}
@keyframes lyric-remix-review-confirmed {
  0% { background: color-mix(in srgb, var(--status-success-bg) 96%, var(--app-panel)); box-shadow: inset 0 0 0 3px var(--status-success-text); }
  100% { background: color-mix(in srgb, var(--status-success-bg) 78%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-success-text); }
}
@keyframes lyric-remix-mismatch-flash {
  0%   { background: color-mix(in srgb, var(--status-warning-bg) 80%, var(--app-bg)); box-shadow: inset 0 0 0 2px var(--status-warning-text); }
  100% { background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--app-bg)); box-shadow: inset 3px 0 0 var(--status-danger-text); }
}
.lyric-remix-compare-row.is-selected { background: var(--state-selected); color: var(--app-text); box-shadow: inset 4px 0 0 var(--app-accent); }
.lyric-remix-compare-row.is-selected :is(.lyric-remix-line-number, .lyric-remix-line-count, .lyric-remix-line-text, .lyric-remix-line-diff) { color: var(--app-text); }
.lyric-remix-compare-row.is-selected :is(.lyric-remix-line-number, .lyric-remix-line-count) { border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-line)); }
.lyric-remix-compare-row.is-search-match { outline: 1px solid color-mix(in srgb, var(--app-secondary) 70%, var(--app-line)); outline-offset: -2px; }
.lyric-remix-compare-row.is-search-current { outline: 2px solid var(--app-accent); outline-offset: -3px; }
.lyric-remix-text-context-menu {
  z-index: calc(var(--app-layer-dialog) + 1);
  left: var(--lyric-remix-context-left, 8px);
  top: var(--lyric-remix-context-top, 8px);
  width: min(320px, calc(100vw - 16px));
}
.lyric-remix-text-context-menu .lyric-remix-context-search-action {
  margin-top: 4px;
  box-shadow: inset 0 1px 0 var(--app-line);
}
.lyric-remix-text-context-menu button:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.lyric-remix-compare-editor > footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-compare-editor > footer span { display: inline-flex; align-items: center; gap: 5px; }
.lyric-remix-compare-editor > footer span:last-child { margin-left: auto; }
.lyric-remix-compare-editor > footer i { width: 9px; height: 9px; border-radius: 999px; background: var(--status-success-text); }
.lyric-remix-compare-editor > footer i[data-state="mismatch"] { background: var(--status-danger-text); }
.lyric-remix-compare-editor > footer i[data-state="review"] { background: var(--status-warning-text); }
.lyric-remix-raw-result { display: none !important; }
.lyric-remix-generate-head { align-items: flex-end; margin-top: 3px; }
.lyric-remix-actions #lyricRemixOpenDeepSeek { border-color: color-mix(in srgb, var(--app-secondary) 54%, var(--app-line)); color: var(--app-secondary); }
.lyric-remix-actions #lyricRemixOpenDeepSeek:hover { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 12%, var(--app-panel)); color: var(--app-text); }
.lyric-remix-api-state { padding: 9px 11px; border-left: 3px solid var(--app-accent); background: var(--app-accent-soft); }
.lyric-remix-api-state[data-state="ready"] { border-left-color: var(--status-success-text); background: var(--status-success-bg); }
.lyric-remix-api-state[data-state="warning"] { border-left-color: var(--status-warning-text); background: var(--status-warning-bg); }
.lyric-remix-api-state[data-state="blocked"], .lyric-remix-api-state[data-state="error"] { border-left-color: var(--status-danger-text); background: var(--status-danger-bg); }
.ai-llm-status-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-panel-2);
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
.ai-llm-status-badge::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--app-muted);
  content: '';
}
.ai-llm-status-badge[data-state="ready"] { border-color: color-mix(in srgb, var(--status-success-text) 46%, var(--app-line)); color: var(--status-success-text); background: var(--status-success-bg); }
.ai-llm-status-badge[data-state="ready"]::before { background: var(--status-success-text); }
.ai-llm-status-badge[data-state="warning"] { border-color: color-mix(in srgb, var(--status-warning-text) 46%, var(--app-line)); color: var(--status-warning-text); background: var(--status-warning-bg); }
.ai-llm-status-badge[data-state="warning"]::before { background: var(--status-warning-text); }
.ai-llm-status-badge[data-state="blocked"], .ai-llm-status-badge[data-state="error"] { border-color: color-mix(in srgb, var(--status-danger-text) 46%, var(--app-line)); color: var(--status-danger-text); background: var(--status-danger-bg); }
.ai-llm-status-badge[data-state="blocked"]::before, .ai-llm-status-badge[data-state="error"]::before { background: var(--status-danger-text); }
.ai-llm-status-badge[data-state="loading"]::before { background: var(--status-warning-text); }
.breadcrumbs .ai-llm-status-badge { margin-left: 4px; }
.llm-platform-status[data-state="ready"] { color: var(--status-success-text); }
.llm-platform-status[data-state="warning"] { color: var(--status-warning-text); }
.llm-platform-status[data-state="blocked"], .llm-platform-status[data-state="error"] { color: var(--status-danger-text); }
.lyric-remix-result { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--app-line); border-radius: 9px; background: color-mix(in srgb, var(--app-panel-2) 76%, var(--app-panel)); }
.lyric-remix-result[hidden] { display: none; }
.lyric-remix-result > header, .lyric-remix-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lyric-remix-result > header > div { display: grid; gap: 3px; }
.lyric-remix-result strong { color: var(--app-text); font-size: 12px; }
.lyric-remix-result small, .lyric-remix-result-actions span { color: var(--app-muted); font-size: 12px; }
.lyric-remix-edit-state { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--app-secondary) 42%, var(--app-line)); border-radius: 7px; background: color-mix(in srgb, var(--app-secondary) 10%, var(--app-panel)); }
.lyric-remix-edit-state[hidden] { display: none; }
.lyric-remix-edit-state strong { flex: 0 0 auto; color: var(--app-secondary); }
.lyric-remix-edit-state small { min-width: 0; overflow: hidden; color: var(--app-muted); text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-edit-state .remix-state-note { color: var(--app-secondary); font-size: 11px; }
.lyric-remix-save-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.lyric-remix-save-actions button { min-height: 34px; }
.lyric-remix-saved-compare-entry {
  border-color: color-mix(in srgb, var(--app-secondary) 56%, var(--app-line));
  background: color-mix(in srgb, var(--app-secondary) 10%, var(--button-secondary-bg));
  color: var(--app-secondary);
  font-weight: 750;
}
.lyric-remix-saved-compare-entry:hover,
.lyric-remix-saved-compare-entry:focus-visible {
  border-color: var(--app-secondary);
  background: color-mix(in srgb, var(--app-secondary) 17%, var(--button-secondary-bg));
  color: var(--app-text);
}
#lyricRemixValidation[data-state="success"] { color: var(--status-success-text); }
#lyricRemixValidation[data-state="warning"] { color: var(--status-warning-text); }
#lyricRemixValidation[data-state="error"] { color: var(--status-danger-text); }
#lyricRemixClearResult { border: 0; background: transparent; color: var(--app-muted); }
.lyric-remix-version-library { display: grid; gap: 10px; padding-top: 4px; }
#lyricRemixVersionList { display: grid; gap: 7px; }
.lyric-remix-version-item { display: grid; min-width: 0; grid-template-columns: 34px minmax(180px, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); cursor: default; transition: border-color 120ms ease, background-color 120ms ease; }
.lyric-remix-version-item.is-remix { cursor: pointer; }
.lyric-remix-version-item.is-remix:hover { border-color: color-mix(in srgb, var(--app-secondary) 52%, var(--app-line)); background: color-mix(in srgb, var(--app-secondary) 8%, var(--app-panel)); }
.lyric-remix-version-item > span { color: var(--app-faint); font: 600 11px 'DM Mono', ui-monospace, monospace; }
.lyric-remix-version-info { display: grid; min-width: 0; gap: 3px; }
.lyric-remix-version-info strong, .lyric-remix-version-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyric-remix-version-info strong { font-size: 13px; }
.lyric-remix-version-info small { color: var(--app-muted); font-size: 12px; }
.lyric-remix-version-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lyric-remix-version-actions button { min-height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.lyric-remix-version-actions button[data-remix-version-action="compare"] { border-color: color-mix(in srgb, var(--app-accent) 54%, var(--app-line)); background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--button-secondary-bg)); color: var(--app-accent); font-weight: 700; }
.lyric-remix-version-actions button[data-remix-version-action="compare"]:disabled { border-color: var(--app-line); background: var(--button-secondary-bg); color: var(--app-muted); font-weight: 600; }
.lyric-remix-version-actions button:hover { border-color: var(--app-secondary); color: var(--app-secondary); }
.lyric-remix-version-actions button.is-danger:hover { border-color: var(--status-danger-text); background: var(--status-danger-bg); color: var(--status-danger-text); }
.lyric-remix-version-actions button:disabled { cursor: default; opacity: .72; }
.lyric-remix-version-protected { padding: 6px 8px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-faint); font-size: 12px; white-space: nowrap; }
.lyric-remix-next-steps {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  border-left-width: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-panel));
  box-shadow: var(--app-card-shadow);
}
.lyric-remix-next-steps[hidden] { display: none !important; }
.lyric-remix-next-steps-copy { display: grid; gap: 5px; }
.lyric-remix-next-steps-copy strong { color: var(--app-accent); font-size: 15px; }
.lyric-remix-next-steps-copy p { margin: 0; color: var(--app-text); font-size: 13px; line-height: 1.55; }
.lyric-remix-next-steps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lyric-remix-next-steps-actions .primary-btn { min-height: 40px; padding-inline: 16px; font-size: 13px; font-weight: 800; }
.lyric-remix-next-steps-actions .outline-btn,
.lyric-remix-next-steps-actions .ghost-btn { min-height: 38px; font-size: 12px; }
.lyric-remix-version-item.is-active { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); background: var(--app-accent-soft); box-shadow: inset 3px 0 0 var(--app-accent); }
.lyric-remix-version-item.is-active .lyric-remix-version-actions button:first-child { border-color: color-mix(in srgb, var(--app-accent) 36%, var(--app-line)); color: var(--app-accent); }
.lyric-remix-version-item.is-editing { border-color: color-mix(in srgb, var(--app-secondary) 58%, var(--app-line)); box-shadow: inset 3px 0 0 var(--app-secondary); }
.lyric-remix-version-item.is-editing .lyric-remix-version-actions [data-remix-version-action="edit"] { border-color: var(--app-secondary); background: color-mix(in srgb, var(--app-secondary) 13%, var(--button-secondary-bg)); color: var(--app-secondary); }
body.lyric-remix-focus :is(#workspaceContext, .main-content > .song-setup-journey, #creatorGuide, #creatorGuideReturn) { display: none !important; }
body.lyric-remix-focus.lyric-remix-review-stage :is(#activeSongContext, #songwritingPanel, .lyric-remix-workspace > header, #aiToolsPanel > .ai-tools-head) { display: none !important; }
body.lyric-remix-focus.lyric-remix-review-stage #lyricRemixWorkspace {
  min-height: calc(100dvh - 108px);
  padding: 10px 14px 16px;
  gap: 10px;
}
body.lyric-remix-focus.lyric-remix-review-stage .lyric-remix-flow-steps { margin: 0; }
body.lyric-remix-focus.lyric-remix-review-stage .lyric-remix-compare-editor {
  --lyric-remix-scroll-height: clamp(560px, calc(100dvh - 280px), 900px);
  min-height: 0;
}
body.lyric-remix-focus.lyric-remix-review-stage .lyric-remix-compare-shortcuts { margin-bottom: 6px; }
body.lyric-remix-focus.lyric-remix-review-stage .lyric-remix-result { padding: 12px 14px; }
body.lyric-remix-focus .content-grid { display: grid !important; width: min(1240px, 100%); grid-template-columns: minmax(0, 1fr); margin: 26px auto 64px; }
body:not(.lyric-remix-focus) #lyricRemixWorkspace { display: none !important; }
body.lyric-remix-focus .tool-column, body.lyric-remix-focus .editor-column > :not(#aiToolsPanel):not(#lyricRemixWorkspace) { display: none !important; }
body.lyric-remix-focus #aiToolsPanel { display: block !important; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.lyric-remix-focus #aiToolsPanel > :not(#lyricRemixWorkspace) { display: none !important; }
body.lyric-remix-focus #lyricRemixWorkspace { display: grid !important; min-height: 0; margin: 0; padding: clamp(18px, 2.2vw, 28px); scroll-margin-top: 82px; }

/* 魔改歌词采用互斥工作区：入口、配置、检查只显示当前任务状态。 */
.lyric-remix-workspace > [hidden],
.lyric-remix-workspace[data-remix-state="entry"] > :not(header):not(#lyricRemixEntry),
.lyric-remix-workspace[data-remix-state="editor"] > #lyricRemixEntry,
.lyric-remix-workspace[data-remix-state="review"] > #lyricRemixEntry,
.lyric-remix-workspace[data-remix-state="editor"] > #lyricRemixCompareEditor,
.lyric-remix-workspace[data-remix-state="editor"] > #lyricRemixResult,
.lyric-remix-workspace[data-remix-state="entry"] > #lyricRemixEntry[hidden],
#lyricRemixCompareEditor[hidden],
.lyric-remix-result[hidden],
.lyric-remix-version-library[hidden] { display: none !important; }
.lyric-remix-workspace[data-remix-state="entry"] > header { display: none !important; }
.lyric-remix-workspace[data-remix-state="entry"] > #lyricRemixEntry { display: grid !important; }
body.lyric-remix-focus .lyric-remix-workspace[data-remix-state="entry"] { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body.lyric-remix-focus .content-grid { width: min(1180px, 100%); margin-top: 24px; margin-bottom: 64px; }
.lyric-remix-workspace { min-height: 0; gap: 16px; padding: 18px 20px; }
.lyric-remix-entry { min-height: 0; gap: 16px; padding: 2px 0 4px; }
.lyric-remix-entry-home { gap: 16px; }
.lyric-remix-entry-focus { min-height: 390px; }
.lyric-remix-entry-copy h2 { font-size: clamp(24px, 2.4vw, 34px); }
.lyric-remix-entry-copy > p { font-size: 13px; }
.lyric-remix-flow-steps { gap: 8px; margin: 2px 0; }
.lyric-remix-flow-steps li { min-height: 52px; padding: 8px 10px; }
.lyric-remix-flow-steps small,
.lyric-remix-grid label,
.lyric-remix-directions > span,
.lyric-remix-directions button,
.lyric-remix-directions-more summary.lyric-remix-directions-more-btn,
.lyric-remix-common-options > header small,
.lyric-remix-common-options > header button,
.lyric-remix-common-options label,
.lyric-remix-source-preview small,
.lyric-remix-source-preview button,
.lyric-remix-generate-head span { font-size: 12px; }
.lyric-remix-source-preview pre { max-height: 150px; padding: 10px 12px; line-height: 1.65; }
.lyric-remix-common-options { padding: 10px 12px; }
.lyric-remix-common-options > div { gap: 8px; }
.lyric-remix-workspace > header p { font-size: 13px; }
.ai-write-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: var(--app-faint); font-size: 9px; }
.ai-write-divider::before, .ai-write-divider::after { height: 1px; flex: 1; background: var(--app-line); content: ''; }

.llm-settings { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--app-line); border-radius: 9px; background: color-mix(in srgb, var(--app-panel-2) 70%, var(--app-panel)); }
.llm-settings > label, .llm-settings-grid label { display: grid; gap: 5px; color: var(--app-muted); font-size: 12px; }
.llm-settings :is(input[type="url"], input[type="text"], input[type="password"], input:not([type])) { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--app-bg); color: var(--app-text); }
.llm-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.llm-clear-key { display: flex !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.llm-clear-key input { width: auto; }
#llmSettingsStatus { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.ai-points-settings { display: grid; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.ai-points-settings-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-panel); color: var(--app-text); cursor: pointer; }
.ai-points-settings-toggle input { width: auto; margin-top: 2px; accent-color: var(--app-accent); }
.ai-points-settings-toggle span { display: grid; gap: 3px; }
.ai-points-settings-toggle strong { color: var(--app-text); font-size: 13px; }
.ai-points-settings-toggle small, .ai-points-settings-status { color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.ai-points-settings-status { margin: 0; }
.llm-source-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}
.llm-source-picker legend {
  padding: 0;
  margin-bottom: 6px;
  color: var(--app-text);
  font-size: 13px;
  font-weight: 700;
}
.llm-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.llm-source-radios[hidden] { display: none; }
.llm-source-option {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel-2);
  color: var(--app-text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.llm-source-option.is-active {
  border-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent-soft) 28%, var(--app-panel));
}
.llm-source-option:hover:not(.is-active) {
  border-color: color-mix(in srgb, var(--app-accent) 50%, var(--app-line));
}
.llm-source-option strong { color: var(--app-text); font-size: 13px; }
.llm-source-option span { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.llm-platform-status {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.45;
}
.llm-local-detail {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--app-panel) 82%, var(--app-panel-2));
}
.llm-local-detail > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.llm-local-detail > summary::-webkit-details-marker { display: none; }
.llm-local-detail > summary::before { content: '▸'; font-size: 11px; }
.llm-local-detail[open] > summary::before { content: '▾'; }
.llm-local-block {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}
.llm-local-block > label {
  display: grid;
  gap: 5px;
  color: var(--app-muted);
  font-size: 12px;
}
.llm-local-block select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  color: var(--app-text);
  font: inherit;
  font-size: 12px;
}

.player-lyrics-version { display: grid; min-width: 132px; gap: 2px; color: var(--app-faint); font-size: 12px; }
.player-lyrics-version select { width: 100%; min-width: 0; height: 30px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--app-panel-2); color: var(--app-text); font-size: 12px; }
.player-dual-lyrics { min-width: 76px; min-height: 30px; border: 1px solid var(--app-line); border-radius: 6px; background: var(--button-secondary-bg); color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.player-dual-lyrics[hidden] { display: none; }
.player-dual-lyrics[aria-pressed="true"] { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent); }
.player-dual-lyrics:disabled { cursor: not-allowed; opacity: .54; }
.player-inline-lyrics[data-dual-lyrics="true"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.player-inline-lyrics[data-dual-lyrics="true"] { height: 180px; }
.player-inline-lyrics[data-dual-lyrics="false"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.player-inline-lyrics[data-dual-lyrics="true"] .karaoke-prev,
.player-inline-lyrics[data-dual-lyrics="false"] .karaoke-prev { display: none; }
.player-inline-lyrics[data-dual-lyrics="true"] :is(.karaoke-current, .karaoke-next) { min-height: 88px; }
.karaoke-line-text { display: grid; justify-items: center; gap: 3px; }
.karaoke-lyric-copy { display: grid; justify-items: center; gap: 3px; }
.karaoke-primary-chars { display: inline-flex; align-items: center; justify-content: center; }
.karaoke-version-label { display: block; color: var(--app-secondary); font-size: max(12px, .24em); font-weight: 760; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
.karaoke-comparison-version-label { color: var(--app-muted); font-size: max(12px, .9em); }
.karaoke-comparison-copy { display: flex; align-items: center; gap: 6px; max-width: 94%; overflow: hidden; color: var(--app-muted); font-size: .48em; font-weight: 620; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.karaoke-comparison-copy b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-accent); font-size: 9px; }
.karaoke-comparison-char { color: var(--app-muted); transition: color 70ms linear, text-decoration-color 70ms linear; }
.karaoke-comparison-char.played { color: var(--app-accent); }
.karaoke-comparison-char.singing { color: var(--app-text); text-decoration: underline; text-decoration-color: var(--app-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.karaoke-timing-review { color: var(--status-warning-text); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }

@media (max-width: 980px) {
  .lyric-remix-grid, .llm-settings-grid { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-workspace > header { flex-direction: column; }
  .lyric-remix-head-actions { width: 100%; justify-content: space-between; }
  .lyric-remix-flow-steps { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-common-options > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lyric-remix-compare-scroll { height: min(480px, calc(100dvh - 340px)); }
  body.lyric-remix-focus.lyric-remix-review-stage .lyric-remix-compare-editor { --lyric-remix-scroll-height: min(520px, calc(100dvh - 300px)); }
  .lyric-remix-compare-editor > header { align-items: flex-start; flex-direction: column; }
  .lyric-remix-compare-editor > header > span { white-space: normal; }
  .lyric-remix-timing-review-banner { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-timing-review-actions { justify-content: flex-start; }
  .lyric-remix-timing-review-actions small { text-align: left; }
  .lyric-remix-version-item { grid-template-columns: 28px minmax(0, 1fr); }
  .lyric-remix-version-actions { grid-column: 2; justify-content: flex-start; }
  .lyric-remix-result-actions, .lyric-remix-edit-state { align-items: flex-start; flex-direction: column; }
  .lyric-remix-save-actions { width: 100%; justify-content: flex-start; }
  .lyric-remix-edit-state small { white-space: normal; }
  .player-lyrics-version, .player-dual-lyrics { display: none; }
}

@media (max-width: 620px) {
  .lyric-remix-compare-row { grid-template-columns: 34px minmax(88px, 1fr) auto 24px; }
  .lyric-remix-compare-row .lyric-remix-line-text { grid-column: 3; }
  .lyric-remix-review-actions { padding: 0; }
  .lyric-remix-line-diff { grid-column: 4; grid-row: 1; }
}

/* Shared popup readability: dialogs and floating inspectors should never fall
   back to the app's compact metadata scale. Component-specific styles may
   still enlarge headings, but supporting copy and controls remain readable. */
:is(.modal, .text-prompt, dialog[open], [role="dialog"]) :is(p, label, small, .muted, [role="status"], .field-help) {
  font-size: 12px;
  line-height: 1.55;
}
:is(.modal, .text-prompt, dialog[open], [role="dialog"]) :is(input, select, textarea, button) {
  font-size: 13px;
}
.theme-menu button { font-size: 13px; }
.theme-menu button b { font-size: 12px; }
.lrc-line-context-menu strong { font-size: 13px; }
.lrc-line-context-menu small { font-size: 12px; line-height: 1.45; }
.songwriting-panel-head strong { font-size: 15px; }
.songwriting-panel-head small,
.songwriting-panel-intro span,
.songwriting-panel-body > label,
.songwriting-save-state { font-size: 12px; line-height: 1.5; }
.songwriting-panel-head-actions button,
.songwriting-quick-actions button,
.songwriting-document-actions button,
.songwriting-primary-actions button { font-size: 12px; }
.desktop-app-menu__popover button,
.library-filter-menu > div :is(select, button),
.volume-popover button,
.settings-panel :is(select, input, button) { font-size: 14px; }
.desktop-app-menu__popover kbd,
.library-filter-menu > div :is(label, small),
.volume-popover output,
.settings-panel :is(label, output, small) { font-size: 12px; line-height: 1.5; }

/* Canonical modal contract. Every modal surface uses app-dialog-backdrop +
   app-dialog and the header/body/footer anatomy. Feature CSS may arrange the
   body contents, but must not invent another shell palette, radius or shadow. */
.app-dialog-backdrop {
  position: fixed;
  z-index: var(--app-layer-dialog);
  inset: 0;
  display: none;
  place-items: center;
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
  background: var(--app-dialog-backdrop-bg);
  backdrop-filter: blur(12px) saturate(112%);
}
.app-dialog-backdrop:is(.open, .is-open),
.app-dialog-backdrop:not(.modal-backdrop):not([hidden]) { display: grid; }
.app-dialog-backdrop[hidden] { display: none !important; }
.app-dialog-backdrop.app-dialog-backdrop--clear {
  background: none;
  backdrop-filter: none;
}
.app-dialog-workspace {
  min-width: 0;
  min-height: 0;
  color: var(--app-text);
  background: var(--app-bg);
}
.app-dialog {
  --app-dialog-width: var(--app-dialog-width-md);
  width: min(var(--app-dialog-width, var(--app-dialog-width-wide)), calc(100vw - var(--app-dialog-viewport-gap)));
  max-width: none;
  max-height: calc(100dvh - var(--app-dialog-viewport-gap));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-dialog-border);
  border-radius: var(--app-dialog-radius);
  color: var(--app-text);
  background: var(--app-dialog-surface);
  box-shadow: var(--app-dialog-shadow);
}
.app-dialog--sm { --app-dialog-width: var(--app-dialog-width-sm); }
.app-dialog--md { --app-dialog-width: var(--app-dialog-width-md); }
.app-dialog--lg { --app-dialog-width: var(--app-dialog-width-lg); }
.app-dialog--xl { --app-dialog-width: var(--app-dialog-width-xl); }
.app-dialog--wide { --app-dialog-width: var(--app-dialog-width-wide); }
:is(.app-dialog__header, .app-dialog > .modal-head) {
  min-height: 76px;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: var(--app-dialog-header-padding);
  border-bottom: 1px solid var(--app-line);
  background: var(--app-dialog-header-bg);
}
:is(.app-dialog__header, .app-dialog > .modal-head) :is(h2, h3, strong) { color: var(--app-text); }
:is(.app-dialog__header, .app-dialog > .modal-head) :is(p, small) { color: var(--app-muted); }
.app-dialog__eyebrow,
:is(.app-dialog__header, .app-dialog > .modal-head) > div > span:first-child {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.app-dialog__close,
:is(.app-dialog__header, .app-dialog > .modal-head) > button:last-child {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  color: var(--app-text);
  background: var(--button-secondary-bg);
  cursor: pointer;
}
.app-dialog__close:hover,
:is(.app-dialog__header, .app-dialog > .modal-head) > button:last-child:hover {
  border-color: var(--button-accent-border);
  background: var(--button-secondary-bg-hover);
}
.app-dialog__body {
  min-width: 0;
  min-height: 0;
  padding: var(--app-dialog-body-padding);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.app-dialog__footer {
  min-height: 62px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: var(--app-dialog-footer-padding);
  border-top: 1px solid var(--app-line);
  background: var(--app-dialog-header-bg);
}
.app-dialog__section {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-dialog-section-bg);
}
.app-dialog [hidden],
.app-dialog__footer[hidden] { display: none !important; }

/* The first-run guide uses the intrinsic-height app-dialog shell. Its four
   steps stay compact instead of stretching a legacy fixed-height modal. */
#firstRunGuideModal .first-run-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
#firstRunGuideModal .first-run-steps li {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  color: var(--app-muted);
  background: var(--app-dialog-section-bg);
  font-size: 13px;
  line-height: 1.55;
}
#firstRunGuideModal .first-run-steps strong { color: var(--app-text); font-size: 14px; }
#firstRunGuideModal .first-run-steps span { color: var(--app-muted); font-size: 13px; }
#firstRunGuideModal .first-run-guide-dialog { grid-template-rows: auto minmax(0, 1fr) auto; }
#firstRunGuideModal .first-run-guide-eyebrow { color: var(--app-accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
#firstRunGuideModal .first-run-guide-body { display: grid; gap: 12px; }
#firstRunGuideModal .first-run-guide-note { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--status-info-border); border-radius: 9px; background: var(--status-info-bg); }
#firstRunGuideModal .first-run-guide-note strong { color: var(--status-info-text); font-size: 13px; }
#firstRunGuideModal .first-run-guide-note p { margin: 0; color: var(--status-info-text); font-size: 13px; line-height: 1.55; }
#firstRunGuideModal .first-run-guide-footer { justify-content: flex-end; }
#firstRunGuideModal .first-run-guide-hint { margin-right: auto; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
#firstRunGuideModal .first-run-guide-footer :is(.outline-btn, .primary-btn) { min-height: 36px; padding-inline: 12px; font-size: 12px; }

/* Shared save-operation dialog. This intentionally uses the same shell and
   anatomy as every other modal; only the operation-specific body is custom. */
.sr-save-overlay { z-index: var(--app-layer-dialog-critical); }
.sr-save-head { min-height: 58px; }
.sr-save-state-label { color: var(--app-accent); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.sr-save-step-count { margin-left: auto; color: var(--app-muted); font-size: 12px; }
.sr-save-body { display: grid; gap: 15px; }
.sr-save-copy { display: grid; gap: 6px; }
.sr-save-copy h2 { margin: 0; color: var(--app-text); font-size: 20px; }
.sr-save-copy p { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.6; }
.sr-save-target { overflow: hidden; color: var(--app-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sr-save-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--app-line); }
.sr-save-progress i { display: block; width: var(--save-progress, 0%); height: 100%; border-radius: inherit; background: var(--app-accent); transition: width .2s ease; }
.sr-save-progress.is-indeterminate i { width: 34%; animation: app-dialog-progress 1.1s ease-in-out infinite; }
.sr-save-stages { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sr-save-stages li { display: grid; min-height: 38px; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--app-line); border-radius: 8px; background: var(--app-dialog-section-bg); }
.sr-save-stages li > span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--app-muted); background: var(--app-panel); font-size: 11px; }
.sr-save-stages li strong { color: var(--app-text); font-size: 12px; }
.sr-save-stages li em { color: var(--app-muted); font-size: 11px; font-style: normal; }
.sr-save-stages li[data-state="complete"] > span { color: var(--status-success-text); background: var(--status-success-bg); }
.sr-save-stages li[data-state="current"] { border-color: var(--app-accent); }
.sr-save-stages li[data-state="current"] em { color: var(--app-accent); }
.sr-save-stages li[data-state="failed"] { border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.sr-save-stages li[data-state="failed"] em { color: var(--status-danger-text); }
.sr-save-error { padding: 9px 11px; border: 1px solid var(--status-danger-border); border-radius: 8px; color: var(--status-danger-text); background: var(--status-danger-bg); }
.sr-save-error summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.sr-save-error pre { max-height: 120px; margin: 8px 0 0; overflow: auto; color: inherit; font-size: 11px; white-space: pre-wrap; }
.sr-save-actions [data-save-close] { margin-right: auto; }
@keyframes app-dialog-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(300%); }
}
@media (max-width: 620px) {
  .app-dialog-backdrop { padding: 10px; }
  .app-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 10px; }
  :is(.app-dialog__header, .app-dialog > .modal-head) { min-height: 68px; gap: 12px; padding: 13px 14px 11px; }
  .app-dialog__body { padding: 14px; }
  .app-dialog__footer { flex-wrap: wrap; padding: 10px 14px; }
  #firstRunGuideModal .first-run-steps { grid-template-columns: minmax(0, 1fr); }
  #firstRunGuideModal .first-run-guide-footer { justify-content: flex-start; }
  #firstRunGuideModal .first-run-guide-hint { flex-basis: 100%; }
}

/* Modal workspaces stay above the whole application. Only the content stage
   may scroll as a final fallback on unusually short windows. */
:is(#newProjectModal, #projectDiagnosticsModal, #supportModal) {
  z-index: var(--app-layer-dialog);
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
  background: var(--app-dialog-backdrop-bg);
  backdrop-filter: blur(12px) saturate(112%);
}
/* These shared dialogs are direct body children. Descendant animation state
   must not make their closed-state checks traverse the teaching workspace. */
body:has(> :is(#settingsModal, #newProjectModal, #projectDiagnosticsModal, #supportModal).open),
body:has(> #firstRunGuideModal:not([hidden])) {
  overflow: hidden;
}
body:has(> :is(#settingsModal, #newProjectModal, #projectDiagnosticsModal, #supportModal).open) :is(.vc-help, .sr-task-banner, .learning-guide-launcher) {
  display: none !important;
}
body:is(.account-view-open, .lrc-align-view-open, .pitch-workspace-open, .practice-recording-focus, .beat-calibration-workspace-open) .sr-task-banner,
body:has(.practice-studio.pitch-editor-open) .sr-task-banner {
  display: none !important;
}
.modal-frame {
  width: min(var(--app-dialog-width, var(--app-dialog-width-wide)), calc(100vw - var(--app-dialog-viewport-gap)));
  max-width: none;
  height: min(820px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--app-dialog-border);
  border-radius: var(--app-dialog-radius);
  background: var(--app-dialog-surface);
  box-shadow: var(--app-dialog-shadow);
}
.modal-frame > .modal-head {
  min-height: 82px;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  padding: var(--app-dialog-header-padding);
  border-bottom: 1px solid var(--app-line);
  background: var(--app-dialog-header-bg);
}
.modal-frame > .modal-head h2 {
  margin: 4px 0 0;
  color: var(--app-text);
  font-size: 22px;
  line-height: 1.2;
}
.modal-frame > .modal-head p {
  margin: 5px 0 0;
  color: var(--app-muted);
}
.modal-frame > .modal-head .icon-btn {
  flex: 0 0 auto;
  border: 1px solid var(--app-line);
  background: var(--button-secondary-bg);
}
.modal-scroll-body {
  min-width: 0;
  min-height: 0;
  padding: var(--app-dialog-body-padding);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal-frame > .modal-actions {
  min-height: 68px;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: var(--app-dialog-footer-padding);
  border-top: 1px solid var(--app-line);
  background: var(--app-dialog-header-bg);
}
.modal-frame > .modal-actions button {
  min-width: 92px;
}
.modal-action-hint {
  min-width: 0;
  margin-right: auto;
  color: var(--app-faint);
  font-size: 11px;
}

/* Settings is a real workspace rather than a tall, narrow popup. */
.workspace-settings-modal > .modal-head {
  min-height: 76px;
  padding-block: 14px 13px;
}
.workspace-settings-modal > .modal-actions {
  min-height: 62px;
  padding-block: 9px;
}
.workspace-settings-body {
  display: grid;
  align-content: center;
  padding: 16px 18px;
  overflow: auto;
}
.workspace-settings-columns {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "appearance audio lan"
    "storage llm local-ai"
    "diagnostics diagnostics diagnostics";
  align-items: start;
  gap: 12px;
  margin: auto;
}
.workspace-settings-column {
  display: contents;
}
.workspace-settings-card,
.workspace-settings-modal :is(.audio-device-settings, .lan-sync-settings, .llm-settings) {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-panel);
}
.workspace-settings-modal .settings-appearance { grid-area: appearance; }
.workspace-settings-modal .audio-device-settings { grid-area: audio; align-content: start; }
.workspace-settings-modal .lan-sync-settings { grid-area: lan; align-content: start; }
.workspace-settings-modal .llm-settings { grid-area: llm; align-content: start; }
.workspace-settings-modal .local-ai-settings { grid-area: local-ai; align-content: start; }
.workspace-settings-modal .workspace-storage-settings { grid-area: storage; align-content: start; }
.workspace-settings-modal .diagnostics-settings { grid-area: diagnostics; align-content: start; }
.workspace-settings-card:hover {
  border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-line));
}
.workspace-settings-modal .settings-theme-row {
  margin: 0;
  padding: 10px 0 0;
  border: 0;
}
.workspace-settings-modal label.settings-aspect-lock {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--app-line);
  cursor: pointer;
}
.settings-aspect-lock-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.settings-aspect-lock-copy strong {
  color: var(--app-text);
  font-size: 13px;
  line-height: 1.35;
}
.settings-aspect-lock-copy small {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}
.workspace-settings-modal .settings-aspect-lock > input {
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--app-accent);
  cursor: pointer;
}
.workspace-settings-modal :is(label, .workspace-storage-settings) {
  min-width: 0;
}
.workspace-settings-modal :is(input, select) {
  width: 100%;
  min-width: 0;
}
.workspace-settings-modal .llm-settings-grid {
  gap: 10px;
}
.workspace-settings-modal .lan-sync-actions {
  gap: 6px;
}
.workspace-settings-modal .lan-sync-actions button {
  min-height: 34px;
  padding-inline: 11px;
}
.workspace-settings-modal .lan-sync-urls {
  max-height: 76px;
  overflow: auto;
}
.workspace-storage-settings > p,
.workspace-settings-modal .llm-settings > p {
  margin: 0;
}
.diagnostics-settings {
  min-height: 0;
}
.diagnostics-state {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.diagnostics-state[data-state="ready"] {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}
.diagnostics-state[data-state="missing"] {
  border-color: var(--state-danger-line);
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
}
.diagnostics-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.diagnostics-summary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-panel-2);
}
.diagnostics-summary span,
.diagnostics-log-location > span {
  color: var(--app-muted);
  font-size: 12px;
}
.diagnostics-summary strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagnostics-log-location {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.diagnostics-log-location output {
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font-mono, monospace);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diagnostics-settings-status,
.diagnostics-settings-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}
.diagnostics-log-preview {
  min-height: 150px;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font-mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diagnostics-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.diagnostics-settings-actions button {
  min-height: 34px;
  padding-inline: 11px;
}
.settings-folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.settings-folder-row .ghost-btn {
  min-height: 38px;
  white-space: nowrap;
}
.settings-folder-status {
  color: var(--app-faint);
  font-size: 11px;
  line-height: 1.45;
}
.workspace-settings-nav {
  display: none;
}
.local-ai-state {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  color: var(--app-muted);
  background: var(--app-panel-2);
  font-size: 11px;
  font-weight: 750;
}
.local-ai-state[data-state="ready"] {
  border-color: color-mix(in srgb, var(--status-success) 45%, var(--app-line));
  color: var(--status-success);
  background: color-mix(in srgb, var(--status-success) 10%, var(--app-panel));
}
.local-ai-state[data-state="failed"] {
  border-color: color-mix(in srgb, var(--status-danger) 45%, var(--app-line));
  color: var(--status-danger);
  background: color-mix(in srgb, var(--status-danger) 10%, var(--app-panel));
}
.local-ai-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.local-ai-summary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel-2);
}
.local-ai-summary span,
.local-ai-note {
  color: var(--app-muted);
  font-size: 12px;
}
.local-ai-summary strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-storage-panel {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-panel-2);
}
.model-storage-panel[data-state="required"] {
  border-color: var(--status-warning-border);
  background: color-mix(in srgb, var(--status-warning-bg) 62%, var(--app-panel));
}
.model-storage-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.model-storage-panel__head > div { display: grid; gap: 3px; min-width: 0; }
.model-storage-panel__head strong { color: var(--app-text); font-size: 13px; }
.model-storage-panel__head span,
.model-storage-panel > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.model-storage-panel__path {
  overflow: hidden;
  padding: 8px 9px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--app-panel);
  color: var(--app-text);
  font-family: var(--app-font-mono, monospace);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-storage-panel__metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--app-muted); font-size: 12px; }
.model-storage-panel__metrics strong { color: var(--app-text); font-weight: 750; }
.local-ai-progress {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel-2);
}
.local-ai-progress[hidden] { display: none; }
.local-ai-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--app-muted);
  font-size: 12px;
}
.local-ai-progress progress { width: 100%; }
.local-ai-progress-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 12px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}
.local-ai-progress-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-ai-progress-route { min-height: 18px; color: var(--app-accent); font-size: 12px; line-height: 1.45; }
.local-ai-progress-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.local-ai-progress-controls button[hidden] { display: none; }
.local-ai-download-jobs,
.local-ai-model-management,
.local-ai-p2p-settings {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-panel-2);
}
.local-ai-download-jobs[hidden],
.local-ai-model-management[hidden] { display: none; }
.local-ai-p2p-settings { display: grid; gap: 9px; }
.local-ai-p2p-option {
  display: flex;
  align-items: start;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel);
  color: var(--app-text);
  cursor: pointer;
}
.local-ai-p2p-option input { flex: none; inline-size: 17px; block-size: 17px; margin: 1px 0 0; accent-color: var(--app-accent); }
.local-ai-p2p-option span { display: grid; gap: 3px; min-width: 0; }
.local-ai-p2p-option strong { font-size: 12px; line-height: 1.4; }
.local-ai-p2p-option small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.local-ai-management-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.local-ai-management-head > div { display: grid; gap: 3px; min-width: 0; }
.local-ai-management-head strong { color: var(--app-text); font-size: 13px; }
.local-ai-management-head span { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.local-ai-download-job-list,
.local-ai-installed-model-list { display: grid; gap: 7px; }
.local-ai-download-job,
.local-ai-installed-model {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel);
}
.local-ai-download-job[data-state="failed"],
.local-ai-installed-model[data-state="failed"] { border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.local-ai-download-job[data-state="paused"],
.local-ai-download-job[data-state="canceled"],
.local-ai-installed-model[data-state="incomplete"] { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.local-ai-download-job__head,
.local-ai-installed-model { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.local-ai-download-job__head strong,
.local-ai-installed-model strong { color: var(--app-text); font-size: 12px; }
.local-ai-download-job__head span,
.local-ai-download-job__meta,
.local-ai-installed-model > div:first-child span { color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.local-ai-download-job__meta { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.local-ai-download-job__actions,
.local-ai-installed-model__actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.local-ai-download-job__actions button,
.local-ai-installed-model__actions button { min-height: 30px; }
.local-ai-job-error { color: var(--status-danger-text); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.local-ai-installed-model > div:first-child { display: grid; gap: 3px; min-width: 0; }
.local-ai-installed-model > div:first-child span { overflow-wrap: anywhere; }
.local-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.local-ai-packages {
  display: grid;
  gap: 6px;
}
.local-ai-packages > p { margin: 0; color: var(--app-muted); font-size: 12px; }
.local-ai-packages article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-panel-2);
}
.local-ai-packages article > div { min-width: 0; display: grid; gap: 2px; }
.local-ai-packages article strong { color: var(--app-text); font-size: 12px; }
.local-ai-packages article span { overflow: hidden; color: var(--app-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.local-ai-packages article button { flex: none; min-height: 32px; }
.local-ai-actions button { min-height: 35px; }
.local-ai-remove { margin-left: auto; }
.local-ai-note { margin: 0; line-height: 1.55; }
.local-ai-offline-summary {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-panel));
  color: var(--app-text);
  font-size: 12px;
  line-height: 1.5;
}
.local-ai-bundle-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--app-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-accent-soft) 58%, var(--app-panel));
}
.local-ai-bundle-copy { display: grid; gap: 4px; min-width: 0; }
.local-ai-bundle-copy strong { color: var(--app-text); font-size: 13px; }
.local-ai-bundle-copy span,
.local-ai-bundle-choices small { color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.local-ai-bundle-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.local-ai-bundle-actions button { min-inline-size: 84px; min-height: 36px; }
.local-ai-bundle-choices > small { grid-column: 1 / -1; }
.local-ai-offline-catalog { min-width: 0; }
.local-ai-catalog-section {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-panel-2) 84%, var(--app-panel));
}
.local-ai-catalog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  color: var(--app-muted);
  font-size: 12px;
}
.local-ai-catalog-head > div { display: grid; gap: 3px; }
.local-ai-catalog-head strong { color: var(--app-text); font-size: 13px; }
.local-ai-catalog-head span { line-height: 1.45; }
.local-ai-catalog-grid { display: grid; gap: 7px; }
.local-ai-package-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-panel);
}
.local-ai-package-card[data-state="ready"] { border-color: var(--status-success-border); background: var(--status-success-bg); }
.local-ai-package-card[data-state="missing"] { border-color: color-mix(in srgb, var(--status-warning) 42%, var(--app-line)); }
.local-ai-package-card[data-state="restricted"] { border-color: color-mix(in srgb, var(--status-danger) 34%, var(--app-line)); opacity: .92; }
.local-ai-package-card__head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.local-ai-package-card__head > div { display: grid; gap: 2px; min-width: 0; }
.local-ai-package-card__head > div > span { color: var(--app-accent); font-size: 12px; }
.local-ai-package-card__head strong { color: var(--app-text); font-size: 12px; }
.local-ai-package-card__head span { color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.local-ai-package-card[data-state="ready"] .local-ai-package-card__head span { color: var(--status-success-text); }
.local-ai-package-card[data-state="missing"] .local-ai-package-card__head span { color: var(--status-warning); }
.local-ai-package-card[data-state="restricted"] .local-ai-package-card__head span { color: var(--status-danger); }
.local-ai-package-card p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.45; }
.local-ai-package-card__meta { display: flex; justify-content: space-between; gap: 8px; color: var(--app-muted); font-size: 12px; line-height: 1.4; }
.local-ai-package-card__meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-ai-package-card small { color: var(--app-faint); font-size: 12px; line-height: 1.4; }
.local-ai-technical { color: var(--app-muted); font-size: 12px; }
.local-ai-technical summary { cursor: pointer; color: var(--app-muted); font-size: 12px; }
.local-ai-technical small { display: block; padding-top: 5px; overflow-wrap: anywhere; }
.local-ai-catalog-note { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.local-ai-repository-advanced { display: grid; gap: 9px; color: var(--app-muted); font-size: 12px; }
.local-ai-repository-advanced summary { cursor: pointer; color: var(--app-muted); font-size: 12px; }
.local-ai-repository-advanced p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.local-ai-repository-advanced label { display: grid; gap: 6px; }
.local-ai-packages > p,
.local-ai-packages article span { font-size: 12px; }
@media (max-width: 760px) {
  .local-ai-bundle-choices { grid-template-columns: minmax(0, 1fr); }
  .local-ai-bundle-actions { justify-content: start; }
  .local-ai-progress-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-ai-installed-model { display: grid; }
  .local-ai-installed-model__actions { justify-content: start; }
}

/* The song and diagnostics dialogs use the same fixed shell, with their forms
   widened so normal desktop windows rarely need a vertical scrollbar. */
.project-modal {
  width: min(1280px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.project-modal-body {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(540px, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 12px 18px;
}
.project-modal-body > label {
  width: 100%;
  justify-self: stretch;
  margin: 0;
}
.project-modal-body > label > :is(input, textarea) {
  width: 100%;
  min-width: 0;
}
.project-modal-body > .project-title-field {
  grid-column: 1;
  grid-row: 1;
}
.project-modal-body > label:has(#newProjectPrompt) {
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
}
.project-modal-body > #projectMetaFields {
  min-height: 0;
  grid-column: 2;
  grid-row: 1 / 4;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 9px 10px;
  margin: 0;
}
.project-modal-body > .translation-grid {
  grid-column: 1;
  grid-row: 3;
}
.project-modal-body > label > textarea#newProjectPrompt {
  min-height: clamp(140px, 23vh, 220px);
  height: 100%;
}
.project-modal-body .translation-grid textarea {
  min-height: clamp(82px, 12vh, 112px);
}
.song-import-setup { display: none; }
.project-modal.is-import-flow { width: min(1120px, calc(100vw - 32px)); }
.project-modal.is-import-flow .project-modal-body {
  grid-template-columns: minmax(320px, .82fr) minmax(440px, 1.18fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px 20px;
}
.project-modal.is-import-flow .song-import-setup {
  min-height: 0;
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-panel-2) 76%, var(--app-bg));
}
.project-modal.is-import-flow .project-modal-body > .project-title-field {
  grid-column: 2;
  grid-row: 1;
}
.project-modal.is-import-flow .project-modal-body > label:has(#newProjectPrompt) {
  grid-column: 2;
  grid-row: 2;
}
.project-modal.is-import-flow .project-modal-body > :is(#projectMetaFields, .translation-grid) { display: none; }
.project-modal.is-import-flow #newProjectPrompt { min-height: clamp(240px, 38vh, 410px); }
.song-import-heading { display: grid; gap: 5px; }
.song-import-heading > span {
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.song-import-heading > strong { color: var(--app-text); font-size: 20px; }
.song-import-heading > p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.song-import-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.song-import-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--app-muted);
}
.song-import-steps li > span {
  flex: none;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.song-import-steps li > div { min-width: 0; display: grid; gap: 2px; }
.song-import-steps li strong { color: inherit; font-size: 12px; }
.song-import-steps li small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.song-import-steps li:is(.is-current, .is-complete) {
  color: var(--app-text);
  background: color-mix(in srgb, var(--app-accent) 9%, transparent);
}
.song-import-steps li:is(.is-current, .is-complete) > span {
  border-color: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-panel));
}
.song-import-folder-picker {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px dashed color-mix(in srgb, var(--app-accent) 48%, var(--app-line));
  border-radius: 12px;
  color: var(--app-text);
  background: var(--app-panel);
  text-align: left;
}
.song-import-folder-picker:hover { border-style: solid; background: color-mix(in srgb, var(--app-accent) 7%, var(--app-panel)); }
.song-import-folder-picker > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.song-import-folder-picker strong,
.song-import-folder-picker small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-import-folder-picker small { color: var(--app-muted); font-size: 10px; }
.song-import-folder-picker em { color: var(--app-accent); font-size: 11px; font-style: normal; font-weight: 800; }
.song-import-folder-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 13%, var(--app-panel-2));
  font-size: 21px;
}
.song-import-folder-picker.is-ready .song-import-folder-icon::before { content: '✓'; }
.song-import-folder-picker.is-ready .song-import-folder-icon { font-size: 0; }
.song-import-folder-picker.is-ready .song-import-folder-icon::before { font-size: 17px; }
.song-import-scan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.song-import-scan > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  background: var(--app-panel);
}
.song-import-scan span { color: var(--app-muted); font-size: 10px; }
.song-import-scan strong { color: var(--app-text); font-size: 14px; }
.song-import-file-list {
  max-height: 92px;
  overflow: auto;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 9px;
  color: var(--app-muted);
  background: var(--app-panel);
  font-size: 10px;
  line-height: 1.7;
}
.song-import-file-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-import-privacy { margin: 0; color: var(--app-muted); font-size: 10px; }
.song-import-privacy::before { content: '✓'; margin-right: 6px; color: var(--status-success-text); font-weight: 900; }
.song-import-lyrics-actions { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.song-import-lyrics-actions button { flex: none; min-height: 32px; padding: 6px 10px; }
.song-import-lyrics-actions small { overflow: hidden; color: var(--app-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lyrics-smart-status {
  display: block;
  min-height: 18px;
  margin-top: 5px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.55;
}
.project-diagnostics-modal {
  width: min(980px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}
.project-diagnostics-body {
  padding-top: 0;
}
.project-diagnostics-modal > .modal-actions {
  flex-wrap: wrap;
}
.support-modal {
  width: min(780px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}
.support-modal-body {
  display: grid;
  gap: 16px;
}
.support-modal-body .support-contact-grid,
.support-modal-body .support-items {
  margin: 0;
}

@media (max-width: 1120px) {
  .workspace-settings-body {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 12px;
    padding: 14px;
  }
  .workspace-settings-nav {
    display: flex;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--app-line);
    border-radius: 9px;
    background: var(--app-panel-2);
  }
  .workspace-settings-nav button {
    min-height: 38px;
    flex: 1 0 max-content;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--app-muted);
  }
  .workspace-settings-nav button.is-active {
    background: var(--button-accent-bg);
    color: var(--button-accent-text);
    font-weight: 750;
  }
  .workspace-settings-columns {
    display: block;
    width: 100%;
    height: 100%;
  }
  .workspace-settings-column {
    display: contents;
  }
  .workspace-settings-modal .workspace-settings-card {
    display: none;
    height: 100%;
    align-content: start;
    overflow: auto;
  }
  .workspace-settings-modal .workspace-settings-card.is-active {
    display: grid;
  }
  .modal-frame > .modal-actions {
    flex-wrap: wrap;
  }
  .modal-action-hint {
    flex: 1 1 100%;
  }
}

@media (max-width: 640px) {
  :is(#newProjectModal, #projectDiagnosticsModal, #supportModal) {
    place-items: stretch;
    padding: 0;
  }
  :is(.project-modal, .project-diagnostics-modal, .support-modal) {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .modal-frame > .modal-head {
    min-height: 72px;
    padding: 13px 14px;
  }
  .modal-scroll-body {
    padding: 14px;
  }
  .modal-frame > .modal-actions {
    padding: 10px 14px;
  }
  .project-modal-body .translation-grid {
    grid-template-columns: 1fr;
  }
  .project-diagnostics-modal > .modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-diagnostics-modal > .modal-actions button {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .project-modal-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .project-modal-body > :is(.project-title-field, label:has(#newProjectPrompt), #projectMetaFields, .translation-grid) {
    grid-column: 1;
    grid-row: auto;
  }
  .project-modal-body > #projectMetaFields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-modal.is-import-flow .project-modal-body { grid-template-columns: 1fr; grid-template-rows: none; }
  .project-modal.is-import-flow .song-import-setup,
  .project-modal.is-import-flow .project-modal-body > .project-title-field,
  .project-modal.is-import-flow .project-modal-body > label:has(#newProjectPrompt) {
    grid-column: 1;
    grid-row: auto;
  }
  .project-modal.is-import-flow #newProjectPrompt { min-height: 220px; }
}

@media (max-height: 620px) {
  .workspace-settings-body {
    align-content: stretch;
    overflow: auto;
  }
  .workspace-settings-columns {
    margin-block: 0;
  }
  .modal-frame > .modal-head {
    min-height: 68px;
    padding-block: 11px;
  }
  .modal-frame > .modal-head p,
  .modal-action-hint {
    display: none;
  }
  .modal-frame > .modal-actions {
    min-height: 58px;
    padding-block: 8px;
  }
}

/* SongRealm status glyphs injected by workspace-ui.js replace five legacy
 * Unicode characters (✓ · · · →). Keep them visually consistent across the
 * em/i containers they live in. */
.songrealm-glyph {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.songrealm-glyph--status-success {
  color: var(--app-accent);
}
.songrealm-glyph--status-warning {
  color: var(--app-warm);
}
.songrealm-glyph--status-info {
  color: var(--app-muted);
}
.songrealm-glyph--library-skip-forward {
  color: var(--app-accent);
}
.stage-status .songrealm-glyph {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

/* Icon finish is an independent axis of the visual composition layer. The
 * current contract remains SVG/Lucide-compatible; only stroke treatment
 * changes, so icon meaning and accessibility do not drift between styles. */
html[data-ui-icon-style="line"] .songrealm-glyph {
  fill: none;
  stroke-width: 2;
  opacity: 1;
}
html[data-ui-icon-style="line-soft"] .songrealm-glyph {
  fill: none;
  stroke-width: 1.8;
  opacity: .9;
}
html[data-ui-icon-style="mixed"] .songrealm-glyph {
  fill: color-mix(in srgb, currentColor 12%, transparent);
  stroke-width: 2.15;
  opacity: 1;
}

@media (max-width: 700px) {
  .style-option-list, .metal-finish-option-list, .metal-texture-option-list, .paper-texture-option-list, .interaction-option-list, .click-option-list { grid-template-columns: 1fr; }
  .settings-style-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
  .display-calibration-control { grid-template-columns: 1fr; }
  .display-calibration-scale { padding: 0; }
}

/* Composition behavior: every visual style must be visible on the actual
 * product shell, not only on the selector preview. */
html[data-ui-surface] :is(.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, .workspace-settings-card, .workspace-settings-nav, .workspace-hub-hero, .workspace-hub-card, .workspace-hub-tools nav button) {
  background: var(--app-card-surface);
  border-color: var(--app-style-border-color);
  border-radius: var(--panel-radius);
  box-shadow: var(--app-style-card-shadow);
  transform: translateY(var(--app-style-card-offset));
}
html[data-ui-surface] body,
html[data-ui-surface] .main-content {
  background: var(--app-style-canvas);
}
html[data-ui-surface] .sidebar {
  background: var(--app-style-sidebar);
}
html[data-ui-surface] :is(.shell-nav-item.active, .module-nav-item.active) {
  background: var(--app-style-nav-active);
  border-color: var(--app-style-card-border);
}
html[data-ui-surface] :is(.shell-nav-item, .module-nav-item, .workspace-hub-card, .workspace-hub-tools nav button) {
  border-color: var(--app-style-border-color);
}
html[data-ui-surface] :is(.shell-nav-item > .icon, .module-index, .active-song-context-icon, .workspace-hub-card-index, .workspace-hub-tools nav button > span) {
  padding: var(--app-style-icon-padding);
  border: 1px solid var(--app-style-icon-border);
  border-radius: var(--app-style-icon-radius);
  background: var(--app-style-icon-bg);
  box-shadow: var(--app-icon-shadow);
}
/* Filled style chrome must carry matching ink. Leaving --app-faint / accent
   text on the accent gradient made 01/LIB/BETA unreadable across palettes. */
html[data-ui-surface]:not([data-ui-surface="flat"]) :is(.shell-nav-item > .icon, .module-index, .active-song-context-icon, .workspace-hub-card-index, .workspace-hub-tools nav button > span) {
  color: var(--app-style-icon-ink);
}
/* Flow stage indexes share one chrome: inactive outline, active accent fill.
   Completion is shown only by .stage-status, not by recoloring the index box. */
html[data-ui-surface] .creator-flow-nav .module-nav-item .module-index {
  padding: 0;
  border: 1px solid var(--app-line);
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: var(--app-faint);
}
html[data-ui-surface] .creator-flow-nav .module-nav-item.active .module-index {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
}
html[data-ui-surface] :is(.workspace-settings-modal, .modal-frame, .app-dialog) {
  border-radius: var(--app-dialog-radius);
  box-shadow: var(--app-dialog-shadow);
}
html[data-ui-surface] :is(.workspace-settings-modal input, .workspace-settings-modal select, .workspace-settings-modal textarea, .workspace-settings-modal .icon-btn, .theme-trigger) {
  background: var(--app-control-surface);
  border-radius: var(--control-radius);
}
html[data-ui-surface] :is(button, input, select, textarea) {
  border-color: var(--app-style-border-color);
  box-shadow: var(--app-style-control-shadow);
}
html[data-ui-surface] :is(.ghost-btn, .outline-btn, .secondary-button, .icon-btn, .theme-trigger, .style-option-list button, .metal-finish-option-list button, .metal-texture-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button) {
  border-radius: var(--control-radius);
}
html[data-ui-surface="hard"] :is(button, input, select, textarea),
html[data-ui-surface="immersive"] :is(button, input, select, textarea) {
  box-shadow: var(--app-style-control-shadow);
}
html[data-ui-surface] .workspace-hub-hero {
  background: var(--app-card-surface);
  border-radius: calc(var(--panel-radius) + 4px);
}
html[data-ui-surface] :is(.workspace-hub-card, .workspace-hub-tools nav button) {
  border-radius: var(--control-radius);
}
html[data-ui-surface] .style-option-list button {
  border-radius: var(--control-radius);
  background: var(--app-control-surface);
}
html[data-ui-surface] .style-option-list button.active {
  background: var(--app-accent-soft);
}
html[data-ui-surface="glass"] :is(.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, .workspace-settings-card, .workspace-settings-nav, .workspace-hub-hero, .workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .app-dialog, .modal-frame, .workspace-settings-modal, .theme-menu, .ui-text-color-menu, .project-browser, .library-more-menu) {
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  background-image: var(--app-glass-highlight);
}
html[data-ui-surface="glass"] :is(input, select, textarea, .ghost-btn, .outline-btn, .secondary-button, .icon-btn, .theme-trigger, .ui-text-color-trigger, .ui-text-color-reset, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, .library-search, .library-toolbar, .library-action-more, .library-back-workspace, .library-more-menu button) {
  -webkit-backdrop-filter: var(--app-glass-blur);
  backdrop-filter: var(--app-glass-blur);
  background: var(--app-control-surface);
  border-color: var(--app-style-card-border);
}
html[data-ui-surface="glass"] .style-option-list button.active {
  background: color-mix(in srgb, var(--app-accent-soft) 74%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 72%, transparent), 0 8px 20px color-mix(in srgb, var(--app-shadow) 38%, transparent);
}
@supports not ((backdrop-filter: blur(1px))) {
  html[data-ui-surface="glass"] :is(.lyrics-card, .lyrics-panel, .tool-panel, .audio-row, .library-item, .library-row, .version-card, .workspace-hub-hero, .workspace-hub-card, .workspace-hub-continue, .app-dialog, .modal-frame, .workspace-settings-modal, .theme-menu, .ui-text-color-menu, .project-browser, .library-more-menu) {
    background: var(--app-panel);
  }
  html[data-ui-surface="glass"] :is(input, select, textarea, .ghost-btn, .outline-btn, .secondary-button, .icon-btn, .theme-trigger, .ui-text-color-trigger, .ui-text-color-reset, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, .library-search, .library-toolbar, .library-action-more, .library-back-workspace, .library-more-menu button) {
    background: var(--app-panel-2);
  }
}

/* Paperback composition: each stock keeps the same reading-safe ink system,
 * while its palette and grain jointly change the perceived paper material. */
html[data-theme="paperback"] {
  --app-paper-texture-layer: repeating-linear-gradient(0deg, color-mix(in srgb, var(--app-paper-fiber) 10%, transparent) 0 1px, transparent 1px 7px), radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--app-paper-stain) 7%, transparent), transparent 36%);
  --app-paper-surface: var(--app-paper-texture-layer), linear-gradient(135deg, color-mix(in srgb, var(--app-paper-base) 94%, var(--app-panel)), color-mix(in srgb, var(--app-paper-base) 86%, var(--app-panel-2)));
  --app-paper-control-surface: var(--app-paper-texture-layer), linear-gradient(135deg, color-mix(in srgb, var(--app-paper-base) 88%, var(--app-panel-2)), color-mix(in srgb, var(--app-paper-base) 78%, var(--app-panel)));
  --app-paper-canvas: var(--app-paper-texture-layer), linear-gradient(135deg, color-mix(in srgb, var(--app-paper-base) 90%, var(--app-bg)), var(--app-bg));
}
html[data-theme="paperback"][data-paper-texture="cotton"] {
  --app-paper-texture-layer: repeating-radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--app-paper-fiber) 12%, transparent) 0 1px, transparent 1px 7px), repeating-linear-gradient(104deg, color-mix(in srgb, var(--app-paper-fiber) 7%, transparent) 0 1px, transparent 1px 9px);
}
html[data-theme="paperback"][data-paper-texture="vellum"] {
  --app-paper-texture-layer: radial-gradient(ellipse at 18% 22%, color-mix(in srgb, var(--app-paper-stain) 16%, transparent), transparent 26%), radial-gradient(ellipse at 82% 76%, color-mix(in srgb, var(--app-warm) 10%, transparent), transparent 30%), repeating-linear-gradient(173deg, color-mix(in srgb, var(--app-paper-fiber) 9%, transparent) 0 1px, transparent 1px 10px);
}
html[data-theme="paperback"][data-paper-texture="linen"] {
  --app-paper-texture-layer: repeating-linear-gradient(0deg, color-mix(in srgb, var(--app-paper-fiber) 11%, transparent) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--app-paper-fiber) 8%, transparent) 0 1px, transparent 1px 6px);
}
html[data-theme="paperback"][data-paper-texture="recycled"] {
  --app-paper-texture-layer: radial-gradient(circle at 12% 26%, color-mix(in srgb, var(--app-paper-fiber) 20%, transparent) 0 1px, transparent 1px 100%), radial-gradient(circle at 68% 72%, color-mix(in srgb, var(--app-paper-stain) 11%, transparent) 0 1px, transparent 1px 100%), repeating-linear-gradient(168deg, color-mix(in srgb, var(--app-paper-fiber) 6%, transparent) 0 1px, transparent 1px 8px);
}
html[data-theme="paperback"][data-paper-texture="newsprint"] {
  --app-paper-texture-layer: repeating-linear-gradient(0deg, color-mix(in srgb, var(--app-paper-fiber) 8%, transparent) 0 1px, transparent 1px 4px), radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--app-paper-stain) 6%, transparent), transparent 34%);
  --app-paper-surface: var(--app-paper-texture-layer), linear-gradient(135deg, color-mix(in srgb, var(--app-paper-base) 82%, var(--app-panel-2)), color-mix(in srgb, var(--app-paper-base) 74%, var(--app-panel)));
  --app-paper-control-surface: var(--app-paper-texture-layer), linear-gradient(135deg, color-mix(in srgb, var(--app-paper-base) 78%, var(--app-panel-2)), color-mix(in srgb, var(--app-paper-base) 68%, var(--app-panel)));
}
html[data-theme="paperback"] :is(.sidebar, .topbar, .mobile-tabs, .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, .workspace-settings-card, .workspace-settings-nav, .workspace-hub-hero, .workspace-hub-card, .workspace-hub-tools nav button, .app-dialog, .modal-frame, .workspace-settings-modal, .theme-menu, .ui-text-color-menu, .project-browser, .library-more-menu) {
  background-image: var(--app-paper-surface);
  background-blend-mode: multiply, normal;
}
html[data-theme="paperback"] :is(body, .main-content) {
  background-image: var(--app-paper-canvas);
  background-blend-mode: multiply, normal;
}
html[data-theme="paperback"] :is(input, select, textarea, .ghost-btn, .outline-btn, .secondary-button, .icon-btn, .theme-trigger, .ui-text-color-trigger, .ui-text-color-reset, .style-option-list button, .metal-finish-option-list button, .metal-texture-option-list button, .paper-texture-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, .display-calibration-reset, .library-search, .library-toolbar, .library-action-more, .library-back-workspace, .library-more-menu button) {
  background-image: var(--app-paper-control-surface);
  background-blend-mode: multiply, normal;
}

/* Display calibration is intentionally outside the theme selectors: it is a
 * user display preference and therefore applies to every palette. */
html[data-display-brightness] body {
  filter: brightness(var(--app-display-brightness)) contrast(var(--app-display-contrast));
}

/* Forged-metal composition: the color family and surface texture are kept as
 * separate variables so finish colors and material styles can be composed. */
html[data-theme="forge"] {
  --panel-radius: 10px;
  --control-radius: 7px;
  --app-metal-canvas-image: repeating-linear-gradient(118deg, color-mix(in srgb, var(--app-metal-highlight) 3%, transparent) 0 1px, transparent 1px 9px, color-mix(in srgb, var(--app-metal-deep) 10%, transparent) 9px 10px), radial-gradient(circle at 72% -8%, color-mix(in srgb, var(--app-metal-base) 22%, transparent), transparent 44%);
  --app-metal-canvas: var(--app-metal-canvas-image), var(--app-bg);
  --app-metal-texture-layer: repeating-radial-gradient(circle at 14% 22%, color-mix(in srgb, var(--app-metal-highlight) 8%, transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(102deg, color-mix(in srgb, var(--app-metal-highlight) 3%, transparent) 0 1px, transparent 1px 6px, color-mix(in srgb, var(--app-metal-deep) 6%, transparent) 6px 7px);
  --app-metal-surface: var(--app-metal-texture-layer), linear-gradient(145deg, color-mix(in srgb, var(--app-metal-base) 22%, var(--app-panel-2)), color-mix(in srgb, var(--app-metal-deep) 18%, var(--app-panel)));
  --app-metal-control-surface: var(--app-metal-texture-layer), linear-gradient(145deg, color-mix(in srgb, var(--app-metal-base) 16%, var(--app-panel-2)), color-mix(in srgb, var(--app-metal-deep) 14%, var(--app-panel)));
  --app-metal-sheen: linear-gradient(135deg, color-mix(in srgb, var(--app-metal-highlight) 10%, var(--app-accent)) 0%, color-mix(in srgb, var(--app-accent) 88%, var(--app-metal-base)) 38%, color-mix(in srgb, var(--app-metal-base) 68%, var(--app-panel-2)) 72%, color-mix(in srgb, var(--app-metal-deep) 42%, var(--app-accent)) 100%);
  --app-card-surface: var(--app-metal-surface);
  --app-control-surface: var(--app-metal-control-surface);
  --app-style-canvas: var(--app-metal-canvas);
  --app-style-sidebar: var(--app-metal-surface);
  --app-style-card-border: color-mix(in srgb, var(--app-metal-ridge) 72%, var(--app-line));
  --app-style-nav-active: color-mix(in srgb, var(--app-accent-soft) 78%, var(--app-panel));
  --app-card-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-metal-highlight) 20%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--app-metal-deep) 78%, transparent), 0 12px 28px color-mix(in srgb, var(--app-shadow) 78%, transparent);
  --app-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--app-metal-highlight) 18%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--app-metal-deep) 64%, transparent), 0 5px 12px color-mix(in srgb, var(--app-shadow) 52%, transparent);
  --app-3d-roughness-scale: 1.12;
  --app-3d-metalness-scale: 1.08;
  --app-3d-matte-roughness-floor: .82;
  --app-3d-matte-bump-scale: .045;
  --app-3d-matte-map-strength: 1;
}
html[data-theme="forge"][data-metal-texture="brushed"] {
  --app-metal-texture-layer: repeating-linear-gradient(90deg, color-mix(in srgb, var(--app-metal-deep) 10%, transparent) 0 2px, transparent 2px 5px, color-mix(in srgb, var(--app-metal-highlight) 8%, transparent) 5px 6px), repeating-linear-gradient(168deg, color-mix(in srgb, var(--app-metal-base) 8%, transparent) 0 1px, transparent 1px 8px);
  --app-3d-roughness-scale: 1.02;
  --app-3d-matte-roughness-floor: .68;
  --app-3d-matte-bump-scale: .022;
}
html[data-theme="forge"][data-metal-texture="hammered"] {
  --app-metal-texture-layer: repeating-radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--app-metal-highlight) 10%, transparent) 0 2px, transparent 2px 9px), repeating-radial-gradient(circle at 74% 72%, color-mix(in srgb, var(--app-metal-deep) 12%, transparent) 0 3px, transparent 3px 11px);
  --app-3d-roughness-scale: 1.18;
  --app-3d-matte-roughness-floor: .88;
  --app-3d-matte-bump-scale: .09;
}
html[data-theme="forge"][data-metal-texture="leather"] {
  --app-metal-texture-layer: repeating-radial-gradient(ellipse at 22% 28%, color-mix(in srgb, var(--app-metal-deep) 9%, transparent) 0 2px, transparent 2px 8px), repeating-radial-gradient(ellipse at 74% 68%, color-mix(in srgb, var(--app-metal-highlight) 5%, transparent) 0 1px, transparent 1px 7px);
  --app-3d-roughness-scale: 1.2;
  --app-3d-metalness-scale: .78;
  --app-3d-matte-roughness-floor: .9;
  --app-3d-matte-bump-scale: .1;
}
html[data-theme="forge"][data-metal-texture="patina"] {
  --app-metal-texture-layer: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--app-metal-patina) 26%, transparent), transparent 22%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--app-metal-patina) 18%, transparent), transparent 28%), repeating-radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--app-metal-deep) 8%, transparent) 0 2px, transparent 2px 10px);
  --app-3d-roughness-scale: 1.08;
  --app-3d-matte-roughness-floor: .76;
  --app-3d-matte-bump-scale: .06;
}
html[data-theme="forge"] :is(.sidebar, .topbar, .mobile-tabs, .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, .workspace-settings-card, .workspace-settings-nav, .workspace-hub-hero, .workspace-hub-card, .workspace-hub-tools nav button, .app-dialog, .modal-frame, .workspace-settings-modal, .theme-menu, .project-browser, .library-more-menu) {
  background-image: var(--app-metal-surface);
  background-blend-mode: soft-light, normal;
}
html[data-theme="forge"] :is(input, select, textarea, .ghost-btn, .outline-btn, .secondary-button, .icon-btn, .theme-trigger, .style-option-list button, .metal-finish-option-list button, .metal-texture-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, .library-search, .library-toolbar, .library-action-more, .library-back-workspace, .library-more-menu button) {
  background-image: var(--app-metal-control-surface);
  background-blend-mode: soft-light, normal;
  border-color: color-mix(in srgb, var(--app-metal-ridge) 66%, var(--app-line));
  box-shadow: var(--app-style-control-shadow);
}
html[data-theme="forge"] :is(.primary-btn, .primary-button, .btn-primary, .play-row button, .record-button) {
  background-color: var(--app-accent);
  background-image: var(--app-metal-sheen);
  border-color: color-mix(in srgb, var(--app-metal-highlight) 46%, var(--app-accent));
  color: var(--app-accent-ink);
  box-shadow: var(--app-style-control-shadow);
}
html[data-theme="forge"] :is(.main-content, body) {
  background-image: var(--app-metal-canvas-image);
  background-blend-mode: soft-light, normal;
}
/* Keep the composition preset authoritative when it is combined with the
 * forged-metal palette. The palette supplies material; the preset supplies
 * geometry and 3D depth. */
html[data-theme="forge"][data-ui-surface="flat"] { --panel-radius: 8px; --control-radius: 6px; --app-3d-roughness-scale: 1.18; --app-3d-metalness-scale: .72; }
html[data-theme="forge"][data-ui-surface="soft"] { --panel-radius: 12px; --control-radius: 8px; --app-3d-roughness-scale: 1; --app-3d-metalness-scale: .92; }
html[data-theme="forge"][data-ui-surface="elevated"] { --panel-radius: 14px; --control-radius: 9px; --app-3d-roughness-scale: .78; --app-3d-metalness-scale: 1.32; }
html[data-theme="forge"][data-ui-surface="hard"] { --panel-radius: 5px; --control-radius: 4px; --app-3d-roughness-scale: .88; --app-3d-metalness-scale: 1.2; }
html[data-theme="forge"][data-ui-surface="immersive"] { --panel-radius: 18px; --control-radius: 12px; --app-3d-roughness-scale: .58; --app-3d-metalness-scale: 1.5; }
html[data-theme="forge"][data-ui-surface="glass"] { --panel-radius: 22px; --control-radius: 12px; --app-3d-roughness-scale: .82; --app-3d-metalness-scale: 1.08; }
html[data-ui-icon-style] .icon {
  color: var(--app-icon-color);
  filter: var(--app-style-icon-filter);
  transform: scale(var(--app-icon-scale));
}
html[data-ui-icon-style] .songrealm-glyph {
  filter: var(--app-style-icon-filter);
  transform: scale(var(--app-icon-scale));
}
html[data-ui-icon-style="line"] .icon {
  font-weight: 400;
  text-shadow: none;
}
html[data-ui-icon-style="line-soft"] .icon {
  font-weight: 500;
  text-shadow: var(--app-icon-shadow);
}
html[data-ui-icon-style="mixed"] .icon {
  font-weight: 700;
  text-shadow: var(--app-icon-shadow);
}
html[data-ui-icon-style="engraved"] .icon {
  font-weight: 800;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--app-highlight) 78%, transparent), 0 -1px 0 color-mix(in srgb, var(--app-shadow) 84%, transparent), var(--app-icon-shadow);
}
html[data-ui-icon-style="engraved"] .songrealm-glyph {
  fill: color-mix(in srgb, currentColor 10%, transparent);
  stroke-width: 2.45;
  opacity: 1;
}
html[data-ui-icon-style="dimensional"] .icon {
  font-weight: 800;
  text-shadow: var(--app-icon-shadow);
}
html[data-ui-icon-style="dimensional"] .songrealm-glyph {
  fill: currentColor;
  stroke-width: 2.35;
  opacity: 1;
}
html[data-ui-icon-style="glass"] .icon {
  font-weight: 650;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--app-highlight) 74%, transparent), var(--app-icon-shadow);
}
html[data-ui-icon-style="glass"] .songrealm-glyph {
  fill: color-mix(in srgb, currentColor 18%, transparent);
  stroke-width: 2;
  opacity: 1;
}

/* Hover interaction presets are intentionally independent from the visual
 * surface preset. The same product can be calm, tactile, or theatrical. */
html[data-ui-interaction] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .active-song-context-actions button, .primary-btn, .primary-button, .secondary-button, .outline-btn, .ghost-btn, .icon-btn, .theme-trigger, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, [data-app-menu-trigger], .desktop-global-tools button, .top-actions button) {
  transition: transform var(--app-hover-duration) ease, box-shadow var(--app-hover-duration) ease, border-color var(--app-hover-duration) ease, filter var(--app-hover-duration) ease;
}
html[data-ui-interaction] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .active-song-context-actions button, .primary-btn, .primary-button, .secondary-button, .outline-btn, .ghost-btn, .icon-btn, .theme-trigger, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, [data-app-menu-trigger], .desktop-global-tools button, .top-actions button):hover:not(:disabled),
html[data-ui-interaction] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .active-song-context-actions button, .primary-btn, .primary-button, .secondary-button, .outline-btn, .ghost-btn, .icon-btn, .theme-trigger, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, [data-app-menu-trigger], .desktop-global-tools button, .top-actions button):focus-visible {
  transform: var(--app-hover-transform);
  border-color: var(--app-hover-border);
  box-shadow: var(--app-hover-shadow);
  filter: var(--app-hover-filter);
}
html[data-ui-interaction] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card):hover {
  transform: var(--app-hover-card-transform);
}
html[data-ui-interaction="quiet"] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card):hover {
  background: var(--state-hover);
}
html[data-ui-interaction="spotlight"] :is(.workspace-hub-card, .workspace-hub-continue) {
  overflow: hidden;
}
html[data-ui-interaction="spotlight"] :is(.workspace-hub-card, .workspace-hub-continue):is(:hover, :focus-visible)::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(110deg, transparent 18%, color-mix(in srgb, var(--app-highlight) 76%, transparent) 50%, transparent 82%);
  content: '';
  pointer-events: none;
  animation: app-hover-sheen 720ms ease forwards;
}
@keyframes app-hover-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
html[data-ui-click] :is(button, a, [role="button"], .workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card)[data-click-feedback-active] {
  transition: none;
}
html[data-ui-click] [data-click-feedback="press"][data-click-feedback-active] {
  animation: app-click-press 560ms cubic-bezier(.2, .9, .25, 1.2) both;
}
/* Fixed/absolute edge tabs must not inherit press transforms — those animations
   replace translateY(-50%) centering and make the control dodge the pointer. */
html[data-ui-click] :is(.sidebar-collapse-handle, .practice-secondary-collapse-handle),
html[data-ui-click] :is(.sidebar-collapse-handle, .practice-secondary-collapse-handle)[data-click-feedback-active] {
  animation: none !important;
  filter: none;
}
html[data-ui-click] [data-click-feedback="flash"][data-click-feedback-active] {
  animation: app-click-flash 720ms ease-out both;
}
html[data-ui-click] [data-click-feedback="ripple"] {
  position: relative;
  overflow: hidden;
}
html[data-ui-click] [data-click-feedback="ripple"][data-click-feedback-active]::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--app-accent) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-accent) 22%, transparent);
  content: '';
  pointer-events: none;
  animation: app-click-ripple 760ms ease-out both;
}
@keyframes app-click-press {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(3px) scale(.95); box-shadow: inset 0 3px 9px color-mix(in srgb, var(--app-shadow) 62%, transparent), 0 0 0 3px color-mix(in srgb, var(--app-accent) 24%, transparent); }
  66% { transform: translateY(-1px) scale(1.02); box-shadow: var(--app-control-shadow); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes app-click-flash {
  0% { box-shadow: var(--app-control-shadow); filter: brightness(1); }
  32% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--app-accent) 38%, transparent), 0 0 44px color-mix(in srgb, var(--app-accent) 72%, transparent); filter: brightness(1.24) saturate(1.12); }
  100% { box-shadow: var(--app-control-shadow); filter: brightness(1); }
}
@keyframes app-click-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(32); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-interaction] :is(.workspace-hub-card, .workspace-hub-continue, .workspace-hub-tools nav button, .module-nav-item, .shell-nav-item, .active-song-context-actions button, .primary-btn, .primary-button, .secondary-button, .outline-btn, .ghost-btn, .icon-btn, .theme-trigger, .audio-row, .library-item, .library-row, .version-card, .guide-step, .model-card, .style-option-list button, .interaction-option-list button, .click-option-list button, .click-preview-button, [data-app-menu-trigger], .desktop-global-tools button, .top-actions button) {
    transition: none;
  }
  html[data-ui-interaction="spotlight"] :is(.workspace-hub-card, .workspace-hub-continue):is(:hover, :focus-visible)::after {
    animation: none;
  }
  html[data-ui-click] [data-click-feedback-active] {
    animation: none;
    transform: none;
  }
}

/* Song library actions stay in a single viewport-level menu. This keeps a
   long list from painting over an opened row menu and makes the workspace
   return path visible without relying on the sidebar. */
body[data-shell-surface="library"] #libraryView .library-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
body[data-shell-surface="library"] #libraryView .library-back-workspace,
body[data-shell-surface="library"] #libraryView .library-action-more {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--app-line);
  border-radius: var(--control-radius);
  background: var(--button-secondary-bg);
  color: var(--app-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
body[data-shell-surface="library"] #libraryView .library-back-workspace:hover,
body[data-shell-surface="library"] #libraryView .library-action-more:hover,
body[data-shell-surface="library"] #libraryView .library-action-more[aria-expanded="true"] {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
  color: var(--app-accent);
}
body[data-shell-surface="library"] #libraryView .library-more-menu {
  position: fixed;
  top: var(--library-menu-top, -9999px);
  left: var(--library-menu-left, -9999px);
  z-index: 120;
  display: grid;
  min-width: 176px;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--panel-radius);
  background: var(--app-elevated);
  box-shadow: var(--app-popover-shadow);
}
body[data-shell-surface="library"] #libraryView .library-more-menu[hidden] { display: none; }
body[data-shell-surface="library"] #libraryView .library-more-menu button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--app-text);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
body[data-shell-surface="library"] #libraryView .library-more-menu button:hover,
body[data-shell-surface="library"] #libraryView .library-more-menu button:focus-visible {
  border-color: var(--app-line);
  background: var(--state-hover);
}
body[data-shell-surface="library"] #libraryView .library-more-menu .library-action-delete:hover,
body[data-shell-surface="library"] #libraryView .library-more-menu .library-action-delete:focus-visible {
  border-color: var(--state-danger-line);
  background: var(--state-danger-bg);
  color: var(--state-danger-text);
}
@media (max-width: 820px) {
  body[data-shell-surface="library"] #libraryView .library-header-actions { width: 100%; justify-content: flex-start; }
  body[data-shell-surface="library"] #libraryView .library-more-menu { min-width: 164px; }
}
@media (max-width: 700px) {
  .lyric-remix-entry-progress { width: 100%; }
  .lyric-remix-entry-progress > span { flex: 1; }
  .lyric-remix-entry-layout { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-entry-focus { min-height: 320px; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lyric-remix-entry-symbol { width: 112px; height: 112px; margin: 0 auto; }
  .lyric-remix-entry-checklist { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-entry-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-entry-primary,
  .lyric-remix-entry-secondary { width: 100%; justify-content: space-between; }
  .lyric-remix-ai-layout { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-ai-result { min-height: 0; }
  .lyric-remix-ai-result-head { flex-direction: column; align-items: flex-start; }
  .lyric-remix-ai-result-head output { text-align: left; }
  .lyric-remix-ai-stage-head { align-items: flex-start; flex-direction: column; }
  .lyric-remix-ai-stage-head-tools { width: 100%; justify-content: space-between; }
  .lyric-remix-ai-result-actions { flex-direction: column; align-items: stretch; }
  .lyric-remix-ai-apply { width: 100%; }
  .lyric-remix-ai-query-history > div { grid-template-columns: minmax(0, 1fr); }
  .lyric-remix-ai-chart-head { align-items: flex-start; flex-direction: column; }
  .lyric-remix-ai-chart-head > button { align-self: flex-start; }
  .lyric-remix-ai-inspiration-row { grid-template-columns: 30px minmax(0, 1fr); }
  .lyric-remix-ai-inspiration-row i { grid-column: 2; justify-self: start; }
}

/* Song properties use a compact two-card composition so the form reads as a
   profile editor instead of leaving the hidden lyrics column as empty space. */
.metadata-grid-head,
.form-section-heading {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--app-line);
}
.metadata-grid-head {
  grid-column: 1 / -1;
  padding: 0 0 12px;
}
.metadata-grid-head > div,
.form-section-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.metadata-grid-head span,
.form-section-heading span {
  color: var(--app-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.metadata-grid-head strong,
.form-section-heading strong {
  color: var(--app-text);
  font-size: 15px;
  font-weight: 800;
}
.metadata-grid-head small,
.form-section-heading > small {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metadata-grid .analyze-btn {
  min-height: 34px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--button-accent-border);
  border-radius: var(--control-radius);
  background: var(--button-accent-bg);
  color: var(--button-accent-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.metadata-grid .analyze-btn:hover,
.metadata-grid .analyze-btn:focus-visible {
  background: var(--button-secondary-bg-hover);
  color: var(--app-accent);
}
.project-modal.is-properties-mode {
  width: min(1120px, calc(100vw - 32px));
}
.project-modal.is-properties-mode .project-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: 16px;
}
.project-modal.is-properties-mode .project-modal-body > .project-title-field {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--app-accent) 36%, var(--app-line));
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-panel-2));
}
.project-modal.is-properties-mode .project-modal-body > .project-title-field > span {
  color: var(--app-accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.project-modal.is-properties-mode .project-modal-body > .project-title-field input {
  min-height: 46px;
  border-color: color-mix(in srgb, var(--app-accent) 30%, var(--control-border));
  border-radius: var(--control-radius);
  background: var(--control-bg);
  color: var(--control-text);
  font-size: 17px;
  font-weight: 750;
}
.project-modal.is-properties-mode .project-modal-body > label:has(#newProjectPrompt) {
  display: none;
}
.project-modal.is-properties-mode .project-modal-body > #projectMetaFields,
.project-modal.is-properties-mode .project-modal-body > .translation-grid {
  min-width: 0;
  align-self: start;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--app-panel-2) 78%, var(--app-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--app-shadow) 28%, transparent);
}
.project-modal.is-properties-mode .project-modal-body > #projectMetaFields {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 0;
}
.project-modal.is-properties-mode .project-modal-body > .translation-grid {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.project-modal.is-properties-mode .metadata-grid-head,
.project-modal.is-properties-mode .form-section-heading {
  padding-bottom: 11px;
}
.project-modal.is-properties-mode #projectMetaFields > label,
.project-modal.is-properties-mode .translation-grid > label {
  min-width: 0;
  gap: 6px;
  margin: 0;
}
.project-modal.is-properties-mode #projectMetaFields > label > :is(input, select),
.project-modal.is-properties-mode .translation-grid textarea {
  width: 100%;
  min-width: 0;
  border-radius: var(--control-radius);
}
.project-modal.is-properties-mode #projectMetaFields > label > :is(input, select) {
  min-height: 40px;
  padding-inline: 10px;
}
.project-modal.is-properties-mode .translation-grid textarea {
  min-height: clamp(124px, 16vh, 168px);
  resize: vertical;
}
.project-modal.is-properties-mode #projectMetaFields .metadata-wide {
  grid-column: 1 / -1;
}
@media (max-width: 820px) {
  .project-modal.is-properties-mode .project-modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  .project-modal.is-properties-mode .project-modal-body > #projectMetaFields,
  .project-modal.is-properties-mode .project-modal-body > .translation-grid {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  .project-modal.is-properties-mode .project-modal-body > .project-title-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .project-modal.is-properties-mode .project-modal-body > #projectMetaFields,
  .project-modal.is-properties-mode .project-modal-body > .translation-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 13px;
  }
  .project-modal.is-properties-mode #projectMetaFields .metadata-wide {
    grid-column: 1;
  }
  .metadata-grid-head,
  .form-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .metadata-grid .analyze-btn {
    width: 100%;
  }
}

/* Shared lyric content-safety feedback. Keep the warning adjacent to the
   editor so the first invalid field is actionable in every supported theme. */
.content-safety-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid var(--status-danger-border);
  border-left-width: 3px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--status-danger-bg) 78%, var(--app-panel));
  color: var(--status-danger-text);
  font-size: 12px;
  line-height: 1.5;
}
.content-safety-feedback[hidden] { display: none !important; }
.content-safety-feedback > span { flex: 1 1 260px; min-width: 0; }
.content-safety-feedback__locate {
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--status-danger-border);
  border-radius: 6px;
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
  font-size: 12px;
  line-height: 1.3;
}
.content-safety-feedback__locate:hover,
.content-safety-feedback__locate:focus-visible {
  border-color: var(--status-danger-text);
  background: color-mix(in srgb, var(--status-danger-bg) 84%, var(--status-danger-text));
}
:is(input, textarea, select, [contenteditable="true"])[data-content-safety-state="error"] {
  border-color: var(--status-danger-border) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-danger-text) 16%, transparent);
}

/* User-authored interface ink. The picker stores one color, then derives the
 * muted/faint hierarchy from it while leaving lyric roots on their theme ink. */
html[data-ui-text-color="custom"] body {
  --app-text: var(--app-ui-text-color);
  --app-text-muted: color-mix(in srgb, var(--app-ui-text-color) 72%, var(--app-panel));
  --app-muted: color-mix(in srgb, var(--app-ui-text-color) 72%, var(--app-panel));
  --app-faint: color-mix(in srgb, var(--app-ui-text-color) 48%, var(--app-panel));
  --app-accent-readable: color-mix(in srgb, var(--app-accent) 78%, var(--app-ui-text-color));
  --app-accent-ink: var(--app-ui-text-color);
  --app-on-warm: var(--app-ui-text-color);
  --text: var(--app-text);
  --ink: var(--app-text);
  --muted: var(--app-muted);
  --faint: var(--app-faint);
  --color-foreground: var(--app-text);
  --color-foreground-muted: var(--app-muted);
  --color-primary-readable: var(--app-ui-text-color);
  --control-text: var(--app-text);
  --control-placeholder: var(--app-faint);
  --shell-on-accent: var(--app-ui-text-color);
  --shell-on-accent-soft: var(--app-ui-text-color);
  --ai-text: var(--app-text);
  --ai-muted: var(--app-muted);
  --ai-faint: var(--app-faint);
  --ai-active-text: var(--app-ui-text-color);
  --ai-code-text: color-mix(in srgb, var(--app-accent) 80%, var(--app-ui-text-color));
  --button-secondary-text: var(--app-text);
  --button-accent-text: var(--app-ui-text-color);
  --status-success-text: color-mix(in srgb, var(--app-accent) 82%, var(--app-ui-text-color));
  --status-warning-text: color-mix(in srgb, var(--app-warm) 82%, var(--app-ui-text-color));
  --status-danger-text: color-mix(in srgb, var(--app-coral) 82%, var(--app-ui-text-color));
  --status-info-text: color-mix(in srgb, var(--app-secondary) 82%, var(--app-ui-text-color));
  --karaoke-text: var(--app-text);
  --karaoke-muted: var(--app-muted);
  --karaoke-faint: var(--app-faint);
  --practice-text: var(--app-text);
  --practice-muted: var(--app-muted);
  color: var(--app-text);
}

html[data-ui-text-color="custom"] body :is(
  #lyricsContent .lyric-block,
  #lyricsContent .lyric-display,
  #lyricsContent .lyrics-whole-editor,
  #newProjectPrompt,
  .lyrics-line,
  .player-lyrics-line,
  .fullscreen-lyrics p,
  .karaoke-line,
  .practice-lyrics,
  .practice-beat-lyric-char,
  .practice-pitch-lyric-char,
  .practice-halfbeat-lyric-copy,
  .practice-halfbeat-lyric-char,
  .lyric-remix-line-text
) {
  --app-text: var(--app-theme-text);
  --app-text-muted: var(--app-theme-muted);
  --app-muted: var(--app-theme-muted);
  --app-faint: var(--app-theme-faint);
  --app-accent-readable: var(--app-theme-accent-readable);
  --app-accent-ink: var(--app-theme-text);
  --app-on-warm: var(--app-theme-text);
  --text: var(--app-theme-text);
  --ink: var(--app-theme-text);
  --muted: var(--app-theme-muted);
  --faint: var(--app-theme-faint);
  --color-foreground: var(--app-theme-text);
  --color-foreground-muted: var(--app-theme-muted);
  --color-primary-readable: var(--app-theme-accent-readable);
  --control-text: var(--app-theme-text);
  --control-placeholder: var(--app-theme-faint);
  --shell-on-accent: var(--app-theme-text);
  --shell-on-accent-soft: var(--app-theme-text);
  --ai-text: var(--app-theme-text);
  --ai-muted: var(--app-theme-muted);
  --ai-faint: var(--app-theme-faint);
  --ai-active-text: var(--app-theme-accent-readable);
  --button-secondary-text: var(--app-theme-text);
  --button-accent-text: var(--app-theme-accent-readable);
  --karaoke-text: var(--app-theme-text);
  --karaoke-muted: var(--app-theme-muted);
  --karaoke-faint: var(--app-theme-faint);
  --practice-text: var(--app-theme-text);
  --practice-muted: var(--app-theme-muted);
  color: var(--app-theme-text);
}

/* ──────────────────────────────────────────────────────────────────────────
 * SongRealm stage direction
 *
 * The workspace is a music-production surface, not a collection of unrelated
 * panels. Keep the canvas quiet, give the current stage one strong silhouette,
 * and reserve the accent for progress, focus, and the next action. All values
 * resolve through the global semantic palette so the direction follows every
 * supported theme.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --app-stage-canvas: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--app-accent) 9%, transparent), transparent 30%), radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--app-secondary) 7%, transparent), transparent 28%), var(--app-bg);
  --app-stage-hero: linear-gradient(135deg, color-mix(in srgb, var(--app-accent-soft) 34%, var(--app-panel)), color-mix(in srgb, var(--app-panel-2) 76%, var(--app-panel)) 58%, var(--app-panel));
  --app-stage-card: linear-gradient(145deg, color-mix(in srgb, var(--app-panel-2) 72%, var(--app-panel)), color-mix(in srgb, var(--app-panel) 94%, var(--app-bg)));
  --app-stage-control: color-mix(in srgb, var(--app-panel-2) 86%, var(--app-bg));
  --app-stage-border: color-mix(in srgb, var(--app-accent) 26%, var(--app-line));
  --app-stage-border-strong: color-mix(in srgb, var(--app-accent) 52%, var(--app-line));
  --app-stage-shadow: 0 22px 60px color-mix(in srgb, var(--app-shadow) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 72%, transparent);
  --app-stage-radius: 18px;
  --app-stage-control-radius: 11px;
}

html[data-ui-surface] .main-content {
  background: var(--app-stage-canvas);
}

html[data-ui-surface] .sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--app-sidebar) 92%, var(--app-accent-soft)), var(--app-sidebar) 34%, color-mix(in srgb, var(--app-sidebar) 96%, var(--app-bg)));
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--app-accent) 12%, var(--app-line));
}

html[data-ui-surface] .shell-nav {
  gap: 8px;
  padding-bottom: 10px;
}

html[data-ui-surface] .shell-nav-item {
  min-height: 48px;
  border-color: color-mix(in srgb, var(--app-line) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-panel) 42%, transparent);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-ui-surface] .shell-nav-item:hover,
html[data-ui-surface] .shell-nav-item:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 46%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent-soft) 40%, var(--app-panel));
  transform: translateX(2px);
}

html[data-ui-surface] .shell-nav-item.active {
  border-color: var(--app-stage-border-strong) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--app-accent-soft) 78%, var(--app-panel)), color-mix(in srgb, var(--app-accent-soft) 24%, var(--app-panel))) !important;
  box-shadow: inset 3px 0 0 var(--app-accent), 0 12px 26px color-mix(in srgb, var(--app-shadow) 24%, transparent);
}

html[data-ui-surface] .module-nav {
  gap: 7px;
}

html[data-ui-surface] .module-nav .module-nav-item {
  min-height: 64px;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  padding: 8px 10px;
  border-color: color-mix(in srgb, var(--app-line) 70%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--app-panel) 26%, transparent);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html[data-ui-surface] .module-nav .module-nav-item:hover,
html[data-ui-surface] .module-nav .module-nav-item:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-panel));
  transform: translateX(2px);
}

html[data-ui-surface] .module-nav .module-nav-item.active {
  border-color: var(--app-stage-border-strong);
  background: linear-gradient(100deg, color-mix(in srgb, var(--app-accent-soft) 76%, var(--app-panel)), color-mix(in srgb, var(--app-accent-soft) 18%, var(--app-panel)));
  box-shadow: inset 3px 0 0 var(--app-accent), 0 12px 24px color-mix(in srgb, var(--app-shadow) 22%, transparent);
}

html[data-ui-surface] .module-nav .module-nav-item .module-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--app-stage-control);
  color: var(--app-faint);
  font-size: 12px;
}

html[data-ui-surface] .module-nav .module-nav-item.active .module-index {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: var(--app-accent-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 12%, transparent);
}

html[data-ui-surface] .module-nav-item strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

html[data-ui-surface] .module-nav-item small {
  font-size: 12px;
  line-height: 1.35;
}

html[data-ui-surface] .active-song-context {
  min-height: 48px;
  padding: 6px 8px;
  border-color: var(--app-stage-border-strong);
  border-radius: 14px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--app-accent-soft) 64%, var(--app-panel)), color-mix(in srgb, var(--app-panel-2) 78%, var(--app-panel)));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--app-shadow) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 74%, transparent);
}

html[data-ui-surface] .active-song-context-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--app-accent) 12%, transparent);
}

html[data-ui-surface] .active-song-context-actions button {
  min-height: 34px;
  border-radius: 10px;
}

html[data-ui-surface] .workspace-context {
  min-height: 158px;
  align-content: center;
  margin: 14px 0 22px;
  padding: 28px 32px 30px;
  border: 1px solid var(--app-stage-border);
  border-radius: var(--app-stage-radius);
  background: var(--app-stage-hero);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .workspace-context .eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
}

html[data-ui-surface] .workspace-context h1 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

html[data-ui-surface] .workspace-context p {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.65;
}

html[data-ui-surface] .workspace-context.has-practice-entry {
  min-height: 132px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

html[data-ui-surface] .workspace-context-actions {
  gap: 10px;
}

html[data-ui-surface] .workspace-primary-action,
html[data-ui-surface] .creator-guide-primary,
html[data-ui-surface] .release-export-primary,
html[data-ui-surface] .workspace-hub-continue {
  border-radius: var(--app-stage-control-radius);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--app-accent) 17%, transparent);
}

html[data-ui-surface] .creator-guide {
  width: min(1440px, 100%);
  margin: 22px auto 72px;
  gap: 22px;
}

html[data-ui-surface] .creator-guide-head {
  padding: 0 4px 2px;
}

html[data-ui-surface] .creator-guide-step > span {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--app-accent) 10%, transparent);
}

html[data-ui-surface] .creator-guide-step strong {
  font-size: 18px;
}

html[data-ui-surface] .creator-guide-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr);
  gap: 22px;
}

html[data-ui-surface] .creator-guide-focus,
html[data-ui-surface] .creator-guide-checklist {
  border-color: var(--app-stage-border);
  border-radius: 22px;
  background: var(--app-stage-card);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .creator-guide-focus {
  min-height: 474px;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 48px;
  padding: 58px;
  background: radial-gradient(circle at 15% 44%, color-mix(in srgb, var(--app-accent) 19%, transparent), transparent 32%), var(--app-stage-card);
}

html[data-ui-surface] .creator-guide-symbol {
  width: 168px;
  height: 168px;
  border-radius: 44px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 86%, var(--app-panel)), color-mix(in srgb, var(--app-panel-2) 78%, var(--app-panel)));
  box-shadow: 0 28px 64px color-mix(in srgb, var(--app-accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--app-highlight) 70%, transparent);
}

html[data-ui-surface] .creator-guide-symbol span {
  font-size: 72px;
}

html[data-ui-surface] .creator-guide-copy h2 {
  margin-top: 20px;
  font-size: clamp(34px, 4.1vw, 56px);
  letter-spacing: -.055em;
}

html[data-ui-surface] .creator-guide-copy > p {
  max-width: 660px;
  font-size: 15px;
  line-height: 1.75;
}

html[data-ui-surface] .creator-guide-actions {
  gap: 12px;
  margin-top: 32px;
}

html[data-ui-surface] .creator-guide-primary,
html[data-ui-surface] .creator-guide-secondary,
html[data-ui-surface] .creator-guide-record {
  min-height: 54px;
  border-radius: var(--app-stage-control-radius);
}

html[data-ui-surface] .creator-guide-record {
  background: color-mix(in srgb, var(--app-accent-soft) 74%, var(--app-panel));
}

html[data-ui-surface] .creator-guide-checklist {
  align-content: start;
  gap: 12px;
  padding: 24px;
}

html[data-ui-surface] .creator-guide-checklist-head {
  padding-bottom: 10px;
  border-bottom-color: var(--app-line);
}

html[data-ui-surface] .creator-guide-checklist-head span {
  font-size: 13px;
}

html[data-ui-surface] .creator-guide-checklist-head strong {
  font-size: 17px;
}

html[data-ui-surface] .creator-guide-checklist > button {
  min-height: 82px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--app-line) 84%, transparent);
  border-radius: 14px;
  background: var(--app-stage-control);
}

html[data-ui-surface] .creator-guide-checklist > button:hover,
html[data-ui-surface] .creator-guide-checklist > button:focus-visible {
  border-color: var(--app-stage-border-strong);
  background: color-mix(in srgb, var(--app-accent-soft) 28%, var(--app-stage-control));
  box-shadow: inset 3px 0 0 var(--app-accent);
}

html[data-ui-surface] .creator-guide-checklist > button i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--app-accent-soft);
  color: var(--app-accent-readable);
}

html[data-ui-surface] .creator-guide-checklist-alt,
html[data-ui-surface] .creator-guide-next {
  border-color: color-mix(in srgb, var(--app-line) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-bg) 36%, var(--app-panel));
}

html[data-ui-surface] .creator-guide-checklist-alt {
  padding: 12px 14px;
}

html[data-ui-surface] .creator-guide-next {
  margin-top: 4px;
  padding: 16px 14px;
}

html[data-ui-surface] .creator-guide-footer {
  padding-top: 16px;
  border-top-color: var(--app-line);
  font-size: 13px;
}

html[data-ui-surface] .ai-tools-panel {
  border-color: var(--app-stage-border);
  border-radius: 22px;
  background: var(--app-stage-card);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .ai-tools-panel.ai-entry-open {
  min-height: 520px;
  margin: 12px 0 0;
  padding: clamp(28px, 4vw, 54px);
  border-color: var(--app-stage-border);
  border-radius: 22px;
  background: var(--app-stage-hero);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .ai-writing-entry-copy {
  max-width: 840px;
  margin-bottom: 36px;
}

html[data-ui-surface] .ai-writing-entry-copy > span {
  letter-spacing: .16em;
}

html[data-ui-surface] .ai-writing-entry-copy h2 {
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -.055em;
}

html[data-ui-surface] .ai-writing-entry-copy p {
  font-size: 15px;
  line-height: 1.7;
}

html[data-ui-surface] .ai-writing-entry-options {
  width: min(1080px, 100%);
  gap: 18px;
}

html[data-ui-surface] .ai-writing-entry-options > button {
  min-height: 270px;
  padding: 34px;
  border-color: color-mix(in srgb, var(--app-line) 84%, transparent);
  border-radius: 18px;
  background: var(--app-stage-control);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--app-shadow) 28%, transparent);
}

html[data-ui-surface] .ai-writing-entry-options > button:hover,
html[data-ui-surface] .ai-writing-entry-options > button:focus-visible {
  border-color: var(--app-stage-border-strong);
  background: color-mix(in srgb, var(--app-accent-soft) 34%, var(--app-stage-control));
  box-shadow: 0 22px 46px color-mix(in srgb, var(--app-shadow) 38%, transparent), inset 3px 0 0 var(--app-accent);
  transform: translateY(-4px);
}

html[data-ui-surface] .ai-writing-entry-options > button strong {
  font-size: clamp(26px, 2.5vw, 34px);
  letter-spacing: -.04em;
}

html[data-ui-surface] .ai-writing-entry-options > button span {
  font-size: 15px;
  line-height: 1.7;
}

html[data-ui-surface] .ai-writing-entry-options > button i {
  margin-top: 20px;
  border-radius: 10px;
}

html[data-ui-surface] .writing-workspace-shell {
  gap: 22px;
}

html[data-ui-surface] .songwriting-panel {
  border-color: var(--app-stage-border);
  border-radius: 18px;
  background: var(--app-stage-card);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .post-workspace-header {
  margin: 12px 0 22px;
  padding: 24px 28px;
  border: 1px solid var(--app-stage-border);
  border-radius: var(--app-stage-radius);
  background: var(--app-stage-hero);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .post-workspace-header > div strong {
  font-size: 16px;
}

html[data-ui-surface] .post-workspace-tabs {
  gap: 7px;
  padding: 6px;
  border-color: color-mix(in srgb, var(--app-line) 86%, transparent);
  border-radius: 14px;
  background: var(--app-stage-control);
}

html[data-ui-surface] .post-workspace-tabs button {
  min-height: 46px;
  border-radius: 10px;
  font-size: 13px;
}

html[data-ui-surface] .post-workspace-tabs button[aria-selected="true"] {
  border-color: var(--app-stage-border-strong);
  background: var(--app-accent-soft);
  color: var(--app-accent-readable);
  box-shadow: inset 3px 0 0 var(--app-accent);
}

html[data-ui-surface] .post-overview-panel {
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border-color: var(--app-stage-border);
  border-radius: 22px;
  background: var(--app-stage-card);
  box-shadow: var(--app-stage-shadow);
}

html[data-ui-surface] .post-overview-panel h3 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.05em;
}

html[data-ui-surface] .post-overview-status {
  border-color: color-mix(in srgb, var(--app-line) 86%, transparent);
  border-radius: 14px;
  background: var(--app-stage-control);
}

html[data-ui-surface] .post-overview-status > span {
  padding: 16px 18px;
}

html[data-ui-surface] .post-overview-status strong {
  font-size: 14px;
}

html[data-ui-surface] .post-overview-cards {
  gap: 16px;
}

html[data-ui-surface] .post-overview-cards button {
  min-height: 158px;
  padding: 22px 22px 20px 72px;
  border-color: color-mix(in srgb, var(--app-line) 86%, transparent);
  border-radius: 16px;
  background: var(--app-stage-control);
}

html[data-ui-surface] .post-overview-cards button:hover {
  border-color: var(--app-stage-border-strong);
  background: color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-stage-control));
  box-shadow: inset 3px 0 0 var(--app-accent), 0 16px 34px color-mix(in srgb, var(--app-shadow) 30%, transparent);
}

html[data-ui-surface] .post-card-index {
  top: 22px;
  left: 22px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--app-accent-soft);
  color: var(--app-accent-readable);
}

html[data-ui-surface] .post-overview-cards strong {
  font-size: clamp(20px, 1.6vw, 25px);
}

html[data-ui-surface] .delivery-steps {
  gap: 10px;
  margin-top: 18px;
}

html[data-ui-surface] .delivery-steps button {
  min-height: 78px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--app-line) 84%, transparent);
  border-radius: 13px;
  background: var(--app-stage-control);
}

html[data-ui-surface] .delivery-steps button > span {
  width: 40px;
  height: 34px;
  border-radius: 10px;
  background: var(--app-accent-soft);
  color: var(--app-accent-readable);
}

html[data-ui-surface] .delivery-steps button strong {
  font-size: 12px;
}

html[data-ui-surface] .release-source-card,
html[data-ui-surface] .release-profile-section,
html[data-ui-surface] .release-vocal-chain,
html[data-ui-surface] .release-export-section {
  border-color: var(--app-stage-border);
  border-radius: 16px;
  background: var(--app-stage-card);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--app-shadow) 26%, transparent);
}

html[data-ui-surface] :is(.workspace-primary-action, .creator-guide-primary, .creator-guide-secondary, .creator-guide-record, .post-workspace-tabs button, .delivery-steps button, .ai-writing-entry-options > button, .module-nav-item, .shell-nav-item):focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  html[data-ui-surface] .creator-guide-focus {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 30px;
    padding: 38px;
  }
  html[data-ui-surface] .creator-guide-symbol {
    width: 136px;
    height: 136px;
  }
  html[data-ui-surface] .creator-guide-symbol span { font-size: 60px; }
  html[data-ui-surface] .creator-guide-copy h2 { font-size: clamp(30px, 4vw, 46px); }
}

@media (max-width: 860px) {
  html[data-ui-surface] .workspace-context,
  html[data-ui-surface] .post-workspace-header { padding: 22px; }
  html[data-ui-surface] .workspace-context.has-practice-entry { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .creator-guide-layout { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .creator-guide-focus { min-height: 420px; }
  html[data-ui-surface] .creator-guide-checklist { grid-row: 2; }
  html[data-ui-surface] .post-workspace-header { grid-template-columns: minmax(0, 1fr); align-items: start; }
  html[data-ui-surface] .post-overview-panel > header { align-items: start; flex-direction: column; }
  html[data-ui-surface] .post-overview-panel > header p { max-width: none; text-align: left; }
}

@media (max-width: 700px) {
  html[data-ui-surface] .workspace-context { min-height: 132px; margin: 10px 0 16px; padding: 20px; }
  html[data-ui-surface] .workspace-context h1 { font-size: clamp(28px, 9vw, 38px); }
  html[data-ui-surface] .workspace-context p { font-size: 14px; }
  html[data-ui-surface] .creator-guide { margin-top: 14px; }
  html[data-ui-surface] .creator-guide-focus { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  html[data-ui-surface] .creator-guide-symbol { width: 104px; height: 104px; border-radius: 30px; }
  html[data-ui-surface] .creator-guide-symbol span { font-size: 48px; }
  html[data-ui-surface] .creator-guide-copy h2 { font-size: clamp(30px, 9vw, 42px); }
  html[data-ui-surface] .creator-guide-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .creator-guide-primary,
  html[data-ui-surface] .creator-guide-secondary,
  html[data-ui-surface] .creator-guide-record { width: 100%; }
  html[data-ui-surface] .ai-tools-panel.ai-entry-open { padding: 26px 20px; }
  html[data-ui-surface] .ai-writing-entry-options { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .post-workspace-header { padding: 20px; }
  html[data-ui-surface] .post-workspace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-ui-surface] .post-overview-status { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .post-overview-status > span { border-top: 1px solid var(--app-line); border-left: 0; }
  html[data-ui-surface] .post-overview-status > span:first-child { border-top: 0; }
  html[data-ui-surface] .post-overview-cards { grid-template-columns: minmax(0, 1fr); }
  html[data-ui-surface] .delivery-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 魔改第 3 步是共享弹层：底下保留第 2 步 AI 配置，编辑层独立滚动。 */
.lyric-remix-manual-input-btn {
  border-color: color-mix(in srgb, var(--app-secondary) 54%, var(--app-line));
  color: var(--app-secondary);
}
.lyric-remix-manual-input-btn:hover,
.lyric-remix-manual-input-btn:focus-visible {
  border-color: var(--app-secondary);
  background: color-mix(in srgb, var(--app-secondary) 12%, var(--button-secondary-bg));
  color: var(--app-text);
}
body.lyric-remix-review-overlay { overflow: hidden; }
.lyric-remix-review-backdrop { z-index: var(--app-layer-dialog); }
.lyric-remix-review-dialog {
  width: min(var(--app-dialog-width-wide), calc(100vw - var(--app-dialog-viewport-gap)));
  height: auto;
  min-height: min(460px, calc(100dvh - var(--app-dialog-viewport-gap)));
  max-height: calc(100dvh - var(--app-dialog-viewport-gap));
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.lyric-remix-review-dialog > .lyric-remix-compare-shortcuts.app-dialog__header {
  min-height: 52px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.lyric-remix-review-dialog > .lyric-remix-compare-shortcuts .lyric-remix-shortcut-btn {
  min-height: 34px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.lyric-remix-review-dialog > .lyric-remix-compare-shortcuts > .lyric-remix-shortcut-btn.is-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 34px;
  min-width: 0;
  padding: 0 12px;
  margin-left: auto;
}
.lyric-remix-review-dialog > .lyric-remix-compare-body.app-dialog__body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}
.lyric-remix-review-dialog > .lyric-remix-compare-body > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.lyric-remix-review-dialog > .lyric-remix-compare-body > header > div { display: grid; gap: 5px; }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header strong { color: var(--app-text); font-size: 13px; }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header small { color: var(--app-muted); font-size: 12px; }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header small[data-state="success"] { color: var(--status-success-text); }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header small[data-state="error"] { color: var(--status-danger-text); }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header small[data-state="warning"] { color: var(--status-warning-text); }
.lyric-remix-review-dialog > .lyric-remix-compare-body > header > span { color: var(--app-faint); font-size: 12px; white-space: nowrap; }
.lyric-remix-compare-heading-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.lyric-remix-compare-heading-actions > span { color: var(--app-faint); font-size: 12px; white-space: nowrap; }
.lyric-remix-compare-heading-actions > button,
.lyric-remix-candidate-toolbar button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 7px;
  background: var(--button-secondary-bg);
  color: var(--app-text);
  font-size: 12px;
  white-space: nowrap;
}
.lyric-remix-compare-heading-actions > button:hover,
.lyric-remix-candidate-toolbar button:hover { border-color: var(--app-secondary); color: var(--app-secondary); }
.lyric-remix-candidate-toolbar {
  display: flex;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-panel);
}
.lyric-remix-candidate-toolbar > label { display: grid; min-width: 190px; gap: 5px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-candidate-toolbar > label > select { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--app-line); border-radius: 7px; background: var(--control-bg); color: var(--app-text); font-size: 12px; }
.lyric-remix-candidate-toolbar > .lyric-remix-pane-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; overflow-x: auto; scrollbar-width: thin; }
.lyric-remix-candidate-toolbar button.is-primary { border-color: var(--app-accent); background: var(--app-accent); color: var(--app-accent-ink); font-weight: 700; }
.lyric-remix-candidate-toolbar button.is-primary:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 84%, var(--app-text)); color: var(--app-accent-ink); }
.lyric-remix-candidate-toolbar button.is-new-version { border-color: color-mix(in srgb, var(--app-accent) 48%, var(--app-line)); color: var(--app-accent); font-weight: 700; }
.lyric-remix-candidate-toolbar button.is-new-version:hover { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent-soft) 54%, var(--button-secondary-bg)); color: var(--app-accent); }
.lyric-remix-review-dialog > .lyric-remix-compare-body > .lyric-remix-compare-grid { min-height: 0; }
.lyric-remix-review-dialog .lyric-remix-compare-scroll { max-height: min(610px, calc(100dvh - 350px)); }
.lyric-remix-review-dialog .lyric-remix-compare-pane > header { min-width: 0; }
.lyric-remix-review-dialog .lyric-remix-compare-pane > header > div,
.lyric-remix-review-dialog .lyric-remix-compare-pane > header > label { min-width: 0; }
.lyric-remix-review-dialog .lyric-remix-compare-pane.is-candidate > header { gap: 8px; }
.lyric-remix-review-dialog .lyric-remix-compare-pane.is-candidate > header > label { min-width: 150px; flex: 1 1 150px; }
.lyric-remix-review-dialog .lyric-remix-compare-pane.is-candidate > header > .lyric-remix-pane-actions {
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: thin;
}
.lyric-remix-review-dialog .lyric-remix-compare-pane.is-candidate > header > .lyric-remix-pane-actions button { flex: 0 0 auto; }
.lyric-remix-review-dialog > .lyric-remix-compare-footer.app-dialog__footer {
  min-height: 58px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.lyric-remix-review-dialog > .lyric-remix-compare-footer > span { display: inline-flex; align-items: center; gap: 5px; color: var(--app-muted); font-size: 12px; }
.lyric-remix-review-dialog > .lyric-remix-compare-footer > span:last-of-type { margin-right: auto; }
.lyric-remix-review-footer-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.lyric-remix-review-footer-actions button { min-height: 36px; font-size: 12px; white-space: nowrap; }
.lyric-remix-review-dialog > .lyric-remix-compare-footer i { width: 9px; height: 9px; border-radius: 999px; background: var(--status-success-text); }
.lyric-remix-review-dialog > .lyric-remix-compare-footer i[data-state="mismatch"] { background: var(--status-danger-text); }
.lyric-remix-review-dialog > .lyric-remix-compare-footer i[data-state="review"] { background: var(--status-warning-text); }
.lyric-remix-review-dialog[aria-hidden="true"] { visibility: hidden; }

@media (max-width: 980px) {
  .lyric-remix-review-dialog > .lyric-remix-compare-body > header { align-items: flex-start; flex-direction: column; }
  .lyric-remix-review-dialog > .lyric-remix-compare-body > header > span { white-space: normal; }
  .lyric-remix-compare-heading-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .lyric-remix-compare-heading-actions > span { white-space: normal; }
  .lyric-remix-candidate-toolbar { align-items: stretch; flex-direction: column; }
  .lyric-remix-candidate-toolbar > label { width: 100%; min-width: 0; }
  .lyric-remix-candidate-toolbar > .lyric-remix-pane-actions { width: 100%; justify-content: flex-start; }
  .lyric-remix-find-replace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lyric-remix-find-replace > strong,
  .lyric-remix-find-actions,
  .lyric-remix-find-replace > output,
  .lyric-remix-find-replace > small { grid-column: 1 / -1; }
  .lyric-remix-find-actions { justify-content: flex-start; }
  .lyric-remix-find-replace > small { text-align: left; }
  .lyric-remix-review-dialog > .lyric-remix-compare-footer.app-dialog__footer { align-items: flex-start; }
  .lyric-remix-review-footer-actions { width: 100%; margin-left: 0; }
}