/* ============================================================
   STUDIO REFERENCE — local fonts (Fraunces · Geist · Geist Mono)
   Subsets: Latin, Latin-ext, Cyrillic. WOFF2 variable, OFL.
   ============================================================ */

@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('/static/fonts/Fraunces-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 900;
    font-display: swap;
    src: url('/static/fonts/Fraunces-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/static/fonts/Fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/static/fonts/Fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/static/fonts/Geist-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/static/fonts/Geist-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/static/fonts/Geist-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/static/fonts/GeistMono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/static/fonts/GeistMono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/static/fonts/GeistMono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Studio Reference — design tokens (default = warm dark)
   Light theme = Paper Edition (cream + emerald)
   Old token names preserved as aliases for unmigrated components.
   ============================================================ */

:root {
    /* Tells browsers we're using a dark UI so native widgets
       (select dropdowns, scrollbars, form controls) match. */
    color-scheme: dark;

    /* Studio Reference (warm dark) */
    --bg-deep:       #0E0D0B;
    --bg-paper:      #18150F;
    --bg-card:       #211E18;
    --bg-card-2:     #26211A;
    --bg-rule:       #2E2820;

    --ink:           #F2EBDC;
    --ink-soft:      #D6CDB9;
    --ink-mute:      #9C937F;
    --ink-faint:     #5C5447;
    --ink-ghost:     #3A3528;

    --copper:        #E08038;
    --copper-hi:     #F4A064;
    --copper-lo:     #B0561F;
    --copper-rgb:    224, 128, 56;
    --copper-glow:   rgba(var(--copper-rgb), 0.35);

    --amber:         #F5C26B;
    --jade:          #7AB294;
    --rust:          #C2553F;

    --rule:          rgba(242, 235, 220, 0.08);
    --rule-strong:   rgba(242, 235, 220, 0.18);

    --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans:  'Geist', 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --mono:  'Geist Mono', 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

    --ease:     cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Backwards-compatible aliases — components not yet migrated */
    --bg-primary: var(--bg-deep);
    --bg-secondary: var(--bg-paper);
    --bg-tertiary: var(--bg-card);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--ink-mute);
    --accent: var(--copper);
    --accent-hover: var(--copper-hi);
    --border: var(--bg-rule);
    --error: var(--rust);
    --vinyl-ring: #1a1611;
    --vinyl-groove: #2a241c;
    --vinyl-highlight: rgba(255,255,255,0.05);
    --vinyl-highlight-dim: rgba(255,255,255,0.03);
    --vinyl-edge: #0a0907;
    --vinyl-spindle: #050402;
    --shadow-elevation: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
    color-scheme: light;
    /* Paper Edition (warm cream) */
    --bg-deep:       #F5F1EA;
    --bg-paper:      #EDE7DC;
    --bg-card:       #FFFFFF;
    --bg-card-2:     #FAF6EE;
    --bg-rule:       #D4CCB9;

    --ink:           #1A1715;
    --ink-soft:      #4A4540;
    --ink-mute:      #8A8278;
    --ink-faint:     #B0A89A;
    --ink-ghost:     #C8C0B3;

    --copper:        #1F4E3D;       /* hunter emerald in light mode */
    --copper-hi:     #2D6A53;
    --copper-lo:     #143E2F;
    --copper-rgb:    31, 78, 61;
    --copper-glow:   rgba(var(--copper-rgb), 0.18);

    --amber:         #C29D31;
    --jade:          #4D8C6F;
    --rust:          #B82F1A;

    --rule:          rgba(26, 23, 21, 0.08);
    --rule-strong:   rgba(26, 23, 21, 0.18);

    /* Aliases */
    --bg-primary: var(--bg-deep);
    --bg-secondary: var(--bg-paper);
    --bg-tertiary: var(--bg-card);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-muted: var(--ink-mute);
    --accent: var(--copper);
    --accent-hover: var(--copper-hi);
    --border: var(--bg-rule);
    --error: var(--rust);
    --vinyl-ring: #C8BFA8;
    --vinyl-groove: #B0A892;
    --vinyl-highlight: rgba(255,255,255,0.3);
    --vinyl-highlight-dim: rgba(255,255,255,0.15);
    --vinyl-edge: #968D78;
    --vinyl-spindle: #8A8278;
    --shadow-elevation: rgba(26, 23, 21, 0.15);
}

:root[data-theme="light"] .player-container,
:root[data-theme="light"] .browser-container,
:root[data-theme="light"] .scripts-container,
:root[data-theme="light"] .script-management,
:root[data-theme="light"] .settings-section,
:root[data-theme="light"] .display-container {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .toast {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] dialog {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] .mini-player {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Dynamic background removed per user request — canvas stays in DOM
   so JS doesn't break, but is hidden + the toggle button is hidden. */
.bg-shader-canvas { display: none !important; }
#bgToggle { display: none !important; }

body.dynamic-bg-active {
    background: transparent;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-primary);
}

html {
    overflow-y: scroll;
}

body {
    font-family: var(--sans);
    font-feature-settings: 'ss01', 'cv11';
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Film-grain overlay — adds analog warmth to the dark theme.
   Disabled in light theme where it muddies cream paper. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:root[data-theme="light"] body::before {
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.32  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reduced-motion fallback: drop the grain entirely. */
@media (prefers-reduced-motion: reduce) {
    body::before { display: none; }
}

/* Heading defaults — components may override per-element. */
h1, h2, h3, .editorial-heading {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.015em;
}

/* Mono utility — for technical readouts (timecodes, bitrates, etc.) */
.mono, .timecode, .meta-mono {
    font-family: var(--mono);
    font-feature-settings: 'tnum', 'cv01';
}

/* Prevent flash of untranslated content */
body.loading-translations {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

body.translations-loaded {
    opacity: 1;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Focus-visible states for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.2);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
}

.tab-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Prevent scrolling when dialog is open */
body.dialog-open {
    overflow: hidden;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0.75rem 0.75rem 0.5rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.version-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-weight: 500;
    align-self: center;
}

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

.status-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    flex-shrink: 0;
    transition: background 0.3s;
}

.status-dot.connected::before,
.status-dot.status-online::before {
    background: var(--accent);
}

.status-dot.status-offline::before {
    background: var(--error);
}

/* Folder management */
.folder-unavailable-badge,
.folder-disabled-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
}

.folder-unavailable-badge {
    background: color-mix(in srgb, var(--error) 20%, transparent);
    color: var(--error);
}

.folder-disabled-badge {
    background: color-mix(in srgb, var(--text-secondary) 20%, transparent);
    color: var(--text-secondary);
}

.browser-item.unavailable,
.browser-list-item.unavailable {
    opacity: 0.5;
    cursor: default;
}

.path-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 4px;
}

.header-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 3px;
    flex-shrink: 0;
}

.header-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

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

.header-btn.active {
    color: var(--accent);
}

.header-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.header-btn-logout:hover {
    color: var(--error);
}

.header-locale {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 4px 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

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

.header-locale:focus {
    outline: none;
}

.header-locale option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Header Quick Links */
.header-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-links:not(:empty) {
    padding-right: 3px;
    margin-right: 3px;
    border-right: 1px solid var(--border);
}

.header-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 5px;
    color: var(--text-secondary);
    transition: color 0.2s, background 0.2s;
    text-decoration: none;
}

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

.header-link svg {
    width: 16px;
    height: 16px;
}

/* Icon Input with Preview */
.icon-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-input-wrapper input {
    flex: 1;
}

.icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.icon-preview svg {
    width: 20px;
    height: 20px;
}

.icon-preview:empty {
    display: none;
}

/* Accent Color Picker */
.accent-picker {
    position: relative;
}

.accent-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--border);
    display: block;
}

.accent-picker-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    gap: 6px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    grid-template-columns: repeat(3, 28px);
}

.accent-picker-dropdown.open {
    display: grid;
}

.accent-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.accent-swatch:hover {
    transform: scale(1.15);
}

.accent-swatch.active {
    border-color: var(--text-primary);
}

.accent-custom-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    border-radius: 4px;
}

.accent-custom-row:hover .accent-custom-label {
    color: var(--text-primary);
}

.accent-custom-row.active .accent-custom-swatch {
    outline: 2px solid var(--text-primary);
    outline-offset: 1px;
}

.accent-custom-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
}

.accent-custom-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color 0.15s;
}

.accent-custom-row input[type="color"] {
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}


/* Tab Bar */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border);
    position: relative;
}

.tab-indicator {
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0;
    background: var(--bg-tertiary);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.5rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
}

.tab-btn:hover {
    color: var(--text-primary);
    transform: none !important;
}

.tab-btn.active {
    color: var(--accent);
    background: transparent;
}

.tab-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

[data-tab-content] {
    display: none;
    opacity: 0;
}

[data-tab-content].active {
    display: block;
    animation: tabFadeIn 0.25s ease-out forwards;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .tab-btn span {
        display: none;
    }

    .tab-btn {
        padding: 0.6rem;
    }
}

.player-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.player-layout {
    display: flex;
    flex-direction: column;
    perspective: 800px;
}

.player-details {
    flex: 1;
    min-width: 0;
}

.album-art-container {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    transform-style: preserve-3d;
    animation: albumArt3D 8s ease-in-out infinite;
}

@keyframes albumArt3D {
    0%, 100% { transform: rotateY(-8deg) rotateX(2deg); }
    50% { transform: rotateY(8deg) rotateX(-2deg); }
}

.album-art-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    filter: blur(40px) saturate(1.5);
    opacity: 0.5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.1);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, border-radius 0.6s ease;
}

#album-art {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    background: var(--bg-tertiary);
    position: relative;
    z-index: 1;
    margin: 0;
    transition: border-radius 0.6s ease, width 0.6s ease, height 0.6s ease, box-shadow 0.6s ease, margin 0.6s ease, filter 0.6s ease;
}

:root[data-theme="light"] .album-art-glow {
    opacity: 0.35;
    filter: blur(50px) saturate(1.8);
}

/* Legacy "vinyl mode" toggle (.album-art-container.vinyl + JS-driven
   spinning class) was removed alongside the sleeve+disc redesign — the
   disc now spins structurally via .vinyl-stage .vinyl when playstate
   is "playing" (see SLEEVE FRAME section below). */

/* Audio Spectrogram Visualization */
.spectrogram-canvas {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0 0 8px 8px;
}

.visualizer-active .spectrogram-canvas {
    opacity: 1;
}

.visualizer-active #album-art {
    transition: transform 0.08s ease-out;
}

.visualizer-active .album-art-glow {
    transition: opacity 0.08s ease-out;
}

.track-info {
    text-align: center;
    margin-bottom: 2rem;
}

#track-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

#artist {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

#album {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.playback-state {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.state-icon {
    width: 16px;
    height: 16px;
}

.progress-container {
    margin-bottom: 2rem;
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}

.progress-bar:hover {
    transform: scaleY(1.4);
}

.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    width: 0;
    transition: width 0.1s linear;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.progress-bar:hover .progress-fill::after,
.progress-bar.dragging .progress-fill::after {
    transform: translateY(-50%) scale(1);
}

.progress-bar.dragging {
    transform: scaleY(1.4);
}

.progress-bar.dragging .progress-fill {
    transition: none;
}

.controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

button {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.controls button {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.controls button:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.controls button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.25);
}

.mute-btn:focus-visible,
.mini-control-btn:focus-visible,
.vinyl-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.25);
}

.controls button.primary {
    width: 56px;
    height: 56px;
    background: var(--accent);
}

.controls button.primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: #fff;
    transform: scale(1.1);
}

.volume-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 1rem;
}

#volume-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: color-mix(in srgb, var(--accent) 15%, var(--border));
    border-radius: 3px;
    outline: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#volume-slider:hover::-webkit-slider-thumb {
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(29, 185, 84, 0.4);
}

#volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#volume-slider:hover::-moz-range-thumb {
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(29, 185, 84, 0.4);
}

.volume-display {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: right;
}

.mute-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mute-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.source-info {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 0;
}

.source-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.source-icon {
    display: inline-flex;
    align-items: center;
}

.source-icon svg {
    width: 14px;
    height: 14px;
}

.player-toggles {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

.vinyl-toggle-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.vinyl-toggle-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
    transform: none;
}

.vinyl-toggle-btn.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(29, 185, 84, 0.1);
}

.vinyl-toggle-btn svg {
    width: 16px;
    height: 16px;
}

/* Scripts Section */
.scripts-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.scripts-container h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
    gap: 1rem;
}

.script-btn {
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 1rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.script-btn:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.script-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.script-btn .script-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.script-btn .script-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.2s;
}

.script-btn:hover:not(:disabled) .script-description {
    color: rgba(255, 255, 255, 0.85);
}

.script-btn.executing {
    opacity: 0.6;
    pointer-events: none;
}

.script-btn .script-icon {
    color: var(--accent);
    line-height: 0;
}

.script-btn .script-icon svg {
    width: 24px;
    height: 24px;
}

.script-btn:hover:not(:disabled) .script-icon {
    color: #fff;
}

/* Inline icon in table name cells */
.name-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.table-icon {
    display: inline-flex;
    color: var(--text-secondary);
    line-height: 0;
}

.table-icon svg {
    width: 16px;
    height: 16px;
}

/* Script Management Styles */
.script-management {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow-x: auto;
}

.script-management h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Settings Container */
.settings-container.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.settings-section summary {
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
    list-style: none;
}

.settings-section summary::-webkit-details-marker {
    display: none;
}

.settings-section summary::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.settings-section[open] > summary::before {
    transform: rotate(45deg);
}

.settings-section summary:hover {
    background: var(--bg-tertiary);
}

.settings-section-content {
    padding: 0 1rem 1rem;
    overflow-x: auto;
    animation: settingsExpand 0.3s ease-out;
}

@keyframes settingsExpand {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-section-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.audio-device-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audio-device-selector label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.audio-device-selector label span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.audio-device-selector select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.audio-device-selector select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
}

.audio-device-status {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.audio-device-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.audio-device-status.active {
    color: var(--accent);
}

.audio-device-status.active::before {
    background: var(--accent);
}

.audio-device-status.available {
    color: var(--text-secondary);
}

.audio-device-status.available::before {
    background: var(--text-muted);
}

.audio-device-status.unavailable {
    color: var(--text-muted);
}

.audio-device-status.unavailable::before {
    background: var(--text-muted);
    opacity: 0.5;
}

/* Link card in Quick Access */
.link-card {
    text-decoration: none;
    color: var(--text-primary);
    border: 1px dashed var(--border);
}

.link-card:hover {
    border-style: solid;
}

/* Mini player nav buttons */
.mini-nav-btn {
    width: 28px;
    height: 28px;
}

.mini-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Display Control Section */
        .display-container {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        .display-monitors {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .display-monitor-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1rem 1.25rem;
        }

        .display-monitor-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .display-monitor-icon {
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .display-monitor-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .display-monitor-name {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 0.875rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .display-primary-badge {
            display: inline-block;
            background: var(--accent);
            color: #fff;
            font-size: 0.625rem;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: 8px;
            margin-left: 6px;
            vertical-align: middle;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .display-monitor-details {
            font-size: 0.75rem;
            color: var(--text-muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .display-power-btn {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .display-power-btn.on {
            color: var(--accent);
            border-color: var(--accent);
        }

        .display-power-btn.on:hover {
            color: var(--error);
            border-color: var(--error);
        }

        .display-power-btn.off {
            color: var(--error);
            border-color: var(--error);
            opacity: 0.6;
        }

        .display-power-btn.off:hover {
            color: var(--accent);
            border-color: var(--accent);
            opacity: 1;
        }

        .display-brightness-control {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .display-brightness-icon {
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .display-brightness-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: color-mix(in srgb, var(--accent) 15%, var(--border));
            outline: none;
            cursor: pointer;
        }

        .display-brightness-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            transition: transform 0.15s;
        }

        .display-brightness-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent);
            cursor: pointer;
            border: none;
        }

        .display-brightness-slider:hover::-webkit-slider-thumb {
            transform: scale(1.2);
        }

        .display-brightness-slider:hover::-moz-range-thumb {
            transform: scale(1.2);
        }

        .display-brightness-slider:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .display-brightness-value {
            font-size: 0.813rem;
            color: var(--text-secondary);
            min-width: 36px;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

.add-card {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.add-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-tertiary);
}

.add-card-icon {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1;
}

.add-card-grid {
    border: 2px dashed var(--border);
    background: transparent;
}

.add-card-grid:hover:not(:disabled) {
    border-color: var(--text-muted);
    background: var(--bg-tertiary);
}

.scripts-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.scripts-table th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid var(--border);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.scripts-table td {
    padding: 0.75rem;
    word-break: break-word;
    border-bottom: 1px solid var(--border);
}

.scripts-table tr:hover {
    background: var(--bg-tertiary);
}

.scripts-table code {
    background: var(--bg-tertiary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--accent);
    white-space: nowrap;
}

.action-btn {
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

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

.action-buttons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn.execute:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* Execution Result Dialog */
.execution-result {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: var(--bg-primary);
    border-radius: 6px;
    padding: 1rem;
    margin: 0.5rem 0;
    max-height: 400px;
    overflow-y: auto;
}

.execution-result pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.813rem;
    line-height: 1.5;
}

.execution-status {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-item label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.status-item value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.status-item.success value {
    color: var(--accent);
}

.status-item.error value {
    color: var(--error);
}

.result-section {
    margin-bottom: 1rem;
}

.result-section h4 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Dialog Styles */
dialog {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    max-width: 500px;
    width: 90%;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    animation: dialogIn 0.25s ease-out;
    overflow: visible;
}

dialog form {
    overflow: visible;
}

dialog.dialog-closing {
    animation: dialogOut 0.2s ease-in forwards;
}

/* Ensure dialogs are hidden until explicitly opened */
dialog:not([open]) {
    display: none;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    animation: backdropIn 0.25s ease-out;
}

dialog.dialog-closing::backdrop {
    animation: backdropOut 0.2s ease-in forwards;
}

@keyframes dialogIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dialogOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.9) translateY(10px); }
}

@keyframes backdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes backdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.confirm-dialog {
    max-width: 400px;
    padding: 1.5rem;
}

.confirm-dialog p {
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.confirm-dialog-actions button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-cancel:hover {
    background: var(--border);
}

.btn-danger {
    background: var(--error);
    color: #fff;
}

.btn-danger:hover {
    filter: brightness(1.15);
}

.dialog-header {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.dialog-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.dialog-body {
    padding: 1.5rem;
}

.dialog-body label {
    display: block;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.dialog-body input,
.dialog-body textarea,
.dialog-body select {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.25rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.875rem;
}

.dialog-body textarea {
    min-height: 80px;
    resize: vertical;
}

.dialog-body input:focus,
.dialog-body textarea:focus,
.dialog-body select:focus {
    outline: none;
    border-color: var(--accent);
}

.dialog-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dialog-footer button {
    padding: 0.625rem 1.5rem;
    border-radius: 6px;
    border: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 100px;
    white-space: nowrap;
}

.dialog-footer .btn-primary {
    background: var(--accent);
    color: var(--text-primary);
}

.dialog-footer .btn-primary:hover {
    background: var(--accent-hover);
}

.dialog-footer .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.dialog-footer .btn-secondary:hover {
    background: var(--border);
}

/* Parameters editor (CRUD dialog) */
.params-section {
    margin-top: 0.5rem;
}

.params-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.btn-small {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

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

.param-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bg-tertiary);
}

.param-row-header {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.param-row-header .param-name {
    flex: 1;
    min-width: 0;
}

.param-row-header .param-type {
    width: 100px;
    flex-shrink: 0;
}

.param-required-label {
    display: flex !important;
    align-items: center;
    gap: 0.125rem;
    margin-bottom: 0 !important;
    cursor: pointer;
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.param-required-label input {
    width: auto !important;
    margin: 0 !important;
}

.param-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
    flex-shrink: 0;
    transition: color 0.2s;
}

.param-remove-btn:hover {
    color: var(--error);
}

.param-row-details {
    margin-top: 0.375rem;
}

.param-row-details .param-description {
    width: 100%;
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.param-row-extra {
    display: flex;
    gap: 0.375rem;
}

.param-row-extra input {
    flex: 1;
    min-width: 0;
}

.param-row-header input,
.param-row-header select,
.param-row-details input,
.param-row-extra input {
    padding: 0.35rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
}

.param-row-header input:focus,
.param-row-header select:focus,
.param-row-details input:focus,
.param-row-extra input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Parameter hint in execution dialog */
.param-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* ── Icon Select ──────────────────────────────────────────── */

.icon-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: left;
    font-family: inherit;
    box-sizing: border-box;
}

/* Match dialog input height when inside a dialog */
.dialog-body .icon-select-trigger {
    padding: 0.5rem;
    margin-top: 0.25rem;
}

/* Compact trigger inside param rows */
.param-row-header .icon-select-trigger {
    padding: 0.3rem 0.4rem;
    margin-top: 0;
    font-size: 0.75rem;
    width: 110px;
    flex-shrink: 0;
}

.icon-select-trigger:hover {
    border-color: var(--accent);
}

.icon-select-trigger-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.icon-select-trigger-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.param-row-header .icon-select-trigger-icon svg {
    width: 14px;
    height: 14px;
}

.icon-select-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-select-trigger-arrow {
    flex-shrink: 0;
    font-size: 0.8rem;
    opacity: 0.5;
    margin-left: auto;
}

.icon-select-popup {
    position: absolute;
    z-index: 100;
    max-height: 260px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    transition: opacity 0.12s ease-out, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-sizing: border-box;
}

.icon-select-popup.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    overflow-y: auto;
    pointer-events: auto;
}



.icon-select-grid {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.icon-select-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    text-align: center;
}

.icon-select-cell:hover {
    border-color: var(--accent);
    transform: scale(1.03);
}

.icon-select-cell.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
}

.icon-select-cell-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-select-cell-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.icon-select-cell.active .icon-select-cell-icon svg {
    fill: var(--accent);
}

.icon-select-cell-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.icon-select-cell-desc {
    font-size: 0.7rem;
    opacity: 0.6;
    line-height: 1.3;
}

/* Horizontal layout for single-column grids (e.g. audio device list) */
.icon-select-grid--horizontal .icon-select-cell {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    text-align: left;
}

.icon-select-grid--horizontal .icon-select-cell-icon svg {
    width: 16px;
    height: 16px;
}

.icon-select-grid--horizontal .icon-select-cell-label {
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .icon-select-cell-desc { display: none; }
    .icon-select-cell { padding: 6px 4px; }
    .icon-select-grid { gap: 4px; padding: 4px; }
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.scripts-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-size: 0.875rem;
}

.empty-state-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
}

.empty-state-illustration svg {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.5;
}

.empty-state-illustration p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    padding-left: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s;
    pointer-events: auto;
    border-left: 4px solid var(--border);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-color: var(--accent);
    border-left-color: var(--accent);
}

.toast.error {
    border-color: var(--error);
    border-left-color: var(--error);
}

/* Auth Modal */
#auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#auth-overlay.hidden {
    display: none;
}

.auth-modal {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
}

.auth-modal h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.auth-modal p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

#token-input {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

#token-input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-connect {
    width: 100%;
    height: auto;
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
    transition: background 0.2s;
}

.btn-connect:hover {
    background: var(--accent-hover);
    transform: none;
}

.help-text {
    background: var(--bg-tertiary);
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 1rem;
}

.help-text code {
    background: var(--bg-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.875rem;
}

.error-message {
    color: var(--error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: none;
}

.error-message.visible {
    display: block;
}


/* Mini Player (Sticky) */
.mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(30, 30, 30, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + 2px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] .mini-player {
    background: rgba(245, 245, 245, 0.75);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.mini-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: var(--mini-progress, 0%);
    background: var(--accent);
    transition: width 0.1s linear;
}

.mini-player.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.mini-player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 200px;
    flex-shrink: 0;
}

.mini-album-art {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.mini-track-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mini-track-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-artist {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.mini-time-display {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mini-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    min-width: 100px;
}

.mini-progress-bar:hover {
    height: 6px;
}

.mini-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.mini-progress-fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.mini-progress-bar:hover .mini-progress-fill::after {
    transform: translateY(-50%) scale(1);
}

.mini-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.mini-control-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.mini-control-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

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

.mini-control-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mini-volume-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    min-width: 180px;
}

.mini-volume-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: color-mix(in srgb, var(--accent) 15%, var(--border));
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    min-width: 80px;
}

.mini-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
}

.mini-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.mini-volume-slider:hover::-webkit-slider-thumb {
    transform: scale(1.2);
}

.mini-volume-slider:hover::-moz-range-thumb {
    transform: scale(1.2);
}

.mini-volume-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
}

/* SVG Icons */
svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

button.primary svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 600px) {
    .container {
        padding: 0.5rem;
    }

    #album-art {
        width: 250px;
        height: 250px;
    }

    #track-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   Media Browser Styles
   ======================================== */

.browser-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.browser-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.browser-header-section h2 {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.813rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    border: 1px solid var(--border);
}

.breadcrumb::-webkit-scrollbar {
    display: none;
}

.breadcrumb:empty {
    display: none;
}

.breadcrumb-item {
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.breadcrumb-item:hover {
    color: var(--accent);
    background: rgba(29, 185, 84, 0.08);
    text-decoration: none;
}

.breadcrumb-item:last-child {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

.breadcrumb-home {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    color: var(--text-muted);
}

.breadcrumb-home:hover {
    text-decoration: none;
    color: var(--accent);
}

.breadcrumb-separator {
    color: var(--text-muted);
    margin: 0;
    opacity: 0.5;
    font-size: 0.75rem;
}

/* Browser Toolbar */
.browser-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.browser-toolbar-left,
.browser-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Browser Search */
.browser-search-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    max-width: 300px;
}

.browser-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.browser-search-input {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 2rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.813rem;
    outline: none;
    transition: border-color 0.2s;
}

.browser-search-input:focus {
    border-color: var(--accent);
}

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

.browser-search-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: auto;
    height: auto;
    transition: color 0.15s;
}

.browser-search-clear:hover {
    color: var(--text-primary);
    background: transparent !important;
    transform: translateY(-50%) !important;
}

.view-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    height: auto;
    border-radius: 0;
}

.view-toggle-btn:hover {
    color: var(--text-primary);
    background: transparent !important;
    transform: none !important;
}

.view-toggle-btn.active {
    color: var(--accent);
    background: var(--bg-primary);
}

.browser-refresh-btn {
    margin-left: 0.35rem;
}

.view-toggle-btn svg {
    fill: currentColor;
}

.browser-play-all-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
    height: auto;
    margin-left: 0.5rem;
}

.browser-play-all-btn:hover {
    background: var(--accent-hover);
    transform: none;
}

.items-per-page-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.items-per-page-label select {
    padding: 0.3rem 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.813rem;
    cursor: pointer;
}

.items-per-page-label select:hover {
    border-color: var(--accent);
}

/* Browser Grid */
.browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    min-height: 200px;
    align-items: stretch;
}

/* Root folder grid — wider cards */
.browser-grid.browser-root-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

/* Compact Grid */
.browser-grid.browser-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(80px, 100px));
    gap: 0.5rem;
}

.browser-grid-compact .browser-item {
    padding: 0.4rem;
    gap: 0.3rem;
}


.browser-grid-compact .browser-icon {
    font-size: 2rem;
}

.browser-grid-compact .browser-item-name {
    font-size: 0.688rem;
    -webkit-line-clamp: 1;
}

.browser-grid-compact .browser-item-meta {
    font-size: 0.625rem;
}

.browser-grid-compact .browser-item-type {
    font-size: 0.5rem;
    padding: 0.15rem 0.35rem;
    top: 0.25rem;
    right: 0.25rem;
}

/* Browser List View */
.browser-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 1.5rem;
    min-height: 200px;
}

/* List view column header */
.browser-list-header {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.688rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    user-select: none;
}

.browser-list-header span:nth-child(n+3) {
    text-align: right;
}

.browser-list-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    animation: itemFadeIn 0.3s ease-out backwards;
    animation-delay: calc(var(--item-index, 0) * 15ms);
}

.browser-list-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

.browser-list-item:active {
    background: var(--border);
}


.browser-list-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 6px;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.browser-list-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.browser-list-play-overlay svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

.browser-list-item:hover .browser-list-play-overlay {
    opacity: 1;
}

.browser-list-thumbnail {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}

.browser-list-thumbnail.loading {
    opacity: 0;
}

.browser-list-thumbnail.loaded {
    animation: fadeIn 0.3s ease-out forwards;
}

.browser-list-name {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.browser-list-bitrate {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 55px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.browser-list-duration {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 45px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.browser-list-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.browser-loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.browser-loading .loading-spinner {
    width: 28px;
    height: 28px;
}

.browser-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.browser-item {
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    animation: itemFadeIn 0.3s ease-out backwards;
    animation-delay: calc(var(--item-index, 0) * 25ms);
}

@keyframes itemFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.browser-item:hover {
    border-color: var(--border);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.browser-item:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Root Folder Cards — distinctive hero style */
.browser-item.browser-root-folder {
    padding: 1.25rem 1rem;
    gap: 0.75rem;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
    min-height: 120px;
    justify-content: center;
}

.browser-item.browser-root-folder .browser-thumb-wrapper {
    width: auto;
    height: auto;
}

.browser-item.browser-root-folder .browser-icon {
    width: 56px;
    height: 56px;
    font-size: 1.75rem;
    border-radius: 14px;
    background: rgba(29, 185, 84, 0.1);
    border: 1px solid rgba(29, 185, 84, 0.15);
    transition: all 0.25s;
}

.browser-item.browser-root-folder:hover .browser-icon {
    background: rgba(29, 185, 84, 0.18);
    border-color: rgba(29, 185, 84, 0.3);
    transform: scale(1.05);
}

.browser-item.browser-root-folder .browser-item-name {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Unavailable root folder overlay */
.browser-item.browser-root-folder.unavailable .browser-icon {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.12);
    opacity: 0.6;
}

/* Thumbnail Display */
.browser-thumbnail {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    background: var(--bg-primary);
    display: block;
}

.browser-thumbnail.loading {
    background: linear-gradient(
        110deg,
        var(--bg-primary) 30%,
        var(--bg-tertiary) 50%,
        var(--bg-primary) 70%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    opacity: 1;
}

.browser-thumbnail.loaded {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* File/Folder Icons */
.browser-icon {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border-radius: 8px;
    background: var(--bg-primary);
}

.browser-item-info {
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding: 0 0.15rem;
}

.browser-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.browser-item-meta {
    font-size: 0.688rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.3;
}

.browser-item-type {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background: var(--bg-primary);
    padding: 0.2rem;
    border-radius: 4px;
    color: var(--text-secondary);
    z-index: 10;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.browser-item:hover .browser-item-type {
    opacity: 0.85;
}

.browser-item-type.audio {
    color: var(--accent);
}

.browser-item-type.video {
    color: #3b82f6;
}

/* Thumbnail Wrapper & Play Overlay */
.browser-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
}

.browser-thumb-wrapper .browser-thumbnail,
.browser-thumb-wrapper .browser-icon {
    width: 100%;
    height: 100%;
}

.browser-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.browser-play-overlay svg {
    width: 36px;
    height: 36px;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.15s;
}

.browser-item:hover .browser-play-overlay {
    opacity: 1;
}

.browser-item:hover .browser-play-overlay svg {
    transform: scale(1.1);
}

/* Compact grid overrides */
.browser-grid-compact .browser-thumb-wrapper {
    width: 100%;
    aspect-ratio: 1;
}

.browser-grid-compact .browser-play-overlay svg {
    width: 24px;
    height: 24px;
}

/* Download Button (list view only) */
.browser-list-download {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 0.25rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    opacity: 0;
}

.browser-list-item:hover .browser-list-download {
    opacity: 1;
}

.browser-list-download:hover {
    color: var(--accent);
    background: transparent !important;
    transform: none;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.pagination button {
    padding: 0.4rem 1.25rem;
    border-radius: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.813rem;
    font-weight: 600;
    transition: all 0.2s;
    width: auto;
    height: auto;
}

.pagination button:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: none;
}

.pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.pagination-showing {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.page-input {
    width: 3rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.813rem;
    -moz-appearance: textfield;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

/* Responsive Design */
@media (max-width: 600px) {
    .browser-container {
        padding: 0.75rem;
    }

    .browser-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.5rem;
    }

    .browser-grid.browser-root-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 0.75rem;
    }

    .browser-grid.browser-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .browser-item {
        padding: 0.5rem;
    }

    .browser-item.browser-root-folder {
        padding: 1rem 0.75rem;
        min-height: 100px;
    }

    .browser-header-section {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .browser-header-section button {
        width: 100%;
    }

    .browser-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .browser-toolbar-left {
        gap: 0.35rem;
    }

    .browser-search-wrapper {
        max-width: none;
        flex-basis: 100%;
        order: 10;
    }

    .browser-toolbar-right {
        margin-left: auto;
    }

    .items-per-page-label span {
        display: none;
    }

    .browser-list-header {
        grid-template-columns: 32px 1fr auto auto;
        gap: 0.5rem;
        padding: 0.35rem 0.5rem;
    }

    .browser-list-header span:nth-child(n+3):nth-child(-n+4) {
        display: none;
    }

    .browser-list-item {
        grid-template-columns: 32px 1fr auto auto;
        gap: 0.5rem;
        padding: 0.4rem 0.5rem;
    }

    .browser-list-icon {
        width: 32px;
        height: 32px;
    }

    .browser-list-duration {
        display: none;
    }

    .browser-list-size {
        display: none;
    }

    .browser-list-type {
        display: none;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pagination-showing {
        flex-basis: 100%;
        text-align: center;
        order: -1;
    }

    .album-art-glow {
        width: 250px;
        height: 250px;
    }

    .mini-volume-container {
        display: none;
    }

    .mini-player {
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        padding-top: calc(0.5rem + 2px);
    }

    .mini-nav-btn {
        display: none;
    }

    .mini-player-info {
        min-width: 120px;
    }

    .mini-progress-container {
        gap: 0.5rem;
    }
}

/* Tablet breakpoint */
@media (min-width: 601px) and (max-width: 900px) {
    .mini-volume-container {
        display: none;
    }

    .browser-list-bitrate {
        display: none;
    }

    .browser-list-header {
        grid-template-columns: 40px 1fr auto auto auto;
    }

    .browser-list-header span:nth-child(3) {
        display: none;
    }

    .browser-list-item {
        grid-template-columns: 40px 1fr auto auto auto;
    }
}

/* Update Banner */
.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    transition: transform 0.3s ease;
}

.update-banner:not(.hidden) {
    animation: bannerSlideIn 0.4s ease-out;
}

.update-banner.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.update-banner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.update-banner a:hover {
    opacity: 0.85;
}

.update-banner-close {
    background: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 0 4px;
    opacity: 0.7;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
}

.update-banner-close:hover {
    opacity: 1;
}

/* Connection Banner */
.connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--error);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    transition: transform 0.3s ease;
}

.connection-banner:not(.hidden) {
    animation: bannerSlideIn 0.4s ease-out, bannerPulse 2s ease-in-out 0.4s 2;
}

.connection-banner.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

@keyframes bannerSlideIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

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

.connection-banner-btn {
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.2s;
}

.connection-banner-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Wide screens - horizontal player layout */
@media (min-width: 900px) {
    .container {
        max-width: 960px;
    }

    .player-layout {
        flex-direction: row;
        gap: 2.5rem;
        align-items: flex-start;
    }

    .album-art-container {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .player-details .track-info {
        text-align: left;
    }

    .player-details .playback-state {
        justify-content: flex-start;
    }

    .player-details .controls {
        justify-content: flex-start;
    }

    .player-details .source-info {
        text-align: left;
        justify-content: flex-start;
    }
}

/* ========================================
   PWA Standalone & Mobile Polish
   ======================================== */

html {
    overscroll-behavior: none;
}

/* Safe area insets for notched phones (viewport-fit=cover) */
.container {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
}

.mini-player {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

.connection-banner {
    padding-top: max(10px, env(safe-area-inset-top));
}

/* Touch optimization: eliminate 300ms tap delay */
.controls button,
.mini-controls button,
.mini-control-btn,
.tab-btn,
.header-btn,
.header-link,
.mute-btn,
.vinyl-toggle-btn,
.view-toggle-btn,
.browser-item,
.browser-list-item,
.script-btn,
.action-btn {
    touch-action: manipulation;
}

@media (max-width: 600px) {
    .container {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    .mini-player {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior-y: none;
        -webkit-overflow-scrolling: touch;
    }
}

/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   STUDIO REFERENCE — editorial overrides
   Applied on top of the legacy stylesheet. Mapped to existing
   selectors so no JS / DOM changes are required.
   ════════════════════════════════════════════════════════════════ */

/* ─── Container & header ────────────────────────────────────── */
/* The footer was removed in favour of an About dialog, so the page
   bottom is now whatever the active tab content ends with. A 64px
   bottom pad left a visible dead band under the player view; 24px
   keeps a breath of breathing room without painting an empty page. */
.container {
    max-width: 1280px;
    padding: 56px 48px 24px;
}

@media (max-width: 720px) {
    .container { padding: 48px 18px 24px; }
}

/* ─── Folio marks (page corners, all tabs) ────────────────── */
body > .folio {
    position: fixed;
    top: 16px;
    z-index: 50;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
body > .folio.tl { left: 24px; }
body > .folio.tr { right: 24px; }

@media (max-width: 720px) {
    body > .folio { font-size: 9px; letter-spacing: 0.16em; }
    body > .folio.tl { left: 14px; }
    body > .folio.tr { right: 14px; }
}

/* The status-dot now lives inside the folio */
body > .folio .status-dot {
    width: 7px;
    height: 7px;
    background: var(--jade);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(122, 178, 148, 0.55);
    animation: sr-pulse 2.4s ease-in-out infinite;
}

@keyframes sr-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(122, 178, 148, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(122, 178, 148, 0); }
}

/* Hide the old in-header status-dot if any rendering remnants exist */
header .status-dot { display: none; }

/* The version-label now lives inside the folio.tr — remove the old badge styling */
.version-label,
body > .folio #version-label {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--copper);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 0;
}

/* ─── Header (3-column: brand center, toolbar right) ─────── */
header {
    padding: 0 0 22px 0;
    border-bottom: 1px solid var(--rule-strong);
    margin-bottom: 28px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

/* Brand wordmark (centered) */
header .brand {
    text-align: center;
    grid-column: 2;
    line-height: 1;
}
header .brand-name {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variation-settings: 'opsz' 144;
    display: block;
}
header .brand-sub {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 6px;
}

@media (max-width: 720px) {
    header { grid-template-columns: 1fr; gap: 14px; }
    header .brand { grid-column: 1; }
    header .brand-name { font-size: 24px; }
    header .header-toolbar { justify-self: center; }
}

.header-toolbar {
    grid-column: 3;
    justify-self: end;
    /* Strip the legacy dark capsule */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 6px;
    display: flex;
    align-items: center;
}

@media (max-width: 720px) {
    .header-toolbar { grid-column: 1; }
}

.header-btn,
.header-btn-logout,
.header-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    border-radius: 0;
    width: 36px;
    height: 36px;
    /* Centre the icon inside the hit box; reset legacy padding. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    transition: all 200ms var(--ease);
}
.header-btn > svg,
.header-btn-logout > svg,
.header-link > svg {
    display: block;
    width: 16px;
    height: 16px;
}
.header-btn:hover,
.header-btn-logout:hover,
.header-link:hover {
    color: var(--copper);
    border-color: var(--rule-strong);
    background: transparent;
}

.header-locale {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-soft);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    height: 36px;
    padding: 0 10px 0 12px;
}
.header-locale:hover {
    color: var(--copper);
    border-color: var(--rule-strong);
}

.header-toolbar-sep {
    background: var(--rule-strong);
    height: 20px;
    margin: 0 6px;
}

.accent-dot {
    box-shadow: 0 0 0 1px var(--rule-strong), 0 0 12px var(--copper-glow);
}

.accent-picker-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}

/* ─── Tab bar (numbered editorial) — only the bottom rule is visible */
.tab-bar {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule-strong) !important;
    padding: 0 !important;
    margin: 14px 0 36px !important;
    border-radius: 0 !important;
    gap: 0;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

/* Hide the legacy tab-indicator entirely — we use ::after on .tab-btn.active instead */
.tab-indicator {
    display: none !important;
}

.tab-btn {
    background: transparent;
    border: 0;
    color: var(--ink-mute);
    padding: 18px 26px 16px;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    transition: color 180ms var(--ease);
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}
.tab-btn:hover { color: var(--ink-soft); background: transparent; }
.tab-btn.active {
    color: var(--ink);
    background: transparent;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    font-weight: 400;
    font-variation-settings: 'opsz' 60;
}

/* Tab number badge (replaces the icon) */
.tab-btn .tab-num {
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.15em;
    font-weight: 400;
}
.tab-btn.active .tab-num {
    color: var(--copper);
}

/* Hide any remaining legacy SVG icons on tabs */
.tab-btn svg {
    display: none;
}

/* Active tab underline — only under the active tab */
.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--copper);
    box-shadow: 0 0 12px var(--copper-glow);
}

/* Tablet range: editorial top-tabs but compressed so all 5 labels fit. */
@media (min-width: 721px) and (max-width: 980px) {
    .tab-btn {
        padding: 14px 12px 12px;
        font-size: 12px;
        gap: 8px;
    }
    .tab-btn.active { font-size: 15px; }
    .tab-btn .tab-num { font-size: 9px; letter-spacing: 0.12em; }
    .container { padding-left: 28px; padding-right: 28px; }
}

/* ─── Update + connection banners (editorial) ────────────────── */
.update-banner,
.connection-banner {
    /* Override legacy fixed-top + accent background */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001;
    background: rgba(33, 30, 24, 0.94) !important;
    color: var(--ink-soft) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--copper) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    padding: 12px 32px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
/* Tiny copper hairline accent on the bottom edge */
.update-banner::before,
.connection-banner::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--copper), transparent);
    opacity: 0.7;
}
/* Brand prefix */
.update-banner > span:first-child::before,
.connection-banner > span:first-child::before {
    content: "● ";
    color: var(--copper);
    margin-right: 6px;
}
.update-banner a {
    color: var(--copper) !important;
    text-decoration: none !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border: 1px solid var(--copper);
    padding: 6px 14px;
    transition: all 180ms var(--ease);
}
.update-banner a:hover {
    background: var(--copper);
    color: var(--bg-deep) !important;
    opacity: 1 !important;
}
.update-banner-close {
    background: transparent !important;
    color: var(--ink-mute) !important;
    border: 0 !important;
    font-size: 18px !important;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    margin-left: 8px;
    cursor: pointer;
    transition: color 180ms var(--ease);
    opacity: 1 !important;
}
.update-banner-close:hover {
    color: var(--copper) !important;
}
.connection-banner-btn {
    color: var(--copper) !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border: 1px solid var(--copper) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 6px 14px !important;
    transition: all 180ms var(--ease);
}
.connection-banner-btn:hover {
    background: var(--copper) !important;
    color: var(--bg-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER VIEW — verbatim from Studio Reference mockup
   ═══════════════════════════════════════════════════════════════ */
.player-container {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    margin-top: 12px;
    position: relative;
}

/* Visually hidden — kept in DOM for a11y/JS but invisible. */
.now-playing .visually-hidden,
.player-container .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.now-playing {
    display: grid;
    grid-template-columns: minmax(320px, 520px) 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 28px;
    position: relative;
}
.player-layout {
    display: grid;
    grid-template-columns: minmax(320px, 520px) 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 28px;
}

@media (max-width: 1240px) {
    .player-layout,
    .now-playing {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    /* Single-column hero sizing — prevents the vinyl stage from
       growing to full content width (which becomes 800px+ on a
       small-desktop or tablet-landscape window). */
    .album-art-container.vinyl-stage {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Cap the right-column copy so a short artist line and meta grid
       don't sprawl across 1000px of measure. The masthead stays
       flush-left under the vinyl, just narrower. */
    .now-playing .track-masthead {
        max-width: 720px;
    }
}

@media (min-width: 721px) and (max-width: 1240px) {
    /* In the 721–1240 zone the vinyl can be larger than on phone but
       smaller than the full-column 800px+ default. */
    .album-art-container.vinyl-stage {
        max-width: 480px;
    }
    .now-playing .track-masthead {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
        text-align: left;
    }
}

/* ─── Vinyl stage ──────────────────────────────────────────── */
.album-art-container.vinyl-stage {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* Kill the legacy albumArt3D rotateY/rotateX wobble inherited from
       .album-art-container — the vinyl stage is a flat composition
       and should not tilt. */
    animation: none;
    transform: none;
    transform-style: flat;
}

.album-art-container.vinyl-stage:hover { transform: none; }

.vinyl-stage .vinyl {
    position: relative;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #0a0907 0%,
            #0a0907 18%,
            #1a1611 18.3%,
            #0a0907 18.6%,
            #14110c 22%,
            #0a0907 22.3%,
            #14110c 26%,
            #0a0907 26.3%,
            #14110c 30%,
            #0a0907 30.3%,
            #14110c 34%,
            #0a0907 34.3%,
            #14110c 38%,
            #0a0907 38.3%,
            #14110c 42%,
            #0a0907 42.3%,
            #14110c 46%,
            #0a0907 46.3%,
            #1c1812 47%,
            #0a0907 100%);
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.7),
        0 30px 80px rgba(0,0,0,0.6),
        0 6px 20px rgba(0,0,0,0.5);
    animation: sr-vinyl-spin 14s linear infinite;
    animation-play-state: paused;
}

:root[data-playstate="playing"] .vinyl-stage .vinyl {
    animation-play-state: running;
}

.vinyl-stage .vinyl::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            rgba(255,255,255,0.04) 0deg,
            transparent 30deg,
            rgba(255,255,255,0.06) 90deg,
            transparent 150deg,
            rgba(255,255,255,0.03) 210deg,
            transparent 270deg,
            rgba(255,255,255,0.05) 330deg,
            transparent 360deg);
    mix-blend-mode: screen;
    pointer-events: none;
}

.vinyl-stage .vinyl-label {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        inset 0 0 24px rgba(0,0,0,0.4),
        0 0 0 4px var(--bg-deep),
        0 0 0 5px var(--copper-lo);
    background: var(--bg-card);
    z-index: 1;
}

.vinyl-stage .vinyl-label::after {
    /* Spindle hole */
    content: "";
    position: absolute;
    width: 8%; height: 8%;
    top: 46%; left: 46%;
    border-radius: 50%;
    background: var(--bg-deep);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
    z-index: 3;
}

.vinyl-stage #album-art-glow {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    border-radius: 50%;
    filter: blur(20px) saturate(1.4);
    opacity: 0.55;
    z-index: 0;
    object-fit: cover;
}

.vinyl-stage #album-art {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 2;
}

/* ─── Tonearm SVG ──────────────────────────────────────────── */
/* Geometry chosen so the SVG bounding box stays right of the sleeve
   (sleeve right edge ≈ 68%). Pivot floats just past the stage's right
   edge; needle lands on the visible disc grooves at playing rotation
   (0deg) and on the outer rest position at -22deg. Never overlaps
   the sleeve cover. */
.vinyl-stage .tonearm {
    position: absolute;
    top: 26%;
    right: -6%;
    width: 36%;
    height: 36%;
    pointer-events: none;
    transform-origin: 88% 12%;
    transform: rotate(-22deg);
    transition: transform 1s var(--ease);
    z-index: 3;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}

:root[data-playstate="playing"] .vinyl-stage .tonearm {
    transform: rotate(0deg);
}

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

/* Spectrogram canvas hidden by default — visualizer toggle reveals it */
.vinyl-stage .spectrogram-canvas {
    position: absolute;
    bottom: -56px;
    left: 7%;
    right: 7%;
    width: 86%;
    height: 38px;
    border-radius: 0;
    opacity: 0;
    transition: opacity 240ms var(--ease);
    pointer-events: none;
}
.vinyl-stage.visualizer-active .spectrogram-canvas,
body.visualizer-active .vinyl-stage .spectrogram-canvas {
    opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   SLEEVE FRAME — production layout
   The album cover prints on a cardstock sleeve at left; the disc
   sits to the right and peeks out, spinning while the tonearm
   rests on it. The vinyl label is now a typographic plate; track
   metadata lives in the masthead beside the stage.
   ════════════════════════════════════════════════════════════════ */

/* Glow: soft ambient halo behind the sleeve.
   Performance trick: render the image at 25% × 25% of the stage and
   stretch it via transform: scale(4). Filter runs on the smaller
   element (16× less area), and scale just upsamples the already-blurred
   result. Visually identical to a blur(34px) over the full-size image
   but ~10-16× cheaper on track-switch repaints. */
.vinyl-stage > #album-art-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: 25%;
    border-radius: 0;
    object-fit: cover;
    filter: blur(9px) saturate(1.6);
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(4.2);
    transform-origin: center;
    will-change: transform, opacity;
}
:root[data-theme="light"] .vinyl-stage > #album-art-glow {
    opacity: 0.26;
    filter: blur(10px) saturate(1.8);
}

/* Honour reduced-motion: kill breathing pulse */
@media (prefers-reduced-motion: reduce) {
    .vinyl-stage .sleeve #album-art {
        animation: none !important;
    }
}

/* Stage halo: soft radial bloom that fades to transparent — same
   treatment as the fullscreen player so the stage never reads as a
   rectangular card pasted into the page. */
.album-art-container.vinyl-stage {
    background:
        radial-gradient(ellipse at center,
            rgba(26, 22, 17, 0.85) 0%,
            transparent 70%);
}
:root[data-theme="light"] .album-art-container.vinyl-stage {
    background:
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.55) 0%,
            transparent 75%);
}

/* Sleeve: cardstock card with album cover printed on its face.
   Geometry mirrors the mockup — sleeve+disc occupy a centered 90%
   inner square so the arrangement breathes inside the stage. */
.vinyl-stage .sleeve {
    position: absolute;
    left: 5%;
    top: 10.4%;
    width: 63%;
    aspect-ratio: 1;
    z-index: 3;
    background: transparent;
    box-shadow:
        -2px 8px 24px rgba(0, 0, 0, 0.5),
        -4px 18px 44px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    /* Subtle counterclockwise tilt — sleeve rests on the disc as if
       casually placed, breaking up the otherwise rigid rectilinear
       grid. The shadow above carries the same diagonal so the lean
       reads as physical rather than transformed. */
    transform: rotate(-2deg);
    transform-origin: 50% 60%;
}
:root[data-theme="light"] .vinyl-stage .sleeve {
    background: transparent;
    box-shadow:
        -2px 8px 22px rgba(0, 0, 0, 0.20),
        -4px 18px 36px rgba(0, 0, 0, 0.12);
}

/* Album art is the printed cover tipped onto the cardstock sleeve.
   A 5% inset reveals the cardstock as a visible border around the
   print; outline + inset shadow define the printed-cover edge.
   Explicit width/height (not `inset` shorthand) — img is a replaced
   element and would otherwise fall back to its intrinsic pixel
   size, blowing out the grid track. */
.vinyl-stage .sleeve #album-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    z-index: 1;
    box-shadow: none;
    margin: 0;
    background: transparent;
    filter: contrast(0.96) saturate(0.92);
    /* No transition on filter: the values are static and a 600ms ease
       on a track-switch swap would force a long compositor pass. */
}

/* Crossfade on artwork swap. Class toggled by player.js right before
   src assignment so the new cover fades in instead of popping. */
.vinyl-stage .sleeve #album-art.is-swapping {
    animation: sr-art-swap 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes sr-art-swap {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Cardstock paper grain over the print — multiplies into the image */
.vinyl-stage .sleeve-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
}
:root[data-theme="light"] .vinyl-stage .sleeve-grain { opacity: 0.32; }

/* Worn corner notch — hidden now that the cardstock sleeve is
   transparent; the wedge would otherwise read as a stray dark
   triangle clipped over the album art. */
.vinyl-stage .sleeve-corner {
    display: none;
}

/* Disc wrap — sits behind the sleeve, peeks out the right edge */
.vinyl-stage .vinyl-wrap {
    position: absolute;
    right: 3.2%;
    top: 19.4%;
    width: 63%;
    aspect-ratio: 1;
    z-index: 2;
}
.vinyl-stage .vinyl-wrap .vinyl {
    width: 100%;
}

/* Vinyl label = typographic plate (no album art, lives on the sleeve now) */
.vinyl-stage .vinyl-wrap .vinyl-label {
    background: linear-gradient(135deg, #2E2820 0%, #1f1a13 100%);
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 3px var(--bg-deep),
        0 0 0 4px var(--copper-lo);
    display: flex;
    align-items: center;
    justify-content: center;
}
:root[data-theme="light"] .vinyl-stage .vinyl-wrap .vinyl-label {
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-lo) 100%);
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px var(--bg-paper),
        0 0 0 4px var(--copper-lo);
}
.vinyl-label-text {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--copper);
    text-transform: uppercase;
    z-index: 2;
    font-weight: 500;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    user-select: none;
}

/* ─── Player details (right column / masthead) ──────────────── */
.player-details,
.track-masthead {
    gap: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
}

/* Kicker — copper italic mono with hairlines */
.track-masthead > .kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--copper);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.track-masthead > .kicker::before,
.track-masthead > .kicker::after {
    content: "";
    height: 1px;
    background: var(--copper);
    opacity: 0.6;
    flex: 0 0 24px;
}
.track-masthead > .kicker::after { flex: 1 0 auto; }

.track-info {
    margin-bottom: 0;
    position: relative;
}

#track-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variation-settings: 'opsz' 144;
    margin-bottom: 16px;
}

#artist {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: 22px;
    color: var(--copper-hi);
    font-variation-settings: 'opsz' 60;
    margin-bottom: 4px;
}

#album {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

/* Editorial metadata grid — 2 cells (State / Source); timecodes flank the timeline */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.meta-grid.meta-grid-2 {
    grid-template-columns: minmax(180px, auto) 1fr;
}
.meta-cell {
    padding: 16px 18px 16px 0;
    border-right: 1px solid var(--rule);
    min-width: 0;
}
.meta-cell:last-child { border-right: 0; padding-right: 0; }
.meta-cell .meta-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
}
.meta-cell .meta-value {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink);
    font-variation-settings: 'opsz' 30;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meta-cell .meta-value.mono {
    font-family: var(--mono);
    font-style: normal;
    font-size: 15px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.meta-cell .meta-value .state-icon,
.meta-cell .meta-value .source-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--copper);
}
.meta-cell .source-value { font-size: 16px; }

@media (max-width: 720px) {
    .meta-grid { grid-template-columns: repeat(2, 1fr); }
    .meta-cell:nth-child(2) { border-right: 0; }
    .meta-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* Hide the legacy .playback-state container (its data is now in meta-grid) */
.track-info > .playback-state { display: none; }

/* (Legacy .spectrum + nth-child rules deleted — were capping the
   row at max-width: 360px and forcing 3px-fixed bars. The
   .now-playing-scoped rules below are the single source of truth.) */

/* Transport — wraps progress + controls */
.transport {
    margin-top: 8px;
}

.progress-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}
.progress-row .timecode {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
.progress-row .timecode.elapsed { color: var(--copper); font-weight: 500; }

/* Override the legacy .progress-container layout when inside .transport */
.transport .progress-container {
    margin-top: 0;
}

/* VU cluster (replaces freestanding volume container) */
.vu-cluster {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.vu-meter {
    position: relative;
    width: 130px;
    height: 56px;
    background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
    border: 1px solid var(--rule-strong);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 30px rgba(var(--copper-rgb), 0.08);
}
.vu-meter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from 195deg at 50% 100%,
        transparent 0deg 4deg,
        rgba(242, 235, 220, 0.08) 4deg 5deg,
        transparent 5deg 9deg);
}
.vu-meter::after {
    content: "VU";
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.3em;
    color: var(--ink-faint);
}
.vu-needle {
    position: absolute;
    bottom: 0; left: 50%;
    width: 1.5px;
    height: 88%;
    background: linear-gradient(to top, var(--copper) 0%, var(--copper-hi) 70%, var(--ink) 100%);
    transform-origin: bottom center;
    transform: rotate(-22deg);
    transition: transform 350ms var(--ease);
    box-shadow: 0 0 8px var(--copper-glow);
}

/* Volume container nested inside vu-cluster — strip legacy box & make compact */
.vu-cluster .volume-container {
    background: transparent;
    border: 0;
    border-top: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    min-width: 0;
    width: 110px;
    box-shadow: none;
}
.vu-cluster .volume-container > .mute-btn {
    align-self: flex-end;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    padding: 0;
    margin: 0;
}
.vu-cluster .volume-container > .mute-btn:hover {
    border-color: var(--copper);
    color: var(--copper);
}
.vu-cluster .volume-container > .mute-btn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}
.vu-cluster .volume-container > #volume-slider {
    width: 100%;
    height: 2px;
    flex: none;
    background: var(--rule-strong);
    border-radius: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.vu-cluster .volume-container > #volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--copper-glow);
    border: 0;
}
.vu-cluster .volume-container > .volume-display {
    text-align: right;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-variant-numeric: tabular-nums;
    width: auto;
    min-width: 0;
    font-weight: 500;
}
.vu-cluster .volume-container > .volume-display::before {
    content: "VOL · ";
    color: var(--ink-faint);
    font-weight: 400;
}

/* Make the player view source-info row tighter (visualizer toggle row) */
.player-details > .source-info {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* ─── Progress (hairline editorial) ─────────────────────────── */
.progress-container {
    margin-top: 28px;
    margin-bottom: 0;     /* override legacy 2rem */
}

.time-display {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

#current-time { color: var(--copper); font-weight: 500; }

.progress-bar {
    height: 2px;
    width: 100%;
    background: var(--rule-strong);
    border-radius: 0;
    cursor: pointer;
    overflow: visible;
    position: relative;
    transform: none !important;       /* kill legacy :hover scaleY */
    transition: background 200ms var(--ease);
    min-width: 0;                     /* let grid shrink it */
}

.progress-bar:hover {
    background: var(--rule-strong);
    transform: none !important;       /* defeat legacy :hover transform */
}
.progress-bar.dragging {
    transform: none !important;
    background: var(--rule-strong);
}

.progress-fill {
    background: var(--copper);
    box-shadow: 0 0 12px var(--copper-glow);
    border-radius: 0;
    height: 100%;
    width: 0;
    position: relative;
    transition: width 0.1s linear;
}

.progress-fill::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(1) !important;  /* always visible, override legacy scale(0) default */
    width: 10px;
    height: 10px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--copper-glow), 0 0 0 4px rgba(var(--copper-rgb), 0.12);
    transition: none;
}

/* Progress row inside transport — grid layout for [time | bar | time] */
.transport .progress-row,
.progress-container.progress-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-top: 0;
    margin-bottom: 26px;
}
.progress-row .timecode {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.progress-row .timecode.elapsed { color: var(--copper); font-weight: 500; }

/* ─── Controls (circular transport) ─────────────────────────── */
.controls {
    margin-top: 28px;
    gap: 16px;
    justify-content: flex-start;
}

.controls button {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 220ms var(--ease);
}
.controls button:hover {
    background: rgba(var(--copper-rgb), 0.06);
    border-color: var(--copper);
    color: var(--copper);
}
.controls button.primary {
    width: 64px;
    height: 64px;
    background: var(--ink);
    color: var(--bg-deep);
    border-color: var(--ink);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.controls button.primary:hover {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--bg-deep);
    transform: scale(1.04);
    box-shadow: 0 8px 28px var(--copper-glow);
}

.controls button svg { width: 20px; height: 20px; }
.controls button.primary svg { width: 24px; height: 24px; }

/* ─── Volume container (VU-meter aesthetic) ─────────────────── */
.volume-container {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    gap: 14px;
    display: flex;
    align-items: center;
}

.mute-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    border-radius: 50%;
    width: 38px;
    height: 38px;
}
.mute-btn:hover {
    border-color: var(--copper);
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.06);
}

#volume-slider {
    height: 2px;
    background: var(--rule-strong);
    border-radius: 0;
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--copper-glow), 0 0 0 4px rgba(var(--copper-rgb), 0.12);
    border: 0;
    cursor: grab;
}
#volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--copper-glow);
    border: 0;
}
#volume-slider::-moz-range-track {
    height: 2px;
    background: var(--rule-strong);
}

.volume-display {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--copper);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    text-align: right;
    font-weight: 500;
}

/* ─── Source info ───────────────────────────────────────────── */
.source-info {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
}

.source-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    gap: 10px;
}

.source-icon {
    width: 14px;
    height: 14px;
    color: var(--copper);
}

.player-toggles { gap: 8px; }

.vinyl-toggle-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-mute);
    border-radius: 0;
    width: 30px;
    height: 30px;
    transition: all 180ms var(--ease);
}
.vinyl-toggle-btn:hover,
.vinyl-toggle-btn.active {
    border-color: var(--copper);
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   MINI PLAYER — sticky console strip (3-column grid)
   ═══════════════════════════════════════════════════════════════ */
.mini-player {
    /* Override legacy display: flex with explicit grid */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 0;
    align-items: center;
    background: linear-gradient(180deg, rgba(14, 13, 11, 0.72) 0%, rgba(14, 13, 11, 0.96) 30%);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--rule-strong);
    box-shadow: none;
    padding: 12px 32px;
    /* Anchor firmly to the bottom of the viewport */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000;
}

/* Top edge progress line in copper */
.mini-player::before {
    background: var(--copper) !important;
    height: 2px !important;
    box-shadow: 0 0 8px var(--copper-glow);
}

/* Column 1: track info */
.mini-player .mini-player-info {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Column 2: transport (centered) */
.mini-player .mini-controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Column 3: progress (timecodes + bar) */
.mini-player .mini-progress-container {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-self: stretch;
    align-items: stretch;
    min-width: 180px;
    max-width: 360px;
    margin: 0 auto;
}
.mini-player .mini-progress-container .mini-time-display {
    display: flex;
    justify-content: space-between;
}

/* Column 4: volume controls */
.mini-player .mini-volume-container {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 880px) {
    .mini-player {
        grid-template-columns: minmax(0, 1fr) auto auto;
        column-gap: 14px;
    }
    .mini-player .mini-progress-container { display: none; }
    .mini-player .mini-volume-container { grid-column: 3; }
}

@media (max-width: 540px) {
    .mini-player {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 10px 14px;
    }
    .mini-player .mini-volume-container { display: none; }
}

.mini-player::before {
    content: "";
    position: absolute;
    top: -1px; left: 32px; right: 32px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--copper), transparent);
    opacity: 0.55;
}

.mini-album-art {
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    width: 48px;
    height: 48px;
}

.mini-track-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink);
    font-variation-settings: 'opsz' 60;
    letter-spacing: 0;
}

.mini-artist {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

.mini-control-btn {
    background: transparent;
    border: 0;
    color: var(--ink-soft);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    transition: color 180ms var(--ease);
}
.mini-control-btn:hover { color: var(--copper); background: transparent; }
.mini-control-btn.primary,
#mini-btn-play-pause {
    background: var(--ink);
    color: var(--bg-deep);
    width: 38px;
    height: 38px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
#mini-btn-play-pause:hover {
    background: var(--copper);
    color: var(--bg-deep);
}

.mini-time-display {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}
#mini-current-time { color: var(--copper); font-weight: 500; }

.mini-player .mini-progress-bar {
    flex: 0 0 auto;
    height: 3px;
    background: var(--rule-strong);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    min-width: 0;
}
.mini-player .mini-progress-fill {
    height: 100%;
    background: var(--copper);
    box-shadow: 0 0 8px var(--copper-glow);
    border-radius: 0;
}

.mini-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: var(--rule-strong);
}
.mini-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--copper-glow);
    border: 0;
}
.mini-volume-slider::-moz-range-thumb {
    width: 10px; height: 10px;
    background: var(--copper);
    border-radius: 50%;
    border: 0;
}
.mini-volume-display {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--copper);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   BROWSER — editorial gallery
   ═══════════════════════════════════════════════════════════════ */
.browser-container {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    margin-top: 12px;
}

.breadcrumb {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
    font-variation-settings: 'opsz' 60;
    background: transparent;
    border-bottom: 1px solid var(--rule);
    padding: 14px 0;
    margin-bottom: 22px;
    border-radius: 0;
}
.breadcrumb-item, .breadcrumb-home {
    color: var(--ink-soft);
    font-style: italic;
}
.breadcrumb-item:hover, .breadcrumb-home:hover { color: var(--copper); }
.breadcrumb-item:last-child {
    color: var(--ink);
    font-weight: 400;
}
.breadcrumb-separator {
    color: var(--ink-faint);
    font-style: normal;
    margin: 0 8px;
    opacity: 1;
}

.browser-toolbar {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 0 0 14px 0;
    margin-bottom: 28px;
    gap: 12px;
}

.view-toggle {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0;
    gap: 0;
}
.view-toggle-btn {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rule-strong);
    color: var(--ink-mute);
    border-radius: 0;
    width: 36px;
    height: 36px;
    transition: all 180ms var(--ease);
}
.view-toggle-btn:last-child { border-right: 0; }
.view-toggle-btn:hover {
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.04);
}
.view-toggle-btn.active {
    background: var(--ink);
    color: var(--bg-deep);
}

.browser-refresh-btn,
.browser-play-all-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    border-radius: 0;
    width: 36px;
    height: 36px;
    transition: all 180ms var(--ease);
}
.browser-refresh-btn:hover,
.browser-play-all-btn:hover {
    color: var(--copper);
    border-color: var(--copper);
    background: transparent;
}
.browser-play-all-btn {
    color: var(--copper);
    border-color: var(--copper);
}

.browser-search-wrapper {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0 0 4px 0;
    gap: 8px;
    transition: border-color 180ms var(--ease);
}
.browser-search-wrapper:focus-within {
    border-bottom-color: var(--copper);
}
.browser-search-input {
    background: transparent;
    border: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    padding: 4px 0;
}
.browser-search-input::placeholder { color: var(--ink-mute); }
.browser-search-icon { color: var(--ink-mute); }
.browser-search-clear { color: var(--ink-mute); background: transparent; border: 0; }
.browser-search-clear:hover { color: var(--copper); }

.items-per-page-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    gap: 8px;
}
.items-per-page-label select {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 8px;
}

/* Browser grid items */
.browser-grid {
    gap: 28px 22px;
}

.browser-item {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    transition: transform 280ms var(--ease);
}
.browser-item:hover {
    transform: translateY(-3px);
    background: transparent;
    box-shadow: none;
}

.browser-thumb-wrapper,
.browser-thumbnail {
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
    transition: box-shadow 280ms var(--ease);
}
.browser-item:hover .browser-thumb-wrapper,
.browser-item:hover .browser-thumbnail {
    box-shadow: 0 22px 50px -10px rgba(0,0,0,0.65), 0 0 0 1px var(--copper);
}

.browser-icon {
    color: var(--ink-mute);
}

.browser-item-name {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    font-variation-settings: 'opsz' 18;
    letter-spacing: 0;
    margin-top: 12px;
}
.browser-item-meta,
.browser-item-type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 4px;
}

.browser-play-overlay,
.browser-list-play-overlay {
    background: rgba(14, 13, 11, 0.5);
}
.browser-play-overlay svg,
.browser-list-play-overlay svg {
    fill: var(--ink);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}

.browser-empty {
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    font-variation-settings: 'opsz' 30;
}

/* List view */
.browser-list {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 0;
}
.browser-list-header {
    background: var(--bg-paper);
    border-bottom: 1px solid var(--rule-strong);
    color: var(--ink-mute);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.browser-list-item {
    border-bottom: 1px solid var(--rule);
    transition: background 180ms var(--ease);
}
.browser-list-item:hover { background: var(--bg-paper); }
.browser-list-name {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
    font-variation-settings: 'opsz' 18;
}
.browser-list-bitrate,
.browser-list-duration,
.browser-list-size {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

/* Pagination */
.pagination {
    border-top: 1px solid var(--rule);
    margin-top: 32px;
    padding-top: 22px;
    background: transparent;
}
.pagination button {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 16px;
    transition: all 180ms var(--ease);
}
.pagination button:hover:not(:disabled) {
    color: var(--copper);
    border-color: var(--copper);
}
.pagination button:disabled { opacity: 0.4; }
.page-input {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    border-radius: 0;
    font-family: var(--mono);
}
.pagination-center,
.pagination-showing {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACCESS — console rail
   ═══════════════════════════════════════════════════════════════ */
.scripts-container {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}
.scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1px;
    background: var(--rule-strong);
    border: 1px solid var(--rule-strong);
    padding: 0;
}
.scripts-empty {
    background: var(--bg-card);
    padding: 60px 24px;
    color: var(--ink-mute);
}

.script-btn,
.link-card {
    background: var(--bg-card);
    border: 0;
    border-radius: 0;
    padding: 24px 18px;
    color: var(--ink);
    transition: all 200ms var(--ease);
    text-align: center;
}
.script-btn:hover,
.link-card:hover {
    background: var(--bg-card-2);
    color: var(--copper);
    transform: none;
}
.script-btn .browser-icon,
.link-card .browser-icon {
    color: var(--ink-soft);
    margin-bottom: 12px;
    transition: color 200ms var(--ease);
}
.script-btn:hover .browser-icon,
.link-card:hover .browser-icon { color: var(--copper); transform: translateY(-2px); }

.script-btn .browser-item-name,
.link-card .browser-item-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: inherit;
    font-variation-settings: 'opsz' 18;
}

/* ═══════════════════════════════════════════════════════════════
   SETTINGS — numbered editorial sections
   ═══════════════════════════════════════════════════════════════ */
.settings-container,
.script-management {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 28px 32px;
    margin-bottom: 16px;
    box-shadow: none;
    transition: border-color 200ms var(--ease);
    position: relative;
    counter-increment: sr-section;
}
.settings-section:hover { border-color: var(--rule-strong); }
.settings-container { counter-reset: sr-section; }

.settings-section summary {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variation-settings: 'opsz' 60;
    padding: 0 0 16px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary::before {
    content: "5." counter(sr-section, decimal-leading-zero);
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--copper);
    margin-right: 14px;
    vertical-align: middle;
}
.settings-section summary::after {
    content: "↓";
    position: absolute;
    right: 0;
    top: 0;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink-mute);
    transition: transform 240ms var(--ease);
}
.settings-section[open] summary::after { transform: rotate(180deg); }

.settings-section-content {
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.settings-section-description {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    font-variation-settings: 'opsz' 18;
    margin-bottom: 18px;
}

.scripts-table {
    border: 1px solid var(--rule);
    border-collapse: collapse;
    width: 100%;
    background: transparent;
}
.scripts-table thead {
    background: var(--bg-paper);
}
.scripts-table th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule-strong);
    font-weight: 400;
}
.scripts-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13px;
    vertical-align: middle;
}
.scripts-table tr:last-child td { border-bottom: 0; }
.scripts-table .name-with-icon {
    color: var(--ink);
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    font-variation-settings: 'opsz' 18;
}
.scripts-table .path-cell,
.scripts-table .mono {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
}

.add-card {
    background: transparent;
    border: 1px dashed var(--rule-strong);
    border-radius: 0;
    padding: 16px;
    margin-top: 16px;
    transition: all 200ms var(--ease);
    color: var(--ink-mute);
    cursor: pointer;
}
.add-card:hover {
    border-color: var(--copper);
    border-style: solid;
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.04);
}
.add-card-icon {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 24px;
    color: inherit;
}
.add-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.audio-device-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.audio-device-selector label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.audio-device-selector select {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    border-radius: 0;
    font-family: var(--sans);
    font-size: 13px;
    padding: 10px 12px;
}
.audio-device-status {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--jade);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.folder-disabled-badge,
.folder-unavailable-badge {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 8px;
    color: var(--amber);
}
.folder-unavailable-badge { color: var(--rust); }

.empty-state-illustration {
    color: var(--ink-faint);
}
.empty-state {
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    font-variation-settings: 'opsz' 18;
    padding: 40px 20px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   DIALOGS — paper card
   ═══════════════════════════════════════════════════════════════ */
dialog {
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    padding: 0;
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
}
dialog[open] {
    display: flex;
    flex-direction: column;
}
dialog form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.dialog-header { flex: 0 0 auto; }
.dialog-footer { flex: 0 0 auto; }
.dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
dialog::backdrop {
    background: rgba(14, 13, 11, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dialog-header {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--rule);
    background: transparent;
}
.dialog-header h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    color: var(--ink);
    font-variation-settings: 'opsz' 60;
    letter-spacing: -0.01em;
}

.dialog-body {
    padding: 22px 28px;
}
.dialog-body label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.dialog-body label > span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.dialog-body input,
.dialog-body textarea,
.dialog-body select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    padding: 8px 0;
    transition: border-color 180ms var(--ease);
}
.dialog-body input:focus,
.dialog-body textarea:focus,
.dialog-body select:focus {
    outline: 0;
    border-bottom-color: var(--copper);
}
.dialog-body textarea {
    border: 1px solid var(--rule-strong);
    padding: 10px 12px;
    resize: vertical;
    min-height: 60px;
    font-family: var(--mono);
    font-size: 12px;
}

.dialog-footer {
    padding: 16px 28px 22px;
    border-top: 1px solid var(--rule);
    background: transparent;
    gap: 10px;
}

.btn-primary {
    background: var(--ink);
    color: var(--bg-deep);
    border: 1px solid var(--ink);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 18px;
    transition: all 200ms var(--ease);
}
.btn-primary:hover {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--bg-deep);
}
.btn-secondary, .btn-cancel {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 18px;
    transition: all 200ms var(--ease);
}
.btn-secondary:hover, .btn-cancel:hover {
    color: var(--copper);
    border-color: var(--copper);
}
.btn-danger {
    background: var(--rust);
    color: var(--bg-deep);
    border: 1px solid var(--rust);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 18px;
}
.btn-danger:hover { background: transparent; color: var(--rust); }
.btn-small {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 12px;
}
.btn-small:hover { border-color: var(--copper); color: var(--copper); }

.confirm-dialog {
    padding: 28px;
    max-width: 460px;
}
.confirm-dialog p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 22px;
    font-variation-settings: 'opsz' 30;
}
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.execution-status {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--copper);
    padding: 10px 14px;
    border: 1px solid var(--rule-strong);
    background: var(--bg-paper);
    margin-bottom: 14px;
}
.execution-result {
    background: var(--bg-paper);
    border: 1px solid var(--rule);
    border-radius: 0;
}
.execution-result pre {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
    padding: 14px;
}
.result-section h4 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
    font-weight: 400;
}

.icon-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.icon-preview {
    background: var(--bg-paper);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    width: 36px;
    height: 36px;
    color: var(--copper);
}

.params-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.params-header {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.param-row {
    background: var(--bg-paper);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 12px;
    margin-top: 10px;
}
.param-row-header {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--copper);
    letter-spacing: 0.08em;
}
.param-required-label {
    color: var(--rust);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.param-hint {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-mute);
    font-variation-settings: 'opsz' 18;
}
.param-remove-btn {
    color: var(--rust);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
}
.param-remove-btn:hover { border-color: var(--rust); }

/* Icon select popup */
.icon-select-popup {
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}
.icon-select-trigger {
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 12px;
}
.icon-select-trigger:hover { border-color: var(--copper); color: var(--copper); }
.icon-select-cell {
    border-radius: 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 10px;
}
.icon-select-cell:hover {
    background: rgba(var(--copper-rgb), 0.06);
    color: var(--copper);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH MODAL — paper card
   ═══════════════════════════════════════════════════════════════ */
#auth-overlay {
    background: rgba(14, 13, 11, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.auth-modal {
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 40px 36px;
    max-width: 440px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    position: relative;
}
.auth-modal h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 12px;
    font-variation-settings: 'opsz' 144;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.auth-modal p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 18px;
    font-variation-settings: 'opsz' 18;
}
.auth-modal input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    padding: 10px 0;
    width: 100%;
    margin-bottom: 18px;
}
.auth-modal input:focus {
    outline: 0;
    border-bottom-color: var(--copper);
}
.btn-connect {
    background: var(--ink);
    color: var(--bg-deep);
    border: 1px solid var(--ink);
    border-radius: 0;
    width: 100%;
    padding: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: all 200ms var(--ease);
    cursor: pointer;
}
.btn-connect:hover {
    background: var(--copper);
    border-color: var(--copper);
}
.help-text {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
}
.help-text code {
    background: var(--bg-paper);
    color: var(--copper);
    border: 1px solid var(--rule);
    padding: 2px 6px;
    font-family: var(--mono);
    font-size: 11px;
}
.error-message {
    color: var(--rust);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.toast {
    background: var(--bg-card);
    border: 1px solid var(--copper);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    padding: 14px 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 24px var(--copper-glow);
}
.toast.success { border-color: var(--jade); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.toast.error { border-color: var(--rust); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }
.toast.info { border-color: var(--rule-strong); box-shadow: 0 14px 40px rgba(0,0,0,0.5); }

/* ═══════════════════════════════════════════════════════════════
   ABOUT DIALOG (colophon)
   ═══════════════════════════════════════════════════════════════ */
.about-dialog {
    max-width: 520px;
}
.about-credit {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 22px;
    font-variation-settings: 'opsz' 30;
}
.about-credit strong {
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: 0.01em;
    font-variation-settings: 'opsz' 60;
    display: block;
    margin-top: 2px;
}
.about-links {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.about-links li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}
.about-links-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.about-links a {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--copper);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms var(--ease);
    word-break: break-all;
}
.about-links a:hover { border-bottom-color: var(--copper); }

/* ═══════════════════════════════════════════════════════════════
   DISPLAY container (monitors tab)
   ═══════════════════════════════════════════════════════════════ */
.display-container {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

/* ─── Light theme overrides for SR overrides ──────────────── */
:root[data-theme="light"] .album-art-container {
    box-shadow:
        0 1px 0 var(--bg-paper),
        0 28px 60px -20px rgba(26, 23, 21, 0.18),
        0 8px 20px -8px rgba(26, 23, 21, 0.12);
}
:root[data-theme="light"] .mini-player {
    background: linear-gradient(180deg, rgba(245, 241, 234, 0.7) 0%, rgba(245, 241, 234, 0.96) 30%);
}
:root[data-theme="light"] dialog::backdrop {
    background: rgba(26, 23, 21, 0.5);
}
:root[data-theme="light"] #auth-overlay {
    background: rgba(245, 241, 234, 0.85);
}
:root[data-theme="light"] .toast {
    box-shadow: 0 14px 40px rgba(26,23,21,0.18), 0 0 24px var(--copper-glow);
}

/* ─── Mobile breakpoint refinements ──────────────────────── */
@media (max-width: 720px) {
    #track-title,
    .now-playing .track-title { font-size: 38px; }
    .player-layout, .now-playing { gap: 28px; grid-template-columns: 1fr; }
    .controls { gap: 12px; }
    .now-playing .controls .btn-trans { width: 42px; height: 42px; }
    .now-playing .controls .btn-trans.primary { width: 56px; height: 56px; }
    .mini-player { padding: 12px 16px; gap: 16px; }
    .tab-btn { padding: 14px 12px 12px; font-size: 12px; }
    .tab-btn.active { font-size: 15px; }
    /* Override legacy mobile rule that hid every .tab-btn span (numbers + labels) */
    .tab-btn span { display: inline; }
    .tab-btn .tab-num { display: none; }
    .tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn { flex: 0 0 auto; }
    .breadcrumb { font-size: 14px; }
    .browser-toolbar { flex-wrap: wrap; }
    .auth-modal { padding: 28px 22px; }
    .auth-modal h2 { font-size: 28px; }
    .settings-section { padding: 20px; }
    .settings-section summary { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════
   STUDIO REFERENCE — verbatim mockup snap for the player view.
   Scoped to `.now-playing` so other tabs are unaffected. Wins over
   earlier overrides through declaration order at equal specificity.
   ════════════════════════════════════════════════════════════════ */

.now-playing {
    display: grid;
    grid-template-columns: minmax(320px, 520px) 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 28px;
    position: relative;
}
@media (max-width: 980px) {
    .now-playing { grid-template-columns: 1fr; gap: 40px; }
    .now-playing .track-masthead { padding-right: 0; }
}

/* Vinyl/disc/tonearm rules live in the SLEEVE FRAME section under
   .vinyl-stage selectors above. The earlier .now-playing duplicates
   were stale clones from the pre-sleeve mockup snap and overrode the
   new geometry by source order — removed to let .vinyl-stage rules
   take effect. */

/* Spectrogram canvas: hidden — the editorial .spectrum row in the
   track-masthead is the visible spectrum. The canvas stays in the
   DOM so the visualizer render loop keeps emitting frequencyData
   for the dynamic background to consume. */
.now-playing .spectrogram-canvas {
    display: none !important;
}

/* ─── Track masthead ──────────────────────────────────────── */
.now-playing .track-masthead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-right: clamp(12px, 1.5vw, 24px);
    gap: 0;
}

.now-playing .kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 22px;
}
.now-playing .kicker::before,
.now-playing .kicker::after {
    content: "";
    height: 1px;
    background: var(--copper);
    opacity: 0.6;
    flex: 0 0 24px;
}
.now-playing .kicker::after { flex: 1 0 auto; }

.now-playing .track-title,
.now-playing #track-title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 144;
    margin-bottom: 18px;
    color: var(--ink);
    margin-top: 0;
    /* Long titles get clamped to 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.now-playing .track-title em {
    font-style: italic;
    color: var(--copper-hi);
}

.now-playing .track-byline,
.now-playing #artist {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    font-weight: 300;
    color: var(--ink-soft);
    font-variation-settings: 'opsz' 60;
    margin-bottom: 4px;
    margin-top: 0;
}
.now-playing .track-album,
.now-playing #album {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    font-style: normal;
    font-weight: 400;
    margin-top: 0;
}

/* Hide byline/album rows when their content is empty so they
   don't leave a stretched blank gap. JS leaves them empty when
   the source provides no metadata. */
.now-playing #artist:empty,
.now-playing #album:empty {
    display: none;
}

/* ─── 2-cell metadata grid ────────────────────────────────── */
.now-playing .meta-grid {
    display: grid;
    grid-template-columns: minmax(180px, auto) 1fr;
    gap: 0;
    margin-top: 36px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.now-playing .meta-cell {
    padding: 16px 24px 16px 0;
    border-right: 1px solid var(--rule);
    min-width: 0;
}
.now-playing .meta-cell:last-child {
    border-right: 0;
    padding-left: 24px;
    padding-right: 0;
}
.now-playing .meta-cell .label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Match the .kicker (NOW PLAYING) color so the metadata grid reads
       as part of the same typographic system. */
    color: var(--copper);
    margin-bottom: 8px;
}
.now-playing .meta-cell .value {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink);
    font-variation-settings: 'opsz' 30;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.now-playing .meta-cell .value .state-icon,
.now-playing .meta-cell .value .source-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--copper);
    fill: currentColor;
}

/* ─── Spectrum bars (JS-injected; real audio from backend FFT) ── */
.now-playing .spectrum {
    /* grid-template-columns is set from JS to repeat(N, minmax(0, 1fr))
       because CSS repeat() does NOT accept a CSS variable as its count.
       Falling back to a 40-column default ensures something sane renders
       even if JS hasn't executed yet. */
    display: grid !important;
    grid-template-columns: repeat(40, minmax(0, 1fr));
    align-items: end;
    column-gap: 4px;
    height: 70px;
    margin: 36px 0 24px;
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0;
}
.now-playing .spectrum > span {
    display: block;
    width: 100%;
    min-width: 0;
    background: linear-gradient(to top, var(--copper-lo) 0%, var(--copper) 60%, var(--copper-hi) 100%);
    opacity: 0.92;
    transform-origin: bottom;
    border-radius: 99px 99px 0 0;
    /* Bars are full-height boxes; the visible height is driven by
       transform: scaleY. Transforms are GPU-composited, so per-frame
       updates skip layout/paint entirely. */
    height: 100%;
    transform: scaleY(var(--bar-h-scale, 0.4));
    animation: sr-snap-bar 1.1s ease-in-out infinite;
    animation-delay: var(--bar-delay, 0s);
    animation-play-state: paused;
    transition: transform 50ms linear;
    will-change: transform;
}
:root[data-playstate="playing"] .now-playing .spectrum span {
    animation-play-state: running;
}
/* When real audio data is driving the bars, freeze the synthetic CSS
   animation so JS-set transforms aren't overridden by the keyframe. */
body.audio-spectrum-live .now-playing .spectrum span {
    animation: none !important;
}
@keyframes sr-snap-bar {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}

/* ─── Transport ───────────────────────────────────────────── */
.now-playing .transport { margin-top: 0; }

.now-playing .progress-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}
.now-playing .timecode {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.now-playing .timecode.elapsed { color: var(--copper); font-weight: 500; }

.now-playing .progress-track,
.now-playing .progress-bar {
    height: 2px;
    width: 100%;
    background: var(--rule-strong);
    position: relative;
    cursor: pointer;
    border-radius: 0;
    overflow: visible;
    transform: none !important;
    transition: background 200ms var(--ease);
    min-width: 0;
    margin: 0;
}
.now-playing .progress-bar:hover,
.now-playing .progress-bar.dragging {
    transform: none !important;
    background: var(--rule-strong);
}
.now-playing .progress-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    background: var(--copper);
    box-shadow: 0 0 12px var(--copper-glow);
    border-radius: 0;
    width: 0;
    transition: width 0.1s linear;
}
.now-playing .progress-fill::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%) scale(1) !important;
    width: 10px; height: 10px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--copper-glow), 0 0 0 4px rgba(var(--copper-rgb), 0.12);
    transition: none;
}

/* ─── Controls + VU cluster ───────────────────────────────── */
.now-playing .controls {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 16px;
}

.now-playing .btn-trans {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: all 200ms var(--ease);
}
.now-playing .btn-trans:hover {
    border-color: var(--copper);
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.06);
}
.now-playing .btn-trans:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--rule-strong);
    color: var(--ink-mute);
    background: transparent;
}
.now-playing .btn-trans.primary {
    width: 64px; height: 64px;
    background: var(--ink);
    color: var(--bg-deep);
    border-color: var(--ink);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.now-playing .btn-trans.primary:hover {
    background: var(--copper);
    border-color: var(--copper);
    color: var(--bg-deep);
    transform: scale(1.04);
    box-shadow: 0 8px 28px var(--copper-glow);
}
.now-playing .btn-trans svg {
    width: 20px; height: 20px;
    fill: currentColor;
}
.now-playing .btn-trans.primary svg {
    width: 24px; height: 24px;
}

/* VU cluster — volume left, readout center, VU meter right (reversed) */
.now-playing .vu-cluster {
    margin-left: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
    user-select: none;
}
.now-playing .vu-cluster.muted .vu-needle {
    background: linear-gradient(to top, var(--rust) 0%, var(--ink-mute) 100%);
    box-shadow: 0 0 8px rgba(194, 85, 63, 0.4);
}
.now-playing .vu-cluster.muted .vu-readout strong { color: var(--rust); }

/* Integrated volume control: tiny mute icon + slim copper slider.
   Lives on the LEFT of the cluster (row-reverse), so its divider
   sits on its RIGHT to separate it from the readout. */
.now-playing .vu-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    border-right: 1px solid var(--rule);
    margin-right: 4px;
}
.now-playing .vu-volume .mute-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms var(--ease);
    flex-shrink: 0;
}
.now-playing .vu-volume .mute-btn:hover {
    border-color: var(--copper);
    color: var(--copper);
    background: rgba(var(--copper-rgb), 0.06);
}
.now-playing .vu-volume .mute-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}
.now-playing .vu-volume #volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 64px;
    height: 2px;
    background: var(--rule-strong);
    border-radius: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex: none;
}
.now-playing .vu-volume #volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--copper-glow);
    border: 0;
    cursor: grab;
}
.now-playing .vu-volume #volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: var(--copper);
    border-radius: 50%;
    border: 0;
    cursor: grab;
}
.now-playing .vu-volume #volume-slider::-moz-range-track {
    height: 2px;
    background: var(--rule-strong);
    border-radius: 0;
}

.now-playing .vu-meter {
    position: relative;
    width: 120px;
    height: 60px;
    background: linear-gradient(180deg, #1a1610 0%, #0e0c08 100%);
    border: 1px solid var(--rule-strong);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 30px rgba(var(--copper-rgb), 0.08);
    flex-shrink: 0;
}
.now-playing .vu-meter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(from 195deg at 50% 100%,
        transparent 0deg 4deg,
        rgba(242, 235, 220, 0.08) 4deg 5deg,
        transparent 5deg 9deg);
}
.now-playing .vu-meter::after {
    content: "VU";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.3em;
    color: var(--ink-faint);
}
.now-playing .vu-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    height: 88%;
    background: linear-gradient(to top, var(--copper) 0%, var(--copper-hi) 70%, var(--ink) 100%);
    transform-origin: bottom center;
    transform: rotate(-22deg);
    transition: transform 350ms var(--ease);
    box-shadow: 0 0 8px var(--copper-glow);
}

.now-playing .vu-readout {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.2;
    white-space: nowrap;
}
.now-playing .vu-readout strong {
    color: var(--copper);
    font-weight: 400;
}

/* Light theme — paper-faced VU meter (vintage cream gauge instead of black) */
:root[data-theme="light"] .now-playing .vu-meter {
    background: linear-gradient(180deg, #FAF6EE 0%, #E8E0CE 100%);
    border-color: var(--rule-strong);
    box-shadow:
        inset 0 1px 2px rgba(26, 23, 21, 0.08),
        inset 0 0 24px rgba(var(--copper-rgb), 0.05);
}
:root[data-theme="light"] .now-playing .vu-meter::before {
    background: repeating-conic-gradient(from 195deg at 50% 100%,
        transparent 0deg 4deg,
        rgba(26, 23, 21, 0.18) 4deg 5deg,
        transparent 5deg 9deg);
}
:root[data-theme="light"] .now-playing .vu-meter::after {
    color: var(--ink-mute);
}
:root[data-theme="light"] .now-playing .vu-needle {
    background: linear-gradient(to top, var(--copper) 0%, var(--copper-lo) 70%, var(--ink) 100%);
    box-shadow: 0 0 6px rgba(var(--copper-rgb), 0.25);
}

/* Mobile VU cluster: stack below controls */
@media (max-width: 720px) {
    .now-playing .controls { flex-wrap: wrap; }
    .now-playing .vu-cluster {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        margin-top: 12px;
    }
    .now-playing .vu-meter { width: 110px; height: 50px; }
    .now-playing .meta-grid {
        grid-template-columns: 1fr;
    }
    .now-playing .meta-cell {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 12px 0;
    }
    .now-playing .meta-cell:last-child {
        border-bottom: 0;
        padding-left: 0;
    }
}

/* ════════════════════════════════════════════════════════════════
   STUDIO REFERENCE — editorial styling for non-player tabs
   (Library, Quick Access, Settings, Display)
   ════════════════════════════════════════════════════════════════ */

/* Common: each tab container is a flat editorial canvas (no card chrome) */
.browser-container,
.scripts-container,
.settings-container,
.display-container,
.script-management {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-top: 14px;
}

/* ─── LIBRARY (browser) ───────────────────────────────────── */

/* Breadcrumb — italic serif, copper terminal */
.browser-container .breadcrumb {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
    margin-bottom: 24px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    font-variation-settings: 'opsz' 30;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.browser-container .breadcrumb-home,
.browser-container .breadcrumb-item {
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: color 180ms var(--ease);
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-style: italic;
    font-size: inherit;
}
.browser-container .breadcrumb-home:hover,
.browser-container .breadcrumb-item:hover { color: var(--copper); }
.browser-container .breadcrumb-item:last-of-type {
    color: var(--ink);
    font-weight: 500;
}
.browser-container .breadcrumb-separator {
    color: var(--ink-faint);
    margin: 0 8px;
    font-style: normal;
    opacity: 1;
    font-family: var(--mono);
    font-size: 14px;
}

/* Toolbar — hairline groups, no card */
.browser-container .browser-toolbar {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 0 0 16px 0 !important;
    margin-bottom: 28px;
    gap: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.browser-container .browser-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.browser-container .browser-toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* View-toggle: square hairline pills with copper active */
.browser-container .view-toggle {
    display: flex;
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}
.browser-container .view-toggle-btn,
.browser-container .browser-refresh-btn,
.browser-container .browser-play-all-btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink-mute) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms var(--ease);
    box-sizing: border-box;
}
.browser-container .view-toggle .view-toggle-btn {
    border-right: 1px solid var(--rule-strong) !important;
}
.browser-container .view-toggle .view-toggle-btn:last-child {
    border-right: 0 !important;
}
.browser-container .view-toggle-btn:hover,
.browser-container .browser-refresh-btn:hover,
.browser-container .browser-play-all-btn:hover {
    color: var(--copper) !important;
    background: rgba(var(--copper-rgb), 0.06) !important;
}
.browser-container .view-toggle-btn.active {
    background: var(--ink) !important;
    color: var(--bg-deep) !important;
}
.browser-container .browser-refresh-btn,
.browser-container .browser-play-all-btn {
    border: 1px solid var(--rule-strong) !important;
}
.browser-container .browser-play-all-btn {
    color: var(--copper) !important;
    border-color: var(--copper) !important;
}

/* Search — underline-only editorial input */
.browser-container .browser-search-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    /* override legacy position: relative so the absolutely-positioned
       icon doesn't overlap the input */
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    transition: border-color 180ms var(--ease);
    min-width: 220px;
    max-width: none !important;
}
.browser-container .browser-search-wrapper:focus-within {
    border-bottom-color: var(--copper) !important;
}
.browser-container .browser-search-input {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    /* defeat legacy padding: 0.4rem 2rem 0.4rem 2rem */
    padding: 4px 0 !important;
    outline: none !important;
    flex: 1;
    min-width: 0;
    width: auto !important;
}
.browser-container .browser-search-input::placeholder { color: var(--ink-mute); }
.browser-container .browser-search-icon {
    /* defeat legacy position: absolute */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    color: var(--ink-mute);
    flex-shrink: 0;
    pointer-events: none;
}
.browser-container .browser-search-clear {
    /* defeat legacy position: absolute */
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-mute) !important;
    cursor: pointer;
    padding: 0 !important;
    flex-shrink: 0;
}
.browser-container .browser-search-clear:hover { color: var(--copper) !important; }

/* Items per page label + select */
.browser-container .items-per-page-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.browser-container .items-per-page-label select {
    background: var(--bg-card) !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    font-family: var(--mono);
    font-size: 11px;
    padding: 6px 10px !important;
    cursor: pointer;
}
/* Native <select> popup options — paint dark so they don't read
   as white-on-dark blocks. Most browsers respect bg/color on <option>. */
select option {
    background-color: var(--bg-card);
    color: var(--ink);
}

/* Browser grid — editorial cards (default = grid view) */
.browser-container .browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 32px 24px;
    padding: 0 !important;
}
/* Compact view — denser grid with smaller cards */
.browser-container .browser-grid.browser-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 18px 14px;
}
.browser-container .browser-grid-compact .browser-thumb-wrapper {
    margin-bottom: 8px;
}
.browser-container .browser-grid-compact .browser-item-name {
    font-size: 13px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.browser-container .browser-grid-compact .browser-item-meta,
.browser-container .browser-grid-compact .browser-item-type {
    font-size: 9px;
    letter-spacing: 0.1em;
}
.browser-container .browser-grid-compact .browser-icon {
    width: 28px;
    height: 28px;
}
.browser-container .browser-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: transform 280ms var(--ease);
}
.browser-container .browser-item:hover {
    transform: translateY(-3px);
    background: transparent !important;
    box-shadow: none !important;
}
.browser-container .browser-thumb-wrapper {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,0.5);
    transition: all 280ms var(--ease);
    margin-bottom: 14px;
}
.browser-container .browser-item:hover .browser-thumb-wrapper {
    border-color: var(--copper);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.65);
}
.browser-container .browser-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}
.browser-container .browser-icon {
    color: var(--ink-mute);
}
.browser-container .browser-item-info { padding: 0; }
.browser-container .browser-item-name {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: var(--ink);
    font-variation-settings: 'opsz' 18;
    letter-spacing: 0;
    line-height: 1.25;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browser-container .browser-item-meta,
.browser-container .browser-item-type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.browser-container .browser-play-overlay {
    background: rgba(14, 13, 11, 0.55);
}
.browser-container .browser-play-overlay svg {
    fill: var(--ink);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.browser-container .browser-empty {
    grid-column: 1 / -1;
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    text-align: center;
    padding: 60px 20px;
    font-variation-settings: 'opsz' 30;
}

/* List view — editorial table */
.browser-container .browser-list {
    background: transparent !important;
    border: 1px solid var(--rule);
    border-radius: 0 !important;
}
.browser-container .browser-list-header {
    background: var(--bg-paper) !important;
    border-bottom: 1px solid var(--rule-strong) !important;
    color: var(--ink-mute) !important;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 12px 16px;
}
.browser-container .browser-list-item {
    border-bottom: 1px solid var(--rule);
    transition: background 180ms var(--ease);
    padding: 10px 16px;
}
.browser-container .browser-list-item:hover { background: var(--bg-paper); }
.browser-container .browser-list-name {
    font-family: var(--serif);
    font-style: normal;
    font-size: 15px;
    color: var(--ink);
    font-variation-settings: 'opsz' 18;
}
.browser-container .browser-list-bitrate,
.browser-container .browser-list-duration,
.browser-container .browser-list-size {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

/* Pagination — hairline buttons */
.browser-container .pagination {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--rule) !important;
    margin-top: 36px;
    padding-top: 22px !important;
    display: flex;
    align-items: center;
    gap: 18px;
}
.browser-container .pagination button {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-soft) !important;
    border-radius: 0 !important;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 16px !important;
    transition: all 180ms var(--ease);
    cursor: pointer;
}
.browser-container .pagination button:hover:not(:disabled) {
    color: var(--copper) !important;
    border-color: var(--copper) !important;
}
.browser-container .pagination button:disabled { opacity: 0.35; cursor: not-allowed; }
.browser-container .pagination-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
}
.browser-container .page-input {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    font-family: var(--mono);
    font-size: 11px;
    padding: 6px 8px !important;
    width: 60px;
    text-align: center;
}
.browser-container .pagination-showing {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ─── QUICK ACCESS — console rail ─────────────────────────── */
.scripts-container .scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule-strong);
    padding: 0;
    margin: 0;
}
.scripts-container .script-btn,
.scripts-container .link-card {
    background: var(--bg-card) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 26px 18px !important;
    color: var(--ink) !important;
    transition: all 200ms var(--ease) !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    min-height: 120px;
}
.scripts-container .script-btn:hover,
.scripts-container .link-card:hover {
    background: var(--bg-card-2) !important;
    color: var(--copper) !important;
    transform: none !important;
}
.scripts-container .script-btn .browser-icon,
.scripts-container .link-card .browser-icon {
    color: var(--ink-soft);
    margin-bottom: 14px;
    font-size: 22px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms var(--ease);
}
.scripts-container .script-btn:hover .browser-icon,
.scripts-container .link-card:hover .browser-icon {
    color: var(--copper);
    transform: translateY(-2px);
}
.scripts-container .script-btn .browser-item-name,
.scripts-container .link-card .browser-item-name {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: inherit;
    font-variation-settings: 'opsz' 18;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
}
.scripts-container .scripts-empty {
    grid-column: 1 / -1;
    background: var(--bg-card);
    padding: 80px 24px;
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    text-align: center;
    font-variation-settings: 'opsz' 30;
    border: 1px dashed var(--rule-strong);
}
.scripts-container .scripts-empty p { color: inherit; }

/* ─── SETTINGS — numbered editorial cards ─────────────────── */
.settings-container { counter-reset: sr-section; }

.settings-container .settings-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 28px 32px !important;
    margin-bottom: 16px;
    box-shadow: none !important;
    transition: border-color 200ms var(--ease);
    position: relative;
    counter-increment: sr-section;
}
.settings-container .settings-section:hover {
    border-color: var(--rule-strong) !important;
}

.settings-container .settings-section summary {
    font-family: var(--serif);
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    letter-spacing: -0.015em;
    color: var(--ink);
    font-variation-settings: 'opsz' 60;
    padding: 0 0 14px 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    list-style: none;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.settings-container .settings-section summary::-webkit-details-marker { display: none; }
.settings-container .settings-section summary::before {
    content: "5." counter(sr-section, decimal-leading-zero);
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--copper);
    flex-shrink: 0;
    line-height: 2.2;
}
.settings-container .settings-section summary::after {
    content: "↓";
    margin-left: auto;
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink-mute);
    transition: transform 240ms var(--ease);
    font-weight: 400;
}
.settings-container .settings-section[open] summary::after {
    transform: rotate(180deg);
}

.settings-container .settings-section-content {
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.settings-container .settings-section-description {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    font-variation-settings: 'opsz' 18;
    margin-bottom: 22px;
}

/* Settings tables */
.settings-container .scripts-table {
    border: 1px solid var(--rule);
    border-collapse: collapse;
    width: 100%;
    background: transparent;
    font-family: var(--sans);
}
.settings-container .scripts-table thead {
    background: var(--bg-paper);
}
.settings-container .scripts-table th {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--rule-strong);
    font-weight: 400;
}
.settings-container .scripts-table td {
    padding: 14px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: 13px;
    vertical-align: middle;
}
.settings-container .scripts-table tr:last-child td { border-bottom: 0; }
.settings-container .scripts-table tr:hover td { background: rgba(255,255,255,0.02); }
.settings-container .scripts-table .name-with-icon {
    color: var(--ink);
    font-family: var(--serif);
    font-style: normal;
    font-size: 15px;
    font-variation-settings: 'opsz' 18;
}
.settings-container .scripts-table .path-cell,
.settings-container .scripts-table .mono {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-mute);
}

/* Add card — editorial dashed border */
.settings-container .add-card {
    background: transparent !important;
    border: 1px dashed var(--rule-strong) !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin-top: 16px;
    transition: all 200ms var(--ease);
    color: var(--ink-mute) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-container .add-card:hover {
    border-color: var(--copper) !important;
    border-style: solid !important;
    color: var(--copper) !important;
    background: rgba(var(--copper-rgb), 0.04) !important;
}
.settings-container .add-card-icon {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 24px;
    color: inherit;
    line-height: 1;
}

/* Audio device selector inside settings */
.settings-container .audio-device-selector {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.settings-container .audio-device-selector label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.settings-container .audio-device-selector select {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
    font-family: var(--sans);
    font-size: 13px;
    padding: 10px 12px !important;
    cursor: pointer;
}
.settings-container .audio-device-status {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 12px;
    border: 1px solid var(--rule);
    background: var(--bg-paper);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.settings-container .audio-device-status.active { color: var(--jade); border-color: var(--jade); }
.settings-container .audio-device-status.available { color: var(--amber); border-color: var(--amber); }
.settings-container .audio-device-status.unavailable { color: var(--rust); border-color: var(--rust); }
.settings-container .audio-device-status::before {
    content: "●";
    font-size: 10px;
    color: currentColor;
}

/* Folder badges */
.settings-container .folder-disabled-badge,
.settings-container .folder-unavailable-badge {
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 0 !important;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 8px !important;
    color: var(--amber);
}
.settings-container .folder-unavailable-badge { color: var(--rust); }

/* Empty state */
.settings-container .empty-state {
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    font-variation-settings: 'opsz' 18;
    padding: 40px 20px;
    text-align: center;
}
.settings-container .empty-state-illustration {
    color: var(--ink-faint);
}
.settings-container .empty-state-illustration svg {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Action buttons (edit/delete inside table rows) */
.settings-container .action-btn,
.settings-container .action-buttons button {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-soft) !important;
    border-radius: 0 !important;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms var(--ease);
}
.settings-container .action-btn:hover,
.settings-container .action-buttons button:hover {
    color: var(--copper) !important;
    border-color: var(--copper) !important;
}
.settings-container .action-btn.danger:hover,
.settings-container .action-buttons button.danger:hover {
    color: var(--rust) !important;
    border-color: var(--rust) !important;
}

/* ─── DISPLAY tab ─────────────────────────────────────────── */
.display-container .display-monitors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 22px;
}

/* Full monitor card — header (icon + name + power) + brightness control */
.display-container .display-monitor-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 24px 26px !important;
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    transition: border-color 200ms var(--ease);
}
.display-container .display-monitor-card:hover {
    border-color: var(--rule-strong) !important;
}

.display-container .display-monitor-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.display-container .display-monitor-icon {
    color: var(--copper);
    flex-shrink: 0;
    width: 22px !important;
    height: 22px !important;
}
.display-container .display-monitor-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.display-container .display-monitor-name {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    color: var(--ink);
    font-variation-settings: 'opsz' 30;
    letter-spacing: -0.005em;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* Truncate the monitor name itself, not its sibling badge — putting
   overflow:hidden on the parent flex container clipped the favourite
   star whenever the model name was long enough to ellipsis. */
.display-container .display-monitor-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.display-container .display-monitor-details {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.display-container .display-primary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--copper);
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    vertical-align: middle;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px var(--copper-glow));
}
.display-container .display-primary-badge svg {
    display: block;
}

/* Power button — visible & state-coloured (on = jade, off = ink-mute) */
.display-container .display-power-btn {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    color: var(--ink-mute) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 200ms var(--ease);
}
.display-container .display-power-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.display-container .display-power-btn.on {
    color: var(--jade) !important;
    border-color: var(--jade) !important;
    box-shadow: 0 0 12px rgba(122, 178, 148, 0.25);
}
.display-container .display-power-btn.off {
    color: var(--ink-faint) !important;
    border-color: var(--rule-strong) !important;
}
.display-container .display-power-btn:hover {
    color: var(--copper) !important;
    border-color: var(--copper) !important;
    background: rgba(var(--copper-rgb), 0.06) !important;
}

/* Brightness control row */
.display-container .display-brightness-control {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.display-container .display-brightness-icon {
    color: var(--ink-mute);
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.display-container .display-brightness-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 2px !important;
    background: var(--rule-strong);
    border-radius: 0;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    min-width: 0;
}
.display-container .display-brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--copper);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--copper-glow);
    border: 0;
    cursor: grab;
}
.display-container .display-brightness-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--copper);
    border-radius: 50%;
    border: 0;
    cursor: grab;
}
.display-container .display-brightness-slider:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.display-container .display-brightness-value {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--copper);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    min-width: 44px;
    text-align: right;
    letter-spacing: 0.04em;
}
.display-container .display-monitors > .empty-state-illustration {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    font-variation-settings: 'opsz' 30;
    border: 1px dashed var(--rule);
}
.display-container .display-monitors > .empty-state-illustration svg {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    color: var(--ink-faint);
}

/* Monitor card (rendered by JS — accept any direct children as cards) */
.display-container .display-monitors > div:not(.empty-state-illustration) {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    padding: 22px 24px;
    transition: border-color 200ms var(--ease);
    border-radius: 0;
}
.display-container .display-monitors > div:not(.empty-state-illustration):hover {
    border-color: var(--rule-strong);
}

/* Headings inside any monitor card */
.display-container .display-monitors h3 {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink);
    font-variation-settings: 'opsz' 30;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.display-container .display-monitors button {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    border-radius: 0;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    transition: all 180ms var(--ease);
}
.display-container .display-monitors button:hover {
    color: var(--copper);
    border-color: var(--copper);
}

/* ─── ICON SELECT POPUP & TRIGGER (used by settings dialogs) ─── */
.icon-select-trigger {
    background: transparent !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 12px !important;
    cursor: pointer;
    transition: border-color 180ms var(--ease);
}
.icon-select-trigger:hover {
    border-color: var(--copper) !important;
    color: var(--copper) !important;
}
.icon-select-popup {
    background: var(--bg-card) !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5) !important;
}
.icon-select-cell {
    border-radius: 0 !important;
    color: var(--ink-soft) !important;
    font-family: var(--mono);
    font-size: 10px;
}
.icon-select-cell:hover {
    background: rgba(var(--copper-rgb), 0.06) !important;
    color: var(--copper) !important;
}

/* Mobile: tighten padding for non-player tabs */
@media (max-width: 720px) {
    .browser-container .browser-grid { gap: 22px 16px; }
    .scripts-container .scripts-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .scripts-container .script-btn,
    .scripts-container .link-card { padding: 18px 12px !important; min-height: 100px; }
    .settings-container .settings-section { padding: 20px !important; }
    .settings-container .settings-section summary { font-size: 20px; }
    .browser-container .breadcrumb { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════
   STUDIO REFERENCE — POCKET EDITION
   Dedicated mobile layout. Bottom-nav, single-column hero player,
   compact chrome. Last in the cascade so it overrides all preceding
   legacy + editorial rules.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    :root {
        --pocket-nav-h: 62px;
        --pocket-mini-h: 60px;
    }

    /* ─── Top folio strip ───────────────────────────────────
       Collapse the two corner folios into a single hairline strip at
       the very top. Right folio (volume / version) is redundant on
       phones — tuck it behind the nav into the version label only.
    */
    body > .folio.tl {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: auto;
        padding: 7px 12px 7px max(12px, env(safe-area-inset-left));
        font-size: 8.5px !important;
        letter-spacing: 0.18em !important;
        background: linear-gradient(180deg, rgba(14, 13, 11, 0.7) 30%, transparent 100%);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    :root[data-theme="light"] body > .folio.tl {
        background: linear-gradient(180deg, rgba(245, 241, 234, 0.85) 30%, transparent 100%);
    }
    /* Right folio (volume / version) is redundant on phones — hide it.
       Version is still discoverable via Settings / About in the API. */
    body > .folio.tr { display: none !important; }

    /* ─── Container: leave room for top folio + bottom nav + mini-player ─── */
    .container {
        padding-top: 40px !important;
        padding-bottom: calc(var(--pocket-nav-h) + 24px + env(safe-area-inset-bottom)) !important;
    }
    body.mini-player-visible .container {
        padding-bottom: calc(var(--pocket-nav-h) + var(--pocket-mini-h) + 16px + env(safe-area-inset-bottom)) !important;
    }

    /* ─── Header: tight 2-row layout ───────────────────────── */
    header {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 18px !important;
        padding-bottom: 14px !important;
    }
    header .brand-name { font-size: 22px !important; }
    header .brand-sub {
        font-size: 8px !important;
        letter-spacing: 0.4em !important;
        margin-top: 4px !important;
    }
    .header-toolbar {
        grid-column: 1 !important;
        justify-self: center !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 !important;
    }
    .header-btn,
    .header-btn-logout,
    .header-link {
        width: 34px !important;
        height: 34px !important;
    }
    .header-toolbar-sep { display: none !important; }
    /* Header links preserve their distinctive look but shrink */
    .header-locale {
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    /* ─── Bottom Tab Bar (replaces top tab bar) ────────────── */
    .tab-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right)) !important;
        background: rgba(14, 13, 11, 0.94) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border: 0 !important;
        border-top: 1px solid var(--rule-strong) !important;
        z-index: 999;
        overflow: visible !important;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    }
    :root[data-theme="light"] .tab-bar {
        background: rgba(245, 241, 234, 0.92) !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.10);
    }
    /* Hairline copper accent strip floating above active tab */
    .tab-bar::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 16px;
        right: 16px;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            var(--copper) 30%,
            var(--copper-hi) 50%,
            var(--copper) 70%,
            transparent 100%);
        opacity: 0.35;
        pointer-events: none;
    }

    /* Re-enable labels (legacy mobile rule hid all spans inside .tab-btn) */
    .tab-btn span,
    .tab-btn span:not(.tab-num) {
        display: inline-block !important;
    }

    .tab-btn {
        height: var(--pocket-nav-h) !important;
        padding: 10px 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-family: var(--mono) !important;
        font-style: normal !important;
        font-size: 9.5px !important;
        font-weight: 400 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase;
        color: var(--ink-faint) !important;
        line-height: 1 !important;
    }
    .tab-btn .tab-num {
        font-size: 11px !important;
        letter-spacing: 0.2em !important;
        color: var(--ink-mute) !important;
    }
    .tab-btn span:not(.tab-num) {
        font-family: var(--mono) !important;
        font-size: 9px !important;
        letter-spacing: 0.1em !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tab-btn:hover {
        color: var(--ink-soft) !important;
    }
    .tab-btn.active {
        color: var(--copper) !important;
        font-family: var(--mono) !important;
        font-style: normal !important;
        font-size: 9.5px !important;
    }
    .tab-btn.active .tab-num,
    .tab-btn.active span:not(.tab-num) {
        color: var(--copper) !important;
    }
    /* Active marker: copper bar at TOP of tab (hairline + glow) */
    .tab-btn.active::after {
        top: -1px !important;
        bottom: auto !important;
        left: 14% !important;
        right: 14% !important;
        height: 2px !important;
        background: var(--copper) !important;
        box-shadow:
            0 0 12px var(--copper-glow),
            0 0 28px var(--copper-glow) !important;
    }

    /* ─── Mini-player: float above bottom nav ─────────────── */
    .mini-player {
        bottom: calc(var(--pocket-nav-h) + env(safe-area-inset-bottom)) !important;
        padding: 9px 14px !important;
        gap: 12px !important;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
        background: rgba(33, 30, 24, 0.92) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        backdrop-filter: blur(24px) saturate(160%);
        box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.25);
    }
    :root[data-theme="light"] .mini-player {
        background: rgba(255, 252, 246, 0.94) !important;
    }
    .mini-player::before {
        height: 1px !important;
    }
    .mini-album-art {
        width: 38px !important;
        height: 38px !important;
        border-radius: 2px;
    }
    .mini-player-info {
        min-width: 0 !important;
        flex: 1;
        gap: 10px !important;
    }
    .mini-track-title {
        font-family: var(--serif);
        font-style: italic;
        font-weight: 400;
        font-size: 13px !important;
        color: var(--ink) !important;
        font-variation-settings: 'opsz' 30;
    }
    .mini-artist {
        font-family: var(--mono);
        font-size: 9.5px !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-mute) !important;
    }
    .mini-progress-container {
        display: none !important;  /* progress lives on the ::before line */
    }
    .mini-volume-container { display: none !important; }
    .mini-controls { gap: 4px !important; }
    .mini-nav-btn { display: none !important; }
    .mini-control-btn {
        width: 38px !important;
        height: 38px !important;
        background: transparent !important;
        border: 1px solid var(--rule-strong) !important;
        border-radius: 50%;
    }
    .mini-control-btn:hover {
        border-color: var(--copper) !important;
        background: rgba(var(--copper-rgb), 0.08) !important;
        color: var(--copper) !important;
    }
    .mini-control-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* ─── Player tab — single column hero ─────────────────── */
    .player-layout,
    .now-playing {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        margin-top: 4px !important;
    }

    /* Vinyl stage: centered, generous on tablet/large-phone widths */
    .album-art-container.vinyl-stage {
        max-width: 460px;
        width: 92%;
        margin: 0 auto !important;
    }
    /* Lighter sleeve grain on phones so the printed art reads
       cleanly at small size. */
    .vinyl-stage .sleeve-grain { opacity: 0.55; }
    .vinyl-stage .vinyl-wrap .vinyl-label {
        box-shadow:
            inset 0 0 16px rgba(0, 0, 0, 0.5),
            0 0 0 2px var(--bg-deep),
            0 0 0 3px var(--copper-lo);
    }
    .vinyl-label-text { font-size: 9px; letter-spacing: 0.24em; }
    /* Tonearm geometry inherits the desktop .vinyl-stage .tonearm
       values — sleeve + disc proportions are identical on mobile,
       so the needle still lands on the visible disc grooves. */

    /* Track masthead text: centered, condensed cadence */
    .track-masthead { text-align: center; }
    .track-masthead > .kicker {
        margin-bottom: 14px !important;
        gap: 10px !important;
        justify-content: center;
        font-size: 9px !important;
        letter-spacing: 0.36em !important;
    }
    .track-masthead > .kicker::before { flex-basis: 18px !important; }
    .track-masthead > .kicker::after { flex-basis: 18px !important; flex-grow: 0 !important; }

    .now-playing #track-title,
    .player-layout #track-title {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1 !important;
        margin-bottom: 10px !important;
        letter-spacing: -0.02em !important;
    }
    .now-playing #artist,
    .player-layout #artist {
        font-size: 17px !important;
        margin-bottom: 4px !important;
    }
    .now-playing #album,
    .player-layout #album {
        font-size: 10px !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase;
        color: var(--ink-mute) !important;
    }

    /* Meta-grid: 2 columns side-by-side with hairline divider */
    .now-playing .meta-grid,
    .meta-grid.meta-grid-2,
    .player-layout .meta-grid {
        grid-template-columns: 1fr 1fr !important;
        margin-top: 22px !important;
    }
    .now-playing .meta-cell,
    .meta-grid .meta-cell,
    .player-layout .meta-cell {
        border-right: 1px solid var(--rule) !important;
        border-bottom: 0 !important;
        padding: 12px 14px !important;
        text-align: left;
        min-width: 0;
    }
    .now-playing .meta-cell:nth-child(2n),
    .meta-grid .meta-cell:nth-child(2n),
    .player-layout .meta-cell:nth-child(2n) {
        border-right: 0 !important;
        padding-right: 0 !important;
    }
    .now-playing .meta-cell:first-child,
    .meta-grid .meta-cell:first-child,
    .player-layout .meta-cell:first-child {
        padding-left: 0 !important;
    }
    .meta-cell .label,
    .meta-cell .meta-label {
        font-size: 8.5px !important;
        letter-spacing: 0.28em !important;
    }
    .meta-cell .value,
    .meta-cell .meta-value {
        font-size: 14px !important;
    }

    /* Spectrum: shrink so it doesn't dominate */
    .now-playing .spectrum,
    .player-layout .spectrum {
        height: 26px !important;
        margin: 18px 0 4px 0 !important;
    }

    /* Transport: bigger touch targets, centered, no wrap */
    .transport { margin-top: 14px !important; }
    .progress-row {
        gap: 12px !important;
        margin-bottom: 22px !important;
    }
    .progress-row .timecode { font-size: 11px !important; }

    .now-playing .controls,
    .player-layout .controls {
        justify-content: center !important;
        gap: 28px !important;
        flex-wrap: wrap !important;
        row-gap: 0 !important;
    }
    .now-playing .controls .btn-trans,
    .player-layout .controls .btn-trans {
        width: 50px !important;
        height: 50px !important;
    }
    .now-playing .controls .btn-trans.primary,
    .player-layout .controls .btn-trans.primary {
        width: 68px !important;
        height: 68px !important;
    }
    .now-playing .controls .btn-trans svg { width: 20px !important; height: 20px !important; }
    .now-playing .controls .btn-trans.primary svg { width: 26px !important; height: 26px !important; }

    /* VU meter is decorative on a phone — hide it. Volume becomes
       its own full-width hairline row beneath the controls.
       flex-basis: 100% forces the cluster onto its own line in the
       wrapping .controls flex container. */
    .now-playing .vu-cluster,
    .player-layout .vu-cluster {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px !important;
        flex-basis: 100% !important;
        width: 100% !important;
        margin: 18px 0 0 0 !important;
        padding-top: 16px !important;
        border-top: 1px solid var(--rule);
    }
    .now-playing .vu-meter,
    .player-layout .vu-meter { display: none !important; }
    .now-playing .vu-readout,
    .player-layout .vu-readout {
        flex-direction: row !important;
        gap: 14px !important;
        font-size: 9.5px !important;
        letter-spacing: 0.12em !important;
        white-space: nowrap;
    }
    .now-playing .vu-volume,
    .player-layout .vu-volume {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        border-right: 0 !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-end;
        gap: 12px !important;
    }
    .now-playing .vu-volume #volume-slider,
    .player-layout .vu-volume #volume-slider {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        height: 3px !important;
    }
    .now-playing .vu-volume #volume-slider::-webkit-slider-thumb,
    .player-layout .vu-volume #volume-slider::-webkit-slider-thumb {
        width: 14px !important;
        height: 14px !important;
    }
    .now-playing .vu-volume .mute-btn,
    .player-layout .vu-volume .mute-btn {
        width: 36px !important;
        height: 36px !important;
    }
    .now-playing .vu-volume .mute-btn svg,
    .player-layout .vu-volume .mute-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* ─── Library / Browser polish ────────────────────────── */
    .browser-container .browser-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .browser-container .browser-toolbar-right {
        margin-left: 0 !important;
    }
    .browser-search-wrapper {
        flex-basis: 100% !important;
        order: 10;
        max-width: none !important;
    }
    /* Pagination: column stack, big tap targets */
    .pagination {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 18px 0 !important;
        border-top: 1px solid var(--rule);
        margin-top: 20px;
    }
    .pagination button {
        width: 100% !important;
        min-height: 42px;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    .pagination .pagination-center {
        justify-content: center;
        order: -1;
    }
    .pagination-showing {
        text-align: center !important;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.12em;
        color: var(--ink-faint);
    }

    /* ─── Settings: card-like rows for tables ─────────────── */
    .settings-container .scripts-table thead { display: none; }
    .settings-container .scripts-table,
    .settings-container .scripts-table tbody,
    .settings-container .scripts-table tr,
    .settings-container .scripts-table td {
        display: block !important;
        width: 100% !important;
    }
    .settings-container .scripts-table tr {
        border: 1px solid var(--rule) !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        background: rgba(33, 30, 24, 0.32);
    }
    :root[data-theme="light"] .settings-container .scripts-table tr {
        background: rgba(255, 252, 246, 0.6);
    }
    .settings-container .scripts-table td {
        padding: 4px 0 !important;
        border: 0 !important;
        font-family: var(--sans);
        font-size: 13px;
    }
    .settings-container .scripts-table td:not(:last-child) {
        border-bottom: 1px dashed var(--rule) !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    /* Empty-state row keeps its own block layout */
    .settings-container .scripts-table tr:has(.empty-state),
    .settings-container .scripts-table tr td.empty-state {
        background: transparent;
        border: 0 !important;
        padding: 0 !important;
    }

    /* Auth modal: full-bleed feel on phones */
    .auth-modal {
        width: 92% !important;
        padding: 28px 22px !important;
    }
}

/* ─── Tighter breakpoint for compact phones (<= 420px) ─── */
@media (max-width: 420px) {
    .tab-btn span:not(.tab-num) { font-size: 8px !important; }
    .tab-btn .tab-num { font-size: 10px !important; }

    /* Fewest icons in header — surface only critical chrome */
    header .brand-sub { display: none !important; }
    header .brand-name { font-size: 20px !important; }
    .header-btn[title="API Documentation"],
    .header-btn[title="Dynamic background"] {
        display: none !important;
    }

    /* Vinyl stage tighter still on small phones; tonearm inherits
       desktop geometry which is proportional to the stage. */
    .album-art-container.vinyl-stage { width: 84%; }

    .now-playing #track-title,
    .player-layout #track-title {
        font-size: clamp(24px, 8.5vw, 32px) !important;
    }

    /* Transport: keep readable but shrink the gap */
    .now-playing .controls,
    .player-layout .controls { gap: 22px !important; }
    .now-playing .controls .btn-trans,
    .player-layout .controls .btn-trans { width: 46px !important; height: 46px !important; }
    .now-playing .controls .btn-trans.primary,
    .player-layout .controls .btn-trans.primary { width: 60px !important; height: 60px !important; }

    /* Folio strip text shrinks */
    body > .folio.tl,
    body > .folio.tr { font-size: 7.5px !important; letter-spacing: 0.14em !important; }

    /* Mini-player: shave one icon */
    .mini-player { padding: 8px 12px !important; gap: 10px !important; }
    .mini-album-art { width: 34px !important; height: 34px !important; }
    .mini-control-btn { width: 36px !important; height: 36px !important; }
}

/* ════════════════════════════════════════════════════════════════
   FULLSCREEN PLAYER — "Listening Room"
   Activated via body.is-fullscreen-player. Uses position:fixed to
   take over the viewport (works without native Fullscreen API) and
   re-projects the existing player markup at theater scale: oversized
   Fraunces italic title, ambient album-art bloom painting the room,
   auto-hiding chrome, dramatic vinyl-stage focus.
   ════════════════════════════════════════════════════════════════ */

/* Fullscreen-only chrome (top strip with edition mark + exit button)
   and ambient bloom layer are inert outside fullscreen mode. */
.fs-chrome,
.fs-bloom {
    display: none;
    pointer-events: none;
}

/* While in fullscreen: take over the viewport, hide everything outside
   the player container, and project the player onto a dark stage. */
body.is-fullscreen-player {
    overflow: hidden;
}

/* Hide the world */
body.is-fullscreen-player > .container > header,
body.is-fullscreen-player > .container > .tab-bar,
body.is-fullscreen-player > .container > .update-banner,
body.is-fullscreen-player > .container > .connection-banner,
body.is-fullscreen-player > .container > [data-tab-content]:not(#panel-player),
body.is-fullscreen-player > .folio,
body.is-fullscreen-player > #mini-player {
    display: none !important;
}

/* Promote the player container to fixed-overlay rank */
body.is-fullscreen-player .player-container {
    position: fixed;
    inset: 0;
    z-index: 9000;
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse at 30% 35%, rgba(var(--copper-rgb), 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at center, var(--bg-paper) 0%, var(--bg-deep) 75%);
    display: grid;
    place-items: stretch;
    overflow: hidden;
    box-shadow: none !important;
    border: 0 !important;
    /* Soft entry fade — content layers stagger in via .now-playing animations below */
    animation: fs-fade-in 320ms var(--ease-out) both;
}

@keyframes fs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Ambient bloom: paint the room in the album's color ─────── */
body.is-fullscreen-player .fs-bloom {
    display: block;
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    animation: fs-bloom-in 1400ms var(--ease-out) 120ms forwards;
}

@keyframes fs-bloom-in {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 0.42; transform: scale(1); }
}

:root[data-theme="light"] body.is-fullscreen-player .fs-bloom {
    animation-name: fs-bloom-in-light;
}
@keyframes fs-bloom-in-light {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 0.22; transform: scale(1); }
}

/* Performance trick (matches the vinyl-stage glow): render the bloom
   image at 20% of the viewport and stretch it via scale(~6). Blur runs
   over a 25× smaller area, so a track-switch repaint of the bloom
   collapses from O(viewport-pixels × 110² ) to O(viewport/25 × 18²). */
body.is-fullscreen-player .fs-bloom #fs-bloom-art {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    object-fit: cover;
    filter: blur(18px) saturate(1.6);
    transform: translate(-50%, -50%) scale(5.9);
    transform-origin: center;
    animation: fs-bloom-drift 28s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes fs-bloom-drift {
    from { transform: translate(-50%, -50%) scale(5.9) translate3d(-1.5%, -1%, 0); }
    to   { transform: translate(-50%, -50%) scale(6.1) translate3d(2%, 1.5%, 0); }
}

/* Subtle paper-grain veil over the bloom — keeps it from looking flat. */
body.is-fullscreen-player .player-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.35) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.30) 0%, transparent 45%);
    mix-blend-mode: multiply;
}

/* Vignette + top/bottom edge darkening — frames the listening room */
body.is-fullscreen-player .player-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.45) 0%,
            transparent 12%,
            transparent 88%,
            rgba(0, 0, 0, 0.55) 100%),
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}

:root[data-theme="light"] body.is-fullscreen-player .player-container::after {
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.10) 0%,
            transparent 14%,
            transparent 86%,
            rgba(0, 0, 0, 0.15) 100%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.12) 100%);
}

/* ─── Floating chrome (edition mark + exit) — auto-hides on idle ─ */
body.is-fullscreen-player .fs-chrome {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 50;
    align-items: center;
    justify-content: space-between;
    padding: 22px 36px;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
    transform: translateY(0);
}

body.is-fullscreen-player.fs-chrome-hidden .fs-chrome {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}
body.is-fullscreen-player.fs-chrome-hidden { cursor: none; }

.fs-chrome-mark {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.fs-chrome-edition {
    color: var(--copper);
    font-weight: 500;
}
.fs-chrome-sep { color: var(--ink-faint); }

.fs-chrome-exit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    background: rgba(14, 13, 11, 0.55);
    border: 1px solid var(--rule-strong);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    backdrop-filter: blur(8px) saturate(1.2);
    transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.fs-chrome-exit:hover {
    color: var(--ink);
    border-color: var(--copper);
    background: rgba(14, 13, 11, 0.75);
}
.fs-chrome-exit svg { color: var(--copper); }
.fs-chrome-kbd {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    padding: 2px 6px;
    border: 1px solid var(--rule-strong);
    color: var(--ink-mute);
    background: transparent;
    border-radius: 0;
}
:root[data-theme="light"] .fs-chrome-exit {
    background: rgba(255, 255, 255, 0.7);
}

/* ─── Stage: massive vinyl + masthead at theater scale ─────────── */
body.is-fullscreen-player .now-playing,
body.is-fullscreen-player .player-layout {
    position: relative;
    z-index: 5;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 6vw, 96px);
    margin: 0 !important;
    padding: clamp(80px, 10vh, 140px) clamp(40px, 6vw, 96px) clamp(40px, 6vh, 80px);
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    align-content: center;
}

/* Vinyl stage — pin to comfortable theater size */
body.is-fullscreen-player .album-art-container.vinyl-stage {
    width: min(72vh, 100%);
    max-width: 720px;
    margin-inline: auto;
    aspect-ratio: 1;
    background:
        radial-gradient(ellipse at center,
            rgba(26, 22, 17, 0.85) 0%,
            transparent 70%);
    filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.55));
    animation: fs-stage-rise 600ms var(--ease-out) both;
}
@keyframes fs-stage-rise {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

:root[data-theme="light"] body.is-fullscreen-player .album-art-container.vinyl-stage {
    background:
        radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.65) 0%,
            transparent 75%);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.18));
}

/* ─── Masthead: editorial centerfold ───────────────────────────── */
body.is-fullscreen-player .track-masthead {
    position: relative;
    max-width: 720px;
    padding-right: clamp(0px, 2vw, 24px);
    /* Stagger ladder: each child slides up with a small delay */
    --fs-stagger: 80ms;
}

body.is-fullscreen-player .track-masthead > * {
    animation: fs-rise 700ms var(--ease-out) both;
}
body.is-fullscreen-player .track-masthead > .kicker      { animation-delay: calc(var(--fs-stagger) * 1); }
body.is-fullscreen-player .track-masthead > .track-title { animation-delay: calc(var(--fs-stagger) * 2); }
body.is-fullscreen-player .track-masthead > .track-byline{ animation-delay: calc(var(--fs-stagger) * 3); }
body.is-fullscreen-player .track-masthead > .track-album { animation-delay: calc(var(--fs-stagger) * 4); }
body.is-fullscreen-player .track-masthead > .meta-grid   { animation-delay: calc(var(--fs-stagger) * 5); }
body.is-fullscreen-player .track-masthead > .spectrum    { animation-delay: calc(var(--fs-stagger) * 6); }
body.is-fullscreen-player .track-masthead > .transport   { animation-delay: calc(var(--fs-stagger) * 7); }

@keyframes fs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Kicker — editorial small-caps with hairline rules */
body.is-fullscreen-player .now-playing .kicker {
    margin-bottom: clamp(18px, 2.4vh, 32px);
    font-size: 11px;
    letter-spacing: 0.36em;
}

/* The headline — Fraunces italic, oversized, centerfold scale */
body.is-fullscreen-player .now-playing .track-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(48px, 6.4vw, 112px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    margin: 0 0 clamp(14px, 1.8vh, 22px);
    color: var(--ink);
    text-wrap: balance;
}

body.is-fullscreen-player .now-playing .track-title em {
    font-style: italic;
}

/* Artist + album — refined editorial tier */
body.is-fullscreen-player .now-playing .track-byline {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(16px, 1.4vw, 22px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
body.is-fullscreen-player .now-playing .track-album {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 20px);
    color: var(--ink-mute);
    margin-bottom: clamp(20px, 2.4vh, 36px);
}

/* Meta grid — promote to a console-readout strip */
body.is-fullscreen-player .now-playing .meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2vw, 36px);
    padding-block: clamp(14px, 1.8vh, 22px);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(20px, 2.4vh, 32px);
}
body.is-fullscreen-player .now-playing .meta-cell .label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
    color: var(--copper);
}
body.is-fullscreen-player .now-playing .meta-cell .value {
    font-family: var(--mono);
    font-size: clamp(13px, 1vw, 16px);
    letter-spacing: 0.08em;
    color: var(--ink);
}

/* Spectrum — taller, full-width amplitude bars */
body.is-fullscreen-player .now-playing .spectrum {
    height: clamp(60px, 9vh, 120px);
    margin-bottom: clamp(22px, 2.6vh, 36px);
    opacity: 0.95;
}

/* Transport — give it room to breathe */
body.is-fullscreen-player .now-playing .transport {
    gap: clamp(20px, 2.6vh, 32px);
}

/* Progress row: huge mono timecodes */
body.is-fullscreen-player .now-playing .progress-row {
    gap: clamp(16px, 1.8vw, 28px);
}
body.is-fullscreen-player .now-playing .progress-row .timecode,
body.is-fullscreen-player .now-playing .timecode {
    font-family: var(--mono);
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 300;
    letter-spacing: 0.04em;
    min-width: 6ch;
}
body.is-fullscreen-player .now-playing .progress-track,
body.is-fullscreen-player .now-playing .progress-bar {
    height: 4px;
}
body.is-fullscreen-player .now-playing .progress-fill {
    box-shadow: 0 0 18px var(--copper-glow);
}

/* Controls — large, generous spacing */
body.is-fullscreen-player .now-playing .controls {
    gap: clamp(14px, 1.6vw, 22px);
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
body.is-fullscreen-player .now-playing .btn-trans {
    width: clamp(48px, 4.5vw, 64px) !important;
    height: clamp(48px, 4.5vw, 64px) !important;
}
body.is-fullscreen-player .now-playing .btn-trans.primary {
    width: clamp(64px, 6vw, 88px) !important;
    height: clamp(64px, 6vw, 88px) !important;
}
body.is-fullscreen-player .now-playing .btn-trans svg {
    width: clamp(20px, 1.8vw, 26px);
    height: clamp(20px, 1.8vw, 26px);
}
body.is-fullscreen-player .now-playing .btn-trans.primary svg {
    width: clamp(26px, 2.4vw, 34px);
    height: clamp(26px, 2.4vw, 34px);
}

/* VU cluster — slightly enlarged, still right-anchored */
body.is-fullscreen-player .now-playing .vu-cluster {
    margin-left: auto;
    gap: clamp(10px, 1vw, 16px);
}
body.is-fullscreen-player .now-playing .vu-meter {
    width: clamp(70px, 6.5vw, 96px);
    height: clamp(36px, 3.6vh, 50px);
}

/* Header button: active state when fullscreen is on */
.header-btn#fullscreenToggle.active {
    background: var(--bg-card);
    color: var(--copper);
    border-color: var(--copper);
}

/* ─── Mobile / portrait variant: vertical theater ──────────────── */
@media (max-width: 900px), (orientation: portrait) {
    body.is-fullscreen-player .now-playing,
    body.is-fullscreen-player .player-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, auto);
        gap: clamp(20px, 4vh, 40px);
        padding: clamp(60px, 8vh, 96px) clamp(20px, 5vw, 40px) clamp(24px, 4vh, 48px);
        align-content: start;
    }
    body.is-fullscreen-player .album-art-container.vinyl-stage {
        width: min(70vw, 56vh);
        max-width: 480px;
    }
    body.is-fullscreen-player .now-playing .track-title {
        font-size: clamp(36px, 8.5vw, 64px);
    }
    body.is-fullscreen-player .now-playing .controls {
        justify-content: center;
    }
    body.is-fullscreen-player .now-playing .vu-cluster {
        margin-left: 0;
        margin-right: auto;
    }
    body.is-fullscreen-player .fs-chrome {
        padding: 14px 18px;
    }
}

/* Reduced motion: kill the entry animations and bloom drift */
@media (prefers-reduced-motion: reduce) {
    body.is-fullscreen-player .player-container,
    body.is-fullscreen-player .fs-bloom,
    body.is-fullscreen-player .album-art-container.vinyl-stage,
    body.is-fullscreen-player .track-masthead > * {
        animation: none !important;
    }
    body.is-fullscreen-player .fs-bloom { opacity: 0.42; }
    body.is-fullscreen-player .fs-bloom #fs-bloom-art { animation: none !important; }
    :root[data-theme="light"] body.is-fullscreen-player .fs-bloom { opacity: 0.22; }
}