/* ============================================
   the writer's block - STYLES
   ============================================
   Design System — dark brown brand + muted teal accent
   - Linen sage backgrounds
   - Muted teal accent colors
   - DM Mono + EB Garamond typography
   ============================================ */

/* ============================================
   DESIGN SYSTEM - Claude-Inspired Colors
   ============================================ */
:root {
    /* Background colors - warm olive palette (v2.29.2: #f4f0ec → #e5e4db, linen sage) */
    --primary-bg: #e5e4db;
    --secondary-bg: #ffffff;
    --tertiary-bg: #faf8f5;
    
    /* Brand color — the wordmark, New Song button, loader */
    --brand: #3d3530;

    /* Accent colors — change these 4 values to rebrand the entire app.
       --accent-rgb is the raw R,G,B for use in rgba() with alpha.
       --accent-primary is the hex for direct color use.
       Dark walnut lead + warm cream alternate on linen sage. */
    --accent-rgb: 61,53,48;
    --accent-primary: #3d3530;
    --accent-secondary: #2c2420;
    --accent-tertiary: #5a504a;
    --cream: #f0ebe4;
    
    /* Text colors */
    --text-primary: #2d2d2d;
    --text-secondary: #6b6b6b;
    --text-tertiary: #9b9b9b;
    
    /* Status colors */
    --success: #4a9b7f;
    --warning: #e8a75d;
    --error: #d47d7d;
    
    /* Border colors */
    --border-light: #e8e4df;
    --border-medium: #d4cfc7;
    --border-dark: #b8b3ab;
    
    /* Shadow system */
    --shadow-subtle: 0 1px 3px rgba(45, 45, 45, 0.06);
    --shadow-medium: 0 2px 8px rgba(45, 45, 45, 0.10);
    --shadow-large: 0 4px 16px rgba(45, 45, 45, 0.12);
    
    /* Typography */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-mono: 'Menlo', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    
    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
}

/* ============================================
   GOLDEN HOUR THEME — v2.15.29
   Warm walnut background, white cards, dark text
   ============================================ */
[data-theme="golden-hour"] {
    --primary-bg: #5a4f44;
    --secondary-bg: #ffffff;
    --tertiary-bg: #faf8f5;

    --text-primary: #1e1b18;
    --text-secondary: #3a3430;
    --text-tertiary: #6a6258;

    --border-light: #e8e4df;
    --border-medium: #d4cfc7;
    --border-dark: #b8b3ab;

    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ============================================
   DARK THEME — v2.15.29
   Warm charcoal background, lifted cards, cream text
   ============================================ */
[data-theme="dark"] {
    --primary-bg: #1a1714;
    --secondary-bg: #2a2520;
    --tertiary-bg: #242018;

    --text-primary: #c8c0b6;
    --text-secondary: #8a8078;
    --text-tertiary: #6a6260;

    --border-light: #302b26;
    --border-medium: #3a352e;
    --border-dark: #4a4540;

    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Golden hour: header sits on walnut bg, not white card */
[data-theme="golden-hour"] .mobile-header {
    background: #5a4f44;
    border-bottom-color: #6a5f54;
    color: #f0ebe5;
}
[data-theme="golden-hour"] .mobile-song-title {
    color: #f0ebe5;
}
[data-theme="golden-hour"] .mobile-back-btn,
[data-theme="golden-hour"] .mobile-menu-btn,
[data-theme="golden-hour"] .mobile-undo-btn,
[data-theme="golden-hour"] .mobile-redo-btn {
    color: rgba(240, 235, 229, 0.7);
}
/* Golden hour: review button needs light text + border on dark toolbar */
[data-theme="golden-hour"] .mobile-review-btn {
    color: rgba(240, 235, 229, 0.8);
    border-color: rgba(240, 235, 229, 0.3);
}
[data-theme="golden-hour"] .mobile-review-btn.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Golden hour: preview container outer area */
[data-theme="golden-hour"] .mobile-preview-area,
[data-theme="golden-hour"] .mobile-contextual-preview {
    background: #5a4f44;
}

/* Dark: preview container outer area */
[data-theme="dark"] .mobile-preview-area,
[data-theme="dark"] .mobile-contextual-preview {
    background: #1a1714;
}

/* Dark: header sits on charcoal bg, not card bg */
[data-theme="dark"] .mobile-header {
    background: #1a1714;
    border-bottom-color: #302b26;
    color: #c8c0b6;
}
[data-theme="dark"] .mobile-song-title {
    color: #c8c0b6;
}
[data-theme="dark"] .mobile-back-btn,
[data-theme="dark"] .mobile-menu-btn,
[data-theme="dark"] .mobile-undo-btn,
[data-theme="dark"] .mobile-redo-btn {
    color: rgba(200, 192, 182, 0.7);
}
[data-theme="dark"] .mobile-review-btn {
    color: rgba(200, 192, 182, 0.8);
    border-color: rgba(200, 192, 182, 0.25);
}
[data-theme="dark"] .mobile-review-btn.active {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Dark: menu overlay and panels */
[data-theme="dark"] .mobile-menu-panel {
    background: #2a2520;
    color: #c8c0b6;
}
[data-theme="dark"] .mobile-menu-item,
[data-theme="dark"] .mobile-toggle-name {
    color: #c8c0b6;
}
[data-theme="dark"] .mobile-toggle-desc {
    color: #8a8078;
}
[data-theme="dark"] .mobile-menu-divider {
    border-color: #302b26;
}
[data-theme="dark"] .mobile-menu-section-title {
    color: #8a8078;
}

/* Golden hour: menu panels */
[data-theme="golden-hour"] .mobile-menu-panel {
    background: #faf8f5;
}

/* (Login screen dark overrides moved below the base auth styles) */

/* Override hardcoded backgrounds for Golden Hour */
[data-theme="golden-hour"] .mobile-preview-area,
[data-theme="golden-hour"] .mobile-contextual-preview,
[data-theme="golden-hour"] .preview-content {
    background: #5a4f44 !important;
}
[data-theme="golden-hour"] .editor-container {
    background: #5a4f44;
}
[data-theme="golden-hour"] .editor-toolbar {
    background: #4e4438;
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .back-button {
    background: #5a4f44;
    border-color: #6a5f54;
    color: #f0ebe5;
}
[data-theme="golden-hour"] .song-title-input {
    /* terracotta is already readable on golden-hour toolbar bg */
    color: var(--accent-primary);
}
[data-theme="golden-hour"] .song-title-input:hover,
[data-theme="golden-hour"] .song-title-input:focus {
    background: rgba(255,255,255,0.08);
}
[data-theme="golden-hour"] .toolbar-right button {
    border-color: #6a5f54;
    background: rgba(255, 255, 255, 0.08);
    color: #e8e2da;
}
[data-theme="golden-hour"] .toolbar-right .btn-save {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
[data-theme="golden-hour"] .toolbar-right .btn-share {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
/* Golden hour: mini-btn row controls (add variation, add line, delete) */
[data-theme="golden-hour"] .mini-btn.delete {
    color: #8a7a6a;
}
[data-theme="golden-hour"] .mini-btn.delete:hover {
    background: rgba(192, 57, 43, 0.15);
    color: #e07060;
}

/* Override hardcoded backgrounds for Dark */
[data-theme="dark"] .mobile-preview-area,
[data-theme="dark"] .mobile-contextual-preview,
[data-theme="dark"] .preview-content {
    background: #1a1714 !important;
}
[data-theme="dark"] .editor-container {
    background: #1a1714;
}
[data-theme="dark"] .editor-toolbar {
    background: #242018;
    border-color: #302b26;
}
[data-theme="dark"] .back-button {
    background: #2a2520;
    border-color: #302b26;
    color: #c8c0b6;
}
[data-theme="dark"] .song-title-input {
    /* terracotta pops nicely on the dark toolbar */
    color: var(--accent-primary);
}
[data-theme="dark"] .song-title-input:hover,
[data-theme="dark"] .song-title-input:focus {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .toolbar-right button {
    border-color: #302b26;
}

/* Dark: bottom sheets and version panels */
[data-theme="dark"] .mobile-versions-panel,
[data-theme="dark"] .mobile-bottom-sheet {
    background: #2a2520;
}
[data-theme="dark"] .mobile-versions-header {
    border-color: #302b26;
}
[data-theme="dark"] .mobile-versions-title {
    color: #c8c0b6;
}

/* Dark: song row hover */
[data-theme="dark"] .song-row:hover {
    border-color: var(--accent-primary);
}

/* Golden hour: song count label above the list */
[data-theme="golden-hour"] .song-count {
    color: rgba(240, 235, 229, 0.5);
}

/* ── Golden Hour: Dashboard overrides ──────────────────────── */
/* Search input: translucent instead of white */
[data-theme="golden-hour"] .search-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6a5f54;
    color: #f0ebe5;
}
[data-theme="golden-hour"] .search-input::placeholder {
    color: rgba(240, 235, 229, 0.4);
}
[data-theme="golden-hour"] .search-input:focus {
    border-color: var(--accent-primary);
    background: rgba(255, 255, 255, 0.12);
}
/* Search icon */
[data-theme="golden-hour"] .search-icon {
    color: rgba(240, 235, 229, 0.4);
}
/* Sort button */
[data-theme="golden-hour"] .sort-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6a5f54;
    color: #e8e2da;
}
[data-theme="golden-hour"] .sort-button:hover {
    background: rgba(255, 255, 255, 0.14);
}
/* New song button (btn-primary) — keep terracotta, ensure contrast */
[data-theme="golden-hour"] .btn-primary {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
/* Song row: translucent card on walnut instead of white */
[data-theme="golden-hour"] .song-row {
    background: rgba(255, 255, 255, 0.07);
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .song-row:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent-primary);
}
/* Song row text */
[data-theme="golden-hour"] .song-row-title {
    color: #f0ebe5;
}
[data-theme="golden-hour"] .song-row-meta,
[data-theme="golden-hour"] .song-row-detail {
    color: rgba(240, 235, 229, 0.5);
}
[data-theme="golden-hour"] .song-row-theme {
    color: rgba(240, 235, 229, 0.4);
}
[data-theme="golden-hour"] .song-row-arrow {
    color: rgba(240, 235, 229, 0.3);
}
/* Song row action buttons (rename/delete) */
[data-theme="golden-hour"] .song-row-action-btn {
    color: rgba(240, 235, 229, 0.5);
}
[data-theme="golden-hour"] .song-row-action-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #f0ebe5;
}
[data-theme="golden-hour"] .song-row-action-btn.danger:hover {
    background: rgba(192, 57, 43, 0.15);
    color: #e07060;
}
/* Rename input */
[data-theme="golden-hour"] .song-row-rename-input {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--accent-primary);
    color: #f0ebe5;
}
/* Sort dropdown */
[data-theme="golden-hour"] .sort-dropdown {
    background: #4e4438;
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .sort-option {
    color: #e8e2da;
}
[data-theme="golden-hour"] .sort-option:hover,
[data-theme="golden-hour"] .sort-option.active {
    background: rgba(255, 255, 255, 0.10);
    color: var(--accent-primary);
}
/* Empty state / onboarding */
[data-theme="golden-hour"] .empty-state-title,
[data-theme="golden-hour"] .onboarding-icon {
    color: #f0ebe5;
}
[data-theme="golden-hour"] .empty-state-text,
[data-theme="golden-hour"] .onboarding-hint {
    color: rgba(240, 235, 229, 0.5);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* Prevent horizontal scroll / drift on mobile.
       Content should never exceed viewport width. */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    /* v2.28.4: Match background to theme so overscroll/pull-to-refresh
       doesn't reveal a white/light strip behind the app */
    background: var(--primary-bg);
    /* Prevent iOS rubber-band overscroll that reveals bg behind the app */
    overscroll-behavior: none;
}

/* Also lock the React root to prevent any child
   from pushing the page wider than the viewport */
#root {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body {
    font-family: var(--font-primary);
    background: var(--primary-bg);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Prevent iOS Safari pull-to-refresh on main page
       when we want to handle it ourselves in sheets */
    overscroll-behavior-x: none;
}

/* ============================================
   LOGIN/AUTH STYLES
   ============================================ */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-bg) 0%, #e8e4df 100%);
}

.auth-card {
    background: var(--secondary-bg);
    border-radius: 20px;
    padding: var(--space-10);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-large);
    text-align: center;
}

/* Song Structure logo above the wordmark on login */
.auth-brand-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.auth-logo {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--brand);
    margin-bottom: var(--space-2);
    letter-spacing: 0.3px;
}

.auth-tagline {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-divider span {
    padding: 0 var(--space-4);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    border-radius: 12px;
    border: 2px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google:hover {
    border-color: var(--accent-primary);
    background: var(--tertiary-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.google-icon {
    width: 20px;
    height: 20px;
}

/* ── Apple Sign-In Button ──────────────────────────────────────
   Apple's Human Interface Guidelines require specific styling:
   - Black or very dark background
   - White text and Apple logo
   - Same general proportions as other sign-in buttons
   - Must use "Continue with Apple" or "Sign in with Apple" text
   ────────────────────────────────────────────────────────────── */
.btn-apple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    margin-top: var(--space-3);
    border-radius: 12px;
    border: 2px solid #000;
    background: #000;
    color: #fff;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apple:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.btn-apple:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.apple-icon {
    width: 20px;
    height: 20px;
}

.auth-footer {
    margin-top: var(--space-8);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.auth-error {
    background: rgba(212, 125, 125, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
    padding: var(--space-3) var(--space-4);
    border-radius: 8px;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

/* ============================================
   LOGIN SCREEN — ALWAYS DARK
   Overrides the base auth styles above.
   ============================================ */
.auth-container {
    background: linear-gradient(135deg, #1a1714 0%, #2d2926 100%);
}
.auth-card {
    background: #2a2520;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.auth-logo {
    color: #e5e0d8;
}
.auth-tagline {
    color: #8a8078;
}
.auth-footer {
    color: #6a6260;
}
.auth-error {
    background: rgba(212, 125, 125, 0.15);
    color: #e8a0a0;
    border-color: rgba(212, 125, 125, 0.3);
}
.btn-google {
    background: #faf8f5;
    color: #2d2926;
    border-color: #3a352e;
}
.btn-google:hover {
    background: #ffffff;
    border-color: var(--accent-primary);
}

/* ============================================
   USER MENU STYLES
   ============================================ */
.user-menu {
    position: relative;
    /* Prevent flex child from overflowing parent */
    min-width: 0;
    flex-shrink: 1;
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-button:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-medium);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-large);
    min-width: 200px;
    z-index: 1000;
    display: none;
}

.user-dropdown.open {
    display: block;
}

.user-dropdown-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.user-dropdown-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.user-dropdown-email {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    background: none;
    text-align: left;
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-dropdown-item:hover {
    background: var(--tertiary-bg);
}

.user-dropdown-item.danger {
    color: var(--error);
}

.user-dropdown-item.danger:hover {
    background: rgba(212, 125, 125, 0.1);
}

/* ── Delete Account Confirmation Modal ──────────────────── */
.delete-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.delete-modal {
    background: var(--primary-bg);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ============================================
   DASHBOARD STYLES
   ============================================ */
.dashboard-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Prevent horizontal drift on mobile */
    overflow-x: hidden;
}

/* Dashboard header replaced by .app-accent-bar (shared with editor).
   The old .dashboard-header class is no longer used.
   Additional dashboard-specific overrides below. */

.dashboard-accent-bar {
    padding: 10px 20px;
}

/* UserMenu in accent bar — avatar-only circle button */
.dashboard-accent-bar .user-menu-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.dashboard-accent-bar .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.25);
    transition: border-color 0.15s;
}
.dashboard-accent-bar .user-avatar:hover {
    border-color: rgba(255,255,255,0.5);
}
.dashboard-accent-bar .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ensure dropdown appears below the dark bar */
.dashboard-accent-bar .user-dropdown {
    top: 100%;
    right: 0;
    margin-top: 4px;
}

.dashboard-main {
    flex: 1;
    padding: var(--space-8);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    /* Prevent content from causing horizontal overflow */
    overflow-x: hidden;
}

/* Welcome text and title removed from dashboard —
   accent bar provides identity; space saved. */

/* ============================================
   NEW DASHBOARD LAYOUT — Sidebar + Center (v2.39.0)
   ============================================ */
.dash-layout {
    width: 100vw;
    height: 100vh;
    display: flex;
}

/* ── Sidebar ── */
.dash-sidebar {
    width: 288px;
    min-width: 288px;
    background: #f5f3ef;
    border-right: 1px solid rgba(44,40,38,0.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dash-sidebar-header {
    padding: 24px 20px 16px;
    position: sticky;
    top: 0;
    background: #f5f3ef;
    z-index: 5;
}
.dash-sidebar-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dash-sidebar-brand {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    line-height: 1;
    background: none;
    border-radius: 0;
    margin-top: -8px;
}
.dash-sidebar-brand:hover {
    background: none;
}
/* ── Brand Icon — Song Structure logo (06) ── */
/* Architectural block arrangement: title row → verse halves → variation thirds → chosen take.
   Bottom row uses terracotta accent. On hover, all bricks shift to terracotta. */
/* Size variants: default (sidebar), .brand-icon-sm (accent bar), .brand-icon-lg (splash/watermark) */
.brand-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.brand-icon-row {
    display: flex;
    gap: 2px;
}
.brand-icon-brick {
    height: 8px;
    border-radius: 2px;
    background: var(--brand);
    transition: background 0.3s;
}
/* Row widths — default (sidebar) size */
.brand-icon-row:nth-child(1) .brand-icon-brick { width: 42px; }
.brand-icon-row:nth-child(2) .brand-icon-brick { width: 20px; }
.brand-icon-row:nth-child(3) .brand-icon-brick { width: 12px; }
.brand-icon-row:nth-child(4) .brand-icon-brick { width: 42px; background: #d4875f; }
/* Hover — individual bricks handled by JS doodle mode (random palette colors).
   Keep default colors when parent is hovered so JS-applied colors aren't overridden. */
.brand-icon:hover .brand-icon-brick {
    background: var(--brand);
}
.brand-icon:hover .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: #d4875f;
}
/* On-load animation (plays once on mount) */
.brand-icon-brick.animate-in {
    opacity: 0;
    animation: brand-build 0.5s ease-out forwards;
}
@keyframes brand-build {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Small — accent bar ── */
.brand-icon-sm { gap: 1.5px; }
.brand-icon-sm .brand-icon-row { gap: 1.5px; }
.brand-icon-sm .brand-icon-brick { height: 5px; }
.brand-icon-sm .brand-icon-row:nth-child(1) .brand-icon-brick { width: 26px; }
.brand-icon-sm .brand-icon-row:nth-child(2) .brand-icon-brick { width: 12px; }
.brand-icon-sm .brand-icon-row:nth-child(3) .brand-icon-brick { width: 7.5px; }
.brand-icon-sm .brand-icon-row:nth-child(4) .brand-icon-brick { width: 26px; }

/* ── Large — splash screen / watermark ── */
.brand-icon-lg { gap: 4px; }
.brand-icon-lg .brand-icon-row { gap: 4px; }
.brand-icon-lg .brand-icon-brick { height: 18px; border-radius: 3px; }
.brand-icon-lg .brand-icon-row:nth-child(1) .brand-icon-brick { width: 100px; }
.brand-icon-lg .brand-icon-row:nth-child(2) .brand-icon-brick { width: 48px; }
.brand-icon-lg .brand-icon-row:nth-child(3) .brand-icon-brick { width: 30px; }
.brand-icon-lg .brand-icon-row:nth-child(4) .brand-icon-brick { width: 100px; }

/* Watermark — very faint */
.brand-icon-watermark .brand-icon-brick { background: rgba(var(--accent-rgb), 0.06); }
.brand-icon-watermark .brand-icon-row:nth-child(4) .brand-icon-brick { background: rgba(212,135,95,0.08); }
.brand-icon-watermark:hover .brand-icon-brick { background: rgba(var(--accent-rgb), 0.10); }

/* Splash screen — dark brown, animated build */
.brand-icon-splash .brand-icon-brick { background: var(--brand); }
.brand-icon-splash .brand-icon-row:nth-child(4) .brand-icon-brick { background: #d4875f; }
.brand-wordmark {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--brand);
    letter-spacing: 0.3px;
    line-height: 1;
    padding-bottom: 1px;
}
/* Stacked wordmark — "the / writers / block", left-justified */
.brand-wordmark-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    font-size: 12px;
    gap: 0px;
    margin-bottom: -3px;
}
.dash-sidebar-add {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(var(--accent-rgb),0.12);
    border: none;
    color: var(--accent-primary);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.dash-sidebar-add:hover {
    background: var(--accent-primary);
    color: #fff;
}
.dash-sidebar-search {
    width: 100%;
    padding: 9px 12px;
    font-family: 'Inter', var(--font-primary);
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid rgba(44,40,38,0.08);
    background: #fff;
    color: #2c2826;
    outline: none;
    transition: border-color 0.2s;
}
.dash-sidebar-search::placeholder { color: #b0aaa5; font-weight: 500; }
.dash-sidebar-search:focus { border-color: var(--accent-primary); }

.dash-sidebar-section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b0aaa5;
    padding: 12px 20px 6px;
}

.dash-sidebar-list {
    flex: 1;
}
.dash-sidebar-list.pinned { flex: 0; }

.dash-sidebar-item {
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.12s;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-sidebar-item:hover {
    background: rgba(44,40,38,0.03);
}
.dash-sidebar-item.active {
    background: rgba(var(--accent-rgb),0.06);
    border-left-color: var(--accent-primary);
}

.dash-sidebar-item-info {
    flex: 1;
    min-width: 0;
}
.dash-sidebar-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c2826;
    margin-bottom: 1px;
    line-height: 1.3;
    word-break: break-word;
}
.dash-sidebar-item-snippet {
    font-size: 12px;
    color: #9a9490;
    font-style: italic;
    font-weight: 500;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pin / Star actions */
.dash-sidebar-item-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.dash-sidebar-item:hover .dash-sidebar-item-actions { opacity: 1; }
.dash-sidebar-item-actions.always-show { opacity: 1; }

.dash-item-action-btn {
    background: none;
    border: none;
    color: #c8c3bc;
    font-size: 13px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    transition: color 0.15s;
}
.dash-item-action-btn:hover { color: #8a8480; }
.dash-item-action-btn.active { color: var(--accent-primary); }

/* Sidebar inline rename */
.dash-sidebar-rename-input {
    width: 100%;
    border: none;
    outline: none;
    background: rgba(255,255,255,0.8);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #2c2826;
    border: 1px solid rgba(var(--accent-rgb),0.3);
}

/* Sidebar user area */
.dash-sidebar-user {
    padding: 14px 20px;
    border-top: 1px solid rgba(44,40,38,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: #f5f3ef;
}
.dash-sidebar-user-name {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: #6b6560;
}
/* Theme toggle button in sidebar user area */
.dash-sidebar-theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9a9490;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.dash-sidebar-theme-btn:hover {
    color: var(--accent-primary);
    background: rgba(0,0,0,0.04);
}
/* UserMenu inside sidebar — simple circular avatar, no border/bg */
.dash-sidebar-user .user-menu-button {
    background: none;
    border: none;
    padding: 0;
    border-radius: 50%;
}
.dash-sidebar-user .user-menu-button:hover {
    background: none;
    border-color: transparent;
}
.dash-sidebar-user .user-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
}
/* Dropdown opens upward from sidebar bottom */
.dash-sidebar-user .user-dropdown {
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: auto;
    min-width: 220px;
}

/* Sort control in sidebar header */
.dash-sidebar-sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 4px;
}
.dash-sidebar-sort-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #b0aaa5;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}
.dash-sidebar-sort-btn:hover { color: var(--accent-primary); }
.dash-sidebar-sort-btn svg {
    transition: transform 0.15s;
}

/* ── Main center content ── */
.dash-main {
    flex: 1;
    overflow-y: auto;
    background: linear-gradient(180deg, #edeae3 0%, #e8e5de 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 140px 48px 40px;
}
.dash-main-inner {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Quill icon */
.dash-quill {
    color: var(--accent-primary);
    opacity: 0.25;
    margin-bottom: 20px;
    user-select: none;
}

/* Greeting */
.dash-greeting {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 500;
    color: #2c2826;
    margin-bottom: 6px;
}
.dash-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    color: rgba(44,40,38,0.45);
    margin-bottom: 40px;
}

/* New Song button */
.dash-new-song-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand);
    color: var(--cream);
    padding: 14px 28px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    margin-bottom: 24px;
}
.dash-new-song-btn:hover {
    background: var(--accent-secondary);
    color: var(--cream);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb),0.18);
}
.dash-new-song-btn .icon {
    font-size: 18px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    transition: all 0.2s;
}
.dash-new-song-btn:hover .icon {
    color: var(--brand);
}

/* "or" divider */
.dash-divider-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin-bottom: 20px;
}
.dash-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(44,40,38,0.08);
}
.dash-divider-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(44,40,38,0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paste area */
.dash-paste-box {
    width: 100%;
    max-width: 480px;
    background: rgba(255,255,255,0.45);
    border: 1.5px dashed rgba(44,40,38,0.1);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 36px;
    transition: all 0.2s;
    cursor: text;
}
.dash-paste-box:hover,
.dash-paste-box:focus-within {
    background: rgba(255,255,255,0.75);
    border-color: rgba(var(--accent-rgb),0.25);
}
.dash-paste-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #8a8480;
    margin-bottom: 8px;
}
.dash-paste-box textarea {
    width: 100%;
    border: none;
    outline: none;
    font-family: var(--font-serif);
    font-size: 17px;
    color: #2c2826;
    line-height: 1.8;
    resize: none;
    min-height: 56px;
    background: transparent;
}
.dash-paste-box textarea::placeholder { color: #b8b2ab; }

/* Paste box "creating" state */
.dash-paste-box.creating {
    border-color: rgba(var(--accent-rgb),0.4);
    background: rgba(255,255,255,0.75);
}
.dash-paste-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(44,40,38,0.35);
    margin-top: 10px;
    text-align: right;
}

/* Section headers */
.dash-section {
    width: 100%;
    margin-bottom: 32px;
}
.dash-section-header {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8480;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(44,40,38,0.08);
}

/* Activity Feed */
.dash-activity-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(44,40,38,0.05);
    cursor: pointer;
    transition: opacity 0.15s;
}
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-item:hover { opacity: 0.75; }
.dash-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
}
.dash-activity-dot.edit { background: #d4875f; }
.dash-activity-dot.collab { background: #7b68ee; }
.dash-activity-dot.audio { background: #6b8f71; }
.dash-activity-dot.create { background: #4a9b9b; }
.dash-activity-text {
    font-size: 14px;
    color: #4a4540;
    line-height: 1.5;
}
.dash-activity-text strong {
    font-weight: 600;
    color: #2c2826;
}
.dash-activity-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #a09a94;
    margin-top: 4px;
}

/* ── Mobile Activity Section (greeting area) ── */
.m-activity-section {
    width: 100%;
    max-width: 360px;
    margin: 24px auto 0;
    padding: 0 4px;
    text-align: left;
}
.m-activity-header {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a8480;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(44,40,38,0.08);
}
.m-activity-section .dash-activity-item {
    padding: 10px 0;
}
.m-activity-section .dash-activity-text {
    font-size: 13px;
}
.m-activity-section .dash-activity-time {
    font-size: 10px;
}

/* ── Dashboard footer — inside main center ── */
.dash-footer {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(44,40,38,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dash-footer-version {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(44,40,38,0.25);
    letter-spacing: 0.3px;
    margin-top: 4px;
}
.dash-footer-link {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(44,40,38,0.5);
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px 2px;
}
.dash-footer-link:hover { color: var(--accent-primary); }
.dash-footer-sep {
    font-size: 12px;
    color: rgba(44,40,38,0.25);
}

/* ── Theme overrides for new dashboard ── */
[data-theme="golden-hour"] .dash-sidebar {
    background: #4a4038;
    border-right-color: rgba(255,255,255,0.08);
}
[data-theme="golden-hour"] .dash-sidebar-header {
    background: #4a4038;
}
[data-theme="golden-hour"] .brand-icon-brick {
    background: #e5e0d8;
}
[data-theme="golden-hour"] .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: #e8a070;
}
[data-theme="golden-hour"] .brand-wordmark {
    color: #e5e0d8;
}
[data-theme="golden-hour"] .brand-icon-watermark .brand-icon-brick {
    background: rgba(229,224,216,0.12);
}
[data-theme="golden-hour"] .brand-icon-watermark .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: rgba(232,160,112,0.15);
}
[data-theme="golden-hour"] .dash-sidebar-search {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.08);
    color: #e5e0d8;
}
[data-theme="golden-hour"] .dash-sidebar-search::placeholder {
    color: rgba(255,255,255,0.35);
}
[data-theme="golden-hour"] .dash-sidebar-section-label {
    color: rgba(255,255,255,0.35);
}
[data-theme="golden-hour"] .dash-sidebar-item-title {
    color: #e5e0d8;
}
[data-theme="golden-hour"] .dash-sidebar-item-snippet {
    color: rgba(255,255,255,0.4);
}
[data-theme="golden-hour"] .dash-sidebar-item:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="golden-hour"] .dash-sidebar-user {
    background: #4a4038;
    border-top-color: rgba(255,255,255,0.06);
}
[data-theme="golden-hour"] .dash-main {
    background: linear-gradient(180deg, #5a4f44 0%, #544a3f 100%);
}
[data-theme="golden-hour"] .dash-greeting,
[data-theme="golden-hour"] .dash-activity-text strong {
    color: #e5e0d8;
}
[data-theme="golden-hour"] .dash-sub {
    color: rgba(229,224,216,0.45);
}
[data-theme="golden-hour"] .dash-new-song-btn {
    background: rgba(255,255,255,0.12);
}
[data-theme="golden-hour"] .dash-paste-box {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="golden-hour"] .dash-paste-box textarea {
    color: #e5e0d8;
}
[data-theme="golden-hour"] .dash-activity-text {
    color: rgba(229,224,216,0.7);
}
[data-theme="golden-hour"] .dash-quill {
    color: rgba(229,224,216,0.25);
}
[data-theme="golden-hour"] .dash-sidebar-user-name {
    color: rgba(229,224,216,0.5);
}
[data-theme="golden-hour"] .dash-sidebar-theme-btn {
    color: rgba(229,224,216,0.4);
}
[data-theme="golden-hour"] .dash-sidebar-theme-btn:hover {
    color: #e5e0d8;
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .dash-sidebar {
    background: #1e1b18;
    border-right-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .dash-sidebar-header {
    background: #1e1b18;
}
[data-theme="dark"] .brand-icon-brick {
    background: #c8c0b6;
}
[data-theme="dark"] .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: #e09060;
}
[data-theme="dark"] .brand-wordmark {
    color: #c8c0b6;
}
[data-theme="dark"] .brand-icon-watermark .brand-icon-brick {
    background: rgba(200,192,182,0.1);
}
[data-theme="dark"] .brand-icon-watermark .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: rgba(224,144,96,0.12);
}
[data-theme="dark"] .dash-sidebar-search {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.06);
    color: #c8c0b6;
}
[data-theme="dark"] .dash-sidebar-search::placeholder {
    color: rgba(255,255,255,0.25);
}
[data-theme="dark"] .dash-sidebar-section-label {
    color: rgba(255,255,255,0.3);
}
[data-theme="dark"] .dash-sidebar-item-title {
    color: #c8c0b6;
}
[data-theme="dark"] .dash-sidebar-item-snippet {
    color: rgba(255,255,255,0.3);
}
[data-theme="dark"] .dash-sidebar-item:hover {
    background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .dash-sidebar-user {
    background: #1e1b18;
    border-top-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .dash-main {
    background: linear-gradient(180deg, #1a1714 0%, #181512 100%);
}
[data-theme="dark"] .dash-greeting,
[data-theme="dark"] .dash-activity-text strong {
    color: #c8c0b6;
}
[data-theme="dark"] .dash-sub {
    color: rgba(200,192,182,0.4);
}
[data-theme="dark"] .dash-new-song-btn {
    background: rgba(255,255,255,0.1);
}
[data-theme="dark"] .dash-paste-box {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .dash-paste-box textarea {
    color: #c8c0b6;
}
[data-theme="dark"] .dash-divider-line {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .dash-divider-text {
    color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .dash-activity-text {
    color: rgba(200,192,182,0.6);
}
[data-theme="dark"] .dash-quill {
    color: rgba(200,192,182,0.2);
}
[data-theme="dark"] .dash-sidebar-user-name {
    color: rgba(200,192,182,0.45);
}
[data-theme="dark"] .dash-sidebar-theme-btn {
    color: rgba(200,192,182,0.35);
}
[data-theme="dark"] .dash-sidebar-theme-btn:hover {
    color: #c8c0b6;
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .dash-footer {
    border-top-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .dash-footer-link {
    color: rgba(200,192,182,0.4);
}
[data-theme="dark"] .dash-section-header {
    color: rgba(200,192,182,0.4);
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ── Access request badge in sidebar ── */
.dash-sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(var(--accent-rgb),0.15);
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.dashboard-controls {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-actions {
    display: flex;
    gap: var(--space-4);
}

/* Search and filter controls */
.search-filter-group {
    display: flex;
    gap: var(--space-3);
    flex: 1;
    max-width: 600px;
}

.search-container {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--secondary-bg);
    transition: all 0.2s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(212, 135, 95, 0.1);
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.search-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
}

.clear-search {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.clear-search:hover {
    background: var(--tertiary-bg);
    color: var(--text-primary);
}

/* Claude.ai-style dropdown */
.sort-dropdown {
    position: relative;
    display: inline-block;
}

.sort-dropdown-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Match the height of adjacent buttons (btn-primary, btn-secondary) */
    padding: var(--space-3) var(--space-4);
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
    justify-content: space-between;
}

.sort-dropdown-button:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-medium);
}

.sort-dropdown-button.open {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(212, 135, 95, 0.1);
}

.sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    z-index: 100;
    display: none;
}

.sort-dropdown-menu.open {
    display: block;
}

.sort-dropdown-menu button {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    border: none;
    background: none;
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sort-dropdown-menu button:first-child {
    border-radius: 8px 8px 0 0;
}

.sort-dropdown-menu button:last-child {
    border-radius: 0 0 8px 8px;
}

.sort-dropdown-menu button:hover {
    background: var(--tertiary-bg);
}

.sort-dropdown-menu button.selected {
    background: rgba(212, 135, 95, 0.1);
    color: var(--accent-primary);
    font-weight: 600;
}

/* ============================================
   BUTTON STYLES
   ============================================ */
.btn-primary {
    background: var(--accent-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: 8px;
    border: none;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-subtle);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-secondary);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-subtle);
}

.btn-icon {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-icon:hover:not(:disabled) {
    background: var(--tertiary-bg);
    border-color: var(--border-dark);
}

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Version Control Buttons */
.btn-save-version {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-save-version:hover {
    background: var(--brand);
    color: var(--cream);
    border-color: var(--brand);
    transform: translateY(-1px);
}

.btn-versions {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-versions:hover {
    background: var(--brand);
    color: var(--cream);
    border-color: var(--brand);
    transform: translateY(-1px);
}

/* ============================================
   SONG GRID STYLES
   ============================================ */
/* ============================================
   COMPACT SONG ROW — v2.15.32
   Replaces the old card grid with a dense list.
   ============================================ */
.songs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.song-row {
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s ease;
}
.song-row:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-medium);
}
.song-row:active {
    transform: scale(0.99);
}

/* Terracotta dot — status indicator */
.song-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}
.song-row-dot.shared {
    background: var(--success);
}

/* Song info: title + meta */
.song-row-info {
    flex: 1;
    min-width: 0;
}
.song-row-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Theme snippet — shows the subtitle/theme if set */
.song-row-theme {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

/* Meta row with icon details */
.song-row-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.song-row-detail {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.song-row-detail::before {
    content: '·';
    margin-right: 1px;
}
.song-row-detail svg {
    color: var(--accent-primary);
    flex-shrink: 0;
}

/* Email autocomplete suggestions — v2.15.36 */
.collab-input-wrap {
    position: relative;
    flex: 1;
}
.email-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    z-index: 10;
    margin-top: 4px;
    overflow: hidden;
    max-height: 160px;
    overflow-y: auto;
}
.email-suggestion {
    padding: 8px 12px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}
.email-suggestion:hover {
    background: var(--tertiary-bg);
}
.email-suggestion:active {
    background: rgba(212, 135, 95, 0.1);
}

/* Song count label */
.song-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    padding: 0 0 var(--space-2) 0;
}

/* Chevron arrow */
.song-row-arrow {
    color: var(--border-dark);
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

/* ============================================
   SHARE MODAL STYLES
   ============================================ */
.share-input-group {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.share-input-group input {
    flex: 1;
}

.collaborators-list {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    /* Let the list size to its content naturally — the modal's own
       max-height: 90vh handles overflow if the list gets very long */
    max-height: none;
    overflow-y: visible;
}

.collaborator-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.collaborator-item:last-child {
    border-bottom: none;
}

.collaborator-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.collaborator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
}

.collaborator-email {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.collaborator-role {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.btn-remove-collaborator {
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-collaborator:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.share-link-section {
    /* No extra top margin/border — the modal-header already provides
       visual separation. This removes the large gap. */
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.share-link-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.share-link-input-group {
    display: flex;
    gap: var(--space-2);
}

.share-link-input {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: 'Menlo', monospace;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--tertiary-bg);
}

.empty-collaborators {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
}

.owner-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-primary);
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
    opacity: 0.3;
}

.empty-state-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state-text {
    font-size: var(--text-lg);
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

/* ============================================
   MODAL STYLES
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 45, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.modal {
    background: var(--secondary-bg);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-large);
}

.modal-header {
    /* Reduced from space-6 — saves vertical room, modal was cutting off
       the Done button even with only 2-3 collaborators */
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.modal-title {
    /* Reduced from text-2xl — large title was adding height without value */
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.modal-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.modal-body {
    /* Tighter vertical padding so content fits without scrolling */
    padding: var(--space-4) var(--space-6);
}

.modal-footer {
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.form-group {
    /* Reduced gap between form sections in modal */
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--secondary-bg);
    transition: all 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(212, 135, 95, 0.1);
}

/* Dim placeholders in form inputs (e.g. "collaborator@email.com") */
.form-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Share link row: input + copy button side by side with gap */
.share-link-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.share-link-row .form-input {
    flex: 1;
    min-width: 0;
}

.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--secondary-bg);
    transition: all 0.2s ease;
    resize: vertical;
    min-height: 80px;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(212, 135, 95, 0.1);
}

/* ============================================
   TEMPLATE SELECTION STYLES
   ============================================ */
.template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.template-option {
    background: var(--tertiary-bg);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-option:hover {
    border-color: var(--accent-primary);
    background: var(--secondary-bg);
}

.template-option.selected {
    border-color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.05);
}

.template-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.template-structure {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: 'Menlo', monospace;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--primary-bg);
    font-size: var(--text-lg);
    color: var(--text-secondary);
    flex-direction: column;
    gap: var(--space-4);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Branded loader: stacking blocks + wordmark ── */
.branded-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.branded-loader-text {
    font-weight: 500;
    font-size: 16px;
    color: var(--brand);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    opacity: 0;
    animation: loader-text-fade 0.4s ease-out 0.7s forwards;
}
@keyframes loader-text-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================
   AUDIO PLAYER
   ============================================ */

/* Upload zone — shown when no audio is loaded */
.audio-player-zone {
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
}
/* Visually hidden file input — NOT display:none (Safari bug) */
.audio-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}
.audio-drop-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px dashed var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 12px;
    transition: all 0.15s;
}
.audio-drop-zone:hover, .audio-drop-zone.drag-over {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.04);
    color: var(--accent-primary);
}
.audio-drop-hint {
    font-size: 10px;
    opacity: 0.6;
    margin-left: auto;
}
.audio-upload-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.audio-upload-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border-light);
    overflow: hidden;
}
.audio-upload-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.2s;
}
.audio-analyzing-pulse {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: var(--accent-primary);
    animation: audio-pulse 1s ease-in-out infinite;
}
@keyframes audio-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}
.audio-error {
    margin-top: 6px;
    font-size: 11px;
    color: #c0392b;
}

/* Re-analyze bar — prominent notice above waveform */
.audio-reanalyze-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb),0.08);
    border: 1px solid rgba(var(--accent-rgb),0.2);
    font-size: 12px;
    color: var(--text-secondary);
}
.audio-reanalyze-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1.5px solid var(--accent-primary);
    background: rgba(var(--accent-rgb),0.1);
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-primary);
    white-space: nowrap;
}
.audio-reanalyze-btn:hover {
    background: rgba(var(--accent-rgb),0.2);
}

/* Expanded player panel */
.audio-player-panel {
    border-top: 1px solid var(--border-medium);
    background: var(--primary-bg);
    padding: 10px 14px 12px;
}
.audio-player-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.audio-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb),0.3);
    flex-shrink: 0;
}
.audio-play-btn:active { transform: scale(0.95); }

/* Skip forward/back buttons */
.audio-skip-btn {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    /*
     * BUG FIX (Bug 3): Dimmer border — was using var(--border-medium)
     * which renders too strongly on the dark mobile panel.
     * Using a lower-opacity border that still reads as a circle.
     */
    border: 1px solid rgba(100, 90, 85, 0.45);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
    /*
     * BUG FIX (Bug 2): Remove the default mobile tap highlight ring
     * that appears as a white/grey flash circle when the button is tapped.
     * -webkit-tap-highlight-color: transparent removes this on iOS + Android.
     */
    -webkit-tap-highlight-color: transparent;
}
.audio-skip-btn:hover {
    background: var(--secondary-bg);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}
.audio-skip-btn:active { transform: scale(0.9); }

/* Drag tooltip wrapper — sits above the waveform, never clipped */
.audio-drag-tooltip-wrapper {
    position: relative;
    height: 20px;
    margin-bottom: 2px;
}
.audio-drag-tooltip {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.audio-player-title {
    flex: 1;
    min-width: 0;
}
.audio-file-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.audio-time {
    font-size: 10px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.audio-bpm-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,0.05);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s ease;
}
.audio-bpm-badge:hover {
    background: rgba(0,0,0,0.1);
    color: var(--text-primary);
}
.audio-bpm-editing {
    display: flex;
    align-items: center;
    gap: 3px;
}
.audio-bpm-input {
    width: 38px;
    border: none;
    border-bottom: 1.5px solid var(--accent-primary);
    background: transparent;
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-mono);
    text-align: center;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
}
.audio-bpm-input::-webkit-outer-spin-button,
.audio-bpm-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.audio-loop-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb),0.1);
    color: var(--accent-primary);
    flex-shrink: 0;
}
.audio-collapse-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 16px;
    padding: 2px;
}
.audio-remove-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.audio-remove-btn:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   v2.25.0 UX REDESIGN — Loop toggle, Inline zoom,
   Overflow menu, Hover tooltip, Visual separator
   ═══════════════════════════════════════════════════════ */

/* Loop toggle button — in header row */
.audio-loop-toggle {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    opacity: 0.75;
    padding: 3px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.audio-loop-toggle:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
.audio-loop-toggle.active {
    opacity: 1;
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.15);
    box-shadow: 0 0 0 2px var(--accent-primary);
}
.audio-loop-toggle.active:hover {
    background: rgba(var(--accent-rgb),0.25);
}

/* ── Vocals toggle button (v2.28.0 — Demucs vocal muting) ── */
.audio-vocals-toggle {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    opacity: 0.35;
    padding: 3px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.audio-vocals-toggle:hover {
    opacity: 0.7;
    background: rgba(0,0,0,0.05);
}
.audio-vocals-toggle.active {
    opacity: 1;
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.15);
    box-shadow: 0 0 0 2px var(--accent-primary);
}
.audio-vocals-toggle.active:hover {
    background: rgba(var(--accent-rgb),0.25);
}
.audio-vocals-toggle.processing {
    opacity: 0.7;
    cursor: wait;
}
.audio-vocals-toggle:disabled {
    cursor: wait;
}

/* Spinning animation for the processing indicator */
@keyframes demucs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.audio-vocals-spinner {
    animation: demucs-spin 1.2s linear infinite;
}

/* Demucs progress bar — shown below toolbar during processing */
.audio-demucs-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 6px;
    font-size: 11px;
    color: var(--text-secondary);
}
.audio-demucs-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--border-color, rgba(0,0,0,0.08));
    border-radius: 2px;
    overflow: hidden;
}
.audio-demucs-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.audio-demucs-progress-msg {
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline zoom controls — compact, in header row */
.audio-zoom-inline {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    color: var(--text-tertiary);
    opacity: 0.8;
    flex-shrink: 0;
}
.audio-zoom-inline button {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 12px;
    padding: 1px 3px;
    border-radius: 3px;
    font-family: var(--font-primary);
}
.audio-zoom-inline button:hover {
    background: rgba(0,0,0,0.06);
    opacity: 1;
}
.audio-zoom-inline button:disabled {
    opacity: 0.3;
    cursor: default;
}
.audio-zoom-inline span {
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Overflow menu (⋯) — houses re-analyze, collapse, remove */
.audio-overflow-menu {
    position: relative;
    flex-shrink: 0;
}
.audio-overflow-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: 16px;
    letter-spacing: 2px;
    padding: 2px 4px;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.audio-overflow-btn:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
.audio-overflow-dropdown {
    /* position and coordinates now set via inline style (fixed portal) —
       see AudioPlayer.js. These properties are kept as fallback defaults only. */
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
    background: var(--primary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 4px;
    min-width: 160px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.audio-overflow-dropdown button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    text-align: left;
    white-space: nowrap;
}
.audio-overflow-dropdown button:hover {
    background: rgba(0,0,0,0.04);
}
.audio-overflow-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.audio-overflow-danger {
    color: #c0392b !important;
}
.audio-overflow-danger:hover {
    background: rgba(192,57,43,0.08) !important;
}
/* Palette switcher hint text */
.audio-palette-hint {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.4;
    font-style: italic;
}
/* Divider between palette switcher and other menu items */
.audio-overflow-divider {
    height: 1px;
    background: var(--border-light);
    margin: 3px 6px;
}

/* Hover tooltip — appears above waveform on mouse hover.
   Because the waveform container uses overflow:hidden, the tooltip
   is placed inside audio-waveform-scroll (the scroll wrapper) which
   does NOT clip overflow. We use a negative top to push it above. */
/* Wrapper for hover tooltip positioning — sits around the scroll area,
   has overflow:visible so the tooltip can float above without clipping */
.audio-waveform-hover-zone {
    position: relative;
}
.audio-hover-tooltip {
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    font-size: 10px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 20;
    font-variant-numeric: tabular-nums;
}
/* Hover position indicator line */
.audio-hover-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 5;
}

/* Visual separator — elevated card feel for audio player */
.audio-player-panel {
    border-top: 1px solid var(--border-medium);
    box-shadow: 0 -3px 12px rgba(0,0,0,0.04);
    margin-top: 4px;
}
/* Upload zone also gets the separator when audio hidden toggle is off */
.audio-player-zone {
    border-top: 1px solid var(--border-medium);
    margin-top: 4px;
}

/* Dark theme overrides for new elements */
[data-theme="dark"] .audio-loop-toggle:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .audio-vocals-toggle:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .audio-vocals-toggle.active { color: #e8a878; background: rgba(232,168,120,0.15); box-shadow: 0 0 0 2px #e8a878; }
[data-theme="dark"] .audio-demucs-progress-bar { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .audio-zoom-inline button:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .audio-overflow-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .audio-overflow-dropdown {
    background: var(--primary-bg);
    border-color: var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .audio-overflow-dropdown button:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .audio-hover-tooltip { background: rgba(255,255,255,0.85); color: #1a1a1a; }
[data-theme="dark"] .audio-hover-line { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .audio-player-panel { box-shadow: 0 -3px 12px rgba(0,0,0,0.2); }

/* Waveform container */
.audio-waveform-container {
    position: relative;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.03);
    cursor: pointer;
}
.audio-section-bg {
    position: absolute;
    top: 0; bottom: 0;
    border-right: 1px solid rgba(0,0,0,0.04);
}
.audio-loop-region {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(var(--accent-rgb),0.15);
    border-left: 2px solid var(--accent-primary);
    border-right: 2px solid var(--accent-primary);
    z-index: 2;
}
.audio-waveform-svg {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.audio-playhead {
    position: absolute;
    top: 0; bottom: 0;
    width: 1.5px;
    background: var(--accent-primary);
    z-index: 4;
    transition: left 0.08s linear;
}

/* Draggable section boundary handles */
.audio-section-handle {
    position: absolute;
    top: 0; bottom: 0;
    width: 16px;
    margin-left: -8px;
    cursor: col-resize;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.audio-section-handle-line {
    width: 2px;
    height: 60%;
    border-radius: 1px;
    background: rgba(0,0,0,0.15);
    transition: background 0.15s, height 0.15s;
}
.audio-section-handle:hover .audio-section-handle-line {
    background: var(--accent-primary);
    height: 80%;
}
[data-theme="golden-hour"] .audio-section-handle-line { background: rgba(255,255,255,0.15); }
[data-theme="golden-hour"] .audio-section-handle:hover .audio-section-handle-line { background: var(--accent-primary); }
[data-theme="dark"] .audio-section-handle-line { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .audio-section-handle:hover .audio-section-handle-line { background: var(--accent-primary); }

/* Zoom controls */
.audio-zoom-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    justify-content: flex-end;
}
.audio-zoom-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
}
.audio-zoom-btn:hover { background: rgba(0,0,0,0.05); }
.audio-zoom-btn:disabled { opacity: 0.3; cursor: default; }
.audio-zoom-label {
    font-size: 10px;
    color: var(--text-tertiary);
    min-width: 32px;
    text-align: center;
}
/* Scrollable zoom wrapper */
.audio-waveform-scroll {
    border-radius: 6px;
    scroll-behavior: smooth;
}
/* Smooth zoom transition on the inner waveform container */
.audio-waveform-scroll .audio-waveform-container {
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="golden-hour"] .audio-zoom-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: rgba(240,235,229,0.6); }
[data-theme="dark"] .audio-zoom-btn { background: rgba(255,255,255,0.04); border-color: #302b26; color: #8a8280; }

/* Section chips */
/* Section sync prompt */
.audio-sync-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 8px;
    margin-top: 2px;
    background: rgba(212, 135, 95, 0.08);
    border: 1px dashed rgba(212, 135, 95, 0.3);
    border-radius: 6px;
    font-size: 10px;
    color: var(--text-secondary);
}
.audio-sync-btn {
    border: 1px solid var(--accent-primary);
    background: transparent;
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.audio-sync-btn:hover {
    background: var(--accent-primary);
    color: #fff;
}

.audio-section-chips {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.audio-chip {
    padding: 3px 9px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: rgba(0,0,0,0.04);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-primary);
    white-space: nowrap;
    transition: all 0.12s;
}
.audio-chip:hover {
    background: rgba(0,0,0,0.07);
}
.audio-chip.active {
    font-weight: 600;
}
.audio-chip-bars {
    opacity: 0.5;
    margin-left: 3px;
    font-size: 9px;
}

/* Collapsed mini bar */
.audio-mini-bar {
    border-top: 1px solid var(--border-light);
    background: #2c2826;
    /* v2.28.4: Taller touch target for mobile — was 6px, now 12px vertical */
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    /* Safe area inset for iPhones with home indicator */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.audio-mini-play {
    /* v2.28.4: Larger play button for easier tapping — was 24px */
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.audio-mini-wave {
    flex: 1;
    min-width: 0;
    /* v2.28.4: Taller waveform — was 20px */
    height: 30px;
}
.audio-mini-wave svg {
    width: 100%;
    height: 100%;
}
.audio-mini-info {
    text-align: right;
    flex-shrink: 0;
}
.audio-mini-name {
    display: block;
    /* v2.28.4: Larger text — was 10px */
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.audio-mini-meta {
    display: block;
    /* v2.28.4: Larger text — was 8px */
    font-size: 9px;
    color: rgba(255,255,255,0.35);
}
.audio-mini-expand {
    font-size: 16px;
    color: rgba(255,255,255,0.4);
}

/* v2.28.4: Mobile expanded audio player — bottom sheet overlay.
   Positioning is now handled by .mobile-audio-dock (fixed wrapper).
   z-index kept below the variation bottom sheet (200/201). */
@media (max-width: 768px) {
    .audio-player-panel {
        background: #2c2826;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px 16px 0 0;
        /*
         * BUG FIX (Bug 1): overflow must be VISIBLE here so the
         * .audio-overflow-dropdown (⋯ menu) is not clipped.
         * CSS overflow clipping ignores z-index — even z-index:9999
         * won't help if overflow:auto/hidden is on the parent.
         * Scrolling is handled by .audio-panel-scroll-inner instead.
         */
        overflow: visible;
        max-height: 60vh;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
        animation: slide-up-sheet 0.25s ease-out;
    }
    /* Inner wrapper handles the actual vertical scroll so the
       panel itself can stay overflow:visible for the dropdown. */
    .audio-panel-scroll-inner {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @keyframes slide-up-sheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    /* Override light-themed text for dark bottom sheet */
    .audio-player-panel .audio-player-header {
        color: rgba(255,255,255,0.7);
        flex-wrap: wrap;
    }
    .audio-player-panel .audio-bpm-badge { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
    .audio-player-panel .audio-play-btn { background: var(--accent-primary); color: #fff; }
    .audio-player-panel .audio-skip-btn { color: rgba(255,255,255,0.5); }
    .audio-player-panel .audio-loop-toggle { color: rgba(255,255,255,0.5); }
    .audio-player-panel .audio-loop-toggle.active { color: var(--accent-primary); }
    .audio-player-panel .audio-zoom-inline { color: rgba(255,255,255,0.4); }
    .audio-player-panel .audio-overflow-btn { color: rgba(255,255,255,0.4); }
    .audio-player-panel .audio-section-chips { padding: 4px 10px 8px; }
    .audio-player-panel .audio-chip { color: rgba(255,255,255,0.7); }
    .audio-player-panel .audio-chip-bars { color: rgba(255,255,255,0.3); }

    /* ── Track picker mobile overrides ──
       Hide the label text so the button stays compact in the crowded
       header row.  Show just the music-note icon + chevron.
       Also restyle for the dark panel background. */
    .audio-player-panel .track-picker-label {
        display: inline;
        font-size: 10px;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .audio-player-panel .track-picker-btn {
        background: rgba(255,255,255,0.12);
        border-color: rgba(255,255,255,0.2);
        color: rgba(255,255,255,0.8);
        padding: 5px 8px;
        gap: 5px;
        border-radius: 8px;
    }
    .audio-player-panel .track-picker-btn.open,
    .audio-player-panel .track-picker-btn.alt-active {
        background: rgba(212,135,95,0.2);
        border-color: rgba(212,135,95,0.5);
        color: #d4875f;
    }
    .audio-player-panel .track-picker-chevron { color: rgba(255,255,255,0.5); }

    /* Dropdown: widen on mobile for easier touch targets.
       Stays absolute (parent chain is overflow:visible) but
       stretches to near-full viewport width. */
    .audio-player-panel .track-picker-dropdown {
        min-width: unset;
        max-width: unset;
        width: calc(100vw - 24px);
        right: -8px;
        z-index: 200;
        border-radius: 14px;
    }

    /* Collapse handle at top of sheet */
    .audio-player-panel .audio-player-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.25);
        border-radius: 2px;
        margin: 6px auto 8px;
    }
}

/* CSS variable for waveform — needs to be on root, not a property */
:root {
    --audio-wave-unplayed: rgba(0,0,0,0.22);
}

/* ═══ LIGHT THEME audio visibility boost (v2.25.7) ═══ */
/* Slightly stronger waveform + chip contrast on white background */
.audio-bpm-badge {
    background: rgba(var(--accent-rgb),0.12);
    color: var(--accent-primary);
}
.audio-bpm-badge:hover {
    background: rgba(var(--accent-rgb),0.2);
    color: var(--accent-primary);
}

/* ═══ GOLDEN HOUR theme — high-contrast audio overrides (v2.25.7) ═══
   Golden Hour has a warm dark-ish background so all audio elements
   need significantly more contrast than the 4-8% white they had. */
[data-theme="golden-hour"] .audio-player-panel {
    background: #3a332d;
    border-top-color: rgba(255,255,255,0.1);
    box-shadow: 0 -3px 12px rgba(0,0,0,0.25);
}
[data-theme="golden-hour"] .audio-waveform-container { background: rgba(0,0,0,0.25); }
[data-theme="golden-hour"] .audio-drop-zone { border-color: rgba(255,255,255,0.2); color: rgba(240,235,229,0.6); }
[data-theme="golden-hour"] .audio-drop-zone:hover { border-color: var(--accent-primary); }
[data-theme="golden-hour"] .audio-chip {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2) !important;
    color: rgba(240,235,229,0.85) !important;
}
[data-theme="golden-hour"] .audio-chip.active {
    background: rgba(255,255,255,0.15) !important;
}
[data-theme="golden-hour"] .audio-bpm-badge {
    background: rgba(var(--accent-rgb),0.25);
    color: #e8a878;
}
[data-theme="golden-hour"] .audio-file-name { color: rgba(240,235,229,0.9); }
[data-theme="golden-hour"] .audio-time { color: rgba(240,235,229,0.55); }
[data-theme="golden-hour"] .audio-skip-btn {
    border-color: rgba(255,255,255,0.15);
    color: rgba(240,235,229,0.7);
}
[data-theme="golden-hour"] .audio-skip-btn:hover {
    background: rgba(255,255,255,0.1);
    color: rgba(240,235,229,0.9);
}
[data-theme="golden-hour"] .audio-loop-toggle { color: rgba(240,235,229,0.5); opacity: 0.6; }
[data-theme="golden-hour"] .audio-loop-toggle:hover { opacity: 0.9; background: rgba(255,255,255,0.1); }
[data-theme="golden-hour"] .audio-loop-toggle.active { opacity: 1; color: #e8a878; }
[data-theme="golden-hour"] .audio-vocals-toggle { color: rgba(240,235,229,0.5); opacity: 0.6; }
[data-theme="golden-hour"] .audio-vocals-toggle:hover { opacity: 0.9; background: rgba(255,255,255,0.1); }
[data-theme="golden-hour"] .audio-vocals-toggle.active { opacity: 1; color: #e8a878; background: rgba(232,168,120,0.15); box-shadow: 0 0 0 2px #e8a878; }
[data-theme="golden-hour"] .audio-demucs-progress-bar { background: rgba(255,255,255,0.1); }
[data-theme="golden-hour"] .audio-zoom-inline { color: rgba(240,235,229,0.5); opacity: 0.7; }
[data-theme="golden-hour"] .audio-zoom-inline button:hover { background: rgba(255,255,255,0.1); }
[data-theme="golden-hour"] .audio-overflow-btn { color: rgba(240,235,229,0.6); }
[data-theme="golden-hour"] .audio-overflow-btn:hover { background: rgba(255,255,255,0.1); }
[data-theme="golden-hour"] .audio-overflow-dropdown {
    background: #3d2e24;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
[data-theme="golden-hour"] .audio-overflow-dropdown button { color: rgba(240,235,229,0.85); }
[data-theme="golden-hour"] .audio-overflow-dropdown button:hover { background: rgba(255,255,255,0.08); }
[data-theme="golden-hour"] .audio-chip-bars { color: rgba(240,235,229,0.4); }
[data-theme="golden-hour"] .audio-player-zone {
    border-top-color: rgba(255,255,255,0.1);
}
/* Golden Hour mini bar */
[data-theme="golden-hour"] .audio-mini-bar {
    background: #3a332d;
    border-top-color: rgba(255,255,255,0.08);
}
[data-theme="golden-hour"] .audio-mini-name { color: rgba(240,235,229,0.8); }
[data-theme="golden-hour"] .audio-mini-meta { color: rgba(240,235,229,0.45); }
[data-theme="golden-hour"] :root { --audio-wave-unplayed: rgba(255,255,255,0.35); }
[data-theme="golden-hour"] .audio-waveform-container { background: rgba(0,0,0,0.5); }

/* ═══ DARK THEME — boosted audio contrast (v2.25.7) ═══ */
[data-theme="dark"] .audio-player-panel { background: #1e1a17; }
[data-theme="dark"] .audio-waveform-container { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .audio-drop-zone { border-color: #3d3530; color: #8a7e78; }
[data-theme="dark"] .audio-chip {
    background: rgba(255,255,255,0.06);
    color: #b0a8a2 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
[data-theme="dark"] .audio-chip.active {
    background: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .audio-bpm-badge {
    background: rgba(var(--accent-rgb),0.2);
    color: #d4a080;
}
[data-theme="dark"] .audio-file-name { color: #c8beb8; }
[data-theme="dark"] .audio-time { color: #8a8280; }
[data-theme="dark"] .audio-skip-btn {
    border-color: #3d3530;
    color: #8a8280;
}
[data-theme="dark"] .audio-skip-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #b0a8a2;
}
[data-theme="dark"] .audio-loop-toggle { color: #8a8280; }
[data-theme="dark"] .audio-loop-toggle:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .audio-vocals-toggle { color: #8a8280; }
[data-theme="dark"] .audio-zoom-inline { color: #6a6260; }
[data-theme="dark"] .audio-overflow-btn { color: #8a8280; }
[data-theme="dark"] .audio-chip-bars { color: #6a6260; }
[data-theme="dark"] :root { --audio-wave-unplayed: rgba(255,255,255,0.25); }
[data-theme="dark"] .audio-waveform-container { background: rgba(0,0,0,0.45); }

/* ============================================
   EDITOR STYLES
   ============================================ */
.editor-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

.editor-toolbar {
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-medium);
    padding: var(--space-2) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    /* min-width:0 still needed so flex children can shrink below content size */
    min-width: 0;
    /* Don't grow — let the input size itself, let the right side anchor right */
    flex: 0 1 auto;
    /* Use clip instead of hidden — still prevents layout overflow
       but we pad 3px so the 2px focus ring on the title isn't clipped */
    overflow: visible;
    padding: 3px 0;
}

.back-button {
    background: var(--secondary-bg);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.back-button:hover {
    background: var(--tertiary-bg);
    box-shadow: var(--shadow-subtle);
}

.song-title-input {
    font-size: var(--text-lg);
    font-weight: 600;
    border: none;
    background: transparent;
    color: #d4875f;
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    /* Width is set dynamically by JS via titleSizerRef.
       min/max enforced in the useEffect clamp. */
    min-width: 120px;
    max-width: 600px;
    /* Don't flex-grow — let the sizer control width */
    flex: 0 0 auto;
    overflow: hidden;
    white-space: nowrap;
}

/* Hidden mirror span — same font metrics as .song-title-input.
   Invisible and out of flow but must be in the DOM to measure. */
.song-title-sizer {
    position: absolute;
    visibility: hidden;
    white-space: pre;           /* preserves spaces in measurement */
    pointer-events: none;
    font-size: var(--text-lg);
    font-weight: 600;
    font-family: var(--font-primary);
    padding: var(--space-1) var(--space-3);
    letter-spacing: normal;
}

.song-title-input:hover {
    background: var(--secondary-bg);
}

.song-title-input:focus {
    outline: none;
    background: var(--secondary-bg);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

/* Version Badge */
.version-badge {
    background: rgba(74, 155, 127, 0.12);
    color: var(--success);
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid var(--success);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.version-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.toolbar-right {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-medium);
}

.btn-share {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-share:hover {
    background: var(--tertiary-bg);
    box-shadow: var(--shadow-subtle);
}

/* Collaborators button */
.btn-collaborators {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-collaborators:hover {
    background: var(--tertiary-bg);
    box-shadow: var(--shadow-subtle);
}

/* Badge showing collaborator count on button */
.collab-count-badge {
    background: var(--cream);
    color: var(--brand);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: var(--space-1);
}

.btn-export {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-export:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-dark);
}

.editor-main {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.preview-panel {
    /* Width now set by inline style from splitPercent state */
    background: var(--primary-bg);
    border-right: none; /* handle provides visual separation */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

/* ── Resizable split handle between preview & editor ──
   Hairline 1px border with a small pill grab indicator.
   Wide invisible hit area for easy dragging via padding. */
.split-handle {
    width: 12px;
    cursor: col-resize;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    margin: 0 -6px; /* overlap panels so it doesn't eat layout space */
}
/* The visible hairline — drawn as a pseudo-element */
.split-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.06);
    transition: background 0.2s;
}
.split-handle:hover::before {
    background: rgba(0, 0, 0, 0.10);
}
/* The pill grab indicator — centered on the hairline */
.split-handle-pill {
    width: 5px;
    height: 28px;
    border-radius: 4px;
    background: var(--border-medium);
    transition: background 0.2s;
    position: relative;
    z-index: 1;
}
.split-handle:hover .split-handle-pill {
    background: var(--accent-primary);
}

.font-controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.font-control-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.font-control-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.font-size-display {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-family: 'Menlo', monospace;
    min-width: 32px;
    text-align: center;
}

.preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 24px;
    background: var(--primary-bg);
}

.preview-text {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-primary);
    font-weight: 600;
    white-space: normal;
    width: 100%;
    transition: font-size 0.2s ease;
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}

.preview-island-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    background: var(--tertiary-bg);
    border-radius: 8px 8px 0 0;
}

.preview-island-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.preview-island-title {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.preview-island-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 0;
}

/* Editable theme/subtitle field — v2.15.34
   Matches the old static instruction style:
   small, light, italic. No border. Click to edit. */
.preview-island-theme {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 1.4em;
}
.preview-island-theme:focus {
    color: var(--text-primary);
}
.preview-island-theme::placeholder {
    color: var(--text-tertiary);
}

.preview-island-body {
    padding: var(--space-3);
    flex: 1;
    overflow: visible;
}

.preview-section {
    margin-bottom: var(--space-4);
}

/* Section labels inherit from .preview-text so they
   scale when the user changes preview font size. */
.preview-section-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #b0724e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
    margin-top: 0;
}

.preview-line {
    margin-bottom: 0;
    position: relative;
    white-space: pre-wrap;
    word-wrap: break-word;
    cursor: pointer;
    padding: 0 0 0 2px;
    border-radius: 4px;
    transition: background 0.2s ease, padding 0.15s ease;
}

.preview-line:hover {
    background: var(--tertiary-bg);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.preview-line.empty {
    color: var(--text-tertiary);
    font-style: italic;
}

.editor-panel {
    flex: 1;
    background: var(--primary-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-header {
    padding: var(--space-2) var(--space-6);
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-light);
    border-radius: 0 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-header-left {
    display: flex;
    flex-direction: column;
}

/* Right side of editor header: star view toggles + Add Section.
   These live here (not the top toolbar) because they control the
   editor spreadsheet view, not the song itself. */
.editor-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Small inline toggle buttons for Sort stars / Focus stars.
   Visually quieter than btn-secondary so they don't compete
   with + Add Section. They activate with a terracotta tint. */
.btn-editor-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-editor-view:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.06);
}
.btn-editor-view.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.1);
    font-weight: 600;
}

.editor-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.editor-subtitle {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.editor-spreadsheet {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.section-block {
    background: var(--secondary-bg);
    border-radius: 12px;
    /* Minimal vertical padding — rows sit tight against header and bottom */
    padding: 0 var(--space-6) var(--space-1);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.section-block.dragging {
    opacity: 0.4;
}

.section-block.drag-over {
    border-top: 3px solid var(--accent-primary);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Small top pad so label doesn't touch card edge,
       zero bottom margin so first row is flush */
    padding: var(--space-2) 0 var(--space-1) 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-light);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: grab;
    padding: var(--space-1);
    user-select: none;
}

.section-drag-handle:active {
    cursor: grabbing;
}

.delete-section-btn {
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.delete-section-btn:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.section-label-input {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    background: transparent;
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    transition: all 0.2s ease;
    min-width: 100px;
}

.section-label-input:hover {
    background: rgba(212, 135, 95, 0.05);
}

.section-label-input:focus {
    outline: none;
    background: var(--secondary-bg);
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.lyric-row {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    align-items: stretch;
    padding: 0;
    border-radius: 0;
    transition: all 0.2s ease;
    overflow-x: auto;
    overflow-y: visible;
    border-bottom: 1px solid var(--border-light);
}

.lyric-row::-webkit-scrollbar {
    display: none;
}

.lyric-row {
    scrollbar-width: none;
}

.lyric-row:hover {
    background: var(--tertiary-bg);
}

.lyric-row.dragging {
    opacity: 0.4;
    background: var(--tertiary-bg);
}

.lyric-row.drag-over {
    border-top: 3px solid var(--accent-primary);
    padding-top: calc(var(--space-2) - 3px);
}

.row-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: grab;
    padding: var(--space-1);
    user-select: none;
    flex-shrink: 0;
    width: 24px;
}

.row-handle:active {
    cursor: grabbing;
}

/* ── variation-cell: wrapper that holds textarea + star side by side ──
   This is the structural fix for the "star covering text" problem.
   The star lives in a fixed-width column to the right of the text;
   it is NEVER position:absolute over the textarea content.
   Width = textarea width + star column width so each cell is a fixed,
   predictable size in the horizontal scroll.
   ── v2.15.39 ── */
.variation-cell {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    border-right: 1px solid var(--border-light);
    position: relative;
    transition: background 0.12s ease;
}
.variation-cell:last-of-type {
    border-right: none;
}
/* Starred-but-not-selected cells get a permanent light terracotta wash —
   just enough to signal "this is marked" without competing with the
   bold green of the active/selected cell */
.variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.08);
}
/* Active cell background lives on the WRAPPER, not the textarea,
   so the star button column inherits it and reads as one unified block */
.variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.12);
}
/* On hover: keep active cell at full strength (don't dim it) */
.lyric-row:hover .variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.12);
}
/* Deepen the terracotta slightly on row hover */
.lyric-row:hover .variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.13);
}
.lyric-row:hover .variation-cell.cell-active.cell-favorited {
    background: rgba(74, 155, 127, 0.09);
}

/* Cell being edited — entire cell (including star column) gets the editing bg
   so there's no visual seam between textarea and star area */
.variation-cell.cell-editing {
    background: var(--secondary-bg);
}
[data-theme="golden-hour"] .variation-cell.cell-editing {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .variation-cell.cell-editing {
    background: #2a2520;
}

/* ── Star button — fixed 22px column, never overlaps text ──
   SVG icon: 12x12 star, filled when starred, outline when not.
   Sits flush to the right of the textarea within the cell flex row. */
.var-star-btn {
    width: 22px;
    flex-shrink: 0;
    border: none;
    /* transparent lets the .variation-cell wrapper's background show through.
       We use transparent (not inherit) because browsers apply a UA default
       background-color to <button> elements that 'inherit' cannot override
       without !important. transparent always defers to the parent's background
       regardless of UA styles, so green active cells and terracotta favorited
       cells read as one unified block with no visible seam. */
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    padding-top: 8px;             /* nudge SVG to align with first text baseline */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;                   /* invisible until row hover or starred */
    transition: opacity 0.15s, color 0.15s;
}
.var-star-btn:hover {
    color: var(--accent-primary);
    /* No transform scale — scaling shifts the button position and makes
       it a moving target when the user tries to click it */
}
/* Always show the star when it's actually starred */
.var-star-btn.starred {
    opacity: 1;
    color: #d4875f;
}
/* Show star only when hovering the specific cell, not the whole row.
   This prevents all stars appearing at once, making each one a stable target. */
.variation-cell:hover .var-star-btn {
    opacity: 1;
}

/* Author attribution tag — shows first name on hover */
.var-author-tag {
    position: absolute;
    bottom: 2px;
    right: 22px; /* clear the star button column */
    font-size: 9px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
}
.variation-cell:hover .var-author-tag {
    opacity: 0.7;
}
[data-theme="golden-hour"] .var-author-tag { color: rgba(240,235,229,0.5); }
[data-theme="dark"] .var-author-tag { color: rgba(200,192,182,0.5); }

/* ── Right-click attribution context menu ── */
.attr-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.attr-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    max-width: 260px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 4px;
    font-family: var(--font-primary);
    animation: attr-menu-in 0.12s ease-out;
}
@keyframes attr-menu-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.attr-menu-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px 4px;
}
.attr-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.1s;
    text-align: left;
}
.attr-menu-item:hover {
    background: rgba(var(--accent-rgb),0.08);
}
.attr-menu-name {
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attr-menu-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.1);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}
.attr-menu-email {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
/* Golden hour */
[data-theme="golden-hour"] .attr-menu {
    background: #4e4438;
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .attr-menu-header { color: rgba(240,235,229,0.4); }
[data-theme="golden-hour"] .attr-menu-item { color: #f0ebe5; }
[data-theme="golden-hour"] .attr-menu-item:hover { background: rgba(255,255,255,0.08); }
[data-theme="golden-hour"] .attr-menu-email { color: rgba(240,235,229,0.4); }
/* Dark */
[data-theme="dark"] .attr-menu {
    background: #2a2520;
    border-color: #302b26;
}
[data-theme="dark"] .attr-menu-header { color: #6a6260; }
[data-theme="dark"] .attr-menu-item { color: #c8c0b6; }
[data-theme="dark"] .attr-menu-item:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .attr-menu-email { color: #6a6260; }

.variation-textarea {
    width: 180px;
    min-width: 180px;
    flex-shrink: 0;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    /* Font family is set via .lyric-font-mono or .lyric-font-sans
       applied dynamically from the settings panel */
    font-size: var(--text-sm);
    /* Option C: full text-primary contrast across all themes.
       Previously --text-secondary (#6b6b6b in light) was too dim.
       Dark and golden-hour overrides below set their own values. */
    color: var(--text-primary);
    transition: all 0.2s ease;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    cursor: pointer;
}

.variation-textarea:hover {
    background: rgba(212, 135, 95, 0.05);
}

/* Read-only (default): pointer cursor, no text editing */
.variation-textarea:not(.editing) {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Focus ring when selected but not editing */
.variation-textarea:focus:not(.editing) {
    outline: 2px solid rgba(212, 135, 95, 0.4);
    outline-offset: -2px;
    background: rgba(212, 135, 95, 0.06);
}

/* Editing state: cursor changes, editable look */
.variation-textarea.editing {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    /* Background handled by parent .cell-editing so star column matches */
    background: transparent;
    color: var(--text-primary);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Generic focus (for editing state) */
.variation-textarea:focus {
    outline: none;
}
.variation-textarea.editing:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: transparent;
    color: var(--text-primary);
}

/* Another user is editing this cell */
.variation-textarea.occupied {
    cursor: not-allowed;
}

.variation-textarea.active {
    /* Background removed — now on .variation-cell.cell-active so the
       star button column inherits it and the cell reads as one block */
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    border-left: 3px solid var(--success);
    padding-left: calc(var(--space-3) - 2px);
}

.row-controls {
    display: flex;
    gap: var(--space-2);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0 var(--space-2);
    flex-shrink: 0;
    align-items: center;
}

.lyric-row:hover .row-controls {
    opacity: 1;
}

.mini-btn {
    padding: var(--space-1);
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.mini-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.mini-btn.delete:hover {
    background: var(--error);
    border-color: var(--error);
}


.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
}

.status-dot.connected {
    background: var(--success);
    animation: pulse 2s infinite;
}

/* ============================================
   VERSION CONTROL SIDEBAR
   ============================================ */
.version-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 100%;
    background: var(--secondary-bg);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-large);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.version-sidebar.open {
    transform: translateX(0);
}

.version-sidebar-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-light);
    background: var(--tertiary-bg);
}

.version-sidebar-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-sidebar {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1.5rem;
    padding: var(--space-1);
    transition: color 0.2s ease;
}

.close-sidebar:hover {
    color: var(--text-primary);
}

.version-sidebar-subtitle {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.version-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.version-list-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-tertiary);
}

.version-list-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.3;
}

.version-item {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-item:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-medium);
}

.version-item.active {
    border-color: var(--success);
    background: rgba(74, 155, 127, 0.05);
}

.version-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-2);
}

.version-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.version-badge-small {
    background: var(--success);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
}

.version-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    display: flex;
    gap: var(--space-2);
}

.version-notes {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: rgba(212, 135, 95, 0.05);
    border-radius: 4px;
}

.version-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.btn-small {
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-small:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.btn-small.danger:hover {
    background: var(--error);
    border-color: var(--error);
}

/* ============================================
   AUDIO TRACK PICKER (v2.36)
   ============================================ */

/* Picker button — sits in the audio-player-header row */
.track-picker-wrapper {
    position: relative;
    flex-shrink: 0;
}
.track-picker-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.track-picker-btn:hover {
    background: var(--tertiary-bg);
    border-color: var(--accent-primary);
}
.track-picker-btn.open {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.06);
}
.track-picker-icon {
    width: 13px; height: 13px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-primary);
}
.track-picker-chevron {
    width: 10px; height: 10px;
    color: var(--text-tertiary);
    transition: transform 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.track-picker-btn.open .track-picker-chevron { transform: rotate(180deg); }

/* Dropdown — opens ABOVE the player since player is at the bottom */
.track-picker-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    max-width: 340px;
    background: var(--primary-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(45,45,45,0.14), 0 2px 8px rgba(45,45,45,0.08);
    z-index: 60;
    overflow: hidden;
}

.track-picker-header {
    padding: 14px 16px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
}
.track-picker-list {
    padding: 4px 6px;
    max-height: 300px;
    overflow-y: auto;
}

/* Individual track item */
.track-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.12s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
}
.track-item:hover { background: var(--tertiary-bg); }
.track-item.active { background: rgba(var(--accent-rgb),0.08); }

.track-item-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.track-item-icon.icon-original { background: rgba(74,155,127,0.12); color: var(--success); }
.track-item-icon.icon-stem-instrumental { background: rgba(90,143,186,0.12); color: #5a8fba; }
.track-item-icon.icon-stem-vocals { background: rgba(212,135,95,0.12); color: #d4875f; }
.track-item-icon.icon-uploaded { background: rgba(var(--accent-rgb),0.10); color: var(--accent-primary); }

.track-item-info {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.track-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.track-item-meta {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.track-auto-tag {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-tertiary);
    background: var(--tertiary-bg);
    padding: 2px 6px;
    border-radius: 4px;
}
.track-item-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-size: 0;
}
.track-item.active .track-item-check {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* Upload alternate button */
.track-picker-footer {
    padding: 6px 6px 8px;
    border-top: 1px solid var(--border-light);
}
.track-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px dashed rgba(0,0,0,0.12);
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: #999;
    cursor: pointer;
    transition: all 0.15s;
}
.track-add-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb),0.04);
}

/* Hidden file input for alternate upload */
.track-upload-input {
    display: none;
}

/* Stem processing status (v2.37.1) */
.track-stem-processing {
    cursor: default;
}
.track-stem-processing .track-item-name {
    color: #5a8fba;
    font-weight: 500;
    animation: stem-pulse 2s ease-in-out infinite;
}
.track-stem-processing .track-item-meta {
    opacity: 0.5;
}
/* Step-based progress bar (v2.37.1) */
.stem-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.stem-progress-bar {
    flex: 1;
    height: 3px;
    background: rgba(90,143,186,0.15);
    border-radius: 2px;
    overflow: hidden;
    min-width: 60px;
    max-width: 120px;
}
.stem-progress-fill {
    display: block;
    height: 100%;
    background: #5a8fba;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.stem-progress-step {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    font-family: var(--font-mono);
}
.stem-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(90,143,186,0.15);
    border-top-color: #5a8fba;
    border-radius: 50%;
    animation: stem-spin 0.8s linear infinite;
}
@keyframes stem-spin {
    to { transform: rotate(360deg); }
}
@keyframes stem-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.track-stem-failed {
    cursor: default;
    opacity: 0.5;
}

/* Upload progress bar in track picker */
.track-uploading {
    position: relative;
    cursor: default;
}
.track-upload-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--accent-primary);
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* Alt-active button state — shows when an alternate track is playing */
.track-picker-btn.alt-active {
    background: rgba(90,143,186,0.1);
    border-color: rgba(90,143,186,0.3);
}
.track-picker-btn.alt-active .track-picker-label {
    color: #5a8fba;
}

/* Dark theme overrides */
[data-theme="dark"] .track-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .track-add-btn { border-color: rgba(255,255,255,0.1); color: #999; }
[data-theme="dark"] .track-add-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
[data-theme="dark"] .track-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .track-item.active { background: rgba(var(--accent-rgb),0.12); }
[data-theme="dark"] .track-picker-btn.alt-active { background: rgba(90,143,186,0.15); }
[data-theme="dark"] .stem-spinner { border-color: rgba(90,143,186,0.15); border-top-color: #88bae0; }
[data-theme="dark"] .track-stem-processing .track-item-name { color: #88bae0; }
[data-theme="dark"] .stem-progress-bar { background: rgba(90,143,186,0.15); }
[data-theme="dark"] .stem-progress-fill { background: #88bae0; }
[data-theme="dark"] .stem-progress-step { color: #777; }

/* ============================================
   VERSION PREVIEW + CHERRY-PICK (v2.35)
   ============================================ */

/* Preview accent palette — distinct purple to separate from green (active) and terracotta (starred) */
:root {
    --preview-accent: #7b68ee;
    --preview-bg: #f0eef8;
    --preview-border: #c5bde6;
}

/* Preview mode banner — fixed bar below toolbar when previewing a saved version */
.preview-banner {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    background: var(--preview-bg);
    border-bottom: 2px solid var(--preview-accent);
    font-size: var(--text-sm);
    color: #5a4d8e;
    z-index: 10;
}
.preview-banner.visible { display: flex; }

.preview-banner-icon {
    width: 22px; height: 22px;
    background: var(--preview-accent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.preview-banner-text { flex: 1; }
.preview-banner-text strong { font-weight: 600; }

.preview-banner .btn-exit-preview {
    padding: 5px 14px;
    border-radius: 6px;
    background: var(--preview-accent);
    color: #fff;
    border: none;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.preview-banner .btn-exit-preview:hover { opacity: 0.85; }

/* Preview variation cells — purple-tinted, appended after live cells */
.variation-cell.preview-cell {
    background: var(--preview-bg);
    border-right-color: var(--preview-border);
    cursor: pointer;
    position: relative;
    min-width: 180px;
    max-width: 180px;
}
.variation-cell.preview-cell::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--preview-accent);
    border-radius: 2px 0 0 2px;
}
.variation-cell.preview-cell:hover {
    background: #e4e0f3;
}

/* "+ Add" hint on hover */
.preview-add-hint {
    display: none;
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 10px;
    color: var(--preview-accent);
    font-weight: 600;
    background: rgba(255,255,255,0.85);
    padding: 1px 6px;
    border-radius: 4px;
}
.variation-cell.preview-cell:hover .preview-add-hint { display: block; }

/* Preview cell text — read-only look */
.preview-cell .variation-textarea {
    color: #5a4d8e;
    cursor: pointer;
}

/* Cherry-pick animation — flash purple then settle to green (added to live) */
@keyframes cherryPicked {
    0% { background: rgba(123, 104, 238, 0.25); }
    100% { background: transparent; }
}
.variation-cell.just-picked {
    animation: cherryPicked 0.8s ease-out forwards;
}

/* Version item in sidebar — previewing state */
.version-item.previewing {
    border-color: var(--preview-accent);
    background: var(--preview-bg);
}
.version-badge-small.preview-badge {
    background: rgba(123, 104, 238, 0.15);
    color: var(--preview-accent);
}
.version-badge-small.auto-badge {
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-secondary);
    font-style: italic;
}

/* Preview confirm modal */
.preview-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(45, 45, 45, 0.35);
    z-index: 150;
    align-items: center;
    justify-content: center;
}
.preview-modal-overlay.visible { display: flex; }

.preview-modal {
    background: var(--secondary-bg);
    border-radius: 16px;
    padding: 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--shadow-large);
}
.preview-modal h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}
.preview-modal p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 20px;
}
.preview-modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}
.preview-modal-btn {
    padding: var(--space-2) var(--space-5);
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-primary);
    transition: all 0.15s;
}
.preview-modal-btn:hover { background: var(--tertiary-bg); }
.preview-modal-btn.primary {
    background: var(--preview-accent);
    color: #fff;
    border-color: var(--preview-accent);
}
.preview-modal-btn.primary:hover { opacity: 0.9; }

/* ── Mobile preview banner ── */
.mobile-preview-banner {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--preview-bg);
    border-bottom: 2px solid var(--preview-accent);
    font-size: 12px;
    color: #5a4d8e;
}
.mobile-preview-banner.visible { display: flex; }
.mobile-preview-banner-text { flex: 1; font-weight: 500; }
.mobile-preview-banner .btn-exit-preview {
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--preview-accent);
    color: #fff;
    border: none;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

/* Mobile preview cells */
.mobile-variation-card.preview-card {
    background: var(--preview-bg);
    border-color: var(--preview-border);
    cursor: pointer;
    position: relative;
}
.mobile-variation-card.preview-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--preview-accent);
    border-radius: 3px 0 0 3px;
}
.mobile-variation-card.preview-card:hover {
    background: #e4e0f3;
}
.mobile-preview-add-hint {
    font-size: 10px;
    color: var(--preview-accent);
    font-weight: 600;
    text-align: right;
    margin-top: 2px;
}

/* Dark theme overrides for preview */
[data-theme="dark"] .preview-banner,
[data-theme="dark"] .mobile-preview-banner {
    background: rgba(123, 104, 238, 0.12);
    border-bottom-color: var(--preview-accent);
    color: #b3a8e8;
}
[data-theme="dark"] .variation-cell.preview-cell,
[data-theme="dark"] .mobile-variation-card.preview-card {
    background: rgba(123, 104, 238, 0.1);
}
[data-theme="dark"] .variation-cell.preview-cell:hover,
[data-theme="dark"] .mobile-variation-card.preview-card:hover {
    background: rgba(123, 104, 238, 0.18);
}
[data-theme="dark"] .preview-cell .variation-textarea { color: #b3a8e8; }
[data-theme="dark"] .preview-modal { background: var(--secondary-bg); }
[data-theme="dark"] .version-item.previewing { background: rgba(123, 104, 238, 0.1); }

/* Golden hour theme overrides for preview */
[data-theme="golden-hour"] .preview-banner,
[data-theme="golden-hour"] .mobile-preview-banner {
    background: rgba(123, 104, 238, 0.08);
}
[data-theme="golden-hour"] .variation-cell.preview-cell,
[data-theme="golden-hour"] .mobile-variation-card.preview-card {
    background: rgba(123, 104, 238, 0.08);
}

/* ============================================
   VERSION TOAST
   ============================================ */
.version-toast {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    background: var(--success);
    color: white;
    padding: var(--space-4) var(--space-6);
    border-radius: 8px;
    box-shadow: var(--shadow-large);
    display: none;
    align-items: center;
    gap: var(--space-3);
    z-index: 2000;
    font-size: var(--text-sm);
    font-weight: 500;
}

.version-toast.show {
    display: flex;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   LYRIC BANK — Chip Cloud Sidebar
   ============================================ */

/* ── Desktop sidebar ── */
.lyric-bank-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: var(--secondary-bg);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-large);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
    display: flex;
    flex-direction: column;
}

.lyric-bank-sidebar.open {
    transform: translateX(0);
}

/* ── Header ── */
.lyric-bank-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    background: var(--tertiary-bg);
}

.lyric-bank-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.lyric-bank-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.lyric-bank-title svg {
    color: var(--accent-primary);
}

.lyric-bank-count {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 99px;
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-primary);
}

.lyric-bank-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1.4rem;
    padding: var(--space-1);
    line-height: 1;
    transition: color 0.2s ease;
}

.lyric-bank-close:hover {
    color: var(--text-primary);
}

/* ── Input row ── */
.lyric-bank-input-row {
    display: flex;
    gap: var(--space-2);
}

.lyric-bank-input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--primary-bg);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

.lyric-bank-input:focus {
    border-color: var(--accent-primary);
}

.lyric-bank-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.lyric-bank-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border-radius: 6px;
    border: 1px solid rgba(212, 135, 95, 0.3);
    background: rgba(212, 135, 95, 0.08);
    color: var(--accent-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lyric-bank-add-btn:hover {
    background: rgba(212, 135, 95, 0.18);
}

/* ── Controls row ── */
.lyric-bank-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.lyric-bank-sort-group {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.lyric-bank-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    font-size: 0.625rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.lyric-bank-sort-btn + .lyric-bank-sort-btn {
    border-left: 1px solid var(--border-light);
}

.lyric-bank-sort-btn.active {
    background: rgba(212, 135, 95, 0.1);
    color: var(--accent-primary);
}

.lyric-bank-hint {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* ── Chip cloud ── */
.lyric-bank-cloud {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
}

.lyric-bank-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

.lyric-bank-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid var(--border-light);
    background: var(--tertiary-bg);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.lyric-bank-chip:hover {
    transform: scale(1.03);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.lyric-bank-chip:active {
    transform: scale(0.96);
}

.lyric-bank-chip.starred {
    background: rgba(212, 135, 95, 0.08);
    border-color: rgba(212, 135, 95, 0.25);
    color: var(--text-primary);
}

.lyric-bank-chip-star {
    color: var(--text-tertiary);
    opacity: 0.3;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.lyric-bank-chip.starred .lyric-bank-chip-star {
    color: #d4875f;
    opacity: 1;
}

.lyric-bank-chip:hover .lyric-bank-chip-star {
    opacity: 0.7;
}

/* ── Empty state ── */
.lyric-bank-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-align: center;
    gap: var(--space-1);
}

/* ── Footer ── */
.lyric-bank-footer {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    font-size: 0.625rem;
    color: var(--text-tertiary);
    opacity: 0.6;
    border-top: 1px solid var(--border-light);
}

/* ── Toast ── */
.lyric-bank-toast {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: var(--space-2) var(--space-4);
    border-radius: 6px;
    background: var(--accent-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
    z-index: 10;
}

.lyric-bank-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Toolbar button (matches btn-versions) ── */
.btn-lyric-bank {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-lyric-bank:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-lyric-bank.active {
    background: rgba(212, 135, 95, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ── Mobile lyric bank (side drawer from right) ── */
.lyric-bank-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 199;
}

.lyric-bank-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.lyric-bank-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 78%;
    max-width: 340px;
    background: var(--secondary-bg);
    border-left: 1px solid var(--border-light);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.lyric-bank-mobile.open {
    transform: translateX(0);
}

/* Mobile adjustments — tighter chips, better spacing */
.lyric-bank-mobile .lyric-bank-chip {
    font-size: 0.75rem;
    padding: 5px 12px;
}

/* Dark theme: darker backdrop */
[data-theme="dark"] .lyric-bank-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* ── Dark theme overrides ── */
[data-theme="dark"] .lyric-bank-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .lyric-bank-chip.starred {
    background: rgba(212, 135, 95, 0.1);
    border-color: rgba(212, 135, 95, 0.2);
}

[data-theme="dark"] .lyric-bank-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Golden hour overrides ── */
[data-theme="golden-hour"] .lyric-bank-sidebar,
[data-theme="golden-hour"] .lyric-bank-mobile {
    background: #ffffff;
}

[data-theme="golden-hour"] .lyric-bank-header {
    background: #faf8f5;
}

/* ============================================
   MOBILE EDITOR STYLES
   v2.9.0 - Complete mobile UI
   ============================================ */

/* ============================================
   MOBILE LOADING STATE
   ============================================ */
.mobile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--primary-bg);
    color: var(--text-secondary);
    padding: var(--space-6);
    text-align: center;
}

.mobile-btn-primary {
    background: var(--accent-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: 8px;
    border: none;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

/* ============================================
   MOBILE EDITOR CONTAINER
   ============================================ */
.mobile-editor-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    background: var(--primary-bg);
    position: relative;
    /* Lock to viewport — no horizontal or vertical overflow */
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
}

/* ============================================
   MOBILE HEADER
   ============================================ */
.mobile-header {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-light);
    gap: var(--space-3);
    flex-shrink: 0;
    min-height: 44px;
}

.mobile-back-btn {
    background: none;
    border: none;
    padding: var(--space-2);
    color: var(--accent-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-back-btn:active {
    background: var(--tertiary-bg);
}

.mobile-song-title {
    flex: 1;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* v2.33.0: Spacer replaces title in header — pushes actions right */
.mobile-header-spacer {
    flex: 1;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mobile-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: background 0.3s;
}

.mobile-status-dot.connected {
    background: var(--success);
    animation: mobilePulse 2s infinite;
}

@keyframes mobilePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.mobile-menu-btn {
    background: none;
    border: none;
    padding: var(--space-2);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.mobile-menu-btn:active {
    background: var(--tertiary-bg);
}

/* Mobile accent bar — v2.15.27 */
.mobile-accent-bar {
    padding: 6px 16px;
    position: relative;
    z-index: 100;
}
.mobile-accent-bar .mobile-status-dot {
    position: static;
    width: 7px;
    height: 7px;
}

/* Mobile undo/redo buttons — v2.15.21 */
.mobile-undo-btn,
.mobile-redo-btn {
    background: none;
    border: none;
    padding: 6px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: opacity 0.15s;
}
.mobile-undo-btn:active,
.mobile-redo-btn:active {
    background: var(--tertiary-bg);
}
.mobile-undo-btn.disabled,
.mobile-redo-btn.disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* ============================================
   MOBILE DASHBOARD — Claude-inspired layout
   Bottom search, filter tabs, centered branding
   ============================================ */

.mobile-dashboard {
    /* Full viewport, flex column, no scroll on container */
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* dynamic viewport for iOS */
    overflow: hidden;
}

/* ── Header: gear · logo · avatar ── */
.m-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: env(safe-area-inset-top, 8px) 20px 8px;
    flex-shrink: 0;
    position: relative;
}
.m-dash-gear {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-tertiary);
}
/* Branding stack: logo + version underneath.
   Starts hidden — fades in as greeting hero scrolls away. */
.m-dash-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Span the visible content area (below safe area, above bottom padding) */
    top: env(safe-area-inset-top, 8px);
    bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 1;
    pointer-events: auto;
}
/* Strip the rounded rectangle from the avatar button on mobile header */
.m-dash-header .user-menu-button {
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
}
.m-dash-header .user-menu-button:hover {
    background: none;
    border-color: transparent;
}
.m-dash-header .user-avatar {
    width: 30px;
    height: 30px;
}
.m-dash-header .user-name {
    display: none;
}
.m-dash-header .accent-version {
    font-weight: 500;
    font-size: 14px;
    color: var(--brand);
    background: rgba(var(--accent-rgb),0.1);
    padding: 3px 14px;
    border-radius: 20px;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
}
.m-dash-version {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Filter tabs ── */
.m-dash-tabs {
    display: flex;
    margin: 4px 20px 0;
    background: rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 3px;
    flex-shrink: 0;
}
.m-dash-tab {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-primary);
}
.m-dash-tab.active {
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ── Song count ── */
.m-dash-count {
    padding: 14px 24px 6px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 500;
    flex-shrink: 0;
}

/* ── Scrollable area — contains greeting + songs ── */
.m-dash-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Song list (inside scroll area) ── */
.m-dash-list {
    padding: 0 16px;
    /* Room for the bottom bar */
    padding-bottom: 90px;
}

/* ── Song card ── */
.m-dash-card {
    background: var(--secondary-bg);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid var(--border-light);
    transition: transform 0.15s, box-shadow 0.15s;
}
.m-dash-card:active {
    transform: scale(0.98);
}
.m-dash-card.actions-revealed {
    border-color: var(--accent-primary);
    background: var(--tertiary-bg);
}
.m-dash-card-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.m-dash-card-info {
    flex: 1;
    min-width: 0;
}
.m-dash-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-dash-card-theme {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-dash-card-meta {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
}
.m-dash-card-chevron {
    color: var(--border-medium);
    flex-shrink: 0;
}

/* ── Bottom bar: search + new song ── */
.m-dash-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px calc(env(safe-area-inset-bottom, 12px) + 10px);
    display: flex;
    gap: 10px;
    align-items: center;
    /* Gradient fade so content scrolls behind gracefully */
    background: linear-gradient(
        transparent 0%,
        var(--primary-bg) 30%
    );
    z-index: 50;
    /* opacity + pointer-events controlled by JS scroll handler */
}
.m-dash-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--secondary-bg);
    border-radius: 24px;
    padding: 8px 14px;
    border: 1px solid var(--border-light);
}
.m-dash-search svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.m-dash-search input {
    border: none;
    outline: none;
    background: none;
    flex: 1;
    font-size: 15px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}
.m-dash-search input::placeholder {
    color: var(--text-tertiary);
}
.m-dash-search-clear {
    background: none;
    border: none;
    padding: 2px;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
}
.m-dash-new-btn {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.m-dash-new-btn:active {
    background: var(--tertiary-bg);
}

/* ── Greeting hero — fade-on-scroll welcome area ──
   Contains watermark logo, time-based greeting, paste box,
   and New Song button. Fades out as user scrolls into songs,
   while header branding simultaneously fades in. */
.m-greeting-hero {
    padding: 90px 24px 24px;
    text-align: center;
    will-change: opacity, transform;
}
.m-greeting-logo {
    margin-bottom: 20px;
}
.m-greeting-brick-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0.15;
}
.m-greeting-brick-logo .gb-row {
    display: flex;
    gap: 3px;
}
.m-greeting-brick-logo .gb {
    display: block;
    border-radius: 2.5px;
    background: var(--brand);
}
.m-greeting-brick-logo .gb-row:nth-child(1) .gb { width: 56px; height: 12px; }
.m-greeting-brick-logo .gb-row:nth-child(2) .gb { width: 27px; height: 12px; }
.m-greeting-brick-logo .gb-row:nth-child(3) .gb { width: 17px; height: 12px; }
.m-greeting-brick-logo .gb-row:nth-child(4) .gb { width: 56px; height: 12px; background: #d4875f; }

.m-greeting-text {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: 4px;
}
.m-greeting-sub {
    font-family: var(--font-serif);
    font-size: 17px;
    font-style: italic;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

/* Paste box — real textarea for pasting lyrics */
.m-paste-box {
    background: var(--secondary-bg);
    border: 1.5px solid var(--border-light);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: left;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}
.m-paste-box:focus-within {
    border-color: var(--accent-primary);
}
.m-paste-textarea {
    width: 100%;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    resize: none;
    min-height: 60px;
}
.m-paste-textarea::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}
.m-paste-box.has-text .m-paste-textarea {
    min-height: 100px;
}
.m-paste-create-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: var(--accent-primary);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.m-paste-create-btn:active {
    opacity: 0.8;
}
.m-paste-create-btn:disabled {
    opacity: 0.6;
}

/* New Song button in greeting hero */
.m-greeting-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 12px;
}
.m-greeting-new-btn:active {
    transform: scale(0.97);
}

/* Scroll hint chevron */
.m-scroll-hint {
    text-align: center;
    padding: 6px 0 0;
    color: var(--text-tertiary);
    opacity: 0.4;
    animation: m-gentle-bounce 2s ease-in-out infinite;
}
@keyframes m-gentle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Divider between greeting and songs */
.m-greeting-divider {
    display: flex;
    align-items: center;
    padding: 16px 24px 8px;
}
.m-greeting-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.m-greeting-divider-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    padding: 0 12px;
}

/* ── Golden Hour overrides for mobile dashboard ── */
[data-theme="golden-hour"] .m-dash-header {
    /* Already inherits golden-hour primary-bg */
}
[data-theme="golden-hour"] .m-dash-gear {
    background: none;
    color: rgba(240,235,229,0.5);
}
[data-theme="golden-hour"] .m-dash-tabs {
    background: rgba(0,0,0,0.12);
}
[data-theme="golden-hour"] .m-dash-tab {
    color: rgba(240,235,229,0.5);
}
[data-theme="golden-hour"] .m-dash-tab.active {
    background: rgba(255,255,255,0.12);
    color: #f0ebe5;
}
[data-theme="golden-hour"] .m-dash-version {
    color: rgba(240,235,229,0.35);
}
/* Greeting hero golden-hour overrides */
[data-theme="golden-hour"] .m-greeting-brick-logo .gb { background: rgba(255,255,255,0.4); }
[data-theme="golden-hour"] .m-greeting-brick-logo .gb-row:nth-child(4) .gb { background: #d4875f; }
[data-theme="golden-hour"] .m-greeting-text { color: #f0ebe5; }
[data-theme="golden-hour"] .m-greeting-sub { color: rgba(240,235,229,0.5); }
[data-theme="golden-hour"] .m-paste-box { background: rgba(255,255,255,0.95); }
[data-theme="golden-hour"] .m-greeting-divider-line { background: rgba(240,235,229,0.15); }
[data-theme="golden-hour"] .m-greeting-divider-label { color: rgba(240,235,229,0.4); }
[data-theme="golden-hour"] .m-scroll-hint { color: rgba(240,235,229,0.3); }
[data-theme="golden-hour"] .m-dash-count {
    color: rgba(240,235,229,0.5);
}
[data-theme="golden-hour"] .m-dash-card {
    background: rgba(255,255,255,0.07);
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .m-dash-card.actions-revealed {
    border-color: var(--accent-primary);
    background: rgba(255,255,255,0.12);
}
[data-theme="golden-hour"] .m-dash-card-title { color: #f0ebe5; }
[data-theme="golden-hour"] .m-dash-card-theme { color: rgba(240,235,229,0.4); }
[data-theme="golden-hour"] .m-dash-card-meta { color: rgba(240,235,229,0.4); }
[data-theme="golden-hour"] .m-dash-card-chevron { color: rgba(240,235,229,0.25); }
[data-theme="golden-hour"] .m-dash-search {
    background: rgba(255,255,255,0.08);
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .m-dash-search input { color: #f0ebe5; }
[data-theme="golden-hour"] .m-dash-search input::placeholder { color: rgba(240,235,229,0.35); }
[data-theme="golden-hour"] .m-dash-search svg { color: rgba(240,235,229,0.35); }
[data-theme="golden-hour"] .m-dash-new-btn {
    background: rgba(255,255,255,0.08);
    color: rgba(240,235,229,0.7);
}

/* ── Dark overrides for mobile dashboard ── */
[data-theme="dark"] .m-dash-gear {
    background: none;
    color: rgba(200,192,182,0.5);
}
[data-theme="dark"] .m-dash-tabs {
    background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .m-dash-tab {
    color: rgba(200,192,182,0.5);
}
[data-theme="dark"] .m-dash-tab.active {
    background: #2a2520;
    color: #c8c0b6;
}
[data-theme="dark"] .m-dash-version {
    color: rgba(200,192,182,0.35);
}
/* Greeting hero dark overrides */
[data-theme="dark"] .m-greeting-brick-logo .gb { background: rgba(255,255,255,0.4); }
[data-theme="dark"] .m-greeting-brick-logo .gb-row:nth-child(4) .gb { background: #d4875f; }
[data-theme="dark"] .m-greeting-text { color: #c8c0b6; }
[data-theme="dark"] .m-paste-box { background: var(--secondary-bg); border-color: var(--border-light); }
[data-theme="dark"] .m-greeting-divider-line { background: var(--border-light); }
[data-theme="dark"] .m-scroll-hint { color: rgba(200,192,182,0.3); }
[data-theme="dark"] .m-dash-count {
    color: rgba(200,192,182,0.5);
}
[data-theme="dark"] .m-dash-card {
    background: #2a2520;
    border-color: #302b26;
}
[data-theme="dark"] .m-dash-card-title { color: #c8c0b6; }
[data-theme="dark"] .m-dash-card-theme { color: #6a6260; }
[data-theme="dark"] .m-dash-card-meta { color: #6a6260; }
[data-theme="dark"] .m-dash-card-chevron { color: #4a4540; }
[data-theme="dark"] .m-dash-search {
    background: #2a2520;
    border-color: #302b26;
}
[data-theme="dark"] .m-dash-search input { color: #c8c0b6; }
[data-theme="dark"] .m-dash-search input::placeholder { color: #6a6260; }
[data-theme="dark"] .m-dash-search svg { color: #6a6260; }
[data-theme="dark"] .m-dash-new-btn {
    background: #2a2520;
    color: rgba(200,192,182,0.7);
}

/* ============================================
   MOBILE MENU OVERLAY & SETTINGS
   ============================================ */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.mobile-menu-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.mobile-settings-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: var(--secondary-bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 101;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-settings-menu.visible {
    transform: translateX(0);
}

.mobile-menu-header {
    padding: var(--space-6) var(--space-5);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.mobile-menu-section {
    padding: var(--space-4) var(--space-5);
}

.mobile-menu-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0 var(--space-5);
}

/* ============================================
   MOBILE MODE OPTIONS (Radio Buttons)
   ============================================ */
.mobile-mode-option {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 10px;
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: background 0.2s;
    border: 2px solid transparent;
}

.mobile-mode-option:active {
    background: var(--tertiary-bg);
}

.mobile-mode-option.selected {
    background: rgba(212, 135, 95, 0.08);
    border-color: var(--accent-primary);
}

.mobile-mode-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.mobile-mode-option.selected .mobile-mode-radio {
    border-color: var(--accent-primary);
}

.mobile-mode-radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}

.mobile-mode-option.selected .mobile-mode-radio-inner {
    background: var(--accent-primary);
}

.mobile-mode-content {
    flex: 1;
}

.mobile-mode-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.mobile-mode-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ============================================
   MOBILE MENU ITEMS
   ============================================ */
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-menu-item:active {
    background: var(--tertiary-bg);
}

.mobile-menu-item-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mobile-menu-item-text {
    flex: 1;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.mobile-menu-item-badge {
    background: var(--accent-primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================
   MOBILE MAIN CONTENT
   ============================================ */
.mobile-main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================
   MOBILE TAB MODE
   ============================================ */
.mobile-tabs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-tab-content {
    flex: 1;
    overflow: hidden;
}

.mobile-tab-bar {
    display: flex;
    background: var(--secondary-bg);
    border-top: 1px solid var(--border-light);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
    flex-shrink: 0;
}

.mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-tab-btn.active {
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-primary);
}

.mobile-tab-btn:active {
    background: var(--tertiary-bg);
}

/* ============================================
   MOBILE PREVIEW PANEL
   ============================================ */
.mobile-preview-panel,
.mobile-contextual-preview {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*
     * BUG FIX (Bug 5): When the audio mini-bar is present at the bottom of the
     * flex column, it takes ~68px of real layout space. Without padding-bottom,
     * the last line of content in this scroll container can be hidden behind the
     * mini-bar — or worse, when expanding/collapsing the player the scroll
     * position doesn't compensate for the height change, leaving a blank gap.
     *
     * padding-bottom on the *content* (not the scroll container) gives the
     * scroll area extra room so all content is always reachable and visible.
     * 80px = mini-bar height (~60px) + comfortable breathing room (20px).
     */
    padding-bottom: 80px;
}

.mobile-preview-area {
    padding: var(--space-4);
    /*
     * BUG FIX (Bug 5): Extra bottom padding ensures the last lyric line
     * is never obscured by the fixed/flex audio mini-bar sitting below
     * the scroll container. min-height: 100% keeps the area filling the
     * container even when content is short.
     */
    padding-bottom: 80px;
    min-height: 100%;
    background: #e0dbd5;
}

.mobile-preview-container {
    background: var(--secondary-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

.mobile-preview-header {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    background: var(--tertiary-bg);
    border-bottom: 1px solid var(--border-light);
    gap: 2px;
}

.mobile-preview-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

/* Editable theme/subtitle on mobile — v2.15.34 */
.mobile-theme-field {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    padding: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    min-height: 1.4em;
}
.mobile-theme-field:focus {
    color: var(--text-primary);
}
.mobile-theme-field::placeholder {
    color: var(--text-tertiary);
}

.mobile-preview-badge {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--primary-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

.mobile-preview-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-2);
    background: rgba(212, 135, 95, 0.05);
    border-bottom: 1px solid var(--border-light);
}

.mobile-preview-body {
    padding: var(--space-4);
}

.mobile-preview-section {
    margin-bottom: var(--space-2);
}

.mobile-preview-section:last-child {
    margin-bottom: 0;
}

.mobile-section-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 2px;
}

.mobile-lyric-line {
    font-family: 'Menlo', monospace;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
    padding: 2px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}

.mobile-lyric-line.empty {
    color: var(--text-tertiary);
    font-style: italic;
}

.mobile-lyric-line.tappable {
    padding: 4px var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-lyric-line.tappable:active {
    background: rgba(212, 135, 95, 0.15);
}

.mobile-var-count {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ============================================
   MOBILE EDITOR PANEL (Tab Mode)
   ============================================ */
.mobile-editor-panel {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /*
     * BUG FIX (Bug 5): Same padding-bottom treatment as .mobile-preview-area.
     * Prevents content from being hidden behind the audio mini-bar, and
     * prevents the blank-space-after-collapse bug by giving the scroll
     * container more bottom room than it ever needs at any player state.
     */
    padding-bottom: 80px;
}

.mobile-editor-wrapper {
    padding: var(--space-4);
}

.mobile-section-card {
    background: var(--secondary-bg);
    border-radius: 12px;
    margin-bottom: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.mobile-section-header {
    padding: var(--space-3) var(--space-4);
    background: var(--tertiary-bg);
    border-bottom: 1px solid var(--border-light);
}

.mobile-section-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
}

.mobile-lyric-row {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.mobile-lyric-row:last-child {
    border-bottom: none;
}

.mobile-row-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.mobile-variation-scroll {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Snap scroll: cards align to the left edge
       of the scroll container when swiping */
    scroll-snap-type: x mandatory;
    /* Small inset so the first card isn't flush
       against the container edge after snapping */
    scroll-padding-left: 0;
}

.mobile-variation-scroll::-webkit-scrollbar {
    display: none;
}

.mobile-variation-card {
    flex-shrink: 0;
    width: 200px;
    background: var(--tertiary-bg);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.2s;
}

.mobile-variation-card.active {
    background: rgba(74, 155, 127, 0.1);
    border-color: var(--success);
}

.mobile-variation-input {
    width: 100%;
    padding: var(--space-3);
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.mobile-variation-input:focus {
    outline: none;
}

.mobile-variation-input::placeholder {
    color: var(--text-tertiary);
}

/* Favorited card gets a terracotta tint */
.mobile-variation-card.favorited {
    border-color: rgba(212, 135, 95, 0.35);
    background: rgba(212, 135, 95, 0.06);
}
.mobile-variation-card.active.favorited {
    border-color: var(--success);
    background: rgba(74, 155, 127, 0.1);
}

/* Star button on mobile variation cards */
.mobile-star-btn {
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-tertiary);
    opacity: 0.4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, opacity 0.15s;
}
.mobile-star-btn.starred {
    color: #d4875f;
    opacity: 1;
}

/* In tab view, position star in top-right of card */
.mobile-variation-card .mobile-star-btn {
    position: absolute;
    top: 4px;
    right: 4px;
}
.mobile-variation-card {
    position: relative;
}

/* In contextual bottom sheet, star sits in the label row */
.mobile-var-label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mobile-var-label .mobile-star-btn {
    margin-left: auto;
}

/* Favorited variation option in contextual mode */
.mobile-variation-option.favorited {
    border-color: rgba(212, 135, 95, 0.3);
}

.mobile-add-card {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--tertiary-bg);
    border: 2px dashed var(--border-medium);
    border-radius: 8px;
    color: var(--text-tertiary);
    font-size: var(--text-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mobile-add-card:active {
    background: rgba(212, 135, 95, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ============================================
   MOBILE CONTEXTUAL MODE
   ============================================ */
.mobile-contextual-container {
    height: 100%;
    position: relative;
}

.mobile-contextual-preview {
    padding: var(--space-4);
    background: #e0dbd5;
}

/* ============================================
   MOBILE AUDIO DOCK — fixed overlay at viewport bottom.
   Pulls the audio player out of the flex column so the
   content scroll area gets the full remaining height.
   Matches the iOS app: mini bar is persistent, expanded
   panel overlays content from below.
   ============================================ */
.mobile-audio-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* When audio dock is present, scroll containers need bottom
   padding so content isn't hidden behind the fixed mini bar. */
.mobile-editor-container:has(.mobile-audio-dock) .mobile-preview-panel,
.mobile-editor-container:has(.mobile-audio-dock) .mobile-contextual-preview,
.mobile-editor-container:has(.mobile-audio-dock) .mobile-editor-panel {
    padding-bottom: 120px;
}

/* ============================================
   MOBILE BOTTOM SHEET
   ============================================ */
.mobile-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 200;
}

.mobile-sheet-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 201;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    /* Safe area: pad above home indicator on notched iPhones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
}

.mobile-bottom-sheet.open {
    transform: translateY(0);
}

.mobile-sheet-handle {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
}

.mobile-sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
}

.mobile-sheet-header {
    padding: 0 var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--border-light);
    /* The header acts as part of the drag zone —
       prevent browser taking over the swipe gesture */
    touch-action: none;
}

.mobile-sheet-context {
    font-size: var(--text-xs);
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.mobile-sheet-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    -webkit-overflow-scrolling: touch;
    /* Contain scroll so pull-to-refresh doesn't fire
       when the user scrolls to the top of the sheet body */
    overscroll-behavior: contain;
}

.mobile-variation-option {
    background: var(--tertiary-bg);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-variation-option.active {
    background: rgba(74, 155, 127, 0.1);
    border-color: var(--success);
}

.mobile-variation-option:active {
    background: var(--primary-bg);
}

.mobile-var-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.mobile-sheet-input {
    width: 100%;
    padding: 6px var(--space-2);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--secondary-bg);
}

.mobile-sheet-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.mobile-add-variation-btn {
    width: 100%;
    padding: var(--space-3);
    background: none;
    border: 2px dashed var(--border-medium);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-add-variation-btn:active {
    background: rgba(212, 135, 95, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.mobile-sheet-footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
}

.mobile-sheet-btn {
    flex: 1;
    padding: var(--space-3);
    border-radius: 10px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-sheet-btn.cancel {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
}

.mobile-sheet-btn.confirm {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.mobile-sheet-btn:active {
    opacity: 0.8;
}

/* ============================================
   MOBILE VERSION INDICATOR (v2.43.0)
   Visible shortcut below song title that opens
   the version panel directly — improves discoverability.
   ============================================ */
.mobile-version-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 8px;
    font-family: 'DM Mono', Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.mobile-version-indicator:hover,
.mobile-version-indicator:active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.25);
}
.mobile-version-indicator svg:first-child {
    opacity: 0.7;
}
.mobile-version-indicator svg:last-child {
    opacity: 0.4;
    margin-left: 2px;
}
/* Dark theme */
[data-theme="dark"] .mobile-version-indicator {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #c8c0b6;
}
/* Golden hour theme */
[data-theme="golden-hour"] .mobile-version-indicator {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #e0d6c8;
}

/* ============================================
   MOBILE VERSION HISTORY PANEL
   ============================================ */
.mobile-versions-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 300;
}

.mobile-versions-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.mobile-versions-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 301;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-versions-panel.open {
    transform: translateY(0);
}

.mobile-versions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.mobile-versions-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-versions-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
}

.mobile-versions-subtitle {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--tertiary-bg);
}

.mobile-versions-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    -webkit-overflow-scrolling: touch;
}

.mobile-versions-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-tertiary);
}

.mobile-versions-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

.mobile-versions-empty-hint {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.mobile-version-item {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-version-item:active {
    background: var(--primary-bg);
    border-color: var(--accent-primary);
}

.mobile-version-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.mobile-version-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.mobile-version-notes {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: rgba(212, 135, 95, 0.05);
    border-radius: 4px;
}

/* ============================================
   MOBILE TOAST
   ============================================ */
/* ============================================
   MOBILE COLLABORATORS PANEL — v2.15.20
   Reuses .mobile-versions-panel for the slide-up
   shell; these styles handle the inner content.
   ============================================ */

/* Share link row: readonly URL + copy button */
.mobile-collab-share-row {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 4px;
}
.mobile-collab-share-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--tertiary-bg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-collab-copy-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.mobile-collab-share-note {
    padding: 0 16px;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

/* Add collaborator row: email input + add button */
.mobile-collab-add-row {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 4px;
}
.mobile-collab-add-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--secondary-bg);
}
.mobile-collab-add-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}
.mobile-collab-add-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}
.mobile-collab-error {
    padding: 4px 16px;
    font-size: 12px;
    color: var(--error);
}

/* People list header */
.mobile-collab-list-label {
    padding: 12px 16px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Person row */
.mobile-collab-list {
    padding: 0 16px 16px;
}
.mobile-collab-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.mobile-collab-person:last-child {
    border-bottom: none;
}

/* Avatar circle */
.mobile-collab-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tertiary-bg);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}
.mobile-collab-avatar.owner-avatar {
    background: var(--accent-primary);
    color: white;
}

/* Info block */
.mobile-collab-info {
    flex: 1;
    min-width: 0;
}
.mobile-collab-email {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-collab-role {
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mobile-collab-owner-badge {
    background: rgba(212, 135, 95, 0.15);
    color: var(--accent-primary);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}
.mobile-collab-name {
    color: var(--text-secondary);
}

/* Remove button — only visible for owner */
.mobile-collab-remove {
    background: none;
    border: none;
    color: var(--text-tertiary);
    padding: 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
.mobile-collab-remove:active {
    background: rgba(212, 125, 125, 0.1);
    color: var(--error);
}

/* Empty state */
.mobile-collab-empty {
    padding: 16px 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 14px;
}

.mobile-toast {
    position: fixed;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--success);
    color: white;
    padding: var(--space-3) var(--space-5);
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-large);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 400;
}

.mobile-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   MOBILE TOGGLE SWITCH - v2.9.1
   For Show Variation Counts setting
   ============================================ */
.mobile-toggle-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-toggle-option:active {
    background: var(--tertiary-bg);
}

.mobile-toggle-content {
    flex: 1;
}

.mobile-toggle-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.mobile-toggle-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.mobile-toggle-switch {
    width: 50px;
    height: 30px;
    background: var(--border-medium);
    border-radius: 15px;
    padding: 3px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.mobile-toggle-switch.on {
    background: var(--success);
}

.mobile-toggle-knob {
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.mobile-toggle-switch.on .mobile-toggle-knob {
    transform: translateX(20px);
}

/* Locked toggle — always on when song has audio, not interactive */
.mobile-toggle-switch.locked {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================
   MOBILE CLICHÉ INDICATORS — v2.33.0
   Small colored dot before flagged lines in contextual mode,
   matching the desktop lightbulb approach but adapted for touch.
   ============================================================ */
.mobile-lyric-line.cliche-flagged {
    display: flex;
    align-items: first baseline;
    gap: 8px;
}

.mobile-lyric-line .cliche-indicator {
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 5px;
    margin-left: 0;
    font-size: 0;
    opacity: 1;
}

.mobile-lyric-line .cliche-indicator-high   { background: var(--error); }
.mobile-lyric-line .cliche-indicator-medium { background: #e0a84b; }
.mobile-lyric-line .cliche-indicator-low    { background: var(--success); }

/* Theme indicator dot — shows current theme color */
.mobile-theme-indicator {
    display: flex;
    align-items: center;
    padding: 4px;
}
.mobile-theme-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    transition: background 0.2s;
}
.mobile-theme-dot.light {
    background: #e5e4db;
}
.mobile-theme-dot.golden-hour {
    background: linear-gradient(135deg, #5a4f44, #7a6c5a);
}
.mobile-theme-dot.dark {
    background: linear-gradient(135deg, #1a1714, #2a2520);
}

/* ============================================
   ACTIVE BADGE IN BOTTOM SHEET
   ============================================ */

.mobile-active-badge {
    display: inline-block;
    background: var(--success);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: var(--space-2);
    text-transform: uppercase;
}

/* ============================================
   FIX: TEXTAREA STYLES FOR TEXT WRAPPING
   ============================================ */
.mobile-variation-input {
    width: 100%;
    padding: var(--space-3);
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    color: var(--text-primary);
    resize: none;
    min-height: 60px;
    line-height: 1.4;
    font-family: var(--font-primary);
}

.mobile-variation-input:focus {
    outline: none;
}

.mobile-variation-input::placeholder {
    color: var(--text-tertiary);
}

/* Bottom sheet textarea */
.mobile-sheet-input {
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--secondary-bg);
    resize: none;
    min-height: 60px;
    line-height: 1.4;
    font-family: var(--font-primary);
}

.mobile-sheet-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* ============================================
   FIX: BETTER TAB BUTTON TOUCH TARGETS
   ============================================ */
.mobile-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3);
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    /* Better touch handling */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    min-height: 60px;
}

.mobile-tab-btn.active {
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-primary);
}

.mobile-tab-btn:active {
    background: var(--tertiary-bg);
    transform: scale(0.98);
}

/* ============================================
   FIX: BOTTOM SHEET HANDLE TOUCH AREA
   Larger touch target for pull-down gesture
   ============================================ */
.mobile-sheet-handle {
    display: flex;
    justify-content: center;
    padding: var(--space-4) var(--space-4) var(--space-2);
    cursor: grab;
    /* Prevent browser scroll when dragging */
    touch-action: none;
}

.mobile-sheet-handle:active {
    cursor: grabbing;
}

.mobile-sheet-handle-bar {
    width: 40px;
    height: 5px;
    background: var(--border-medium);
    border-radius: 3px;
}

/* ============================================
   FIX: SHEET BUTTON TOUCH IMPROVEMENTS
   ============================================ */
.mobile-sheet-btn {
    flex: 1;
    padding: var(--space-4);
    border-radius: 10px;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.mobile-sheet-btn.cancel {
    background: var(--tertiary-bg);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
}

.mobile-sheet-btn.confirm {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.mobile-sheet-btn:active {
    opacity: 0.7;
    transform: scale(0.98);
}

/* ============================================
   FIX: VARIATION CARD WIDTH FOR LONGER TEXT
   + SNAP SCROLL ALIGNMENT (v2.11.0)
   ============================================ */
.mobile-variation-card {
    flex-shrink: 0;
    width: 220px;
    min-width: 220px;
    background: var(--tertiary-bg);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.2s;
    /* Each card snaps to the start (left edge)
       of the scroll container when swiping */
    scroll-snap-align: start;
}

.mobile-variation-card.active {
    background: rgba(74, 155, 127, 0.1);
    border-color: var(--success);
}

/* The + button at the end should also snap */
.mobile-add-card {
    scroll-snap-align: start;
}

/* ============================================
   v2.14.0 — PHASE 2 STYLES
   Preview panel section management + Duplicate
   ============================================ */

/* Preview section — draggable + hover controls */
.preview-section {
    position: relative;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-bottom: var(--space-3);
}

.preview-section:hover {
    background: rgba(212, 135, 95, 0.04);
}

.preview-section:hover .preview-section-controls {
    opacity: 1;
    pointer-events: auto;
}

.preview-section.dragging {
    opacity: 0.4;
}

.preview-section.drag-over {
    border-top: 3px solid var(--accent-primary);
    padding-top: 4px;
}

/* Section label row: flush left to align with lyric lines below */
.preview-section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
    margin-top: var(--space-3);
    padding: 0;
}

.preview-section:first-child .preview-section-label-row {
    margin-top: 0;
}

/* Draggable label with grab cursor */
.preview-section-label {
    cursor: grab;
    user-select: none;
}

.preview-section-label:active {
    cursor: grabbing;
}

/* Drag handle grip dots */
.preview-drag-icon {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.preview-section:hover .preview-drag-icon {
    opacity: 0.8;
}

.preview-drag-icon span {
    display: flex;
    gap: 2px;
}

.preview-drag-icon span::before,
.preview-drag-icon span::after {
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent-primary);
}

/* Hover-to-reveal action buttons */
.preview-section-controls {
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.preview-section-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.preview-section-btn:hover {
    background: rgba(212, 135, 95, 0.12);
    color: var(--accent-primary);
}

.preview-section-btn.danger:hover {
    background: rgba(212, 125, 125, 0.12);
    color: var(--error);
}

/* Duplicate section button in editor header */
.btn-duplicate-section {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    font-size: var(--text-xs);
}

.btn-duplicate-section:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.08);
}

/* ============================================
   v2.14.0 — Icon-only section action buttons
   Replaces the old text-label buttons with
   subtle icon buttons, hidden until hover.
   ============================================ */

/* Container for duplicate + delete icons, pushed right */
.section-header-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Show on section hover */
.section-header:hover .section-header-actions {
    opacity: 1;
}

/* Individual icon button */
.section-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.section-action-btn:hover {
    background: rgba(212, 135, 95, 0.1);
    color: var(--accent-primary);
}

.section-action-btn.danger:hover {
    background: rgba(212, 125, 125, 0.1);
    color: var(--error);
}

/* ============================================
   v2.14.0 — CLICHÉ DETECTION STYLES
   ============================================ */

/* Toolbar button — warm gold accent */
.btn-cliche {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cliche:hover {
    background: var(--tertiary-bg);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Modal */
.cliche-modal { max-width: 560px; }

.cliche-result {
    padding: var(--space-3);
    border-radius: 8px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-light);
    background: var(--tertiary-bg);
}

.cliche-result-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.cliche-severity {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
}

.cliche-severity-high {
    background: rgba(212, 125, 125, 0.15);
    color: var(--error);
}

.cliche-severity-medium {
    background: rgba(232, 167, 93, 0.15);
    color: #c17b1e;
}

.cliche-severity-low {
    background: rgba(74, 155, 127, 0.15);
    color: var(--success);
}

.cliche-section {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cliche-line {
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-1) 0;
    transition: color 0.15s;
}

.cliche-line:hover { color: var(--accent-primary); }

.cliche-matched {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.cliche-matched strong { color: var(--error); }

.cliche-suggestion {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
    line-height: 1.4;
}

/* ============================================
   v2.14.2 — INLINE CLICHÉ HIGHLIGHTS
   Replaces the modal with preview-panel highlights.
   ============================================ */

/* Wrapper for each preview line + possible feedback */
.preview-line-wrapper {
    position: relative;
}

/* Highlighted lines — colored left border + subtle background.
   Uses flex layout so lightbulb sits at end of first line. */
.preview-line.cliche-flagged {
    border-left: 3px solid transparent;
    padding-left: 6px;
    border-radius: 3px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: first baseline;
    gap: 6px;
}

.preview-line.cliche-high {
    border-left-color: var(--error);
    background: rgba(212, 125, 125, 0.08);
}

.preview-line.cliche-medium {
    border-left-color: #e0a84b;
    background: rgba(232, 167, 93, 0.08);
}

.preview-line.cliche-low {
    border-left-color: var(--success);
    background: rgba(74, 155, 127, 0.06);
}

/* The lightbulb indicator — flex child pushed to end of line.
   Uses em so it scales with preview font size.
   margin-left:auto pushes it right without absolute positioning,
   so hover padding changes don't affect it. */
.cliche-indicator {
    cursor: pointer;
    font-size: 1em;
    flex-shrink: 0;
    margin-left: auto;
    opacity: 0.7;
    transition: opacity 0.15s;
    z-index: 3;
    line-height: 1;
}

.cliche-indicator:hover {
    opacity: 1;
}

/* Active state button */
.btn-cliche.active {
    background: rgba(212, 135, 95, 0.1);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-cliche.active:hover {
    background: rgba(212, 135, 95, 0.15);
}

/* Count badge on button */
.cliche-badge {
    background: var(--tertiary-bg);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.btn-cliche.active .cliche-badge {
    background: rgba(212, 135, 95, 0.15);
    color: var(--accent-primary);
}

/* Inline feedback panel — appears below the flagged line */
.cliche-inline-feedback {
    padding: 8px 8px 8px 12px;
    margin: 2px 0 6px 0;
    background: var(--tertiary-bg);
    border-radius: 6px;
    border: 1px solid var(--border-light);
    font-size: 11px;
}

.cliche-inline-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
}

.cliche-inline-item + .cliche-inline-item {
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    padding-top: 8px;
}

/* Severity dot */
.cliche-severity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.cliche-dot-high { background: var(--error); }
.cliche-dot-medium { background: #e0a84b; }
.cliche-dot-low { background: var(--success); }

.cliche-inline-matched {
    display: block;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.cliche-inline-suggestion {
    display: block;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ============================================
   v2.14.4 — Toolbar uniformity fixes
   All toolbar buttons: single-line, compact
   ============================================ */

/* Force all toolbar buttons to single-line */
.editor-toolbar button {
    white-space: nowrap;
}

/* Consistent compact height for labeled buttons */
.btn-save, .btn-versions, .btn-share, .btn-collaborators, .btn-export, .btn-cliche {
    padding: var(--space-1) var(--space-2) !important;
    font-size: var(--text-xs) !important;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
}

/* Working Draft badge compact */
.btn-draft {
    white-space: nowrap;
    height: 32px;
    padding: var(--space-1) var(--space-2) !important;
    font-size: var(--text-xs) !important;
}

/* v2.46.0 Warm Studio values are now inline in their original rule definitions.
   No override block needed — see .app-accent-bar, .editor-toolbar, .back-button,
   .editor-header, .preview-panel, .editor-panel, .audio-player-panel. */

/* ============================================
   v2.14.5 — Review indicator fixes
   Flat icon, no scale jump, bigger click target
   ============================================ */

/* Override: remove scale transform, bigger click area */
.cliche-indicator {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: inherit;
    transition: opacity 0.15s, background 0.15s;
    transform: none !important;
}

.cliche-indicator:hover {
    transform: none !important;
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.cliche-indicator svg {
    flex-shrink: 0;
}

/* Re-scan button — small icon button next to Review */
.btn-rescan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin-left: -4px;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.btn-rescan:hover {
    background: var(--tertiary-bg);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.btn-rescan:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ============================================
   v2.14.6 — Preview line hover fix + flat lightbulb
   Remove padding shift on hover (caused icon jump)
   ============================================ */

/* Preview line hover: subtle indent cue restored.
   Original padding-left on hover from base styles applies. */

/* ============================================
   v2.14.12 — Vertical cell borders + top accent bar
   Matching prototype styling
   ============================================ */

/* Vertical cell separators removed per v2.15.1 — 
   matching the Jan 28 production style.
   Cells separated by row background/gap only. */

/* Top accent bar — warm separation from browser chrome */
.top-accent-bar {
    height: 4px;
    background: linear-gradient(135deg, var(--accent-primary), #d4a532);
    flex-shrink: 0;
}

/* ============================================
   v2.14.12 — Top accent bar + cell borders
   ============================================ */

/* Top accent bar — warm dark strip for visual separation
   v2.46: Slimmed to 34px height with compact padding */
.app-accent-bar {
    background: #3d3530;
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 18px;
    padding-top: calc(4px + env(safe-area-inset-top, 0px));
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    z-index: 100;
    letter-spacing: 0.3px;
}

.app-accent-bar .accent-version {
    background: var(--accent-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.3px;
}

/* Build version label next to logo — v2.46: compact 9px */
.app-accent-bar .accent-build {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.3px;
}

.app-accent-bar .accent-info {
    display: flex;
    gap: 8px;
    align-items: center;
}

.app-accent-bar .accent-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ecf8a;
    display: inline-block;
    margin-right: 4px;
}

/* ============================================
   v2.15.0 — Accent bar improvements
   Version badge moved to accent bar,
   green connected dot, cleaner toolbar
   ============================================ */

/* Version badge in accent bar — lighter styling for dark background */
.accent-version-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.accent-version-badge .version-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #4a9b7f !important;
}

/* Connection indicator */
/* Theme toggle button in desktop accent bar */
.accent-theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}
.accent-theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    transition: all 0.2s;
}
.accent-theme-dot.light {
    background: #e5e4db;
}
.accent-theme-dot.golden-hour {
    background: linear-gradient(135deg, #5a4f44, #7a6c5a);
}
.accent-theme-dot.dark {
    background: linear-gradient(135deg, #1a1714, #2a2520);
}
.accent-theme-btn:hover .accent-theme-dot {
    border-color: rgba(255,255,255,0.5);
}

/* v2.51.0 — Viewer presence pills (replaced connection dot) */
.accent-viewers {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.viewer-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    transition: background 0.2s;
}

.viewer-pill:hover {
    background: rgba(255, 255, 255, 0.18);
}

.viewer-self {
    opacity: 0.7;
}

.viewer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.viewer-offline .viewer-dot {
    background: rgba(255, 255, 255, 0.35);
}

.viewer-separator {
    opacity: 0.4;
    margin: 0 1px;
    font-size: 10px;
}

/* v2.15.1 — Accent bar right-side grouping */
.accent-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ============================================
   v2.15.1 — Row overflow indicators
   Subtle gradient fade when more variations
   exist beyond the visible edge
   ============================================ */

/* Wrapper for overflow fade indicators.
   The wrapper is position:relative so the fade overlays
   sit on top of the scrollable lyric-row inside it. */
.lyric-row-wrapper {
    position: relative;
}

/* Overflow scroll arrows — real clickable buttons positioned
   outside the row so they don't overlap cell content.
   Hidden by default, shown when wrapper has overflow class. */
.overflow-arrow {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 18px;
    font-family: system-ui, sans-serif;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.overflow-arrow:hover {
    color: var(--accent-primary);
}

/* Right arrow: sits just outside the row area */
.overflow-arrow-right {
    right: -24px;
    border-radius: 0 6px 6px 0;
}

/* Left arrow: sits at the left edge */
.overflow-arrow-left {
    left: -24px;
    border-radius: 6px 0 0 6px;
}

/* Show arrows only when overflow is detected */
.lyric-row-wrapper.has-overflow-right .overflow-arrow-right {
    display: flex;
}
.lyric-row-wrapper.has-overflow-left .overflow-arrow-left {
    display: flex;
}

/* White fade gradient on the row edge to hint at more content */
.lyric-row-wrapper.has-overflow-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

.lyric-row-wrapper.has-overflow-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 2;
}

/* ============================================
   v2.15.6 — UI polish
   ============================================ */

/* Last row in a section: no bottom border, no gap.
   Lets the section end flush with the section block. */
.lyric-row-wrapper:last-child .lyric-row {
    border-bottom: none;
}

/* Close the ~2-4px gap at the bottom of section blocks */
.section-block {
    padding-bottom: 0 !important;
}

/* ---- OVERFLOW: WHITE FADE + CLICKABLE ARROWS ---- */


/* ============================================
   GOLDEN HOUR THEME — Desktop Editor Overrides
   v2.15.39
   The right-side editor was showing white cards
   because section-block, preview-panel, textareas,
   and overflow fades had hardcoded light values.
   These overrides bring them into the walnut palette.
   ============================================ */

/* Preview panel (left pane): match walnut background */
[data-theme="golden-hour"] .preview-panel {
    background: #4e4438;
}
/* Golden hour: hairline + pill color overrides */
[data-theme="golden-hour"] .split-handle::before {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="golden-hour"] .split-handle:hover::before {
    background: rgba(255, 255, 255, 0.10);
}
[data-theme="golden-hour"] .split-handle-pill {
    background: rgba(255,255,255,0.15);
}
[data-theme="golden-hour"] .split-handle:hover .split-handle-pill {
    background: var(--accent-primary);
}
/* Dark: hairline + pill color overrides */
[data-theme="dark"] .split-handle::before {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .split-handle:hover::before {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .split-handle-pill {
    background: rgba(255,255,255,0.12);
}
[data-theme="dark"] .split-handle:hover .split-handle-pill {
    background: var(--accent-primary);
}

/* Preview island header */
[data-theme="golden-hour"] .preview-island-header {
    background: #4e4438;
    border-bottom-color: #6a5f54;
}

/* Preview island body */
[data-theme="golden-hour"] .preview-island-body {
    background: #4e4438;
}

/* Preview title text */
[data-theme="golden-hour"] .preview-island-title {
    color: #f0ebe5;
}

/* Preview subtitle/theme textarea */
[data-theme="golden-hour"] .preview-island-theme {
    color: #c8b89a;
    background: transparent;
}
[data-theme="golden-hour"] .preview-island-theme::placeholder {
    color: #8a7a6a;
}

/* Preview section labels and lyric lines */
[data-theme="golden-hour"] .preview-section-label {
    color: #c8b89a;
}
[data-theme="golden-hour"] .preview-line {
    color: #f0ebe5;
}
/* Hover highlight must stay dark — the base --tertiary-bg resolves to
   near-white (#faf8f5) which kills contrast against the light preview text */
[data-theme="golden-hour"] .preview-line:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Editor header (above the spreadsheet area) */
[data-theme="golden-hour"] .editor-header {
    background: #4e4438;
    border-bottom-color: #6a5f54;
}
[data-theme="golden-hour"] .editor-title,
[data-theme="golden-hour"] .editor-subtitle {
    color: #c8b89a;
}
[data-theme="golden-hour"] .btn-editor-view {
    border-color: #6a5f54;
    color: #c8b89a;
}
[data-theme="golden-hour"] .btn-editor-view:hover,
[data-theme="golden-hour"] .btn-editor-view.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.12);
}

/* Section blocks: warm walnut card instead of white */
[data-theme="golden-hour"] .section-block {
    background: #4e4438;
    border-color: #6a5f54;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Section header divider line */
[data-theme="golden-hour"] .section-header {
    border-bottom-color: #6a5f54;
}

/* Section label input text */
[data-theme="golden-hour"] .section-label-input {
    color: var(--accent-primary); /* keep terracotta accent */
}
[data-theme="golden-hour"] .section-label-input:focus {
    background: rgba(255, 255, 255, 0.06);
}

/* Lyric row hover: subtle warm highlight */
[data-theme="golden-hour"] .lyric-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Lyric row separator lines */
[data-theme="golden-hour"] .lyric-row {
    border-bottom-color: #6a5f54;
}

/* Variation textareas: default state */
[data-theme="golden-hour"] .variation-textarea {
    /* Bumped from #c8c0b6 to near-white for maximum legibility
       on the dark walnut editor background */
    color: #e8e2da;
}
[data-theme="golden-hour"] .variation-textarea:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Variation textarea: editing state (double-clicked) */
[data-theme="golden-hour"] .variation-textarea.editing {
    /* bg handled by parent .cell-editing */
    background: transparent;
    color: #f0ebe5;
    outline-color: var(--accent-primary);
}
[data-theme="golden-hour"] .variation-textarea.editing:focus {
    background: transparent;
    color: #f0ebe5;
    outline-color: var(--accent-primary);
}

/* Active variation — background moved to .variation-cell.cell-active wrapper
   so the star column inherits it. Only keep the text color override here. */
[data-theme="golden-hour"] .variation-textarea.active {
    background: transparent;
    color: #f0ebe5;
}

/* Column variation header labels */
[data-theme="golden-hour"] .variation-col-header,
[data-theme="golden-hour"] .col-header-label {
    color: #8a7a6a;
}

/* Delete section / row control buttons */
[data-theme="golden-hour"] .delete-section-btn {
    border-color: #6a5f54;
    color: #8a7a6a;
}

/* Row drag handle icons */
[data-theme="golden-hour"] .section-drag-handle,
[data-theme="golden-hour"] .row-handle {
    color: #8a7a6a;
}

/* Mini row control buttons */
[data-theme="golden-hour"] .mini-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #a89a8a;
    border-color: #6a5f54;
}
[data-theme="golden-hour"] .mini-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #f0ebe5;
    border-color: #8a7a6a;
}

/* Overflow fade gradients: use walnut color instead of white */
[data-theme="golden-hour"] .lyric-row-wrapper.has-overflow-right::after {
    background: linear-gradient(to left,
        rgba(78, 68, 56, 0.95) 0%,
        rgba(78, 68, 56, 0) 100%);
}
[data-theme="golden-hour"] .lyric-row-wrapper.has-overflow-left::before {
    background: linear-gradient(to right,
        rgba(78, 68, 56, 0.95) 0%,
        rgba(78, 68, 56, 0) 100%);
}

/* Overflow scroll arrows */
[data-theme="golden-hour"] .overflow-arrow {
    color: #8a7a6a;
}
[data-theme="golden-hour"] .overflow-arrow:hover {
    color: var(--accent-primary);
}

/* Empty state text in editor area */
[data-theme="golden-hour"] .empty-state-title {
    color: #c8b89a;
}
[data-theme="golden-hour"] .empty-state-text {
    color: #8a7a6a;
}

/* ============================================================
   DARK THEME — Overflow fade overrides
   v2.15.55
   The base fades use rgba(255,255,255,...) which shows as a
   white flash on dark section blocks (#2a2520).
   Override with the dark secondary-bg color to blend properly.
   ============================================================ */
[data-theme="dark"] .lyric-row-wrapper.has-overflow-right::after {
    background: linear-gradient(to left,
        rgba(42, 37, 32, 0.97) 0%,
        rgba(42, 37, 32, 0) 100%);
}
[data-theme="dark"] .lyric-row-wrapper.has-overflow-left::before {
    background: linear-gradient(to right,
        rgba(42, 37, 32, 0.97) 0%,
        rgba(42, 37, 32, 0) 100%);
}

/* Font size control buttons */
[data-theme="golden-hour"] .font-control-btn {
    background: #4e4438;
    border-color: #6a5f54;
    color: #c8b89a;
}

/* ============================================
   FAVORITES FEATURE — Toolbar Buttons
   v2.15.39
   ============================================ */

/* ★ Sort button */
.btn-star-sort {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: var(--font-primary);
}
.btn-star-sort:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-medium);
}
/* Active state: terracotta tint */
.btn-star-sort.active {
    background: rgba(212, 135, 95, 0.10);
    border-color: rgba(212, 135, 95, 0.50);
    color: var(--accent-primary);
    font-weight: 600;
}

/* 👁 Starred-only focus button */
.btn-focus-favs {
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: var(--font-primary);
}
.btn-focus-favs:hover {
    background: var(--tertiary-bg);
    border-color: var(--border-medium);
}
/* Active state: green tint — "filtered/narrowed" feel */
.btn-focus-favs.active {
    background: rgba(74, 155, 127, 0.10);
    border-color: rgba(74, 155, 127, 0.50);
    color: var(--success);
    font-weight: 600;
}

/* ── Golden Hour: toolbar favorites buttons ── */
[data-theme="golden-hour"] .btn-star-sort,
[data-theme="golden-hour"] .btn-focus-favs {
    background: #4e4438;
    border-color: #6a5f54;
    color: #c8b89a;
}
[data-theme="golden-hour"] .btn-star-sort:hover,
[data-theme="golden-hour"] .btn-focus-favs:hover {
    background: #5a4f44;
}
[data-theme="golden-hour"] .btn-star-sort.active {
    background: rgba(212, 135, 95, 0.15);
    border-color: rgba(212, 135, 95, 0.5);
    color: var(--accent-primary);
}
[data-theme="golden-hour"] .btn-focus-favs.active {
    background: rgba(74, 155, 127, 0.15);
    border-color: rgba(74, 155, 127, 0.5);
    color: var(--success);
}

/* ── Dark: toolbar favorites buttons ── */
[data-theme="dark"] .btn-star-sort,
[data-theme="dark"] .btn-focus-favs {
    background: #2a2520;
    border-color: #302b26;
    color: #8a8078;
}
[data-theme="dark"] .btn-star-sort:hover,
[data-theme="dark"] .btn-focus-favs:hover {
    background: #302b26;
}
[data-theme="dark"] .btn-star-sort.active {
    background: rgba(212, 135, 95, 0.12);
    border-color: rgba(212, 135, 95, 0.4);
    color: var(--accent-primary);
}
[data-theme="dark"] .btn-focus-favs.active {
    background: rgba(74, 155, 127, 0.12);
    border-color: rgba(74, 155, 127, 0.4);
    color: var(--success);
}

/* ── variation-cell: Golden Hour ── */
[data-theme="golden-hour"] .variation-cell {
    border-right-color: #6a5f54;
}
[data-theme="golden-hour"] .variation-cell:last-of-type {
    border-right: none;
}
/* At rest: light terracotta tint on starred cells (slightly stronger
   than light theme since the dark walnut bg needs more opacity to show) */
[data-theme="golden-hour"] .variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.12);
}
/* Selected always wins over starred — green beats terracotta */
[data-theme="golden-hour"] .variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.14);
}
[data-theme="golden-hour"] .variation-cell.cell-active.cell-favorited {
    background: rgba(74, 155, 127, 0.14);
}
[data-theme="golden-hour"] .lyric-row:hover .variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.18);
}
[data-theme="golden-hour"] .lyric-row:hover .variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.14);
}
/* On hover, selected+starred still shows green */
[data-theme="golden-hour"] .lyric-row:hover .variation-cell.cell-active.cell-favorited {
    background: rgba(74, 155, 127, 0.10);
}

/* ── variation-cell: Dark ── */
[data-theme="dark"] .variation-cell {
    border-right-color: #302b26;
}
/* Option C: full text-primary contrast in dark mode.
   Base --text-secondary in dark (#8a8078) is too dim to read comfortably.
   #c8c0b6 matches --text-primary for maximum contrast, mono stays. */
[data-theme="dark"] .variation-textarea {
    color: #c8c0b6;
}
/* At rest: terracotta tint on dark bg needs slightly more opacity */
[data-theme="dark"] .variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.10);
}
/* Selected always wins over starred — green beats terracotta */
[data-theme="dark"] .variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.16);
}
[data-theme="dark"] .variation-cell.cell-active.cell-favorited {
    background: rgba(74, 155, 127, 0.16);
}
[data-theme="dark"] .lyric-row:hover .variation-cell.cell-favorited {
    background: rgba(212, 135, 95, 0.16);
}
[data-theme="dark"] .lyric-row:hover .variation-cell.cell-active {
    background: rgba(74, 155, 127, 0.14);
}
/* On hover, selected+starred still shows green */
[data-theme="dark"] .lyric-row:hover .variation-cell.cell-active.cell-favorited {
    background: rgba(74, 155, 127, 0.10);
}

/* ── Star button: Golden Hour ── */
[data-theme="golden-hour"] .var-star-btn {
    color: #8a7a6a;
}
[data-theme="golden-hour"] .var-star-btn.starred {
    color: #e8a070;
}

/* ── Star button: Dark ── */
[data-theme="dark"] .var-star-btn {
    color: #6a6260;
}
[data-theme="dark"] .var-star-btn.starred {
    color: #e09060;
}


/* ============================================================
   INFO MODALS — v2.15.53
   What's New, FAQ, Privacy, Terms
   All extend the base .modal/.modal-overlay structure.
   ============================================================ */

/* Eyebrow label above the modal title (e.g. "comps. · help") */
.info-modal-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    margin-bottom: var(--space-1);
}

/* Wider than default modals — info content needs more room */
.info-modal {
    max-width: 680px;
}

/* Body scroll area for long content */
.info-modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* ── What's New: feature sections ── */
.info-section {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-light);
}
.info-section:last-child {
    border-bottom: none;
}
.info-section-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    padding-top: 2px;
}
.info-section-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.info-section-body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── FAQ: accordion ── */
.faq-item {
    border-bottom: 1px solid var(--border-light);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-primary);
    text-align: left;
    transition: color 0.15s;
}
.faq-question:hover {
    color: var(--accent-primary);
}
.faq-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}
.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}
.faq-item.open .faq-question {
    color: var(--accent-primary);
}
.faq-answer {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    padding-bottom: var(--space-4);
}

/* ── Privacy / Terms: prose layout ── */
.info-modal-prose h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}
.info-modal-prose h3:first-child {
    margin-top: 0;
}
.info-modal-prose p,
.info-modal-prose li {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-2);
}
.info-modal-prose ul {
    padding-left: var(--space-5);
    margin-bottom: var(--space-2);
}
.info-modal-prose strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── App footer — Dashboard ── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-light);
    background: var(--tertiary-bg);
}
.app-footer-link {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    padding: 0;
    transition: color 0.15s;
}
.app-footer-link:hover {
    color: var(--accent-primary);
}
.app-footer-sep {
    font-size: var(--text-xs);
    color: var(--border-medium);
    user-select: none;
}

/* ── Login screen footer links ── */
.auth-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.auth-footer-link {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    padding: 0;
    text-decoration: underline;
    transition: color 0.15s;
}
.auth-footer-link:hover {
    color: var(--accent-primary);
}


/* ============================================================
   WHAT'S NEW — Release group accordion + SVG icon system
   v2.15.54
   ============================================================ */

/* SVG icon container — replaces the old emoji .info-section-icon */
.info-section-icon-svg {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(212, 135, 95, 0.10);
    color: var(--accent-primary);
    margin-top: 1px; /* optical alignment with title text */
}

/* ── Release group: collapsible version block ── */
.release-group {
    border-bottom: 1px solid var(--border-light);
}
.release-group:last-child {
    border-bottom: none;
}

/* Clickable header row */
.release-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    text-align: left;
    transition: opacity 0.15s;
}
.release-group-header:hover {
    opacity: 0.8;
}

/* Left side: version badge + headline */
.release-group-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* Version pill — terracotta outline */
.release-version-badge {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent-primary);
    border: 1.5px solid var(--accent-primary);
    border-radius: 6px;
    padding: 1px 7px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    opacity: 0.85;
}

/* Headline text */
.release-headline {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right side: date + chevron */
.release-group-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.release-date {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* Chevron — rotates when open */
.release-chevron {
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.release-chevron.open {
    transform: rotate(180deg);
}

/* Entries container inside an open release group */
.release-group-body {
    padding-bottom: var(--space-2);
}

/* Each entry inside a release group — indented slightly */
.release-group-body .info-section {
    padding-left: var(--space-2);
    border-bottom: none; /* groups handle their own separators */
}
.release-group-body .info-section:last-child {
    padding-bottom: var(--space-2);
}

/* ── Dark theme overrides ── */
[data-theme="dark"] .info-section-icon-svg {
    background: rgba(212, 135, 95, 0.13);
}
[data-theme="dark"] .release-version-badge {
    opacity: 0.75;
}

/* ── Golden Hour overrides ── */
[data-theme="golden-hour"] .release-version-badge {
    opacity: 0.9;
}


/* ============================================================
   ACCESS DENIED SCREEN — v2.15.55
   Full-viewport centered card shown when Firestore returns
   permission-denied. Replaces the old inline loading-screen
   with a proper styled page with request-access flow.
   ============================================================ */

.access-denied-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    padding: var(--space-6);
}

.access-denied-card {
    background: var(--secondary-bg);
    border-radius: 20px;
    padding: var(--space-10);
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: var(--shadow-large);
    border: 1px solid var(--border-light);
}

/* Lock icon container */
.access-denied-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tertiary-bg);
    border: 1px solid var(--border-light);
    margin: 0 auto var(--space-6);
}

.access-denied-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.access-denied-body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

/* Two-button row */
.access-denied-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

/* Back link — less prominent than the primary CTA */
.access-denied-back {
    font-size: var(--text-sm);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-primary);
    transition: color 0.15s;
}
.access-denied-back:hover {
    color: var(--text-secondary);
}

/* Spinner + label during send */
.access-denied-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* Success state */
.access-denied-sent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--success);
    font-weight: 600;
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(74, 155, 127, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(74, 155, 127, 0.2);
}

/* Error state */
.access-denied-error {
    font-size: var(--text-sm);
    color: var(--error);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgba(212, 125, 125, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(212, 125, 125, 0.2);
}


/* ============================================================
   ACCESS REQUEST BADGE — v2.33.0
   Small badge shown on dashboard song rows when there are
   pending access requests. Uses the warning color to draw
   attention without being alarming.
   ============================================================ */
.access-request-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(232, 167, 93, 0.15);
    color: #c48a3e;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    margin-left: 4px;
}

/* ============================================================
   PENDING REQUESTS PANEL — v2.33.0
   Shown inside the collaborators modal when the owner has
   pending access requests for a song.
   ============================================================ */
.pending-requests-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.pending-requests-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--warning);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pending-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    background: rgba(232, 167, 93, 0.04);
}

.pending-request-item:last-child {
    border-bottom: none;
}

.pending-request-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pending-request-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--warning);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
}

.pending-request-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.pending-request-email {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.pending-request-actions {
    display: flex;
    gap: var(--space-2);
}

.btn-approve {
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    border: none;
    background: var(--success);
    color: white;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: all 0.15s;
}

.btn-approve:hover {
    filter: brightness(1.1);
}

.btn-dismiss {
    padding: var(--space-1) var(--space-3);
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background: var(--secondary-bg);
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: all 0.15s;
}

.btn-dismiss:hover {
    border-color: var(--error);
    color: var(--error);
}


/* ============================================================
   LYRIC FONT CLASSES — v2.15.56
   Applied as 'lyric-font-mono' or 'lyric-font-sans' on each
   variation-textarea. Toggled via the settings panel.
   ============================================================ */

/* Mono: Menlo, same as before — compositional, code-like */
.variation-textarea.lyric-font-mono {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

/* Sans: system font stack — clean, readable, no mono spacing */
.variation-textarea.lyric-font-sans {
    font-family: var(--font-primary);
    letter-spacing: 0.01em;
}

/* ============================================================
   SETTINGS GEAR + POPOVER — v2.15.56
   Replaces the lone theme-dot in the accent bar.
   ============================================================ */

/* Wrapper — positions the popover relative to the button */
.accent-settings-wrap {
    position: relative;
}

/* Gear button */
.accent-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.accent-settings-btn:hover,
.accent-settings-btn.active {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

/* Popover card — drops down from the gear */
.settings-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    box-shadow: var(--shadow-large);
    padding: var(--space-4);
    z-index: 500;
    /* Subtle entrance — slides down slightly */
    animation: settingsPopIn 0.15s ease;
}
@keyframes settingsPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Section heading inside the popover */
.settings-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

/* Thin rule between sections */
.settings-divider {
    height: 1px;
    background: var(--border-light);
    margin: var(--space-4) 0;
}

/* ── Theme swatches ── */
.settings-theme-row {
    display: flex;
    gap: var(--space-2);
}

.settings-theme-swatch {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    /* Tighter — no label text, just the circle + border */
    padding: var(--space-2);
    border-radius: 8px;
    border: 2px solid var(--border-light);
    cursor: pointer;
    background: transparent;
    font-family: var(--font-primary);
    transition: border-color 0.15s;
}
.settings-theme-swatch:hover {
    border-color: var(--border-dark);
}
.settings-theme-swatch.active {
    border-color: var(--accent-primary);
}

/* The colored circle inside each swatch */
.settings-theme-swatch::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-medium);
}
.settings-theme-swatch.light::before {
    background: #e5e4db;
}
.settings-theme-swatch.golden-hour::before {
    background: linear-gradient(135deg, #5a4f44, #8a7060);
}
.settings-theme-swatch.dark::before {
    background: linear-gradient(135deg, #1a1714, #2a2520);
}

/* Label hidden — shown only on hover via title tooltip.
   Keeping the element for screen readers but visually hidden. */
.settings-swatch-label {
    display: none;
}

/* ── Font toggle buttons ── */
.settings-font-row {
    display: flex;
    gap: var(--space-2);
}

.settings-font-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-2) var(--space-1);
    border-radius: 8px;
    border: 2px solid var(--border-light);
    cursor: pointer;
    background: transparent;
    font-family: var(--font-primary);
    transition: border-color 0.15s;
}
.settings-font-btn:hover {
    border-color: var(--border-dark);
}
.settings-font-btn.active {
    border-color: var(--accent-primary);
}

/* "Aa" sample in each font */
.settings-font-sample {
    font-size: 18px;
    line-height: 1;
    color: var(--text-primary);
}
.settings-font-sample.lyric-font-mono {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}
.settings-font-sample.lyric-font-sans {
    font-family: var(--font-primary);
}

.settings-font-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.settings-font-btn.active .settings-font-label {
    color: var(--accent-primary);
}

/* Settings toggle button (e.g. show authors) */
.settings-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-primary);
}
.settings-toggle-text {
    font-size: 12px;
    color: var(--text-secondary);
}
.settings-toggle-switch {
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: var(--border-medium);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.settings-toggle-switch.on {
    background: var(--accent-primary);
}
.settings-toggle-knob {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.settings-toggle-switch.on .settings-toggle-knob {
    transform: translateX(14px);
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — Song card actions (rename / delete)
   ══════════════════════════════════════════════════════════════ */

/* Action buttons appear on hover of the row */
.song-row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.song-row:hover .song-row-actions {
    opacity: 1;
}

/* Individual icon button */
.song-row-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: background 0.15s, color 0.15s;
}
.song-row-action-btn:hover {
    background: var(--border-light);
    color: var(--text-primary);
}
.song-row-action-btn.danger:hover {
    background: rgba(220, 80, 60, 0.1);
    color: #c0392b;
}

/* ── Mobile: hide hover actions, use long-press reveal instead ── */
@media (max-width: 767px) {
    /* On mobile, actions are hidden by default (no hover) */
    .song-row-actions {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }

    /* Override the desktop hover rule — no hover on touch */
    .song-row:hover .song-row-actions {
        opacity: 0;
        pointer-events: none;
    }

    /* Long-press reveals the actions */
    .song-row-actions.revealed {
        opacity: 1;
        pointer-events: auto;
    }

    /* Subtle highlight on the revealed row so user knows it's active */
    .song-row.actions-revealed {
        background: var(--tertiary-bg);
        border-color: var(--accent-primary);
    }

    /* Make action buttons slightly larger for touch targets */
    .song-row-action-btn {
        width: 36px;
        height: 36px;
    }
    .song-row-action-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Inline rename input — replaces the title text */
.song-row-rename-input {
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--secondary-bg);
    border: 1.5px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 2px var(--space-2);
    width: 100%;
    outline: none;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — Delete confirm modal
   ══════════════════════════════════════════════════════════════ */

.delete-confirm-modal {
    max-width: 380px;
}

/* Danger action button */
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #c0392b;
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger:hover {
    background: #a93226;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD — Onboarding empty state
   ══════════════════════════════════════════════════════════════ */

.onboarding-state {
    padding: var(--space-10) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
}

/* Music-note icon container */
.onboarding-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tertiary-bg);
    border: 1.5px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    margin-bottom: var(--space-2);
}

.onboarding-cta {
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
}

.onboarding-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    max-width: 340px;
    line-height: 1.6;
    margin-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   ACCENT BAR — brand icon as home button (LyricEditor)
   ══════════════════════════════════════════════════════════════ */
.accent-home-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: flex-end;
    border-radius: 6px;
}
.accent-home-btn:hover {
    background: rgba(255,255,255,0.08);
}
/* Brand icon bricks inherit white on dark accent bar */
.app-accent-bar .brand-icon-brick {
    background: rgba(255,255,255,0.8);
}
.app-accent-bar .brand-icon-row:nth-child(4) .brand-icon-brick {
    background: rgba(212,135,95,0.8);
}
.app-accent-bar .brand-icon:hover .brand-icon-brick {
    background: var(--cream);
}

/* ══════════════════════════════════════════════════════════════
   SHORTCUTS MODAL
   ══════════════════════════════════════════════════════════════ */

.shortcuts-group {
    margin-bottom: var(--space-6);
}
.shortcuts-group:last-child {
    margin-bottom: 0;
}
.shortcuts-group-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
}
.shortcut-row:last-child {
    border-bottom: none;
}
.shortcut-keys {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    background: var(--tertiary-bg);
    border: 1px solid var(--border-medium);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-mono, 'Menlo', monospace);
    font-size: 11px;
    color: var(--text-primary);
    font-style: normal;
    white-space: nowrap;
}
.shortcut-plus {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}
.shortcut-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════
   FEEDBACK MODAL
   ══════════════════════════════════════════════════════════════ */

.feedback-type-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.feedback-type-btn {
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    border: 1.5px solid var(--border-medium);
    background: transparent;
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.feedback-type-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}
.feedback-type-btn.active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #ffffff;
}
.feedback-textarea {
    width: 100%;
    resize: vertical;
    min-height: 100px;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
}
/* reuse .form-textarea from existing styles */

/* ══════════════════════════════════════════════════════════════
   MOBILE — AI Review button (header bar)
   ══════════════════════════════════════════════════════════════ */

.mobile-review-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--border-medium);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    /* Shrink gracefully if header is tight */
    flex-shrink: 0;
}
/* Ensure the icon and label align on the same baseline */
.mobile-review-btn svg {
    display: block;
    flex-shrink: 0;
}
.mobile-review-label {
    line-height: 1;
}
.mobile-review-btn:hover,
.mobile-review-btn.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(212, 135, 95, 0.08);
}
.mobile-review-btn.scanning {
    opacity: 0.7;
    pointer-events: none;
    /* Center the spinner when label text is hidden */
    justify-content: center;
    padding: 4px 6px;
}

/* Badge — flag count overlay */
.mobile-review-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Spinner animation for the scan-in-progress icon */
@keyframes mobile-review-spin {
    to { transform: rotate(360deg); }
}
.mobile-review-spinner {
    animation: mobile-review-spin 0.8s linear infinite;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — Cliché inline feedback panel
   ══════════════════════════════════════════════════════════════ */

/* Inherits desktop .cliche-inline-feedback structure;
   these overrides make it feel native on touch screens */
.mobile-cliche-feedback {
    margin: 0 0 var(--space-2) 0;
    padding: var(--space-3) var(--space-3);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border-top: none;
    /* Slightly larger tap targets */
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* "Edit this line →" button inside the feedback panel */
.mobile-cliche-edit-btn {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-1) 0;
    background: none;
    border: none;
    color: var(--accent-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

/* ══════════════════════════════════════════════════════════════
   iOS / CAPACITOR NATIVE APP STYLES
   
   These rules only apply inside the Capacitor iOS wrapper.
   The `capacitor-ios` class is added to <body> by the app
   on native platforms. Safe area insets handle the notch,
   Dynamic Island, and home indicator bar.
   ══════════════════════════════════════════════════════════════ */

/* Tell CSS to respect safe areas from the environment() API.
   This is needed for notch/Dynamic Island (top) and
   home indicator bar (bottom) on modern iPhones. */
:root {
    --safe-top:    env(safe-area-inset-top,    0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left,   0px);
    --safe-right:  env(safe-area-inset-right,  0px);
}

/* When running as a native iOS app, push the accent bar
   down to clear the status bar / Dynamic Island */
.ios-native .app-accent-bar,
.ios-native .dashboard-accent-bar {
    padding-top: calc(var(--safe-top) + 4px);
    height: calc(44px + var(--safe-top));
}

/* Mobile dashboard header — same safe-area treatment */
.ios-native .m-dash-header {
    padding-top: calc(var(--safe-top) + 10px);
}

/* Ensure the dashboard main content doesn't hide under the home bar */
.ios-native .dashboard-main {
    padding-bottom: calc(var(--safe-bottom) + 16px);
}

/* Mobile editor — header needs safe area too */
.ios-native .mobile-accent-bar {
    padding-top: calc(var(--safe-top) + 4px);
    height: calc(44px + var(--safe-top));
}

/* Bottom sheet on iOS — account for home bar */
.ios-native .mobile-bottom-sheet {
    padding-bottom: var(--safe-bottom);
}

/* Mobile versions / collaborators panel bottom */
.ios-native .mobile-versions-panel,
.ios-native .mobile-collaborators-panel {
    padding-bottom: var(--safe-bottom);
}

/* Prevent rubber-band overscroll revealing white background
   behind the app on iOS — match the primary bg color */
.ios-native {
    overscroll-behavior: none;
    background: var(--primary-bg);
}