/* SoulSync WebUI - Replicating PyQt6 GUI Styling */

/* Accent Color Variables — overridden by JS when user picks a custom accent */
:root {
    --accent-rgb: 29, 185, 84;
    --accent-light-rgb: 30, 215, 96;
    --accent-neon-rgb: 34, 255, 107;

    /* Sidebar width (#1155). One definition, because three other things line
       themselves up against it and two of them live OUTSIDE the sidebar: the
       audio visualiser is position:fixed at its right edge (deliberately, to
       escape the overflow clip) and the page particles canvas offsets from it.
       Hardcode the width in any of them again and they detach. */
    --sidebar-w: 240px;
}

/* Collapsed: icons only. */
html[data-sidebar="collapsed"] {
    --sidebar-w: 68px;
}

.modal-track-play-btn {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.14);
    color: #65d67a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    margin-right: 8px;
    vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.modal-track-play-btn:hover {
    background: rgba(76, 175, 80, 0.24);
    border-color: rgba(101, 214, 122, 0.45);
    transform: scale(1.05);
}

.wishlist-track-play-btn {
    flex: 0 0 auto;
    margin-right: 4px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg,
            rgba(8, 8, 8, 1) 0%,
            rgba(12, 12, 12, 1) 50%,
            rgba(16, 16, 16, 1) 100%);
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
}

.hidden {
    display: none !important;
}

/* Main Container Layout */
.main-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* ======================================
   SIDEBAR STYLING - Premium Glassmorphic Design
   ====================================== */

.sidebar {
    width: var(--sidebar-w);

    /* Opaque dark foundation (GPU-optimized: no backdrop-filter needed on solid dark body) */
    background: linear-gradient(135deg,
            rgba(18, 18, 18, 1) 0%,
            rgba(12, 12, 12, 1) 100%);

    /* Soft translucent borders */
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-right-radius: 24px;

    /* Soft floating shadow with inner glow — dropped the 0 4px 16px duplicate and the
       0 0 60px accent glow (60px blur at 6% opacity: nearly invisible but a costly
       shadow pass). One outer + the two insets read the same. */
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: column;
    /* The sidebar itself no longer scrolls — .sidebar-scroll does. The header
       is a flex sibling of that scroller rather than a sticky child of it, so
       nav items cannot ride up over it. See .sidebar-scroll below. */
    overflow: hidden;
    position: relative;

    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) rgba(255, 255, 255, 0.03);
}

/* Sidebar ambient aura — uses transform/opacity for GPU-smooth animation */
.sidebar::before,
.sidebar::after {
    content: '';
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    /* The radial-gradient already fades to transparent at 70%, so a smaller blur
       still reads as a soft aura — but shrinks the composited (orb + feather)
       bounding box and the blur work. 40px -> 28px: ~imperceptible, cheaper fill. */
    filter: blur(28px);
    will-change: transform, opacity;
}

.sidebar::before {
    width: 180px;
    height: 180px;
    top: 5%;
    left: 10px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.35) 0%, transparent 70%);
    animation: sidebar-orb-1 16s ease-in-out infinite;
    z-index: 0;
}

.sidebar::after {
    width: 160px;
    height: 160px;
    top: 55%;
    left: 40px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.30) 0%, transparent 70%);
    animation: sidebar-orb-2 20s ease-in-out infinite;
    z-index: 0;
}

/* In performance mode the aura loses its blur + animation, leaving two hard
   static circles — hide them entirely instead. */
body.reduce-effects .sidebar::before,
body.reduce-effects .sidebar::after,
body.max-performance .sidebar::before,
body.max-performance .sidebar::after {
    display: none !important;
}

/* translate + opacity only — NO scale(). The orbs are blur(28px); scaling a blurred
   element re-rasterizes the blur every frame, but translating it just moves the cached
   layer on the compositor (free). Same drifting glow, no per-frame re-blur (#935). */
@keyframes sidebar-orb-1 {
    0%, 100% { transform: translate(0, 0); opacity: 0.5; }
    25% { transform: translate(30px, 80px); opacity: 1; }
    50% { transform: translate(-10px, 180px); opacity: 0.6; }
    75% { transform: translate(20px, 50px); opacity: 0.9; }
}

@keyframes sidebar-orb-2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.6; }
    30% { transform: translate(-20px, -100px); opacity: 0.4; }
    60% { transform: translate(30px, -50px); opacity: 1; }
    80% { transform: translate(-10px, 40px); opacity: 0.5; }
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

/* Sidebar Audio Visualizer — fixed strip on right edge of sidebar */
.sidebar-visualizer {
    position: fixed;
    left: var(--sidebar-w);
    top: 0;
    bottom: 0;
    width: 10px;
    /* z:1 on purpose: the artist map/web overlays live INSIDE .page (position:relative; z-index:1),
       so their z:100 is trapped in the page's stacking context — at root level the whole page paints
       at z:1. The strip must TIE that (not beat it): tie -> DOM order wins -> the page (later in the
       DOM) and any fullscreen overlay inside it paint over the strip. Anything higher (the old 100,
       even 5) pokes through the overlays. */
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.sidebar-visualizer.active {
    opacity: 1;
}

/* Type: Bars */
.sidebar-visualizer.viz-bars {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 16px 0;
}
.sidebar-viz-bar {
    flex: 1;
    border-radius: 4px;
    transform: scaleX(0.1);
    transform-origin: left center;
    will-change: transform;
}

/* Type: Wave & Spectrum (canvas) */
.sidebar-visualizer.viz-canvas {
    display: flex;
    align-items: stretch;
}
.sidebar-viz-canvas {
    width: 100%;
    height: 100%;
}

/* Type: Mirror (bars from center) */
.sidebar-visualizer.viz-mirror {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 0;
}
.sidebar-viz-mirror-bar {
    flex: 1;
    border-radius: 4px;
    transform: scaleX(0.06);
    transform-origin: left center;
    will-change: transform;
}

/* Type: Equalizer (bars with peak hold) */
.sidebar-visualizer.viz-equalizer {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    padding: 16px 0;
}
.sidebar-viz-eq-wrap {
    flex: 1;
    position: relative;
}
.sidebar-viz-eq-bar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    transform: scaleX(0.06);
    transform-origin: left center;
    will-change: transform;
}
.sidebar-viz-eq-peak {
    position: absolute;
    top: 0;
    left: 6%;
    width: 2px;
    height: 100%;
    border-radius: 1px;
    will-change: left, background-color, box-shadow;
}

@media (max-width: 768px) {
    .sidebar-visualizer { display: none; }
}

/* Sidebar scrollbar webkit styling */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.5);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.7);
}

/* Sidebar Header */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Everything below the header, in one scroll box.

   The header was previously `position: sticky` INSIDE the scrolling .sidebar.
   That never held: the header paints into its own compositing layer (the
   backdrop-filter / #1040 note below), and z-index does not arbitrate across
   layers — so scrolled nav items painted straight through it. Raising z-index
   changed nothing, which was the tell.

   As siblings in a flex column the overlap is structurally impossible: the
   header owns its band, this owns the rest. Also fixes the header scrolling
   away with the content, which was the same single-scroll-box cause. */
.sidebar-scroll {
    flex: 1 1 auto;
    /* Flex children default to min-height:auto and refuse to shrink below their
       content — without this overflow-y is inert and the scroll silently falls
       back to the sidebar. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    min-height: 115px;
    /* Accent tint layered over an OPAQUE dark base. The old translucent-only
       gradient depended on backdrop-filter for legibility — browsers without
       it (or with it disabled) painted scrolled nav items straight through
       the header, so the Music/Video toggle and profile chip sat on top of
       nav text (#1040). The opaque base keeps the exact same tinted look
       while guaranteeing zero bleed-through everywhere. */
    background:
        linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.16) 0%,
            rgba(var(--accent-rgb), 0.10) 30%,
            rgba(24, 24, 24, 0.62) 70%,
            rgba(18, 18, 18, 0.72) 100%),
        linear-gradient(180deg, rgb(21, 21, 23) 0%, rgb(14, 14, 16) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    /* Was sticky+z-index inside the scrolling sidebar. Now a plain flex
       sibling of .sidebar-scroll, which is what actually holds it above the
       content — no stacking-context guesswork. flex-shrink 0 so a long nav
       list can never squeeze the header. */
    flex: 0 0 auto;
    overflow: hidden;
    flex-shrink: 0;

    /* Intense frosted-glass blur: nav items scrolling up behind the translucent
       accent-gradient top now read as a soft blur instead of bleeding through
       sharply. (Only visible where the background is translucent — the opaque
       base toward the bottom still stops any bleed.) */
    /* Backdrop blur is re-evaluated whenever content drifts behind it (the
       ambient orbs do). Cost scales with radius — 28px -> 18px keeps the frosted
       read while cutting the per-frame blur work by ~a third. */
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);

    /* Subtle inner glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Ambient light sweep across header */
.sidebar-header::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.06) 40%,
        rgba(var(--accent-rgb), 0.12) 50%,
        rgba(var(--accent-rgb), 0.06) 60%,
        transparent 100%
    );
    /* Animate transform (compositor-only) instead of `left` (which forced a
       layout recalc every frame). The element width is 60% of the header, so
       translateX(400%) = 240% of header width — the same travel `left:-100%`
       → `left:140%` produced. Pixel-identical path, no per-frame layout. */
    transform: translateX(0);
    will-change: transform, opacity;
    animation: sidebar-header-sweep 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sidebar-header-sweep {
    0%, 100% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateX(400%); opacity: 1; }
    60% { opacity: 0; }
}

.app-name {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 60%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.8px;
    margin: 0;
    animation: sidebar-logo-shimmer 6s ease-in-out infinite;
}

@keyframes sidebar-logo-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.app-subtitle {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    margin-top: 2px;
}

/* Navigation Buttons */
.sidebar-nav {
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-button {
    position: relative;
    height: 44px;
    width: 216px;
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 0 16px;
    transition: background 0.1s ease, border-color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

/* Active indicator bar - left edge glow */
.nav-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    transition: height 0.12s ease;
}

.nav-button.active::before {
    height: 60%;
}

body:not(.reduce-effects) .nav-button:hover {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-button:active:not(.active) {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.14) 0%,
            rgba(var(--accent-rgb), 0.10) 50%,
            rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow:
        0 4px 16px rgba(var(--accent-rgb), 0.2),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: none;
}

.nav-button.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.14) 0%,
            rgba(var(--accent-rgb), 0.10) 50%,
            rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow:
        0 4px 16px rgba(var(--accent-rgb), 0.2),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body:not(.reduce-effects) .nav-button.active:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.20) 0%,
            rgba(var(--accent-rgb), 0.16) 50%,
            rgba(var(--accent-rgb), 0.10) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    transform: translateX(8px);
    box-shadow:
        0 6px 20px rgba(var(--accent-rgb), 0.25),
        0 3px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Reduce-effects mode keeps the sidebar hover/active highlight — the
   feedback matters for navigation — but only the CHEAP parts: a flat
   background + border-color change (the base already reserves a 1px
   transparent border, so no layout shift). The expensive full-effects
   bits (gradient, transform/translateX, multi-layer box-shadow) stay
   off so hovering doesn't trigger compositing/repaint churn. */
body.reduce-effects .nav-button:hover,
body.max-performance .nav-button:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body.reduce-effects .nav-button.active:hover,
body.max-performance .nav-button.active:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.nav-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
    transition: color 0.1s ease, opacity 0.1s ease;
    color: rgba(var(--accent-rgb), 0.7);
}

.nav-button.nav-downloads-active .nav-icon {
    animation: watchlist-scan-glow 1.2s ease-in-out infinite;
}

.nav-button.nav-downloads-active .nav-svg {
    animation: nav-downloads-svg 1.2s ease-in-out infinite;
}

@keyframes nav-downloads-svg {
    0%, 100% { opacity: 0.7; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(1px); filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.8)); }
}

.nav-button.nav-watchlist-scanning .nav-icon {
    animation: watchlist-scan-glow 1.6s ease-in-out infinite;
}

.nav-button.nav-watchlist-scanning .nav-svg {
    animation: watchlist-scan-svg 1.6s ease-in-out infinite;
}

@keyframes watchlist-scan-glow {
    0%, 100% {
        box-shadow:
            0 2px 4px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 6px rgba(var(--accent-rgb), 0.25);
        border-color: rgba(var(--accent-rgb), 0.2);
    }
    50% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            0 0 14px rgba(var(--accent-rgb), 0.55);
        border-color: rgba(var(--accent-rgb), 0.5);
    }
}

@keyframes watchlist-scan-svg {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.8)); }
}

.nav-button:hover .nav-icon {
    color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-button:hover .nav-svg {
    color: rgba(255, 255, 255, 0.95);
}

.nav-button.active .nav-icon {
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
}

.nav-button.active .nav-svg {
    color: rgba(var(--accent-light-rgb, var(--accent-rgb)), 1);
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}

.nav-text {
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
}

.nav-button:hover .nav-text {
    color: rgba(255, 255, 255, 0.95);
}

.nav-button.active .nav-text {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

/* Library breadcrumb — when on the artist-detail pseudo-page, the Library
   button label rewrites to "Library / <Artist>". The accent color stays on
   the "Library" root; the separator and artist name are dimmed so the
   anchor word remains scannable at a glance. JS truncates long names and
   sets the full name as a `title` attribute for hover. */
.nav-text[data-breadcrumb] {
    display: inline-flex;
    align-items: baseline;
    max-width: 100%;
    min-width: 0;
}
.nav-text[data-breadcrumb] .nav-text-root {
    color: inherit;
    flex-shrink: 0;
}
.nav-text[data-breadcrumb] .nav-text-sep {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    flex-shrink: 0;
}
.nav-button.active .nav-text[data-breadcrumb] .nav-text-sep {
    color: rgba(255, 255, 255, 0.45);
}
.nav-text[data-breadcrumb] .nav-text-context {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.nav-button.active .nav-text[data-breadcrumb] .nav-text-context {
    color: rgba(255, 255, 255, 0.85);
}

/* Sidebar Spacer */
.sidebar-spacer {
    flex: 1;
    min-height: 12px;
    position: relative;
}

/* Fade divider between nav and bottom content */
.sidebar-spacer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.06) 70%,
        transparent 100%
    );
}

/* ── Floating Mini Media Player — sits left of the activity/bell/help buttons ─ */
.media-player {
    position: fixed;
    bottom: 24px;
    right: 188px;   /* clears the 3-button row: help(24) · bell(80) · activity(136) */
    width: 340px;
    background: linear-gradient(180deg,
            rgba(24, 24, 24, 0.97) 0%,
            rgba(16, 16, 16, 0.99) 50%,
            rgba(10, 10, 10, 1.0) 100%);
    backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    z-index: 99998;
}

.media-player:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    border-top-color: rgba(var(--accent-rgb), 0.25);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(var(--accent-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hidden when nothing is playing — widget disappears entirely */
.media-player.idle {
    display: none;
}

/* Mini player body — horizontal: art | info | controls */
.mini-player-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 10px;
    cursor: pointer;
}

/* Compact prev/next nav buttons */
.mini-nav-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, background 0.18s ease;
    padding: 0;
    flex-shrink: 0;
}

.mini-nav-btn:hover:not(:disabled) {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

.mini-nav-btn:disabled {
    opacity: 0.22;
    cursor: not-allowed;
}

/* Mini shuffle / repeat toggle buttons (parity with the modal). Smaller than
   nav buttons; accent when active; repeat-one shows a tiny badge. */
.mini-toggle-btn {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.38);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, background 0.18s ease;
    padding: 0;
    flex-shrink: 0;
}
.mini-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
}
.mini-toggle-btn.active {
    color: rgb(var(--accent-light-rgb));
}
.mini-repeat-one {
    position: absolute;
    bottom: -1px;
    right: -1px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    background: rgb(var(--accent-light-rgb));
    color: #06140b;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Controls cluster in the mini player */
.mini-player-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* Top progress bar - flush full-width line at the very top of the mini player */
.player-top-progress {
    padding: 0;
}

.player-top-progress .progress-bar-container {
    position: relative;
    width: 100%;
    height: 14px;
}

.player-top-progress .progress-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
    transition: height 0.15s ease;
}

.player-top-progress:hover .progress-track {
    height: 4px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.player-top-progress .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background: transparent;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    z-index: 2;
    margin: 0;
}

.player-top-progress .progress-bar::-webkit-slider-track {
    width: 100%;
    height: 3px;
    background: transparent;
    border-radius: 2px;
}

.player-top-progress .progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
    opacity: 0;
}

.player-top-progress:hover .progress-bar::-webkit-slider-thumb {
    opacity: 1;
}

.player-top-progress .progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
}

.player-top-progress .progress-bar::-webkit-slider-thumb:active {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25);
}

/* Firefox progress bar styling */
.player-top-progress .progress-bar::-moz-range-track {
    width: 100%;
    height: 3px;
    background: transparent;
    border-radius: 2px;
    border: none;
}

.player-top-progress .progress-bar::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.player-top-progress:hover .progress-bar::-moz-range-thumb {
    opacity: 1;
}

/* Time display - left/right under progress */
.player-top-progress .time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.3px;
    padding: 0 1px;
    margin-top: -1px;
}

.current-time {
    min-width: 28px;
    text-align: left;
}

.total-time {
    min-width: 28px;
    text-align: right;
}

/* Loading Animation */
.loading-animation {
    height: 12px;
    margin: 8px 14px 4px;
    position: relative;
}

.loading-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.loading-text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 7px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    line-height: 8px;
}

/* Track info row — album art + text only, no controls competing for space */
.media-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 4px;
    cursor: pointer;
}

.sidebar-album-art {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.05);
    display: block;
}

.sidebar-album-art[src=""],
.sidebar-album-art:not([src]) {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.media-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.track-title {
    font-family: -apple-system, 'Segoe UI', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.1px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    transition: color 0.2s ease;
    position: relative;
    width: 100%;
}

.track-title .title-text {
    display: inline-block;
    transition: transform 0.3s ease;
}

.track-title.scrolling .title-text {
    animation: marquee-scroll 10s linear infinite;
    animation-delay: 1.5s;
}

.track-title.scrolling:hover .title-text {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0%  { transform: translateX(0px); }
    20% { transform: translateX(0px); }
    80% { transform: translateX(var(--scroll-distance)); }
    100%{ transform: translateX(var(--scroll-distance)); }
}

.track-title:hover {
    color: rgb(var(--accent-light-rgb));
}

.artist-name {
    font-family: -apple-system, 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.album-name.header-album {
    font-family: -apple-system, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-style: normal;
}

/* Controls row — always visible below track info */
.media-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 14px 10px;
}

/* Play Button */
.play-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgb(var(--accent-light-rgb));
    border: none;
    color: #000000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
}

.play-button svg {
    width: 14px;
    height: 14px;
}

.play-button:hover:not(:disabled) {
    background: #1fdf64;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}

.play-button:active:not(:disabled) {
    transform: scale(0.95);
}

.play-button:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
    box-shadow: none;
}

/* Volume control in controls row */
.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.volume-icon {
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.volume-icon svg {
    width: 13px;
    height: 13px;
}

.volume-slider {
    width: 100%;
    height: 16px;
    background: transparent;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.6) var(--volume-percent, 70%),
        rgba(255, 255, 255, 0.08) var(--volume-percent, 70%),
        rgba(255, 255, 255, 0.08) 100%);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -3.5px;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    opacity: 0;
}

.volume-control:hover .volume-slider::-webkit-slider-thumb {
    opacity: 1;
}

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

/* Firefox volume slider */
.volume-slider::-moz-range-track {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
}

.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Stop button */
.stop-button {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.stop-button svg {
    width: 10px;
    height: 10px;
}

.stop-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.stop-button:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.stop-button:disabled {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.12);
    cursor: not-allowed;
}

/* Expand hint chevron — subtle indicator to open NP modal */
.expand-hint {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.expand-hint:hover {
    color: rgba(255, 255, 255, 0.45);
}

/* Expanded section (kept for backward compat) */
.media-expanded {
    display: none;
}

/* No track empty state */
.no-track-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    padding: 20px 16px;
    letter-spacing: 0.2px;
    font-family: -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.4;
}

.no-track-icon {
    opacity: 0.6;
}

/* Crypto Donation Section */
/* Support Button */
.support-section {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 14px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.support-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 5px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.support-button:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Support Modal */
.support-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.support-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.support-modal {
    background: linear-gradient(165deg, #1e1e1e 0%, #161616 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 420px;
    max-width: 90vw;
    padding: 40px 36px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
    position: relative;
}

.support-modal-overlay.hidden .support-modal {
    transform: scale(0.9);
}

.support-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.support-modal-close-btn:hover {
    color: rgba(255, 255, 255, 0.7);
}

.support-modal-logo {
    margin-bottom: 20px;
}

.support-modal-logo-img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.support-modal-title {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 60%, rgb(var(--accent-rgb)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
    margin: 0;
}

.support-modal-message {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 28px 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.support-modal-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.support-link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.support-link-kofi {
    background: rgba(255, 95, 95, 0.12);
    color: #ff5f5f;
    border-color: rgba(255, 95, 95, 0.2);
}

.support-link-kofi:hover {
    background: rgba(255, 95, 95, 0.2);
    border-color: rgba(255, 95, 95, 0.35);
    box-shadow: 0 4px 20px rgba(255, 95, 95, 0.15);
}

.support-link-btc {
    background: rgba(247, 147, 26, 0.1);
    color: #f7931a;
    border-color: rgba(247, 147, 26, 0.18);
}

.support-link-btc:hover {
    background: rgba(247, 147, 26, 0.18);
    border-color: rgba(247, 147, 26, 0.3);
    box-shadow: 0 4px 20px rgba(247, 147, 26, 0.12);
}

.support-link-eth {
    background: rgba(98, 126, 234, 0.1);
    color: #627eea;
    border-color: rgba(98, 126, 234, 0.18);
}

.support-link-eth:hover {
    background: rgba(98, 126, 234, 0.18);
    border-color: rgba(98, 126, 234, 0.3);
    box-shadow: 0 4px 20px rgba(98, 126, 234, 0.12);
}

/* Version Section */
.version-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    margin: 0 14px;
}

.version-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.version-button:hover {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
}

.version-button:active {
    background: rgba(var(--accent-rgb), 0.12);
    transform: scale(0.97);
}

/* ========================================= */
/* INTERACTIVE HELPER SYSTEM                */
/* ========================================= */

/* (Sidebar helper button removed — using floating button instead) */

/* Floating helper button — always visible, always above everything */
/* ── Floating Help Button ─────────────────────────────────────────────── */

.helper-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(30, 30, 30, 0.9) 60%);
    border: 1.5px solid rgba(var(--accent-rgb), 0.25);
    color: rgba(255, 255, 255, 0.75);
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(var(--accent-rgb), 0), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(16px);
}

.helper-float-btn span {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    display: block;
}

/* Subtle idle glow for users who haven't opened help yet */
.helper-float-btn.undiscovered {
    animation: helperIdleGlow 3s ease-in-out infinite;
}

@keyframes helperIdleGlow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(var(--accent-rgb), 0), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--accent-rgb), 0.25);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--accent-rgb), 0.5);
    }
}

.helper-float-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(30, 30, 30, 0.95) 60%);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.helper-float-btn.active {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.7));
    border-color: rgb(var(--accent-rgb));
    color: #fff;
    box-shadow: 0 6px 32px rgba(var(--accent-rgb), 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: helperFloatPulse 2s ease-in-out infinite;
}

.helper-float-btn.menu-open {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(40, 40, 40, 0.95) 60%);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: #fff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--accent-rgb), 0.12);
}

.helper-float-btn.menu-open span {
    transform: rotate(90deg) scale(0.9);
    opacity: 0.9;
}

.helper-float-btn.active span {
    transform: scale(1.05);
}

@keyframes helperFloatPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); }
    50% { box-shadow: 0 4px 32px rgba(var(--accent-rgb), 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); }
}

/* ── Helper Menu (unified card) ──────────────────────────────────────── */

.helper-menu {
    position: fixed;
    z-index: 999998;
    background: rgba(14, 14, 14, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 6px;
    backdrop-filter: blur(24px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.helper-menu.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.helper-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.12s ease;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
    animation: helperMenuItemIn 0.2s ease backwards;
}

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

.helper-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.helper-menu-icon {
    font-size: 15px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.helper-menu-label {
    flex: 1;
}

/* Contextual tour suggestion (top of menu) */
.helper-menu-contextual {
    background: rgba(var(--accent-rgb), 0.08) !important;
    border-color: rgba(var(--accent-rgb), 0.15) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden;
}

.helper-menu-contextual::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: rgb(var(--accent-rgb));
}

.helper-menu-contextual:hover {
    background: rgba(var(--accent-rgb), 0.15) !important;
    border-color: rgba(var(--accent-rgb), 0.3) !important;
}

.helper-menu-badge {
    font-size: 10px;
    font-weight: 700;
    color: rgba(var(--accent-rgb), 0.6);
    margin-left: auto;
    padding-left: 8px;
}

.helper-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 3px 8px;
}

/* Tour Overlay (spotlight) */
/* Spotlight scrim: four panels around a REAL hole. A single overlay with a
   z-index-raised target failed whenever the target sat inside an ancestor
   stacking context (transform / backdrop-filter) — it stayed dimmed+blurred. */
.helper-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    animation: tourOverlayIn 0.3s ease;
}

.helper-tour-scrim {
    position: absolute;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}

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

.helper-tour-target {
    /* glow ring only — the scrim hole does the revealing now, so no
       z-index games (they broke inside stacking contexts anyway) */
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.15) !important;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
    animation: tourTargetPulse 2s ease-in-out infinite;
}

@keyframes tourTargetPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.15) !important; }
    50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.3), 0 0 40px rgba(var(--accent-rgb), 0.25) !important; }
}

/* Tour Popover additions */
.helper-tour-popover {
    z-index: 100001 !important;
}

/* Tour progress bar */
.helper-tour-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.helper-tour-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.helper-tour-step-counter {
    font-size: 10px;
    font-weight: 700;
    color: rgba(var(--accent-rgb), 0.7);
    letter-spacing: 0.04em;
    padding: 10px 16px 0;
}

.helper-tour-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 14px;
    gap: 8px;
}

.helper-tour-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.helper-tour-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.helper-tour-btn-next {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-rgb));
}

.helper-tour-btn-next:hover {
    background: rgba(var(--accent-rgb), 0.35);
    color: #fff;
}

.helper-tour-btn-skip {
    color: rgba(255, 255, 255, 0.35);
    border-color: transparent;
    background: transparent;
}

.helper-tour-btn-skip:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Tour Selector */
.helper-tour-selector {
    max-width: 360px;
    width: 360px;
}

.helper-tour-list {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.helper-tour-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.helper-tour-option-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.helper-tour-option-body {
    flex: 1;
    min-width: 0;
}

.helper-tour-option:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
}

.helper-tour-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.helper-tour-option-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.helper-tour-option-steps {
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.7);
    font-weight: 600;
}

/* Help mode — cursor + hover highlights */
body.helper-mode-active {
    cursor: help;
}

body.helper-mode-active * {
    cursor: help !important;
}

/* Highlight on hoverable elements in help mode */
body.helper-mode-active .nav-button:hover,
body.helper-mode-active .tool-card:hover,
body.helper-mode-active .service-card:hover,
body.helper-mode-active .stat-card:hover,
body.helper-mode-active .version-button:hover,
body.helper-mode-active .support-button:hover,
body.helper-mode-active .status-indicator:hover,
body.helper-mode-active #media-player:hover,
body.helper-mode-active #dashboard-activity-feed:hover {
    outline: 2px solid rgba(var(--accent-rgb), 0.4) !important;
    outline-offset: 2px;
}

/* Active highlight on clicked element */
.helper-highlight {
    outline: 2px solid rgb(var(--accent-rgb)) !important;
    outline-offset: 3px;
    animation: helperHighlightPulse 1.5s ease-in-out infinite;
}

@keyframes helperHighlightPulse {
    0%, 100% { outline-color: rgba(var(--accent-rgb), 0.8); }
    50% { outline-color: rgba(var(--accent-rgb), 0.4); }
}

/* Popover */
.helper-popover {
    position: fixed;
    z-index: 100000;
    max-width: 340px;
    min-width: 240px;
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: scale(0.95) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: auto;
}

.helper-popover.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.helper-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 0;
}

.helper-popover-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}

.helper-popover-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s ease;
}

.helper-popover-close:hover {
    color: #fff;
}

.helper-popover-desc {
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.helper-popover-tips {
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.helper-popover-tip {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    padding-left: 20px;
    position: relative;
}

.helper-popover-tip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.5);
}

/* Docs link */
.helper-popover-docs {
    padding: 0 16px 14px;
}

.helper-popover-docs a {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 0.8);
    text-decoration: none;
    transition: color 0.15s ease;
}

.helper-popover-docs a:hover {
    color: rgb(var(--accent-rgb));
}

/* Arrow */
.helper-popover-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: rotate(45deg);
}

.helper-popover-arrow.arrow-left {
    left: -6px;
    top: 50%;
    margin-top: -5px;
    border-right: none;
    border-top: none;
}

.helper-popover-arrow.arrow-right {
    right: -6px;
    top: 50%;
    margin-top: -5px;
    border-left: none;
    border-bottom: none;
}

.helper-popover-arrow.arrow-top {
    top: -6px;
    left: 50%;
    margin-left: -5px;
    border-bottom: none;
    border-right: none;
}

/* Mobile */
@media (max-width: 768px) {
    .helper-popover {
        max-width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px;
    }

    .helper-popover-arrow {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HELPER V2 — PHASES 2-7 STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Quick Action Buttons (Phase 3) ──────────────────────────────────────── */

.helper-popover-actions {
    display: flex;
    gap: 6px;
    padding: 0 16px 12px;
    flex-wrap: wrap;
}

.helper-action-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.helper-action-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
}

/* ── Setup Progress Panel (Phase 2) ──────────────────────────────────────── */

.helper-setup-panel {
    position: fixed;
    right: 24px;
    bottom: 80px;
    width: 380px;
    max-height: 80vh;
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    z-index: 100000;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.helper-setup-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.helper-setup-header {
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.helper-setup-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.helper-setup-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.helper-setup-ring-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.helper-setup-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.helper-setup-ring-svg {
    width: 52px;
    height: 52px;
    transform: rotate(-90deg);
}

.helper-setup-ring-progress {
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.helper-setup-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: rgb(var(--accent-rgb));
}

.helper-setup-count {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.helper-setup-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.helper-setup-list {
    overflow-y: auto;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.helper-setup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.15s ease;
}

.helper-setup-item:hover:not(.done) {
    background: rgba(var(--accent-rgb), 0.05);
    border-color: rgba(var(--accent-rgb), 0.15);
}

.helper-setup-item.done {
    opacity: 0.5;
}

.helper-setup-check {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.helper-setup-item.done .helper-setup-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    font-size: 13px;
    font-weight: 700;
}

.helper-setup-body {
    flex: 1;
    min-width: 0;
}

.helper-setup-item-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.helper-setup-item-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.helper-setup-go {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.08);
    color: rgb(var(--accent-rgb));
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.helper-setup-go:hover {
    background: rgba(var(--accent-rgb), 0.2);
    color: #fff;
}

.helper-setup-done {
    padding: 16px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #4caf50;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.helper-setup-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 36px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

/* ── Keyboard Shortcuts Overlay (Phase 4) ────────────────────────────────── */

.helper-shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.helper-shortcuts-overlay.visible {
    opacity: 1;
}

.helper-shortcuts-panel {
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 28px 32px;
    min-width: 480px;
    max-width: 640px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(24px);
}

.helper-shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}

.helper-shortcuts-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.helper-shortcuts-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.helper-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.helper-shortcuts-scope {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--accent-rgb), 0.7);
    margin-bottom: 10px;
}

.helper-shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.helper-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom-width: 3px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.helper-shortcut-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Search Panel (Phase 5) ──────────────────────────────────────────────── */

.helper-search-panel {
    position: fixed;
    z-index: 100000;
    width: 400px;
    max-height: 480px;
    background: rgba(16, 16, 16, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.helper-search-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.helper-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.helper-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0 14px;
}

.helper-search-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.helper-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    font-family: inherit;
}

.helper-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.helper-search-results {
    overflow-y: auto;
    padding: 6px;
    flex: 1;
    min-height: 0;
}

.helper-search-hint {
    padding: 20px 16px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
}

.helper-search-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.12s ease;
    width: 100%;
    text-align: left;
}

.helper-search-result:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.helper-search-result-type {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

.helper-search-result-body {
    flex: 1;
    min-width: 0;
}

.helper-search-result-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.helper-search-result-title mark {
    background: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
    border-radius: 2px;
    padding: 0 1px;
}

.helper-search-result-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── What's New Panel (Phase 6) ──────────────────────────────────────────── */

.helper-whats-new-panel {
    width: 380px;
    max-width: 380px;
    max-height: 70vh;
    overflow-y: auto;
}

.helper-whats-new-list {
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.helper-whats-new-item {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.15s ease;
}

.helper-whats-new-item.clickable {
    cursor: pointer;
}

.helper-whats-new-item.clickable:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: rgba(var(--accent-rgb), 0.15);
}

.helper-whats-new-date {
    font-size: 11px;
    font-weight: 600;
    color: rgba(138, 43, 226, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.helper-whats-new-date:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.helper-whats-new-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.helper-whats-new-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 3px;
    line-height: 1.4;
}

.helper-whats-new-show {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 0.7);
}

.helper-whats-new-item.clickable:hover .helper-whats-new-show {
    color: rgb(var(--accent-rgb));
}

.helper-whats-new-footer {
    display: flex;
    gap: 8px;
    padding: 8px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── What's New Badge ───────────────────────────────────────────────────── */

.helper-float-btn.has-badge::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5252;
    border: 2px solid rgba(16, 16, 16, 0.95);
    animation: helperBadgePulse 2s ease-in-out infinite;
}

@keyframes helperBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ── Troubleshoot Mode (Phase 7) ─────────────────────────────────────────── */

.helper-troubleshoot-target {
    animation: troubleshootPulse 1.5s ease-in-out infinite;
    outline: 2px solid rgba(255, 82, 82, 0.6) !important;
    outline-offset: 3px;
    position: relative;
    z-index: 10;
}

@keyframes troubleshootPulse {
    0%, 100% { outline-color: rgba(255, 82, 82, 0.6); }
    50% { outline-color: rgba(255, 82, 82, 0.2); }
}

.helper-troubleshoot-panel {
    width: 400px;
    max-width: 400px;
    max-height: 70vh;
    overflow-y: auto;
}

.helper-troubleshoot-clear {
    padding: 24px 20px 28px;
    text-align: center;
}

.helper-troubleshoot-clear-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.helper-troubleshoot-clear-text {
    font-size: 18px;
    font-weight: 800;
    color: #4caf50;
    margin-bottom: 6px;
}

.helper-troubleshoot-clear-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}

.helper-troubleshoot-list {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.helper-troubleshoot-issue {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 82, 82, 0.04);
    border: 1px solid rgba(255, 82, 82, 0.12);
}

.helper-troubleshoot-issue-title {
    font-size: 14px;
    font-weight: 700;
    color: #ff8a80;
    margin-bottom: 8px;
}

.helper-troubleshoot-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.helper-troubleshoot-step {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* ── First-Launch Welcome (Setup) ────────────────────────────────────────── */

.helper-float-btn.first-launch-pulse {
    animation: firstLaunchPulse 1.5s ease-in-out infinite;
}

@keyframes firstLaunchPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3), 0 0 0 0 rgba(var(--accent-rgb), 0.4); }
    50% { box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.5), 0 0 0 8px rgba(var(--accent-rgb), 0); }
}

.helper-first-launch-tip {
    position: fixed;
    bottom: 34px;
    /* Clear the ? float button (right:24 + 48 wide → left edge ~72px from the
       right) AND its 8px pulse ring, with margin, so the tip never covers the
       button (#817). Was 84px — only ~4px off the pulse ring, so they touched. */
    right: 96px;
    padding: 8px 16px;
    background: rgba(16, 16, 16, 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    z-index: 999999;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: firstLaunchTipIn 0.4s ease backwards 0.5s;
    transition: opacity 0.5s ease;
    white-space: nowrap;
}

.helper-first-launch-tip:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: #fff;
}

.helper-first-launch-tip.fading {
    opacity: 0;
}

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

/* ── Mobile overrides for helper V2 ──────────────────────────────────────── */

@media (max-width: 768px) {
    .helper-setup-panel {
        right: 8px;
        left: 8px;
        bottom: 72px;
        width: auto;
    }

    .helper-search-panel {
        right: 8px !important;
        left: 8px;
        bottom: 72px !important;
        width: auto;
    }

    .helper-shortcuts-panel {
        min-width: unset;
        max-width: calc(100vw - 32px);
        padding: 20px;
    }

    .helper-shortcuts-grid {
        grid-template-columns: 1fr;
    }

    .helper-whats-new-panel,
    .helper-troubleshoot-panel {
        width: auto;
        max-width: calc(100vw - 24px);
    }

    .helper-first-launch-tip {
        right: 12px;
        bottom: 72px;
    }
}

.version-button.update-available {
    /* --upd-rgb picks the severity color (Kazimir's ask):
       green = routine release, yellow = major, red = critical. */
    --upd-rgb: var(--accent-rgb);
    color: rgb(var(--upd-rgb));
    border-color: rgba(var(--upd-rgb), 0.4);
    animation: version-glow 2s ease-in-out infinite;
    position: relative;
}

.version-button.update-available--update { --upd-rgb: 46, 204, 113; }
.version-button.update-available--major { --upd-rgb: 241, 196, 15; }
.version-button.update-available--critical { --upd-rgb: 231, 76, 60; animation-duration: 1.1s; }

.version-button.update-available .update-badge {
    display: inline-block;
    margin-left: 5px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: rgb(var(--upd-rgb, var(--accent-rgb)));
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    vertical-align: middle;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

@keyframes version-glow {
    0%, 100% {
        box-shadow: 0 0 4px rgba(var(--upd-rgb, var(--accent-rgb)), 0.2), 0 0 8px rgba(var(--upd-rgb, var(--accent-rgb)), 0.1);
        border-color: rgba(var(--upd-rgb, var(--accent-rgb)), 0.3);
    }
    50% {
        box-shadow: 0 0 8px rgba(var(--upd-rgb, var(--accent-rgb)), 0.5), 0 0 20px rgba(var(--upd-rgb, var(--accent-rgb)), 0.3), 0 0 30px rgba(var(--upd-rgb, var(--accent-rgb)), 0.1);
        border-color: rgba(var(--upd-rgb, var(--accent-rgb)), 0.6);
    }
}

/* Update banner inside version modal */
.version-update-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 20px 0;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1px;
}

.version-update-banner-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.version-update-banner-text {
    flex: 1;
}

.version-update-banner-text strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #fff;
}

.version-update-banner-text span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 400;
}

/* Status Section - Premium Glassmorphic Design */
.status-section {
    height: fit-content;
    background: linear-gradient(180deg,
            rgba(18, 18, 18, 0.95) 0%,
            rgba(14, 14, 14, 0.98) 100%);
    backdrop-filter: blur(8px) saturate(1.1);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom-right-radius: 20px;
    border-radius: 12px;
    margin: 8px 14px 14px 14px;
    padding: 16px 0 12px 0;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.status-title {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 20px 10px 20px;
    margin-bottom: 4px;
}

.status-indicator {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    border-radius: 8px;
    margin: 0 8px;
    transition: background 0.2s ease;
}

.status-indicator:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Sidebar service-test buttons — the dashboard Services card retired; a
   live connection test rides each Service Status row instead. Near-
   invisible until the row is hovered so the sidebar stays calm; always
   faintly visible on touch (no hover to reveal them). */
.status-test-btn {
    margin-left: auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    opacity: 0.25;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.status-indicator:hover .status-test-btn { opacity: 1; }
.status-test-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
@media (hover: none) {
    .status-test-btn { opacity: 0.6; }
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    position: relative;
    flex-shrink: 0;
}

.status-dot.connected {
    background: rgb(var(--accent-light-rgb));
    border: none;
    box-shadow:
        0 0 6px rgba(var(--accent-rgb), 0.6),
        0 0 12px rgba(var(--accent-rgb), 0.3);
    animation: status-pulse-green 3s ease-in-out infinite;
}

.status-dot.connected::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--accent-rgb), 0.3);
    animation: status-ring-pulse 3s ease-in-out infinite;
}

@keyframes status-pulse-green {
    0%, 100% {
        box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6), 0 0 12px rgba(var(--accent-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8), 0 0 20px rgba(var(--accent-rgb), 0.4);
    }
}

@keyframes status-ring-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.status-dot.disconnected {
    background: rgba(255, 80, 80, 0.7);
    border: none;
    box-shadow: 0 0 4px rgba(255, 80, 80, 0.3);
}

.status-dot.disconnected::before {
    content: '';
}

.status-dot.fallback {
    background: rgba(245, 166, 35, 0.7);
    border: none;
    box-shadow: 0 0 4px rgba(245, 166, 35, 0.3);
}

.status-dot.rate-limited {
    background: rgba(250, 204, 21, 0.8);
    border: none;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
    animation: status-pulse-amber 3s ease-in-out infinite;
}

.status-dot.rate-limited::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(250, 204, 21, 0.3);
    animation: status-ring-pulse 3s ease-in-out infinite;
}

@keyframes status-pulse-amber {
    0%, 100% { box-shadow: 0 0 6px rgba(250, 204, 21, 0.4), 0 0 12px rgba(250, 204, 21, 0.2); }
    50% { box-shadow: 0 0 8px rgba(250, 204, 21, 0.6), 0 0 20px rgba(250, 204, 21, 0.3); }
}

.status-indicator:has(.rate-limited) .status-name {
    color: rgba(250, 204, 21, 0.9);
    font-weight: 500;
}

.status-name {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2px;
    min-width: 85px;
    transition: color 0.2s ease;
}

.status-indicator:has(.connected) .status-name {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.status-indicator:has(.disconnected) .status-name {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.status-indicator[data-status-ready="false"] .status-dot,
.status-indicator[data-status-ready="false"] .status-name,
.service-card[data-status-ready="false"] .service-card-title,
.service-card[data-status-ready="false"] .service-card-indicator,
.service-card[data-status-ready="false"] .service-card-status-text,
.service-card[data-status-ready="false"] .service-card-response-time {
    visibility: hidden;
}

#metadata-source-service-card[data-status-ready="false"] .service-card-button {
    visibility: hidden;
}

/* =====================================
   MAIN CONTENT AREA STYLING  
   ===================================== */

.main-content {
    flex: 1;
    /* Flat solid background — NOT a gradient. A gradient on the scroll container
       has to be re-rastered across the whole scrolled area on every scroll frame
       (the compositor can't just translate a cached tile), which caused the
       dominant scroll jank (~25% dropped frames -> <1% once flattened, measured).
       A solid color is drawn as a single compositor quad, no per-frame raster.
       The gradient was rgb 10->15->11, visually indistinguishable from this. */
    background: rgb(12, 12, 12);
    overflow: auto;
    position: relative;
}

/* Global page particles canvas — sits behind all page content */
#page-particles-canvas {
    position: fixed;
    top: 0;
    left: var(--sidebar-w); /* sidebar width */
    right: 0;
    bottom: 0;
    width: calc(100vw - var(--sidebar-w));
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.page {
    position: relative;
    z-index: 1;
    display: none;
    height: 100%;
    padding: 40px;
    padding-bottom: 90px;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.page-header h2 {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-header h2 > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

/* Dashboard Page Styling */
.dashboard-content {
    display: flex;
    gap: 40px;
    height: calc(100vh - 150px);
}

.activity-section {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-section h3 {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.activity-feed {
    max-height: 400px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.activity-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 80px;
}

.activity-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
}

.activity-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 8px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 300px;
}

.stat-card {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.stat-value {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: rgb(var(--accent-light-rgb));
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* ======================================
   SETTINGS PAGE - Premium Glassmorphic Design
   ====================================== */

/* Custom scrollbar */
#settings-page {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}

#settings-page::-webkit-scrollbar {
    width: 6px;
}

#settings-page::-webkit-scrollbar-track {
    background: transparent;
}

#settings-page::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

#settings-page::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

.settings-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 4px;
}

.settings-columns {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.settings-left-column,
.settings-right-column,
.settings-third-column {
    flex: 1;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Glassmorphic cards */
/* Collapsible settings section headers */
.settings-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 4px;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s;
    user-select: none;
}

.settings-section-header:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.settings-section-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
}

.settings-section-arrow {
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.7);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.settings-section-header.collapsed .settings-section-arrow {
    transform: rotate(-90deg);
}

.settings-section-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
}

.settings-section-body {
    transition: all 0.2s ease;
    /* Breathing room before the next tile header so an expanded tile's last
       control (e.g. "+ Add Path") never sits flush against the next section. */
    margin-bottom: 18px;
}

.settings-section-body.collapsed {
    display: none;
    margin-bottom: 0;
}

.settings-experimental-break {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 20px;
    padding: 0 4px;
    user-select: none;
}

.settings-experimental-break__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 166, 35, 0.55) 20%,
        rgba(245, 166, 35, 0.55) 80%,
        transparent
    );
}

.settings-experimental-break__label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 180, 80, 0.92);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(245, 166, 35, 0.35);
    background: rgba(245, 166, 35, 0.08);
}

.settings-experimental-intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.experimental-enable-modal .confirm-modal-content p {
    margin: 0 0 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

.experimental-enable-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    margin: 0;
}

.experimental-enable-ack input {
    width: auto;
    margin: 3px 0 0;
    flex-shrink: 0;
}

#experimental-enable-confirm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.settings-group {
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.6), rgba(20, 20, 20, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(var(--accent-rgb), 0.6) 0%,
            rgba(var(--accent-rgb), 0.2) 50%,
            transparent 100%);
}

.settings-group:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--accent-rgb), 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.settings-group h3 {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 14px;
    margin-top: 6px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-group h3::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10px;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(var(--accent-rgb), 0.7) 0%,
            transparent 100%);
}

/* API Service Frames - upgraded inner cards */
.api-service-frame {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px 14px 14px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.api-service-frame:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.service-title {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.spotify-title {
    color: rgb(var(--accent-rgb));
}

.tidal-title {
    color: #ff6600;
}

.soulseek-title {
    color: #5dade2;
}

.listenbrainz-title {
    color: #eb743b;
}

/* Indexers & Downloaders tab — service title colors */
.prowlarr-title {
    color: #e07712;          /* Prowlarr brand orange */
}

.torrent-title {
    color: #5dade2;          /* Torrent — sky blue (qBit family) */
}

.usenet-title {
    color: #a78bfa;          /* Usenet — violet */
}

.ind-hero-warning {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.ind-hero-warning-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.ind-hero-warning-body {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
}

.ind-hero-warning-body ul {
    margin: 6px 0 0 18px;
    padding: 0;
}

.ind-hero-warning-body li {
    margin: 3px 0;
}

.ind-hero-warning-body code {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11.5px;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
}

/* Section-header status dots — Lidarr-style green/red/grey indicator */
.ind-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-left: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.ind-status-dot-unknown {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.ind-status-dot-connected {
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6), 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.ind-status-dot-error {
    background: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5), 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Indexer list — card-per-indexer, Lidarr-style */
.ind-indexer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.ind-indexer-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.ind-indexer-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.ind-indexer-card-id {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ind-indexer-card-name {
    flex: 1;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.ind-indexer-card-proto {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.ind-indexer-card-proto-torrent {
    background: rgba(93, 173, 226, 0.15);
    color: #5dade2;
    border: 1px solid rgba(93, 173, 226, 0.3);
}

.ind-indexer-card-proto-usenet {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.ind-indexer-card-privacy {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.ind-indexer-card-disabled {
    opacity: 0.45;
}

.acoustid-title {
    color: #ba55d3;
}

.lastfm-title {
    color: #d51007;
}

.genius-title {
    color: #ffff64;
}

/* Server Toggle Buttons - upgraded */
.server-toggle-container {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.server-toggle-btn {
    flex: 1;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-direction: column;
}

.server-logo {
    width: 100%;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.server-toggle-btn.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-light-rgb), 0.12) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.server-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
}

.server-toggle-btn:hover .server-logo {
    opacity: 1.0;
}

.server-toggle-btn.active:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.28) 0%,
            rgba(var(--accent-light-rgb), 0.18) 100%);
}

/* SoulSync standalone info section */
.soulsync-standalone-info {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 10px;
    margin-bottom: 14px;
}

.soulsync-standalone-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.soulsync-standalone-text h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.soulsync-standalone-text p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

.server-toggle-btn.active .server-logo {
    opacity: 1.0;
}

.server-config-container {
    padding-top: 8px;
}

/* Callback Info Styling */
.callback-info {
    margin: 8px 0;
}

.callback-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 500;
    margin-top: 8px;
    margin-bottom: 4px;
}

.callback-url {
    color: rgb(var(--accent-rgb));
    font-size: 11px;
    font-family: 'SF Mono', 'Courier New', monospace;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.04));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    user-select: all;
    cursor: text;
}

.callback-help {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-style: italic;
    line-height: 1.4;
}

.setting-help-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    margin-top: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-left: 2px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
}

/* Form Styling - glassmorphic inputs */
.form-group {
    margin-bottom: 12px;
}

.form-group small,
.settings-group small,
.settings-hint {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
    margin-top: 5px;
    padding-left: 1px;
}

.form-group {
    option {
        color: black;

        &:hover {
            color: white;
        }
    }
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

.form-group input:not([type="checkbox"]):not([type="color"]),
.form-group select {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #ffffff;
    font-size: 12px;
    transition: all 0.25s ease;
}

.form-group input:not([type="checkbox"]):hover,
.form-group select:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.form-group input:not([type="checkbox"]):not([type="color"]):focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 0 12px rgba(var(--accent-rgb), 0.06);
}

.form-group input:not([type="checkbox"])::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

/* Checkbox Styling — toggle switch */
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 500;
    margin-bottom: 0 !important;
    padding: 6px 0;
    transition: color 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
}

.checkbox-label:hover {
    color: rgba(255, 255, 255, 1);
}

.checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 34px !important;
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    top: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.checkbox-label input[type="checkbox"]:checked {
    background: rgba(var(--accent-rgb), 0.5);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.checkbox-label input[type="checkbox"]:checked::before {
    transform: translateX(16px);
    background: rgb(var(--accent-light-rgb));
}

/* Accent Color Selector */
.accent-color-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accent-color-selector select {
    flex: 1;
}

.accent-preview-swatch {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgb(var(--accent-rgb));
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(var(--accent-rgb), 0.3);
    transition: all 0.3s ease;
}

#custom-color-group input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    padding: 2px;
}

#custom-color-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

#custom-color-group input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

/* Help Text */
.help-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-style: italic;
    line-height: 1.4;
    margin-top: 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Setting label + inline ⓘ info icon. The icon sits on the (fixed) label row;
   clicking it only toggles the help text below, so the trigger never moves. */
.setting-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* Kill the default .form-group label margin-bottom so the label centers on the
   icon row instead of sitting high. */
.setting-row > label { margin: 0; }
/* Field-heading labels (e.g. "Search strategy") sit next to a 12px control and
   the brighter checkbox labels — match that weight/brightness so they don't look
   dim or undersized. */
.setting-row > label:not(.checkbox-label) {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}
/* Supported Formats */
.supported-formats {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.02));
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 8px;
    padding: 6px 10px;
}

/* Post-Processing Settings */
.post-processing-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.post-processing-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(var(--accent-rgb), 0.8);
    margin-bottom: 10px;
}

.post-processing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
/* Tag service group accordion */
.tag-service-group {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
}
.tag-service-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.15s;
    user-select: none;
}
.tag-service-header:hover {
    background: rgba(255, 255, 255, 0.04);
}
.tag-group-arrow {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.15s;
    flex-shrink: 0;
    width: 12px;
}
.tag-group-arrow.open {
    transform: rotate(90deg);
}
.tag-service-header .checkbox-label {
    margin: 0;
    font-weight: 500;
    font-size: 13px;
}
.tag-service-count {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.4;
}
.tag-service-body {
    padding: 6px 12px 10px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tag-service-body .checkbox-label {
    font-size: 12px;
    margin-bottom: 3px;
}
.tag-service-body .checkbox-label input[type="checkbox"] {
    margin-right: 6px;
}
.tag-service-body .checkbox-label.disabled-tag {
    opacity: 0.35;
    pointer-events: none;
}
.tag-embed-desc {
    display: block;
    width: 100%;
    font-size: 0.75em;
    opacity: 0.5;
    margin-top: -2px;
    margin-left: 22px;
}

/* Read-only Fields */
.readonly-field {
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-family: 'SF Mono', 'Courier New', monospace;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Buttons - gradient + elevation */
.test-button,
.detect-button {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.test-button:hover,
.detect-button:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}

/* ===== QUALITY PROFILE STYLES ===== */

.quality-presets {
    margin-bottom: 20px;
}

.quality-presets label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
}

.preset-buttons {
    display: flex;
    gap: 8px;
}

.preset-button {
    flex: 1;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.preset-button:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}

.preset-button.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-light-rgb), 0.12) 100%);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: rgb(var(--accent-light-rgb));
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}

/* Presets footer: explanation on the left, a tidy Reset button on the right */
.quality-presets-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.preset-reset-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.preset-reset-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: rgb(var(--accent-light-rgb));
}
.preset-reset-icon {
    font-size: 13px;
    line-height: 1;
}

/* Quality tab: the settings tiles stay exactly on the normal centered 920px
   settings column. On wide screens only the profile panel protrudes into the
   empty right margin, so the Quality tab lines up with the other tabs. */
.qp-layout {
    --qp-side-width: 320px;
    --qp-side-gap: 8px;
    display: flex;
    align-items: flex-start;
    gap: var(--qp-side-gap);
    width: calc(100% + var(--qp-side-width) + var(--qp-side-gap));
    overflow: visible;
}

.qp-main {
    flex: 0 0 calc(100% - var(--qp-side-width) - var(--qp-side-gap));
    width: calc(100% - var(--qp-side-width) - var(--qp-side-gap));
    min-width: 0;
    max-width: calc(100% - var(--qp-side-width) - var(--qp-side-gap));
}

.qp-side-panel {
    width: var(--qp-side-width);
    flex-shrink: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 4px 0 22px;
    margin-left: 0;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.qp-side-panel::-webkit-scrollbar { width: 7px; }
.qp-side-panel::-webkit-scrollbar-track { background: transparent; }
.qp-side-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.qp-side-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

.qp-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.qp-side-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    white-space: nowrap;
}

.qp-manage-btn {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 7px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.09);
    color: rgba(var(--accent-light-rgb), 0.86);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.qp-manage-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.42);
    background: rgba(var(--accent-rgb), 0.15);
}

.qp-side-panel-hint {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 14px;
}

.qp-editing-banner {
    font-size: 11px;
    line-height: 1.5;
    padding: 8px 10px;
    margin: -6px 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(245, 191, 66, 0.35);
    background: rgba(245, 191, 66, 0.08);
    color: rgba(255, 255, 255, 0.68);
}
.qp-editing-banner-name {
    color: rgb(245, 191, 66);
}

.qp-profile-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qp-profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.qp-profile-row:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}

.qp-profile-row.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-light-rgb), 0.12) 100%);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}

/* Currently loaded into the tile editor for viewing/editing, but NOT the
   active default — deliberately a different (amber) accent from .active
   (accent-colored = live) so the two states are never visually confused. */
.qp-profile-row.editing {
    border-color: rgba(245, 191, 66, 0.5);
    background: linear-gradient(135deg, rgba(245, 191, 66, 0.1) 0%, rgba(245, 191, 66, 0.03) 100%);
}

.qp-profile-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
}
.qp-profile-row.active .qp-profile-dot {
    background: rgb(var(--accent-light-rgb));
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
}

.qp-profile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}

.qp-profile-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}
.qp-profile-row.active .qp-profile-name {
    color: rgb(var(--accent-light-rgb));
}

.qp-profile-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.35);
}
.qp-profile-row.active .qp-profile-sub {
    color: rgba(var(--accent-light-rgb), 0.6);
}

.qp-profile-name-input {
    flex: 1;
    min-width: 0;
    height: 28px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    padding: 5px 7px;
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
}

.qp-profile-tags {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.qp-profile-tag {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}
.qp-profile-tag.qp-tag-autoimport {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
}
.qp-profile-tag.qp-tag-default {
    background: rgba(74, 222, 128, 0.15);
    color: rgb(134, 239, 172);
}

.qp-profile-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.qp-profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
}
.qp-profile-action:hover {
    background: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-light-rgb));
}
.qp-profile-action.qp-action-delete:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}
.qp-profile-action.qp-action-autoimport.active {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.18);
}

.qp-profile-new {
    margin-top: 10px;
}

.qp-profile-new-btn {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.qp-profile-new-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

.qp-profile-new-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
}

.qp-profile-new-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    font-size: 12px;
    line-height: 16px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
}

.qp-profile-list-empty {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Small badge on tiles governed by the active profile. */
.qp-governed-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
    white-space: nowrap;
}

.quality-upgrade-cutoff-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.quality-upgrade-cutoff-group label {
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.quality-upgrade-cutoff-group select {
    width: 100%;
    max-width: 420px;
}

.qp-manager-modal {
    width: min(720px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 48px));
}

.qp-manager-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Section titles + status rows + profile rows all render into this single
   wrapper (see renderQualityProfileManager) — needs its own gap, or every
   row renders flush against its neighbor with nothing but a row's own
   padding between them. */
.qp-manager-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Info icon + collapsible body — same #settings-page .info-icon /
   .setting-help-body look used everywhere else in Settings, reused here via
   toggleSettingHelp(). Those rules are scoped to #settings-page though, and
   this modal is appended straight onto <body> (outside that scope), so the
   visuals are mirrored here rather than the giant explanation block sitting
   permanently open and dominating the modal. */
.qp-manager-info-row {
    justify-content: space-between;
}
.qp-manager-info-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}
#qp-manager-overlay .info-icon {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: transparent;
    color: rgba(var(--accent-rgb), 0.9);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    margin-left: 6px;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#qp-manager-overlay .info-icon:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.85);
    color: rgba(var(--accent-rgb), 1);
}
#qp-manager-overlay .info-icon.open {
    background: rgba(var(--accent-rgb), 0.9);
    border-color: rgba(var(--accent-rgb), 0.9);
    color: #0b0f14;
}
.qp-manager-info.setting-help-body {
    margin: 0;
    padding: 10px 12px;
    background: rgba(var(--accent-rgb), 0.06);
    border-left: 2px solid rgba(var(--accent-rgb), 0.5);
    border-radius: 0 6px 6px 0;
    font-size: 11.5px;
    font-style: normal;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}
.qp-manager-info.setting-help-body strong { color: rgba(255, 255, 255, 0.82); font-weight: 600; }

.qp-manager-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    margin: 4px 2px 4px;
}
/* Between "Profiles" and the actual rows specifically — was reading as too
   cramped, the rows looked glued to the heading. */
.qp-manager-status-row + .qp-manager-section-title {
    margin-top: 10px;
    margin-bottom: 8px;
}

/* Read-only "what's active" rows — deliberately NOT styled like
   .qp-manager-row below: mixing these into the same look as the actual
   profile list is what made a user think "Auto-Import" itself was a saved
   profile. These only ever show a name; the assignment is changed from a
   profile's own row (Set default / Use for import), not from here. */
.qp-manager-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
}

.qp-manager-status-label {
    flex-shrink: 0;
    width: 130px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
}

.qp-manager-status-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.qp-manager-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.qp-manager-row-main {
    min-width: 0;
}

.qp-manager-row-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.qp-manager-row-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
}

.qp-manager-action {
    min-width: 94px;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.qp-manager-action:hover {
    border-color: rgba(var(--accent-rgb), 0.32);
    color: rgb(var(--accent-light-rgb));
}

.qp-manager-action.active {
    border-color: rgba(var(--accent-rgb), 0.44);
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
}

.qp-manager-action.clear {
    min-width: 132px;
}

@media (max-width: 1800px) {
    .qp-layout {
        flex-direction: column-reverse;
        width: 100%;
    }

    .qp-main {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }

    .qp-side-panel {
        width: 100%;
        border-left: none;
        border-top: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 0 0 16px 0;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 16px;
        max-height: none;
        position: static;
    }
}

@media (max-width: 640px) {
    .quality-upgrade-cutoff-group {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .qp-manager-row {
        grid-template-columns: 1fr;
    }

    .qp-manager-action {
        width: 100%;
    }
}

/* Quality tier cards - upgraded inner cards */
/* ── Ranked-targets editor (v3 quality profile) ───────────────────────── */
.ranked-targets-editor {
    margin-bottom: 16px;
}

.ranked-targets-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* The label now sits in a .setting-row (alongside the ⓘ), whose label margin is
   zeroed — restore a healthy gap before the draggable target list below. */
.ranked-targets-editor > .setting-row { margin-bottom: 10px; }

.ranked-targets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.ranked-targets-empty {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-style: italic;
    padding: 10px 12px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}

.ranked-target-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.ranked-target-row:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.ranked-target-row.rt-dragging {
    opacity: 0.4;
}

.ranked-target-row.rt-dragover {
    border-color: rgba(99, 179, 237, 0.7);
}

.ranked-target-row .rt-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.35);
    font-size: 14px;
    user-select: none;
}

.ranked-target-row .rt-rank {
    min-width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
}

.ranked-target-row .rt-label {
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 600;
}

.ranked-target-row .rt-spacer {
    flex: 1;
}

.ranked-target-row .rt-move,
.ranked-target-row .rt-del {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 7px;
    transition: background 0.15s ease;
}

.ranked-target-row .rt-move:hover,
.ranked-target-row .rt-del:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ranked-target-row .rt-del:hover {
    background: rgba(229, 62, 62, 0.25);
    border-color: rgba(229, 62, 62, 0.5);
}

.ranked-target-add {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.ranked-target-add select,
.ranked-target-add input[type="number"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    padding: 7px 9px;
    min-height: 34px;
}

.ranked-target-add select { min-width: 130px; cursor: pointer; }

/* Kill the default light optgroup/option bars in the dark dropdown. */
.ranked-target-add select optgroup {
    background: #1a1a1e;
    color: rgba(255, 255, 255, 0.55);
    font-style: normal;
    font-weight: 600;
}

.ranked-target-add select option {
    background: #1a1a1e;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
}

.ranked-target-add .rt-inline-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ranked-target-add .rt-add-btn {
    background: rgba(99, 179, 237, 0.18);
    border: 1px solid rgba(99, 179, 237, 0.4);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    transition: background 0.15s ease;
}

.ranked-target-add .rt-add-btn:hover {
    background: rgba(99, 179, 237, 0.3);
}

.test-button {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.test-button:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}

.detect-button {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.detect-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Save Button - gradient with glow */
.save-button {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 28px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
    backdrop-filter: blur(12px);
    position: relative;
}

.save-button:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.5), 0 3px 10px rgba(0, 0, 0, 0.25);
}

.save-button:active {
    transform: translateY(0) scale(0.97);
}

/* Additional Settings Components */
.path-input-group {
    display: flex;
    gap: 8px;
}

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

.browse-button {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.browse-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.path-input-group input[readonly] {
    opacity: 0.55;
    cursor: not-allowed;
}

.browse-button.locked {
    opacity: 0.7;
}

/* Auth Button - gradient */
.auth-button {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    color: #000000;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2);
}

.auth-button:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}

.disconnect-button {
    background: linear-gradient(135deg, #e53935, #ef5350) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.2) !important;
}

.disconnect-button:hover {
    background: linear-gradient(135deg, #ef5350, #f44336) !important;
    box-shadow: 0 6px 16px rgba(229, 57, 53, 0.35) !important;
}

.tidal-title+* .auth-button {
    background: linear-gradient(135deg, #ff6600, #ff8833);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.2);
}

.tidal-title+* .auth-button:hover {
    background: linear-gradient(135deg, #ff8833, #ff9944);
    box-shadow: 0 6px 16px rgba(255, 102, 0, 0.35);
}

/* API Test Buttons */
.api-test-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.api-test-buttons .test-button {
    flex: 1;
    min-width: 120px;
    max-width: calc(33.333% - 6px);
}

/* Server Test Section */
.server-test-section {
    margin-top: 16px;
    text-align: center;
}

.server-test-btn {
    width: 100%;
}

.reset-button,
.export-button,
.import-button {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.reset-button {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.25);
}

.reset-button:hover {
    background: rgba(255, 107, 107, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
}

.export-button,
.import-button {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.export-button:hover,
.import-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-1px);
}

.cancel-button {
    padding: 6px 12px;
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-top: 8px;
}

.cancel-button:hover {
    background: rgba(255, 107, 107, 0.2);
}

.status-display {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-size: 12px;
}

.status-display .status-text {
    color: rgba(255, 255, 255, 0.7);
}

.status-display.connected .status-text {
    color: rgb(var(--accent-light-rgb));
}

.status-display.error .status-text {
    color: #ff6b6b;
}

.detection-progress {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.detection-progress .progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.detection-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    width: 0%;
    transition: width 0.3s ease;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.detection-progress .progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

/* Form styling improvements */
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    accent-color: rgb(var(--accent-light-rgb));
}

.form-group input[type="number"] {
    width: 120px;
}

.form-group select {
    width: 200px;
}

/* Sync Page Styling */
.sync-content {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.playlist-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
}

.playlist-section h3 {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.playlist-selector {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 16px;
}

.sync-button {
    background: rgb(var(--accent-light-rgb));
    color: #000000;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sync-button:hover {
    background: #1fdf64;
}

.sync-progress {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    width: 0%;
    transition: width 0.3s ease;
}

.progress-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* ======================================================= */
/* == STYLES FOR DOWNLOADS PAGE                           == */
/* ======================================================= */

/* Main Layout: Replicates QSplitter */
.downloads-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    height: 100%;
    /* Fill parent .page content area */
    padding: 0 40px 40px 40px;
}

.downloads-main-panel,
.downloads-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.downloads-side-panel {
    margin-top: 100px;
    overflow-y: scroll;
}

/* Header: Replicates create_elegant_header() */
.downloads-header {
    padding: 16px 0;
}

.downloads-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.downloads-header-text {
    flex: 1;
}

.downloads-header .downloads-title {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.downloads-header .downloads-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

.downloads-header .downloads-subtitle {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 300;
    margin-top: 4px;
}

/* Toggle Download Manager Button */
.toggle-manager-btn {
    background: linear-gradient(135deg,
            rgba(35, 35, 35, 0.8) 0%,
            rgba(25, 25, 25, 0.9) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.toggle-manager-btn:hover {
    background: linear-gradient(135deg,
            rgba(45, 45, 45, 0.9) 0%,
            rgba(35, 35, 35, 0.95) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.toggle-manager-btn:active {
    transform: scale(0.95);
}

.toggle-icon {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* When manager is hidden, rotate the icon */
.downloads-content.manager-hidden .toggle-icon {
    transform: rotate(180deg);
}

/* Hide side panel when toggled */
.downloads-content.manager-hidden {
    grid-template-columns: 1fr;
    /* Only show main panel */
}

.downloads-content.manager-hidden .downloads-side-panel {
    display: none;
}

/* Responsive: Mobile adjustments for toggle button */
@media (max-width: 768px) {
    .downloads-header-content {
        gap: 12px;
    }

    .toggle-manager-btn {
        width: 40px;
        height: 40px;
    }

    .toggle-icon {
        font-size: 20px;
    }

    .downloads-header .downloads-title {
        font-size: 24px;
    }

    .downloads-header .downloads-subtitle {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .downloads-header-content {
        gap: 10px;
    }

    .toggle-manager-btn {
        width: 36px;
        height: 36px;
    }

    .toggle-icon {
        font-size: 18px;
    }

    .downloads-header .downloads-title {
        font-size: 20px;
    }

    .downloads-header .downloads-subtitle {
        font-size: 11px;
    }
}

/* Search Bar: Replicates create_elegant_search_bar() */
.search-bar-container {
    background: linear-gradient(to bottom, rgba(50, 50, 50, 0.55), rgba(40, 40, 40, 0.65));
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    padding: 16px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

#downloads-search-input {
    flex-grow: 1;
    height: 40px;
    background: rgba(60, 60, 60, 0.7);
    border: 2px solid rgba(100, 100, 100, 0.3);
    border-radius: 20px;
    padding: 0 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
}

#downloads-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.8);
    background: rgba(70, 70, 70, 0.9);
}

#downloads-search-btn,
#downloads-cancel-btn {
    height: 40px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

#downloads-search-btn {
    background: linear-gradient(to bottom, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    color: #000000;
    width: 120px;
}

#downloads-search-btn:hover {
    background: linear-gradient(to bottom, #1fdf64, rgb(var(--accent-light-rgb)));
}

#downloads-cancel-btn {
    background: linear-gradient(to bottom, rgba(220, 53, 69, 0.9), rgba(200, 43, 58, 0.9));
    color: #ffffff;
    width: 100px;
}

#downloads-cancel-btn:hover {
    background: linear-gradient(to bottom, rgba(240, 73, 89, 1.0), rgba(220, 63, 79, 1.0));
}


/* Search Status Bar */
.search-status-container {
    background: linear-gradient(to right, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.08));
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#search-status-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

/* Search Results Area */
.search-results-container {
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.search-results-header h3 {
    color: #ffffff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.search-results-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px;
    /* Space for scrollbar */
}

.search-results-placeholder {
    text-align: center;
    padding: 44px 20px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13.5px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

/* SearchResultItem (Single Track) Styling */
.search-result-item {
    background: linear-gradient(to bottom, rgba(48, 48, 52, 0.95), rgba(38, 38, 42, 0.98));
    border-radius: 18px;
    border: 1px solid rgba(70, 70, 76, 0.5);
    margin-bottom: 8px;
    padding: 16px;
    content-visibility: auto;
    contain-intrinsic-size: auto 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.search-result-item:hover {
    border-color: rgba(var(--accent-rgb), 0.8);
    transform: translateY(-2px);
}

.result-item__main-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-grow: 1;
    min-width: 0;
    /* Prevents text overflow issues */
}

.result-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: linear-gradient(to bottom right, rgba(var(--accent-rgb), 0.3), rgba(24, 156, 71, 0.2));
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    font-size: 18px;
    color: rgb(var(--accent-light-rgb));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.result-item__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-item__title {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-item__secondary-info {
    font-size: 9px;
    color: rgba(179, 179, 179, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-item__actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    border: 2px solid;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    transform: scale(1.1);
}

.action-btn--stream {
    background: linear-gradient(to bottom, #ffc107, #ff9800);
    border-color: rgba(255, 193, 7, 0.3);
    color: #000;
}

.action-btn--download {
    background: linear-gradient(to bottom, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border-color: rgba(var(--accent-rgb), 0.3);
    color: #000;
}

.action-btn--matched {
    background: linear-gradient(to bottom, #9333ea, #7c28c0);
    border-color: rgba(147, 51, 234, 0.3);
    color: #fff;
}

/* AlbumResultItem Styling */
.album-result-item {
    background: linear-gradient(to bottom, rgba(52, 52, 58, 0.95), rgba(42, 42, 48, 0.98));
    border-radius: 20px;
    border: 1px solid rgba(75, 75, 82, 0.5);
    margin-bottom: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.album-result-item:hover {
    border-color: rgba(var(--accent-rgb), 0.8);
}

.album-item__header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    cursor: pointer;
}

.album-item__icon-container {
    text-align: center;
}

.album-item__icon {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(to bottom right, rgba(var(--accent-rgb), 0.2), rgba(24, 156, 71, 0.15));
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    font-size: 24px;
    color: rgb(var(--accent-light-rgb));
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-item__expand-indicator {
    color: rgba(var(--accent-rgb), 0.9);
    font-size: 14px;
    font-weight: bold;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 4px auto 0;
    transition: transform 0.3s ease;
}

.album-item__info {
    flex-grow: 1;
    min-width: 0;
}

.album-item__title {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

.album-item__details {
    font-size: 10px;
    color: rgba(179, 179, 179, 0.9);
    margin: 2px 0;
}

.album-item__user {
    font-size: 9px;
    color: rgba(var(--accent-rgb), 0.8);
}

.album-item__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.album-action-btn {
    height: 36px;
    width: 160px;
    border-radius: 18px;
    border: 2px solid;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.album-action-btn--download {
    background: linear-gradient(to bottom, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border-color: rgba(var(--accent-rgb), 0.3);
    color: #000;
}

.album-action-btn--download:hover {
    background: linear-gradient(to bottom, #1fdf64, rgb(var(--accent-light-rgb)));
}

.album-action-btn--matched {
    background: linear-gradient(to bottom, #9333ea, #7c28c0);
    border-color: rgba(147, 51, 234, 0.3);
    color: #fff;
}

.album-action-btn--matched:hover {
    background: linear-gradient(to bottom, #a747fe, #903fdd);
}


/* Album Expansion and TrackItem Styling */
.album-item__tracks-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

.album-result-item.expanded .album-item__tracks-container {
    max-height: 1000px;
    /* Large value to allow content to expand */
}

.album-result-item.expanded .album-item__expand-indicator {
    transform: rotate(90deg);
}

.track-item {
    background: rgba(40, 40, 40, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(60, 60, 60, 0.3);
    margin: 2px 16px 6px 80px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.track-item:hover {
    background: rgba(50, 50, 50, 0.7);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.track-item__info {
    flex-grow: 1;
    min-width: 0;
}

.track-item__title {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.track-item__details {
    display: block;
    font-size: 9px;
    color: rgba(179, 179, 179, 0.8);
}

.track-item__actions {
    display: flex;
    gap: 8px;
}

.track-item .action-btn {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    font-size: 12px;
}

/* Right Panel: Controls & Download Queue */
.controls-panel {
    background: linear-gradient(to bottom, rgba(40, 40, 40, 0.6), rgba(25, 25, 25, 0.7));
    border-radius: 18px;
    border: 1px solid rgba(80, 80, 80, 0.4);
    padding: 14px 8px;
    flex-shrink: 0;
    /* Prevent this panel from shrinking */
}

.controls-panel__header {
    font-size: 12px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    padding: 6px 14px;
}

.controls-panel__stats {
    background: linear-gradient(to bottom, rgba(45, 45, 45, 0.7), rgba(35, 35, 35, 0.8));
    border-radius: 10px;
    border: 1px solid rgba(80, 80, 80, 0.3);
    padding: 8px 10px;
    margin: 0 6px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
}

.controls-panel__actions {
    padding: 6px;
}

.controls-panel__clear-btn {
    width: 100%;
    height: 28px;
    background: linear-gradient(to bottom, rgba(220, 53, 69, 0.4), rgba(220, 53, 69, 0.25));
    border: 1px solid rgba(220, 53, 69, 0.8);
    color: #dc3545;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.controls-panel__clear-btn:hover {
    background: linear-gradient(to bottom, rgba(220, 53, 69, 0.5), rgba(220, 53, 69, 0.35));
}

.controls-panel__cancel-all-btn {
    width: 100%;
    height: 28px;
    margin-top: 4px;
    background: linear-gradient(to bottom, rgba(255, 152, 0, 0.4), rgba(255, 152, 0, 0.25));
    border: 1px solid rgba(255, 152, 0, 0.8);
    color: #ff9800;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.controls-panel__cancel-all-btn:hover {
    background: linear-gradient(to bottom, rgba(255, 152, 0, 0.5), rgba(255, 152, 0, 0.35));
}

/* Download Manager (Tabs & Queue) */
.download-manager {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.download-manager__tabs {
    display: flex;
}

.tab-btn {
    flex-grow: 1;
    padding: 6px 12px;
    background: #404040;
    color: #ffffff;
    border: 1px solid #606060;
    border-bottom: none;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tab-btn:first-child {
    border-top-left-radius: 8px;
}

.tab-btn:last-child {
    border-top-right-radius: 8px;
}

.tab-btn.active {
    background: rgb(var(--accent-rgb));
    color: #000000;
    border-color: rgb(var(--accent-rgb));
}

.tab-btn:hover:not(.active) {
    background: #505050;
}

.download-manager__content {
    background: #282828;
    border: 1px solid #404040;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 8px;
    flex-grow: 1;
}

.download-queue {
    display: none;
}

.download-queue.active {
    display: block;
}

.download-queue__empty-message {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* Download Queue Item */
.download-item {
    background: rgba(45, 45, 45, 0.95);
    border-radius: 6px;
    border: 1px solid rgba(60, 60, 60, 0.6);
    padding: 12px;
    margin-bottom: 6px;
}

.download-item__title {
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-item__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.download-item__uploader {
    font-size: 9px;
    color: #b8b8b8;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-item__progress-container {
    width: 90px;
    text-align: center;
}

.progress-bar {
    height: 6px;
    background: rgba(60, 60, 60, 0.8);
    border-radius: 3px;
    overflow: hidden;
}

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

.progress-text {
    font-size: 8px;
    color: #c0c0c0;
}

.download-item__cancel-btn {
    width: 60px;
    height: 35px;
    background: rgba(220, 53, 69, 0.9);
    color: white;
    border: 1px solid rgba(220, 53, 69, 0.6);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.download-item__cancel-btn:hover {
    background: rgba(240, 73, 89, 1.0);
}

.download-item__status-container {
    width: auto;
    text-align: right;
}

.download-item__open-btn {
    width: 60px;
    height: 35px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    border: 1px solid rgba(var(--accent-rgb), 0.6);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.download-item__open-btn:hover {
    background: rgba(50, 187, 79, 1.0);
}

.download-item__status-text {
    font-weight: bold;
    font-size: 10px;
}

.status--cancelled {
    color: #ffa500;
}




















/* Artists Page Styling */
.artists-content {
    height: calc(100vh - 150px);
    overflow-y: auto;
}

.artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid rgb(var(--accent-light-rgb));
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-message {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 16px;
    font-size: 14px;
}

/* Toast Notifications */
/* ==================================================================================
   NOTIFICATION SYSTEM — Compact toasts + bell button + notification panel
   ================================================================================== */

/* Toast container — bottom-right, above the mini player + bell/help row */
.toast-container {
    position: fixed;
    bottom: 104px;
    right: 24px;
    z-index: 99999;
    pointer-events: none;
}

/* Compact toast pill */
.toast-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    padding: 12px 16px;
    background: rgba(18, 18, 26, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.03) inset;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.toast-compact.toast-enter { opacity: 1; transform: translateY(0) scale(1); }
.toast-compact.toast-exit { opacity: 0; transform: translateY(-8px) scale(0.96); }

/* Type-specific left border colors */
.toast-success { border-left-color: #4caf50; }
.toast-error { border-left-color: #ef5350; }
.toast-warning { border-left-color: #ffb74d; }
.toast-info { border-left-color: #64b5f6; }

.toast-compact-icon {
    font-size: 14px; font-weight: 800; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.toast-success .toast-compact-icon { background: rgba(76,175,80,0.15); color: #4caf50; }
.toast-error .toast-compact-icon { background: rgba(239,83,80,0.15); color: #ef5350; }
.toast-warning .toast-compact-icon { background: rgba(255,183,77,0.15); color: #ffb74d; }
.toast-info .toast-compact-icon { background: rgba(100,181,246,0.15); color: #64b5f6; }

.toast-compact-msg { flex: 1; line-height: 1.3; min-width: 0; word-break: break-word; }

.toast-compact-link {
    font-size: 11px; font-weight: 600; color: var(--accent);
    white-space: nowrap; flex-shrink: 0; cursor: pointer;
    transition: opacity 0.15s;
}
.toast-compact-link:hover { opacity: 0.7; }

/* ── Notification Bell Button ── */
.notif-bell-btn {
    position: fixed;
    bottom: 24px;
    right: 80px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 20, 28, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
}
.notif-bell-btn:hover {
    background: rgba(30, 30, 40, 0.95);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.notif-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef5350;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid rgba(16, 16, 16, 0.95);
    line-height: 1;
}

/* ── Notification Panel ── */
.notif-panel {
    position: fixed;
    width: 380px;
    max-width: 95vw;
    max-height: 60vh;
    background: rgba(14, 14, 20, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
    z-index: 999998;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.notif-panel.visible { opacity: 1; transform: translateY(0) scale(1); }

.notif-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.notif-panel-title { font-size: 14px; font-weight: 700; color: #fff; }
.notif-panel-clear {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35);
    background: none; border: none; cursor: pointer; transition: color 0.15s;
}
.notif-panel-clear:hover { color: rgba(255,255,255,0.7); }

/* Type filter chips (Kazimir: "is there a place to filter notifications?") */
.notif-filter-row {
    display: flex; gap: 6px; padding: 8px 14px 2px;
}
.notif-filter-chip {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px; padding: 3px 11px; cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.notif-filter-chip:hover { color: rgba(255,255,255,0.8); }
.notif-filter-chip.active {
    color: #fff; background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-rgb), 0.45);
}

.notif-bell-dl {
    position: absolute;
    top: -2px;
    left: -2px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: rgba(var(--accent-rgb), 0.95);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    padding: 0 4px;
    pointer-events: none;
}
/* the tray's system footer — the retired dashboard stats strip, rehomed */
.notif-panel-sys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.notif-panel-sys:empty { display: none; }
.notif-sys-item { white-space: nowrap; }
.notif-sys-item--link { cursor: pointer; }
.notif-sys-item--link:hover { color: rgba(var(--accent-rgb), 0.95); }
.notif-sys-sep { color: rgba(255, 255, 255, 0.2); }

.notif-panel-body {
    overflow-y: auto; flex: 1; padding: 6px;
}

/* Persistent history modal — the server journal that survives "Clear All" */
.notif-history-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.notif-history-modal {
    width: 640px; max-width: 94vw; max-height: 80vh;
    background: rgba(14, 14, 20, 0.98); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
}
.notif-history-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.notif-history-title { font-size: 15px; font-weight: 700; color: #fff; }
.notif-history-close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 15px; cursor: pointer;
}
.notif-history-close:hover { color: #fff; }
.notif-history-controls {
    display: flex; gap: 8px; align-items: center; padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.notif-history-type, .notif-history-search {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: #fff; font-size: 12px; padding: 6px 9px;
}
.notif-history-search { flex: 1; }
.notif-history-body { overflow-y: auto; flex: 1; padding: 6px 8px; }
.notif-history-body::-webkit-scrollbar { width: 4px; }
.notif-history-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.notif-history-footer { padding: 8px 16px 14px; text-align: center; }
.notif-history-more {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 6px 18px; cursor: pointer;
}
.notif-history-more:hover { color: #fff; }
.notif-history-more.hidden { display: none; }
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Active overlay-apply task — pinned card at the top of the panel + a working ring on the bell */
.notif-active-host:empty { display: none; }
.notif-active {
    margin: 10px 10px 2px; padding: 12px 13px; border-radius: 11px;
    background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.notif-active-done { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.22); }
.notif-active-error { background: rgba(255, 90, 90, 0.1); border-color: rgba(255, 90, 90, 0.3); }
.notif-active-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.notif-active-title { font-size: 12.5px; font-weight: 700; color: #fff; }
.notif-active-pct { font-size: 11.5px; font-weight: 700; color: rgba(var(--accent-rgb), 0.95); font-variant-numeric: tabular-nums; }
.notif-active-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.1); overflow: hidden; }
.notif-active-fill { height: 100%; border-radius: 4px; background: rgb(var(--accent-rgb)); transition: width 0.4s ease; }
.notif-active-error .notif-active-fill { background: #ff5a5a; }
.notif-active-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 7px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-bell-working { border-color: rgba(var(--accent-rgb), 0.6); color: rgba(var(--accent-rgb), 0.95); }
.notif-bell-working::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    border: 2px solid transparent; border-top-color: rgb(var(--accent-rgb));
    animation: notif-bell-spin 0.9s linear infinite;
}
@keyframes notif-bell-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .notif-bell-working::after { animation: none; } }

.notif-panel-empty {
    padding: 30px 16px; text-align: center;
    font-size: 12px; color: rgba(255,255,255,0.2);
}

/* Individual notification entry */
.notif-entry {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    margin-bottom: 2px; position: relative;
    transition: background 0.15s;
}
.notif-entry:hover { background: rgba(255, 255, 255, 0.03); }

.notif-entry-unread {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
}

.notif-entry-icon {
    width: 24px; height: 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px;
}
.notif-icon-success { background: rgba(76,175,80,0.12); color: #4caf50; }
.notif-icon-error { background: rgba(239,83,80,0.12); color: #ef5350; }
.notif-icon-warning { background: rgba(255,183,77,0.12); color: #ffb74d; }
.notif-icon-info { background: rgba(100,181,246,0.12); color: #64b5f6; }

.notif-entry-body { flex: 1; min-width: 0; }
.notif-entry-msg { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.35; word-break: break-word; }
.notif-entry-meta { font-size: 10px; color: rgba(255,255,255,0.25); margin-top: 3px; display: flex; align-items: center; gap: 8px; }

.notif-entry-link {
    font-size: 10px; font-weight: 600; color: var(--accent);
    cursor: pointer; transition: opacity 0.15s;
}
.notif-entry-link:hover { opacity: 0.7; }

/* ==================================================================================
   GLOBAL SEARCH BAR — Spotlight-style search from anywhere
   ================================================================================== */

/* Ambient glow under the global search bar — a radial gradient that emanates
   from the bar's position and tapers out toward the window corners. Pointer
   events disabled so it never intercepts clicks; hidden on /search where the
   bar itself is hidden. */
.gsearch-aura {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 260px;
    pointer-events: none;
    z-index: 99990; /* below the bar (99998) but above most page content */
    opacity: 0.55;
    transition: opacity 0.4s ease, background 0.4s ease;
    background:
        radial-gradient(ellipse 620px 230px at 50% 100%,
            rgba(var(--accent-rgb), 0.22) 0%,
            rgba(var(--accent-rgb), 0.10) 32%,
            rgba(var(--accent-rgb), 0.03) 62%,
            transparent 85%);
}
.gsearch-aura.hidden { display: none; }
.gsearch-aura.active {
    opacity: 1;
    background:
        radial-gradient(ellipse 820px 280px at 50% 100%,
            rgba(var(--accent-rgb), 0.40) 0%,
            rgba(var(--accent-rgb), 0.18) 28%,
            rgba(var(--accent-rgb), 0.05) 58%,
            transparent 85%);
}

/* While the immersive Now Playing modal is open, suppress the floating
   bottom chrome — its very high z-index would otherwise render the global
   search bar and FAB buttons on top of the player's transport controls. */
body.np-modal-open #gsearch-bar,
body.np-modal-open #gsearch-aura,
body.np-modal-open #notif-bell-btn,
body.np-modal-open #helper-float-btn {
    display: none !important;
}

/* Same problem for the full-screen "download missing / add to wishlist"
   modal (z-index 9000): the floating bottom-right chrome (z-index 999999)
   would otherwise sit on top of the modal's footer actions — on a phone
   the notification bell and helper FAB cover the "Add to Wishlist" / "Close"
   buttons and make them untappable. That modal is created/removed from the
   DOM and toggled via inline display, so key off the *visible* instance
   (base CSS is display:none; it is revealed with style.display='flex'). */
body:has(.download-missing-modal[style*="display: flex"]) #gsearch-bar,
body:has(.download-missing-modal[style*="display: flex"]) #gsearch-aura,
body:has(.download-missing-modal[style*="display: flex"]) #notif-bell-btn,
body:has(.download-missing-modal[style*="display: flex"]) #helper-float-btn {
    display: none !important;
}

.gsearch-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: rgba(18, 18, 26, 0.65);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 21px;
    z-index: 99998;
    opacity: 0.55;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: text;
}
.gsearch-bar:hover {
    opacity: 0.8;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(18, 18, 26, 0.8);
}
.gsearch-bar.active {
    opacity: 1;
    width: 560px;
    background: rgba(18, 18, 26, 0.92);
    backdrop-filter: blur(24px);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.gsearch-icon {
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
.gsearch-bar.active .gsearch-icon { color: var(--accent); }

.gsearch-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
}
.gsearch-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.gsearch-bar.active .gsearch-input::placeholder { color: rgba(255, 255, 255, 0.4); }

.gsearch-clear {
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4);
    font-size: 14px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: all 0.15s; padding: 0;
}
.gsearch-clear:hover { background: rgba(255,255,255,0.15); color: #fff; }

.gsearch-shortcut {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    padding: 2px 7px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.gsearch-bar.active .gsearch-shortcut { opacity: 0; pointer-events: none; }

/* ── Results Panel ── */
.gsearch-results {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: 920px;
    max-width: 95vw;
    max-height: 60vh;
    background: rgba(14, 14, 20, 0.97);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    z-index: 99997;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.gsearch-results.visible { display: flex; animation: gsearchSlideUp 0.2s ease; }

/* Stable results-panel structure built by downloads.js _doInit: the source
   row and fallback banner keep their natural height; #gsearch-body grows
   to fill what's left of the 60vh cap and scrolls when content overflows.
   Without the flex:1 + overflow on #gsearch-body, content past the cap
   was clipped with no scrollbar — the source-picker refactor introduced
   the structure but not the accompanying CSS. */
#gsearch-source-row { flex-shrink: 0; }
#gsearch-fallback-banner { flex-shrink: 0; }
#gsearch-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
#gsearch-body::-webkit-scrollbar { width: 4px; }
#gsearch-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

@keyframes gsearchSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.gsearch-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.gsearch-results-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.3); }
.gsearch-results-count { font-size: 10px; color: rgba(255,255,255,0.2); }

.gsearch-results-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 12px 14px;
}
.gsearch-results-body::-webkit-scrollbar { width: 4px; }
.gsearch-results-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Source tabs */
.gsearch-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 18px 4px;
    flex-shrink: 0;
}
.gsearch-tab {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.gsearch-tab.active { background: rgba(var(--accent-rgb), 0.12); color: rgb(var(--accent-light-rgb)); border-color: rgba(var(--accent-rgb), 0.2); }
.gsearch-tab:hover:not(.active) { background: rgba(255,255,255,0.06); }

/* Source icon row in the global widget. The popover itself is already a
   glass panel, so this row is just a transparent flex strip — no double
   border/background. justify-content: center keeps the chips grouped
   instead of drifting to the left when they don't fill the popover width. */
.gsearch-source-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px 8px;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gsearch-source-row::-webkit-scrollbar { height: 4px; }
.gsearch-source-row::-webkit-scrollbar-track { background: transparent; }
.gsearch-source-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

.gsearch-source-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease;
}
.gsearch-source-icon:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.gsearch-source-icon:active { transform: translateY(0) scale(0.97); }

.gsearch-source-icon-glyph {
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}
.gsearch-source-icon-glyph img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}
.gsearch-source-icon-label { font-size: 10px; letter-spacing: 0.02em; font-weight: 600; }
.gsearch-source-icon.active .gsearch-source-icon-label { font-weight: 700; }

.gsearch-source-icon.active {
    transform: scale(1.04);
    border-color: currentColor;
}
.gsearch-source-icon[data-source="spotify"].active {
    color: #1db954;
    background: linear-gradient(180deg, rgba(29, 185, 84, 0.28) 0%, rgba(29, 185, 84, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.35), 0 4px 16px rgba(29, 185, 84, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="itunes"].active {
    color: #fc3c44;
    background: linear-gradient(180deg, rgba(252, 60, 68, 0.28) 0%, rgba(252, 60, 68, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(252, 60, 68, 0.35), 0 4px 16px rgba(252, 60, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="deezer"].active {
    color: #a238ff;
    background: linear-gradient(180deg, rgba(162, 56, 255, 0.28) 0%, rgba(162, 56, 255, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(162, 56, 255, 0.35), 0 4px 16px rgba(162, 56, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="discogs"].active {
    color: #D4A574;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.28) 0%, rgba(212, 165, 116, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.35), 0 4px 16px rgba(212, 165, 116, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="hydrabase"].active {
    color: #00b4d8;
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.28) 0%, rgba(0, 180, 216, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.35), 0 4px 16px rgba(0, 180, 216, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="musicbrainz"].active {
    color: #BA3358;
    background: linear-gradient(180deg, rgba(186, 51, 88, 0.28) 0%, rgba(186, 51, 88, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(186, 51, 88, 0.35), 0 4px 16px rgba(186, 51, 88, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="youtube_videos"].active {
    color: #ff4444;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.28) 0%, rgba(255, 0, 0, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.35), 0 4px 16px rgba(255, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon[data-source="soulseek"].active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32), 0 4px 16px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.gsearch-source-icon.cached::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
    animation: gsearch-source-cache-pulse 2.4s ease-in-out infinite;
}
@keyframes gsearch-source-cache-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}
.gsearch-source-icon.loading .gsearch-source-icon-glyph {
    animation: gsearch-source-loading-spin 1.2s linear infinite;
    opacity: 0.7;
}
@keyframes gsearch-source-loading-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
.gsearch-source-icon.fallback-warning {
    border-color: rgba(250, 176, 5, 0.5);
    box-shadow: 0 0 0 1px rgba(250, 176, 5, 0.25);
}

/* Same unconfigured treatment as the Search page icons. */
.gsearch-source-icon.unconfigured {
    opacity: 0.42;
    filter: grayscale(0.7);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}
.gsearch-source-icon.unconfigured:hover {
    opacity: 0.75;
    filter: grayscale(0.35);
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.12);
}
.gsearch-source-icon.unconfigured.active {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    transform: none;
}

/* Flash highlight on the Settings service card after scrolling to it via
   the picker. Two and a half seconds of gentle accent pulse so the user's
   eye catches the card. */
.stg-service.stg-service-flash {
    animation: stg-service-flash-anim 2.2s ease-out;
}
@keyframes stg-service-flash-anim {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
    35%  { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.gsearch-fallback-banner {
    padding: 6px 14px;
    margin: 0 12px 6px;
    border-radius: 6px;
    background: rgba(250, 176, 5, 0.12);
    border: 1px solid rgba(250, 176, 5, 0.3);
    color: #fab005;
    font-size: 10.5px;
    font-weight: 500;
}

/* Section headers */
.gsearch-section-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
    padding: 10px 6px 6px;
}

/* Result items — compact grid */
.gsearch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
}

.gsearch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.gsearch-item:hover { background: rgba(255, 255, 255, 0.05); }

.gsearch-item-art {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.15);
}
.gsearch-item-art img { width: 100%; height: 100%; object-fit: cover; }

.gsearch-item-info { flex: 1; min-width: 0; }
.gsearch-item-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-item-sub { font-size: 10px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.gsearch-item-badge {
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(76,175,80,0.12); color: #4caf50;
    flex-shrink: 0;
}

.gsearch-wishlist-badge {
    background: rgba(251,191,36,0.12); color: #fbbf24;
}

.gsearch-loading {
    text-align: center; padding: 24px; font-size: 12px; color: rgba(255,255,255,0.2);
}

.gsearch-empty {
    text-align: center; padding: 24px; font-size: 12px; color: rgba(255,255,255,0.2);
}

.gsearch-section-loading,
.enh-section-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
}

/* Track list (not grid) */
.gsearch-track-list { display: flex; flex-direction: column; }

.gsearch-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.gsearch-track:hover { background: rgba(255, 255, 255, 0.04); }

.gsearch-track-dur {
    font-size: 10px; color: rgba(255,255,255,0.2);
    flex-shrink: 0; min-width: 32px; text-align: right;
}

.gsearch-play-btn {
    width: 26px; height: 26px; border-radius: 50%; border: none;
    background: rgba(var(--accent-rgb), 0.12); color: var(--accent);
    font-size: 10px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: all 0.15s;
    opacity: 0;
}
.gsearch-track:hover .gsearch-play-btn { opacity: 1; }
.gsearch-play-btn:hover { background: var(--accent); color: #fff; transform: scale(1.1); }

.gsearch-source-badge {
    font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.1); color: var(--accent);
    margin-left: 6px; vertical-align: middle;
}

/* ── Global Search Mobile ── */
@media (max-width: 768px) {
    .gsearch-bar {
        width: calc(100% - 48px);
        left: 24px;
        right: 24px;
        transform: none;
        bottom: 80px;
        height: 40px;
    }
    .gsearch-bar.active {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
    }
    .gsearch-results {
        width: calc(100% - 32px);
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 130px;
        max-height: 50vh;
        border-radius: 14px;
    }
    .gsearch-grid {
        grid-template-columns: 1fr;
    }
    .gsearch-shortcut { display: none; }
    .gsearch-item-art { width: 36px; height: 36px; }
    .gsearch-tabs { flex-wrap: wrap; }
}

/* ── Wing It Button ── */
/* ── Wing It Button + Dropdown ── */
.wing-it-wrap {
    position: relative;
    display: inline-block;
}

.wing-it-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    cursor: pointer;
    transition: all 0.2s;
}
.wing-it-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.wing-it-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.96);
    background: rgba(18, 18, 26, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    min-width: 180px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 10001;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}
.wing-it-dropdown.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}
.wing-it-dropdown.flip-down {
    bottom: auto;
    top: calc(100% + 6px);
}

.wing-it-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
}
.wing-it-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.wing-it-dropdown-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.wing-it-dropdown-label { flex: 1; }
.wing-it-dropdown-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
}

.wing-it-btn-sm {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.wing-it-btn-sm:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

/* Desktop-Only Optimizations */
@media (min-width: 769px) {
    .main-container {
        min-width: 1200px;
    }

    /* These have to track --sidebar-w, not restate it. min-width pins a flex
       item regardless of what `width` says, so leaving 240px here made the
       collapse toggle do visibly nothing on desktop (#1155). */
    .sidebar {
        min-width: var(--sidebar-w);
        max-width: var(--sidebar-w);
    }

    .main-content {
        min-width: 960px;
    }
}

/* Optimize for larger screens */
@media (min-width: 1440px) {
    .stats-grid {
        width: 350px;
        /* Wider stats on large monitors */
    }

    .settings-content {
        max-width: 900px;
        /* Wider settings forms */
    }
}

/* ===== VERSION MODAL STYLES ===== */

.version-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.version-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.version-modal {
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 600px;
    max-width: 90vw;
    height: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

.version-modal-overlay.hidden .version-modal {
    transform: scale(0.9);
}

/* Header */
.version-modal-header {
    padding: 30px 30px 15px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background: #1a1a1a;
}

.version-modal-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 5px 0;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.version-modal-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1px;
    margin: 0;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Content Area */
.version-modal-content {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    background: #1a1a1a;
}

.version-modal-content::-webkit-scrollbar {
    width: 8px;
}

.version-modal-content::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

.version-modal-content::-webkit-scrollbar-thumb {
    background: #555555;
    border-radius: 4px;
}

.version-modal-content::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

.version-content-container {
    padding: 25px 30px;
}

/* Feature Sections */
.version-feature-section {
    margin-bottom: 25px;
    padding: 18px 20px;
    border-left: 3px solid rgba(var(--accent-rgb), 0.4);
    margin-left: 5px;
    background: transparent;
}

.version-section-title {
    color: rgb(var(--accent-light-rgb));
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: 0 0 8px 0;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.version-section-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    line-height: 1.4;
    margin: 0 0 12px 0;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.version-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.version-feature-item {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    line-height: 1.5;
    padding: 2px 0 2px 8px;
    margin: 2px 0;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.version-usage-note {
    color: rgb(var(--accent-light-rgb));
    font-size: 10px;
    line-height: 1.4;
    margin: 8px 0 0 0;
    padding: 8px 0;
    font-style: italic;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* Footer */
.version-modal-footer {
    padding: 15px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: flex-end;
}

.version-modal-close {
    background: rgb(var(--accent-rgb));
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 25px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.version-modal-close:hover {
    background: rgb(var(--accent-light-rgb));
}

.version-modal-close:active {
    background: #169c46;
}

/* Animation for modal appearance */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.version-modal-overlay:not(.hidden) .version-modal {
    animation: modalFadeIn 0.3s ease-out;
}

/* ===== MATCHED DOWNLOAD MODAL STYLES ===== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.matching-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    width: 1100px;
    max-width: 95vw;
    height: 750px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
    overflow: hidden;
}

.modal-overlay.hidden .matching-modal {
    transform: scale(0.9);
}

/* Modal Header */
.matching-modal-header {
    padding: 30px 40px 20px 40px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 0%, transparent 50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#matching-modal-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.matching-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matching-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

/* Modal Content */
.matching-modal-content {
    flex: 1;
    padding: 30px 40px;
    overflow-y: auto;
    background: #121212;
}

.matching-modal-content::-webkit-scrollbar {
    width: 8px;
}

.matching-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.matching-modal-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
}

.matching-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

/* Selection Stages */
.selection-stage {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease-in-out;
}

.selection-stage.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.stage-header {
    margin-bottom: 30px;
}

.stage-header h3 {
    color: rgb(var(--accent-rgb));
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.stage-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Suggestions Sections */
.suggestions-section,
.manual-search-section {
    margin-bottom: 40px;
}

.suggestions-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.suggestions-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 140px;
}

.suggestions-container.loading {
    justify-content: center;
    align-items: center;
}

/* Suggestion Cards */
.suggestion-card {
    width: 220px;
    height: 130px;
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.suggestion-card:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.2);
}

.suggestion-card.selected {
    border-color: rgb(var(--accent-rgb));
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.4);
}

.suggestion-card-image {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.suggestion-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(18, 18, 18, 0.3) 0%,
            rgba(18, 18, 18, 0.6) 60%,
            rgba(18, 18, 18, 0.9) 100%);
    border-radius: 16px;
}

.suggestion-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    z-index: 1;
}

.suggestion-card-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.suggestion-card-details {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.suggestion-card-confidence {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}

/* Loading Cards */
.loading-card {
    width: 220px;
    height: 130px;
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.loading-card::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-top: 2px solid rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Search Input */
.search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: #ffffff;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Modal Actions */
.matching-modal-actions {
    padding: 20px 40px 30px 40px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.02) 0%, transparent 50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.modal-button {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.modal-button--primary {
    background: rgb(var(--accent-rgb));
    color: #ffffff;
    min-width: 140px;
}

.modal-button--primary:hover:not(:disabled) {
    background: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}

.modal-button--primary:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

.modal-button--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.modal-button--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.modal-button--cancel {
    background: rgba(255, 65, 54, 0.1);
    color: #ff4136;
}

.modal-button--cancel:hover {
    background: rgba(255, 65, 54, 0.2);
    color: #ff6b5a;
}

/* Modal Animation */
@keyframes matchingModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-overlay:not(.hidden) .matching-modal {
    animation: matchingModalFadeIn 0.4s ease-out;
}

/* Confirm Dialog Modal */
/* Confirm dialog must sit above all other modals (playlist, download, etc.) */
#confirm-modal-overlay {
    z-index: 200000;
}

.confirm-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    width: 460px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
    overflow: hidden;
}

.modal-overlay.hidden .confirm-modal {
    transform: scale(0.9);
}

.modal-overlay:not(.hidden) .confirm-modal {
    animation: matchingModalFadeIn 0.4s ease-out;
}

.confirm-modal-header {
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 0%, transparent 50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#confirm-modal-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.confirm-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: scale(1.1);
}

.confirm-modal-content {
    padding: 20px 24px;
}

#confirm-modal-message {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

.confirm-modal-actions {
    padding: 16px 24px 20px 24px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ── Spotify Rate Limit Modal ─────────────────────────────── */

.rate-limit-modal {
    width: 500px;
    border-color: rgba(255, 170, 0, 0.2) !important;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 170, 0, 0.1),
        0 0 40px rgba(255, 170, 0, 0.04) !important;
}

.rate-limit-modal-header {
    border-bottom-color: rgba(255, 170, 0, 0.15) !important;
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.07) 0%, transparent 60%) !important;
}

.rate-limit-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rate-limit-icon {
    color: #ffaa00;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.3));
}

.rate-limit-title-row h2 {
    color: #ffaa00;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.rate-limit-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.rate-limit-details {
    background: rgba(255, 170, 0, 0.03);
    border: 1px solid rgba(255, 170, 0, 0.1);
    border-radius: 12px;
    padding: 4px 18px;
    margin-bottom: 18px;
}

.rate-limit-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.rate-limit-detail-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rate-limit-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 500;
}

.rate-limit-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    font-weight: 600;
}

.rate-limit-endpoint {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: rgba(255, 170, 0, 0.85);
    background: rgba(255, 170, 0, 0.1);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 170, 0, 0.12);
}

.rate-limit-countdown {
    color: #ffaa00;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

.rate-limit-hint {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

.rate-limit-modal-actions {
    border-top-color: rgba(255, 170, 0, 0.1) !important;
    justify-content: space-between !important;
}

.rate-limit-disconnect-btn {
    background: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
    border: 1px solid rgba(255, 170, 0, 0.25) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.rate-limit-disconnect-btn:hover {
    background: rgba(255, 170, 0, 0.18) !important;
    border-color: rgba(255, 170, 0, 0.4) !important;
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.08);
}

.rate-limit-disconnect-sub {
    font-size: 10.5px;
    font-weight: 400;
    color: rgba(255, 170, 0, 0.55);
    letter-spacing: 0.1px;
}

/* GUI-Matching Search Results Styling */

/* Single Track Card (SearchResultItem) */
.track-result-card {
    /* Premium glassmorphic foundation matching modal */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 12px 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;

    /* Neumorphic depth shadows - elevated card effect */
    box-shadow:
        /* Main depth shadow */
        0 15px 35px rgba(0, 0, 0, 0.6),
        /* Subtle green glow like modal */
        0 0 0 1px rgba(var(--accent-rgb), 0.08),
        /* Inner highlight for glass effect */
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        /* Inner shadow for depth */
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}


.track-result-card:hover {
    /* Enhanced glassmorphic hover state */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);
    border-color: rgba(var(--accent-rgb), 0.3);
    border-top-color: rgba(var(--accent-rgb), 0.4);

    /* More dramatic elevated effect */
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);

    transform: translateY(-2px) translateZ(0);
}

.track-icon {
    background: linear-gradient(to bottom right,
            rgba(var(--accent-rgb), 0.3),
            rgba(24, 156, 71, 0.2));
    border-radius: 22px;
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    font-size: 18px;
    color: rgba(var(--accent-rgb), 1.0);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.track-info {
    flex: 1;
    min-width: 0;
}

.track-title {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 2px;
}

.track-artist {
    font-size: 12px;
    color: #b3b3b3;
    margin-bottom: 2px;
}

.track-details {
    font-size: 10px;
    color: #888888;
    margin-bottom: 2px;
}

.track-uploader {
    font-size: 10px;
    color: rgba(var(--accent-rgb), 1.0);
    font-weight: 500;
}

.track-actions {
    flex-shrink: 0;
}

/* Track download button now uses shared neo-button styling above */

/* Album Card (AlbumResultItem) */
.album-result-card {
    /* Premium glassmorphic foundation matching modal */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 12px 8px;
    padding: 24px;
    position: relative;

    /* Neumorphic depth shadows - elevated card effect */
    box-shadow:
        /* Main depth shadow */
        0 18px 40px rgba(0, 0, 0, 0.6),
        /* Subtle green glow like modal */
        0 0 0 1px rgba(var(--accent-rgb), 0.08),
        /* Inner highlight for glass effect */
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        /* Inner shadow for depth */
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}


.album-result-card:hover {
    /* Enhanced glassmorphic hover state */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);
    border-color: rgba(var(--accent-rgb), 0.3);
    border-top-color: rgba(var(--accent-rgb), 0.4);

    /* More dramatic elevated effect */
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);

    transform: translateY(-3px) translateZ(0);
}

.album-card-header {
    display: flex;
    align-items: center;
    gap: 18px;
}

.album-icon {
    font-size: 28px;
    background: linear-gradient(to bottom right,
            rgba(var(--accent-rgb), 0.2),
            rgba(24, 156, 71, 0.15));
    border-radius: 28px;
    border: 2px solid rgba(var(--accent-rgb), 0.4);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--accent-rgb), 1.0);
    flex-shrink: 0;
}

.album-info {
    flex: 1;
    min-width: 0;
}

.album-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 3px;
}

.album-artist {
    font-size: 13px;
    color: #b3b3b3;
    margin-bottom: 3px;
}

.album-details {
    font-size: 11px;
    color: #888888;
    margin-bottom: 3px;
}

.album-uploader {
    font-size: 11px;
    color: rgba(var(--accent-rgb), 1.0);
    font-weight: 500;
}

.album-actions {
    flex-shrink: 0;
}

/* Album download button now uses shared neo-button styling above */

/* Album Expansion Functionality */
.album-card-header {
    cursor: pointer;
    position: relative;
}

.album-expand-indicator {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.8);
    transition: transform 0.2s ease;
}

.album-result-card.expanded .album-expand-indicator {
    transform: translateY(-50%) rotate(90deg);
}

/* Track List within Albums */
.album-track-list {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Individual Track Items (TrackItem) - Subtle glassmorphism */
.track-item {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.01) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Subtle inner depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.track-item:hover {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(var(--accent-rgb), 0.2);

    /* Enhanced subtle depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.track-item-info {
    flex: 1;
    min-width: 0;
}

.track-item-title {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-item-details {
    font-size: 10px;
    color: #888888;
}

.track-item-actions {
    flex-shrink: 0;
    margin-left: 8px;
}


/* Sophisticated Download Tracking Styles */

/* Download Queue Items */
.download-item {
    background: linear-gradient(to bottom,
            rgba(45, 45, 50, 0.95),
            rgba(35, 35, 40, 0.98));
    border: 1px solid rgba(65, 65, 70, 0.5);
    border-radius: 12px;
    margin: 6px 0;
    padding: 12px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.download-item:hover {
    background: linear-gradient(to bottom,
            rgba(50, 50, 55, 0.98),
            rgba(40, 40, 45, 1.0));
    border-color: rgba(var(--accent-rgb), 0.6);
}

.download-item__art {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.download-item__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.download-item__art-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 18px;
    border-radius: 6px;
}

.download-item__info {
    flex: 1;
    min-width: 0;
}

.download-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.download-item__title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-item__meta {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.82em;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.download-item__sep {
    margin: 0 5px;
    opacity: 0.4;
}
.download-item__album {
    opacity: 0.7;
}

.download-item__badges {
    display: flex;
    gap: 6px;
    margin-top: 3px;
}
.download-item__source,
.download-item__quality {
    font-size: 0.7em;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}

.download-item__uploader {
    font-size: 10px;
    padding-left: 15px;
    color: rgba(var(--accent-rgb), 1.0);
    font-weight: 500;
}

.download-item__content {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 15px;
    flex-shrink: 0;
}

/* Progress Bar Styles */
.download-item__progress-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 10px;
    color: #b3b3b3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Action Buttons */
.download-item__cancel-btn {
    background: linear-gradient(to bottom,
            rgba(255, 69, 58, 0.9),
            rgba(255, 45, 85, 0.8));
    border: 1px solid rgba(255, 69, 58, 0.4);
    border-radius: 6px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 12px 12px !important;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    align-self: flex-start;
    width: fit-content !important;
    height: fit-content !important;
    /* Reveal on hover only — keeps the card clean until the user actually
       wants to act. Space is reserved (opacity + pointer-events, not display)
       so the layout doesn't jump when the button shows. */
    opacity: 0;
    pointer-events: none;
    transform: translateX(4px);
}

.download-item:hover .download-item__cancel-btn,
.download-item:focus-within .download-item__cancel-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Touch devices have no hover — keep cancel visible so it's reachable. */
@media (hover: none) {
    .download-item__cancel-btn {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

.download-item__cancel-btn:hover {
    background: linear-gradient(to bottom,
            rgba(255, 69, 58, 1.0),
            rgba(255, 45, 85, 0.9));
    border-color: rgba(255, 69, 58, 0.6);
}

.download-item__status-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.download-item__status-text {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.download-item__status-text.status--completed {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.4);
}

.download-item__status-text.status--cancelled {
    background: rgba(255, 159, 10, 0.2);
    color: #ff9f0a;
    border: 1px solid rgba(255, 159, 10, 0.4);
}

.download-item__status-text.status--failed {
    background: rgba(255, 69, 58, 0.2);
    color: #ff453a;
    border: 1px solid rgba(255, 69, 58, 0.4);
}

.download-item__open-btn {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgba(var(--accent-rgb), 0.6);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    font-size: 11px;
    padding: 6px 12px;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Tab Management */
.download-manager__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.download-manager__tabs .tab-btn {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.download-manager__tabs .tab-btn.active {
    background: linear-gradient(to bottom,
            rgba(var(--accent-rgb), 0.2),
            rgba(var(--accent-rgb), 0.1));
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.4);
}

.download-manager__tabs .tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Queue Content */
.download-queue {
    display: none;
    max-height: 100%;
    overflow-y: auto;
    padding: 8px;
}

.download-queue.active {
    display: block;
}

.download-queue__empty-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 20px;
    font-style: italic;
}

/* Scrollbar Styling for Download Queue */
.download-queue::-webkit-scrollbar {
    width: 6px;
}

.download-queue::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.download-queue::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

.download-queue::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

/* APPEND THIS CSS SNIPPET */

/* ======================================================= */
/* == STYLES FOR FILTERS PANEL                          == */
/* ======================================================= */

.filters-container {
    background: linear-gradient(to bottom, rgba(45, 45, 45, 0.6), rgba(35, 35, 35, 0.8));
    border-radius: 10px;
    border: 1px solid rgba(80, 80, 80, 0.25);
    padding: 8px 16px;
    transition: max-height 0.4s ease-in-out;
    max-height: fit-content;
    /* Collapsed height */
    margin-top: 16px;
}

.filters-container.expanded {
    max-height: fit-content;
    /* Expanded height */

}

.filters-container:not(.expanded) .filter-content {
    display: none;
}

.filter-toggle-header {
    display: flex;
}

.filter-toggle-btn {
    background: linear-gradient(to bottom, rgba(80, 80, 80, 0.9), rgba(70, 70, 70, 0.95));
    border: 1px solid rgba(100, 100, 100, 0.3);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-toggle-btn:hover {
    background: linear-gradient(to bottom, rgba(90, 90, 90, 0.9), rgba(80, 80, 80, 0.95));
}

.filter-content {
    padding-top: 10px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 600;
}

.filter-btn {
    background: linear-gradient(to bottom, rgba(80, 80, 80, 0.4), rgba(60, 60, 60, 0.6));
    border: 1px solid rgba(120, 120, 120, 0.3);
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    background: linear-gradient(to bottom, rgba(100, 100, 100, 0.5), rgba(80, 80, 80, 0.7));
    border-color: rgba(140, 140, 140, 0.4);
}

.filter-btn.active {
    background: linear-gradient(to bottom, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border-color: transparent;
    color: #000000;
    font-weight: 700;
}

.sort-order-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 14px;
}

/* ===============================
   MODAL-STYLE BUTTON STYLES
   =============================== */
/* Modal-style button foundation */
.track-stream-btn,
.track-download-btn,
.track-matched-btn,
.album-download-btn,
.album-matched-btn {
    /* Modal button styling */
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 80px;
}

/* Stream buttons - secondary modal style */
.track-stream-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.track-stream-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Download buttons - primary modal style */
.track-download-btn,
.album-download-btn {
    background: rgb(var(--accent-rgb));
    color: #ffffff;
}

.track-download-btn:hover,
.album-download-btn:hover {
    background: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}

/* Matched buttons - accent modal style */
.track-matched-btn,
.album-matched-btn {
    background: rgba(147, 51, 234, 0.9);
    color: #ffffff;
}

.track-matched-btn:hover,
.album-matched-btn:hover {
    background: #9333ea;
    transform: translateY(-1px);
}

/* Active states - simple pressed effect like modal */
.track-stream-btn:active,
.track-download-btn:active,
.track-matched-btn:active,
.album-download-btn:active,
.album-matched-btn:active {
    transform: translateY(0);
}

/* Album stream buttons - modal style */
.album-stream-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.album-stream-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Disabled states - modal style */
.track-stream-btn:disabled,
.track-download-btn:disabled,
.track-matched-btn:disabled,
.album-stream-btn:disabled,
.album-download-btn:disabled,
.album-matched-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
}

/* Playing states - modal style */
.track-stream-btn.playing,
.album-stream-btn.playing {
    background: rgb(var(--accent-rgb));
    color: #ffffff;
}

/* Loading states - modal style */
.track-stream-btn.loading,
.album-stream-btn.loading {
    background: rgba(255, 193, 7, 0.9);
    color: #000000;
    animation: pulse-loading 1.5s infinite;
}

@keyframes pulse-loading {
    0% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.7;
    }
}

/* ======================================================= */
/* == STYLES FOR DASHBOARD PAGE                         == */
/* ======================================================= */

/* Main Dashboard Layout */
/* ── Shared button primitive ────────────────────────────────────────
   The canonical button design system. New markup (and the React pages)
   should use `.btn` + a modifier; existing per-page button classes are being
   migrated onto it family by family. Values reflect the dominant existing
   look (accent-gradient primary, translucent ghost, semantic danger/warning).
   Filter "pills" / tab buttons are a separate primitive (see .tab below). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn--primary {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    color: #000;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
.btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.btn--primary:active:not(:disabled) { transform: translateY(0); }

.btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.btn--danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}
.btn--danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

/* Spotify-green download CTA (intentional brand color). */
.btn--download {
    background: linear-gradient(135deg, #1db954, #1ed760);
    color: #fff;
    border: 1px solid rgba(29, 185, 84, 0.3);
}
.btn--download:hover:not(:disabled) {
    background: linear-gradient(135deg, #1ed760, #1db954);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
}

/* Amber "caution" color (e.g. bulk fix-all). */
.btn--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.btn--warning:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.45);
}

/* Compact toolbar size — the second button tier used in headers, bulk-action
   rows and toolbars (smaller than the default large action button). Combine
   with a color modifier, e.g. `.btn .btn--sm .btn--secondary`. */
.btn--sm {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 8px;
    gap: 6px;
}

/* Full-width (form submit buttons, etc.). */
.btn--block { width: 100%; }

/* Shared loading state (JS toggles `.loading`). */
.btn.loading {
    background: rgba(255, 193, 7, 0.9);
    color: #000;
    animation: pulse-loading 1.5s infinite;
    cursor: not-allowed;
}


/* ── Shared tab / filter-pill primitive ─────────────────────────────
   Canonical pill tab (the bordered rounded-pill filter look). New markup and
   the React pages should use `.tab` + `.tab.active`. Existing per-page pill
   classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately
   left in place — they're JS-coupled and visually divergent, so they should be
   migrated only when visually verifiable / in React, not blind. */
.tab {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); }
.tab.active {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.15);
}

/* ── Shared card primitive ──────────────────────────────────────────
   Canonical "glass" content card (the dashboard service/stat card look). New
   markup and the React pages should use `.card`. Existing per-feature card
   classes are left in place; migrate when visually verifiable / in React. */
.card {
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}
.card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


/* ── Shared page shell ──────────────────────────────────────────────
   The canonical page card (the dashboard / stats look). Adopted by the
   dashboard, tools, watchlist and wishlist pages — and intended for reuse
   by the React pages too (same class name). Page-specific extras (flex
   layout, position) stay on the per-page class. */
.page-shell {
    padding: 28px 24px 30px;
    /* Semi-transparent to let page particles show through */
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.55) 0%,
            rgba(12, 12, 12, 0.62) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 20px;
    /* Soft floating shadow — one outer layer instead of two stacked (this is a
       near-fullscreen element, so each shadow pass is expensive); the single
       slightly-stronger blur reads the same. */
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Spacing between sections; card styling comes from .page-shell */
    /* Scroll runway past the last card: Automations is the final section, and
       its quick-settings row lands under the fixed bottom-right cluster
       (notifications / server activity / help), which sits ABOVE the page and
       can't be scrolled out of the way. 100px of dead space below the shell
       lets that row scroll clear of them (Boulder). */
    padding-bottom: 100px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 0;
    position: relative;
}

.dashboard-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.08) 15%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(var(--accent-rgb), 0.08) 85%,
        transparent 100%);
}

.dashboard-section:last-child::after {
    display: none;
}

.section-title {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 8px 0;
    line-height: 1.2;
    padding-bottom: 10px;
    position: relative;
    border-bottom: none;
}

.dashboard-section > .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg,
        rgb(var(--accent-rgb)) 0%,
        rgba(var(--accent-rgb), 0.3) 100%);
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.3);
}

/* Dashboard Active Downloads */
.dashboard-downloads-group {
    margin-bottom: 20px;
}

.dashboard-downloads-group:last-child {
    margin-bottom: 0;
}

.dashboard-downloads-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dashboard-downloads-group-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
}

.dashboard-downloads-group-count {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.dashboard-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

/* Dashboard Discover Bubble (150px circle, matching artist/search) */
.dashboard-discover-bubble {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.dashboard-discover-bubble:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 0 15px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-discover-bubble.completed {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.dashboard-discover-bubble.completed:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.3),
        0 0 15px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dashboard-discover-bubble-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.dashboard-discover-bubble-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 100%);
    border-radius: 50%;
}

.dashboard-discover-bubble-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    z-index: 1;
}

.dashboard-discover-bubble-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.dashboard-discover-bubble-status {
    font-size: 10px;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 0.9);
    margin-top: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.dashboard-discover-bubble.completed .dashboard-discover-bubble-status {
    color: rgba(var(--accent-rgb), 1);
}

/* Header Styling */
.dashboard-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    margin: -28px -24px 20px -24px;
    position: relative;
    overflow: visible;
    z-index: 10;
    background: linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.10) 0%,
            rgba(var(--accent-rgb), 0.04) 40%,
            transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

/* Ambient light sweep — clip-path keeps it inside the header without overflow:hidden */
/* Header sweep — a soft accent band drifting across the header. Implemented
 * as a real child strip translated inside an overflow-clipped wrap (NOT an
 * animated background-position on a pseudo): transform+opacity stay on the
 * compositor, while background-position repainted the full-width band every
 * frame for half of every 12s cycle. Same visuals, ~zero paint. */
.dashboard-header-sweep {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    pointer-events: none;
}

.dashboard-header-sweep span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.04) 40%,
        rgba(var(--accent-rgb), 0.08) 50%,
        rgba(var(--accent-rgb), 0.04) 60%,
        transparent 100%);
    transform: translateX(-40%);
    opacity: 0;
    animation: dashboard-header-sweep 12s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes dashboard-header-sweep {
    0%, 100% { transform: translateX(-40%); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateX(106.7%); opacity: 1; }
    60% { opacity: 0; }
}

.dashboard-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.2) 20%,
        rgba(var(--accent-rgb), 0.35) 50%,
        rgba(var(--accent-rgb), 0.2) 80%,
        transparent 100%);
}

.header-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Page header icon — compact by default (unified header bar); the Dashboard
   keeps the full-size hero illustration (see #dashboard-page override below). */
.page-header-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Dashboard is the one page that keeps the large hero illustration. */
#dashboard-page .page-header-icon {
    width: 176px;
    height: 176px;
}

.page-header-icon:hover {
    transform: scale(1.08) rotate(-3deg);
    filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.5));
}

.header-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

@keyframes page-title-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (max-width: 768px) {
    .page-header-icon {
        width: 100px;
        height: 100px;
    }
}

.header-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
    line-height: 1.5;
}

/* ── The hello strip — the dashboard header says something true instead of
   its own name: a greeting, then live facts (library size, busy workers,
   next scan), each a shortcut to where the number lives. The orbs beside
   it stay the star; this stays quiet. ── */
.header-hello { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hello-greeting {
    display: flex; align-items: center; gap: 14px; margin: 0;
    font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px;
    text-transform: lowercase;
}
/* Same shimmer treatment the old title had — the type language carries over,
   only the words changed. */
.hello-greeting > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}
.hello-greeting .page-header-icon { width: 52px; height: 52px; }
.hello-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.hello-stat {
    background: none; border: none; padding: 0; margin: 0;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: rgba(255, 255, 255, 0.55); letter-spacing: 0.2px;
    cursor: pointer; transition: color 0.15s ease;
}
.hello-stat:hover { color: #fff; }
.hello-stat + .hello-stat::before {
    content: '\00B7'; margin: 0 10px; color: rgba(255, 255, 255, 0.25);
    /* the dot is chrome — it must not light up with the chip's hover */
    display: inline-block;
}

/* Artist line on rail cards — its own hit-target straight to the artist
   page. A <button> now, so undo the UA chrome and keep the sub's look;
   the underline on hover is the only tell. */
.ya-card-sub--link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ya-card-sub--link:hover { text-decoration: underline; color: #fff; }
/* Six buttons now — they wrap instead of crushing the title. */
.library-status-actions { flex-wrap: wrap; row-gap: 6px; }

.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
    width: 100%;
}

/* Watchlist / Wishlist quick-nav — top-right of header */
.header-quick-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    position: absolute;
    top: 14px;
    right: 24px;
    z-index: 2;
}

/* ── Worker Orbs ── */
.worker-orb-canvas {
    transition: opacity 0.4s ease;
}

.worker-orb-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
}

.worker-orb-reveal {
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: workerOrbReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes workerOrbReveal {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

.header-button {
    height: 45px;
    border: none;
    border-radius: 22px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Enhanced glassmorphic effect */
    backdrop-filter: blur(8px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.header-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ── Watchlist & Wishlist Hero Buttons ── */
.watchlist-button,
.wishlist-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    overflow: visible;
    background: rgba(18, 18, 22, 0.85);
    backdrop-filter: blur(16px) saturate(1.4);
    color: #e0e0e0;
    border: none;
    border-radius: 22px;
    z-index: 0;
}

/* Animated gradient border using border-image-like technique */
.watchlist-button::before,
.wishlist-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1.5px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.watchlist-button::before {
    background: linear-gradient(
        135deg,
        #ff8f00, #ffc107, #ffd54f, #ffab00, #ffc107, #ff8f00
    );
    background-size: 300% 300%;
    animation: heroBorderFlow 4s ease infinite;
}

.wishlist-button::before {
    background: linear-gradient(
        135deg,
        rgb(var(--accent-rgb)),
        rgb(var(--accent-light-rgb)),
        rgb(var(--accent-neon-rgb)),
        rgb(var(--accent-rgb)),
        rgb(var(--accent-light-rgb)),
        rgb(var(--accent-rgb))
    );
    background-size: 300% 300%;
    animation: heroBorderFlow 4s ease infinite;
    animation-delay: 2s;
}

@keyframes heroBorderFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Outer glow */
.watchlist-button {
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wishlist-button {
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.12), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.watchlist-button:hover {
    box-shadow: 0 0 24px rgba(255, 193, 7, 0.25), 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

.wishlist-button:hover {
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25), 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
}

/* Icon */
.hero-btn-icon {
    font-size: 16px;
    line-height: 1;
}

/* Label */
.hero-btn-label {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Watchlist text color tint */
.watchlist-button .hero-btn-label {
    color: #ffd54f;
}

.wishlist-button .hero-btn-label {
    color: rgb(var(--accent-light-rgb));
}

/* Count badge */
.hero-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    transition: all 0.3s ease;
}

.watchlist-button .hero-btn-badge {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.wishlist-button .hero-btn-badge {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.hero-btn-badge.has-items {
    animation: badgePulse 2s ease-in-out infinite;
}

.watchlist-button .hero-btn-badge.has-items {
    background: rgba(255, 193, 7, 0.25);
    border-color: rgba(255, 193, 7, 0.5);
}

.wishlist-button .hero-btn-badge.has-items {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: rgba(var(--accent-rgb), 0.5);
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* Shimmer sweep — clipped inside button */
.hero-btn-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hero-btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    animation: shimmerSweep 5s ease-in-out infinite;
}

.watchlist-button .hero-btn-shimmer::after {
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 193, 7, 0.1) 50%,
        transparent 70%
    );
}

.wishlist-button .hero-btn-shimmer::after {
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(var(--accent-rgb), 0.1) 50%,
        transparent 70%
    );
    animation-delay: 2.5s;
}

@keyframes shimmerSweep {
    0%, 100% { left: -100%; }
    40%, 60% { left: 100%; }
}

/* ── Wishlist inactive state ── */
.wishlist-button.wishlist-inactive {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.wishlist-button.wishlist-inactive::before {
    background: linear-gradient(135deg, #444, #555, #444);
    background-size: 100% 100%;
    animation: none;
}

.wishlist-button.wishlist-inactive .hero-btn-label {
    color: #777;
}

.wishlist-button.wishlist-inactive .hero-btn-badge {
    background: rgba(255, 255, 255, 0.06);
    color: #666;
    border-color: rgba(255, 255, 255, 0.1);
    animation: none;
}

.wishlist-button.wishlist-inactive .hero-btn-shimmer {
    display: none;
}

.wishlist-button.wishlist-inactive:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08), 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Active wishlist just uses the normal accent styles above */
.wishlist-button.wishlist-active {
    /* already styled by default .wishlist-button rules */
}

/* Service Status Grid */
.service-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.service-card {
    /* backdrop-filter dropped: the 90% opaque bg made blur(12px) invisible (x3 cards,
       pure GPU waste). Bumped to 0.97 so the now-unblurred sliver is imperceptible. */
    background: rgba(18, 18, 22, 0.97);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

/* Top accent line */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: all 0.3s;
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.06);
}

.service-card:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-card-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.service-card-indicator {
    font-size: 18px;
}

.service-card-indicator.connected {
    color: rgb(var(--accent-rgb));
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6), 0 0 16px rgba(var(--accent-rgb), 0.3);
    animation: service-pulse-green 3s ease-in-out infinite;
}

.service-card-indicator.disconnected {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5), 0 0 16px rgba(255, 68, 68, 0.2);
}

.service-card-indicator.fallback {
    color: #f5a623;
    text-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
}

.service-card-status-text.fallback {
    color: #f5a623;
}

.service-card:has(.service-card-indicator.fallback)::before {
    background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.4), transparent);
}

.service-card-indicator.rate-limited {
    color: #facc15;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}

.service-card-status-text.rate-limited {
    color: rgba(250, 204, 21, 0.9);
}

@keyframes service-pulse-green {
    0%, 100% { text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6), 0 0 16px rgba(var(--accent-rgb), 0.3); }
    50% { text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8), 0 0 24px rgba(var(--accent-rgb), 0.5); }
}

/* Top accent line when connected */
.service-card:has(.service-card-indicator.connected)::before {
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    left: 10%;
    right: 10%;
}

/* Top accent line when disconnected */
.service-card:has(.service-card-indicator.disconnected)::before {
    background: linear-gradient(90deg, transparent, rgba(255, 68, 68, 0.4), transparent);
}

.service-card-status-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.service-card-response-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    font-variant-numeric: tabular-nums;
}

.service-card-footer {
    margin-top: auto;
    padding-top: 10px;
}

.service-card-button {
    width: 100%;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    user-select: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

.service-card-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card-button:hover::before {
    opacity: 1;
}

.service-card-button:hover {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}


/* Enrichment Services Section */
.enrichment-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.enrichment-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.enrichment-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.3);
}

.enrichment-status-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.enrichment-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: default;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.enrichment-chip[onclick] {
    cursor: pointer;
}

.enrichment-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transition: all 0.25s ease;
}

.enrichment-chip[onclick]:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

/* Status: Running */
.enrichment-chip.status-running::before {
    background: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.3);
}

.enrichment-chip.status-running .enrichment-chip-dot {
    background: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.4);
}

/* Status: Idle */
.enrichment-chip.status-idle::before {
    background: #4CAF50;
    opacity: 0.5;
}

.enrichment-chip.status-idle .enrichment-chip-dot {
    background: #4CAF50;
    opacity: 0.5;
}

/* Status: Paused */
.enrichment-chip.status-paused::before {
    background: #FFB74D;
    box-shadow: 0 0 6px rgba(255, 183, 77, 0.3);
}

.enrichment-chip.status-paused .enrichment-chip-dot {
    background: #FFB74D;
    box-shadow: 0 0 5px rgba(255, 183, 77, 0.3);
}

/* Status: Stopped */
.enrichment-chip.status-stopped::before {
    background: #EF5350;
    box-shadow: 0 0 6px rgba(239, 83, 80, 0.3);
}

.enrichment-chip.status-stopped .enrichment-chip-dot {
    background: #EF5350;
    box-shadow: 0 0 4px rgba(239, 83, 80, 0.3);
}

/* Status: Not Configured */
.enrichment-chip.status-not-configured {
    opacity: 0.5;
    border-style: dashed;
}

.enrichment-chip.status-not-configured::before {
    background: rgba(255, 255, 255, 0.15);
}

.enrichment-chip.status-not-configured .enrichment-chip-dot {
    background: rgba(255, 255, 255, 0.2);
}

.enrichment-chip.status-not-configured[onclick]:hover {
    opacity: 0.8;
    border-color: rgba(var(--accent-rgb), 0.3);
}

.enrichment-chip.status-not-configured[onclick]:hover::before {
    background: rgba(var(--accent-rgb), 0.4);
}

.enrichment-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s;
}

.enrichment-chip-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.enrichment-chip-status {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

/* Static, readable status colors that work with any accent */
.enrichment-chip.status-running .enrichment-chip-status,
.enrichment-chip.status-idle .enrichment-chip-status {
    color: rgba(76, 175, 80, 0.8);  /* green — healthy */
}

.enrichment-chip.status-paused .enrichment-chip-status {
    color: rgba(255, 183, 77, 0.8); /* amber — paused */
}

.enrichment-chip.status-stopped .enrichment-chip-status {
    color: rgba(239, 83, 80, 0.8);  /* red — stopped */
}

.enrichment-chip.status-not-configured .enrichment-chip-status {
    color: rgba(255, 255, 255, 0.35); /* dim white — not set up */
}

.enrichment-chip-activity {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding-left: 8px;
}

/* Spotify budget bar — parent chip needs extra bottom padding */
.enrichment-chip:has(.enrichment-chip-budget) {
    padding-bottom: 12px;
}

.enrichment-chip-budget {
    position: absolute;
    bottom: 3px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.enrichment-chip-budget-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.7), var(--accent));
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.enrichment-chip-budget-bar.high {
    background: linear-gradient(90deg, rgba(245, 166, 35, 0.7), #f5a623);
}

.enrichment-chip-budget-bar.exhausted {
    background: linear-gradient(90deg, rgba(255, 71, 87, 0.7), #ff4757);
}


/* ========================================= */
/* API Rate Monitor Gauges                   */
/* ========================================= */

.rate-monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.rate-gauge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 10px;
    border-radius: 14px;
    background: rgba(18, 18, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    overflow: visible;
}

.rate-gauge-card:hover {
    background: rgba(24, 24, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.rate-gauge-card.active {
    border-color: rgba(255, 255, 255, 0.07);
}

.rate-gauge-card.danger {
    border-color: rgba(239, 68, 68, 0.3);
    animation: gauge-danger-pulse 1.8s ease-in-out infinite;
}

@keyframes gauge-danger-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.12); }
}

.rate-gauge-card.rate-limited {
    border-color: rgba(239, 68, 68, 0.4);
    animation: gauge-danger-pulse 1.8s ease-in-out infinite;
}

/* Card header — service name + status */
.gauge-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.gauge-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gauge-card-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.3px;
}

.gauge-card-status {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}
.gauge-card-status[data-status="running"] { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.gauge-card-status[data-status="idle"] { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); }
.gauge-card-status[data-status="paused"] { background: rgba(234, 179, 8, 0.12); color: #fbbf24; }
.gauge-card-status[data-status="stopped"] { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.2); }
.gauge-card-status[data-status="not_configured"] { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.2); }

/* Arc wrap */
.gauge-arc-wrap {
    display: flex;
    justify-content: center;
    margin: -4px 0;
}

/* Stats row below gauge */
.gauge-card-stats {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    margin-top: -2px;
}

.gauge-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.gauge-card-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.gauge-card-stat-label {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Spotify budget bar */
.gauge-budget-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin: 6px 4px 2px;
    overflow: hidden;
}

.gauge-budget-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(29, 185, 84, 0.7), #1DB954);
    transition: width 0.8s ease;
}

.gauge-budget-bar.high .gauge-budget-fill { background: linear-gradient(90deg, rgba(245, 166, 35, 0.7), #f5a623); }
.gauge-budget-bar.exhausted .gauge-budget-fill { background: linear-gradient(90deg, rgba(239, 68, 68, 0.7), #ef4444); }

.gauge-budget-label {
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.2);
}

/* Rate limit badge */
.gauge-rl-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    margin-top: 6px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    font-size: 9px;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: 0.5px;
}

.gauge-rl-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: gauge-rl-blink 1s ease-in-out infinite;
}

@keyframes gauge-rl-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.gauge-rl-time {
    color: rgba(239, 68, 68, 0.5);
    font-weight: 500;
}

/* SVG gauge */
.rate-gauge-svg {
    width: 100%;
    max-width: 160px;
    height: auto;
    overflow: visible;
}

.gauge-active-arc {
    transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}

.gauge-dot {
    transition: cx 0.6s cubic-bezier(0.4, 0, 0.2, 1), cy 0.6s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease;
}

.gauge-dot + circle {
    transition: cx 0.6s cubic-bezier(0.4, 0, 0.2, 1), cy 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-value {
    font-family: -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif;
    font-size: 24px;
    font-weight: 800;
    fill: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.5px;
}

.gauge-unit {
    font-family: -apple-system, sans-serif;
    font-size: 9px;
    fill: rgba(255, 255, 255, 0.2);
}

.gauge-label {
    display: none; /* Label is now in the card header, not the SVG */
}

/* Rate Monitor Detail Modal */
.rate-modal {
    background: #141418;
    border-radius: 20px;
    width: 740px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.rate-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rate-modal-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rate-modal-header-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rate-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.rate-modal-header-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.rate-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
}

.rate-modal-chart-wrap {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.rate-modal-chart-wrap canvas {
    width: 100%;
    height: auto;
    display: block;
}

.rate-modal-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 4px 0;
    min-height: 0;
}

.rate-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.rate-chart-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rate-modal-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.rate-modal-endpoints {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rate-modal-ep {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.rate-modal-ep-name {
    width: 140px;
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rate-modal-ep-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.rate-modal-ep-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}

.rate-modal-ep-value {
    width: 60px;
    flex-shrink: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
}

.rate-modal-ep-empty {
    text-align: center;
    padding: 16px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

@media (max-width: 900px) {
    .rate-monitor-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .rate-monitor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gauge-card-stats { gap: 2px; }
    .gauge-card-stat-val { font-size: 11px; }
}

/* System Stats Grid */
.stats-grid-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.stat-card-dashboard {
    /* backdrop-filter dropped: 90% opaque bg made blur(12px) invisible (x3, GPU waste);
       0.97 keeps it looking solid. */
    background: rgba(18, 18, 22, 0.97);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top accent line */
.stat-card-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
    border-radius: 2px;
    transition: all 0.3s;
}

.stat-card-dashboard:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.06);
}

.stat-card-dashboard:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.stat-card-title {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-card-value {
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.stat-card-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}

/* Tools & Operations Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.tool-card {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top accent line */
.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
    border-radius: 2px;
    transition: all 0.3s;
}

.tool-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.06);
}

.tool-card:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.tool-card-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.01em;
}

.tool-card-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    min-height: 0;
}

.tool-card-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tool-card-controls select {
    flex-grow: 1;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    transition: all 0.2s;
    cursor: pointer;
}

.tool-card-controls select:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.tool-card-controls select:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}

.tool-card-controls select option {
    background: #1a1a1e;
    color: #ffffff;
}

.tool-card-controls button {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    user-select: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.8);
    min-width: 130px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
}

.tool-card-controls button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tool-card-controls button:hover:not(:disabled)::before {
    opacity: 1;
}

.tool-card-controls button:hover:not(:disabled) {
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.2), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
}

.tool-card-controls button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.tool-card-controls button:disabled {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.04);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Media Scan Button Styling */
.media-scan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9) 0%, rgba(var(--accent-light-rgb), 0.9) 100%);
    padding: 12px 22px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.2);
    width: 100%;
    border-radius: 10px;
}

.media-scan-btn:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

.media-scan-btn .scan-icon {
    font-size: 18px;
    animation: pulse 2s ease-in-out infinite;
}

.media-scan-btn:disabled .scan-icon {
    animation: spin 1s linear infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.tool-card-progress-section {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-phase-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.progress-details-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.progress-bar-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: rgb(var(--accent-rgb));
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
}

/* Backup Manager List */
.backup-list-container {
    max-height: 200px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 10px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.backup-list-container:empty {
    display: none;
}

.backup-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 8px 10px;
    transition: background 0.2s ease;
}

.backup-list-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.backup-list-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.backup-list-date {
    font-size: 12px;
    color: #e0e0e0;
    white-space: nowrap;
}

.backup-list-size {
    font-size: 11px;
    color: #888;
}

.backup-list-version {
    font-size: 10px;
    color: var(--accent-primary, #1db954);
    background: rgba(29, 185, 84, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.backup-list-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.backup-list-actions button {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    color: #b3b3b3;
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backup-list-actions .backup-dl-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-rgb));
}

.backup-list-actions .backup-restore-btn:hover {
    background: rgba(255, 183, 77, 0.25);
    color: #ffb74d;
}

.backup-list-actions .backup-delete-btn:hover {
    background: rgba(244, 67, 54, 0.25);
    color: #f44336;
}

.backup-list-container::-webkit-scrollbar {
    width: 4px;
}

.backup-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.backup-list-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}


/* Activity Feed */
.activity-feed-container {
    /* Premium glassmorphic foundation */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.97) 0%,
            rgba(18, 18, 18, 0.99) 100%);
    /* backdrop-filter dropped: 95-99% opaque bg already hid the blur (GPU waste). */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px;
    position: relative;
    overflow: hidden;

    /* Neumorphic depth shadows */
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    max-height: 350px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px 10px 12px;
    border-left: 3px solid rgba(var(--accent-rgb), 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    transition: all 0.2s ease;
    animation: activitySlideIn 0.3s ease-out;
}

.activity-item:hover {
    background: rgba(var(--accent-rgb), 0.04);
    border-bottom-color: transparent;
    border-left-color: rgba(var(--accent-rgb), 0.5);
}

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

.activity-icon {
    font-size: 16px;
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.15) 0%,
            rgba(var(--accent-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.activity-text-content {
    flex-grow: 1;
}

.activity-title {
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
}

.activity-subtitle {
    font-size: 11px;
    color: #b3b3b3;
}

.activity-time {
    font-size: 11px;
    color: #b3b3b3;
    white-space: nowrap;
}

/* Responsive Design Enhancements */
@media (max-width: 900px) {
    .header-quick-nav {
        position: static;
        width: 100%;
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

    .header-quick-nav .header-button {
        flex: 1;
        justify-content: center;
    }

    /* Hide worker orb hover tooltips on mobile — status info available on Tools page */
    .musicbrainz-tooltip,
    .spotify-enrich-tooltip,
    .audiodb-tooltip,
    .deezer-tooltip,
    .itunes-enrich-tooltip,
    .lastfm-enrich-tooltip,
    .genius-enrich-tooltip,
    .tidal-enrich-tooltip,
    .qobuz-enrich-tooltip,
    .discogs-tooltip,
    .amazon-enrich-tooltip,
    .hydrabase-tooltip,
    .repair-tooltip,
    .soulid-tooltip {
        display: none !important;
    }
}

@media (max-width: 1200px) {
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .service-status-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .stats-grid-dashboard {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    /* Dashboard enrichment service buttons: worker-orbs is disabled on mobile,
       so these render as real buttons. Spread the 44px icon buttons across the
       full width in an even auto-fit grid (no ragged centered rows), and give
       the wider "Manage Workers" pill its own full-width row. Scoped to the
       dashboard so other pages' .header-actions (e.g. Settings) are untouched. */
    #dashboard-page .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        justify-items: center;
        align-items: center;
        gap: 12px 10px;
    }

    #dashboard-page .header-actions .em-manage-btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .header-quick-nav {
        position: static;
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .header-quick-nav .header-button {
        flex: 1;
        justify-content: center;
    }

    .service-status-grid,
    .stats-grid-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .enrichment-status-grid {
        gap: 6px;
    }

    .enrichment-chip {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .enrichment-chip-name {
        font-size: 11px;
    }

    .enrichment-chip-status {
        font-size: 9px;
    }

    .tool-card-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .tool-card-controls button {
        width: 100%;
        min-width: auto;
    }
}

/* Custom Scrollbar for Activity Feed */
.activity-feed-container::-webkit-scrollbar {
    width: 8px;
}

.activity-feed-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.activity-feed-container::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
}

.activity-feed-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

/* Activity item entrance animation */
@keyframes activitySlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Section Title Row (header + button) ─────────────────────────── */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title-row .section-title {
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title-row .section-title::after {
    display: none;
}

.library-history-btn {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.library-history-btn:hover {
    color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── Library History Modal ───────────────────────────────────────── */
#library-history-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

#library-history-overlay.hidden {
    display: none !important;
}

.library-history-modal {
    width: 700px;
    max-width: 95vw;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(16, 16, 16, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.library-history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.library-history-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.library-history-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.library-history-modal-close:hover {
    color: #fff;
}

.library-history-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.library-history-tab {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.library-history-tab:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}

.library-history-tab.active {
    color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.library-history-tab-count {
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.library-history-tab.active .library-history-tab-count {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
}

.library-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    min-height: 200px;
}

.library-history-list::-webkit-scrollbar {
    width: 6px;
}

.library-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.library-history-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 3px;
}

.library-history-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-left: 3px solid rgba(var(--accent-rgb), 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.library-history-entry:hover {
    background: rgba(var(--accent-rgb), 0.04);
    border-left-color: rgba(var(--accent-rgb), 0.5);
}

.library-history-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.library-history-thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.library-history-entry-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* #876: quarantine "alternatives for one song" group — a collapsible parent
   row wrapping the standard entry rows for each failed source attempt. */
.lh-quarantine-group {
    border-left: 3px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 8px;
    margin-bottom: 4px;
    background: rgba(var(--accent-rgb), 0.03);
}

.lh-quarantine-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.lh-quarantine-group-header:hover {
    background: rgba(var(--accent-rgb), 0.06);
}

.lh-quarantine-group-text {
    flex: 1;
    min-width: 0;
}

.lh-quarantine-group-count {
    flex-shrink: 0;
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.95);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}

.lh-quarantine-group-header .lh-expand-btn {
    transition: transform 0.18s ease;
}

.lh-quarantine-group:not(.lh-qgroup-collapsed) .lh-quarantine-group-header .lh-expand-btn {
    transform: rotate(180deg);
}

.lh-quarantine-group-members {
    padding: 0 8px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lh-quarantine-group.lh-qgroup-collapsed .lh-quarantine-group-members {
    display: none;
}

.library-history-entry-row1 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.library-history-entry-text {
    flex: 1;
    min-width: 0;
}

.library-history-entry-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-history-entry-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.library-history-entry-details {
    display: none;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 4px;
    animation: stgSlideIn 0.2s ease-out;
}
.library-history-entry.lh-expanded .library-history-entry-details {
    display: block;
}

.library-history-entry-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

.library-history-entry.lh-expandable {
    cursor: pointer;
}

.lh-expand-btn {
    color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    padding: 0 4px;
    flex-shrink: 0;
    transition: color 0.2s, transform 0.25s;
    line-height: 1;
}
.library-history-entry.lh-expandable:hover .lh-expand-btn {
    color: rgba(255, 255, 255, 0.5);
}
.library-history-entry.lh-expanded .lh-expand-btn {
    transform: rotate(180deg);
    color: var(--accent-color, #1db954);
}

.library-history-entry-source {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    word-break: break-all;
    line-height: 1.6;
    padding: 4px 0 0;
}
.lh-prov-label {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.3px;
    margin-right: 4px;
}
.lh-prov-dim {
    color: rgba(255, 255, 255, 0.15);
}
.lh-prov-mismatch {
    color: #ef5350;
}

.library-history-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.library-history-badge.download {
    color: rgba(100, 200, 130, 0.9);
    background: rgba(100, 200, 130, 0.1);
    border: 1px solid rgba(100, 200, 130, 0.2);
}

.library-history-badge.download.source-torrent {
    color: #5dade2;
    background: rgba(93, 173, 226, 0.1);
    border-color: rgba(93, 173, 226, 0.25);
}

.library-history-badge.download.source-usenet {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.25);
}

.library-history-badge.download.source-staging {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.library-history-badge.import {
    color: rgba(120, 160, 230, 0.9);
    background: rgba(120, 160, 230, 0.1);
    border: 1px solid rgba(120, 160, 230, 0.2);
}

.history-source-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
}

.history-source-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid;
    background: rgba(255, 255, 255, 0.03);
}

.library-history-entry-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    padding-top: 1px;
}

.library-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.library-history-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.library-history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.library-history-pagination:empty {
    display: none;
}

.library-history-page-btn {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.library-history-page-btn:hover:not(:disabled) {
    color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.library-history-page-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.library-history-page-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 8px;
}

/* ── Download Audit Trail Modal ─────────────────────────── */
.lh-audit-btn {
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: rgb(var(--accent-rgb));
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s, border-color 0.15s;
}
.lh-audit-btn:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-rgb), 0.6);
}

.download-audit-modal {
    width: 1040px;
    max-width: 96vw;
    max-height: 88vh;
    background: linear-gradient(180deg, rgba(20, 20, 22, 0.98), rgba(12, 12, 14, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7);
    position: relative;
}
.download-audit-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.download-audit-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Hero header — album art + title + meta + status pills */
.download-audit-hero {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 18px;
    align-items: center;
    padding: 28px 32px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.download-audit-hero-art {
    width: 88px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.download-audit-hero-art-placeholder {
    display: grid;
    place-items: center;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.25);
}
.download-audit-hero-text {
    min-width: 0;
}
.download-audit-hero-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.download-audit-hero-meta {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.5px;
    margin-bottom: 12px;
}
.download-audit-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.download-audit-hero-pill {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}
.download-audit-hero-pill-source {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-rgb));
}
.download-audit-hero-pill-pass,
.download-audit-hero-pill-verify.download-audit-hero-pill-pass {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}
.download-audit-hero-pill-fail,
.download-audit-hero-pill-error {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.3);
    color: #ef5350;
}
.download-audit-hero-pill-verified {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
}
.download-audit-hero-pill-human_verified {
    background: rgba(52, 152, 219, 0.12);
    border-color: rgba(52, 152, 219, 0.35);
    color: #3498db;
}
.download-audit-hero-pill-force_imported {
    background: rgba(230, 126, 34, 0.12);
    border-color: rgba(230, 126, 34, 0.35);
    color: #e67e22;
}
.download-audit-hero-pill-unverified {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.35);
    color: #f1c40f;
}

/* Tab bar */
.download-audit-tabs {
    display: flex;
    gap: 4px;
    padding: 0 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.download-audit-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 14px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: color 0.15s;
}
.download-audit-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}
.download-audit-tab.active {
    color: #fff;
    border-bottom-color: rgb(var(--accent-rgb));
}

.download-audit-body {
    overflow-y: auto;
    padding: 24px 32px 28px;
    flex: 1;
}

/* Horizontal stepper (Lifecycle tab) */
.download-audit-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 22px;
    padding: 0 8px;
}
.download-audit-stepper-node {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    padding: 0;
    flex: 0 0 auto;
    transition: color 0.15s;
}
.download-audit-stepper-node:hover { color: rgba(255, 255, 255, 0.85); }
.download-audit-stepper-node.active { color: #fff; }
.download-audit-stepper-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 14px;
}
.download-audit-stepper-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.15s, box-shadow 0.15s;
}
.download-audit-stepper-node.active .download-audit-stepper-circle {
    transform: scale(1.08);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}
.download-audit-stepper-complete .download-audit-stepper-circle {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.12);
}
.download-audit-stepper-partial .download-audit-stepper-circle {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.45);
    background: rgba(250, 204, 21, 0.12);
}
.download-audit-stepper-error .download-audit-stepper-circle {
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.45);
    background: rgba(239, 83, 80, 0.12);
}
.download-audit-stepper-label {
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: inherit;
}

/* Detail card for the selected step */
.download-audit-step-card {
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.download-audit-step-card-title {
    font-weight: 600;
    color: #fff;
    font-size: 15px;
    margin-bottom: 8px;
}
.download-audit-step-detail {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.55;
}
.download-audit-step-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 1.55;
    word-break: break-word;
}
.download-audit-step-card-complete { border-color: rgba(74, 222, 128, 0.18); }
.download-audit-step-card-partial { border-color: rgba(250, 204, 21, 0.18); }
.download-audit-step-card-error { border-color: rgba(239, 83, 80, 0.18); }

/* Final path strip */
.download-audit-final-path {
    margin-top: 4px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.download-audit-final-path-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-bottom: 6px;
}
.download-audit-final-path code {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    word-break: break-all;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* Chips used in old layout — kept for the file-info strip in Tags */
.download-audit-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
}

/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width: 760px) {
    .download-audit-modal {
        width: 100%;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
    .download-audit-hero {
        grid-template-columns: 64px 1fr;
        gap: 14px;
        padding: 20px 18px 16px;
    }
    .download-audit-hero-art {
        width: 64px;
        height: 64px;
    }
    .download-audit-hero-title {
        font-size: 17px;
        white-space: normal;  /* allow wrap on narrow screens */
    }
    .download-audit-hero-meta {
        font-size: 12.5px;
        margin-bottom: 8px;
    }
    .download-audit-tabs {
        padding: 0 12px;
        overflow-x: auto;
        scrollbar-width: none;  /* hide on Firefox */
    }
    .download-audit-tabs::-webkit-scrollbar { display: none; }
    .download-audit-tab {
        padding: 10px 12px;
        font-size: 12.5px;
        flex-shrink: 0;
    }
    .download-audit-body {
        padding: 16px 16px 24px;
    }
    /* Stepper: scroll horizontally instead of cramming all 6 nodes.
       Connector lines look weird when scrolling so hide them. */
    .download-audit-stepper {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 18px;
        padding: 0 4px 4px;
    }
    .download-audit-stepper::-webkit-scrollbar { display: none; }
    .download-audit-stepper-line { display: none; }
    .download-audit-stepper-node { min-width: 56px; }
    .download-audit-step-card {
        padding: 14px 16px;
    }
    .download-audit-step-card-title {
        font-size: 14px;
    }
    .download-audit-close {
        top: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .download-audit-hero {
        grid-template-columns: 1fr;  /* stack art above text */
        text-align: left;
        justify-items: start;
    }
    .download-audit-hero-art {
        width: 72px;
        height: 72px;
    }
}
/* Tags tab — chips strip + 2-column metadata + source sub-cards */
.download-audit-tags-empty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    padding: 8px 0;
}
.download-audit-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}
.download-audit-tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 18px;
}
@media (max-width: 800px) {
    .download-audit-tags-grid { grid-template-columns: 1fr; gap: 16px; }
}
.download-audit-tag-group {
    /* No box — just spacing + title */
}
.download-audit-tag-group-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    font-weight: 600;
}
/* Stacked label-above-value pattern so long values (MBIDs, URLs,
   joined genre lists) never get squeezed by a fixed key column. */
.download-audit-tag-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.download-audit-tag-row:last-child { border-bottom: none; }
.download-audit-tag-key {
    color: rgba(255, 255, 255, 0.42);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.download-audit-tag-value {
    color: rgba(255, 255, 255, 0.88);
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 1.45;
}
.download-audit-tags-body {
    min-height: 60px;
}
.download-audit-sources {
    margin-top: 8px;
}
/* Cap at 2 cols max so long values (MBIDs ~36 chars) have room.
   Drops to 1 col below tablet width. */
.download-audit-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
}
@media (max-width: 760px) {
    .download-audit-source-grid { grid-template-columns: 1fr; }
}
.download-audit-source-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;  /* allow flex/grid children to shrink + wrap */
}
.download-audit-source-card-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--accent-rgb));
    margin-bottom: 8px;
}
.download-audit-source-card .download-audit-tag-row {
    padding: 5px 0;
    border-bottom-color: rgba(255, 255, 255, 0.03);
}
.download-audit-source-card .download-audit-tag-value {
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 12px;
}

/* Lyrics tab — full-height transcript with dimmed timecodes */
.download-audit-lyrics-body {
    min-height: 60px;
}
.download-audit-lyrics-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    white-space: pre-wrap;
}
.download-audit-lyric-timecode {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin-right: 8px;
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* ── Sync History Modal ─────────────────────────────────── */
.sync-history-modal {
    width: 750px;
    max-width: 95vw;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(16, 16, 16, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.sync-history-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sync-history-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.sync-history-modal-close {
    background: none; border: none; color: rgba(255, 255, 255, 0.5);
    font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s ease;
}
.sync-history-modal-close:hover { color: #fff; }
.sync-history-tabs {
    display: flex; gap: 4px; padding: 12px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap;
}
.sync-history-tab {
    font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: all 0.2s ease;
    display: flex; align-items: center; gap: 6px;
}
.sync-history-tab:hover { color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); }
.sync-history-tab.active { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.3); }
.sync-history-tab-count {
    font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4); padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
.sync-history-tab.active .sync-history-tab-count { background: rgba(var(--accent-rgb), 0.2); color: rgb(var(--accent-rgb)); }
.sync-history-list { flex: 1; overflow-y: auto; padding: 8px 16px; min-height: 200px; }
.sync-history-list::-webkit-scrollbar { width: 6px; }
.sync-history-list::-webkit-scrollbar-track { background: transparent; }
.sync-history-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 3px; }
.sync-history-entry {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border-left: 3px solid rgba(var(--accent-rgb), 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03); border-radius: 8px;
    transition: background 0.15s ease; cursor: default;
}
.sync-history-entry:hover { background: rgba(255, 255, 255, 0.03); }
.sync-history-thumb {
    width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}
.sync-history-thumb-placeholder {
    width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05); display: flex; align-items: center;
    justify-content: center; font-size: 20px;
}
.sync-history-entry-text { flex: 1; min-width: 0; }
.sync-history-entry-title {
    font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync-history-entry-meta {
    font-size: 11px; color: rgba(255, 255, 255, 0.35); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sync-history-stats {
    display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.sync-history-stat {
    font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
}
.sync-history-stat.found { background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.sync-history-stat.downloaded { background: rgba(var(--accent-rgb), 0.15); color: rgb(var(--accent-rgb)); }
.sync-history-stat.failed { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.sync-history-stat.pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.sync-history-source-badge {
    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
}
.sync-history-source-badge.spotify { background: rgba(30, 215, 96, 0.15); color: #1ed760; }
.sync-history-source-badge.beatport { background: rgba(148, 210, 42, 0.15); color: #94d22a; }
.sync-history-source-badge.youtube { background: rgba(255, 0, 0, 0.15); color: #ff4444; }
.sync-history-source-badge.tidal { background: rgba(0, 255, 255, 0.15); color: #00cccc; }
.sync-history-source-badge.deezer { background: rgba(160, 54, 204, 0.15); color: #cd5cf0; }
.sync-history-source-badge.wishlist { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
.sync-history-source-badge.library { background: rgba(158, 158, 158, 0.15); color: #9e9e9e; }
.sync-history-source-badge.discover { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.sync-history-source-badge.mirrored { background: rgba(100, 181, 246, 0.15); color: #64b5f6; }
.sync-history-source-badge.spotify_public { background: rgba(30, 215, 96, 0.1); color: #1ed760; }
.sync-history-source-badge.listenbrainz { background: rgba(255, 107, 53, 0.15); color: #ff6b35; }
.sync-history-entry-time {
    font-size: 11px; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; text-align: right; min-width: 50px;
}
.sync-history-resync-btn {
    font-size: 11px; font-weight: 600; color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 6px; padding: 4px 10px; cursor: pointer; transition: all 0.2s ease;
    flex-shrink: 0; white-space: nowrap;
}
.sync-history-resync-btn:hover {
    background: rgba(var(--accent-rgb), 0.2); border-color: rgba(var(--accent-rgb), 0.5);
}
.sync-history-delete-btn {
    font-size: 14px; line-height: 1; color: rgba(255, 255, 255, 0.2);
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; transition: all 0.15s ease; flex-shrink: 0;
}
.sync-history-delete-btn:hover { color: #f44336; background: rgba(244, 67, 54, 0.1); }
.sync-history-resync-btn:disabled {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
/* Expandable sync progress within history entry */
.sync-history-entry-wrapper { border-radius: 8px; overflow: hidden; }
.sync-history-entry-wrapper.syncing {
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.03);
}
.sync-history-live-progress {
    padding: 10px 14px; background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    animation: syncHistoryFadeIn 0.2s ease;
}
@keyframes syncHistoryFadeIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 120px; } }
.sync-history-progress-bar-container {
    height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 4px;
    overflow: hidden; margin-bottom: 8px;
}
.sync-history-progress-bar-fill {
    height: 100%; background: rgb(var(--accent-rgb)); border-radius: 4px;
    transition: width 0.3s ease; width: 0%;
}
.sync-history-progress-text {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: rgba(255, 255, 255, 0.5);
}
.sync-history-progress-step {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sync-history-progress-stats {
    display: flex; gap: 8px; flex-shrink: 0; font-size: 11px;
}
.sync-history-progress-stats span { color: rgba(255, 255, 255, 0.4); }
.sync-history-progress-stats .matched { color: #4caf50; }
.sync-history-progress-stats .failed { color: #f44336; }
.sync-history-cancel-btn {
    font-size: 10px; font-weight: 600; color: #f44336;
    background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.25);
    border-radius: 4px; padding: 3px 8px; cursor: pointer; margin-left: 8px;
    transition: all 0.2s ease;
}
.sync-history-cancel-btn:hover {
    background: rgba(244, 67, 54, 0.2); border-color: rgba(244, 67, 54, 0.5);
}
/* Sync to Server button in download modal */
.sync-to-server-btn {
    background: rgba(30, 136, 229, 0.15) !important; color: #42a5f5 !important;
    border: 1px solid rgba(30, 136, 229, 0.3) !important;
}
.sync-to-server-btn:hover {
    background: rgba(30, 136, 229, 0.25) !important; border-color: rgba(30, 136, 229, 0.5) !important;
}
.sync-to-server-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Sync progress area at bottom of download modal */
.modal-sync-progress-area {
    padding: 10px 16px; background: rgba(30, 136, 229, 0.05);
    border-top: 1px solid rgba(30, 136, 229, 0.15); border-radius: 0 0 12px 12px;
}
.modal-sync-progress-bar-bg {
    height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 4px;
    overflow: hidden; margin-bottom: 8px;
}
.modal-sync-progress-bar-fill {
    height: 100%; background: #42a5f5; border-radius: 4px;
    transition: width 0.3s ease; width: 0%;
}
.modal-sync-progress-info {
    display: flex; align-items: center; gap: 10px; font-size: 11px;
}
.modal-sync-step {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: rgba(255, 255, 255, 0.5);
}
.modal-sync-stats { display: flex; gap: 8px; flex-shrink: 0; }
.modal-sync-stats .matched { color: #4caf50; font-size: 11px; }
.modal-sync-stats .failed { color: #f44336; font-size: 11px; }
.modal-sync-cancel-btn {
    font-size: 10px; font-weight: 600; color: #f44336;
    background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.25);
    border-radius: 4px; padding: 3px 8px; cursor: pointer; flex-shrink: 0;
}
.modal-sync-cancel-btn:hover {
    background: rgba(244, 67, 54, 0.2); border-color: rgba(244, 67, 54, 0.5);
}
.sync-history-empty {
    text-align: center; padding: 48px 24px; color: rgba(255, 255, 255, 0.3); font-size: 14px;
}
.sync-history-loading { text-align: center; padding: 48px; color: rgba(255, 255, 255, 0.3); }
.sync-history-pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sync-history-page-btn {
    font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: all 0.2s ease;
}
.sync-history-page-btn:hover:not(:disabled) { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.1); }
.sync-history-page-btn:disabled { opacity: 0.3; cursor: default; }
.sync-history-page-info { font-size: 12px; color: rgba(255, 255, 255, 0.35); }
/* .sync-history-btn styling migrated to .btn .btn--sm .btn--secondary.
   The class is kept on the markup as a JS/onboarding selector hook, and
   .auto-sync-manager-btn still tints the Auto-Sync button accent. */

.auto-sync-manager-btn {
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(var(--accent-rgb), 0.12);
}

.auto-sync-manager-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-neon-rgb));
}

.auto-sync-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

.auto-sync-modal {
    width: calc(100vw - 96px);
    height: calc(100vh - 64px);
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 20px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(var(--accent-rgb), 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.auto-sync-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    position: relative;
}

.auto-sync-eyebrow {
    margin-bottom: 4px;
    color: rgba(var(--accent-rgb), 0.85);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.auto-sync-header h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auto-sync-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.45;
}

.auto-sync-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.auto-sync-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.auto-sync-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.auto-sync-summary div {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.auto-sync-summary span {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.auto-sync-summary small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-monitor {
    flex-shrink: 0;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.auto-sync-monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
}

.auto-sync-monitor-head > div {
    min-width: 0;
}

.auto-sync-monitor-head strong,
.auto-sync-monitor-head small,
.auto-sync-monitor-kicker {
    display: block;
}

.auto-sync-monitor-kicker {
    margin-bottom: 3px;
    color: rgba(var(--accent-rgb), 0.85);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auto-sync-monitor-head strong {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
}

.auto-sync-monitor-head small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

.auto-sync-monitor-head button,
.auto-sync-board-intro button,
.auto-sync-history-intro button {
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.auto-sync-monitor-head button:hover,
.auto-sync-board-intro button:hover,
.auto-sync-history-intro button:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-monitor-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.auto-sync-monitor-card,
.auto-sync-monitor-empty {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(22, 22, 22, 0.95);
}

.auto-sync-monitor-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
}

.auto-sync-monitor-card.running {
    border-color: rgba(var(--accent-rgb), 0.34);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 8px 24px rgba(var(--accent-rgb), 0.08);
}

.auto-sync-monitor-card.error {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.07);
}

.auto-sync-monitor-card.finished {
    border-color: rgba(34, 197, 94, 0.22);
    background: rgba(34, 197, 94, 0.055);
}

.auto-sync-monitor-card-main {
    min-width: 0;
    flex: 1;
}

.auto-sync-monitor-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.auto-sync-monitor-title-row strong {
    min-width: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-monitor-title-row span {
    flex-shrink: 0;
    color: rgb(var(--accent-light-rgb));
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.auto-sync-monitor-phase {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-monitor-progress {
    height: 5px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.auto-sync-monitor-progress div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    transition: width 0.25s ease;
}

.auto-sync-monitor-card small {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-monitor-card button {
    align-self: center;
    height: 28px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.auto-sync-monitor-card button:hover {
    border-color: rgba(var(--accent-rgb), 0.36);
    background: rgba(var(--accent-rgb), 0.14);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-monitor-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
}

.auto-sync-monitor-empty span,
.auto-sync-monitor-empty small {
    display: block;
}

.auto-sync-monitor-empty span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 600;
}

.auto-sync-monitor-empty small {
    margin-top: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.auto-sync-tabs button {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: color 0.2s ease, border-color 0.2s ease;
    position: relative;
    top: 1px;
}

.auto-sync-tabs button:hover {
    color: rgba(255, 255, 255, 0.85);
}

.auto-sync-tabs button.active {
    color: rgb(var(--accent-light-rgb));
    border-bottom-color: rgb(var(--accent-rgb));
}

.auto-sync-tab-panel {
    display: none;
    min-height: 0;
    flex: 1;
}

.auto-sync-tab-panel.active {
    display: flex;
    flex-direction: column;
}

.auto-sync-board-intro,
.auto-sync-automation-intro,
.auto-sync-history-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.auto-sync-board-intro strong,
.auto-sync-automation-intro strong,
.auto-sync-history-intro strong {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
}

.auto-sync-board-intro span,
.auto-sync-automation-intro span,
.auto-sync-history-intro span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    line-height: 1.4;
}

.auto-sync-body {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
}

.auto-sync-sidebar {
    min-height: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.auto-sync-sidebar-title {
    padding: 14px 18px 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-sidebar-filter {
    position: relative;
    padding: 4px 16px 10px;
}

.auto-sync-sidebar-search {
    width: 100%;
    height: 30px;
    padding: 0 28px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-sync-sidebar-search:focus {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.04);
}

.auto-sync-sidebar-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.auto-sync-sidebar-filter-clear {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.auto-sync-sidebar-filter-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.auto-sync-source-list {
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px 16px;
}

.auto-sync-source-group {
    margin-bottom: 14px;
}

.auto-sync-source-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 4px 4px;
}

.auto-sync-source-title {
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-source-bulk-btn {
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.auto-sync-source-bulk-btn:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: rgb(var(--accent-light-rgb));
}

/* Collapsible variant-kind group (Time Machine decades, Genres, ...) in the
   sidebar — one expandable header instead of every variant listed inline. */
.auto-sync-kind-group {
    margin-bottom: 8px;
}

.auto-sync-kind-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(22, 22, 22, 0.95);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-sync-kind-group-head:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    background: rgba(28, 28, 28, 0.98);
}

.auto-sync-kind-group.has-active .auto-sync-kind-group-head {
    border-color: rgba(var(--accent-rgb), 0.22);
}

.auto-sync-kind-group-chevron {
    flex-shrink: 0;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease;
}

.auto-sync-kind-group.expanded .auto-sync-kind-group-chevron {
    transform: rotate(90deg);
}

.auto-sync-kind-group-label {
    flex: 1;
    min-width: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-kind-group-active {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.16);
    color: rgb(var(--accent-light-rgb));
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-kind-group-count {
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 600;
}

.auto-sync-kind-group-body {
    display: none;
    padding: 8px 0 2px 12px;
}

.auto-sync-kind-group.expanded .auto-sync-kind-group-body {
    display: block;
}

/* Bulk-schedule popover for a source group */
.auto-sync-bulk-menu {
    position: fixed;
    z-index: 10001;
    min-width: 220px;
    padding: 8px;
    background: linear-gradient(135deg, #1f1f1f 0%, #161616 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auto-sync-bulk-menu-title {
    padding: 6px 8px 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-bulk-menu-buckets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.auto-sync-bulk-menu button {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s ease;
}

.auto-sync-bulk-menu button:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-bulk-menu-custom {
    margin-top: 2px;
}

/* The inline custom-interval field. The vanilla asked for this value with
   window.prompt, which the React port replaces per the repo's no-prompt rule,
   so these two classes are NEW rather than transcribed. */
/* The sync header's button row. The vanilla writes these three declarations
   inline at index.html 2236; the React port emits classes, not inline styles. */
.sync-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.auto-sync-bulk-menu-custom-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    margin-top: 2px;
}

.auto-sync-bulk-menu-custom-row input {
    padding: 6px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    min-width: 0;
}

.auto-sync-bulk-menu-custom-row input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.6);
}

.auto-sync-bulk-menu-error {
    grid-column: 1 / -1;
    color: #ef4444;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}

.auto-sync-bulk-menu-unschedule {
    color: rgba(255, 255, 255, 0.55) !important;
}

.auto-sync-bulk-menu-unschedule:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

/* Custom-interval column tag */
.auto-sync-column.custom {
    border-style: dashed;
}

.auto-sync-column-head em {
    font-style: normal;
    color: rgba(var(--accent-rgb), 0.7);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

.auto-sync-playlist,
.auto-sync-scheduled-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(22, 22, 22, 0.95);
    cursor: grab;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-sync-playlist {
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auto-sync-playlist::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    /* Pin the status dot to the first line of the name so multi-line
     * playlist titles flow underneath it instead of pushing it down. */
    margin-top: 6px;
}

.auto-sync-playlist.scheduled::before {
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
}

.auto-sync-playlist > div {
    min-width: 0;
    flex: 1;
}

.auto-sync-playlist:hover,
.auto-sync-scheduled-card:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    background: rgba(28, 28, 28, 0.98);
}

.auto-sync-playlist.scheduled {
    border-color: rgba(var(--accent-rgb), 0.22);
}

.auto-sync-playlist.unavailable {
    cursor: default;
    opacity: 0.5;
}

.auto-sync-playlist.unavailable::before {
    background: rgba(255, 255, 255, 0.1);
}

.auto-sync-playlist.unavailable:hover {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(22, 22, 22, 0.95);
}

.auto-sync-source-group-disabled {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.auto-sync-playlist-name,
.auto-sync-scheduled-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    /* Wrap long names instead of truncating with ellipsis — the
     * sidebar is narrow and long ListenBrainz / Spotify titles were
     * getting clipped beyond recognition. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.auto-sync-scheduled-name {
    line-height: 1.3;
}

.auto-sync-playlist-meta,
.auto-sync-scheduled-meta {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    line-height: 1.3;
}

.auto-sync-scheduled-meta {
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.auto-sync-organize-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    user-select: none;
}

.auto-sync-organize-toggle input {
    margin: 0;
}

.auto-sync-scheduled-timing {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.auto-sync-scheduled-timing span,
.auto-sync-scheduled-timing small {
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-scheduled-timing span {
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-scheduled-timing small {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
}

/* ── Hourly board: interval LANES (horizontal rows — Concept 1) ───────────── */
.auto-sync-lanes {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auto-sync-lane {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 0.22s ease, background 0.22s ease,
                box-shadow 0.22s ease, transform 0.18s ease;
}

.auto-sync-lane.empty {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.08);
}

.auto-sync-lane.filled {
    border-color: rgba(var(--accent-rgb), 0.22);
    background:
        linear-gradient(100deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0.012) 55%),
        rgba(255, 255, 255, 0.02);
}

.auto-sync-lane:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}

.auto-sync-lane.drag-over {
    border-color: rgba(var(--accent-rgb), 0.65);
    border-style: solid;
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-rgb), 0.35),
        0 10px 30px rgba(var(--accent-rgb), 0.16);
    transform: translateY(-1px);
}

.auto-sync-lane-badge {
    position: relative;
    flex: 0 0 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 14px 4px 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.auto-sync-lane-badge b {
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
}

.auto-sync-lane.filled .auto-sync-lane-badge b {
    background: linear-gradient(160deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auto-sync-lane-badge span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.auto-sync-lane-count {
    position: absolute;
    top: 0;
    right: 10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--accent-rgb), 0.9);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
}

.auto-sync-lane-track {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.auto-sync-lane-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 2px;
    color: rgba(255, 255, 255, 0.32);
    font-size: 12.5px;
    font-weight: 500;
}

.auto-sync-lane-hint-ic {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    font-size: 15px;
    line-height: 1;
}

.auto-sync-lane.drag-over .auto-sync-lane-hint { color: rgb(var(--accent-rgb)); }
.auto-sync-lane.drag-over .auto-sync-lane-hint-ic {
    border-style: solid;
    border-color: rgba(var(--accent-rgb), 0.6);
    color: rgb(var(--accent-rgb));
}

/* Scheduled cards flow horizontally inside a lane (override the column full-width) */
.auto-sync-lane .auto-sync-scheduled-card {
    width: auto;
    min-width: 212px;
    max-width: 264px;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    animation: autoSyncPop 0.24s ease both;
}

.auto-sync-lane .auto-sync-scheduled-card:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(0, 0, 0, 0.36);
}

@keyframes autoSyncPop {
    from { opacity: 0; transform: translateY(5px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.auto-sync-board {
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(10, minmax(220px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 12px;
}

.auto-sync-column {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.auto-sync-column.drag-over {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3), 0 6px 18px rgba(var(--accent-rgb), 0.12);
}

.auto-sync-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.auto-sync-column-head small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-column-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.auto-sync-column-list::-webkit-scrollbar,
.auto-sync-board::-webkit-scrollbar,
.auto-sync-source-list::-webkit-scrollbar,
.auto-sync-automation-list::-webkit-scrollbar,
.auto-sync-history-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.auto-sync-column-list::-webkit-scrollbar-thumb,
.auto-sync-board::-webkit-scrollbar-thumb,
.auto-sync-source-list::-webkit-scrollbar-thumb,
.auto-sync-automation-list::-webkit-scrollbar-thumb,
.auto-sync-history-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 999px;
}

.auto-sync-column-list::-webkit-scrollbar-thumb:hover,
.auto-sync-board::-webkit-scrollbar-thumb:hover,
.auto-sync-source-list::-webkit-scrollbar-thumb:hover,
.auto-sync-automation-list::-webkit-scrollbar-thumb:hover,
.auto-sync-history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

.auto-sync-drop-hint,
.auto-sync-empty,
.auto-sync-loading,
.auto-sync-error {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    text-align: center;
}

.auto-sync-drop-hint {
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px 12px;
}

.auto-sync-drop-hint strong,
.auto-sync-drop-hint span {
    display: block;
}

.auto-sync-drop-hint strong {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-drop-hint span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

.auto-sync-loading,
.auto-sync-error {
    padding: 48px;
}

.auto-sync-scheduled-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auto-sync-scheduled-card.disabled {
    opacity: 0.52;
}

.auto-sync-scheduled-main {
    min-width: 0;
    width: 100%;
}

.auto-sync-scheduled-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.auto-sync-scheduled-card button {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    transition: all 0.2s ease;
}

.auto-sync-scheduled-card button.run {
    width: auto;
    min-width: 0;
    height: 26px;
    flex: 1;
    padding: 0 10px;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-scheduled-card button.run:disabled {
    cursor: default;
    opacity: 0.62;
}

.auto-sync-scheduled-card button.run:not(:disabled):hover {
    color: rgb(var(--accent-neon-rgb));
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.auto-sync-scheduled-card button:not(.run):hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.auto-sync-scheduled-card.failing {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
}

.auto-sync-scheduled-card.warning {
    border-color: rgba(250, 204, 21, 0.3);
}

.auto-sync-scheduled-health {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 6px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.auto-sync-scheduled-health.failing {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}

.auto-sync-scheduled-health.warning {
    background: rgba(250, 204, 21, 0.18);
    color: #facc15;
}

/* Run history filters + load more + tab badge */
.auto-sync-history-intro-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto-sync-history-filters {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
}

.auto-sync-history-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    transition: color 0.15s ease, background 0.15s ease;
}

.auto-sync-history-filter-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}

.auto-sync-history-filter-btn.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-history-filter-btn em {
    font-style: normal;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 700;
}

.auto-sync-history-filter-btn.active em {
    background: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-history-filter-btn.has-errors:not(.active) em {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

.auto-sync-history-filter-btn.has-errors.active {
    background: rgba(239, 68, 68, 0.16);
    color: #ef4444;
}

.auto-sync-history-load-more-row {
    display: flex;
    justify-content: center;
    padding: 12px 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.auto-sync-history-load-more {
    height: 32px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.auto-sync-history-load-more:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

/* Tab badge (error count on Run History tab) */
.auto-sync-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.auto-sync-tab-badge.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Run-again button inside history expanded detail */
.auto-sync-history-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.auto-sync-history-run-again {
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: inherit;
    transition: all 0.2s ease;
}

.auto-sync-history-run-again:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: rgb(var(--accent-neon-rgb));
}

/* ───────────────────────────────────────────────────────────────────── */
/* Weekly schedule board (PR 3 of schedule-types feature)               */
/* ───────────────────────────────────────────────────────────────────── */

.auto-sync-weekly-board {
    /* 7 day columns slightly narrower than hourly buckets so they fit
       without horizontal scroll on the standard modal width.
       grid-template-columns: minmax(120px, 1fr) repeated 7 times. */
    grid-template-columns: repeat(7, minmax(120px, 1fr));
}

.auto-sync-weekly-column .auto-sync-column-head {
    /* Day labels are short ("Mon", "Tue") so the head can breathe. */
    text-align: center;
}

.auto-sync-weekly-card {
    /* Click-to-edit affordance — visually distinct from the hourly
       card which is non-interactive aside from the unschedule button. */
    cursor: pointer;
}

.auto-sync-weekly-card:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.08);
}

.auto-sync-playlist.scheduled-elsewhere {
    /* Visual hint when a playlist has an hourly schedule but the user
       is on the weekly tab. Card still draggable; drop creates a
       weekly schedule that replaces the hourly one. */
    opacity: 0.7;
    border-style: dashed;
}

/* ───────────────────────────────────────────────────────────────────── */
/* Weekly editor popover                                                 */
/* ───────────────────────────────────────────────────────────────────── */

.auto-sync-weekly-editor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: autoSyncWeeklyEditorFadeIn 0.15s ease-out;
}

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

.auto-sync-weekly-editor {
    background: linear-gradient(160deg,
        rgba(15, 20, 32, 0.96) 0%,
        rgba(10, 14, 24, 0.96) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 460px;
    padding: 24px;
    color: rgba(255, 255, 255, 0.9);
    font-family: inherit;
}

.auto-sync-weekly-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.auto-sync-weekly-editor-head h4 {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
}

.auto-sync-weekly-editor-playlist {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.auto-sync-weekly-editor-section {
    margin-bottom: 16px;
}

.auto-sync-weekly-editor-section label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.auto-sync-weekly-editor-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.auto-sync-weekly-day-toggle {
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s ease;
}

.auto-sync-weekly-day-toggle:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
}

.auto-sync-weekly-day-toggle.active {
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-weekly-editor-section input[type="time"],
.auto-sync-weekly-editor-section input[type="text"] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}

.auto-sync-weekly-editor-section input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(var(--accent-rgb), 0.06);
}

.auto-sync-weekly-editor-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.auto-sync-weekly-editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auto-sync-weekly-editor-actions-right {
    display: flex;
    gap: 8px;
}

.auto-sync-weekly-editor-delete,
.auto-sync-weekly-editor-cancel,
.auto-sync-weekly-editor-save {
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s ease;
}

.auto-sync-weekly-editor-save {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-weekly-editor-save:hover {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgba(var(--accent-rgb), 0.7);
}

.auto-sync-weekly-editor-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.auto-sync-weekly-editor-delete {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgba(239, 68, 68, 0.9);
}

.auto-sync-weekly-editor-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.6);
}

.auto-sync-automation-list {
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auto-sync-automation-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(22, 22, 22, 0.95);
    overflow: hidden;
}

.auto-sync-automation-card:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(28, 28, 28, 0.98);
}

.auto-sync-automation-main {
    min-width: 0;
    flex: 1;
}

.auto-sync-automation-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.auto-sync-automation-title-row strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auto-sync-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.auto-sync-card-status-dot.enabled {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

.auto-sync-card-status-dot.disabled {
    background: #555;
}

.auto-sync-card-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.auto-sync-card-flow .flow-trigger,
.auto-sync-card-flow .flow-action,
.auto-sync-card-flow .flow-notify {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.auto-sync-card-flow .flow-trigger {
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-card-flow .flow-action {
    background: rgba(88, 101, 242, 0.12);
    color: #7289da;
}

.auto-sync-card-flow .flow-notify {
    background: rgba(250, 204, 21, 0.1);
    color: #fbbf24;
}

.auto-sync-card-flow .flow-arrow {
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
}

.auto-sync-status {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    flex-shrink: 0;
}

.auto-sync-status.enabled {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.auto-sync-status.disabled {
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
}

.auto-sync-automation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.auto-sync-automation-meta span {
    padding: 3px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 700;
}

.auto-sync-automation-lock {
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    flex-shrink: 0;
}

.auto-sync-automation-empty {
    margin: 24px;
    padding: 44px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}

.auto-sync-history-list {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auto-sync-history-loading {
    padding: 28px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* Run history cards — modeled on .automation-card / .history-entry styling.
   Slim horizontal row, click to expand, expanded panel mirrors the
   automation-history-modal grid + log layout. */
.auto-sync-history-entry {
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.auto-sync-history-entry:hover {
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(28, 28, 28, 0.98);
}

.auto-sync-history-entry.expanded {
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(26, 26, 26, 0.98);
}

.auto-sync-history-entry-error { border-color: rgba(239, 68, 68, 0.22); }
.auto-sync-history-entry-skipped { border-color: rgba(250, 204, 21, 0.18); }

.auto-sync-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
}

.auto-sync-history-row:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.45);
    outline-offset: -2px;
    border-radius: 10px;
}

.auto-sync-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auto-sync-history-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auto-sync-history-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.auto-sync-history-flow .flow-trigger,
.auto-sync-history-flow .flow-action,
.auto-sync-history-flow .flow-notify {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.auto-sync-history-flow .flow-trigger { background: rgba(var(--accent-rgb), 0.12); color: rgb(var(--accent-light-rgb)); }
.auto-sync-history-flow .flow-action { background: rgba(88, 101, 242, 0.12); color: #7289da; }
.auto-sync-history-flow .flow-notify { background: rgba(250, 204, 21, 0.10); color: #fbbf24; }
.auto-sync-history-flow .flow-arrow { color: rgba(255, 255, 255, 0.25); font-size: 12px; }

.auto-sync-history-meta-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.auto-sync-history-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.14);
    color: #94a3b8;
}

.auto-sync-history-status.completed,
.auto-sync-history-status.finished { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.auto-sync-history-status.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.auto-sync-history-status.skipped { background: rgba(250, 204, 21, 0.15); color: #facc15; }

.auto-sync-history-duration {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
}

.auto-sync-history-delta {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    margin-left: auto;
}

.auto-sync-history-delta.pos { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.auto-sync-history-delta.neg { background: rgba(239, 68, 68, 0.14); color: #ef4444; }

.auto-sync-history-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.auto-sync-history-expand-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.2s ease;
}

.auto-sync-history-expand-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-history-expand-icon {
    font-size: 9px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.auto-sync-history-entry.expanded .auto-sync-history-expand-icon {
    transform: rotate(180deg);
}

/* Expanded detail — mirrors .history-stats-grid / .history-log-section
   from the Automations page run-history modal. */
.auto-sync-history-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-top: 1px solid transparent;
}

.auto-sync-history-detail.expanded {
    max-height: 800px;
    border-top-color: rgba(255, 255, 255, 0.06);
    padding: 12px 14px 14px;
}

.auto-sync-history-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.auto-sync-history-stat {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
}

.auto-sync-history-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

.auto-sync-history-stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
}

.auto-sync-history-stat-value .stat-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

.auto-sync-history-stat-value .stat-delta {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}

.auto-sync-history-stat-value .stat-delta.pos { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.auto-sync-history-stat-value .stat-delta.neg { background: rgba(239, 68, 68, 0.14); color: #ef4444; }

.auto-sync-history-facts-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.auto-sync-history-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auto-sync-history-fact span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.35);
}

.auto-sync-history-fact strong {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.auto-sync-history-result-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.auto-sync-history-result-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 600;
}

.auto-sync-history-result-pill em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.auto-sync-history-error {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #f87171;
    font-size: 11px;
    line-height: 1.45;
}

.auto-sync-history-log-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.auto-sync-history-log-line {
    padding: 3px 0;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.auto-sync-history-log-info { color: rgba(255, 255, 255, 0.5); }
.auto-sync-history-log-success { color: #4ade80; }
.auto-sync-history-log-error { color: #ef4444; }
.auto-sync-history-log-warning,
.auto-sync-history-log-warn { color: #facc15; }
.auto-sync-history-log-skip { color: rgba(255, 255, 255, 0.35); }

.auto-sync-history-empty {
    margin: 24px;
    padding: 44px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
}

.auto-sync-history-empty strong,
.auto-sync-history-empty span {
    display: block;
}

.auto-sync-history-empty strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
}

.auto-sync-history-empty span {
    margin-top: 6px;
    font-size: 12px;
}

.auto-sync-history-total {
    padding: 12px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 1100px) {
    .auto-sync-modal {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
    }

    .auto-sync-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auto-sync-monitor-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auto-sync-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 30%) 1fr;
    }

    .auto-sync-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .auto-sync-source-list {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 12px 12px;
    }

    .auto-sync-source-group {
        min-width: 220px;
        margin-bottom: 0;
    }

    .auto-sync-board {
        grid-template-columns: repeat(10, minmax(230px, 250px));
        padding: 18px;
    }

    .auto-sync-history-detail-grid,
    .auto-sync-history-snapshots {
        grid-template-columns: 1fr;
    }

    .auto-sync-history-facts.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 760px) {
    .auto-sync-header {
        padding: 14px 18px 12px;
    }

    .auto-sync-header p {
        display: none;
    }

    .auto-sync-summary div {
        padding: 9px 16px;
    }

    .auto-sync-monitor {
        padding: 9px 14px;
    }

    .auto-sync-monitor-empty,
    .auto-sync-monitor-card {
        padding: 9px;
    }

    .auto-sync-tabs {
        padding: 9px 14px;
    }

    .auto-sync-board-intro,
    .auto-sync-automation-intro,
    .auto-sync-history-intro {
        padding: 10px 14px;
    }
}

@media (max-width: 720px) {
    .auto-sync-monitor-list {
        grid-template-columns: 1fr;
    }

    .auto-sync-monitor-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .auto-sync-monitor-empty {
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
    }

    .auto-sync-monitor-empty small {
        white-space: normal;
    }

    .auto-sync-monitor-card {
        flex-direction: column;
    }

    .auto-sync-monitor-card button {
        align-self: flex-start;
    }

    .auto-sync-history-row {
        padding: 16px;
    }

    .auto-sync-history-card-head {
        flex-direction: column;
    }

    .auto-sync-history-meta {
        justify-content: flex-start;
        min-width: 0;
        max-width: none;
    }

    .auto-sync-history-detail {
        padding: 16px;
    }

    .auto-sync-history-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auto-sync-history-facts,
    .auto-sync-history-facts.compact,
    .auto-sync-history-payload {
        grid-template-columns: 1fr;
    }

    .auto-sync-scheduled-card {
        grid-template-columns: 1fr;
    }

    .auto-sync-scheduled-actions {
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

/* Enhanced Progress Bar Animation */
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
            rgb(var(--accent-rgb)) 0%,
            rgb(var(--accent-light-rgb)) 50%,
            rgb(var(--accent-neon-rgb)) 100%);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

/* Progress bar shimmer effect when active */
.progress-bar-fill:not([style*="width: 0%"])::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.2) 50%,
            transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}


/* Styles for Stats inside the DB Updater Tool Card */
.tool-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.manual-library-match-stats .stat-item-value {
    background-color: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-rgb));
    white-space: nowrap;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding: 2px 0;
}

.stat-item-label {
    color: rgba(255, 255, 255, 0.35);
}

.stat-item-value {
    color: #ffffff;
    font-weight: 600;
    background-color: rgba(var(--accent-rgb), 0.1);
    border-radius: 4px;
    padding: 2px 6px;
}


/* ======================================================= */
/* == STYLES FOR SYNC PAGE (REDESIGNED)                 == */
/* ======================================================= */

/* Main Sync Page Layout */
.sync-header {
    margin-bottom: 25px;
}

.sync-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sync-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sync-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

.sync-subtitle {
    font-size: 14px;
    color: #b3b3b3;
    margin-top: 5px;
}

.sync-content-area {
    display: grid;
    grid-template-columns: 1fr;
    /* Sidebar hidden by default, shown when sync starts */
    gap: 25px;
    /* min-height: calc(90vh - 200px);  Minimum height, but allow expansion */
    height: 95%;
}

/* Hide sidebar on laptop and smaller screens */
@media (max-width: 1300px) {
    .sync-content-area {
        grid-template-columns: 1fr;
        /* Single column - main panel takes full width */
        gap: 0;
    }

    .sync-sidebar {
        display: none !important;
        /* Hide sidebar completely - use !important to override other rules */
    }
}

.sync-main-panel,
.sync-sidebar {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.65), rgba(18, 18, 18, 0.72));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.sync-main-panel {
    overflow-y: auto;
    overflow-x: hidden;
}

.sync-sidebar {
    overflow: hidden;
    display: none;
}

/*
 * The React port's transcription of showSyncSidebar/hideSyncSidebar
 * (downloads.js), which set these same two declarations inline. `flex` rather
 * than `block` because the shared .sync-main-panel/.sync-sidebar rule above
 * lays the sidebar out as a column — the vanilla restored it by clearing the
 * inline display and letting that rule apply.
 */
.sync-sidebar--visible {
    display: flex;
}

.sync-content-area--with-sidebar {
    grid-template-columns: 2.5fr 0.75fr;
}

/*
 * Re-assert the narrow-screen collapse for the modifier. The ≤1300px block
 * above pins .sync-content-area to a single column, but it appears EARLIER in
 * the file and carries the same specificity, so the modifier would otherwise
 * win and leave a two-column grid with a display:none second column. The
 * sidebar itself needs no such repeat: that rule uses !important.
 */
@media (max-width: 1300px) {
    .sync-content-area--with-sidebar {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Tab System */
.sync-tabs {
    display: flex;
    /* FIFTEEN tabs live here. Equal-width flex:1 buttons crammed them into
       one unreadable strip; natural-width chips that WRAP restore the brand-
       chip design the .sync-tab-server comment already describes (#799). */
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 8px;
}

.sync-tab-button {
    flex: 0 1 auto;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.03);
    color: #b3b3b3;
    border: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sync-tab-button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sync-tab-button.active {
    background: rgb(var(--accent-rgb));
    color: #000000;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.sync-tab-button[data-tab="tidal"].active {
    background: #ff6600;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.sync-tab-button[data-tab="deezer"].active {
    background: #a238ff;
    color: #fff;
    box-shadow: 0 0 12px rgba(162, 56, 255, 0.4);
}

.sync-tab-button[data-tab="youtube"].active {
    background: #ff0000;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}

.sync-tab-button[data-tab="spotify-public"].active {
    background: #1DB954;
    color: #fff;
    box-shadow: 0 4px 15px rgba(29, 185, 84, 0.3);
}

.sync-tab-button[data-tab="itunes-link"].active {
    background: #fa586a;
    color: #fff;
    box-shadow: 0 4px 15px rgba(250, 88, 106, 0.3);
}

/* Server tab — prominent first tab */
.sync-tab-server {
    /* No flex-grow: behave like every other brand chip (flex:0 0 auto from
       .sync-tab-button). The old "equal-width pills" strip stretched this tab
       with `flex:1.4 !important`, which leaked past the chip restyle and made
       the active Server Playlists pill span the whole row (#799). */
    font-size: 12px;
    letter-spacing: 0.02em;
    position: relative;
}
.sync-tab-server.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.7)) !important;
    color: #000 !important;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.2) !important;
}

.sync-tab-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin: 0 2px;
    align-self: center;
}

.sync-tab-button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.tab-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.spotify-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231db954"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.48.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/></svg>');
}

.tidal-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12.012 3.992L8.008 7.996 12.012 12l4.004-4.004-4.004-4.004zm7.996 8.008L16.004 8.004 12 12.008l4.004 4.004L20.008 12zm-16.008 0L8.004 16.004 12 12l-4.004-4.004L3.996 12zm8.004 4.004L8.004 20.008 12.012 24l4.004-4.004-4.004-3.996z"/></svg>');
}

.deezer-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='0' y='18' width='4' height='4' rx='0.5'/%3E%3Crect x='6' y='14' width='4' height='8' rx='0.5'/%3E%3Crect x='12' y='10' width='4' height='12' rx='0.5'/%3E%3Crect x='18' y='6' width='4' height='16' rx='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.youtube-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff0000"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}

.qobuz-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><circle cx="12" cy="12" r="9.5" fill="none" stroke="%23ffffff" stroke-width="1.8"/><path d="M16.5 16.5l3 3" stroke="%23ffffff" stroke-width="1.8" stroke-linecap="round"/></svg>');
}

.beatport-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301FF95"><path d="M2 6h20v2H2zm0 5h20v2H2zm0 5h20v2H2z"/></svg>');
}

.listenbrainz-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23eb743b"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1 13.5v-9l6 4.5-6 4.5z"/></svg>');
}

.sync-tab-button.active .listenbrainz-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1 13.5v-9l6 4.5-6 4.5z"/></svg>');
}

.lastfm-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d51007"><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.705-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.667 2.529 4.81 7.285 4.81 3.409 0 5.717-1.044 5.717-3.793 0-2.227-1.27-3.381-3.629-3.931l-1.762-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.935.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.926-3.491-4.755-3.491-2.502 0-4.948.935-4.948 3.931 0 1.87.907 3.052 3.189 3.601l1.87.44c1.402.33 1.87 1.622 1.87 1.622-.044 1.21-1.21 1.485-2.667 1.485-2.166 0-3.078-1.142-3.601-2.722l-.907-2.722c-1.16-3.601-3.024-4.921-6.708-4.921C2.193 5.948 0 8.642 0 13.21c0 4.398 2.255 6.781 6.296 6.781 3.244 0 4.811-1.539 4.811-1.539-.082.001-.247-.385-.523-1.242z"/></svg>');
}

.sync-tab-button.active .lastfm-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.705-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.667 2.529 4.81 7.285 4.81 3.409 0 5.717-1.044 5.717-3.793 0-2.227-1.27-3.381-3.629-3.931l-1.762-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.935.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.926-3.491-4.755-3.491-2.502 0-4.948.935-4.948 3.931 0 1.87.907 3.052 3.189 3.601l1.87.44c1.402.33 1.87 1.622 1.87 1.622-.044 1.21-1.21 1.485-2.667 1.485-2.166 0-3.078-1.142-3.601-2.722l-.907-2.722c-1.16-3.601-3.024-4.921-6.708-4.921C2.193 5.948 0 8.642 0 13.21c0 4.398 2.255 6.781 6.296 6.781 3.244 0 4.811-1.539 4.811-1.539-.082.001-.247-.385-.523-1.242z"/></svg>');
}

.soulsync-discovery-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2314b8a6"><path d="M12 1.5l2.7 6.3 6.3.5-4.8 4.2 1.5 6.5L12 15.5l-5.7 3.5 1.5-6.5L3 8.3l6.3-.5z"/></svg>');
}

.sync-tab-button.active .soulsync-discovery-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 1.5l2.7 6.3 6.3.5-4.8 4.2 1.5 6.5L12 15.5l-5.7 3.5 1.5-6.5L3 8.3l6.3-.5z"/></svg>');
}

/* ListenBrainz Sync tab sub-tabs (For You / My Playlists / Collaborative).
 * Neutral dark surface; orange used only as a subtle accent on the
 * active state — matches the rest of the app's tone. */
.listenbrainz-sub-tabs {
    display: inline-flex;
    gap: 6px;
    margin-left: 16px;
}

.listenbrainz-sub-tab-btn {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.listenbrainz-sub-tab-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.listenbrainz-sub-tab-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(235, 116, 59, 0.45);
    box-shadow: 0 0 0 1px rgba(235, 116, 59, 0.15) inset;
}

.itunes-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%23fa233b"/><path fill="%23ffffff" d="M16.5 6v8.8a2.6 2.6 0 1 1-1.4-2.3V8.6l-5.4 1.4v6.3a2.6 2.6 0 1 1-1.4-2.3V8.7L16.5 6z"/></svg>');
}

/* Active tab icons - make them white for better contrast */
.sync-tab-button.active .spotify-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.48.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/></svg>');
}

.sync-tab-button.active .youtube-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}

.sync-tab-button.active .beatport-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M2 6h20v2H2zm0 5h20v2H2zm0 5h20v2H2z"/></svg>');
}

.import-file-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2360a5fa"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm8-6v4h-4v-4H8l4-4 4 4h-2z"/></svg>');
}

.sync-tab-button[data-tab="import-file"].active {
    background: #60a5fa;
    color: #fff;
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
}

.sync-tab-button.active .import-file-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm8-6v4h-4v-4H8l4-4 4 4h-2z"/></svg>');
}

/* Import File Tab Styles */
.import-file-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.import-file-zone-inner {
    position: relative;
    border: 2px dashed rgba(96, 165, 250, 0.2);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.04) 0%, rgba(59, 130, 246, 0.02) 100%);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.import-file-zone-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.import-file-zone-inner:hover {
    border-color: rgba(96, 165, 250, 0.35);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.06) 0%, rgba(59, 130, 246, 0.04) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(96, 165, 250, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.import-file-zone-inner:hover::before {
    opacity: 1;
}

.import-file-zone-inner.drag-over {
    border-color: rgba(96, 165, 250, 0.6);
    border-style: solid;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.06) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 24px rgba(96, 165, 250, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px) scale(1.01);
}

.import-file-zone-inner.drag-over::before {
    opacity: 1;
}

.import-file-format-hints {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

.import-file-hint {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.import-file-hint-label {
    font-size: 11px;
    font-weight: 700;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.import-file-hint-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}

.import-file-zone-icon {
    font-size: 44px;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 8px rgba(96, 165, 250, 0.2));
}

.import-file-zone-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.import-file-zone-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.import-file-zone-formats {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.import-file-info-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
    border: 1px solid rgba(96, 165, 250, 0.15);
    border-top: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 14px;
    margin: 0 12px 14px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.import-file-info-filename {
    font-weight: 700;
    color: #60a5fa;
    font-size: 14px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-file-info-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    background: rgba(96, 165, 250, 0.1);
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
}

.import-file-clear-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.import-file-clear-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: scale(1.1);
}

.import-file-format-bar,
.import-file-mapping-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin: 0 12px 14px 12px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.import-file-format-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    font-weight: 600;
}

.import-file-select {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.import-file-select option {
    background: #1a1a1a;
    color: #fff;
}

.import-file-select:hover {
    border-color: rgba(96, 165, 250, 0.3);
}

.import-file-mapping-selects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.import-file-mapping-selects .import-file-col-map {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s;
}

.import-file-mapping-selects .import-file-col-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.import-file-mapping-selects .import-file-col-map.mapped-track {
    border-color: rgba(96, 165, 250, 0.25);
    background: rgba(96, 165, 250, 0.04);
}
.import-file-mapping-selects .import-file-col-map.mapped-artist {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.04);
}
.import-file-mapping-selects .import-file-col-map.mapped-album {
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(251, 191, 36, 0.04);
}

.import-file-mapping-selects .import-file-col-map.mapped-track select {
    border-color: rgba(96, 165, 250, 0.3);
}
.import-file-mapping-selects .import-file-col-map.mapped-artist select {
    border-color: rgba(34, 197, 94, 0.3);
}
.import-file-mapping-selects .import-file-col-map.mapped-album select {
    border-color: rgba(251, 191, 36, 0.3);
}

.import-file-preview-table-wrap {
    margin: 0 12px;
    max-height: 360px;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.import-file-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.import-file-preview-table thead th {
    position: sticky;
    top: 0;
    background: rgba(18, 18, 18, 0.98);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.import-file-preview-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.import-file-preview-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.04);
}

.import-file-preview-table tbody tr.invalid-row {
    opacity: 0.35;
}

.import-file-preview-table td {
    padding: 9px 14px;
    color: rgba(255, 255, 255, 0.8);
}

.import-file-preview-table td:first-child {
    color: rgba(255, 255, 255, 0.25);
    width: 44px;
    font-weight: 600;
}

.import-file-action-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 12px 10px 12px;
    margin: 0 12px;
}

.import-file-name-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.import-file-name-input:focus {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.04);
    box-shadow: 0 2px 12px rgba(96, 165, 250, 0.1);
}

.import-file-name-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

.import-file-import-btn {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.import-file-import-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.35);
}

.import-file-import-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.mirrored-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23a78bfa"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 17h2V7H7v10zm4 0h2V7h-2v10zm4 0h2V7h-2v10z"/></svg>');
}

.sync-tab-button[data-tab="mirrored"].active {
    /* Mirrored is not a real brand — use the app green like the other
       brandless source (Server Playlists) instead of an arbitrary
       lavender (SR2). */
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.95),
        rgba(var(--accent-rgb), 0.75));
    color: #000;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.sync-tab-button.active .mirrored-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 17h2V7H7v10zm4 0h2V7h-2v10zm4 0h2V7h-2v10z"/></svg>');
}

/* Mirrored playlist cards */
.mirrored-playlist-card {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 10px 6px;
    padding: 18px 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.mirrored-playlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
    transition: all 0.3s;
}

.mirrored-playlist-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.06);
}

.mirrored-playlist-card:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.mirrored-playlist-card .source-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.25s;
}

.mirrored-playlist-card .source-icon.spotify {
    background: rgba(29, 185, 84, 0.12);
    border: 1px solid rgba(29, 185, 84, 0.2);
    color: #1db954;
}
.mirrored-playlist-card .source-icon.tidal {
    background: rgba(255, 102, 0, 0.12);
    border: 1px solid rgba(255, 102, 0, 0.2);
    color: #ff6600;
}
.mirrored-playlist-card .source-icon.youtube {
    background: rgba(255, 0, 0, 0.12);
    border: 1px solid rgba(255, 0, 0, 0.2);
    color: #ff4444;
}
.mirrored-playlist-card .source-icon.deezer {
    background: rgba(162, 56, 255, 0.12);
    border: 1px solid rgba(162, 56, 255, 0.2);
    color: #a238ff;
}
.mirrored-playlist-card .source-icon.beatport {
    background: rgba(1, 255, 149, 0.12);
    border: 1px solid rgba(1, 255, 149, 0.2);
    color: #01ff95;
}
.mirrored-playlist-card .source-icon.file {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.mirrored-playlist-card .source-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
}

.mirrored-playlist-card .source-badge.spotify { background: #1db954; }
.mirrored-playlist-card .source-badge.tidal { background: #ff6600; }
.mirrored-playlist-card .source-badge.youtube { background: #ff0000; }
.mirrored-playlist-card .source-badge.deezer { background: #a238ff; }
.mirrored-playlist-card .source-badge.beatport { background: #01ff95; color: #000; }
.mirrored-playlist-card .source-badge.file { background: #60a5fa; }

.mirrored-card-info {
    flex: 1;
    min-width: 0;
}

.mirrored-card-info .card-name {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.mirrored-card-info .card-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mirrored-card-info .card-meta span {
    display: inline-flex;
    align-items: center;
}

.mirrored-card-info .card-meta span + span::before {
    content: '\00b7';
    margin-right: 8px;
    color: #555;
}

.mirrored-card-info .card-meta span[style]::before {
    content: none;
    margin-right: 0;
}

.mirrored-card-info .card-meta span[style] {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.mirrored-card-pipeline {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.24);
    border-radius: 6px;
    color: #7dd3fc;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    height: 24px;
    min-width: 76px;
    padding: 0 10px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

.mirrored-card-pipeline:hover {
    background: rgba(56, 189, 248, 0.2);
    border-color: rgba(56, 189, 248, 0.4);
    color: #e0f2fe;
}

.mirrored-card-delete,
.mirrored-card-clear,
.mirrored-card-link,
.mirrored-card-export,
.mirrored-card-rename {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #555;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

.mirrored-playlist-card:hover .mirrored-card-delete,
.mirrored-playlist-card:hover .mirrored-card-clear,
.mirrored-playlist-card:hover .mirrored-card-link,
.mirrored-playlist-card:hover .mirrored-card-export,
.mirrored-playlist-card:hover .mirrored-card-rename,
.mirrored-playlist-card:hover .mirrored-card-pipeline {
    opacity: 1;
}

.mirrored-card-export:hover {
    color: rgba(var(--accent-rgb), 1);
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: scale(1.1);
}

/* Live export status, injected inline into the card's .card-meta line. */
.export-status-span {
    font-size: inherit;
    white-space: nowrap;
}

.mirrored-card-delete:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
    border-color: rgba(255, 68, 68, 0.3);
    transform: scale(1.1);
}

.mirrored-card-clear:hover {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.15);
    border-color: rgba(167, 139, 250, 0.3);
    transform: scale(1.1);
}

.mirrored-card-link:hover {
    color: #64b5f6;
    background: rgba(100, 181, 246, 0.15);
    border-color: rgba(100, 181, 246, 0.3);
    transform: scale(1.1);
}

.mirrored-card-rename:hover {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    transform: scale(1.1);
}

.discovery-ratio {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
}

.discovery-ratio.complete {
    color: #22c55e;
}

/* Discovery Pool trigger button (secondary - dashboard card is primary entry) */
.pool-trigger-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pool-trigger-btn:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.2);
    color: rgba(255, 255, 255, 0.8);
}

/* ===== Discovery Pool — Premium Modal ===== */

/* Playlist filter in header */
.pool-playlist-filter {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}

.pool-playlist-filter:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.pool-playlist-filter option {
    background: #1a1a1a;
    color: #fff;
}

/* Header failed highlight */
.pool-header-failed-highlight {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-radius: 12px;
    padding: 4px 10px !important;
}

/* ===== Category Grid ===== */
.pool-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 28px;
}

.pool-category-card {
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pool-category-card .pool-category-top-bar {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pool-category-card .pool-category-top-bar.failed {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.pool-category-card .pool-category-top-bar.matched {
    background: linear-gradient(90deg, #22c55e, rgb(var(--accent-light-rgb)));
}

.pool-category-card:hover .pool-category-top-bar {
    opacity: 1;
}

/* Failed card accent */
.pool-category-card.failed {
    border-color: rgba(239, 68, 68, 0.12);
}

.pool-category-card.failed:hover {
    border-color: rgba(239, 68, 68, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2);
}

/* Matched card accent */
.pool-category-card.matched {
    border-color: rgba(34, 197, 94, 0.12);
}

.pool-category-card.matched:hover {
    border-color: rgba(34, 197, 94, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

/* Fallback gradient backgrounds */
.pool-category-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    animation: fadeInRow 1s ease-out forwards, gradientShift 8s ease infinite;
}

.pool-category-fallback.failed {
    background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.25) 0%,
            rgba(249, 115, 22, 0.2) 50%,
            rgba(239, 68, 68, 0.15) 100%);
    background-size: 200% 200%;
}

.pool-category-fallback.matched {
    background: linear-gradient(135deg,
            rgba(34, 197, 94, 0.25) 0%,
            rgba(var(--accent-rgb), 0.2) 50%,
            rgba(34, 197, 94, 0.15) 100%);
    background-size: 200% 200%;
}

/* Content overlay for text readability */
.pool-category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.72) 100%);
    z-index: 1;
    pointer-events: none;
}

.pool-category-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.pool-category-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.pool-category-card.failed .pool-category-icon {
    filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.4));
    color: #ef4444;
}

.pool-category-card.matched .pool-category-icon {
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.4));
    color: #22c55e;
}

.pool-category-count {
    font-size: 36px;
    font-weight: 700;
    margin: 8px 0;
}

.pool-category-count.failed {
    color: #ef4444;
}

.pool-category-count.matched {
    color: #22c55e;
}

.pool-category-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

/* Matched card mosaic hover */
.pool-category-card.matched:hover .wishlist-mosaic-image {
    transform: scale(1.1);
}

.pool-category-card.matched:hover .pool-category-overlay {
    background: linear-gradient(135deg,
            rgba(34, 197, 94, 0.12) 0%,
            rgba(0, 0, 0, 0.78) 100%);
}

.pool-category-card.failed:hover .pool-category-overlay {
    background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.12) 0%,
            rgba(0, 0, 0, 0.78) 100%);
}

/* ===== List View ===== */
.pool-list-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 28px;
}

.pool-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.pool-list-search {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 12px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
    width: 200px;
    transition: border-color 0.15s ease, width 0.2s ease;
}

.pool-list-search:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.4);
    width: 260px;
}

.pool-list-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.pool-rematch-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 5px 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pool-rematch-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.pool-back-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pool-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateX(-2px);
}

.pool-list-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
}

.pool-list-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    max-height: 55vh;
}

.pool-list-content::-webkit-scrollbar {
    width: 8px;
}

.pool-list-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.pool-list-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.4);
    border-radius: 4px;
}

/* ===== Track Rows (Premium) ===== */
.pool-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    padding: 40px 20px;
    font-size: 14px;
}

.pool-track-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.pool-track-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pool-track-row:last-child {
    border-bottom: none;
}

.pool-track-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.pool-track-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-track-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.pool-track-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.pool-track-playlist-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(var(--accent-rgb), 0.8);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    padding: 2px 8px;
    border-radius: 10px;
}

.pool-track-arrow {
    color: rgba(var(--accent-rgb), 0.5);
    font-size: 12px;
}

.pool-match-name {
    font-size: 12px;
    color: rgb(var(--accent-light-rgb));
    font-weight: 500;
}

.pool-match-provider {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Album art thumbnail */
.pool-match-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
}

.pool-match-image-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Confidence badge */
.pool-confidence-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    flex-shrink: 0;
}

.pool-confidence-badge.high {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.pool-confidence-badge.mid {
    color: #eab308;
    background: rgba(234, 179, 8, 0.12);
}

.pool-confidence-badge.low {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

/* Use count */
.pool-use-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}

/* Fix button in list */
.pool-fix-btn {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 6px 14px !important;
}

/* Remove button */
.pool-remove-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pool-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* ===== Pool Fix Match Modal ===== */
.pool-fix-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.pool-fix-modal {
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    width: 560px;
    max-width: 92vw;
    /* FIXED HEIGHT — prevents layout shift when results load */
    height: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: slideUp 0.2s ease;
    overflow: hidden;
}

.pool-fix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.pool-fix-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.2px;
}

.pool-fix-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.pool-fix-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.pool-fix-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px 22px 0;
    overflow: hidden;
}

/* Source track display — compact */
.pool-fix-source {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.pool-fix-source-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.pool-fix-source-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pool-fix-source-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.pool-fix-source-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
}

.pool-fix-source-artist {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Search inputs */
.pool-fix-search {
    margin-bottom: 14px;
    flex-shrink: 0;
}

.pool-fix-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.pool-fix-input-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pool-fix-input-wrap label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pool-fix-input-wrap input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.pool-fix-input-wrap input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}

.pool-fix-input-wrap input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.pool-fix-search-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 9px 18px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    height: 38px;
}

.pool-fix-search-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Results area — FIXED, scrolls internally, no layout shift */
.pool-fix-results-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pool-fix-results-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 8px;
}

.pool-fix-results-list::-webkit-scrollbar {
    width: 5px;
}
.pool-fix-results-list::-webkit-scrollbar-track {
    background: transparent;
}
.pool-fix-results-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.pool-fix-results-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Result rows */
.pool-fix-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    flex-shrink: 0;
}

.pool-fix-result:hover {
    background: rgba(255, 255, 255, 0.06);
}

.pool-fix-result-main {
    flex: 1;
    min-width: 0;
}

.pool-fix-result-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pool-fix-result-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.pool-fix-result-dur {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Empty / loading states */
.pool-fix-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    flex: 1;
}

.pool-fix-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Footer */
.pool-fix-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.pool-fix-cancel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 18px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pool-fix-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* Mobile */
@media (max-width: 600px) {
    .pool-fix-modal {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .pool-fix-input-row {
        flex-direction: column;
        gap: 8px;
    }

    .pool-fix-search-btn {
        width: 100%;
        height: 44px;
    }
}

/* Mirrored playlist track modal */
.mirrored-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 10, 0.78);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(14px) saturate(1.1);
    animation: mirroredOverlayFadeIn 0.25s ease forwards;
}

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

@keyframes mirroredModalSlideIn {
    from { opacity: 0; transform: scale(0.96) translateY(16px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mirrored-modal {
    position: relative;
    background: #161616;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    width: 100%;
    max-width: 900px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
    animation: mirroredModalSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---------- Hero ---------- */
.mm-hero {
    position: relative;
    flex-shrink: 0;                 /* header is pinned, never clipped */
    padding: 30px 32px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mm-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(44px) saturate(1.5);
    opacity: 0.4;
    transform: scale(1.25);
    z-index: 0;
}

.mm-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.55) 0%, rgba(22, 22, 22, 0.88) 100%);
    z-index: 0;
}

.mm-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    padding-right: 44px;
}

.mm-cover {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #242424;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.mm-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.06));
    color: rgb(var(--accent-light-rgb));
}

.mm-cover-empty.spotify,
.mm-cover-empty.spotify_public { background: linear-gradient(135deg, rgba(29, 185, 84, 0.25), rgba(29, 185, 84, 0.06)); color: #1db954; }
.mm-cover-empty.tidal { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)); color: #fff; }
.mm-cover-empty.youtube { background: linear-gradient(135deg, rgba(255, 0, 0, 0.22), rgba(255, 0, 0, 0.06)); color: #ff4d4d; }

.mm-hero-info {
    flex: 1;
    min-width: 0;
}

.mm-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 8px;
}

.mm-title {
    margin: 0;
    color: #fff;
    font-weight: 800;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
}

.mm-dot { color: rgba(255, 255, 255, 0.3); }

.mm-source-pill {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

.mm-source-pill.spotify,
.mm-source-pill.spotify_public { color: #1db954; background: rgba(29, 185, 84, 0.14); border-color: rgba(29, 185, 84, 0.3); }

.mm-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.18s ease;
}

.mm-close:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.08);
}

/* ---------- Track list ---------- */
.mm-list {
    flex: 1 1 auto;
    min-height: 0;                  /* clip fix: list scrolls instead of growing the modal */
    overflow-y: auto;
    background: #121212;
    padding: 6px 0 10px;
}

.mm-list::-webkit-scrollbar { width: 10px; }
.mm-list::-webkit-scrollbar-track { background: transparent; }
.mm-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 5px; border: 2px solid #121212; }
.mm-list::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

.mm-list-head,
.mm-row {
    display: grid;
    grid-template-columns: 34px 40px minmax(0, 1.6fr) minmax(0, 1.1fr) 56px;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
}

.mm-list-head {
    height: 34px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #121212;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.4);
}

.mm-col-dur { text-align: right; }

.mm-row {
    height: 56px;
    margin: 1px 8px;
    padding: 0 18px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.mm-row:hover { background: rgba(255, 255, 255, 0.06); }

.mm-row-pos {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.mm-row-art {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: cover;
    background: #242424;
    flex-shrink: 0;
}

.mm-art-empty {
    background: linear-gradient(135deg, #2c2c2c, #1b1b1b);
    display: inline-block;
}

.mm-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mm-row-title {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-row-artist {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-row-album {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-row-dur {
    text-align: right;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mm-empty {
    padding: 48px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

/* ---------- Action bar ---------- */
.mm-actions {
    flex-shrink: 0;                 /* footer is pinned, never clipped */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    background: #181818;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mm-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mm-btn {
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.mm-btn-primary {
    background: rgb(var(--accent-rgb));
    color: #000;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.28);
}
.mm-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.42); }

.mm-btn-secondary {
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.28);
}
.mm-btn-secondary:hover { background: rgba(56, 189, 248, 0.2); color: #e0f2fe; border-color: rgba(56, 189, 248, 0.45); }

.mm-btn-ghost {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
}
.mm-btn-ghost:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }

.mm-btn-danger {
    background: transparent;
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.35);
}
.mm-btn-danger:hover { background: rgba(239, 83, 80, 0.14); color: #ff6b66; border-color: rgba(239, 83, 80, 0.55); }

@media (max-width: 640px) {
    .mm-hero-content { flex-direction: column; align-items: flex-start; gap: 14px; }
    .mm-cover { width: 92px; height: 92px; }
    .mm-actions { flex-direction: column; align-items: stretch; }
    .mm-actions-right { justify-content: space-between; }
    .mm-btn { flex: 1; text-align: center; }
}

.sync-tab-content {
    display: none;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sync-tab-content.active {
    display: flex;
}

/* Playlist Section Styling */
.playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.playlist-header h3 {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.refresh-button {
    background: rgb(var(--accent-rgb));
    border: none;
    border-radius: 17px;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-button:hover {
    transform: scale(1.05);
}

.refresh-button.tidal {
    background: #ff6600;
    color: #fff;
}

.refresh-button.tidal:hover {
    background: #ff7700;
}

.refresh-button.beatport {
    background: #01FF95;
    color: #000;
}

.refresh-button.beatport:hover {
    background: #00E085;
}

/* ================================= */
/* BEATPORT NESTED TABS SYSTEM      */
/* ================================= */

.beatport-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    padding: 5px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.beatport-tab-button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    color: #888;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.beatport-tab-button:hover {
    background: rgba(1, 255, 149, 0.1);
    color: #01FF95;
}

.beatport-tab-button.active {
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    color: #000;
    font-weight: 600;
}

.beatport-tab-button .tab-icon {
    width: 14px;
    height: 14px;
}

.browse-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888888"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}

.beatport-tab-button.active .browse-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}

.playlist-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888888"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>');
}

.beatport-tab-button.active .playlist-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>');
}

.rebuild-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888888"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
}

.beatport-tab-button.active .rebuild-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
}

.beatport-tab-content {
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.beatport-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Hide Browse Charts tab */
.beatport-tab-button[data-beatport-tab="browse"] {
    display: none;
}

/* ================================= */
/* BEATPORT REBUILD TAB STYLES */
/* ================================= */

/* Beatport Rebuild Slider Container */
.beatport-rebuild-slider-container {
    flex: 1;
    padding: 30px;

}

/* Loading State */
.beatport-rebuild-loading {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    border-radius: 20px;
    text-align: center;
}

.beatport-rebuild-loading-content h2 {
    color: #01FF95;
    font-size: 24px;
    margin-bottom: 10px;
    animation: pulse 2s ease-in-out infinite;
}

.beatport-rebuild-loading-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.beatport-rebuild-slider {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(1, 255, 149, 0.1);
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
}

.beatport-rebuild-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Individual Slides */
.beatport-rebuild-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
}

.beatport-rebuild-slide.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0);
}

.beatport-rebuild-slide.prev {
    transform: translateX(-100px);
}

.beatport-rebuild-slide.next {
    transform: translateX(100px);
}

/* Slide Background */
.beatport-rebuild-slide-background {
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
            rgba(1, 255, 149, 0.1) 0%,
            rgba(0, 224, 133, 0.08) 25%,
            rgba(var(--accent-rgb), 0.06) 50%,
            rgba(0, 185, 112, 0.04) 75%,
            rgba(1, 255, 149, 0.02) 100%);
    z-index: 1;
}

/* Dynamic background images from Beatport */
.beatport-rebuild-slide[data-image]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--slide-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 0;
}

.beatport-rebuild-slide-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 30% 40%, rgba(1, 255, 149, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(0, 224, 133, 0.1) 0%, transparent 50%),
        linear-gradient(135deg,
            rgba(20, 20, 20, 0.8) 0%,
            rgba(12, 12, 12, 0.9) 100%);
}

/* Slide Content */
.beatport-rebuild-slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    max-width: 1000px;
}

.beatport-rebuild-track-info {
    margin-bottom: 25px;
}

.beatport-rebuild-track-title {
    font-size: 36px;
    font-weight: 800;
    color: #01FF95;
    margin: 0 0 12px 0;
    letter-spacing: -1px;
    text-shadow: 0 2px 20px rgba(1, 255, 149, 0.3);
    line-height: 1.2;
}

.beatport-rebuild-artist-name {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.beatport-rebuild-album-name {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-style: italic;
}

.beatport-rebuild-track-meta {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.beatport-rebuild-genre,
.beatport-rebuild-year {
    padding: 8px 16px;
    background: rgba(1, 255, 149, 0.15);
    border: 1px solid rgba(1, 255, 149, 0.3);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #01FF95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Buttons */
.beatport-rebuild-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 25px;
    pointer-events: none;
}

.beatport-rebuild-nav-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: rgba(1, 255, 149, 0.2);
    color: #01FF95;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.beatport-rebuild-nav-btn:hover {
    background: rgba(1, 255, 149, 0.3);
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(1, 255, 149, 0.4);
}

.beatport-rebuild-nav-btn:active {
    transform: scale(0.95);
}

/* Slider Indicators */
.beatport-rebuild-slider-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: 12px;
}

.beatport-rebuild-indicator {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.beatport-rebuild-indicator.active {
    background: #01FF95;
    box-shadow: 0 0 15px rgba(1, 255, 149, 0.6);
    transform: scale(1.2);
}

.beatport-rebuild-indicator:hover:not(.active) {
    background: rgba(1, 255, 149, 0.6);
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .beatport-rebuild-slider {
        height: 320px;
    }

    .beatport-rebuild-track-title {
        font-size: 28px;
    }

    .beatport-rebuild-artist-name {
        font-size: 20px;
    }

    .beatport-rebuild-album-name {
        font-size: 16px;
    }

    .beatport-rebuild-slide-content {
        padding: 30px 20px;
    }
}

/* ================================= */
/* BEATPORT HERO SECTION            */
/* ================================= */

.beatport-hero {
    position: relative;
    height: fit-content;
    border-radius: 20px;
    margin-bottom: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Premium shadow effect matching modal hero sections */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(1, 255, 149, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Premium glassmorphic foundation matching modal hero backgrounds */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 50%,
            rgba(12, 12, 12, 0.99) 100%);

    /* Enhanced borders matching modal hero */
    border: 1px solid rgba(1, 255, 149, 0.3);
    border-top: 1px solid rgba(1, 255, 149, 0.4);
}

.beatport-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* Enhanced ambient lighting effects matching modal backgrounds */
    background:
        radial-gradient(circle at 25% 25%, rgba(1, 255, 149, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 75% 75%, rgba(0, 224, 133, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(1, 255, 149, 0.08) 0%, transparent 80%);
    opacity: 0.8;
}

.beatport-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    padding: 32px;
    max-width: 800px;
}

.beatport-hero-content h2 {
    /* Enhanced typography matching modal hero titles */
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.1;
    letter-spacing: -0.5px;

    /* Premium gradient text effect */
    background: linear-gradient(135deg, #01FF95 0%, #00E085 50%, rgb(var(--accent-light-rgb)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Subtle text shadow for depth */
    text-shadow: 0 4px 8px rgba(1, 255, 149, 0.2);
}

.beatport-hero-content p {
    /* Enhanced subtitle styling matching modal metadata */
    font-size: 18px;
    color: #e0e0e0;
    margin: 0 0 24px 0;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.beatport-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.beatport-hero .stat-item {
    /* Premium badge styling matching modal detail badges - scoped to Beatport hero only */
    background: rgba(1, 255, 149, 0.15);
    color: #01FF95;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(1, 255, 149, 0.3);

    /* Subtle shadow for depth */
    box-shadow:
        0 4px 12px rgba(1, 255, 149, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.2);

    /* Glassmorphic effect */
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.beatport-hero .stat-item:hover {
    background: rgba(1, 255, 149, 0.2);
    border-color: rgba(1, 255, 149, 0.4);
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 6px 16px rgba(1, 255, 149, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.3);
}

.stat-divider {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

/* ================================= */
/* BEATPORT NAVIGATION CARDS         */
/* ================================= */

.beatport-navigation {
    flex: 1;
    overflow-y: auto;
    padding: 0 5px;
}

.beatport-category-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.beatport-category-card {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.beatport-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(1, 255, 149, 0.4), transparent);
    transition: all 0.3s;
}

.beatport-category-card:hover {
    transform: translateY(-2px);
    border-color: rgba(1, 255, 149, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(1, 255, 149, 0.06);
}

.beatport-category-card:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(1, 255, 149, 0.7), transparent);
    box-shadow: 0 0 8px rgba(1, 255, 149, 0.3);
}

.category-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    border-radius: 12px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.beatport-category-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 2;
}

.beatport-category-card p {
    font-size: 14px;
    color: #888;
    margin: 0 0 15px 0;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.category-count {
    display: inline-block;
    background: rgba(1, 255, 149, 0.15);
    color: #01FF95;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(1, 255, 149, 0.3);
    position: relative;
    z-index: 2;
}

/* ================================= */
/* BEATPORT NAVIGATION VIEWS         */
/* ================================= */

.beatport-main-view,
.beatport-sub-view {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 0 5px;
}

.beatport-main-view.active,
.beatport-sub-view.active {
    display: block;
}

/* ================================= */
/* BEATPORT BREADCRUMB NAVIGATION    */
/* ================================= */

.beatport-breadcrumb {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px 24px;

    /* Premium glassmorphic foundation matching modal header */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);

    /* Enhanced borders matching modal */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    /* Premium shadow effect matching modal sections */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.breadcrumb-back {
    /* Premium button matching modal action buttons */
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    border: 1px solid rgba(1, 255, 149, 0.3);
    border-radius: 12px;
    color: #000000;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;

    /* Premium shadow matching modal buttons */
    box-shadow:
        0 4px 16px rgba(1, 255, 149, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.breadcrumb-back:hover {
    /* Enhanced hover state matching modal button hover */
    background: linear-gradient(135deg, #00E085 0%, #01FF95 100%);
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(1, 255, 149, 0.5);

    /* Premium enhanced shadow matching modal hover */
    box-shadow:
        0 8px 24px rgba(1, 255, 149, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.breadcrumb-path {
    /* Enhanced text styling matching modal metadata */
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

/* ================================= */
/* BEATPORT CHART LIST VIEW          */
/* ================================= */

.beatport-chart-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.beatport-chart-item {
    /* Premium glassmorphic foundation matching modal hero sections */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);

    /* Enhanced borders matching modal */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    padding: 24px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;

    /* Premium shadow effect matching modal cards */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-chart-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.1) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.beatport-chart-item:hover {
    /* Enhanced glassmorphic hover state matching modal hero hover */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);

    transform: translateY(-4px) scale(1.02);
    border-color: rgba(1, 255, 149, 0.4);
    border-top-color: rgba(1, 255, 149, 0.6);

    /* Premium enhanced shadow matching modal hover */
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(1, 255, 149, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.beatport-chart-item:hover::before {
    opacity: 1;
}

.chart-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    border-radius: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.chart-info {
    flex: 1;
    position: relative;
    z-index: 2;
}

.chart-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 5px 0;
}

.chart-info p {
    font-size: 14px;
    color: #888;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.track-count {
    display: inline-block;
    background: rgba(1, 255, 149, 0.15);
    color: #01FF95;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid rgba(1, 255, 149, 0.3);
}

/* ================================= */
/* BEATPORT GENRE GRID VIEW          */
/* ================================= */

.beatport-genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.beatport-genre-item {
    background: linear-gradient(135deg,
            rgba(25, 25, 25, 0.95) 0%,
            rgba(15, 15, 15, 0.98) 100%);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.beatport-genre-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.1) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.beatport-genre-item:hover {
    transform: translateY(-5px);
    border-color: rgba(1, 255, 149, 0.3);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(1, 255, 149, 0.2);
}

.beatport-genre-item:hover::before {
    opacity: 1;
}

.genre-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

.beatport-genre-item h3 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 1.2;
}

.genre-track-count {
    display: inline-block;
    background: rgba(1, 255, 149, 0.15);
    color: #01FF95;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(1, 255, 149, 0.3);
    position: relative;
    z-index: 2;
}

/* Dynamic Genre Loading States */
.genre-loading-placeholder,
.genre-error-placeholder {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: #888;
}

.genre-loading-placeholder .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(1, 255, 149, 0.2);
    border-top: 3px solid #01FF95;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.refresh-genres-btn {
    background: linear-gradient(135deg, #01FF95 0%, #00E085 100%);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.refresh-genres-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(1, 255, 149, 0.3);
}

/* Genre Images */
.beatport-genre-item .genre-image {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid rgba(1, 255, 149, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.beatport-genre-item:hover .genre-image {
    transform: scale(1.1);
    border-color: rgba(1, 255, 149, 0.6);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(1, 255, 149, 0.3);
}

/* ================================= */
/* BEATPORT GENRE DETAIL VIEW        */
/* ================================= */

.genre-detail-header {
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.genre-detail-info h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #01ff95, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.genre-detail-info p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Section Styling */
.genre-main-charts-section,
.genre-releases-section,
.genre-editorial-section,
.genre-new-charts-section,
.homepage-genre-section,
.homepage-main-charts-section,
.homepage-releases-section,
.homepage-hype-section,
.homepage-dj-charts-section,
.homepage-featured-charts-section {
    margin-bottom: 40px;
    padding: 28px;

    /* Premium glassmorphic foundation matching modal design */
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);

    /* Enhanced borders */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    /* Premium shadow effect matching modal */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px 0;
    font-style: italic;
}

/* Chart Types Grid */
.genre-chart-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Chart Type Cards */
.genre-chart-type-card {
    /* Premium glassmorphic foundation matching modal section design */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);

    /* Enhanced borders matching modal */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* Premium shadow effect matching modal sections */
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.genre-chart-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.1) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.genre-chart-type-card:hover {
    /* Enhanced glassmorphic hover state matching modal section hover */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);

    transform: translateY(-4px) scale(1.02);
    border-color: rgba(1, 255, 149, 0.4);
    border-top-color: rgba(1, 255, 149, 0.6);

    /* Premium enhanced shadow matching modal hover */
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(1, 255, 149, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.genre-chart-type-card:hover::before {
    opacity: 1;
}

.chart-type-icon {
    font-size: 32px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.2) 0%,
            rgba(0, 212, 255, 0.2) 100%);
    border-radius: 12px;
    border: 1px solid rgba(1, 255, 149, 0.3);
    position: relative;
    z-index: 2;
}

.chart-type-info {
    flex: 1;
    position: relative;
    z-index: 2;
}

.chart-type-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.chart-type-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}

.track-count {
    font-size: 12px;
    color: rgba(1, 255, 149, 0.8);
    font-weight: 500;
    background: rgba(1, 255, 149, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

/* Special Chart Card (New Charts) */
.genre-new-charts-container {
    display: flex;
    justify-content: center;
}

.genre-chart-type-card.special-chart {
    background: linear-gradient(135deg,
            rgba(30, 20, 40, 0.95) 0%,
            rgba(20, 15, 30, 0.98) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    max-width: 400px;
    position: relative;
}

.genre-chart-type-card.special-chart::before {
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.15) 0%,
            transparent 50%);
}

.genre-chart-type-card.special-chart:hover {
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(138, 43, 226, 0.3);
}

.genre-chart-type-card.special-chart .chart-type-icon {
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.3) 0%,
            rgba(75, 0, 130, 0.3) 100%);
    border-color: rgba(138, 43, 226, 0.4);
}

.special-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Empty Section Placeholder */
.empty-section-placeholder {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.5) 0%,
            rgba(20, 20, 20, 0.7) 100%);
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    text-align: center;
    opacity: 0.8;
    transition: all 0.3s ease;
    min-height: 120px;
    justify-content: center;
}

.empty-section-placeholder:hover {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg,
            rgba(35, 35, 35, 0.6) 0%,
            rgba(25, 25, 25, 0.8) 100%);
}

.empty-section-icon {
    font-size: 48px;
    opacity: 0.6;
    filter: grayscale(1);
}

.empty-section-text h4 {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px 0;
}

.empty-section-text p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-style: italic;
}

.expand-indicator {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(138, 43, 226, 0.8);
    transition: transform 0.3s ease;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 4px;
}

.expand-indicator.expanded {
    transform: translateY(-50%) rotate(180deg);
}

/* Always Visible New Charts Content */
.new-charts-content {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(35, 25, 45, 0.9) 0%,
            rgba(25, 20, 35, 0.95) 100%);
    border-radius: 12px;
    border: 1px solid rgba(138, 43, 226, 0.15);
}

@keyframes expandDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 1000px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.charts-loading-inline {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.charts-loading-inline .loading-spinner-small {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(138, 43, 226, 0.3);
    border-top: 3px solid #8a2be2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px auto;
}

.charts-loading-inline p {
    font-size: 14px;
    margin: 0;
}

.new-charts-grid,
.dj-charts-grid,
.featured-charts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.new-chart-item {
    /* Premium glassmorphic foundation matching modal card design */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);

    /* Enhanced borders matching modal */
    border-radius: 16px;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-top: 1px solid rgba(138, 43, 226, 0.4);

    padding: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* Premium shadow effect matching modal cards */
    box-shadow:
        0 8px 24px rgba(138, 43, 226, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.new-chart-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.1) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.new-chart-item:hover {
    /* Enhanced glassmorphic hover state matching modal card hover */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);

    transform: translateY(-4px) scale(1.02);
    border-color: rgba(138, 43, 226, 0.5);
    border-top-color: rgba(138, 43, 226, 0.7);

    /* Premium enhanced shadow matching modal hover */
    box-shadow:
        0 16px 40px rgba(138, 43, 226, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(138, 43, 226, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.new-chart-item:hover::before {
    opacity: 1;
}

.new-chart-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.new-chart-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.3) 0%,
            rgba(75, 0, 130, 0.3) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid rgba(138, 43, 226, 0.4);
}

.new-chart-title {
    flex: 1;
}

.new-chart-title h5 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.new-chart-artist {
    font-size: 12px;
    color: rgba(138, 43, 226, 0.8);
    margin: 0;
    font-weight: 500;
}

.new-chart-description {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 10px 0;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.new-chart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.new-chart-type {
    font-size: 9px;
    background: rgba(138, 43, 226, 0.2);
    color: rgba(138, 43, 226, 0.9);
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.new-chart-action {
    font-size: 10px;
    color: rgba(1, 255, 149, 0.8);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
}

.new-charts-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.new-charts-empty h4 {
    font-size: 16px;
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.new-charts-empty p {
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

/* ================================= */
/* BEATPORT GENRE CHARTS LIST VIEW   */
/* ================================= */

.genre-charts-list-header {
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.genre-charts-list-info h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #8a2be2, #4b0082);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.genre-charts-list-info p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.genre-charts-list-container {
    position: relative;
    min-height: 400px;
}

.charts-loading-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.charts-loading-placeholder .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(138, 43, 226, 0.3);
    border-top: 4px solid #8a2be2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.charts-loading-placeholder p {
    font-size: 16px;
    margin: 0;
}

.genre-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.genre-chart-item {
    /* Premium glassmorphic foundation matching modal card design */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);

    /* Enhanced borders matching modal */
    border-radius: 16px;
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-top: 1px solid rgba(138, 43, 226, 0.4);

    padding: 24px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    /* Premium shadow effect matching modal cards */
    box-shadow:
        0 8px 24px rgba(138, 43, 226, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.genre-chart-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.1) 0%,
            transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.genre-chart-item:hover {
    /* Enhanced glassmorphic hover state matching modal card hover */
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(22, 22, 22, 1.0) 100%);

    transform: translateY(-6px) scale(1.02);
    border-color: rgba(138, 43, 226, 0.5);
    border-top-color: rgba(138, 43, 226, 0.7);

    /* Premium enhanced shadow matching modal hover */
    box-shadow:
        0 20px 48px rgba(138, 43, 226, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(138, 43, 226, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.genre-chart-item:hover::before {
    opacity: 1;
}

.chart-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.chart-item-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.3) 0%,
            rgba(75, 0, 130, 0.3) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(138, 43, 226, 0.4);
}

.chart-item-title {
    flex: 1;
}

.chart-item-title h4 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.chart-item-artist {
    font-size: 14px;
    color: rgba(138, 43, 226, 0.8);
    margin: 0;
    font-weight: 500;
}

.chart-item-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 12px 0;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.chart-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.chart-item-type {
    font-size: 11px;
    background: rgba(138, 43, 226, 0.2);
    color: rgba(138, 43, 226, 0.9);
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.chart-item-action {
    font-size: 12px;
    color: rgba(1, 255, 149, 0.8);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.genre-charts-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.genre-charts-empty h3 {
    font-size: 20px;
    margin: 0 0 12px 0;
    color: rgba(255, 255, 255, 0.8);
}

.genre-charts-empty p {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* ================================= */
/* RESPONSIVE DESIGN                 */
/* ================================= */

@media (max-width: 768px) {
    .beatport-genre-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }

    /* Genre Detail Responsive */
    .genre-detail-info h2 {
        font-size: 24px;
    }

    .genre-chart-types-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .genre-chart-type-card {
        padding: 16px;
        gap: 12px;
    }

    .chart-type-icon {
        font-size: 28px;
        min-width: 40px;
        height: 40px;
    }

    .chart-type-info h3 {
        font-size: 16px;
    }

    .section-title {
        font-size: 18px;
    }

    .genre-main-charts-section,
    .genre-releases-section,
    .genre-editorial-section,
    .genre-new-charts-section,
    .homepage-genre-section,
    .homepage-main-charts-section,
    .homepage-releases-section,
    .homepage-hype-section {
        margin-bottom: 24px;
        padding: 16px;
    }

    /* Genre Charts List Responsive */
    .genre-charts-list-info h2 {
        font-size: 22px;
    }

    .genre-charts-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .genre-chart-item {
        padding: 16px;
    }

    .chart-item-header {
        gap: 10px;
    }

    .chart-item-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .chart-item-title h4 {
        font-size: 15px;
    }

    .beatport-chart-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .chart-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .beatport-breadcrumb {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .breadcrumb-back {
        text-align: center;
    }
}

.playlist-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
}

.playlist-placeholder {
    text-align: center;
    color: #b3b3b3;
    font-size: 14px;
    padding: 40px;
}

/* URL History Bar (saved playlist URLs) */
.url-history-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
}

.url-history-bar::-webkit-scrollbar {
    display: none;
}

.url-history-bar-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 4px;
}

.url-history-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    max-width: 220px;
}

.url-history-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

.url-history-pill-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.url-history-pill-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.url-history-pill:hover .url-history-pill-name {
    color: rgba(255, 255, 255, 0.95);
}

.url-history-pill-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
    line-height: 1;
}

.url-history-pill-remove:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
}

/* Source-specific pill accent on hover */
#youtube-url-history .url-history-pill:hover {
    border-color: rgba(255, 32, 32, 0.3);
}
#deezer-url-history .url-history-pill:hover {
    border-color: rgba(162, 56, 255, 0.3);
}
#spotify-public-url-history .url-history-pill:hover {
    border-color: rgba(29, 185, 84, 0.3);
}

#itunes-link-url-history .url-history-pill:hover {
    border-color: rgba(250, 88, 106, 0.3);
}

/* Playlist URL input section (YouTube, Deezer) */
.youtube-input-section {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.youtube-input-section:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

#youtube-url-input,
#deezer-url-input,
#spotify-public-url-input,
#itunes-link-url-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    outline: none;
    min-width: 0;
}

#youtube-url-input::placeholder,
#deezer-url-input::placeholder,
#spotify-public-url-input::placeholder,
#itunes-link-url-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

#youtube-parse-btn,
#deezer-parse-btn,
#spotify-public-parse-btn,
#itunes-link-parse-btn {
    flex-shrink: 0;
    padding: 10px 22px;
    border: none;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

#youtube-parse-btn {
    background: linear-gradient(135deg, #ff2020, #e00000);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.2);
}

#youtube-parse-btn:hover {
    background: linear-gradient(135deg, #ff3333, #ff1111);
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3);
    transform: translateY(-1px);
}

#youtube-parse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 0, 0, 0.2);
}

#deezer-parse-btn {
    background: linear-gradient(135deg, #a238ff, #b44dff);
    color: #fff;
    box-shadow: 0 2px 8px rgba(162, 56, 255, 0.2);
}

#deezer-parse-btn:hover {
    background: linear-gradient(135deg, #b044ff, #c058ff);
    box-shadow: 0 4px 16px rgba(162, 56, 255, 0.3);
    transform: translateY(-1px);
}

#deezer-parse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(162, 56, 255, 0.2);
}

#youtube-parse-btn:disabled,
#deezer-parse-btn:disabled,
#spotify-public-parse-btn:disabled,
#itunes-link-parse-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Brand-colored focus glow per tab */
#youtube-tab-content .youtube-input-section:focus-within {
    border-color: rgba(255, 0, 0, 0.25);
    box-shadow: 0 0 16px rgba(255, 0, 0, 0.08);
}

#deezer-tab-content .youtube-input-section:focus-within {
    border-color: rgba(162, 56, 255, 0.25);
    box-shadow: 0 0 16px rgba(162, 56, 255, 0.08);
}

#spotify-public-parse-btn {
    background: linear-gradient(135deg, #1DB954, #1ed760);
    color: #fff;
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.2);
}

#itunes-link-parse-btn {
    background: linear-gradient(135deg, #fa586a, #ff7a59);
    color: #fff;
    box-shadow: 0 2px 8px rgba(250, 88, 106, 0.2);
}

#spotify-public-parse-btn:hover {
    background: linear-gradient(135deg, #1ed760, #2de86e);
    box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3);
    transform: translateY(-1px);
}

#itunes-link-parse-btn:hover {
    background: linear-gradient(135deg, #ff6a7a, #ff8b6c);
    box-shadow: 0 4px 16px rgba(250, 88, 106, 0.3);
    transform: translateY(-1px);
}

#spotify-public-parse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(29, 185, 84, 0.2);
}

#itunes-link-parse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(250, 88, 106, 0.2);
}

#spotify-public-tab-content .youtube-input-section:focus-within {
    border-color: rgba(29, 185, 84, 0.25);
    box-shadow: 0 0 16px rgba(29, 185, 84, 0.08);
}

#itunes-link-tab-content .youtube-input-section:focus-within {
    border-color: rgba(250, 88, 106, 0.25);
    box-shadow: 0 0 16px rgba(250, 88, 106, 0.08);
}

/* Right Sidebar */
.sync-sidebar {
    gap: 20px;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar-section h4 {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

#selection-info {
    font-size: 12px;
    color: #b3b3b3;
    text-align: center;
}

.neo-button {
    width: 100%;
    padding: 12px;
    background: rgb(var(--accent-rgb));
    border: none;
    border-radius: 22px;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.2);
}

.neo-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
}

.neo-button:disabled {
    background: #404040;
    color: #666666;
    cursor: not-allowed;
    box-shadow: none;
}

.sync-sidebar .progress-section {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#sync-progress-text {
    font-size: 11px;
    color: #b3b3b3;
}

#sync-log-area {
    flex-grow: 1;
    background: #181818;
    border: 1px solid #404040;
    border-radius: 4px;
    color: #b3b3b3;
    font-size: 10px;
    font-family: monospace;
    padding: 8px;
    resize: none;
}

/* Playlist Cards Styling - Premium Glassmorphic Design */
.playlist-card {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 10px 6px;
    padding: 20px 22px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.playlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
    transition: all 0.3s;
}

.playlist-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.06);
}

.playlist-card:hover::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.playlist-card.selected {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.04);
}

.playlist-card.selected::before {
    left: 5%;
    right: 5%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.7), transparent);
}

.playlist-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.playlist-card-content {
    flex: 1;
    min-width: 0;
}

.playlist-card-name {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    line-height: 1.3;
}

.playlist-card-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.playlist-card-status {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-block;
}

.status-never-synced {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.06);
}

.status-synced {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.2);
}

.status-needs-sync {
    background: rgba(255, 149, 0, 0.1);
    color: #ffb84d;
    border-color: rgba(255, 149, 0, 0.15);
}

.playlist-card-actions {
    flex-shrink: 0;
    margin-left: 16px;
}

.playlist-card-actions button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.playlist-card-actions button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.playlist-card-actions button:hover::before {
    opacity: 1;
}

.playlist-card-actions button:hover {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}

.sync-progress-indicator {
    font-size: 12px;
    color: rgb(var(--accent-rgb));
    margin-top: 8px;
    display: none;
}

/* ===============================
   YOUTUBE PLAYLIST CARD STYLES
   =============================== */

/* Source-specific playlist cards — unified glass style with brand color accents */
.youtube-playlist-card,
.tidal-playlist-card,
.deezer-playlist-card,
.spotify-public-card,
.listenbrainz-playlist-card,
.lastfm-playlist-card,
.soulsync-discovery-playlist-card {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin: 10px 6px;
    padding: 18px 22px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 70px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.youtube-playlist-card::before,
.tidal-playlist-card::before,
.deezer-playlist-card::before,
.spotify-public-card::before,
.listenbrainz-playlist-card::before,
.lastfm-playlist-card::before,
.soulsync-discovery-playlist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    transition: all 0.3s;
}

/* Brand accent lines */
.youtube-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.4), transparent); }
.tidal-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.4), transparent); }
.deezer-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.4), transparent); }
.spotify-public-card::before { background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.4), transparent); }
.listenbrainz-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.4), transparent); }
.lastfm-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(213, 16, 7, 0.4), transparent); }
.soulsync-discovery-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.4), transparent); }

/* Hover — brand glow */
.youtube-playlist-card:hover { border-color: rgba(255, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 0, 0, 0.06); transform: translateY(-2px); }
.tidal-playlist-card:hover { border-color: rgba(255, 102, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 102, 0, 0.06); transform: translateY(-2px); }
.deezer-playlist-card:hover { border-color: rgba(162, 56, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(162, 56, 255, 0.06); transform: translateY(-2px); }
.spotify-public-card:hover { border-color: rgba(29, 185, 84, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(29, 185, 84, 0.06); transform: translateY(-2px); }
.listenbrainz-playlist-card:hover { border-color: rgba(235, 116, 59, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(235, 116, 59, 0.06); transform: translateY(-2px); }
.lastfm-playlist-card:hover { border-color: rgba(213, 16, 7, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(213, 16, 7, 0.06); transform: translateY(-2px); }
.soulsync-discovery-playlist-card:hover { border-color: rgba(20, 184, 166, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(20, 184, 166, 0.06); transform: translateY(-2px); }

.youtube-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.7), transparent); }
.tidal-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.7), transparent); }
.deezer-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.7), transparent); }
.spotify-public-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.7), transparent); }
.listenbrainz-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.7), transparent); }
.lastfm-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(213, 16, 7, 0.7), transparent); }
.soulsync-discovery-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.7), transparent); }

/* Source icons */
.youtube-playlist-card .playlist-card-icon,
.tidal-playlist-card .playlist-card-icon,
.deezer-playlist-card .playlist-card-icon,
.spotify-public-card .playlist-card-icon,
.listenbrainz-playlist-card .playlist-card-icon,
.lastfm-playlist-card .playlist-card-icon,
.soulsync-discovery-playlist-card .playlist-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    margin-right: 16px;
    flex-shrink: 0;
    transition: all 0.25s;
}

.youtube-playlist-card .playlist-card-icon { background: rgba(255, 0, 0, 0.12); border: 1px solid rgba(255, 0, 0, 0.2); color: #ff4444; }
.tidal-playlist-card .playlist-card-icon { background: rgba(255, 102, 0, 0.12); border: 1px solid rgba(255, 102, 0, 0.2); color: #ff6600; font-size: 16px; }
.deezer-playlist-card .playlist-card-icon { background: rgba(162, 56, 255, 0.12); border: 1px solid rgba(162, 56, 255, 0.2); color: #a238ff; }
.spotify-public-card .playlist-card-icon { background: rgba(29, 185, 84, 0.12); border: 1px solid rgba(29, 185, 84, 0.2); color: #1DB954; }
.listenbrainz-playlist-card .playlist-card-icon { background: rgba(235, 116, 59, 0.12); border: 1px solid rgba(235, 116, 59, 0.2); color: #eb743b; }
.lastfm-playlist-card .playlist-card-icon { background: rgba(213, 16, 7, 0.12); border: 1px solid rgba(213, 16, 7, 0.2); color: #d51007; }
.soulsync-discovery-playlist-card .playlist-card-icon { background: rgba(20, 184, 166, 0.12); border: 1px solid rgba(20, 184, 166, 0.2); color: #14b8a6; }

.youtube-playlist-card .playlist-card-content,
.tidal-playlist-card .playlist-card-content,
.deezer-playlist-card .playlist-card-content,
.spotify-public-card .playlist-card-content,
.listenbrainz-playlist-card .playlist-card-content,
.lastfm-playlist-card .playlist-card-content,
.soulsync-discovery-playlist-card .playlist-card-content { flex: 1; min-width: 0; }

.youtube-playlist-card .playlist-card-name,
.tidal-playlist-card .playlist-card-name,
.deezer-playlist-card .playlist-card-name,
.spotify-public-card .playlist-card-name,
.listenbrainz-playlist-card .playlist-card-name,
.lastfm-playlist-card .playlist-card-name,
.soulsync-discovery-playlist-card .playlist-card-name { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 4px; }

.youtube-playlist-card .playlist-card-info,
.tidal-playlist-card .playlist-card-info,
.deezer-playlist-card .playlist-card-info,
.spotify-public-card .playlist-card-info,
.listenbrainz-playlist-card .playlist-card-info,
.lastfm-playlist-card .playlist-card-info,
.soulsync-discovery-playlist-card .playlist-card-info { font-size: 13px; color: rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 10px; }

.youtube-playlist-card .playlist-card-track-count { color: rgba(255, 255, 255, 0.7); }
.youtube-playlist-card .playlist-card-phase-text { font-weight: 500; }
.youtube-playlist-card .playlist-card-progress { font-size: 12px; color: #ff6b6b; margin-top: 4px; font-weight: 500; }

/* Action buttons — glass style with brand hover */
.youtube-playlist-card .playlist-card-action-btn,
.tidal-playlist-card .playlist-card-action-btn,
.deezer-playlist-card .playlist-card-action-btn,
.spotify-public-card .playlist-card-action-btn,
.listenbrainz-playlist-card .playlist-card-action-btn,
.lastfm-playlist-card .playlist-card-action-btn,
.soulsync-discovery-playlist-card .playlist-card-action-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 16px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.youtube-playlist-card .playlist-card-action-btn::before,
.tidal-playlist-card .playlist-card-action-btn::before,
.deezer-playlist-card .playlist-card-action-btn::before,
.spotify-public-card .playlist-card-action-btn::before,
.listenbrainz-playlist-card .playlist-card-action-btn::before,
.lastfm-playlist-card .playlist-card-action-btn::before,
.soulsync-discovery-playlist-card .playlist-card-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.youtube-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.05)); }
.tidal-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(255, 102, 0, 0.2), rgba(255, 102, 0, 0.05)); }
.deezer-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(162, 56, 255, 0.2), rgba(162, 56, 255, 0.05)); }
.spotify-public-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0.05)); }
.listenbrainz-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(235, 116, 59, 0.2), rgba(235, 116, 59, 0.05)); }
.lastfm-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(213, 16, 7, 0.2), rgba(213, 16, 7, 0.05)); }
.soulsync-discovery-playlist-card .playlist-card-action-btn::before { background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0.05)); }

.youtube-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before,
.tidal-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before,
.deezer-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before,
.spotify-public-card .playlist-card-action-btn:hover:not(:disabled)::before,
.listenbrainz-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before,
.lastfm-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before,
.soulsync-discovery-playlist-card .playlist-card-action-btn:hover:not(:disabled)::before { opacity: 1; }

.youtube-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255, 0, 0, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 0, 0, 0.15); }
.tidal-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(255, 102, 0, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 102, 0, 0.15); }
.deezer-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(162, 56, 255, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(162, 56, 255, 0.15); }
.spotify-public-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(29, 185, 84, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(29, 185, 84, 0.15); }
.listenbrainz-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(235, 116, 59, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(235, 116, 59, 0.15); }
.lastfm-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(213, 16, 7, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(213, 16, 7, 0.15); }
.soulsync-discovery-playlist-card .playlist-card-action-btn:hover:not(:disabled) { color: #fff; border-color: rgba(20, 184, 166, 0.35); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(20, 184, 166, 0.15); }

.youtube-playlist-card .playlist-card-action-btn:disabled,
.tidal-playlist-card .playlist-card-action-btn:disabled,
.deezer-playlist-card .playlist-card-action-btn:disabled,
.spotify-public-card .playlist-card-action-btn:disabled,
.listenbrainz-playlist-card .playlist-card-action-btn:disabled,
.lastfm-playlist-card .playlist-card-action-btn:disabled,
.soulsync-discovery-playlist-card .playlist-card-action-btn:disabled {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ===============================
   YOUTUBE DISCOVERY MODAL STYLES
   =============================== */

.youtube-discovery-modal {
    max-width: 1200px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;

    /* Premium glassmorphic foundation */
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 0, 0, 0.3);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(255, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.youtube-discovery-modal .modal-header {
    padding: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.youtube-discovery-modal .modal-header h2 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.youtube-discovery-modal .modal-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin: 0 0 4px 0;
}

.youtube-discovery-modal .modal-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

.youtube-discovery-modal .modal-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}

.youtube-discovery-modal .modal-close-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.4);
}

.youtube-discovery-modal .modal-body {
    flex: 1;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.youtube-discovery-modal .progress-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
}

.youtube-discovery-modal .progress-label {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.youtube-discovery-modal .progress-bar-container {

    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    height: 20px !important;
    margin-bottom: 8px;
}

.youtube-discovery-modal .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    width: 0%;
    transition: width 0.5s ease;
}

.youtube-discovery-modal .progress-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-align: center;
}

.youtube-discovery-modal .discovery-table-container {
    flex: 1;
    overflow: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.youtube-discovery-modal .discovery-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* Enable fixed layout for consistent column widths */
}

.youtube-discovery-modal .discovery-table th {
    background: rgba(17, 17, 20, 0.96);
    color: #ffffff;
    font-weight: 600;
    padding: 12px 8px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column width distribution for balanced layout */
.youtube-discovery-modal .discovery-table th:nth-child(1),
/* YT Track */
.youtube-discovery-modal .discovery-table td:nth-child(1) {
    width: 17.5%;
}

.youtube-discovery-modal .discovery-table th:nth-child(2),
/* YT Artist */
.youtube-discovery-modal .discovery-table td:nth-child(2) {
    width: 15%;
}

.youtube-discovery-modal .discovery-table th:nth-child(3),
/* Status */
.youtube-discovery-modal .discovery-table td:nth-child(3) {
    width: 12%;
}

.youtube-discovery-modal .discovery-table th:nth-child(4),
/* Spotify Track */
.youtube-discovery-modal .discovery-table td:nth-child(4) {
    width: 17.5%;
}

.youtube-discovery-modal .discovery-table th:nth-child(5),
/* Spotify Artist */
.youtube-discovery-modal .discovery-table td:nth-child(5) {
    width: 15%;
}

.youtube-discovery-modal .discovery-table th:nth-child(6),
/* Album */
.youtube-discovery-modal .discovery-table td:nth-child(6) {
    width: 13%;
}

.youtube-discovery-modal .discovery-table th:nth-child(7),
/* Duration */
.youtube-discovery-modal .discovery-table td:nth-child(7) {
    width: 10%;
    text-align: center;
}

.youtube-discovery-modal .discovery-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.youtube-discovery-modal .discovery-table .yt-track,
.youtube-discovery-modal .discovery-table .yt-artist {
    color: rgba(255, 255, 255, 0.8);
}

.youtube-discovery-modal .discovery-table .discovery-status.found {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.youtube-discovery-modal .discovery-table .discovery-status.not-found {
    color: #ff6b6b;
    font-weight: 600;
}

.youtube-discovery-modal .discovery-table .discovery-status.error {
    color: #ffb84d;
    font-weight: 600;
}

.youtube-discovery-modal .discovery-table .discovery-status.wing-it {
    color: #ffb84d;
    font-weight: 600;
}

.youtube-discovery-modal .discovery-table .spotify-track,
.youtube-discovery-modal .discovery-table .spotify-artist,
.youtube-discovery-modal .discovery-table .spotify-album {
    color: #ffffff;
}

.youtube-discovery-modal .modal-footer {
    padding: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.youtube-discovery-modal .modal-footer-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.youtube-discovery-modal .modal-footer-organize {
    flex: none;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.youtube-discovery-modal .modal-footer-organize .playlist-modal-organize-toggle {
    width: 100%;
    font-size: 14px;
}

.youtube-discovery-modal .modal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.youtube-discovery-modal .modal-footer-actions .modal-info {
    flex: 1 1 100%;
    margin-bottom: 4px;
}

.youtube-discovery-modal .modal-footer-right {
    display: flex;
    gap: 12px;
}

.youtube-discovery-modal .modal-btn {
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.youtube-discovery-modal .modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.youtube-discovery-modal .modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.youtube-discovery-modal .modal-btn-primary {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    color: #ffffff;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.youtube-discovery-modal .modal-btn-primary:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #1fbc56 100%);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.youtube-discovery-modal .modal-btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5555 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.youtube-discovery-modal .modal-btn-danger:hover {
    background: linear-gradient(135deg, #ff5555 0%, #ff4444 100%);
    border-color: rgba(255, 107, 107, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.youtube-discovery-modal .sync-progress-display {
    color: rgb(var(--accent-light-rgb));
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* Modal state management */
.modal-overlay.hidden {
    display: none !important;
}

/* Playlist Details Modal - Clean Premium Design */
.playlist-modal {
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;

    /* Premium glassmorphic foundation */
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    /* Premium shadow effect */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    overflow: hidden;
}

.playlist-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 16px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-header-content h2 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.playlist-quick-info {
    display: flex;
    gap: 16px;
    font-size: 14px;
}

.playlist-track-count {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.playlist-owner {
    color: #b3b3b3;
}

.playlist-modal-close {
    color: #b3b3b3;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s ease;
    padding: 4px;
    margin: -4px;
}

.playlist-modal-close:hover {
    color: #ffffff;
    transform: scale(1.1);
}

.playlist-modal-body {
    flex: 1;
    padding: 0 28px;
    padding-left: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.playlist-description {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(var(--accent-rgb), 0.05);
    border-radius: 12px;
    border-left: 3px solid rgb(var(--accent-light-rgb));
}

.playlist-tracks-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.playlist-tracks-list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    /* Negative margin for better scrolling */
    padding: 0 12px;
}

/* Custom scrollbar for playlist tracks list */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.playlist-track-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: all 0.2s ease;
}

.playlist-track-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.playlist-track-number {
    width: 32px;
    text-align: center;
    color: #666666;
    font-size: 13px;
    font-weight: 500;
}

.playlist-track-info {
    flex: 1;
    margin-left: 16px;
    min-width: 0;
}

.playlist-track-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-track-artists {
    color: #b3b3b3;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-track-duration {
    color: #b3b3b3;
    font-size: 12px;
    font-weight: 500;
    margin-left: 16px;
    min-width: 40px;
    text-align: right;
}

.playlist-modal-footer {
    padding: 20px 28px 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}

.playlist-modal-footer-left {
    display: flex;
    gap: 12px;
}

.playlist-modal-footer-right {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.playlist-modal-organize-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
    max-width: 100%;
}

.playlist-modal-organize-toggle input {
    margin: 0;
    flex-shrink: 0;
}

/* ── Quality Profile selectors ───────────────────────────────────────────────
   Two variants of one control, deliberately distinguishable at a glance
   because they behave differently:

   .playlist-quality-profile-control   persisted — writes to the mirror row
   .acquisition-quality-profile-control  per-action — applies to this click only

   Shared: native arrow replaced with an inline SVG caret (the platform arrow
   renders near-black on these dark surfaces), the app's green accent on
   hover/focus, and an explicitly inert disabled state — a Quality Profile
   selector that cannot save must never look like it holds a value.
   ------------------------------------------------------------------------- */

.playlist-quality-profile-control,
.acquisition-quality-profile-control {
    --qp-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .58);
    /* Micro-label: uppercase + tracking reads as a field name at this size,
       where sentence case just looks like stray body text next to the value. */
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
}

.playlist-quality-profile-control select,
.acquisition-quality-profile-control select {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--qp-caret);
    background-repeat: no-repeat;
    background-position: right 11px center;
    border-radius: 9px;
    color: #fff;
    font-family: inherit;
    /* The value is the content — reset the label's uppercase micro-styling. */
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.playlist-quality-profile-control select:hover:not(:disabled),
.acquisition-quality-profile-control select:hover:not(:disabled) {
    border-color: rgba(var(--accent-rgb), .5);
}

.playlist-quality-profile-control select:focus-visible,
.acquisition-quality-profile-control select:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-light-rgb), .85);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

/* Firefox/Chromium honour these on Linux; elsewhere the native popup wins and
   the defaults are already readable. */
.playlist-quality-profile-control option,
.acquisition-quality-profile-control option {
    background: #17181c;
    color: #fff;
}

/* Disabled means "nothing here is saved" — see hydrate…Unavailable() in
   shared-helpers.js. Drop the caret so it doesn't read as openable. */
.playlist-quality-profile-control select:disabled,
.acquisition-quality-profile-control select:disabled {
    background-image: none;
    color: rgba(255, 255, 255, .42);
    font-style: italic;
    border-style: dashed;
    cursor: not-allowed;
}

/* ── Persisted variant: quiet, inset, sits among other saved settings ────── */

.playlist-quality-profile-control select {
    min-width: 170px;
    padding: 7px 30px 7px 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    background-color: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.playlist-quality-profile-control.compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.playlist-quality-profile-control.compact select {
    min-width: 145px;
    max-width: 190px;
    width: 100%;
}

/* ── Per-action variant: a form field you are filling in right now ───────── */

.acquisition-quality-profile-control {
    /* Grouped on a surface of its own so the label + value read as one field
       rather than as two loose bits of footer text — it sits next to the action
       buttons, where a bare label would just look like stray text. */
    gap: 10px;
    padding: 7px 11px 7px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
    transition: border-color .18s ease, background-color .18s ease;
}

/* Whole field goes inert together, not just the <select>. */
.acquisition-quality-profile-control:has(select:disabled) {
    background: rgba(255, 255, 255, .015);
    border-color: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .32);
}

.acquisition-quality-profile-control > span {
    position: relative;
    padding-left: 11px;
    white-space: nowrap;
}

/* A small tick marking this as a live choice. The persisted variant has none —
   that assignment is already decided.

   It stays neutral at rest and only takes the accent on engagement: these
   footers already carry two green action buttons, and a third resting green
   just competes with them. Lighting up on hover/focus keeps the cue but spends
   the colour only when the user is actually making the choice. */
.acquisition-quality-profile-control > span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 11px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .26);
    transition: background .18s ease;
}

.acquisition-quality-profile-control:hover:not(:has(select:disabled)) > span::before,
.acquisition-quality-profile-control:focus-within > span::before {
    background: rgba(var(--accent-light-rgb), .9);
}

.acquisition-quality-profile-control:has(select:disabled) > span::before {
    background: rgba(255, 255, 255, .12);
}

.acquisition-quality-profile-control select {
    min-width: 176px;
    max-width: 240px;
    padding: 8px 32px 8px 12px;
    border: 1px solid rgba(255, 255, 255, .13);
    background-color: rgba(12, 12, 14, .72);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

@media (max-width: 640px) {
    .acquisition-quality-profile-control {
        width: 100%;
        gap: 8px;
    }

    .acquisition-quality-profile-control select {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
}

.playlist-modal-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 100px;
}

.playlist-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.playlist-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-1px);
}

.playlist-modal-btn-primary {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.playlist-modal-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

/* Sync mode picker — Replace vs Append, sits left of the Sync button.
   Sized to match the modal-btn height so it doesn't break footer alignment. */
.playlist-modal-sync-mode {
    background: #2a2a2a;
    color: #ffffff;
    border: 1px solid #555555;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    margin-right: 4px;
}

.playlist-modal-sync-mode:hover {
    border-color: #777777;
    background: #333333;
}

.playlist-modal-btn-tertiary {
    background: #404040;
    color: #ffffff;
    border: 1px solid #666666;
}

.playlist-modal-btn-tertiary:hover {
    background: #505050;
    border-color: #777777;
    transform: translateY(-1px);
}

.playlist-modal-btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}

.playlist-modal-btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.playlist-modal-btn-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.playlist-modal-btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* Watchlist Modal Styles */

/* Fullscreen modifier for watchlist modal */
.watchlist-fullscreen {
    max-width: 95vw;
    width: 95vw;
    max-height: 95vh;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Override playlist-modal-body within watchlist to allow grid scrolling */
.watchlist-fullscreen .playlist-modal-body {
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

/* ── Header polish ─────────────────────────────── */
.watchlist-fullscreen .playlist-header-content h2 {
    font-size: 26px;
    letter-spacing: -0.3px;
    padding-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.watchlist-fullscreen .playlist-header-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), transparent);
    border-radius: 2px;
}

.watchlist-header-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.4));
}

.watchlist-fullscreen .playlist-quick-info {
    gap: 10px;
}

.watchlist-fullscreen .playlist-track-count,
.watchlist-fullscreen .playlist-owner {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.watchlist-fullscreen .playlist-track-count {
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.watchlist-fullscreen .playlist-owner {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Close button ──────────────────────────────── */
.watchlist-fullscreen .playlist-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
    font-size: 20px;
}

.watchlist-fullscreen .playlist-modal-close:hover {
    background: rgba(255, 59, 48, 0.15);
    color: #ff6b6b;
    transform: rotate(90deg) scale(1.1);
}

/* ── Action buttons ────────────────────────────── */
.watchlist-actions {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px !important;
}

.watchlist-actions .playlist-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.watchlist-actions .playlist-modal-btn svg {
    flex-shrink: 0;
}

/* Scan button: shimmer on hover */
/* ── Processing Button Animation (rotating border gradient) ── */

.btn-processing {
    position: relative !important;
    overflow: hidden !important;
    color: rgba(255, 255, 255, 0.6) !important;
    pointer-events: none;
}

.btn-processing::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        transparent 0%,
        rgb(var(--accent-rgb)) 25%,
        transparent 50%,
        rgb(var(--accent-rgb)) 75%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: btn-border-spin 2.5s linear infinite;
    pointer-events: none;
}

@keyframes btn-border-spin {
    0% { --border-angle: 0deg; }
    100% { --border-angle: 360deg; }
}

@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.watchlist-btn-scan {
    position: relative;
    overflow: hidden;
}

.watchlist-btn-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: translateX(-100%);
    transition: none;
}

.watchlist-btn-scan:not(:disabled):hover::before {
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

/* Similar Artists button: discovery blue identity */
.watchlist-btn-similar {
    border: 1px solid rgba(99, 179, 237, 0.15) !important;
    transition: all 0.25s ease !important;
}

.watchlist-btn-similar:not(:disabled):hover {
    background: rgba(99, 179, 237, 0.1) !important;
    border-color: rgba(99, 179, 237, 0.35) !important;
    color: #90cdf4 !important;
    box-shadow: 0 0 20px rgba(99, 179, 237, 0.08);
}

/* Settings button: subtle warm */
.watchlist-btn-settings {
    transition: all 0.25s ease !important;
}

.watchlist-btn-settings:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ── Search bar ────────────────────────────────── */
.watchlist-search-container {
    padding: 0 32px;
    position: relative;
}

.watchlist-search-icon {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: fill 0.2s ease;
    z-index: 1;
}

.watchlist-search-container:focus-within .watchlist-search-icon {
    fill: rgb(var(--accent-rgb));
}

/* Card grid */
.watchlist-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    padding: 24px 32px 32px;
}

/* ── Artist cards ──────────────────────────────── */
.watchlist-artist-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(18, 18, 18, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    contain: layout style paint;
    will-change: transform;
}

.watchlist-artist-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.watchlist-artist-card:active {
    transform: translateY(-2px);
}

/* Image container with gradient fade */
.watchlist-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 1) 0%,
            rgba(20, 20, 20, 1) 100%);
}

.watchlist-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(18, 18, 18, 1) 0%, rgba(18, 18, 18, 0.5) 45%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.watchlist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.watchlist-artist-card:hover .watchlist-card-image img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Image fallback */
.watchlist-card-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: rgba(255, 255, 255, 0.3);
}

/* Info overlapping the gradient fade */
.watchlist-card-info {
    position: relative;
    z-index: 2;
    margin-top: -36px;
    padding: 0 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: transparent;
}

.watchlist-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.25s ease;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.watchlist-artist-card:hover .watchlist-card-name {
    color: rgb(var(--accent-light-rgb));
}

.watchlist-card-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Card release-type pills */
.watchlist-card-sources {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 16px 4px;
}

.watchlist-source-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    line-height: 1.3;
}

.watchlist-source-spotify {
    background: rgba(30, 215, 96, 0.15);
    color: #1ed760;
}

.watchlist-source-itunes {
    background: rgba(252, 60, 68, 0.15);
    color: #fc3c44;
}

.watchlist-source-deezer {
    background: rgba(162, 101, 230, 0.15);
    color: #a265e6;
}

.watchlist-source-discogs {
    background: rgba(212, 165, 116, 0.15);
    color: #D4A574;
}

.watchlist-source-musicbrainz {
    background: rgba(186, 71, 143, 0.15);
    color: #BA478F;
}

.watchlist-source-amazon {
    background: rgba(255, 153, 0, 0.15);
    color: #FF9900;
}

.watchlist-card-pills {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 16px 12px;
}

.watchlist-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.3;
    letter-spacing: 0.5px;
    transition: transform 0.15s ease;
}

.watchlist-pill:hover {
    transform: scale(1.08);
}

.watchlist-pill-active {
    background: rgba(var(--accent-rgb), 0.18);
    color: rgb(var(--accent-light-rgb));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.12);
}

.watchlist-pill-filter {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.08);
}

/* Checkbox — top-left, hidden until hover or checked */
.watchlist-card-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watchlist-card-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.watchlist-card-checkbox input:checked+.watchlist-checkbox-custom {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgb(var(--accent-rgb));
}

.watchlist-card-checkbox input:checked+.watchlist-checkbox-custom::after {
    content: '✓';
    color: rgb(var(--accent-rgb));
    font-size: 13px;
    font-weight: 700;
}

.watchlist-artist-card:hover .watchlist-card-checkbox,
.watchlist-card-checkbox:has(input:checked) {
    opacity: 1;
}

/* Remove × button — top-right, visible on hover */
.watchlist-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watchlist-artist-card:hover .watchlist-card-remove {
    opacity: 1;
}

.watchlist-card-remove:hover {
    background: rgba(255, 59, 48, 0.7);
    color: #ffffff;
}

/* Gear icon — top-right, visible on hover */
.watchlist-card-gear {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.3s ease;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.watchlist-artist-card:hover .watchlist-card-gear {
    opacity: 1;
}

.watchlist-card-gear:hover {
    background: rgba(var(--accent-rgb), 0.7);
    color: #ffffff;
    transform: rotate(45deg);
}

.watchlist-card-gear svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Watchlist Artist Detail Overlay */
.watchlist-artist-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 18, 18, 0.98);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.watchlist-artist-detail-overlay.visible {
    transform: translateX(0);
}

/* Banner at top of detail view */
.watchlist-detail-banner {
    position: relative;
    width: 100%;
}

.watchlist-detail-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.watchlist-detail-banner-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(18, 18, 18, 0.98));
}

.watchlist-detail-content {
    padding: 32px;
    max-width: 640px;
    margin: 0 auto;
}

.watchlist-detail-content.has-banner {
    padding-top: 16px;
}

/* Bio text */
.watchlist-detail-bio {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Watchlist info row */
.watchlist-detail-watchlist-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.watchlist-detail-info-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
}

/* Recent releases grid */
.watchlist-detail-releases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.watchlist-detail-release {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.watchlist-detail-release:hover {
    background: rgba(255, 255, 255, 0.08);
}

.watchlist-detail-release img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.watchlist-detail-release-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.watchlist-detail-release-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-detail-release-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.watchlist-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 24px;
    transition: color 0.15s ease;
}

.watchlist-detail-back:hover {
    color: rgb(var(--accent-rgb));
}

.watchlist-detail-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.watchlist-detail-hero img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--accent-rgb), 0.3);
    background: #1a1a1a;
    flex-shrink: 0;
}

.watchlist-detail-hero-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.watchlist-detail-hero-name {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

.watchlist-detail-hero-stats {
    display: flex;
    gap: 20px;
}

.watchlist-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.watchlist-detail-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--accent-rgb));
}

.watchlist-detail-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.watchlist-detail-hero-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.watchlist-detail-genre-tag {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
}

.watchlist-detail-section {
    margin-bottom: 24px;
}

.watchlist-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.watchlist-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.watchlist-detail-actions > * {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.watchlist-detail-actions > *:active {
    transform: scale(0.98);
}

.watchlist-detail-discog-btn {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
    font-weight: 600;
}

.watchlist-detail-discog-btn:hover {
    background: rgba(var(--accent-rgb), 0.35);
}

.watchlist-detail-settings-btn {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.watchlist-detail-settings-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.watchlist-detail-remove-btn {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.watchlist-detail-remove-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

/* Live activity classes (replaces inline styles) */
.watchlist-live-activity {
    display: flex;
    gap: 18px;
    margin-top: 15px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: flex-start;
}

.watchlist-live-activity-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.watchlist-live-activity-artist-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgb(var(--accent-rgb));
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25);
    object-fit: cover;
    background: #1a1a1a;
}

.watchlist-live-activity-album-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 2px solid #ffc107;
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.2);
    object-fit: cover;
    background: #1a1a1a;
}

.watchlist-live-activity-label {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-live-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 250px;
    max-width: 300px;
}

.watchlist-live-activity-feed-label {
    font-size: 10px;
    color: #b3b3b3;
    text-transform: uppercase;
}

.watchlist-live-activity-feed-label-orange {
    font-size: 10px;
    color: #ff9800;
    text-transform: uppercase;
}

.watchlist-live-activity-track {
    font-size: 11px;
    font-weight: bold;
    color: rgb(var(--accent-light-rgb));
    margin-bottom: 8px;
}

.watchlist-live-addition-item {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 3px;
    background: #1a1a1a;
    border-radius: 4px;
}

.watchlist-live-addition-item img {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
}

.watchlist-live-addition-item-info {
    flex: 1;
    overflow: hidden;
}

.watchlist-live-addition-item-track {
    font-weight: bold;
    font-size: 10px;
    color: rgb(var(--accent-light-rgb));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-live-addition-item-artist {
    font-size: 9px;
    color: #b3b3b3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watchlist-live-addition-empty {
    color: #666;
    font-size: 10px;
}

.watchlist-scan-completion {
    text-align: center;
    padding: 15px;
    background: #2a2a2a;
    border-radius: 8px;
    border: 1px solid #444;
}

.watchlist-scan-completion-message {
    font-size: 14px;
    color: rgb(var(--accent-light-rgb));
    margin-bottom: 10px;
}

/* #831: expandable per-run track ledger under the scan summary */
.watchlist-scan-tracks-toggle {
    margin-top: 10px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.watchlist-scan-tracks-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.watchlist-scan-tracks {
    margin-top: 10px;
    max-height: 280px;
    overflow-y: auto;
    text-align: left;
}

.watchlist-scan-tracks-section {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #888;
    margin: 10px 0 4px;
}

.watchlist-scan-tracks .watchlist-live-addition-item {
    position: relative;
}

.watchlist-scan-track-badge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.watchlist-scan-track-badge.added {
    background: rgba(80, 200, 120, 0.15);
    color: #6fd99a;
}

.watchlist-scan-track-badge.skipped {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
}

/* ── #831 round 2: full-width live scan deck ───────────────────────────── */

.wl-scan-deck {
    width: 100%;
    margin-top: 15px;
    padding: 18px 20px 16px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(255, 255, 255, 0.02) 55%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    text-align: left;
}

.wl-scan-deck-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wl-scan-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
    animation: wl-live-pulse 1.6s ease-out infinite;
}

@keyframes wl-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.wl-scan-live-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgb(var(--accent-light-rgb));
}

.wl-scan-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.wl-scan-counters {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.wl-scan-counter {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wl-scan-counter.added {
    background: rgba(80, 200, 120, 0.1);
    border-color: rgba(80, 200, 120, 0.25);
}

.wl-scan-counter-num {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
}

.wl-scan-counter.added .wl-scan-counter-num {
    color: #6fd99a;
}

.wl-scan-counter-num.pop {
    animation: wl-counter-pop 0.35s ease;
}

@keyframes wl-counter-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.wl-scan-counter-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
}

.wl-scan-progress {
    margin: 12px 0 14px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.wl-scan-progress-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    position: relative;
    transition: width 0.6s ease;
}

.wl-scan-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: wl-progress-shimmer 1.8s linear infinite;
}

@keyframes wl-progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.wl-scan-deck-body {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 760px) {
    .wl-scan-deck-body { grid-template-columns: 1fr; }
}

/* Hero — big square portrait (artist-page language) with the current album
   stamped as an overlay badge, so the layout NEVER shifts when album art is
   missing: the badge keeps its slot and shows a glyph placeholder instead. */
.wl-scan-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.wl-scan-portrait {
    position: relative;
    width: 148px;
    height: 148px;
    border-radius: 16px;
    background: #181818;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.25);
    flex-shrink: 0;
}

/* glyph placeholder behind the (possibly hidden) artist image */
.wl-scan-portrait::before {
    content: '♪';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.12);
}

.wl-scan-portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.wl-scan-album-thumb {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    background: #181818;
    border: 3px solid #121212;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.wl-scan-album-thumb::before {
    content: '♪';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.15);
}

.wl-scan-album-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wl-scan-hero-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.wl-scan-artist-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-scan-phase {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(var(--accent-light-rgb), 0.9);
}

/* Fixed-height "now checking" block — placeholders keep the slot when the
   scan hasn't reached an album/track yet, so nothing jumps. */
.wl-scan-now {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 2px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    min-height: 44px;
}

.wl-scan-album-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-scan-track-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Feed — inset panel (artist-page sidebar language) with a FIXED height so
   the deck is the same size whether 0 or 10 tracks have been added. */
.wl-scan-feed {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 172px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.wl-scan-feed-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #6fd99a;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.wl-scan-feed-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wl-scan-feed-list .watchlist-live-addition-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

.wl-scan-feed-list .watchlist-live-addition-item {
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.wl-scan-feed-list .watchlist-live-addition-item img {
    width: 34px;
    height: 34px;
    border-radius: 5px;
}

.wl-scan-feed-list .watchlist-live-addition-item.is-new {
    animation: wl-feed-slide-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes wl-feed-slide-in {
    0% { opacity: 0; transform: translateY(-10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── #831 round 2: scan history modal run cards ────────────────────────── */

.wlh-run {
    margin-bottom: 6px;
}

.wlh-run-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.wlh-run-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

.wlh-run-when {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.wlh-run-status.cancelled {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.wlh-run-stats {
    margin-left: auto;
    display: flex;
    gap: 14px;
}

.wlh-run-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.wlh-run-stat.added {
    color: #6fd99a;
}

.wlh-run-stat i {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.4);
}

.wlh-run-body {
    padding: 8px 6px 4px 14px;
}

.wlh-run-body .origin-modal-loading,
.wlh-empty {
    padding: 16px;
}

.wlh-run-body .watchlist-live-addition-item {
    margin-bottom: 4px;
}

/* ── #831 round 3: watchlist action chips (artist-page button language) ── */

.wl-chip {
    --chip-rgb: 148, 163, 184;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: inherit;
    color: rgba(var(--chip-rgb), 1);
    background: linear-gradient(135deg, rgba(var(--chip-rgb), 0.15) 0%, rgba(var(--chip-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--chip-rgb), 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    overflow: hidden;
}

.wl-chip:hover {
    background: linear-gradient(135deg, rgba(var(--chip-rgb), 0.25) 0%, rgba(var(--chip-rgb), 0.12) 100%);
    border-color: rgba(var(--chip-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--chip-rgb), 0.25);
}

.wl-chip:active {
    transform: translateY(0);
    box-shadow: none;
}

.wl-chip svg {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.wl-chip:hover svg {
    transform: scale(1.12);
}

.wl-chip--blue   { --chip-rgb: 96, 165, 250; }
.wl-chip--green  { --chip-rgb: 111, 217, 154; }
.wl-chip--amber  { --chip-rgb: 251, 191, 36; }
.wl-chip--red    { --chip-rgb: 248, 113, 113; }
.wl-chip--slate  { --chip-rgb: 165, 180, 203; }

/* Primary CTA — solid accent gradient + shimmer sweep */
.wl-chip--cta {
    color: #fff;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border: 1px solid rgba(var(--accent-light-rgb), 0.6);
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
}

.wl-chip--cta:hover {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-color: rgba(var(--accent-light-rgb), 0.9);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.5);
}

.wl-chip-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: wl-chip-shimmer 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes wl-chip-shimmer {
    0% { transform: translateX(-100%); }
    55% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Header meta chips */
.wl-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wl-meta-chip--accent {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── #831 round 3: Global Settings modal reskin ───────────────────────── */

.wl-global-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wl-global-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: #fff;
}

.wl-global-modal-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.wl-global-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wl-global-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Option cards: live checked-state feedback (applies to the per-artist config
   modal too — same components, same standard). */
.config-option:has(input[type="checkbox"]:checked) {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.07);
}

.config-option:has(input[type="checkbox"]:checked) .config-option-icon {
    filter: none;
    opacity: 1;
}

.config-option:not(:has(input[type="checkbox"]:checked)) .config-option-icon {
    filter: grayscale(0.7);
    opacity: 0.55;
}

/* The global-override master toggle gets a stronger enabled treatment */
.global-override-toggle.enabled {
    border-color: rgba(var(--accent-rgb), 0.6) !important;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04)) !important;
    box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.12);
}

.wl-global-modal .config-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgb(var(--accent-light-rgb));
}

/* Watchlist Search */

.watchlist-search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.watchlist-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.watchlist-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Watchlist & Wishlist Batch Action Bar */
.watchlist-batch-bar,
.wishlist-batch-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    margin: 0 32px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.watchlist-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    user-select: none;
}

.watchlist-select-all-label input[type="checkbox"] {
    cursor: pointer;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.watchlist-batch-count,
.wishlist-batch-count {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.watchlist-batch-remove-btn,
.wishlist-batch-remove-btn {
    border-color: rgba(255, 59, 48, 0.4) !important;
    color: #ff6b6b !important;
}

.watchlist-batch-remove-btn:hover,
.wishlist-batch-remove-btn:hover {
    background: rgba(255, 59, 48, 0.2) !important;
    border-color: rgba(255, 59, 48, 0.6) !important;
}

/* Watchlist & Wishlist Checkbox */
.watchlist-checkbox-wrapper,
.wishlist-checkbox-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
}

.watchlist-checkbox-wrapper input[type="checkbox"],
.wishlist-checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.watchlist-checkbox-custom,
.wishlist-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watchlist-checkbox-wrapper:hover .watchlist-checkbox-custom,
.wishlist-checkbox-wrapper:hover .wishlist-checkbox-custom {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.watchlist-checkbox-wrapper input:checked+.watchlist-checkbox-custom,
.wishlist-checkbox-wrapper input:checked+.wishlist-checkbox-custom {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgb(var(--accent-rgb));
}

.watchlist-checkbox-wrapper input:checked+.watchlist-checkbox-custom::after,
.wishlist-checkbox-wrapper input:checked+.wishlist-checkbox-custom::after {
    content: '✓';
    color: rgb(var(--accent-rgb));
    font-size: 13px;
    font-weight: 700;
}

/* ===== WISHLIST OVERVIEW MODAL STYLES ===== */

/* Category Grid */
.wishlist-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 28px;
}

/* Category Card */
.wishlist-category-card {
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mosaic Background with Scrolling Rows */
.wishlist-mosaic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

.wishlist-mosaic-row-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.wishlist-mosaic-row {
    display: flex;
    width: fit-content;
    height: 100%;
    opacity: 0;
    animation: fadeInRow 1s ease-out forwards, infiniteScroll var(--speed, 30s) linear infinite;
    will-change: transform;
}

.wishlist-mosaic-row.scroll-right {
    animation-direction: normal, reverse;
}

.wishlist-mosaic-tile {
    width: 80px;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.wishlist-mosaic-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Fallback gradient for small collections */
.wishlist-mosaic-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.35) 0%,
            rgba(138, 43, 226, 0.35) 50%,
            rgba(255, 20, 147, 0.35) 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    z-index: 0;
    opacity: 0;
    animation: fadeInRow 1s ease-out forwards, gradientShift 8s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Overlay for text readability */
.wishlist-mosaic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.75) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Content layer above mosaic */
.wishlist-category-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Fade in rows initially */
@keyframes fadeInRow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.7;
    }
}

/* Infinite scrolling animation */
/* Content is duplicated 2x, animation moves by -50% (one set) for seamless loop */
@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.wishlist-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wishlist-category-card:hover::before {
    opacity: 1;
}

.wishlist-category-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2);
}

.wishlist-category-card:hover .wishlist-mosaic-image {
    transform: scale(1.1);
}

.wishlist-category-card:hover .wishlist-mosaic-overlay {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(0, 0, 0, 0.8) 100%);
}

.wishlist-category-card.next-in-queue {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.08) 0%,
            rgba(18, 18, 18, 0.98) 100%);
}

.wishlist-category-icon {
    font-size: 48px;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
}

.wishlist-category-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.wishlist-category-count {
    font-size: 32px;
    font-weight: 700;
    color: rgb(var(--accent-light-rgb));
    margin: 12px 0;
}

.wishlist-category-badge {
    display: inline-block;
    background: rgba(var(--accent-rgb), 0.2);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    margin-top: 12px;
}

/* Category Tracks View */
.wishlist-category-tracks {
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wishlist-category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

.wishlist-back-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e0e0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wishlist-back-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateX(-2px);
}

.wishlist-category-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
}

.wishlist-select-all-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wishlist-select-all-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-rgb));
}

.wishlist-batch-bar {
    margin: 0 0 12px;
}

.loading-indicator {
    text-align: center;
    padding: 60px 20px;
    color: #b3b3b3;
    font-size: 16px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #b3b3b3;
    font-size: 16px;
}

.playlist-tracks-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
    padding-right: 8px;
}

.playlist-tracks-scroll::-webkit-scrollbar {
    width: 8px;
}

.playlist-tracks-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.playlist-tracks-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.4);
    border-radius: 4px;
}

.playlist-tracks-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.6);
}

/* Album Grouping Cards */
.wishlist-album-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

/* per-artist sections (#1065): tri-state select + remove/download the whole
   catalog in one click */
.wishlist-artist-section {
    margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; padding: 4px 10px 8px;
    background: rgba(255,255,255,0.015);
}
.wishlist-artist-header {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wishlist-artist-title {
    font-size: 15px; font-weight: 800; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wishlist-artist-counts {
    flex: 1; font-size: 12px; color: rgba(255,255,255,0.4); white-space: nowrap;
}
.wishlist-artist-download-btn {
    flex: none; width: 30px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(29,185,84,0.35); background: rgba(29,185,84,0.12);
    color: #1db954; font-size: 14px; line-height: 1;
}
.wishlist-artist-download-btn:hover { background: rgba(29,185,84,0.28); }
.wishlist-delete-artist-btn { flex: none; }

.wishlist-load-more-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.3);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.wishlist-load-more-btn:hover {
    background: rgba(138, 43, 226, 0.2);
    color: #fff;
}

.wishlist-load-more-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.wishlist-album-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.wishlist-album-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}

.wishlist-album-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.wishlist-album-image {
    width: 64px;
    height: 64px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    flex-shrink: 0;
}

.wishlist-album-info {
    flex: 1;
    min-width: 0;
}

.wishlist-album-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-album-artist {
    font-size: 14px;
    color: #b3b3b3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-album-track-count {
    font-size: 12px;
    color: rgb(var(--accent-rgb));
    font-weight: 500;
}

.wishlist-album-expand-icon {
    font-size: 14px;
    color: #b3b3b3;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.wishlist-album-tracks {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
}

.wishlist-album-track {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.wishlist-album-track:last-child {
    border-bottom: none;
}

.wishlist-album-track:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.wishlist-album-track-name {
    font-size: 14px;
    color: #e0e0e0;
}

/* Singles Track Items with Images */
.playlist-track-item-with-image {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.playlist-track-item-with-image:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.playlist-track-image {
    width: 48px;
    height: 48px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    flex-shrink: 0;
}

/* Wishlist Delete Buttons */
.wishlist-track-item {
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
}

.wishlist-delete-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(220, 53, 69, 0.9);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.wishlist-track-item:hover .wishlist-delete-btn {
    opacity: 1;
    pointer-events: all;
}

.wishlist-delete-btn:hover {
    background: rgba(220, 53, 69, 1);
    transform: translateY(-50%) scale(1.1);
}

.wishlist-delete-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Smaller delete button for tracks within albums */
.wishlist-delete-btn-small {
    padding: 6px 10px;
    font-size: 14px;
}

/* Album header delete button */
.wishlist-album-header {
    position: relative;
}

.wishlist-delete-album-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(220, 53, 69, 0.9);
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.wishlist-album-card:hover .wishlist-delete-album-btn {
    opacity: 1;
    pointer-events: all;
}

.wishlist-delete-album-btn:hover {
    background: rgba(220, 53, 69, 1);
    transform: translateY(-50%) scale(1.1);
}

.wishlist-delete-album-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Ensure album track items have proper positioning for delete button */
.wishlist-album-track.wishlist-track-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wishlist-album-track.wishlist-track-item .wishlist-album-track-name {
    flex: 1;
}

/* Confirmation Modal - Higher z-index to show above wishlist modal */
.confirmation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.confirmation-modal-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.confirmation-modal {
    background: #1a1a1a;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirmation-modal-overlay.show .confirmation-modal {
    transform: scale(1);
}

.confirmation-modal-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.confirmation-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-bottom: 12px;
}

.confirmation-modal-message {
    font-size: 14px;
    color: #b3b3b3;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.confirmation-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirmation-modal-btn {
    padding: 12px 32px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.confirmation-modal-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.confirmation-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.confirmation-modal-btn-confirm {
    background: #dc3545;
    color: #ffffff;
}

.confirmation-modal-btn-confirm:hover {
    background: #c82333;
    transform: scale(1.05);
}

.confirmation-modal-btn:active {
    transform: scale(0.95);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wishlist-category-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }

    .wishlist-category-card {
        padding: 24px 20px;
        min-height: 200px;
    }

    .wishlist-mosaic-tile {
        width: 60px;
        /* Smaller tiles on mobile */
    }

    .wishlist-category-icon {
        font-size: 36px;
    }

    .wishlist-category-title {
        font-size: 18px;
    }

    .wishlist-category-count {
        font-size: 28px;
    }
}

.watchlist-artist-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.watchlist-artist-name {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.watchlist-artist-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.watchlist-artist-scan {
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.7);
    font-weight: 500;
}

.watchlist-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== WATCHLIST ARTIST CONFIG MODAL STYLES ===== */

#watchlist-artist-config-modal-overlay {
    z-index: 11000;
    /* Higher than default modal-overlay to appear on top of watchlist modal */
}

.watchlist-artist-config-modal {
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.98) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border-radius: 24px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    max-width: 580px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.watchlist-artist-config-header {
    position: relative;
    background: linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.15) 0%,
            rgba(var(--accent-rgb), 0.05) 50%,
            transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.watchlist-artist-config-hero {
    padding: 32px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.watchlist-artist-config-hero-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.2);
    flex-shrink: 0;
}

.watchlist-artist-config-hero-info {
    flex: 1;
    min-width: 0;
}

.watchlist-artist-config-hero-name {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.watchlist-artist-config-hero-stats {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.watchlist-artist-config-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.watchlist-artist-config-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 1);
}

.watchlist-artist-config-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.watchlist-artist-config-hero-genres {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.watchlist-artist-config-genre-tag {
    padding: 4px 12px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    font-size: 12px;
    color: rgba(var(--accent-rgb), 1);
    font-weight: 500;
}

.watchlist-artist-config-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
}

.watchlist-artist-config-close:hover {
    color: #ffffff;
    background: rgba(255, 59, 48, 0.2);
    transform: scale(1.1);
}

.watchlist-artist-config-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.watchlist-artist-config-body {
    padding: 28px;
    flex: 1;
}

.config-section {
    margin-bottom: 24px;
}

.config-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.config-section-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
}

.config-metadata-source-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.config-msrc-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.config-msrc-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.config-msrc-btn.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color, #1DB954);
    color: #fff;
}

.config-msrc-icon {
    font-size: 16px;
}

.config-msrc-label {
    white-space: nowrap;
}

.genre-whitelist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.genre-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    white-space: nowrap;
}

.genre-chip-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

.genre-chip-x:hover {
    color: #ef5350;
}

/* ── Live Log Viewer ── */
.log-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.log-viewer-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.log-viewer-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 10px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.log-viewer-filters {
    display: flex;
    gap: 4px;
}

.log-filter-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.log-filter-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.log-filter-btn.active { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.log-filter-btn.lvl-debug.active { color: #888; border-color: #666; }
.log-filter-btn.lvl-info.active { color: #4fc3f7; border-color: #4fc3f7; }
.log-filter-btn.lvl-warning.active { color: #ffd54f; border-color: #ffd54f; }
.log-filter-btn.lvl-error.active { color: #ef5350; border-color: #ef5350; }

.log-viewer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-action-btn {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.log-action-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.log-viewer-search {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: #e0e0e0;
    padding: 4px 10px;
    font-size: 12px;
    width: 160px;
    outline: none;
}
.log-viewer-search:focus { border-color: rgba(255, 255, 255, 0.3); }

.log-autoscroll-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.log-viewer-terminal {
    background: #0a0a14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    height: 520px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    /* Always reserve the scrollbar gutter so switching between a long log
       (scrollbar present) and a short one (absent) never shifts the width. */
    scrollbar-gutter: stable;
    padding: 12px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}

.log-viewer-terminal::-webkit-scrollbar { width: 6px; }
.log-viewer-terminal::-webkit-scrollbar-track { background: transparent; }
.log-viewer-terminal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

.log-viewer-lines {
    word-break: break-all;
}

.log-line {
    padding: 1px 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.log-debug { color: #666; }
.log-info { color: #4fc3f7; }
.log-warning { color: #ffd54f; }
.log-error { color: #ef5350; font-weight: 500; }
.log-plain { color: #aaa; }

.log-viewer-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.log-live-dot {
    color: #4caf50;
    animation: log-pulse 2s ease-in-out infinite;
}

@keyframes log-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.config-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-option {
    display: flex;
    align-items: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.config-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px);
}

.config-option input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    cursor: pointer;
    accent-color: rgb(var(--accent-rgb));
    flex-shrink: 0;
}

.config-option-content {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
}

.config-option-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.config-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-option-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.config-option-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.config-option input[type="checkbox"]:checked+.config-option-content {
    opacity: 1;
}

.config-option input[type="checkbox"]:not(:checked)+.config-option-content {
    opacity: 0.5;
}

.config-exclude-terms-container {
    padding: 4px 0;
}

.config-exclude-terms-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.config-exclude-terms-input:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.config-exclude-terms-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.config-exclude-terms-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
}

.watchlist-artist-config-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.config-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* .config-modal-btn* migrated to the shared .btn / .btn--primary / .btn--secondary primitive. */

/* Linked Provider Artist */
/* Per-source linked rows */
.wl-linked-sources {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wl-linked-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.wl-linked-row.matched {
    border-color: rgba(76, 175, 80, 0.15);
}

.wl-linked-row.unmatched {
    border-color: rgba(255, 255, 255, 0.04);
    opacity: 0.7;
}

.wl-linked-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.wl-linked-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); width: 90px; flex-shrink: 0; }
.wl-linked-status { flex: 1; min-width: 0; font-size: 11px; }
.wl-linked-id { color: rgba(255,255,255,0.5); font-family: monospace; font-size: 11px; }
.wl-linked-none { color: rgba(255,255,255,0.25); font-style: italic; }

.wl-linked-fix-btn {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    flex-shrink: 0;
}

.wl-linked-fix-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.3);
}

.wl-linked-clear-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    flex-shrink: 0;
}

.wl-linked-clear-btn:hover { color: #ef4444; }

/* Per-source search panel */
.wl-linked-search-panel {
    margin-top: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}

.wl-linked-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.wl-linked-search-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    font-size: 16px;
}

.wl-linked-search-close:hover { color: #fff; }

/* Keep existing search styles */
.watchlist-linked-search {
    margin-top: 12px;
}

.watchlist-linked-search-input-row {
    display: flex;
    gap: 8px;
}

.watchlist-linked-search-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.watchlist-linked-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.watchlist-linked-search-btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.watchlist-linked-search-btn:hover {
    background: rgba(var(--accent-rgb), 0.3);
}

.watchlist-linked-search-results {
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.watchlist-linked-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s;
}

.watchlist-linked-search-result:hover {
    background: rgba(255, 255, 255, 0.07);
}

.watchlist-linked-result-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.watchlist-linked-result-img-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.watchlist-linked-result-info {
    flex: 1;
    min-width: 0;
}

.watchlist-linked-result-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-linked-result-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.watchlist-linked-select-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.watchlist-linked-select-btn:hover {
    background: rgba(var(--accent-rgb), 0.3);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .watchlist-artist-config-modal {
        width: 95%;
        max-width: none;
    }

    .watchlist-artist-config-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .watchlist-artist-config-hero-stats {
        justify-content: center;
    }

    .config-modal-actions {
        flex-direction: column-reverse;
    }

    .config-modal-actions .btn {
        width: 100%;
    }
}

/* Watchlist Global Settings */
#watchlist-global-config-modal-overlay {
    z-index: 11000;
}

.global-override-toggle {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.3s;
}

.include-everything-option {
    border: 1px dashed rgba(255, 152, 0, 0.4);
    border-radius: 12px;
    padding: 12px;
}

.watchlist-global-settings-active {
    background: rgba(255, 152, 0, 0.2) !important;
    border-color: rgba(255, 152, 0, 0.4) !important;
    color: #ff9800 !important;
}

.watchlist-global-override-banner {
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #ff9800;
    animation: fadeIn 0.3s ease;
}

/* Add these styles to the end of style.css */

.sync-progress-indicator {
    margin-top: 10px;
    display: none;
    /* Hidden by default */
}

.progress-bar-sync {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-sync {
    height: 100%;
    background-color: rgb(var(--accent-light-rgb));
    width: 0%;
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
}

.progress-text-sync {
    font-size: 11px;
    color: #b3b3b3;
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

/* Modal sync status display (matches GUI) */
.playlist-modal-sync-status {
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
}

.sync-stat.total-tracks {
    color: #ffa500;
}

.sync-stat.matched-tracks {
    color: rgb(var(--accent-rgb));
}

.sync-stat.failed-tracks {
    color: #e22134;
}

.sync-stat.percentage {
    color: rgb(var(--accent-rgb));
    font-weight: 700;
}

.sync-separator {
    color: #666666;
}

/* Playlist card sync status display */
.playlist-card-sync-status {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
}

/* ==============================================
   DOWNLOAD MISSING TRACKS MODAL STYLES
   ============================================== */

#download-missing-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.download-missing-modal-content {
    background: rgba(16, 16, 20, 0.96);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    width: 1400px;
    height: 900px;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
}

.download-missing-modal-header {
    background: rgba(20, 20, 24, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Hero Section for Context-Aware Display */
.download-missing-modal-hero {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    gap: 16px;
    position: relative;
    min-height: 80px;
}

/* Hero Background Image (for artist/album context) */
.download-missing-modal-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: blur(8px);
    z-index: 1;
}

.download-missing-modal-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 100%);
}

/* Hero Content */
.download-missing-modal-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    flex: 1;
}

/* Hero Images Container */
.download-missing-modal-hero-images {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.download-missing-modal-hero-image {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.download-missing-modal-hero-image:hover {
    transform: scale(1.05);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Artist Image (circular) */
.download-missing-modal-hero-image.artist {
    border-radius: 50%;
    width: 70px;
    height: 70px;
}

/* Album Image (rounded square) */
.download-missing-modal-hero-image.album {
    border-radius: 12px;
    width: 80px;
    height: 80px;
}

/* Hero Icon (for wishlist/playlist without images) */
.download-missing-modal-hero-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-light-rgb), 0.1) 100%);
    border-radius: 12px;
    font-size: 40px;
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    box-shadow:
        0 8px 24px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hero Metadata */
.download-missing-modal-hero-metadata {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.download-missing-modal-hero-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-missing-modal-hero-subtitle {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
}

.hero-artist-link {
    color: rgb(var(--accent-light-rgb));
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
}

.hero-artist-link:hover {
    color: rgb(var(--accent-rgb));
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-missing-modal-hero-details {
    display: flex;
    gap: 16px;
    font-size: 14px;
    margin-top: 4px;
}

.download-missing-modal-hero-detail {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

/* Header Actions (close button) */
.download-missing-modal-header-actions {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 3;
    display: flex;
}

/* ===============================
   CONTEXT-SPECIFIC STYLING
   =============================== */

/* Artist Album Context */
.download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero-bg {
    opacity: 0.15;
}

.download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero {
    background: rgba(20, 20, 24, 0.9);
}

.download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero-detail {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.15);
}

/* Playlist Context */
.download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(20, 20, 24, 0.9) 100%);
}

.download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero-icon {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero-detail {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.15);
}

/* Wishlist Context */
.download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero {
    background: linear-gradient(135deg, rgba(123, 31, 162, 0.06) 0%, rgba(20, 20, 24, 0.9) 100%);
}

.download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero-icon {
    background: rgba(123, 31, 162, 0.12);
    border-color: rgba(123, 31, 162, 0.25);
    color: #DA70D6;
}

.download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero-detail {
    background: rgba(123, 31, 162, 0.08);
    border-color: rgba(123, 31, 162, 0.15);
    color: #DA70D6;
}

.download-missing-modal-content[data-context="wishlist"] .stat-total .dashboard-stat-number {
    color: #DA70D6;
}

/* ===============================
   ANIMATIONS & POLISH
   =============================== */

/* Modal entrance animation */
@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
    }
}

@keyframes modalOverlayFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    100% {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

/* Apply entrance animations */
#download-missing-modal:not(.hidden) {
    animation: modalOverlayFadeIn 0.4s ease-out;
}

#download-missing-modal:not(.hidden) .download-missing-modal-content {
    animation: modalFadeIn 0.4s ease-out;
}

/* Hero section animations */
.download-missing-modal-hero-image {
    animation: imageSlideIn 0.6s ease-out 0.2s both;
}

@keyframes imageSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.download-missing-modal-hero-metadata {
    animation: textSlideIn 0.6s ease-out 0.3s both;
}

@keyframes textSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-missing-modal-hero-detail {
    animation: detailPop 0.4s ease-out 0.5s both;
}

@keyframes detailPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stats dashboard animation */
.dashboard-stat {
    animation: statSlideUp 0.5s ease-out calc(0.4s + var(--stat-index, 0) * 0.1s) both;
}

@keyframes statSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress section animation */
.progress-item {
    animation: progressSlideIn 0.5s ease-out calc(0.6s + var(--progress-index, 0) * 0.1s) both;
}

@keyframes progressSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Enhanced hover effects */
.dashboard-stat:hover .dashboard-stat-number {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.download-missing-modal-hero-detail:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* Subtle pulse animation for active elements */
.progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* ===============================
   RESPONSIVE DESIGN
   =============================== */

/* Large screens (1600px+) */
@media (min-width: 1600px) {
    .download-missing-modal-content {
        width: 1500px;
        height: 90vh;
    }

    .download-missing-modal-hero {
        min-height: 140px;
        padding: 28px 32px;
    }

    .download-missing-modal-hero-image.album {
        width: 90px;
        height: 90px;
    }

    .download-missing-modal-hero-image.artist {
        width: 80px;
        height: 80px;
    }
}

/* Medium screens (1200px - 1599px) */
@media (max-width: 1599px) and (min-width: 1200px) {
    .download-missing-modal-content {
        width: 1200px;
        height: 90vh;
    }
}

/* Small screens (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    .download-missing-modal-content {
        width: 95vw;
        height: 90vh;
        max-width: 1000px;
    }

    .download-missing-modal-hero {
        min-height: 100px;
        padding: 20px 24px;
    }

    .download-missing-modal-hero-image.album {
        width: 70px;
        height: 70px;
    }

    .download-missing-modal-hero-image.artist {
        width: 60px;
        height: 60px;
    }

    .download-missing-modal-hero-icon {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }

    .download-missing-modal-hero-title {
        font-size: 20px;
    }

    .download-missing-modal-hero-subtitle {
        font-size: 14px;
    }
}

/* Mobile screens (767px and below) */
@media (max-width: 767px) {
    .download-missing-modal-content {
        width: 95vw;
        height: 95vh;
        max-width: none;
        border-radius: 16px;
    }

    .download-missing-modal-hero {
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding: 20px;
        gap: 16px;
    }

    .download-missing-modal-hero-content {
        flex-direction: column;
        gap: 16px;
    }

    .download-missing-modal-hero-images {
        justify-content: center;
    }

    .download-missing-modal-hero-image.album,
    .download-missing-modal-hero-image.artist {
        width: 60px;
        height: 60px;
    }

    .download-missing-modal-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
        margin: 0 auto;
    }

    .download-missing-modal-hero-title {
        font-size: 18px;
        white-space: normal;
        text-align: center;
    }

    .download-missing-modal-hero-subtitle {
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }

    .download-missing-modal-hero-details {
        justify-content: center;
        flex-wrap: wrap;
    }

    .download-missing-modal-body {
        padding: 0 20px 20px 20px;
        gap: 20px;
    }

    .download-dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        width: 100%;
        padding: 8px 0 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 8px;
    }

    .download-missing-modal-footer {
        padding: 20px;
        flex-direction: column;
        gap: 16px;
    }

    .download-phase-controls {
        width: 100%;
        justify-content: center;
    }

    .download-control-btn {
        flex: 1;
        max-width: 200px;
    }
}

/* Small height screens (below 800px height) - Better scrollability */
@media (max-height: 800px) {
    .download-missing-modal-content {
        height: 95vh;
        max-height: 95vh;
    }

    .download-progress-section {
        padding: 16px;
    }

    .download-tracks-section {
        min-height: 300px;
        /* Ensure tracks list is always usable */
    }

    .download-tracks-table-container {
        min-height: 200px;
        /* Ensure at least 200px for the table */
    }
}

/* Very small height screens (below 600px height) - Compact mode */
@media (max-height: 600px) {
    .download-missing-modal-content {
        height: 98vh;
        max-height: 98vh;
    }

    .download-missing-modal-hero {
        min-height: auto;
        padding: 12px 20px;
    }

    .download-progress-section {
        padding: 12px;
        gap: 10px;
    }

    .progress-label {
        font-size: 13px;
    }

    .download-tracks-section {
        min-height: 250px;
        /* Smaller but still usable */
    }

    .download-tracks-table-container {
        min-height: 150px;
    }

    .download-tracks-table th,
    .download-tracks-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .download-missing-modal-footer {
        padding: 12px 20px;
    }
}

/* Legacy title styling - now handled by hero section */
.download-missing-modal-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.download-missing-modal-close {
    color: #b3b3b3;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 4px;
    margin: -4px;
}

.download-missing-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.download-missing-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 28px 12px 28px;
    gap: 10px;
    overflow-y: auto;
    /* Allow vertical scrolling */
    overflow-x: hidden;
}

/* Dashboard Stats Section — sits inside hero header, 2x2 grid */
.download-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.dashboard-stat {
    text-align: center;
    padding: 2px 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dashboard-stat:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dashboard-stat-number {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.dashboard-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Stat colors */
.stat-total .dashboard-stat-number {
    color: rgb(var(--accent-light-rgb));
}

.stat-found .dashboard-stat-number {
    color: #4CAF50;
}

.stat-missing .dashboard-stat-number {
    color: #FF6B35;
}

.stat-downloaded .dashboard-stat-number {
    color: #2196F3;
}

/* Progress Section */
.download-progress-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}

.progress-label {
    font-size: 12px;
    font-weight: 600;
    color: #e8e8e8;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress-bar {
    background: rgba(64, 64, 64, 0.8);
    border-radius: 8px;
    height: 8px;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 0%;
    box-shadow:
        0 0 15px rgba(var(--accent-rgb), 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: 10px 10px 0 0;
}

.progress-fill.analysis {
    background: linear-gradient(90deg, #2196F3, #21CBF3);
    box-shadow:
        0 0 15px rgba(33, 150, 243, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.progress-fill.download {
    background: linear-gradient(90deg, #FF6B35, #FF8A35);
    box-shadow:
        0 0 15px rgba(255, 107, 53, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.album-bundle-waiting {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

/* Track Table Section */
.download-tracks-section {
    /* Premium glassmorphic card matching other sections */
    background: linear-gradient(135deg,
            rgba(35, 35, 35, 0.7) 0%,
            rgba(25, 25, 25, 0.8) 100%);
    backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Premium shadow with subtle glow */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.download-tracks-header {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
            rgba(40, 40, 40, 0.8) 0%,
            rgba(30, 30, 30, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.download-tracks-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.track-render-indicator {
    font-size: 11px;
    font-weight: 400;
    color: #888888;
    margin-left: auto;
    white-space: nowrap;
}

.download-tracks-table-container {
    flex: 1;
    overflow-y: auto;
}

.download-tracks-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* Enable fixed layout for even column distribution */
}

.download-tracks-table th {
    background: #404040;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    padding: 12px 15px;
    border-bottom: 1px solid #555555;
    position: sticky;
    top: 0;
    z-index: 10;
}

.download-tracks-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #333333;
    color: #e0e0e0;
    font-size: 13px;
}

.download-tracks-table tr:hover {
    background: rgba(var(--accent-rgb), 0.05);
}

.track-number {
    color: #888888;
    font-weight: 500;
    width: 4%;
    /* 4% for track numbers */
    text-align: center;
}

.track-name {
    font-weight: 600;
    color: #ffffff;
    width: 24%;
    /* 24% for track names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: default;
}

.track-artist {
    color: #cccccc;
    width: 20%;
    /* 20% for artist names */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: default;
}

.track-duration {
    color: #999999;
    text-align: center;
    width: 8%;
    /* 8% for duration */
}

.track-match-status {
    text-align: center;
    width: 15%;
    /* 15% for library match status */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: default;
}

.match-found {
    color: #4CAF50;
}

.match-missing {
    color: #FF6B35;
}

.match-checking {
    color: #2196F3;
}

.track-download-status {
    text-align: center;
    width: 19%;
    /* 19% for download status with progress */
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: default;
}

.download-searching {
    color: #2196F3;
}

.download-downloading {
    color: #FF6B35;
}

.download-complete {
    color: #4CAF50;
}

.download-failed {
    color: #f44336;
}

/* Hover/tap tooltip for truncated track and artist names */
.track-name:hover::after,
.track-artist:hover::after,
.track-match-status:hover::after,
.track-download-status:hover::after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    background: rgba(20, 20, 20, 0.95);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
    max-width: 320px;
    min-width: 120px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
}

/* Only show tooltip when content is actually truncated (has title attr) */
.track-name:hover::after,
.track-artist:hover::after,
.track-match-status:hover::after,
.track-download-status:hover::after {
    content: attr(title);
}

.track-name:not([title]):hover::after,
.track-artist:not([title]):hover::after,
.track-match-status:not([title]):hover::after,
.track-download-status:not([title]):hover::after {
    display: none;
}

.track-actions {
    text-align: center;
    width: 7%;
    /* 7% for action buttons */
}

.track-result-card .track-actions {
    width: auto;
}

.track-select-header,
.track-select-cell {
    width: 3%;
    text-align: center;
    padding: 12px 6px !important;
}

.track-select-header input[type="checkbox"],
.track-select-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: rgb(var(--accent-rgb));
}

.track-select-cell input[type="checkbox"]:disabled {
    cursor: default;
    opacity: 0.5;
}

.track-deselected td:not(.track-select-cell) {
    opacity: 0.4;
}

.track-deselected .track-name,
.track-deselected .track-artist {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

.track-selection-count {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
}

.cancel-track-btn {
    background: #f44336;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-track-btn:hover {
    background: #d32f2f;
    transform: scale(1.05);
}

.approve-quarantine-inline-btn {
    background: var(--accent-color, #1db954);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.approve-quarantine-inline-btn:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: scale(1.04);
}

.approve-quarantine-inline-btn:disabled {
    cursor: default;
    opacity: 0.65;
}

/* Modal Footer */
.download-missing-modal-footer {
    background: linear-gradient(135deg,
            rgba(42, 42, 42, 0.9) 0%,
            rgba(30, 30, 30, 0.95) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Subtle inner glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.download-phase-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.download-control-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 120px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.8);
}

.download-control-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

.download-control-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.download-control-btn:hover:not(:disabled) {
    color: #fff;
    transform: translateY(-1px);
}

.download-control-btn.primary::before {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.08) 100%);
}

.download-control-btn.primary {
    border-color: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
}

.download-control-btn.primary:hover:not(:disabled) {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2);
}

.download-control-btn.secondary::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.download-control-btn.secondary:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.download-control-btn.danger::before {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.05) 100%);
}

.download-control-btn.danger {
    border-color: rgba(244, 67, 54, 0.2);
    color: rgba(244, 67, 54, 0.8);
}

.download-control-btn.danger:hover:not(:disabled) {
    border-color: rgba(244, 67, 54, 0.4);
    color: #ff6b6b;
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.15);
}

.download-control-btn.export::before {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.08) 100%);
}

.download-control-btn.export {
    border-color: rgba(102, 126, 234, 0.2);
    color: rgba(142, 160, 255, 0.85);
}

.download-control-btn.export:hover:not(:disabled) {
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
}

.download-control-btn:disabled {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.15);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =====================================================================
   Download-Missing tracklist polish — pure visual tune-up.
   Keeps column layout intact (no grid restructure, no cell reflow).
   Refines: header chrome, row hairlines, hover states, typography
   (mono numbers/duration, weight tightening), status pill polish,
   pulse on checking/downloading, soft scrollbar.
   All overrides scoped to `.download-missing-modal-content` so they
   only affect this modal — never the standalone Albums page tables.
   ===================================================================== */

/* Header chrome — refined uppercase micro-caps for column labels */
.download-missing-modal-content .download-tracks-table thead th {
    background: linear-gradient(180deg, rgba(28,28,28,0.95), rgba(22,22,22,0.95));
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

/* Cell baseline — tighter padding, hairline divider */
.download-missing-modal-content .download-tracks-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    transition: color 0.15s ease;
}
.download-missing-modal-content .download-tracks-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover — subtle accent gradient + left-edge accent bar via box-shadow inset */
.download-missing-modal-content .download-tracks-table tbody tr {
    transition: background 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.download-missing-modal-content .download-tracks-table tbody tr:hover {
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.07) 0%,
        rgba(255, 255, 255, 0.03) 60%,
        transparent 100%);
    box-shadow: inset 3px 0 0 rgb(var(--accent-rgb));
}

/* Track number — mono, dim, tabular */
.download-missing-modal-content .download-tracks-table .track-number {
    color: rgba(255, 255, 255, 0.32);
    font-weight: 500;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
}
.download-missing-modal-content .download-tracks-table tbody tr:hover .track-number {
    color: rgb(var(--accent-rgb));
}

/* Title — bold white, slight negative tracking */
.download-missing-modal-content .download-tracks-table .track-name {
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
}

/* Artist — dim, centered */
.download-missing-modal-content .download-tracks-table .track-artist {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    text-align: center;
}

/* Duration — mono dim tabular */
.download-missing-modal-content .download-tracks-table .track-duration {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
}

/* Status cells — uppercase micro-caps with leading colored dot */
.download-missing-modal-content .download-tracks-table .track-match-status,
.download-missing-modal-content .download-tracks-table .track-download-status {
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* Leading colored dot before status text — uses currentColor so it matches state */
.download-missing-modal-content .download-tracks-table .match-found::before,
.download-missing-modal-content .download-tracks-table .match-missing::before,
.download-missing-modal-content .download-tracks-table .match-checking::before,
.download-missing-modal-content .download-tracks-table .download-searching::before,
.download-missing-modal-content .download-tracks-table .download-downloading::before,
.download-missing-modal-content .download-tracks-table .download-complete::before,
.download-missing-modal-content .download-tracks-table .download-failed::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 7px;
    vertical-align: 1px;
    box-shadow: 0 0 8px currentColor, 0 0 2px currentColor;
}
.download-missing-modal-content .download-tracks-table .match-found {
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.35);
}
.download-missing-modal-content .download-tracks-table .match-missing {
    color: #facc15;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
}
.download-missing-modal-content .download-tracks-table .match-checking {
    color: #60a5fa;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
    animation: dms-status-pulse 1.5s ease-in-out infinite;
}
.download-missing-modal-content .download-tracks-table .download-searching {
    color: #60a5fa;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
    animation: dms-status-pulse 1.5s ease-in-out infinite;
}
.download-missing-modal-content .download-tracks-table .download-downloading {
    color: #fb923c;
    text-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
    animation: dms-status-pulse 1s ease-in-out infinite;
}
.download-missing-modal-content .download-tracks-table .download-complete {
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
}
.download-missing-modal-content .download-tracks-table .download-failed {
    color: #f87171;
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.4);
}

@keyframes dms-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Checkbox column — accent + hover scale */
.download-missing-modal-content .download-tracks-table .track-select-cb {
    accent-color: rgb(var(--accent-rgb));
    transition: transform 0.12s ease;
}
.download-missing-modal-content .download-tracks-table tbody tr:hover .track-select-cb {
    transform: scale(1.08);
}

/* Deselected — fade title/artist, keep status visible */
.download-missing-modal-content .download-tracks-table .track-deselected .track-name,
.download-missing-modal-content .download-tracks-table .track-deselected .track-artist {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.25);
    text-decoration-thickness: 1px;
}

/* Soft scrollbar for the track scroll area */
.download-missing-modal-content .download-tracks-table-container::-webkit-scrollbar {
    width: 8px;
}
.download-missing-modal-content .download-tracks-table-container::-webkit-scrollbar-track {
    background: transparent;
}
.download-missing-modal-content .download-tracks-table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    transition: background 0.2s ease;
}
.download-missing-modal-content .download-tracks-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Force Download Toggle Styling */
.force-download-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.force-download-toggle-container:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.force-download-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.force-download-toggle span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
}

/* Toggle Switch */
.force-download-toggle input[type="checkbox"] {
    position: relative;
    width: 48px;
    height: 24px;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.force-download-toggle input[type="checkbox"]:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.force-download-toggle input[type="checkbox"]:checked {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.force-download-toggle input[type="checkbox"]:checked:before {
    transform: translateX(24px);
    background: #ffffff;
}

.force-download-toggle input[type="checkbox"]:checked+span {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.force-download-toggle:hover input[type="checkbox"] {
    border-color: rgba(255, 255, 255, 0.3);
}

.force-download-toggle:hover input[type="checkbox"]:checked {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}

.modal-close-section {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ==============================================
   PERSISTENT DOWNLOAD MODAL STYLES
   ============================================== */

.download-missing-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.playlist-card-actions button {
    background: transparent;
    border: 1px solid rgb(var(--accent-rgb));
    border-radius: 15px;
    color: rgb(var(--accent-rgb));
    font-size: 10px;
    font-weight: bold;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.playlist-card-actions .view-progress-btn {
    background: rgb(var(--accent-rgb));
    color: #000000;
}

.playlist-card-actions button:hover {
    background: rgb(var(--accent-rgb));
    color: #000000;
}

.playlist-card-actions .view-progress-btn {
    background: rgb(var(--accent-rgb));
    color: #000000;
}

.playlist-card-actions .view-progress-btn:hover {
    background: rgb(var(--accent-light-rgb));
}

/* Download Complete Styling - Ready for Review State */
.playlist-card.download-complete {
    /* Add subtle green left border to indicate completion */
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg,
            rgba(40, 167, 69, 0.05) 0%,
            rgba(26, 26, 26, 0.95) 20%,
            rgba(18, 18, 18, 0.98) 100%);
}

.playlist-card.download-complete:hover {
    /* Enhanced hover for completed cards */
    background: linear-gradient(135deg,
            rgba(40, 167, 69, 0.08) 0%,
            rgba(30, 30, 30, 0.98) 20%,
            rgba(22, 22, 22, 1.0) 100%);

    box-shadow:
        0 8px 32px rgba(40, 167, 69, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ============================================================================ */
/* ARTISTS PAGE STYLES - ELEGANT GLASSMORPHIC DESIGN                          */
/* ============================================================================ */

/* Artists Search State - Initial centered interface with downloads section support */
.artists-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10vh;
    justify-content: center;
    min-height: 70vh;
    padding: 40px 20px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 32px;
}

.artists-search-state.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.artists-search-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

/* When downloads section is present, adjust positioning */
.artists-search-state:has(.artist-downloads-section) .artists-search-container {
    margin-top: 0;
    margin-bottom: 0;
}

.artists-welcome-section {
    margin-bottom: 40px;
}

.artists-welcome-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.artists-welcome-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

.artists-welcome-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.5;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artists-search-input-container {
    position: relative;
    margin-bottom: 20px;
}

.artists-search-input {
    width: 100%;
    padding: 18px 24px 18px 60px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Premium glassmorphic foundation */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.9) 0%,
            rgba(18, 18, 18, 0.95) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);

    /* Elegant shadow system */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.artists-search-input:focus {
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.95) 0%,
            rgba(22, 22, 22, 1.0) 100%);
    border-color: rgba(var(--accent-rgb), 0.3);
    border-top-color: rgba(var(--accent-rgb), 0.4);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.15),
        0 0 20px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);

    transform: translateY(-1px);
}

.artists-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.artists-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    transition: color 0.3s ease;
}

.artists-search-input:focus+.artists-search-icon {
    color: rgba(var(--accent-rgb), 0.8);
}

.artists-search-status {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    min-height: 20px;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.3s ease;
}

.artists-search-status.searching {
    color: rgba(var(--accent-rgb), 0.8);
}

.artists-search-status.error {
    color: rgba(255, 65, 54, 0.8);
}

/* Artists Results State */
.artists-results-state {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.artists-results-state.show {
    opacity: 1;
    transform: translateY(0);
}

.artists-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.artists-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artists-back-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-1px);
}

.back-icon {
    font-size: 16px;
}

.artists-search-header {
    flex: 1;
    max-width: 400px;
}

.artists-header-search-input {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;

    transition: all 0.2s ease;
    outline: none;
}

.artists-header-search-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.artists-header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.artists-results-content {
    margin-bottom: 40px;
}

.artists-results-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artists-cards-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 30px;
    scroll-behavior: smooth;

    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.6) rgba(255, 255, 255, 0.1);
}

.artists-cards-container::-webkit-scrollbar {
    height: 8px;
}

.artists-cards-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.artists-cards-container::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.6);
    border-radius: 4px;
    transition: background 0.3s ease;
}

.artists-cards-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.8);
}

/* Artist Card Styles with Background Images */
.artist-card {
    position: relative;
    width: 280px;
    height: 350px;
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Premium glassmorphic foundation */
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);

    /* Elegant shadow system */
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.artist-card:hover {
    transform: translateY(-5px) scale(1.01);
    z-index: 10;

    box-shadow:
        0 12px 15px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.15),
        0 0 20px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Dynamic glow effects based on image colors */
.artist-card.has-dynamic-glow {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-card.has-dynamic-glow:hover {
    filter: drop-shadow(0 0 8px var(--glow-color-1, rgb(var(--accent-rgb)))) drop-shadow(0 0 16px var(--glow-color-2, rgb(var(--accent-light-rgb))));
    border-color: var(--glow-color-1, rgba(var(--accent-rgb), 0.3));
}

.artist-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.artist-card:hover .artist-card-background {
    opacity: 0.8;
    transform: scale(1.05);
}

.artist-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.1) 70%,
            transparent 100%);
}

.artist-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 24px;
    z-index: 2;
}

.artist-card-name {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-card-genres {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.3;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-card-popularity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(var(--accent-rgb), 0.9);
    font-weight: 600;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.popularity-icon {
    font-size: 12px;
}

/* Artist Card Actions (Watchlist) */
.artist-card-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.watchlist-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.watchlist-toggle-btn:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.15);
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

.watchlist-toggle-btn.watching {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.watchlist-toggle-btn.watching:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.25);
    color: #ffffff;
    border-color: rgba(255, 193, 7, 0.5);
}

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

.watchlist-icon {
    font-size: 14px;
}

.watchlist-text {
    flex: 1;
    text-align: center;
}

/* Artist Card Animation States */
.artist-card.loading {
    animation: artistCardPulse 2s ease-in-out infinite;
    pointer-events: none;
}

.artist-card.loading .artist-card-background {
    background: linear-gradient(90deg,
            rgba(26, 26, 26, 0.8) 0%,
            rgba(40, 40, 40, 0.8) 50%,
            rgba(26, 26, 26, 0.8) 100%) !important;
    background-size: 200% 100%;
    animation: artistCardShimmer 1.5s ease-in-out infinite;
}

@keyframes artistCardPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

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

    100% {
        background-position: 200% 0;
    }
}

/* Search loading indicator */
.artists-search-status.searching::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 50%;
    border-top-color: rgba(var(--accent-rgb), 0.8);
    animation: searchSpinner 0.8s ease-in-out infinite;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .artists-cards-container {
        gap: 16px;
        padding: 15px 0 25px 0;
    }

    .artist-card {
        width: 250px;
        height: 300px;
    }

    .artist-card-name {
        font-size: 20px;
    }
}

/* Artist Detail State */
.artist-detail-state {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.artist-detail-state.show {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================= */
/* ARTISTS PAGE - HERO SECTION              */
/* ========================================= */

.artists-hero-section {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 28px;
    min-height: 300px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.artists-hero-bg {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center top;
    filter: blur(50px) brightness(0.35) saturate(1.4);
    transform: scale(1.3);
    z-index: 0;
}

.artists-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.5) 0%,
        rgba(12, 12, 12, 0.75) 50%,
        rgba(12, 12, 12, 0.92) 100%);
    z-index: 1;
}

.artists-hero-content {
    position: relative;
    z-index: 2;
    padding: 32px 36px 36px;
}

.artists-hero-back {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
}

.artists-hero-back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.artists-hero-main {
    display: flex;
    gap: 36px;
    align-items: center;
}

.artists-hero-image {
    width: 400px;
    height: 480px;
    border-radius: 14px;
    background-size: cover;
    background-position: center top;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.artists-hero-section:hover .artists-hero-image {
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--accent-rgb), 0.1);
    transform: scale(1.02);
}

.artists-hero-image-fallback {
    font-size: 64px;
    opacity: 0.2;
}

.artists-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.artists-hero-name {
    font-size: 2.6em;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.artists-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.artists-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.artists-hero-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.artists-hero-badge:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.artists-hero-genres {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.artists-hero-genre-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.01em;
    backdrop-filter: blur(4px);
    transition: all 0.15s ease;
}

.artists-hero-genre-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.artists-hero-bio {
    max-width: 600px;
    max-height: 3.9em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
}

.artists-hero-bio.expanded {
    max-height: 500px;
}

.artists-hero-bio-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    display: inline;
}

.artists-hero-bio-toggle {
    background: none;
    border: none;
    color: rgba(var(--accent-rgb), 0.9);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    display: inline;
}

.artists-hero-bio-toggle:hover {
    color: rgb(var(--accent-rgb));
}

.artists-hero-stats {
    display: flex;
    gap: 24px;
    margin-top: 4px;
}

.artists-hero-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.artists-hero-stat strong {
    font-size: 18px;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.artists-hero-actions {
    position: absolute;
    top: 32px;
    right: 36px;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .artists-hero-section {
        border-radius: 14px;
        min-height: 0;
    }

    .artists-hero-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .artists-hero-image {
        width: 160px;
        height: 200px;
    }

    .artists-hero-name {
        font-size: 1.6em;
    }

    .artists-hero-genres {
        justify-content: center;
    }

    .artists-hero-badges {
        justify-content: center;
    }

    .artists-hero-stats {
        justify-content: center;
    }

    .artists-hero-content {
        padding: 20px 16px 24px;
    }

    .artists-hero-actions {
        position: static;
        justify-content: center;
        margin-top: 8px;
    }

    .artists-hero-stat strong {
        font-size: 16px;
    }
}

.artist-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.artist-detail-header-left {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
}

.artist-detail-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-detail-back-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-1px);
}

.artist-detail-watchlist-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #e0e0e0;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-detail-watchlist-btn:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.15);
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

.artist-detail-watchlist-btn.watching {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
}

.artist-detail-watchlist-btn.watching:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.25);
    color: #ffffff;
    border-color: rgba(255, 193, 7, 0.5);
}

.artist-detail-watchlist-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Artist Detail Watchlist Button Group (with settings gear) */
.artist-detail-watchlist-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.artist-detail-watchlist-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.artist-detail-watchlist-settings-btn:hover {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
    transform: translateY(-1px);
}

/* Artist Card Watchlist Button Group (artists/discover page) */
.watchlist-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.watchlist-btn-group .watchlist-toggle-btn {
    flex: 1;
}

.watchlist-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 16px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    flex-shrink: 0;
}

.watchlist-settings-btn:hover {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.3);
    transform: translateY(-1px);
}

/* Library Artist Watchlist Button */

/* Artist-hero action buttons share the Download Discography look:
   accent gradient fill, accent border, accent-light text, compact sizing,
   subtle shimmer, lift + glow on hover. The watchlist .watching state keeps
   its amber "already watching" signal; everything else is uniform. */
.library-artist-watchlist-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(var(--accent-light-rgb));
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
    overflow: hidden;
}

.library-artist-watchlist-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.1) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2);
}

.library-artist-watchlist-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-watchlist-btn .watchlist-icon {
    font-size: 13px;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
}

.library-artist-watchlist-btn:hover:not(:disabled) .watchlist-icon {
    transform: scale(1.12);
}

.library-artist-watchlist-btn .watchlist-text {
    position: relative;
    z-index: 1;
}

.library-artist-watchlist-btn.watching {
    color: #ffc107;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
    border-color: rgba(255, 193, 7, 0.3);
}

.library-artist-watchlist-btn.watching:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.1) 100%);
    border-color: rgba(255, 193, 7, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2);
}

.library-artist-watchlist-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Enhance Quality Button ─── */

.library-artist-enhance-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(129, 212, 250);
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.15) 0%, rgba(79, 195, 247, 0.05) 100%);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
    overflow: hidden;
}

.library-artist-enhance-btn:hover {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.25) 0%, rgba(79, 195, 247, 0.12) 100%);
    border-color: rgba(79, 195, 247, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.25);
}

.library-artist-enhance-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-enhance-btn .enhance-icon {
    font-size: 13px;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
}

.library-artist-enhance-btn:hover .enhance-icon {
    transform: scale(1.12);
}

.library-artist-enhance-btn .enhance-text {
    position: relative;
    z-index: 1;
}

.library-artist-enhance-btn.hidden {
    display: none;
}

/* ─── Write Artist Image Button (issue #572) ─── */
.library-artist-write-image-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    backdrop-filter: blur(8px);
}
.library-artist-write-image-btn:hover:not(:disabled) {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}
.library-artist-write-image-btn:active:not(:disabled) {
    transform: translateY(0);
}
.library-artist-write-image-btn:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* ─── Artist Radio Button ─── */

.library-artist-radio-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(196, 181, 253);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
    overflow: hidden;
}

.library-artist-radio-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.12) 100%);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}

.library-artist-radio-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-radio-btn .radio-icon {
    font-size: 13px;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 1;
}

.library-artist-radio-btn:hover .radio-icon {
    transform: scale(1.12);
}

.library-artist-radio-btn .radio-text {
    position: relative;
    z-index: 1;
}

/* ─── Enhance Quality Modal ─── */

.enhance-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.enhance-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.enhance-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid rgba(79, 195, 247, 0.2);
    border-radius: 16px;
    width: 90%;
    max-width: 820px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    animation: enhanceModalIn 0.3s ease-out;
}

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

.enhance-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.enhance-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.enhance-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.enhance-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.enhance-summary-bar {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.enhance-summary-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    min-width: 70px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.enhance-summary-chip .chip-count {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.enhance-summary-chip .chip-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.enhance-summary-chip.lossless .chip-label { color: #ffb84d; }
.enhance-summary-chip.high-lossy .chip-label { color: #81c784; }
.enhance-summary-chip.standard-lossy .chip-label { color: rgb(var(--accent-light-rgb)); }
.enhance-summary-chip.low-lossy .chip-label { color: #ef9a9a; }

.enhance-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 12px;
}

.enhance-tier-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.enhance-tier-selector label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.enhance-tier-selector select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.enhance-tier-selector select:focus {
    border-color: rgba(79, 195, 247, 0.4);
}

.enhance-select-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.enhance-select-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.enhance-select-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.enhance-selected-count {
    font-size: 12px;
    color: rgba(79, 195, 247, 0.9);
    font-weight: 600;
}

.enhance-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.enhance-track-table {
    width: 100%;
    border-collapse: collapse;
}

.enhance-track-table thead th {
    position: sticky;
    top: 0;
    background: #1a1a1a;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.enhance-track-table thead th:first-child {
    padding-left: 24px;
}

.enhance-track-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.enhance-track-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.enhance-track-table tbody td {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.enhance-track-table tbody td:first-child {
    padding-left: 24px;
}

.enhance-track-row.above-threshold {
    opacity: 0.35;
}

.enhance-track-row.above-threshold td {
    color: rgba(255, 255, 255, 0.4);
}

.enhance-track-row input[type="checkbox"] {
    accent-color: rgb(var(--accent-rgb));
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.enhance-format-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.enhance-format-badge.lossless {
    color: #ffb84d;
    background: rgba(255, 184, 77, 0.12);
}

.enhance-format-badge.high-lossy {
    color: #81c784;
    background: rgba(129, 199, 132, 0.12);
}

.enhance-format-badge.standard-lossy {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.12);
}

.enhance-format-badge.low-lossy {
    color: #ef9a9a;
    background: rgba(239, 154, 154, 0.12);
}

.enhance-format-badge.unknown {
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.enhance-bitrate {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.enhance-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.enhance-footer-info {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.enhance-footer-actions {
    display: flex;
    gap: 10px;
}

.enhance-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.enhance-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.enhance-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.enhance-btn.primary {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.9), rgba(41, 182, 246, 0.9));
    color: #ffffff;
}

.enhance-btn.primary:hover {
    background: linear-gradient(135deg, rgba(79, 195, 247, 1), rgba(41, 182, 246, 1));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.3);
}

.enhance-btn.primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.enhance-btn .enhance-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* Wishlist enhance badge */
.wishlist-enhance-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.12);
    margin-left: 6px;
}

.artist-detail-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.artist-detail-image {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Fallback gradient if no image */
    background-image: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.3) 0%,
            rgba(24, 156, 71, 0.2) 100%);
}

.artist-detail-name {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-detail-genres {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-detail-content {
    margin-bottom: 40px;
}

.artist-detail-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    padding: 6px;

    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.artist-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.artist-tab.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(24, 156, 71, 0.15) 100%);
    color: rgba(var(--accent-rgb), 1.0);
    box-shadow:
        0 4px 12px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.artist-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

.tab-icon {
    font-size: 16px;
}

.artist-detail-discography {
    min-height: 400px;
}

.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.album-cards-container,
.singles-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* Album Card — full-bleed image with info overlay, matching similar artist cards */
.album-card {
    position: relative;
    background: rgba(18, 18, 18, 1);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    aspect-ratio: 1;
}

.album-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(var(--accent-rgb), 0.12);
}

.album-card.has-dynamic-glow {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-card.has-dynamic-glow:hover {
    filter: none;
    border-color: color-mix(in srgb, var(--glow-color-1) 30%, transparent);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 20px color-mix(in srgb, var(--glow-color-1) 15%, transparent);
}

/* Gradient overlay for text readability */
.album-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.7) 25%,
        rgba(0, 0, 0, 0.2) 50%,
        transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.album-card:hover::after {
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.15) 55%,
        transparent 75%);
}

.album-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.03);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.album-card:hover .album-card-image {
    transform: scale(1.06);
}

.album-card-image::after {
    display: none;
}

/* Info pinned at bottom over gradient */
.album-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 2;
}

.album-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.album-card-year {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.album-card-type {
    display: none; /* Type is in the completion overlay or implied by the tab */
}

@media (max-width: 900px) {
    .album-cards-container,
    .singles-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 14px;
    }
}

@media (max-width: 600px) {
    .album-cards-container,
    .singles-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .album-card {
        border-radius: 10px;
    }

    .album-card-content {
        padding: 10px;
    }

    .album-card-name {
        font-size: 12px;
    }
}

/* Completion Status Overlay */
.completion-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid;
    z-index: 10;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Smooth entrance animation */
    animation: completionOverlayFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Completion status variants */
.completion-overlay.completed {
    background: linear-gradient(135deg,
            rgba(46, 204, 64, 0.9) 0%,
            rgba(34, 139, 47, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(46, 204, 64, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(46, 204, 64, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.completion-overlay.nearly_complete {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.9) 0%,
            rgba(255, 152, 0, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(255, 193, 7, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 193, 7, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.completion-overlay.partial {
    background: linear-gradient(135deg,
            rgba(255, 111, 97, 0.9) 0%,
            rgba(255, 87, 51, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(255, 111, 97, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 111, 97, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.completion-overlay.missing {
    background: linear-gradient(135deg,
            rgba(108, 117, 125, 0.9) 0%,
            rgba(73, 80, 87, 0.95) 100%);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(108, 117, 125, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(108, 117, 125, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.completion-overlay.downloading {
    background: linear-gradient(135deg,
            rgba(255, 165, 0, 0.9) 0%,
            rgba(255, 140, 0, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(255, 165, 0, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 165, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: downloadingPulse 2s ease-in-out infinite;
}

@keyframes downloadingPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 165, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        transform: scale(1.02);
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 165, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            0 0 12px rgba(255, 165, 0, 0.3);
    }
}

.completion-overlay.downloaded {
    background: linear-gradient(135deg,
            rgba(40, 167, 69, 0.9) 0%,
            rgba(34, 139, 58, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(40, 167, 69, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(40, 167, 69, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.completion-overlay.error {
    background: linear-gradient(135deg,
            rgba(220, 53, 69, 0.9) 0%,
            rgba(176, 42, 55, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(220, 53, 69, 0.6);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(220, 53, 69, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Hover effects for completion overlays */
.album-card:hover .completion-overlay,
.artist-card:hover .completion-overlay {
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px currentColor,
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Loading state for completion overlay */
.completion-overlay.checking {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.9) 0%,
            rgba(24, 156, 71, 0.95) 100%);
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.6);
    animation: completionOverlayPulse 2s ease-in-out infinite;
}

/* Progress indicator inside overlay for detailed completion info */
.completion-overlay .completion-progress {
    display: block;
    font-size: 9px;
    margin-top: 2px;
    opacity: 0.8;
    font-weight: 500;
}

/* Completion overlay animations */
@keyframes completionOverlayFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes completionOverlayPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Loading states for album cards */
.album-card.loading .album-card-image {
    background: linear-gradient(90deg,
            rgba(26, 26, 26, 0.8) 0%,
            rgba(40, 40, 40, 0.8) 50%,
            rgba(26, 26, 26, 0.8) 100%);
    background-size: 200% 100%;
    animation: albumCardShimmer 1.5s ease-in-out infinite;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* Responsive adjustments for detail view */
@media (max-width: 768px) {
    .artist-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .artist-detail-info {
        width: 100%;
    }

    .artist-detail-name {
        font-size: 24px;
    }

    .album-cards-container,
    .singles-cards-container {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .artist-detail-tabs {
        overflow-x: auto;
        padding-bottom: 5px;
    }
}

/* ===============================
   ARTIST DOWNLOADS MANAGEMENT STYLES
   =============================== */

/* Artist Downloads Section */
.artist-downloads-section {
    padding: 0 20px;
    animation: fadeInUp 0.5s ease-out;
    width: 100%;
}

.artist-downloads-header {
    margin-bottom: 20px;
    text-align: center;
}

.artist-downloads-title {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-downloads-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.artist-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

/* Artist Bubble Card */
.artist-bubble-card {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.artist-bubble-card:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(var(--accent-rgb), 0.3);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 0 15px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.artist-bubble-card.all-completed {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.artist-bubble-card.all-completed:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.3),
        0 0 15px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.artist-bubble-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    overflow: hidden;
}

.artist-bubble-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 100%);
    border-radius: 50%;
}

.artist-bubble-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    text-align: center;
    z-index: 2;
}

.artist-bubble-name {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.artist-bubble-status {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bulk-complete-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.95) 0%,
            rgba(21, 128, 61, 0.95) 100%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: all 0.2s ease;

    box-shadow:
        0 2px 8px rgba(var(--accent-rgb), 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.bulk-complete-indicator:hover {
    transform: scale(1.1);
    box-shadow:
        0 4px 12px rgba(var(--accent-rgb), 0.6),
        0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.bulk-complete-icon {
    font-size: 12px;
    color: white;
}

/* Artist Download Management Modal */
.artist-download-management-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalOverlayFadeIn 0.4s ease-out;
}

.artist-download-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 1;
}

.artist-download-modal-content {
    position: relative;
    /* Premium glassmorphic foundation matching download modal */
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);

    width: 700px;
    max-width: 95vw;
    max-height: 80vh;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Premium shadow effect */
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.7),
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 50px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* Smooth animation */
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
    animation: modalFadeIn 0.4s ease-out;
}

.artist-download-modal-header {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Enhanced gradient with subtle transparency and glow */
    background: linear-gradient(135deg,
            rgba(45, 45, 45, 0.8) 0%,
            rgba(26, 26, 26, 0.9) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle inner glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Artist Modal Hero Section */
.artist-download-modal-hero {
    display: flex;
    align-items: center;
    padding: 20px 28px;
    gap: 20px;
    position: relative;
    min-height: 100px;
}

.artist-download-modal-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    filter: blur(8px);
    z-index: 1;
}

.artist-download-modal-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.3) 100%);
}

.artist-download-modal-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    flex: 1;
}

.artist-download-modal-hero-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.artist-download-modal-hero-image:hover {
    transform: scale(1.05);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.artist-download-modal-hero-avatar {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.artist-download-modal-hero-fallback {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            rgba(60, 60, 60, 0.9) 0%,
            rgba(30, 30, 30, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #999;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.artist-download-modal-hero-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.artist-download-modal-hero-overlay {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.artist-download-modal-hero-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-download-modal-hero-subtitle {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
}

.artist-download-modal-header-actions {
    position: relative;
    z-index: 3;
    padding: 16px 24px 0 0;
    display: flex;
    justify-content: flex-end;
}

.artist-download-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    flex: 1;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

.artist-download-modal-close {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    line-height: 1;
}

.artist-download-modal-close:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.artist-download-modal-body {
    flex: 1;
    padding: 16px 28px 25px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.artist-download-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.artist-download-item {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 16px;
    /* Premium glassmorphic card matching download modal */
    background: linear-gradient(135deg,
            rgba(35, 35, 35, 0.7) 0%,
            rgba(25, 25, 25, 0.8) 100%);
    backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    transition: all 0.3s ease;

    /* Premium shadow with subtle glow */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.artist-download-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg,
            rgba(40, 40, 40, 0.8) 0%,
            rgba(30, 30, 30, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(var(--accent-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Album artwork in download items */
.download-item-artwork {
    position: relative;
    flex-shrink: 0;
}

.download-item-image {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.artist-download-item:hover .download-item-image {
    transform: scale(1.05);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Fallback icon when no album image */
.download-item-fallback {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-light-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    font-size: 18px;
    color: rgba(var(--accent-rgb), 0.8);
    transition: all 0.3s ease;
}

.artist-download-item:hover .download-item-fallback {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.3) 0%,
            rgba(var(--accent-light-rgb), 0.2) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgba(var(--accent-rgb), 1);
    transform: scale(1.05);
    box-shadow:
        0 4px 12px rgba(var(--accent-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.download-item-info {
    flex: 1;
}

.download-item-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    line-height: 1.3;
}

.download-item-type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: capitalize;
}

.download-item-actions {
    margin-left: 16px;
}

.download-item-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.download-item-btn.active {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.9) 0%,
            rgba(24, 156, 71, 0.9) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.download-item-btn.active:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 1.0) 0%,
            rgba(24, 156, 71, 1.0) 100%);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
}

.download-item-btn.completed {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.9) 0%,
            rgba(21, 128, 61, 0.9) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.download-item-btn.completed:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 1.0) 0%,
            rgba(21, 128, 61, 1.0) 100%);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
}

/* Dynamic glow effects for artist bubble cards */
.artist-bubble-card.has-dynamic-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-bubble-card.has-dynamic-glow:hover {
    filter: drop-shadow(0 0 6px var(--glow-color-1, rgb(var(--accent-rgb)))) drop-shadow(0 0 12px var(--glow-color-2, rgb(var(--accent-light-rgb))));
    border-color: var(--glow-color-1, rgba(var(--accent-rgb), 0.4));
}

/* Responsive design for artist download modal */
@media (max-width: 768px) {
    .artist-download-modal-content {
        width: 95vw;
        max-height: 90vh;
        margin: 16px;
        border-radius: 16px;
    }

    .artist-download-modal-hero {
        padding: 16px 20px;
        min-height: 80px;
    }

    .artist-download-modal-hero-content {
        gap: 16px;
    }

    .artist-download-modal-hero-image,
    .artist-download-modal-hero-fallback {
        width: 60px;
        height: 60px;
    }

    .artist-download-modal-hero-fallback {
        font-size: 20px;
    }

    .artist-download-modal-hero-title {
        font-size: 18px;
    }

    .artist-download-modal-hero-subtitle {
        font-size: 13px;
    }

    .artist-download-modal-body {
        padding: 12px 20px 20px 20px;
    }

    .artist-download-items {
        gap: 12px;
    }

    .artist-download-item {
        padding: 16px;
        gap: 12px;
        border-radius: 12px;
    }

    .download-item-image,
    .download-item-fallback {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .download-item-fallback {
        font-size: 14px;
    }

    .download-item-name {
        font-size: 13px;
    }

    .download-item-type {
        font-size: 11px;
    }

    .download-item-btn {
        padding: 6px 12px;
        font-size: 11px;
        min-width: 80px;
    }

    .download-item-actions {
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .artist-download-modal-content {
        width: 98vw;
        margin: 8px;
        border-radius: 12px;
    }

    .artist-download-modal-hero {
        padding: 12px 16px;
        min-height: 70px;
    }

    .artist-download-modal-hero-image,
    .artist-download-modal-hero-fallback {
        width: 50px;
        height: 50px;
    }

    .artist-download-modal-hero-title {
        font-size: 16px;
    }

    .artist-download-modal-body {
        padding: 8px 16px 16px 16px;
    }

    .artist-download-item {
        padding: 12px;
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }

    .download-item-artwork {
        order: 1;
        align-self: center;
    }

    .download-item-info {
        order: 2;
        text-align: center;
    }

    .download-item-actions {
        order: 3;
        margin-left: 0;
        margin-top: 8px;
        align-self: center;
    }

    .download-item-btn {
        padding: 8px 16px;
        min-width: 90px;
    }
}

#metadata-updater-card {
    justify-content: space-between;
}

/* ===============================
   LIBRARY PAGE STYLING
   =============================== */

.library-container {
    /* outer gutter comes from .page (40px) — shared across the full-width
       exception pages so spacing is intentional, not accidental */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Library Header */
.library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.library-header-content {
    flex: 1;
}

.library-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: -0.3px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: center;
    gap: 14px;
}

.library-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

.library-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 500;
}

.library-stats {
    display: flex;
    gap: 24px;
}

.library-stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: rgb(var(--accent-light-rgb));
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Library Controls */
.library-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Search Container */
.library-search-container {
    position: relative;
    max-width: 500px;
}

.library-search-input {
    width: 100%;
    padding: 14px 20px 14px 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    outline: none;
}

.library-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.2);
}

.library-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.library-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

/* Alphabet Selector - Apple Style Design */
/* Watchlist Filter */
.watchlist-filter {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    padding: 8px 0;
}

.library-source-filter {
    display: flex;
    justify-content: flex-start;
    padding: 0 0 4px;
}
.library-source-filter-select {
    padding: 6px 30px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.35)' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    min-width: 140px;
}
.library-source-filter-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}
.library-source-filter-select:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    outline: none;
}
.library-source-filter-select option,
.library-source-filter-select optgroup {
    background: #1a1a1e;
    color: #fff;
}

.watchlist-filter-btn {
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s ease-out;
}

.watchlist-filter-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.watchlist-filter-btn.active {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.15);
}

.library-watchlist-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.12);
    color: rgba(var(--accent-rgb), 1);
    font-size: 13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.2s ease-out;
    margin-left: 4px;
}

.library-watchlist-all-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: rgba(var(--accent-rgb), 0.6);
    transform: scale(1.02);
}

.library-watchlist-all-btn.adding {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

.library-watchlist-all-btn.all-added {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
    pointer-events: none;
}

.library-watchlist-all-btn .watchlist-all-icon {
    font-size: 14px;
}

.library-watchlist-all-btn.hidden {
    display: none;
}

/* ── Watch All Unwatched Modal ──────────────────────────── */
.watch-all-modal {
    width: 880px; max-width: 95vw; max-height: 85vh;
    background: linear-gradient(135deg, rgba(20,20,20,0.97) 0%, rgba(12,12,12,0.99) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4),
                0 0 40px rgba(var(--accent-rgb), 0.08), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex; flex-direction: column; overflow: hidden;
}
.watch-all-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.watch-all-header-content { display: flex; align-items: center; gap: 14px; }
.watch-all-header-icon { font-size: 28px; opacity: 0.9; }
.watch-all-title {
    font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.3px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}
.watch-all-subtitle { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.watch-all-close {
    background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.5);
    width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.watch-all-close:hover { background: rgba(255,255,255,0.15); color: #fff; transform: scale(1.1); }
.watch-all-body {
    flex: 1; overflow-y: auto; padding: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.watch-all-body::-webkit-scrollbar { width: 6px; }
.watch-all-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.watch-all-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}
.watch-all-btn {
    padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
}
.watch-all-btn-cancel {
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
}
.watch-all-btn-cancel:hover { background: rgba(255,255,255,0.12); color: #fff; }
.watch-all-btn-primary {
    background: rgb(var(--accent-rgb)); color: #fff;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.watch-all-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
.watch-all-btn-primary:disabled { opacity: 0.4; cursor: default; }

/* Loading state */
.watch-all-loading-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; gap: 16px;
}
.watch-all-loading-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1); border-top-color: rgb(var(--accent-rgb));
    animation: watch-all-spin 0.8s linear infinite;
}
@keyframes watch-all-spin { to { transform: rotate(360deg); } }
.watch-all-loading-text { color: rgba(255,255,255,0.6); font-size: 14px; }
.watch-all-loading-count { color: rgba(255,255,255,0.3); font-size: 13px; }

/* Stats cards */
.watch-all-stats {
    display: flex; gap: 12px; padding: 16px 20px;
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(135deg, rgba(20,20,20,0.98) 0%, rgba(16,16,16,0.98) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.watch-all-stat-card {
    flex: 1; padding: 12px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center; transition: all 0.2s;
}
.watch-all-stat-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }
.watch-all-stat-card.eligible { border-color: rgba(var(--accent-rgb), 0.2); }
.watch-all-stat-card.eligible .watch-all-stat-value { color: rgb(var(--accent-rgb)); }
.watch-all-stat-card.ineligible .watch-all-stat-value { color: rgba(255,180,80,0.8); }
.watch-all-stat-value { font-size: 22px; font-weight: 700; color: #fff; }
.watch-all-stat-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Search */
.watch-all-search-wrap { padding: 8px 20px 4px; position: sticky; top: 78px; z-index: 2; background: rgba(16,16,16,0.95); }
.watch-all-search {
    width: 100%; padding: 10px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: #fff; font-size: 14px; outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.watch-all-search:focus { border-color: rgba(var(--accent-rgb), 0.4); }
.watch-all-search::placeholder { color: rgba(255,255,255,0.3); }

/* Section labels */
.watch-all-section-label {
    padding: 12px 20px 6px; font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1px;
}

/* Artist grid — two columns */
.watch-all-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    padding: 4px 12px 12px;
}
.watch-all-cell {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    transition: background 0.15s;
}
.watch-all-cell:hover { background: rgba(255,255,255,0.04); }
.watch-all-cell.dimmed { opacity: 0.4; }
.watch-all-cell-img {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.watch-all-cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.watch-all-cell-placeholder {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.watch-all-cell-name {
    font-size: 13px; font-weight: 500; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.watch-all-cell-meta { font-size: 11px; color: rgba(255,255,255,0.3); white-space: nowrap; }

/* Ineligible collapsible section */
.watch-all-ineligible {
    border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px;
}
.watch-all-ineligible-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; cursor: pointer; transition: background 0.15s;
}
.watch-all-ineligible-header:hover { background: rgba(255,255,255,0.03); }
.watch-all-ineligible-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,180,80,0.7); }
.watch-all-ineligible-icon { font-size: 14px; }
.watch-all-chevron { font-size: 10px; color: rgba(255,255,255,0.3); transition: transform 0.25s; }
.watch-all-ineligible.expanded .watch-all-chevron { transform: rotate(180deg); }
.watch-all-ineligible-body {
    max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
}
.watch-all-ineligible.expanded .watch-all-ineligible-body { max-height: 400px; overflow-y: auto; }
.watch-all-ineligible-hint {
    padding: 8px 20px 4px; font-size: 12px; color: rgba(255,255,255,0.3);
    border-left: 3px solid rgba(255,180,80,0.3); margin: 0 20px 8px; padding-left: 12px;
}

/* Results state */
.watch-all-results {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; gap: 8px;
}
.watch-all-results-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.12); color: rgb(var(--accent-rgb));
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: 8px;
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.15);
}
.watch-all-results-title { font-size: 20px; font-weight: 600; color: #fff; }
.watch-all-results-detail { font-size: 13px; color: rgba(255,255,255,0.4); }

/* Empty / error state */
.watch-all-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; gap: 8px; color: rgba(255,255,255,0.5); font-size: 14px;
}
.watch-all-empty-icon { font-size: 36px; margin-bottom: 4px; opacity: 0.5; }
.watch-all-empty-hint { font-size: 12px; color: rgba(255,255,255,0.3); margin-top: 4px; }
.watch-all-retry-link { color: rgb(var(--accent-rgb)); text-decoration: none; margin-top: 8px; }
.watch-all-retry-link:hover { text-decoration: underline; }

.alphabet-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.alphabet-selector::-webkit-scrollbar {
    display: none;
}

.alphabet-selector-inner {
    display: flex;
    gap: 12px;
    padding: 16px;
    min-width: max-content;
    justify-content: flex-start;
    align-items: center;
}

.alphabet-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease-out;
    min-width: 20px;
    height: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    text-shadow: none;
    padding-top: 30px;
    padding-bottom: 30px;
}

.alphabet-btn:hover {
    color: #ffffff;
    transform: scale(2.5);
    margin-left: 15px;
    margin-right: 15px;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* Neighbor scaling effect */
.alphabet-btn:hover+.alphabet-btn,
.alphabet-btn:has(+ .alphabet-btn:hover) {
    transform: scale(1.8);
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.alphabet-btn:hover+.alphabet-btn+.alphabet-btn,
.alphabet-btn:has(+ .alphabet-btn + .alphabet-btn:hover) {
    transform: scale(1.4);
    color: rgba(255, 255, 255, 0.6);
}

.alphabet-btn.active {
    color: #ffffff;
    transform: scale(1.2);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* Library Content */
.library-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Artists Grid */
.library-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
    flex: 1;
    contain: layout style;
}

/* Library Artist Card — full-bleed photo style */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.library-artist-card {
    background: rgba(18, 18, 18, 1);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: auto 240px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    aspect-ratio: 0.8;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    will-change: transform;
    contain: layout style paint;
}

.library-artist-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(var(--accent-rgb), 0.12);
}

.library-artist-card:active {
    transform: translateY(-2px) scale(1.01);
}

/* Artist Image — fills entire card */
.library-artist-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 100%);
    transition: none;
}

.library-artist-card:hover .library-artist-image {
    border-color: transparent;
    box-shadow: none;
}

.library-artist-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.library-artist-card:hover .library-artist-image img {
    transform: scale(1.06);
}

/* Artist Image Fallback */
.library-artist-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 1) 0%,
            rgba(20, 20, 20, 1) 100%);
}

/* Gradient overlay for text readability */
.library-artist-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 35%,
            transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.library-artist-card:hover::after {
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            transparent 65%);
}

/* Artist Info — pinned to bottom over the gradient */
.library-artist-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

.library-artist-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

.library-artist-stats {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.library-artist-stat {
    white-space: nowrap;
}

/* Empty State */
.library-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 16px;
    padding: 60px 20px;
}

.empty-icon {
    font-size: 64px;
    opacity: 0.3;
}

.empty-title {
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.empty-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    max-width: 400px;
}

/* Hand-off CTA shown in the library empty state when the user's search
   returns no library matches — offers to run the same query against the
   configured metadata source on the /search page. */
.library-empty-search-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.08));
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 10px;
    color: rgb(var(--accent-light-rgb, var(--accent-rgb)));
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.library-empty-search-cta:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.22);
}
.library-empty-search-cta:active { transform: translateY(0); }
.library-empty-search-cta-icon { font-size: 16px; }
.library-empty-search-cta-arrow {
    font-weight: 700;
    transition: transform 0.15s ease;
}
.library-empty-search-cta:hover .library-empty-search-cta-arrow { transform: translateX(3px); }
#library-empty-search-cta-query { color: #fff; }

/* Pagination */
.library-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0 10vh;
    margin-top: auto;
}

.pagination-btn {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

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

.pagination-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .library-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

}

@media (max-width: 768px) {
    .library-container {
        padding: 16px;
        gap: 16px;
    }

    .library-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .library-stats {
        align-self: stretch;
        justify-content: center;
    }

    .library-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }

    .library-artist-card {
        border-radius: 12px;
        aspect-ratio: 0.65;
    }

    .library-artist-info {
        padding: 12px;
    }

    .library-artist-name {
        font-size: 14px;
    }

    .card-badge-container {
        top: 4px;
        right: 4px;
        gap: 2px;
    }

    .source-card-icon {
        width: 18px;
        height: 18px;
        font-size: 7px;
        border-radius: 3px;
    }

    .source-card-icon img {
        width: 12px !important;
    }

    .watch-card-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }
}

/* ========================================
   Artist Detail Page Styles
   ======================================== */

.artist-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.back-btn {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 20px;
    color: #ffffff;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.back-btn:hover {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.artist-detail-title {
    flex-grow: 1;
    min-width: 0;
}

.artist-detail-title h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artist-detail-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.artist-stat {
    color: #b3b3b3;
    font-size: 14px;
    font-weight: 500;
}

/* Artist Detail Content */
.artist-detail-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.artist-detail-loading,
.artist-detail-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 20px;
}

.artist-detail-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.artist-detail-error .error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.artist-detail-error h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 8px 0;
}

.artist-detail-error p {
    color: #b3b3b3;
    margin: 0 0 20px 0;
}

.retry-btn {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    color: #ffffff;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.retry-btn:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, rgb(var(--accent-rgb)) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.3);
}

/* Artist Info Section */
.artist-info-section {
    display: flex;
    gap: 30px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 30px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.3) 0%, rgba(18, 18, 18, 0.5) 100%);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.artist-image-container {
    position: relative;
    flex-shrink: 0;
    /* Bound relative to the PARENT, not the viewport: the old 40vw cap let a
       huge source image (Deezer ships up to 1000px) out-muscle its flex
       siblings whenever the hero was narrower than the viewport — the info
       column collapsed ("KISS" clipped to "KIS") and overlapped the fixed
       280px Top Tracks sidebar (#1036). 38% + sidebar + gaps always leaves
       the info column real room. */
    max-width: min(38%, 460px);
}

#artist-hero-section #artist-detail-image {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.artist-detail-image {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.artist-image-fallback {
    width: 200px;
    height: 200px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

.artist-info {
    flex: 1;
    min-width: 0;
}

.artist-info h1 {
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px 0;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.artist-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.genre-tag {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 6px 14px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.artist-summary-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 800;
    color: rgb(var(--accent-rgb));
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 14px;
    color: #b3b3b3;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Discography Filters */
.discography-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.filter-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.discography-filter-btn {
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.2s ease-out;
}

.discography-filter-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.discography-filter-btn.active {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.15);
}

/* Discography Sections */
.discography-sections {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.discography-section {
    opacity: 1;
    /* Show immediately instead of animation for now */
}

/* Animation keyframes for future use */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.section-stats {
    display: flex;
    gap: 16px;
    color: #b3b3b3;
    font-size: 14px;
    font-weight: 500;
}

.releases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 20px;
    padding: 8px 0;
}

/* Release Cards */
.release-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 300px;
    /* Fixed height for consistent layout */
}

.discography-sections .release-card {
    height: fit-content;
}

.release-card:hover {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.95) 0%, rgba(30, 30, 30, 0.98) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.release-card.missing {
    opacity: 0.6;
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.3) 0%, rgba(40, 40, 40, 0.5) 100%);
    border-color: rgba(255, 255, 255, 0.05);
}

.release-card.missing:hover {
    opacity: 0.8;
    background: linear-gradient(135deg, rgba(70, 70, 70, 0.4) 0%, rgba(50, 50, 50, 0.6) 100%);
}

.release-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.release-image-fallback {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.6) 0%, rgba(40, 40, 40, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 12px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.6);
}

.release-title {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-year {
    font-size: 14px;
    color: #b3b3b3;
    margin: 0 0 8px 0;
}

.release-completion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.completion-text {
    color: #b3b3b3;
}

.completion-text.complete {
    color: rgb(var(--accent-rgb));
    font-weight: 600;
}

.completion-text.partial {
    color: #ffa500;
    font-weight: 600;
}

.completion-text.missing {
    color: #ff6b6b;
    font-weight: 600;
}

.completion-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.completion-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.completion-fill.complete {
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
}

.completion-fill.partial {
    background: linear-gradient(90deg, #ffa500, #ffb347);
}

.completion-fill.missing {
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    width: 0%;
}

/* Checking state - lazy-load ownership streaming */
.release-card.checking {
    opacity: 0.75;
    animation: cardCheckingPulse 1.8s ease-in-out infinite;
}

@keyframes cardCheckingPulse {

    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 0.55;
    }
}

.completion-text.checking {
    color: #888;
    font-weight: 400;
}

.completion-fill.checking {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    background-size: 200% 100%;
    animation: checkingBarShimmer 1.5s ease-in-out infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .artist-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .artist-detail-title h2 {
        font-size: 24px;
        white-space: normal;
    }

    .artist-info-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .artist-detail-image,
    .artist-image-fallback {
        width: 150px;
        height: 150px;
    }

    .artist-info h1 {
        font-size: 36px;
        white-space: normal;
        text-align: center;
    }

    .artist-summary-stats {
        justify-content: center;
        gap: 30px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .releases-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 18px;
    }

    .release-card {
        padding: 12px;
    }
}

/* ===============================
   ARTIST HERO SECTION (Modal-inspired design)
   =============================== */

.artist-hero-section {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 20px;
    padding: 28px 32px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.artist-hero-content {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

/* Identity block — name + badges stacked */
.artist-hero-identity {
    margin-bottom: 12px;
}

/* Numbers row — listeners + plays */
.artist-hero-numbers {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* Right column — top tracks */
.artist-hero-right {
    flex-shrink: 0;
    width: 280px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px 18px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.artist-image-container {
    position: relative;
    flex-shrink: 0;
}

.artist-image {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    display: block;
}

.artist-image-fallback {
    width: 160px;
    height: 160px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-light-rgb), 0.1) 100%);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    left: 0;
}

.artist-image:not([src=""]):not([src])+.artist-image-fallback,
.artist-image[src]:not([src=""])+.artist-image-fallback {
    display: none;
}

.artist-info {
    flex: 1;
    min-width: 0;
}

.artist-hero-section .artist-name {
    font-size: 2.2em;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.02em;
}

/* Hero badges — horizontal icon row */
.artist-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}

.artist-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.artist-hero-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.artist-hero-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
}
/* Invert dark SVG logos for Tidal and Qobuz */
.artist-hero-badge[title="Tidal"] img,
.artist-hero-badge[title="Qobuz"] img {
    filter: invert(1);
}
a.artist-hero-badge {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
a.artist-hero-badge:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
a.artist-hero-badge:hover img {
    opacity: 1;
}
div.artist-hero-badge {
    cursor: default;
}

.artist-genres-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* Collection progress bars — below listener/play stats */
.collection-overview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

/* Per-artist enrichment coverage */
.artist-enrichment-coverage {
    margin-top: 16px;
}

.artist-enrichment-coverage .artist-enrich-title {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.artist-enrich-grid {
    display: grid;
    /* auto-fit so the coverage circles WRAP within the middle column instead
       of forcing a fixed 5-wide track that overflowed into the Artist Tracks
       column (#1040). Still lands ~5-per-row at the normal column width and
       reflows to fewer when the column is narrow. */
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 12px 10px;
}
.artist-enrich-circle {
    min-width: 0;
}

.artist-enrich-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-enrich-circle:hover {
    transform: scale(1.12);
}

.artist-enrich-circle:hover .ring-pct {
    color: rgba(255, 255, 255, 0.9);
}

.artist-enrich-circle:hover .artist-enrich-label {
    color: rgba(255, 255, 255, 0.7);
}

.artist-enrich-ring {
    position: relative;
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 0 0px transparent);
    transition: filter 0.3s ease;
}

.artist-enrich-circle:hover .artist-enrich-ring {
    filter: drop-shadow(0 0 6px var(--ring-color, rgba(255, 255, 255, 0.2)));
}

.artist-enrich-ring svg {
    transform: rotate(-90deg);
    width: 48px;
    height: 48px;
}

.artist-enrich-ring .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 3;
}

.artist-enrich-ring .ring-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.artist-enrich-ring .ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.25s ease;
}

.artist-enrich-label {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
    transition: color 0.25s ease;
}

@keyframes ringFillIn {
    from { stroke-dashoffset: var(--ring-circ); }
    to   { stroke-dashoffset: var(--ring-offset); }
}

@keyframes ringPctFade {
    0%   { opacity: 0; transform: scale(0.7); }
    60%  { opacity: 0; transform: scale(0.7); }
    100% { opacity: 1; transform: scale(1); }
}

.collection-category {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
}

.category-label {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-size: 0.75em;
    min-width: 52px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.category-stats {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75em;
    font-weight: 500;
    min-width: 32px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.completion-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.completion-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    position: relative;
}

.completion-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Bio section */
.artist-hero-bio {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 16px 20px 32px;
    max-height: 8em;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
}
.artist-hero-bio.expanded {
    max-height: 500px;
}
.artist-hero-bio-toggle {
    color: rgb(var(--accent-rgb));
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 600;
    display: block;
    margin-top: 8px;
    padding: 4px 0;
}
.artist-hero-bio-toggle:hover {
    text-decoration: underline;
}

/* Stats — listener/play count boxes */
.artist-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    min-width: 80px;
    transition: border-color 0.2s;
}
.artist-hero-stat:hover {
    border-color: rgba(255, 255, 255, 0.1);
}
.hero-stat-value {
    font-size: 1.25em;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.hero-stat-label {
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

/* Right column is now the sidebar itself — styled by .artist-hero-right */
.hero-sidebar-title {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.hero-top-tracks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
@media (max-width: 768px) {
    .hero-top-tracks {
        max-height: 300px;
    }
}
.hero-top-track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.hero-top-track:hover {
    background: rgba(255, 255, 255, 0.04);
}
.hero-top-track-play {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
    font-size: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.2s;
}
.hero-top-track:hover .hero-top-track-play {
    opacity: 1;
}
.hero-top-track-play:hover {
    background: rgb(var(--accent-rgb));
    color: #fff;
    transform: scale(1.1);
}
.hero-top-track-num {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    width: 14px;
    text-align: right;
    flex-shrink: 0;
}
.hero-top-track-name {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-top-track-plays {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Per-row wishlist button — only shown on metadata-source rows
   (Spotify / Deezer). Last.fm rows show the playcount instead. */
.hero-top-track-download {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.2s;
}
.hero-top-track:hover .hero-top-track-download {
    opacity: 1;
}
.hero-top-track-download:hover {
    background: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-rgb));
    transform: scale(1.1);
}

/* Footer "Download All" button on the top-tracks sidebar — only shown
   when metadata-source provided downloadable tracks. */
.hero-top-tracks-download-all {
    margin-top: 12px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.08);
    color: rgb(var(--accent-rgb));
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}
.hero-top-tracks-download-all:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.5);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .artist-hero-section {
        margin: 15px;
        padding: 20px;
    }

    .artist-hero-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .artist-image,
    .artist-image-fallback {
        width: 120px;
        height: 120px;
    }

    .artist-hero-section .artist-name {
        font-size: 1.6em;
        text-align: center;
    }

    .artist-hero-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-left: 0;
        padding-top: 16px;
    }

    .artist-hero-numbers {
        justify-content: center;
    }

    .artist-hero-identity {
        justify-content: center;
    }
}

/* ================================================
   ADD TO WISHLIST MODAL STYLES
   ================================================ */

/* Modal Overlay and Container */
.add-to-wishlist-modal {
    display: flex;
    flex-direction: column;
    width: 900px;
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: rgba(16, 16, 20, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#add-to-wishlist-modal-overlay:not(.hidden) .add-to-wishlist-modal {
    transform: scale(1);
    opacity: 1;
}

/* Modal Header */
.add-to-wishlist-modal-header {
    background: rgba(20, 20, 24, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    position: relative;
    overflow: hidden;
}

/* Hero Section */
.add-to-wishlist-modal-hero {
    display: flex;
    align-items: center;
    padding: 20px 28px;
    gap: 20px;
    position: relative;
    z-index: 2;
    min-height: 120px;
}

.add-to-wishlist-modal-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: blur(20px);
    z-index: 1;
}

.add-to-wishlist-modal-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.7) 0%,
            rgba(18, 18, 18, 0.8) 100%);
}

.add-to-wishlist-modal-hero-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.add-to-wishlist-modal-hero-images {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.add-to-wishlist-modal-hero-image {
    border-radius: 12px;
    object-fit: cover;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.add-to-wishlist-modal-hero-image:hover {
    transform: scale(1.05);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.add-to-wishlist-modal-hero-image.artist {
    border-radius: 50%;
    width: 70px;
    height: 70px;
}

.add-to-wishlist-modal-hero-image.album {
    border-radius: 12px;
    width: 80px;
    height: 80px;
}

.add-to-wishlist-modal-hero-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.add-to-wishlist-modal-hero-metadata {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.add-to-wishlist-modal-hero-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-to-wishlist-modal-hero-subtitle {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-to-wishlist-modal-hero-details {
    display: flex;
    gap: 16px;
    font-size: 14px;
    margin-top: 4px;
}

.add-to-wishlist-modal-hero-detail {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
    padding: 4px 8px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.1);
    transition: all 0.3s ease;
}

/* Header Actions */
.add-to-wishlist-modal-header-actions {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 3;
}

.add-to-wishlist-modal-close {
    color: #b3b3b3;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.add-to-wishlist-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Modal Content */
.add-to-wishlist-modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.add-to-wishlist-modal-body {
    flex: 1;
    padding: 24px 28px;
    overflow-y: auto;
    background: #121212;
}

.add-to-wishlist-modal-body::-webkit-scrollbar {
    width: 8px;
}

.add-to-wishlist-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.add-to-wishlist-modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 4px;
}

.add-to-wishlist-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

/* Track List Container */
.wishlist-track-list-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wishlist-track-list-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.wishlist-track-list-header h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.wishlist-track-list-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* Track List */
.wishlist-track-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.wishlist-track-list::-webkit-scrollbar {
    width: 6px;
}

.wishlist-track-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.wishlist-track-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

.wishlist-track-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 12px;
}

.wishlist-track-item:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.08) 0%,
            rgba(var(--accent-rgb), 0.03) 100%);
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateX(4px);
}

.wishlist-track-number {
    width: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 500;
}

.wishlist-track-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.wishlist-track-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-track-artists {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-track-duration {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    min-width: 40px;
    text-align: right;
}

/* Track ownership indicators */
.wishlist-track-item.owned {
    opacity: 0.65;
    border-left: 3px solid rgba(var(--accent-rgb), 0.6);
}

.wishlist-track-item.owned:hover {
    opacity: 0.85;
}

.wishlist-track-item.missing {
    border-left: 3px solid rgba(255, 152, 0, 0.6);
}

.wishlist-track-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.wishlist-track-badge.owned {
    color: rgba(var(--accent-rgb), 0.9);
}

/* Track metadata (format + bitrate) */
.wishlist-track-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.wishlist-track-format {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(var(--accent-rgb), 0.9);
}

.wishlist-track-bitrate {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Format tags on release cards ── */
.release-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px 6px;
}

.release-format-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(var(--accent-rgb), 0.9);
    line-height: 1.4;
}

/* ── Format tag in wishlist modal hero ── */
.modal-format-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(var(--accent-rgb), 0.9);
}

/* ── Format tags in artist hero section ── */
.artist-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.artist-format-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(var(--accent-rgb), 0.9);
}

/* Modal Footer */
.add-to-wishlist-modal-footer {
    background: linear-gradient(135deg,
            rgba(42, 42, 42, 0.9) 0%,
            rgba(30, 30, 30, 0.95) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 28px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    /* Quality Profile selector on the left, actions on the right; wraps to two
       rows on narrow screens rather than squashing the buttons. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.wishlist-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
}

/* .wishlist-modal-btn* migrated to the shared .btn primitive
   (.btn--primary / .btn--secondary / .btn--download / .btn.loading). */

/* Animation for modal appearance */
@keyframes wishlistModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#add-to-wishlist-modal-overlay:not(.hidden) .add-to-wishlist-modal {
    animation: wishlistModalFadeIn 0.4s ease-out;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .add-to-wishlist-modal {
        width: 95vw;
        max-height: 90vh;
        border-radius: 16px;
    }

    .add-to-wishlist-modal-hero {
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding: 20px;
        gap: 16px;
    }

    .add-to-wishlist-modal-hero-content {
        flex-direction: column;
        gap: 16px;
    }

    .add-to-wishlist-modal-hero-images {
        justify-content: center;
    }

    .add-to-wishlist-modal-hero-image.album,
    .add-to-wishlist-modal-hero-image.artist {
        width: 60px;
        height: 60px;
    }

    .add-to-wishlist-modal-hero-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
        margin: 0 auto;
    }

    .add-to-wishlist-modal-hero-title {
        font-size: 18px;
        white-space: normal;
        text-align: center;
    }

    .add-to-wishlist-modal-hero-subtitle {
        font-size: 14px;
        white-space: normal;
        text-align: center;
    }

    .add-to-wishlist-modal-hero-details {
        justify-content: center;
        flex-wrap: wrap;
    }

    .add-to-wishlist-modal-body {
        padding: 20px;
    }

    .add-to-wishlist-modal-footer {
        padding: 20px;
    }

    .wishlist-modal-actions {
        flex-direction: column;
        gap: 12px;
    }

    .wishlist-modal-actions .btn {
        width: 100%;
    }
}

/* =======================================
   BEATPORT TOP 10 LISTS SECTION
   ======================================= */

.beatport-top10-section {
    margin-top: 40px;
    padding: 0 30px;
    margin-bottom: 40px;
}

.beatport-top10-header {
    text-align: center;
    margin-bottom: 40px;
}

.beatport-top10-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.beatport-top10-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Two-column container for both lists */
.beatport-top10-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1400px;
    border-radius: 20px;
    margin: 0 auto;
    overflow: hidden;
    /* Prevent overflow */
}

/* Individual list styling */
.beatport-top10-list,
.beatport-hype10-list {
    background: linear-gradient(135deg,
            rgba(18, 18, 18, 0.95),
            rgba(30, 30, 30, 0.9));
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
    min-width: 0;
    /* Allow shrinking */
    overflow: hidden;
    /* Prevent content overflow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Color-coded themes */
.beatport-top10-list {
    border-left: 4px solid #00ff88;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 136, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-hype10-list {
    border-left: 4px solid #ff3366;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 51, 102, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Hover Effects for Top 10 Lists */
.beatport-top10-list:hover {
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.3)) drop-shadow(0 0 8px rgba(0, 255, 136, 0.2)) drop-shadow(0 0 16px rgba(0, 255, 136, 0.1));
    border-left-color: rgba(0, 255, 136, 0.6);
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.04),
            rgba(18, 18, 18, 0.95),
            rgba(30, 30, 30, 0.9));
}

.beatport-hype10-list:hover {
    filter: drop-shadow(0 0 4px rgba(255, 51, 102, 0.3)) drop-shadow(0 0 8px rgba(255, 51, 102, 0.2)) drop-shadow(0 0 16px rgba(255, 51, 102, 0.1));
    border-left-color: rgba(255, 51, 102, 0.6);
    background: linear-gradient(135deg,
            rgba(255, 51, 102, 0.04),
            rgba(18, 18, 18, 0.95),
            rgba(30, 30, 30, 0.9));
}

/* List headers */
.beatport-top10-list-header,
.beatport-hype10-list-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.beatport-top10-list-title,
.beatport-hype10-list-title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.beatport-top10-list-subtitle,
.beatport-hype10-list-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Track containers */
.beatport-top10-tracks,
.beatport-hype10-tracks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Individual track cards - CORRECTED CLASS NAMES */
.beatport-top10-card,
.beatport-hype10-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(25, 25, 25, 0.9),
            rgba(35, 35, 35, 0.8));
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    /* Allow shrinking */
    box-sizing: border-box;
    min-height: 80px;
    /* Consistent height */
    max-height: 80px;
    /* Prevent expansion */
}

/* Hover animations for cards */
.beatport-top10-card:hover {
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.12),
            rgba(35, 35, 35, 0.95));
    border-color: rgba(0, 255, 136, 0.3);
    transform: translateY(-3px);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 136, 0.2);
}

.beatport-hype10-card:hover {
    background: linear-gradient(135deg,
            rgba(255, 51, 102, 0.12),
            rgba(35, 35, 35, 0.95));
    border-color: rgba(255, 51, 102, 0.3);
    transform: translateY(-3px);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 51, 102, 0.2);
}

/* Track rank number */
.beatport-top10-card-rank {
    font-size: 20px;
    font-weight: 800;
    color: #00ff88;
    min-width: 35px;
    text-align: center;
    margin-right: 16px;
    text-shadow: 0 2px 6px rgba(0, 255, 136, 0.3);
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 255, 136, 0.05));
    border-radius: 12px;
    padding: 8px 0;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.beatport-hype10-card-rank {
    font-size: 20px;
    font-weight: 800;
    color: #ff3366;
    min-width: 35px;
    text-align: center;
    margin-right: 16px;
    text-shadow: 0 2px 6px rgba(255, 51, 102, 0.3);
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.1), rgba(255, 51, 102, 0.05));
    border-radius: 12px;
    padding: 8px 0;
    border: 1px solid rgba(255, 51, 102, 0.2);
}

/* Track artwork */
.beatport-top10-card-artwork,
.beatport-hype10-card-artwork {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-right: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.beatport-top10-card-artwork img,
.beatport-hype10-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.beatport-top10-card:hover .beatport-top10-card-artwork img,
.beatport-hype10-card:hover .beatport-hype10-card-artwork img {
    transform: scale(1.15);
}

/* Artwork placeholder */
.beatport-top10-card-placeholder,
.beatport-hype10-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.8), rgba(60, 60, 60, 0.6));
    color: rgba(255, 255, 255, 0.4);
}

/* Track info */
.beatport-top10-card-info,
.beatport-hype10-card-info {
    flex: 1;
    min-width: 0;
    /* Critical for text truncation */
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    /* Prevent text overflow */
    width: 100%;
}

.beatport-top10-card-title,
.beatport-hype10-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    max-width: 100%;
    width: 100%;
}

.beatport-top10-card-artist,
.beatport-hype10-card-artist {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
}

.beatport-top10-card-label {
    font-size: 11px;
    color: rgba(0, 255, 136, 0.9);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 100%;
    width: 100%;
}

.beatport-hype10-card-label {
    font-size: 11px;
    color: rgba(255, 51, 102, 0.9);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    max-width: 100%;
    width: 100%;
}

/* Error states */
.beatport-top10-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg,
            rgba(255, 51, 51, 0.1),
            rgba(40, 40, 40, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(255, 51, 51, 0.2);
    text-align: center;
    padding: 30px;
}

.beatport-top10-error h3 {
    color: #ff3366;
    font-size: 18px;
    margin-bottom: 8px;
}

.beatport-top10-error p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

/* Loading states */
.beatport-top10-loading,
.beatport-hype10-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.6),
            rgba(24, 24, 24, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.beatport-top10-loading-content,
.beatport-hype10-loading-content {
    text-align: center;
}

.beatport-top10-loading-content h4,
.beatport-hype10-loading-content h4 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.beatport-top10-loading-content p,
.beatport-hype10-loading-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Top 10 Lists Responsive Design */
@media (max-width: 1300px) {

    .beatport-top10-card-title,
    .beatport-hype10-card-title {
        font-size: 14px;
    }

    .beatport-top10-card-artist,
    .beatport-hype10-card-artist {
        font-size: 12px;
    }

    .beatport-top10-card-label,
    .beatport-hype10-card-label {
        font-size: 10px;
    }

    .beatport-top10-card-rank,
    .beatport-hype10-card-rank {
        font-size: 18px;
    }
}

@media (max-width: 1200px) {
    .beatport-top10-container {
        gap: 30px;
        max-width: 1200px;
    }

    .beatport-top10-list,
    .beatport-hype10-list {
        padding: 25px;
        max-width: 100%;
    }

    .beatport-top10-card,
    .beatport-hype10-card {
        min-height: 75px;
        max-height: 75px;
    }

    .beatport-top10-card-artwork,
    .beatport-hype10-card-artwork {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 900px) {
    .beatport-top10-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .beatport-top10-section {
        padding: 0 20px;
    }

    .beatport-top10-title {
        font-size: 28px;
    }

    .beatport-top10-list-title,
    .beatport-hype10-list-title {
        font-size: 20px;
    }

    .beatport-top10-card,
    .beatport-hype10-card {
        padding: 12px;
        min-height: 70px;
        max-height: 70px;
    }

    .beatport-top10-card-artwork,
    .beatport-hype10-card-artwork {
        width: 42px;
        height: 42px;
        margin-right: 12px;
    }

    .beatport-top10-card-rank,
    .beatport-hype10-card-rank {
        font-size: 16px;
        min-width: 30px;
        margin-right: 12px;
        padding: 6px 0;
    }

}

@media (max-width: 600px) {
    .beatport-top10-section {
        padding: 0 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .beatport-top10-header {
        margin-bottom: 30px;
    }

    .beatport-top10-title {
        font-size: 24px;
    }

    .beatport-top10-list,
    .beatport-hype10-list {
        padding: 20px;
    }

    .beatport-top10-list-title,
    .beatport-hype10-list-title {
        font-size: 18px;
    }

    .beatport-top10-card,
    .beatport-hype10-card {
        padding: 10px;
        min-height: 65px;
        max-height: 65px;
    }

    .beatport-top10-card-artwork,
    .beatport-hype10-card-artwork {
        width: 38px;
        height: 38px;
        margin-right: 10px;
    }

    .beatport-top10-card-rank,
    .beatport-hype10-card-rank {
        font-size: 14px;
        min-width: 26px;
        padding: 4px 0;
        margin-right: 10px;
    }

    .beatport-top10-card-title,
    .beatport-hype10-card-title {
        font-size: 13px;
    }

    .beatport-top10-card-artist,
    .beatport-hype10-card-artist {
        font-size: 11px;
    }

    .beatport-top10-card-label,
    .beatport-hype10-card-label {
        font-size: 9px;
    }
}

/* =======================================
   BEATPORT TOP 10 RELEASES SECTION
   ======================================= */

.beatport-releases-top10-section {
    margin-top: 40px;
    padding: 0 30px;
    margin-bottom: 40px;
}

.beatport-releases-top10-header {
    text-align: center;
    margin-bottom: 40px;
}

.beatport-releases-top10-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.beatport-releases-top10-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Single column container for releases */
.beatport-releases-top10-container {
    max-width: 1500px;
    margin: 0 auto;
}

/* List styling with unique design */
.beatport-releases-top10-list {
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95),
            rgba(35, 35, 35, 0.9));
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(138, 43, 226, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-left: 4px solid #8a2be2;
    overflow: hidden;
}

/* Track containers with grid layout for releases */
.beatport-releases-top10-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    gap: 20px;
}

/* Individual release cards - unique design with images */
.beatport-releases-top10-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.9),
            rgba(45, 45, 45, 0.85));
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    min-height: 120px;
    max-height: 120px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Hover animations for release cards */
.beatport-releases-top10-card:hover {
    background: linear-gradient(135deg,
            rgba(138, 43, 226, 0.15),
            rgba(45, 45, 45, 0.95));
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(138, 43, 226, 0.25);
}

/* Release rank number */
.beatport-releases-top10-card-rank {
    font-size: 24px;
    font-weight: 900;
    color: #8a2be2;
    min-width: 40px;
    text-align: center;
    margin-right: 20px;
    text-shadow: 0 3px 8px rgba(138, 43, 226, 0.4);
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(138, 43, 226, 0.08));
    border-radius: 16px;
    padding: 12px 0;
    border: 2px solid rgba(138, 43, 226, 0.3);
    backdrop-filter: blur(10px);
}

/* Release artwork - larger since these have images */
.beatport-releases-top10-card-artwork {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    margin-right: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
}

.beatport-releases-top10-card-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.beatport-releases-top10-card:hover .beatport-releases-top10-card-artwork img {
    transform: scale(1.2) rotate(2deg);
}

/* Artwork placeholder for releases */
.beatport-releases-top10-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(80, 80, 80, 0.8));
    color: rgba(255, 255, 255, 0.6);
}

/* Release info */
.beatport-releases-top10-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    width: 100%;
}

.beatport-releases-top10-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    max-width: 100%;
    width: 100%;
}

.beatport-releases-top10-card-artist {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
}

.beatport-releases-top10-card-label {
    font-size: 13px;
    color: white;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    max-width: 100%;
    width: 100%;
    transition: .5s;
}

.beatport-releases-top10-card:hover .beatport-releases-top10-card-label {
    color: rgba(138, 43, 226, 0.95);
    transition: .5s;
}


/* Loading states for releases */
.beatport-releases-top10-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.7),
            rgba(30, 30, 30, 0.5));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.beatport-releases-top10-loading-content {
    text-align: center;
}

.beatport-releases-top10-loading-content h4 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.beatport-releases-top10-loading-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Error states for releases */
.beatport-releases-top10-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: linear-gradient(135deg,
            rgba(255, 51, 51, 0.12),
            rgba(45, 45, 45, 0.9));
    border-radius: 20px;
    border: 1px solid rgba(255, 51, 51, 0.25);
    text-align: center;
    padding: 40px;
}

.beatport-releases-top10-error h3 {
    color: #ff3366;
    font-size: 20px;
    margin-bottom: 10px;
}

.beatport-releases-top10-error p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    margin: 0;
}

/* Responsive Design for Top 10 Releases */
@media (max-width: 1300px) {
    .beatport-releases-top10-card-title {
        font-size: 16px;
    }

    .beatport-releases-top10-card-artist {
        font-size: 14px;
    }

    .beatport-releases-top10-card-label {
        font-size: 12px;
    }

    .beatport-releases-top10-card-rank {
        font-size: 20px;
    }
}

@media (max-width: 1200px) {
    .beatport-releases-top10-tracks {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }

    .beatport-releases-top10-list {
        padding: 30px;
    }

    .beatport-releases-top10-card {
        min-height: 110px;
        max-height: 110px;
        padding: 16px;
    }

    .beatport-releases-top10-card-artwork {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 900px) {
    .beatport-releases-top10-tracks {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .beatport-releases-top10-section {
        padding: 0 20px;
    }

    .beatport-releases-top10-title {
        font-size: 28px;
    }

    .beatport-releases-top10-card {
        min-height: 100px;
        max-height: 100px;
        padding: 14px;
    }

    .beatport-releases-top10-card-artwork {
        width: 60px;
        height: 60px;
        margin-right: 16px;
    }

    .beatport-releases-top10-card-rank {
        font-size: 18px;
        min-width: 35px;
        margin-right: 16px;
        padding: 8px 0;
    }
}

@media (max-width: 600px) {
    .beatport-releases-top10-section {
        padding: 0 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .beatport-releases-top10-header {
        margin-bottom: 30px;
    }

    .beatport-releases-top10-list {
        padding: 20px;
    }

    .beatport-releases-top10-title {
        font-size: 24px;
    }

    .beatport-releases-top10-card {
        min-height: 90px;
        max-height: 90px;
        padding: 12px;
    }

    .beatport-releases-top10-card-artwork {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }

    .beatport-releases-top10-card-rank {
        font-size: 16px;
        min-width: 30px;
        margin-right: 12px;
        padding: 6px 0;
    }

    .beatport-releases-top10-card-title {
        font-size: 14px;
    }

    .beatport-releases-top10-card-artist {
        font-size: 12px;
    }

    .beatport-releases-top10-card-label {
        font-size: 10px;
    }
}

/* ================================
   BEATPORT NEW RELEASES SECTION
   ================================ */

.beatport-releases-section {
    margin-top: 40px;
    padding: 0 20px;
}

.beatport-releases-header {
    text-align: center;
    margin-bottom: 30px;
}

.beatport-releases-title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)), #00d4aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.beatport-releases-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.beatport-releases-slider-container {
    position: relative;
    background: linear-gradient(135deg,
            rgba(18, 18, 18, 0.95),
            rgba(30, 30, 30, 0.9));
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-releases-slider {
    position: relative;
    border-radius: 16px;
}

.beatport-releases-slider-track {
    position: relative;
    height: 425px;
}

.beatport-releases-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.1),
            rgba(var(--accent-light-rgb), 0.05));
    border-radius: 16px;
    border: 2px dashed rgba(var(--accent-rgb), 0.3);
}

.beatport-releases-loading-content {
    text-align: center;
}

.beatport-releases-loading-content h3 {
    font-size: 24px;
    color: rgb(var(--accent-rgb));
    margin-bottom: 8px;
    font-weight: 600;
}

.beatport-releases-loading-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

/* Individual Slide (contains 10 cards in 5x2 grid) */
.beatport-releases-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100px);
}

.beatport-releases-slide.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0);
}

.beatport-releases-slide.prev {
    transform: translateX(-100px);
}

.beatport-releases-slide.next {
    transform: translateX(100px);
}

.beatport-releases-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.6),
            rgba(24, 24, 24, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    justify-items: center;
    align-items: center;
    margin: 0 auto;
}

/* Release Card Styling */
.beatport-release-card {
    background: linear-gradient(145deg,
            rgba(40, 40, 40, 0.9),
            rgba(28, 28, 28, 0.95));
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.beatport-release-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    border-radius: 12px;
    z-index: 0;
}

.beatport-release-card:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(145deg,
            rgba(var(--accent-rgb), 0.15),
            rgba(40, 40, 40, 0.95));
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(var(--accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    z-index: 10;
}

.beatport-release-card-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.beatport-release-artwork {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 0 auto 12px auto;
    background: linear-gradient(135deg, #333, #555);
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.beatport-release-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.beatport-release-card:hover .beatport-release-artwork img {
    transform: scale(1.1);
}

.beatport-release-info {
    text-align: center;
}

.beatport-release-title {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beatport-release-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beatport-release-label {
    font-size: 10px;
    color: rgba(var(--accent-rgb), 0.8);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placeholder Card Styling */
.beatport-release-placeholder {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.beatport-release-placeholder .placeholder-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.beatport-release-placeholder:hover {
    transform: none;
    background: linear-gradient(145deg,
            rgba(40, 40, 40, 0.9),
            rgba(28, 28, 28, 0.95));
}

/* Navigation Buttons */
.beatport-releases-slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.beatport-releases-nav-btn {
    pointer-events: all;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.9),
            rgba(var(--accent-light-rgb), 0.8));
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.beatport-releases-nav-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 1),
            rgba(var(--accent-light-rgb), 0.9));
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.6);
}

.beatport-releases-prev-btn {
    margin-left: -25px;
}

.beatport-releases-next-btn {
    margin-right: -25px;
}

/* Slider Indicators */
.beatport-releases-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

.beatport-releases-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.beatport-releases-indicator.active {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.5);
    transform: scale(1.2);
}

.beatport-releases-indicator:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 1100px) {
    .beatport-releases-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .beatport-releases-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
    }

    .beatport-release-artwork {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 900px) {
    .beatport-releases-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 14px;
    }

    .beatport-releases-slider-container {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .beatport-releases-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        gap: 12px;
    }

    .beatport-releases-section {
        padding: 0 15px;
    }

    .beatport-releases-title {
        font-size: 24px;
    }
}

/* ==================== HYPE PICKS SLIDER STYLES ==================== */

.beatport-hype-picks-section {
    margin-top: 40px;
    padding: 0 20px;
}

.beatport-hype-picks-header {
    text-align: center;
    margin-bottom: 30px;
}

.beatport-hype-picks-title {
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(135deg, #ff6b6b, #ff8787, #ffa8a8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.beatport-hype-picks-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.beatport-hype-picks-slider-container {
    position: relative;
    background: linear-gradient(135deg,
            rgba(18, 18, 18, 0.95),
            rgba(30, 30, 30, 0.9));
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-hype-picks-slider {
    position: relative;
    border-radius: 16px;
}

.beatport-hype-picks-slider-track {
    position: relative;
    height: 425px;
}

.beatport-hype-picks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 0.1),
            rgba(255, 135, 135, 0.05));
    border-radius: 16px;
    border: 2px dashed rgba(255, 107, 107, 0.3);
}

.beatport-hype-picks-loading-content {
    text-align: center;
}

.beatport-hype-picks-loading-content h3 {
    font-size: 24px;
    color: #ff6b6b;
    margin-bottom: 8px;
    font-weight: 600;
}

.beatport-hype-picks-loading-content p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin: 0;
}

/* Individual Slide (contains 10 cards in 5x2 grid) */
.beatport-hype-picks-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100px);
}

.beatport-hype-picks-slide.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0);
}

.beatport-hype-picks-slide.prev {
    transform: translateX(-100px);
}

.beatport-hype-picks-slide.next {
    transform: translateX(100px);
}

.beatport-hype-picks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.6),
            rgba(24, 24, 24, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    justify-items: center;
    align-items: center;
    margin: 0 auto;
}

/* Hype Pick Card Styling */
.beatport-hype-pick-card {
    background: linear-gradient(145deg,
            rgba(40, 40, 40, 0.9),
            rgba(28, 28, 28, 0.95));
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.beatport-hype-pick-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg-image, none);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    border-radius: 12px;
    z-index: 0;
}

.beatport-hype-pick-card:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(145deg,
            rgba(255, 107, 107, 0.15),
            rgba(40, 40, 40, 0.95));
    border-color: rgba(255, 107, 107, 0.4);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(255, 107, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    z-index: 10;
}

.beatport-hype-pick-card-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.beatport-hype-pick-artwork {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 0 auto 12px auto;
    background: linear-gradient(135deg, #333, #555);
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

.beatport-hype-pick-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.beatport-hype-pick-card:hover .beatport-hype-pick-artwork img {
    transform: scale(1.1);
}

.beatport-hype-pick-info {
    text-align: center;
}

.beatport-hype-pick-title {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beatport-hype-pick-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beatport-hype-pick-label {
    font-size: 10px;
    color: rgba(255, 107, 107, 0.8);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placeholder Card Styling */
.beatport-hype-pick-placeholder {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.beatport-hype-pick-placeholder .placeholder-icon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.beatport-hype-pick-placeholder:hover {
    transform: none;
    background: linear-gradient(145deg,
            rgba(40, 40, 40, 0.9),
            rgba(28, 28, 28, 0.95));
}

/* Navigation Buttons */
.beatport-hype-picks-slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.beatport-hype-picks-nav-btn {
    pointer-events: all;
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 0.9),
            rgba(255, 135, 135, 0.8));
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.beatport-hype-picks-nav-btn:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg,
            rgba(255, 107, 107, 1),
            rgba(255, 135, 135, 0.9));
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
}

.beatport-hype-picks-prev-btn {
    margin-left: -25px;
}

.beatport-hype-picks-next-btn {
    margin-right: -25px;
}

/* Slider Indicators */
.beatport-hype-picks-slider-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

.beatport-hype-picks-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.beatport-hype-picks-indicator.active {
    background: linear-gradient(135deg, #ff6b6b, #ff8787);
    border-color: rgba(255, 107, 107, 0.6);
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
    transform: scale(1.2);
}

.beatport-hype-picks-indicator:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 1100px) {
    .beatport-hype-picks-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .beatport-hype-picks-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
    }

    .beatport-hype-pick-artwork {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 900px) {
    .beatport-hype-picks-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 14px;
    }

    .beatport-hype-picks-slider-container {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .beatport-hype-picks-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        gap: 12px;
    }

    .beatport-hype-picks-section {
        padding: 0 15px;
    }

    .beatport-hype-picks-title {
        font-size: 24px;
    }
}

/* ==================== FEATURED CHARTS SLIDER STYLES ==================== */

/* Charts Section */
.beatport-charts-section {
    margin-top: 40px;
    padding: 0 30px;
}

.beatport-charts-header {
    text-align: center;
    margin-bottom: 30px;
}

.beatport-charts-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.beatport-charts-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Charts Slider Container */
.beatport-charts-slider-container {
    position: relative;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.4),
            rgba(24, 24, 24, 0.2));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(15px);
    min-height: 600px;
    padding: 30px;
}

.beatport-charts-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.beatport-charts-slider-track {
    position: relative;
    height: 550px;
}

.beatport-charts-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100px);
}

.beatport-charts-slide.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 10;
}

.beatport-charts-slide.prev {
    opacity: 0;
    transform: translateX(-100px);
}

.beatport-charts-slide.next {
    opacity: 0;
    transform: translateX(100px);
}

/* Charts Grid */
.beatport-charts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.6),
            rgba(24, 24, 24, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    justify-items: center;
    align-items: center;
    margin: 0 auto;
}

/* Chart Card Styling - Large Background Photo Design */
.beatport-chart-card {
    position: relative;
    width: 100%;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--chart-bg-image, linear-gradient(135deg, rgb(var(--accent-rgb)), #191414));
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    z-index: 1;
}

.beatport-chart-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            rgba(0, 0, 0, 0.7) 100%);
    border-radius: 16px;
    z-index: 2;
}

.beatport-chart-card:hover {
    transform: translateY(-12px) scale(1.08);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(var(--accent-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 20;
}

.beatport-chart-card:hover::after {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.5) 100%);
}

.beatport-chart-card:hover .beatport-chart-name {
    color: rgba(var(--accent-rgb), 0.95);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.beatport-chart-card:hover .beatport-chart-creator {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
    transform: translateY(-1px);
}

.beatport-chart-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 3;
    text-align: left;
}

.beatport-chart-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.beatport-chart-creator {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Charts Loading State */
.beatport-charts-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.1),
            rgba(16, 16, 16, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.beatport-charts-loading-content {
    text-align: center;
    color: #ffffff;
}

.beatport-charts-loading-content h3 {
    font-size: 24px;
    margin-bottom: 8px;
    color: rgba(var(--accent-rgb), 0.9);
}

.beatport-charts-loading-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Charts Navigation */
.beatport-charts-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 100;
}

.beatport-charts-nav-btn {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.9),
            rgba(var(--accent-rgb), 0.7));
    border: none;
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beatport-charts-nav-btn:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 1),
            rgba(24, 160, 72, 0.9));
    transform: scale(1.1);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--accent-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.beatport-charts-nav-btn:active {
    transform: scale(0.95);
}

/* Charts Indicators */
.beatport-charts-slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.beatport-charts-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.beatport-charts-indicator.active {
    background: rgba(var(--accent-rgb), 0.9);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.beatport-charts-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* Charts Responsive Design */
@media (max-width: 1100px) {
    .beatport-charts-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .beatport-charts-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
    }

    .beatport-chart-card {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }
}

@media (max-width: 900px) {
    .beatport-charts-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 14px;
    }

    .beatport-charts-slider-container {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .beatport-charts-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
        gap: 12px;
    }

    .beatport-charts-section {
        padding: 0 15px;
    }

    .beatport-charts-title {
        font-size: 24px;
    }
}

/* ==================== DJ CHARTS SLIDER STYLES ==================== */

/* DJ Section */
.beatport-dj-section {
    margin-top: 40px;
    padding: 0 30px;
}

.beatport-dj-header {
    text-align: center;
    margin-bottom: 30px;
}

.beatport-dj-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.beatport-dj-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* DJ Slider Container */
.beatport-dj-slider-container {
    position: relative;
    background: linear-gradient(135deg,
            rgba(147, 51, 234, 0.1),
            rgba(79, 70, 229, 0.05));
    border-radius: 20px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    backdrop-filter: blur(15px);
    min-height: 300px;
    padding: 30px;
}

.beatport-dj-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.beatport-dj-slider-track {
    position: relative;
    height: 300px;
}

.beatport-dj-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100px);
}

.beatport-dj-slide.active {
    opacity: 1;
    z-index: 10;
    transform: translateX(0);
}

.beatport-dj-slide.prev {
    opacity: 0;
    transform: translateX(-100px);
}

.beatport-dj-slide.next {
    opacity: 0;
    transform: translateX(100px);
}

/* DJ Cards Layout - 3 cards per slide */
.beatport-dj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 20px;
    background: linear-gradient(135deg,
            rgba(16, 16, 16, 0.6),
            rgba(24, 24, 24, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(147, 51, 234, 0.15);
    justify-items: center;
    align-items: center;
    margin: 0 auto;
}

/* DJ Chart Card Styling - Unique vertical design */
.beatport-dj-card {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 220px;
    max-height: 220px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(147, 51, 234, 0.8),
            rgba(79, 70, 229, 0.6));
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.beatport-dj-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dj-bg-image, linear-gradient(135deg, #9333ea, #4f46e5));
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    z-index: 1;
}

.beatport-dj-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
            rgba(147, 51, 234, 0.3) 0%,
            rgba(0, 0, 0, 0.4) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    border-radius: 20px;
    z-index: 2;
}

.beatport-dj-card:hover {
    transform: translateY(-15px) scale(1.1);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(147, 51, 234, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 25;
}

.beatport-dj-card:hover::after {
    background: linear-gradient(180deg,
            rgba(147, 51, 234, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.6) 100%);
}

.beatport-dj-card:hover .beatport-dj-name {
    color: rgba(147, 51, 234, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
    transform: translateY(-3px);
}

.beatport-dj-card:hover .beatport-dj-creator {
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.beatport-dj-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    z-index: 3;
    text-align: center;
}

.beatport-dj-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.beatport-dj-creator {
    display: none;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* DJ Loading State */
.beatport-dj-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background: linear-gradient(135deg,
            rgba(147, 51, 234, 0.1),
            rgba(16, 16, 16, 0.8));
    border-radius: 16px;
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.beatport-dj-loading-content {
    text-align: center;
    color: #ffffff;
}

.beatport-dj-loading-content h3 {
    font-size: 24px;
    margin-bottom: 8px;
    color: rgba(147, 51, 234, 0.9);
}

.beatport-dj-loading-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* DJ Navigation */
.beatport-dj-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 100;
}

.beatport-dj-nav-btn {
    background: linear-gradient(135deg,
            rgba(147, 51, 234, 0.9),
            rgba(79, 70, 229, 0.8));
    border: none;
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beatport-dj-nav-btn:hover {
    background: linear-gradient(135deg,
            rgba(147, 51, 234, 1),
            rgba(79, 70, 229, 0.9));
    transform: scale(1.1);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(147, 51, 234, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.beatport-dj-nav-btn:active {
    transform: scale(0.95);
}

/* DJ Indicators */
.beatport-dj-slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.beatport-dj-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.beatport-dj-indicator.active {
    background: rgba(147, 51, 234, 0.9);
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(147, 51, 234, 0.5);
}

.beatport-dj-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* DJ Responsive Design */
/* Larger screens: make DJ cards taller */
@media (min-width: 1300px) {
    .beatport-dj-card {
        height: 330px;
        min-height: 330px;
        max-height: 330px;
    }

    .beatport-dj-grid {
        align-items: stretch;
        /* Allow cards to use full height instead of centering */
        min-height: 370px;
        /* Accommodate taller cards + padding + gap */
    }

    .beatport-dj-slider {
        min-height: 410px;
        /* Ensure slider container is tall enough */
    }

    .beatport-dj-slider-track {
        height: 410px;
        /* Increase to accommodate taller grid */
    }
}

@media (max-width: 1200px) {
    .beatport-dj-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .beatport-dj-card {
        height: 200px;
        min-height: 200px;
        max-height: 200px;
    }
}

@media (max-width: 900px) {
    .beatport-dj-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .beatport-dj-slider-container {
        padding: 20px;
    }

    .beatport-dj-card {
        height: 180px;
        min-height: 180px;
        max-height: 180px;
    }
}

@media (max-width: 600px) {
    .beatport-dj-section {
        padding: 0 15px;
    }

    .beatport-dj-title {
        font-size: 24px;
    }
}

/* ======================================
   BEATPORT NAVIGATION BUTTONS SECTION
   ====================================== */

.beatport-nav-buttons-section {
    padding: 30px 20px;
    margin-bottom: 20px;
}

.beatport-nav-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.beatport-nav-button {
    flex: 1;
    max-width: 280px;
    min-height: 70px;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.1) 0%,
            rgba(0, 224, 133, 0.08) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 20, 147, 0.4);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.beatport-nav-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(1, 255, 149, 0.1),
            transparent);
    transition: left 0.5s ease;
}

.beatport-nav-button:hover {
    background: linear-gradient(135deg,
            rgba(1, 255, 149, 0.2) 0%,
            rgba(0, 224, 133, 0.15) 100%);
    border-color: rgba(255, 20, 147, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);
    color: #01FF95;
}

.beatport-nav-button:hover::before {
    left: 100%;
}

.beatport-nav-button:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

.beatport-nav-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.beatport-nav-text {
    font-weight: 600;
    white-space: nowrap;
}

/* Icons for navigation buttons */
.genre-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}

.top100-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>');
}

.hype-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>');
}

.beatport-nav-button:hover .genre-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301FF95"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>');
}

.beatport-nav-button:hover .top100-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301FF95"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>');
}

.beatport-nav-button:hover .hype-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2301FF95"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>');
}

/* Responsive design for navigation buttons */
@media (max-width: 768px) {
    .beatport-nav-buttons-container {
        flex-direction: column;
        gap: 15px;
    }

    .beatport-nav-button {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .beatport-nav-buttons-section {
        padding: 20px 15px;
    }

    .beatport-nav-button {
        min-height: 60px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .beatport-nav-icon {
        width: 18px;
        height: 18px;
    }
}

/* ================================= */
/* GENRE BROWSER MODAL STYLES       */
/* ================================= */

.genre-browser-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 8888;
    animation: genreBrowserFadeIn 0.3s ease-out;
}

.genre-browser-modal-overlay.active {
    display: flex;
}

.genre-browser-modal-container {
    background: linear-gradient(135deg,
            rgba(15, 15, 15, 0.95) 0%,
            rgba(20, 20, 20, 0.95) 50%,
            rgba(25, 25, 25, 0.95) 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    width: 95vw;
    height: 90vh;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: genreBrowserSlideIn 0.4s ease-out;
}

.genre-browser-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg,
            rgba(30, 30, 30, 0.8) 0%,
            rgba(40, 40, 40, 0.8) 100%);
}

.genre-browser-modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.genre-browser-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.genre-browser-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.genre-browser-close-icon {
    font-size: 24px;
    color: #ffffff;
    font-weight: 300;
}

.genre-browser-modal-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.genre-browser-search-section {
    width: 100%;
}

.genre-browser-search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.genre-browser-search-input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    background: rgba(20, 20, 20, 0.8);
    color: #ffffff;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.genre-browser-search-input:focus {
    border-color: rgb(var(--accent-rgb));
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.genre-browser-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.genre-browser-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
}

.genre-browser-genres-section {
    flex: 1;
}

.genre-browser-genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.genre-browser-loading-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.genre-browser-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: genreBrowserSpin 1s linear infinite;
    margin-bottom: 20px;
}

.genre-browser-loading-text {
    font-size: 16px;
    text-align: center;
    margin: 0;
}

.genre-browser-card {
    background: linear-gradient(135deg,
            rgba(25, 25, 25, 0.9) 0%,
            rgba(35, 35, 35, 0.9) 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    height: 200px;
    backdrop-filter: blur(10px);
}

.genre-browser-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.genre-browser-card-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.genre-browser-card:hover .genre-browser-card-image {
    transform: scale(1.05);
}

.genre-browser-card-content {
    padding: 20px;
    position: relative;
    z-index: 2;
}

.genre-browser-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.genre-browser-card-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.genre-browser-card-fallback {
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.9) 0%,
            rgba(45, 45, 45, 0.9) 100%);
}

.genre-browser-card-fallback .genre-browser-card-image {
    background: linear-gradient(135deg,
            rgba(40, 40, 40, 1) 0%,
            rgba(60, 60, 60, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .genre-browser-modal-container {
        width: 95vw;
        height: 90vh;
        border-radius: 15px;
    }

    .genre-browser-modal-header {
        padding: 20px;
    }

    .genre-browser-modal-title {
        font-size: 22px;
    }

    .genre-browser-modal-content {
        padding: 20px;
        gap: 20px;
    }

    .genre-browser-genres-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }

    .genre-browser-card {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .genre-browser-genres-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .genre-browser-card {
        height: 160px;
    }
}

/* Animations */
@keyframes genreBrowserFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes genreBrowserSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes genreBrowserSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* === GENRE PAGE VIEW STYLES === */

.genre-page-content {
    display: none;
    width: 100%;
    height: 100%;
    animation: genreBrowserSlideIn 0.3s ease;
}

.genre-page-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.genre-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.8) 0%,
            rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.genre-back-button:hover {
    background: linear-gradient(135deg,
            rgba(40, 40, 40, 0.9) 0%,
            rgba(30, 30, 30, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateX(-2px);
}

.back-icon {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.genre-back-button:hover .back-icon {
    transform: translateX(-2px);
}

.genre-page-title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.genre-hero-slider-container {
    width: 100%;
    height: fit-content;
    overflow-y: auto;
}

.genre-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.genre-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: genreBrowserSpin 1s linear infinite;
    margin-bottom: 15px;
}

.genre-loading-text {
    font-size: 16px;
    margin: 0;
    text-align: center;
}

.genre-error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.genre-error-text {
    font-size: 18px;
    color: #ff6b6b;
    margin: 0 0 10px 0;
}

.genre-error-details {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 20px 0;
}

.genre-retry-button {
    padding: 10px 20px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.8) 0%,
            rgba(20, 20, 20, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.genre-retry-button:hover {
    background: linear-gradient(135deg,
            rgba(40, 40, 40, 0.9) 0%,
            rgba(30, 30, 30, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.25);
}

/* === GENRE NAV BUTTONS SECTION === */

.genre-nav-buttons-section {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.genre-nav-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* The button styles are already defined in the main .beatport-nav-button class */
/* This ensures the genre page button looks identical to the main page buttons */

/* Responsive adjustments for genre page */
@media (max-width: 768px) {
    .genre-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .genre-page-title {
        font-size: 20px;
    }

    .genre-nav-buttons-section {
        margin-top: 20px;
        padding: 15px 0;
    }
}


/* ============================================================================
   DISCOVERY FIX MODAL STYLING
   ============================================================================ */

/* Fix modal overlay - nested inside discovery modal */
.discovery-fix-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Above parent modal content */
    transition: opacity 0.2s ease;
}

.discovery-fix-modal-overlay.hidden {
    display: none;
}

.discovery-fix-modal {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98) 0%, rgba(12, 12, 12, 0.99) 100%);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 0;
    width: 700px;
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(255, 255, 255, 0.1) inset;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.discovery-fix-modal-header {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.discovery-fix-modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.discovery-fix-modal-content {
    padding: 24px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.discovery-fix-modal-content .search-results-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.source-track-info {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.source-track-info h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.source-track-display {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.source-field {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.source-field label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    min-width: 60px;
}

.source-field span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.search-inputs-section {
    margin-bottom: 24px;
    flex-shrink: 0;
}

.search-inputs-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-input-group {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.fix-modal-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.fix-modal-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.fix-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.search-btn {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9) 0%, rgba(var(--accent-rgb), 0.7) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.search-btn:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 1) 0%, rgba(var(--accent-rgb), 0.8) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.search-btn:active {
    transform: translateY(0);
}

.search-results-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fix-modal-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.fix-result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fix-result-card:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateX(4px);
}

.fix-result-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fix-result-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.fix-result-artist {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.fix-result-album {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.fix-result-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.discovery-fix-modal-footer {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.modal-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* Action buttons in discovery table */
.discovery-actions {
    text-align: center;
}

.fix-match-btn,
.rematch-btn {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(var(--accent-rgb), 0.95);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.fix-match-btn:hover,
.rematch-btn:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3) 0%, rgba(var(--accent-rgb), 0.2) 100%);
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
}

.fix-match-btn:active,
.rematch-btn:active {
    transform: translateY(0);
}

.rematch-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    font-size: 16px;
}

.rematch-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

/* Loading and error states */
.fix-modal-results .loading,
.fix-modal-results .error-message,
.fix-modal-results .no-results {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.fix-modal-results .error-message {
    color: rgba(239, 68, 68, 0.9);
}

/* ===============================================
   Similar Artists Section - Artists Page
   =============================================== */

.similar-artists-section {
    margin-top: 60px;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.similar-artists-header {
    margin-bottom: 32px;
}

.similar-artists-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.5px;
}

.similar-artists-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-weight: 500;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Loading State */
.similar-artists-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: 500;
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Error State */
.similar-artists-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: rgba(239, 68, 68, 0.8);
    font-size: 15px;
    font-weight: 500;
}

.similar-artists-error .error-icon {
    font-size: 20px;
}

/* Bubbles Container - Horizontal Scroll */
.similar-artists-bubbles-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (5 * 24px)) / 6);
    /* Each item is 1/6th of container width */
    gap: 24px;
    overflow-x: auto;
    padding: 20px 0 30px 0;
    scroll-behavior: smooth;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.similar-artists-bubbles-container::-webkit-scrollbar {
    height: 8px;
}

.similar-artists-bubbles-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.similar-artists-bubbles-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.similar-artists-bubbles-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Similar Artist Card — full-bleed image, library-card style */
.similar-artist-bubble {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(18, 18, 18, 1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    aspect-ratio: 0.8;

    /* Progressive load animation */
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.similar-artist-bubble:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(var(--accent-rgb), 0.12);
}

/* Gradient overlay for text readability */
.similar-artist-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        transparent 65%);
    pointer-events: none;
    z-index: 1;
}

/* Image fills the card */
.similar-artist-bubble-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    transition: transform 0.3s ease;
}

.similar-artist-bubble:hover .similar-artist-bubble-image {
    transform: scale(1.06);
}

.similar-artist-bubble-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.similar-artist-bubble-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.2);
}

/* Name pinned at bottom over gradient */
.similar-artist-bubble-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    z-index: 2;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    width: auto;

    /* Truncate long names */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.similar-artist-bubble:hover .similar-artist-bubble-name {
    color: rgb(var(--accent-rgb));
}

/* Genres (Optional - hidden by default for cleaner look) */
.similar-artist-bubble-genres {
    display: none; /* Hidden in card layout — name + image is enough */
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    width: 100%;

    /* Truncate */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .similar-artists-bubbles-container {
        grid-auto-columns: calc((100% - (4 * 24px)) / 5);
    }
}

@media (max-width: 1200px) {
    .similar-artists-bubbles-container {
        grid-auto-columns: calc((100% - (3 * 24px)) / 4);
    }
}

@media (max-width: 900px) {
    .similar-artists-bubbles-container {
        grid-auto-columns: calc((100% - (2 * 24px)) / 3);
    }
}

@media (max-width: 768px) {
    .similar-artists-section {
        margin-top: 40px;
        padding: 30px 0;
    }

    .similar-artists-title {
        font-size: 24px;
    }

    .similar-artists-bubbles-container {
        grid-auto-columns: calc((100% - 16px) / 2);
        gap: 16px;
    }

    .similar-artist-bubble-name {
        font-size: 12px;
        padding: 10px;
    }
}

/* ====================================
   Tool Help Button & Modal
   ==================================== */

.tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.tool-card-header .tool-card-title {
    margin: 0;
}

.tool-help-button {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.tool-help-button:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-light-rgb), 0.2));
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.discover-page-help-button {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 32px;
    height: 32px;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.discover-page-help-button:hover {
    background-color: rgb(var(--accent-rgb));
    border-color: rgb(var(--accent-rgb));
    transform: scale(1.15);
}

.tool-help-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.tool-help-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-help-modal-content {
    background-color: #1a1a1a;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.tool-help-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #333;
}

.tool-help-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: #fff;
}

.tool-help-modal-close {
    background: none;
    border: none;
    color: #999;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    line-height: 1;
}

.tool-help-modal-close:hover {
    color: #fff;
}

.tool-help-modal-body {
    padding: 24px;
    color: #ccc;
    line-height: 1.6;
}

.tool-help-modal-body h4 {
    color: rgb(var(--accent-rgb));
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
}

.tool-help-modal-body h4:first-child {
    margin-top: 0;
}

.tool-help-modal-body ul {
    margin: 10px 0;
    padding-left: 20px;
}

.tool-help-modal-body li {
    margin: 8px 0;
}

.tool-help-modal-body p {
    margin: 10px 0;
}

.tool-help-modal-body code {
    background-color: #2a2a2a;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: rgb(var(--accent-rgb));
}

.tool-help-modal-body strong {
    color: #fff;
}

/* ====================================
   Retag Tool Modal Styles
   ==================================== */

.retag-modal-overlay,
.retag-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10001;
    align-items: center;
    justify-content: center;
}

.retag-search-overlay {
    z-index: 10002;
}

/* Main modal — fullscreen glassmorphic */
.retag-modal-container {
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 95vw;
    width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.retag-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.retag-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.retag-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.retag-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.retag-clear-all-btn {
    background: none;
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #ff6b6b;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.retag-clear-all-btn:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.5);
}

.retag-modal-close {
    background: none;
    border: none;
    color: #b3b3b3;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.retag-modal-close:hover {
    color: #fff;
}

.retag-modal-body {
    padding: 24px 32px;
    overflow-y: auto;
    flex: 1;
}

.retag-loading,
.retag-empty,
.retag-error {
    text-align: center;
    color: #b3b3b3;
    padding: 60px 0;
    font-size: 15px;
}

/* Batch action bar */
.retag-batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    margin: 0 32px 16px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 10px;
    animation: batchBarSlideIn 0.2s ease-out;
}

.retag-batch-count {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.retag-batch-remove-btn {
    background: none;
    border: 1px solid rgba(255, 59, 48, 0.4);
    color: #ff6b6b;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.retag-batch-remove-btn:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: rgba(255, 59, 48, 0.6);
}

/* Artist sections */
.retag-artist-section {
    margin-bottom: 28px;
}

.retag-artist-name {
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--accent-light-rgb));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

/* Group cards */
.retag-group-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.retag-group-card:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.retag-group-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

/* Group checkbox */
.retag-group-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.retag-group-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.retag-group-checkbox .retag-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.retag-group-checkbox:hover .retag-checkbox-custom {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.retag-group-checkbox input:checked+.retag-checkbox-custom {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgb(var(--accent-rgb));
}

.retag-group-checkbox input:checked+.retag-checkbox-custom::after {
    content: '\2713';
    color: rgb(var(--accent-rgb));
    font-size: 13px;
    font-weight: 700;
}

.retag-group-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.retag-group-image-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.retag-group-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.retag-group-album {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.retag-group-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.retag-group-btn {
    background: rgb(var(--accent-rgb));
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.retag-group-btn:hover {
    background: rgb(var(--accent-light-rgb));
}

/* Delete button — shows × or inline confirm */
.retag-group-delete-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.retag-group-delete-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.15s ease;
}

.retag-group-delete-btn:hover {
    color: #ff4444;
}

/* Inline confirmation */
.retag-confirm-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    animation: batchBarSlideIn 0.15s ease-out;
}

.retag-confirm-inline span {
    white-space: nowrap;
}

.retag-confirm-yes {
    background: rgba(255, 59, 48, 0.2);
    border: 1px solid rgba(255, 59, 48, 0.4);
    color: #ff6b6b;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.retag-confirm-yes:hover {
    background: rgba(255, 59, 48, 0.4);
}

.retag-confirm-no {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.retag-confirm-no:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Track list */
.retag-group-tracks {
    padding: 4px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.retag-track-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

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

.retag-track-number {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.retag-track-title {
    flex: 1;
    color: #ddd;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.retag-track-format {
    color: rgb(var(--accent-rgb));
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.retag-tracks-loading,
.retag-tracks-empty {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    padding: 10px 0;
    text-align: center;
    margin: 0;
}

/* Search sub-modal — glassmorphic */
.retag-search-container {
    background: linear-gradient(135deg,
            rgba(20, 20, 20, 0.95) 0%,
            rgba(12, 12, 12, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 650px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(var(--accent-rgb), 0.08);
    overflow: hidden;
}

.retag-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.retag-search-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.retag-search-close {
    background: none;
    border: none;
    color: #b3b3b3;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.retag-search-close:hover {
    color: #fff;
}

.retag-search-input-section {
    padding: 20px 24px 12px;
    flex-shrink: 0;
}

.retag-search-input-section input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.retag-search-input-section input:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.retag-search-results {
    padding: 8px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

.retag-search-loading,
.retag-no-results,
.retag-search-error {
    text-align: center;
    color: #b3b3b3;
    padding: 24px 0;
    font-size: 14px;
}

.retag-search-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: 1px solid transparent;
}

.retag-search-result:hover {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.15);
}

/* Retag search result confirm state */
.retag-search-result.retag-confirming {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.25);
    cursor: default;
    flex-wrap: wrap;
}

.retag-result-confirm-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
}

.retag-result-confirm-bar span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.retag-result-confirm-actions {
    display: flex;
    gap: 8px;
}

.retag-result-confirm-yes {
    background: rgb(var(--accent-rgb));
    border: none;
    color: #fff;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.retag-result-confirm-yes:hover {
    background: rgb(var(--accent-light-rgb));
}

.retag-result-confirm-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.retag-result-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.retag-result-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.retag-result-image-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.retag-result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.retag-result-name {
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.retag-result-artist {
    font-size: 13px;
    color: #b3b3b3;
}

.retag-result-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

/* ====================================
   Discover Page Styles
   ==================================== */

.discover-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* Hero Section */
.discover-hero {
    position: relative;
    width: 100%;
    height: 550px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.discover-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(var(--accent-rgb), 0.4) 0%, rgba(var(--accent-rgb), 0.1) 55%, transparent 100%),
        linear-gradient(165deg, #16161c 0%, #0a0a0e 100%);
    background-size: cover;
    background-position: center;
    filter: blur(0px);
    /* While the hero payload is still on its way the fallback BREATHES —
       a dead-static dark panel reads as broken during a slow first load.
       Once the artist image lands (inline background-image) it covers this. */
    animation: discoverHeroBreathe 3.2s ease-in-out infinite;
}

@keyframes discoverHeroBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* Billboard treatment: the weight sits at the FOOT of the frame, where the
   text lives — Apple Music's editorial gradient, not a flat side-wash. */
.discover-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.88) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, transparent 60%);
}

.discover-hero-content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 48px 56px;
    gap: 40px;
}

.discover-hero-info {
    flex: 1;
    max-width: 600px;
    z-index: 1;
}

/* An EYEBROW, not a boxed pill — the billboard's quiet editorial caption. */
.discover-hero-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    color: rgb(var(--accent-light-rgb, var(--accent-rgb)));
    margin-bottom: 14px;
    text-transform: uppercase;
    display: inline-block;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.discover-hero-title {
    font-size: clamp(42px, 5vw, 76px);
    font-weight: 900;
    color: #fff;
    margin: 0 0 18px 0;
    line-height: 1.02;
    text-shadow: 0 6px 28px rgba(0, 0, 0, 0.65);
    letter-spacing: -0.03em;
}

.discover-hero-subtitle {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.7;
    font-weight: 400;
}

/* The ownership meter — the one line no streaming service can render. */
.hero-owned {
    padding: 8px 16px; border-radius: 20px; font-size: 13.5px; font-weight: 700;
    background: rgba(52, 211, 153, 0.16); border: 1px solid rgba(52, 211, 153, 0.35);
    color: #6ee7b7;
}
.hero-owned--none {
    background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
}

/* Hero Meta Section (Popularity & Genres) */
.discover-hero-meta {
    margin-bottom: 28px;
}

.discover-hero-meta-content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-popularity {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.hero-popularity.high {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55));
    color: #fff;
}

.hero-popularity.medium {
    background: rgba(255, 255, 255, 0.14);
}

.hero-popularity.low {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.hero-popularity .meta-icon {
    font-size: 16px;
}

.hero-popularity .meta-value {
    font-weight: 700;
}

.hero-popularity .meta-label {
    opacity: 0.8;
    font-size: 12px;
}

.hero-genres {
    gap: 10px;
}

.genre-tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.genre-tag:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.discover-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.discover-hero-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.discover-hero-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.discover-hero-button:hover::before {
    width: 300px;
    height: 300px;
}

/* Discography button - prominent and large */
.discover-hero-button.secondary {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 18px 48px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    gap: 12px !important;
}

.discover-hero-button.secondary .button-icon {
    font-size: 20px !important;
}

.discover-hero-button.secondary .button-text {
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* Watchlist button - smaller and subtle */
.discover-hero-button.primary.watchlist-toggle-btn {
    background-color: rgb(var(--accent-rgb));
    color: #fff;
    padding: 9px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px !important;
}

.discover-hero-button.primary.watchlist-toggle-btn .watchlist-icon {
    font-size: 13px !important;
}

.discover-hero-button.primary.watchlist-toggle-btn .watchlist-text {
    flex: none !important;
    text-align: left !important;
    font-size: 13px !important;
}

.discover-hero-button.primary.watchlist-toggle-btn:hover {
    background-color: rgb(var(--accent-light-rgb));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.4);
}

.discover-hero-button.primary.watchlist-toggle-btn:active {
    transform: translateY(0);
}

.discover-hero-button.secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.15);
}

.discover-hero-button.secondary:active {
    transform: translateY(0);
}

.discover-hero-button.primary.watchlist-toggle-btn.watching {
    background-color: rgba(var(--accent-rgb), 0.2) !important;
    border: 2px solid rgba(var(--accent-rgb), 0.5) !important;
    color: rgb(var(--accent-rgb)) !important;
}

.discover-hero-button.primary.watchlist-toggle-btn.watching:hover {
    background-color: rgba(var(--accent-rgb), 0.3) !important;
    border-color: rgba(var(--accent-rgb), 0.7) !important;
}

.discover-hero-image {
    flex-shrink: 0;
    width: 360px;
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    border: 3px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.discover-hero-image:hover {
    transform: scale(1.02);
}

.hero-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    background:
        radial-gradient(100% 140% at 20% 0%, rgba(var(--accent-rgb), 0.35), transparent 70%),
        linear-gradient(165deg, #1c1c22 0%, #101014 100%);
}

.discover-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Navigation Arrows - Hidden by default, show on hover */
.discover-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.discover-hero:hover .discover-hero-nav {
    opacity: 1;
    pointer-events: auto;
}

.discover-hero-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.discover-hero-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.discover-hero-nav-prev {
    left: 20px;
}

.discover-hero-nav-next {
    right: 20px;
}

/* Hero Slideshow Indicators */
.discover-hero-indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-indicator:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.hero-indicator.active {
    background: rgb(var(--accent-rgb));
    width: 24px;
    border-radius: 4px;
}

/* Hero Bottom Action Buttons */
.discover-hero-bottom-actions {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

.discover-hero-watch-all,
.discover-hero-view-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.discover-hero-watch-all:hover,
.discover-hero-view-all:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.discover-hero-watch-all .watch-all-icon {
    font-size: 14px;
}

.discover-hero-watch-all.all-watched {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-rgb));
    cursor: default;
}

.discover-hero-watch-all:disabled:not(.all-watched) {
    opacity: 0.6;
    cursor: wait;
}

/* Recommended Artists Modal */
.recommended-modal {
    max-width: 95vw;
    width: 95vw;
    max-height: 95vh;
}

.recommended-modal .playlist-modal-body {
    overflow-y: auto;
    padding: 0;
    min-height: 0;
}

.recommended-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 28px;
}

.recommended-artist-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Recommended card placed inside a horizontal Discover carousel */
.recommended-card--carousel {
    flex: 0 0 160px;
    width: 160px;
}

.recommended-artist-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.recommended-card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.05));
}

.recommended-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommended-card-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    opacity: 0.3;
}

.recommended-card-info {
    padding: 12px 14px;
}

.recommended-card-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommended-card-similarity {
    display: block;
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.8);
    margin-bottom: 6px;
}

.recommended-card-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recommended-card-genre {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
}

.recommended-card-watchlist-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.recommended-artist-card:hover .recommended-card-watchlist-btn {
    opacity: 1;
}

.recommended-card-watchlist-btn.watching {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: rgb(var(--accent-rgb));
    opacity: 1;
}

.recommended-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px 0;
    margin-bottom: 12px;
}

.recommended-search-container {
    flex: 1;
}

.recommended-add-all-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.recommended-add-all-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.recommended-add-all-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.recommended-add-all-btn.all-added {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
    opacity: 0.7;
    cursor: default;
}

.recommended-search-input {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.recommended-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.recommended-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.recommended-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
}

.recommended-loading {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
}

/* Discover Sections */
.discover-section {
    margin-bottom: 50px;
    padding: 0 20px;
    /* Skip layout/paint of off-screen shelves so entering Discover and scrolling
       stays cheap. 'auto' lets the browser remember real size after first render. */
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
}

.discover-section-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

.discover-section-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
}

.discover-section-subtitle {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Because You Listen To */
.bylt-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bylt-artist-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bylt-section {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 16px;
}

.bylt-section .discover-section-subtitle {
    font-size: 12px;
    color: rgba(var(--accent-rgb), 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 2px;
}

.bylt-section .discover-section-title {
    font-size: 22px;
}

.discover-section-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.discover-section-actions .action-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.discover-section-actions .action-button .button-icon {
    font-size: 16px;
}

.discover-section-actions .action-button.primary {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.65));
    color: #fff;
}

.discover-section-actions .action-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}

.discover-section-actions .action-button.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.discover-section-actions .action-button.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Sync Status Display */
.discover-sync-status {
    margin: 16px 20px 20px 20px;
    padding: 16px 20px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 10px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sync-status-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sync-status-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.sync-icon {
    display: inline-block;
    font-size: 18px;
    animation: spin 1s linear infinite;
    transform-origin: center center;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sync-status-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.sync-stat {
    font-weight: 600;
}

.sync-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

/* Carousel Styles */
.discover-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-behavior: smooth;
}

.discover-carousel::-webkit-scrollbar {
    height: 8px;
}

.discover-carousel::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 4px;
}

.discover-carousel::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.discover-carousel::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Playlist Grid */
.discover-playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Loading State */
.discover-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.discover-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #333;
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

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

.discover-loading p {
    margin: 0;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .discover-hero {
        height: auto;
        min-height: 400px;
    }

    .discover-hero-content {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .discover-hero-title {
        font-size: 36px;
    }

    .discover-hero-image {
        width: 240px;
        height: 240px;
    }

    .discover-hero-actions {
        justify-content: center;
    }

    .discover-section {
        padding: 0 16px;
    }
}

/* Discover Cards */
.discover-card {
    flex-shrink: 0;
    width: 200px;
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.discover-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.discover-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discover-card-info {
    padding: 12px;
}

.discover-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-card-subtitle {
    font-size: 12px;
    color: #999;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-card-meta {
    font-size: 11px;
    color: #666;
    margin: 0;
}

/* ── Your Artists Cards ── */
.ya-card {
    flex-shrink: 0; width: 190px; aspect-ratio: 0.85;
    border-radius: 14px; overflow: hidden; cursor: pointer;
    position: relative; background: #111;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
}
.ya-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb), 0.12);
}
.ya-card-img { position: absolute; inset: 0; }
.ya-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ya-card-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: rgba(255,255,255,0.08); background: linear-gradient(135deg, rgba(var(--accent-rgb),0.1), rgba(255,255,255,0.02));
}
.ya-card-gradient {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 65%);
}
.ya-card-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; z-index: 2;
}
.ya-card-name {
    font-size: 13px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Metadata source badges (SP, IT, Dz, DC) */
.ya-card-badges {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    display: flex; gap: 3px;
}
.ya-badge {
    width: 20px; height: 20px; border-radius: 5px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.7);
}
.ya-badge img { width: 12px; height: 12px; object-fit: contain; }

/* Origin service dots (where artist was liked/followed) */
.ya-card-info-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.ya-origin-dots { display: flex; gap: 3px; }
.ya-origin-dot {
    width: 6px; height: 6px; border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12);
}

/* Artist name clickable */
.ya-card-name {
    cursor: pointer; transition: color 0.15s;
}
.ya-card-name:hover { color: var(--accent); }

/* ── Your Mixes (Spotify-style playlist cards, #discover redesign) ───────────
   Each mix is ONE card: a 2x2 mosaic cover from its top tracks + name below, with
   a hover play button. Click opens the track list in a modal. Replaces the old
   full-width compact-track tables. */
.discover-mixes-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 196px;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.35) rgba(255, 255, 255, 0.04);
}
.discover-mixes-grid > * { scroll-snap-align: start; }
.discover-mixes-grid::-webkit-scrollbar { height: 6px; }
.discover-mixes-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.discover-mixes-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.discover-mixes-grid::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.45); }
.discover-mix-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.discover-mix-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--accent-rgb),0.25);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb),0.12);
}
.mix-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.mix-card-tile {
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}
.mix-card-play {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; padding-left: 2px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s;
    z-index: 2;
}
.discover-mix-card:hover .mix-card-play {
    opacity: 1; transform: translateY(0);
}
.mix-card-name {
    font-size: 14px; font-weight: 700; color: #fff;
    margin-top: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mix-card-meta {
    font-size: 12px; color: rgba(255,255,255,0.5);
    margin-top: 3px;
}
/* Solid/gradient cover for mixes with no per-track art (e.g. decades). */
.mix-card-cover--solid {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0.10));
    display: flex; align-items: center; justify-content: center;
}
.mix-card-decade {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.mix-card-decade-icon { font-size: 34px; line-height: 1; }
.mix-card-decade-label { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; }
/* The mix modal — opened from a mix card; holds the track list + per-mix actions. */
.mix-modal {
    background: #14141c; border-radius: 18px;
    width: 760px; max-width: 94vw; max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.08);
}
.mix-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 24px; gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mix-modal-subtitle { font-size: 12px; color: #999; }
.mix-modal-title { font-size: 24px; font-weight: 700; color: #fff; margin: 4px 0; }
.mix-modal-meta { font-size: 12px; color: rgba(255,255,255,0.5); }
.mix-modal-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.mix-modal-close {
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 16px; cursor: pointer; padding: 6px; line-height: 1;
}
.mix-modal-close:hover { color: #fff; }
.mix-modal-body { overflow-y: auto; padding: 16px 24px 24px; }

/* ── Unified Discover card grid (#discover redesign) ─────────────────────────
   One responsive wrapping grid (fills the section width, wraps to rows — no
   horizontal scroll) holding the same .ya-card the Your Artists section uses, so
   every album/artist section reads as one design. */
/* Spotify-style rails: each shelf is ONE row that scrolls sideways, so the
   page reads as a stack of glanceable shelves instead of walls of cards. */
.discover-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 172px;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.35) rgba(255, 255, 255, 0.04);
}
.discover-grid > * { scroll-snap-align: start; }
#your-albums-section .discover-grid {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
}
.discover-grid::-webkit-scrollbar { height: 6px; }
.discover-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 3px; }
.discover-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.discover-grid::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.45); }
.discover-grid .ya-card { width: 100%; }
/* Two same-card sections side by side (#discover redesign) — halves the scroll. The inner
   .discover-grid auto-fits fewer columns at half width, so cards stay full-size. Collapses to a
   single column on narrower screens. min-width:0 lets each column shrink instead of overflowing. */
.discover-row-2col {
    display: grid;
    /* One column on purpose: the 2-col packing halved a page of TALL grids;
       rails are short, and two cramped side-by-side rails read worse than a
       clean full-width stack. The markup keeps emitting pairs — this is now
       purely a stacking container. */
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}
.discover-row-2col > .discover-section { min-width: 0; }
@media (max-width: 1100px) {
    .discover-row-2col { grid-template-columns: 1fr; gap: 0; }
}
/* Albums are square, so don't crop the cover with the artist card's 0.85 portrait ratio. */
.discover-grid .discover-album-card.ya-card { aspect-ratio: 1; }
/* Genre cards: no cover art — square gradient tile with the genre emoji centered. */
.discover-grid .discover-genre-card.ya-card { aspect-ratio: 1; }
.discover-genre-card .genre-card-art {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0.07));
}
.discover-genre-card .genre-icon-large { font-size: 46px; line-height: 1; }
/* Secondary line under the title (album → artist). */
.ya-card-sub {
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,0.72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin-top: 2px;
}
/* "Why this rec" chips on recommendation cards (the explainability flex). */
.ya-card-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ya-why-chip {
    font-size: 9.5px; font-weight: 700; line-height: 1.4;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(0,0,0,0.55); color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ya-why-chip.ya-why-genre { background: rgba(29,185,84,0.6); border-color: rgba(29,185,84,0.45); }
.ya-why-chip.ya-why-obscure { background: rgba(124,92,224,0.6); border-color: rgba(150,118,240,0.45); }
.ya-why-chip.ya-why-consensus { background: rgba(0,0,0,0.62); }
.ya-why-chip.ya-why-explore { background: rgba(255,152,0,0.55); border-color: rgba(255,167,38,0.45); }
/* Owned / missing indicator on album cards (corner badge). */
.discover-album-badge {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.discover-album-badge.owned { background: #1DB954; color: #000; }
.discover-album-badge.missing {
    background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.2);
}
/* Show all / Show less toggle under a clamped discover-grid. */
.discover-show-all {
    margin: 14px auto 0;
    display: block;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 13px; font-weight: 600;
    padding: 8px 20px; border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.discover-show-all:hover {
    background: rgba(var(--accent-rgb),0.15);
    border-color: rgba(var(--accent-rgb),0.4);
    color: #fff;
}

/* ── Adventurousness — living wave dial (Discover page) ──────────────────────
   A draggable orb rides an animated line that waves calmer + greener at the left (safe)
   and wilder + redder at the right (obscure). The path + colours are drawn each frame in
   JS (rAF). Syncs with Settings → Discovery. */
.adv-wave {
    position: relative;
    margin: 0 0 28px;
    padding: 18px 26px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 10px 34px rgba(0,0,0,0.30);
    overflow: hidden;  /* contain the colour aura wash */
}
.adv-wave-head { display: flex; flex-direction: column; gap: 1px; position: relative; z-index: 2; }
.adv-wave-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: rgba(255,255,255,0.38); }
.adv-wave-state { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.15; transition: color 0.25s; }
.adv-wave-track {
    position: relative; height: 104px; margin: 6px 0 2px;
    cursor: grab; touch-action: none;
}
.adv-wave-track:active { cursor: grabbing; }
.adv-wave-aura {
    position: absolute; top: 50%; left: 30%;
    width: 300px; height: 200px; transform: translate(-50%, -50%);
    pointer-events: none; filter: blur(24px); z-index: 0;   /* heavier blur = soft glow, no hard clipped edge */
    will-change: left, background;
}
.adv-wave-svg { width: 100%; height: 100%; display: block; overflow: visible; position: relative; z-index: 1; }
.adv-wave-orb {
    position: absolute; top: 50%; left: 30%; z-index: 2;
    width: 22px; height: 22px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #1DB954; color: #1DB954;
    box-shadow: 0 0 9px 0 #1DB954, inset 0 0 0 2px rgba(255,255,255,0.5);
    pointer-events: none;  /* the track captures the pointer; the orb is purely visual */
    will-change: left, top;
}
.adv-wave-orb::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid currentColor; opacity: 0.4;
    animation: adv-orb-pulse 2.8s ease-out infinite;
}
@keyframes adv-orb-pulse {
    0% { transform: scale(0.75); opacity: 0.4; }
    100% { transform: scale(1.5); opacity: 0; }
}
.adv-wave-ends {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.35);
    position: relative; z-index: 2;
}

/* Watchlist toggle on recommended-artist .ya-cards — corner pill, appears on hover,
   stays lit when already watching. Keeps the .recommended-card-watchlist-btn hook. */
.recommended-artist-card .recommended-card-watchlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    background: rgba(0,0,0,0.72); color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 14px; padding: 4px 10px;
    font-size: 10px; font-weight: 600; cursor: pointer;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s, background 0.2s, border-color 0.2s;
}
.recommended-artist-card:hover .recommended-card-watchlist-btn { opacity: 1; transform: none; }
.recommended-artist-card .recommended-card-watchlist-btn:hover {
    background: var(--accent); color: #000; border-color: transparent;
}
.recommended-artist-card .recommended-card-watchlist-btn.watching {
    opacity: 1; transform: none;
    background: var(--accent); color: #000; border-color: transparent;
}

/* ── Artist Info Modal ── */
.ya-info-modal {
    background: #141420; border-radius: 18px;
    width: 480px; max-width: 95vw; max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
    overflow: hidden; position: relative;
}
.ya-info-modal > .watch-all-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    width: 32px; height: 32px;
}
/* Hero with blurred background image */
.ya-info-hero {
    position: relative; overflow: hidden; min-height: 180px;
    display: flex; align-items: flex-end;
}
.ya-info-hero-bg {
    position: absolute; inset: -20px; z-index: 0;
    background-size: cover; background-position: center;
    filter: blur(20px) brightness(0.4) saturate(1.3);
}
.ya-info-hero-content {
    position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 18px;
    padding: 24px; width: 100%;
    background: linear-gradient(0deg, rgba(20,20,32,1) 0%, rgba(20,20,32,0.6) 60%, transparent 100%);
}
.ya-info-hero-img {
    width: 110px; height: 110px; border-radius: 14px; overflow: hidden;
    flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.1);
}
.ya-info-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.ya-info-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.ya-info-hero-text { flex: 1; min-width: 0; }
.ya-info-name { font-size: 22px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.3px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.ya-info-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.ya-info-badge {
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}
.ya-info-badge img { width: 15px; height: 15px; object-fit: contain; }
.ya-info-badge:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); }
.ya-info-origin { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 6px; }
.ya-info-body { flex: 1; overflow-y: auto; padding: 20px 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.ya-info-section { margin-bottom: 16px; }
.ya-info-section-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
.ya-info-genres { display: flex; gap: 6px; flex-wrap: wrap; }
.ya-info-genre {
    padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 500;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5); text-transform: capitalize;
}
.ya-info-stats { display: flex; gap: 28px; padding: 16px 0; }
.ya-info-stat { display: flex; flex-direction: column; gap: 2px; }
.ya-info-stat-value { font-size: 22px; font-weight: 800; color: rgba(255,255,255,0.9); }
.ya-info-stat-label { font-size: 10px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
.ya-info-bio { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.7; }
.ya-info-empty { text-align: center; padding: 30px 0; color: rgba(255,255,255,0.2); font-size: 13px; }

/* Related artists list in info modal */
.ya-info-related { display: flex; flex-direction: column; gap: 2px; }
.ya-info-related-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.ya-info-related-item:hover { background: rgba(255,255,255,0.04); }
.ya-info-related-img {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    flex-shrink: 0; background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
}
.ya-info-related-img img { width: 100%; height: 100%; object-fit: cover; }
.ya-info-related-img span { font-size: 14px; color: rgba(255,255,255,0.1); }
.ya-info-related-text { flex: 1; min-width: 0; }
.ya-info-related-name {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ya-info-related-badge { font-size: 9px; font-weight: 700; color: #fbbf24; margin-top: 1px; }
.ya-info-related-more {
    text-align: center; padding: 6px; font-size: 11px;
    color: rgba(255,255,255,0.25);
}
.ya-info-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: center; gap: 10px; }

/* ── Artist Map Hub ── */
.artmap-hub {
    position: relative; border-radius: 16px; overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.06);
}
/* The two viz hubs share ONE row under the hero instead of stacking as two
   full-width billboards — the first shelf lands a screen earlier. */
.discover-hub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    margin: 0 0 28px;
    padding: 0 20px;
}
.discover-hub-row .artmap-hub { margin-bottom: 0; }
@media (max-width: 1150px) {
    .discover-hub-row { grid-template-columns: 1fr; }
}
.artmap-hub-bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 30%, #0a1628 60%, #0d0d1a 100%);
}
.artmap-hub-bg::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(138,43,226,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(59,130,246,0.06) 0%, transparent 60%);
}
/* Animated dot grid overlay */
.artmap-hub-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background-image: radial-gradient(rgba(138,43,226,0.15) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.3;
    animation: artmap-dots-drift 20s linear infinite;
}
@keyframes artmap-dots-drift {
    0% { background-position: 0 0; }
    100% { background-position: 24px 48px; }
}
.artmap-hub-content {
    position: relative; z-index: 1; padding: 28px 32px;
}
.artmap-hub-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.artmap-hub-icon { color: rgba(138,43,226,0.7); }
.artmap-hub-title {
    font-size: 20px; font-weight: 800; color: #fff; margin: 0;
    letter-spacing: -0.3px;
}
.artmap-hub-subtitle {
    font-size: 13px; color: rgba(255,255,255,0.35); margin: 2px 0 0;
}
.artmap-hub-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 768px) {
    .artmap-hub-cards { grid-template-columns: 1fr; }
}
.artmap-hub-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.artmap-hub-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(138,43,226,0.06) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.25s;
}
.artmap-hub-card:hover {
    border-color: rgba(138,43,226,0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.08);
}
.artmap-hub-card:hover::before { opacity: 1; }
.artmap-hub-card-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: rgba(138,43,226,0.1); border: 1px solid rgba(138,43,226,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: rgba(138,43,226,0.7);
    transition: all 0.25s;
}
.artmap-hub-card:hover .artmap-hub-card-icon {
    background: rgba(138,43,226,0.15); color: rgba(138,43,226,0.9);
    transform: scale(1.05);
}
.artmap-hub-card-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.artmap-hub-card-text h3 {
    font-size: 15px; font-weight: 700; color: #fff; margin: 0;
}
.artmap-hub-card-text p {
    font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 0;
    line-height: 1.4;
}
.artmap-hub-card-arrow {
    color: rgba(255,255,255,0.15); flex-shrink: 0;
    transition: all 0.2s; position: relative; z-index: 1;
}
.artmap-hub-card:hover .artmap-hub-card-arrow {
    color: rgba(138,43,226,0.6); transform: translateX(4px);
}
.artist-map-container {
    position: fixed; inset: 0; z-index: 100;
    background: #0a0a14; flex-direction: column;
}
/* Artist Web "Group by" lens toggle (Genre | Communities) */
.artweb-lens-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px; padding: 2px;
}
.artweb-lens-btn {
    border: none; background: transparent; color: rgba(255,255,255,0.6);
    font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.artweb-lens-btn:hover { color: #fff; }
.artweb-lens-btn.active { background: rgba(255,255,255,0.14); color: #fff; }
/* Toolbar toggle buttons (Path, Filter) when engaged */
#artist-web-container .artmap-tool-btn.active {
    background: rgba(29,185,84,0.28); border-color: rgba(29,185,84,0.5); color: #fff;
}
.artist-map-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: linear-gradient(180deg, rgba(14,14,22,0.98) 0%, rgba(14,14,22,0.92) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(16px); z-index: 1; gap: 12px;
}

/* Left: back + brand + stats */
.artmap-nav-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.artmap-back {
    width: 34px; height: 34px; border-radius: 10px; border: none;
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.artmap-back:hover { background: rgba(255,255,255,0.08); color: #fff; }
.artmap-brand { display: flex; align-items: center; gap: 6px; }
.artmap-brand-icon { color: rgba(138,43,226,0.7); }
.artmap-brand-text { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.artmap-stats { font-size: 11px; color: rgba(255,255,255,0.25); font-weight: 500; }
/* Genre sidebar */
.artmap-genre-sidebar {
    width: 200px; flex-shrink: 0; flex-direction: column;
    background: rgba(14,14,22,0.98); border-right: 1px solid rgba(255,255,255,0.06);
    z-index: 2;
}
.artmap-genre-sidebar-header {
    padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3);
    text-transform: uppercase; letter-spacing: 0.8px;
}
.artmap-genre-sidebar-search {
    padding: 6px 10px; border-radius: 7px; font-size: 11px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: #fff; outline: none; width: 100%; box-sizing: border-box;
}
.artmap-genre-sidebar-search::placeholder { color: rgba(255,255,255,0.2); }
.artmap-genre-sidebar-search:focus { border-color: rgba(138,43,226,0.3); }
.artmap-genre-sidebar-list {
    flex: 1; overflow-y: auto; padding: 4px 6px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.artmap-genre-sidebar-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.12s; margin-bottom: 1px;
}
.artmap-genre-sidebar-item:hover { background: rgba(255,255,255,0.04); }
.artmap-genre-sidebar-item.active { background: rgba(138,43,226,0.12); }
.artmap-genre-sidebar-name {
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6);
    text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artmap-genre-sidebar-item.active .artmap-genre-sidebar-name { color: rgba(138,43,226,0.9); font-weight: 600; }
.artmap-genre-sidebar-count { font-size: 10px; color: rgba(255,255,255,0.15); flex-shrink: 0; }

.artmap-genre-change {
    color: rgba(138,43,226,0.7); cursor: pointer; font-weight: 600;
    transition: color 0.15s; text-transform: capitalize;
}
.artmap-genre-change:hover { color: rgba(138,43,226,1); }

/* Center: search */
.artmap-nav-center { flex: 1; display: flex; justify-content: center; max-width: 320px; margin: 0 auto; }
.artmap-search-wrap {
    position: relative; width: 100%;
}
.artmap-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.2); pointer-events: none;
}
.artmap-search-wrap input {
    width: 100%; padding: 7px 12px 7px 32px; border-radius: 10px; font-size: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    color: #fff; outline: none; transition: all 0.2s;
}
.artmap-search-wrap input::placeholder { color: rgba(255,255,255,0.2); }
.artmap-search-wrap input:focus { border-color: rgba(138,43,226,0.4); background: rgba(255,255,255,0.06); }

/* Right: tools */
.artmap-nav-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.artmap-tool-btn {
    height: 32px; padding: 0 10px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45); cursor: pointer;
    display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    transition: all 0.15s; white-space: nowrap;
}
.artmap-tool-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.1); }
.artmap-tool-btn span { display: none; }
@media (min-width: 900px) { .artmap-tool-btn span { display: inline; } }
.artmap-zoom-group { display: flex; gap: 2px; background: rgba(255,255,255,0.02); border-radius: 8px; padding: 1px; }
.artmap-tool-btn.artmap-zoom { border: none; background: none; width: 30px; padding: 0; justify-content: center; border-radius: 6px; }
.artmap-tool-btn.artmap-zoom:hover { background: rgba(255,255,255,0.06); }

/* Mobile: the toolbar wraps — back/title/stats + compact tools on row 1, the
   search drops to its own full-width row below so nothing gets crushed. */
@media (max-width: 760px) {
    .artist-map-toolbar { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
    /* Clear the fixed hamburger menu (top:16 left:16, 44px wide) so the map's
       back button isn't hidden under it. */
    .artmap-nav-left { flex: 1 1 auto; min-width: 0; gap: 6px; margin-left: 52px; }
    .artmap-brand-text { display: none; }
    .artmap-brand { flex: none; }
    .artmap-stats { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .artmap-nav-right { flex: 0 0 auto; gap: 3px; }
    .artmap-nav-center { order: 3; flex: 1 1 100%; max-width: none; margin: 0; }
    .artmap-search-wrap { width: 100%; }
}

/* Shortcuts modal */
.artmap-shortcuts-modal {
    background: rgba(20,20,32,0.95); border-radius: 14px; width: 340px; max-width: 90vw;
    backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.artmap-shortcuts-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.artmap-shortcuts-header h3 { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.artmap-shortcuts-grid { padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 6px; }
.artmap-shortcut { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.artmap-shortcut kbd {
    display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6); font-family: system-ui; min-width: 24px; text-align: center;
}
.artmap-shortcut span { font-size: 12px; color: rgba(255,255,255,0.4); }
.artist-map-search-results {
    display: none; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); z-index: 20;
    background: rgba(20,20,32,0.95); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; min-width: 220px; max-height: 300px; overflow-y: auto;
    backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.artist-map-search-item {
    padding: 10px 14px; font-size: 13px; color: rgba(255,255,255,0.7);
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.artist-map-search-item:last-child { border-bottom: none; }
.artist-map-search-item:hover { background: rgba(138,43,226,0.1); color: #fff; }
.artist-map-search-type { font-size: 11px; width: 16px; text-align: center; }
.artist-map-search-type.watchlist { color: #fbbf24; }
.artist-map-search-type.similar { color: rgba(255,255,255,0.3); }

/* Tooltip */
.artist-map-tooltip {
    display: none; position: fixed; z-index: 30; pointer-events: none;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(20,20,32,0.95); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    max-width: 280px;
}
.artmap-tip-row { display: flex; align-items: center; gap: 10px; }
.artmap-tip-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.04); }
.artmap-tip-img-fallback { display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255,255,255,0.1); }
.artmap-tip-info { min-width: 0; }
.artmap-tip-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artmap-tip-badge { display: inline-block; font-size: 9px; font-weight: 700; color: #fbbf24; margin-top: 2px; }
.artmap-tip-conn { font-size: 10px; font-weight: 600; color: rgba(138,43,226,0.85); margin-top: 3px; }
.artmap-tip-genres { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.artmap-tip-genres span {
    font-size: 9px; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
    text-transform: capitalize;
}
.artmap-content-row { display: flex; flex: 1; overflow: hidden; position: relative; }
/* Artist Web color legend — floating bottom-left over the canvas, decodes node colors per lens */
.artweb-legend {
    position: absolute; left: 14px; bottom: 14px; z-index: 6;
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px 12px; max-width: 220px;
    background: rgba(14, 13, 20, 0.72); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
    pointer-events: none;
}
.artweb-legend-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.72); }
.artweb-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 6px rgba(0,0,0,0.4); }
.artweb-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artweb-legend-count { margin-left: auto; color: rgba(255,255,255,0.38); font-variant-numeric: tabular-nums; }
/* Artist Web empty/error state card — centered, with an optional Retry action */
.artweb-state-card {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
}
.artweb-state-msg { color: rgba(255,255,255,0.5); font-size: 14px; max-width: 380px; line-height: 1.5; }
.artweb-state-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.85);
    padding: 8px 18px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.15s ease;
}
.artweb-state-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
/* Artist Web guide modal (extends the shared shortcuts-modal) */
.artweb-help-modal { max-width: 520px; }
.artweb-help-body { padding: 4px 4px 2px; }
.artweb-help-section { margin-bottom: 14px; }
.artweb-help-section h4 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }
.artweb-help-section p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.artweb-help-section b { color: rgba(255,255,255,0.95); font-weight: 600; }
#artist-map-canvas { flex: 1; display: block; cursor: grab; }
#artist-map-canvas:active { cursor: grabbing; }
#artist-map-loading {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,10,20,0.9); backdrop-filter: blur(8px);
}
.artist-map-loading-content {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.artist-map-loading-text {
    font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 500;
}

/* Context menu */
.artmap-context-menu {
    display: none; position: fixed; z-index: 30;
    background: rgba(20,20,32,0.95); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; min-width: 180px; overflow: hidden;
    backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.artmap-ctx-item {
    padding: 10px 14px; font-size: 13px; color: rgba(255,255,255,0.7);
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: background 0.1s;
}
.artmap-ctx-item:hover { background: rgba(138,43,226,0.12); color: #fff; }
.artmap-ctx-item span { font-size: 14px; width: 18px; text-align: center; }

/* Explorer search prompt */
.artmap-search-prompt-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%);
    border-radius: 16px; width: 400px; max-width: 90vw; padding: 28px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.artmap-search-prompt-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
    color: rgba(138,43,226,0.7);
}
.artmap-search-prompt-header h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.artmap-search-prompt-header p { font-size: 12px; color: rgba(255,255,255,0.35); margin: 3px 0 0; }
.artmap-explore-input {
    width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 15px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #fff; outline: none; margin-bottom: 18px; transition: border-color 0.2s;
    box-sizing: border-box;
}
.artmap-explore-input:focus { border-color: rgba(138,43,226,0.4); }
.artmap-explore-input::placeholder { color: rgba(255,255,255,0.2); }
.artmap-search-prompt-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Artist Explorer — search + select picker */
.artmap-explore-search-wrap { position: relative; }
.artmap-explore-search-wrap .artmap-explore-input { margin-bottom: 12px; }
.artmap-explore-spinner { position: absolute; right: 12px; top: 11px; pointer-events: none; }
.artmap-explore-spinner .watch-all-loading-spinner { width: 18px; height: 18px; border-width: 2px; }
.artmap-explore-results {
    max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 18px;
}
.artmap-explore-results:empty { margin-bottom: 0; }
.artmap-explore-result {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
    cursor: pointer; transition: background 0.15s ease;
}
.artmap-explore-result:hover { background: rgba(138,43,226,0.14); }
.artmap-explore-result img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    background: rgba(255,255,255,0.06);
}
.artmap-explore-result-name {
    flex: 1 1 auto; min-width: 0; color: #fff; font-size: 14px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artmap-explore-result-go {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgba(138,43,226,0.9);
    opacity: 0; transition: opacity 0.15s ease;
}
.artmap-explore-result:hover .artmap-explore-result-go { opacity: 1; }
.artmap-explore-empty { padding: 18px; text-align: center; color: rgba(255,255,255,0.35); font-size: 13px; }

/* Genre picker modal */
.artmap-genre-picker-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%);
    border-radius: 16px; width: 420px; max-width: 90vw; max-height: 75vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.artmap-genre-picker-header {
    display: flex; align-items: center; gap: 14px; padding: 24px 24px 16px;
    color: rgba(138,43,226,0.7); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.artmap-genre-picker-header h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.artmap-genre-picker-header p { font-size: 12px; color: rgba(255,255,255,0.35); margin: 3px 0 0; }
.artmap-genre-picker-search {
    margin: 12px 20px 0; padding: 10px 14px; border-radius: 10px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    color: #fff; outline: none; box-sizing: border-box;
}
.artmap-genre-picker-search::placeholder { color: rgba(255,255,255,0.2); }
.artmap-genre-picker-search:focus { border-color: rgba(138,43,226,0.4); }
.artmap-genre-picker-list {
    flex: 1; overflow-y: auto; padding: 8px 12px 16px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.artmap-genre-picker-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-radius: 10px; cursor: pointer;
    transition: background 0.15s;
}
.artmap-genre-picker-item:hover { background: rgba(138,43,226,0.08); }
.artmap-genre-picker-name { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); text-transform: capitalize; }
.artmap-genre-picker-count { font-size: 11px; color: rgba(255,255,255,0.25); }

/* Loading state */
.ya-loading {
    display: flex; align-items: center; gap: 12px; padding: 30px 20px;
    color: rgba(255,255,255,0.4); font-size: 13px;
}
.ya-watchlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.ya-watchlist-btn:hover { background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.8); }
.ya-watchlist-btn.active { color: var(--accent); border-color: rgba(var(--accent-rgb),0.3); background: rgba(var(--accent-rgb),0.15); }

/* Your Artists header buttons */
/* .ya-header-btn base styling migrated to .btn .btn--sm .btn--secondary.
   Class kept on the markup (discover.js injects it) along with the
   .ya-refresh-btn / .ya-settings-btn / .ya-viewall-btn co-modifiers. */
.ya-refresh-btn { padding: 7px 10px; }
.ya-refresh-btn:hover svg { transform: rotate(45deg); }
.ya-refresh-btn svg { transition: transform 0.3s; }
.ya-settings-btn { padding: 7px 10px; }
.ya-settings-btn:hover svg { transform: rotate(60deg); }
.ya-settings-btn svg { transition: transform 0.3s; }
.ya-viewall-btn {
    background: rgba(var(--accent-rgb),0.1); border-color: rgba(var(--accent-rgb),0.2);
    color: rgba(var(--accent-rgb),0.9);
}
.ya-viewall-btn:hover {
    background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.3);
    color: var(--accent); transform: translateX(2px);
}
.ya-viewall-btn svg { transition: transform 0.2s; }
.ya-viewall-btn:hover svg { transform: translateX(3px); }

/* Your Artists Sources Modal */
.ya-sources-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%); border-radius: 16px;
    width: 420px; max-width: 95vw;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    padding: 28px;
}
.ya-sources-modal h2 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.ya-sources-modal .ya-sources-desc { font-size: 12px; color: rgba(255,255,255,0.45); margin: 0 0 22px; }
.ya-sources-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.ya-source-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer; transition: background 0.15s;
}
.ya-source-row:hover { background: rgba(255,255,255,0.07); }
.ya-source-row.disconnected { opacity: 0.45; cursor: default; }
.ya-source-row-left { display: flex; align-items: center; gap: 10px; }
.ya-source-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.ya-source-status { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.ya-source-toggle {
    width: 36px; height: 20px; border-radius: 10px; border: none; cursor: pointer;
    background: rgba(255,255,255,0.12); position: relative; transition: background 0.2s; flex-shrink: 0;
}
.ya-source-toggle.on { background: var(--accent, #7c6af7); }
.ya-source-toggle::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: transform 0.2s;
}
.ya-source-toggle.on::after { transform: translateX(16px); }
.ya-sources-footer { display: flex; justify-content: flex-end; gap: 10px; }
.ya-sources-save-btn {
    padding: 9px 20px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: var(--accent, #7c6af7); color: #fff; border: none; cursor: pointer;
    transition: opacity 0.2s;
}
.ya-sources-save-btn:hover { opacity: 0.85; }
.ya-sources-cancel-btn {
    padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: background 0.15s;
}
.ya-sources-cancel-btn:hover { background: rgba(255,255,255,0.1); }

/* Your Artists Modal */
.ya-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%); border-radius: 16px;
    width: 800px; max-width: 95vw; max-height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.ya-modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 28px 14px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 16px 16px 0 0;
}
.ya-modal-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.ya-modal-subtitle { font-size: 12px; color: rgba(255,255,255,0.35); margin: 4px 0 0; }
.ya-modal-toolbar {
    padding: 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.ya-modal-search {
    flex: 1; min-width: 150px; padding: 8px 14px; border-radius: 10px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    color: #fff; outline: none;
}
.ya-modal-search::placeholder { color: rgba(255,255,255,0.2); }
.ya-modal-search:focus { border-color: rgba(var(--accent-rgb),0.4); }
.ya-modal-filters { display: flex; gap: 4px; }
.ya-filter-btn {
    padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s;
}
.ya-filter-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.ya-filter-btn.active { background: rgba(var(--accent-rgb),0.15); border-color: rgba(var(--accent-rgb),0.3); color: rgb(var(--accent-light-rgb)); }
.ya-modal-sort {
    padding: 6px 10px; border-radius: 8px; font-size: 11px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.6); outline: none;
}
.ya-modal-sort option { background: #1e1e32; }
.ya-modal-body { flex: 1; overflow-y: auto; padding: 16px 28px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.ya-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.ya-modal-grid .ya-card { width: auto; }
.ya-modal-footer { padding: 14px 28px; border-top: 1px solid rgba(255,255,255,0.05); }

/* Genre Explorer Grid */
.genre-explorer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.genre-explorer-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    transition: all 0.2s;
}

.genre-explorer-pill.explored {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.genre-explorer-pill.unexplored {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
}

.genre-explorer-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.genre-pill-count {
    font-size: 11px;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}

.genre-pill-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-light-rgb));
    padding: 2px 6px;
    border-radius: 8px;
}

/* Genre Deep Dive Modal */
.genre-dive-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.genre-dive-modal {
    background: linear-gradient(135deg, rgba(24, 24, 28, 0.98) 0%, rgba(16, 16, 20, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 90vw;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.genre-dive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb), 0.08) 0%,
        rgba(var(--accent-rgb), 0.02) 60%,
        transparent 100%);
}

.genre-dive-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    animation: stats-header-sweep 10s ease-in-out infinite;
}

.genre-dive-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--accent-rgb), 0.7);
    font-weight: 600;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.genre-dive-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
}

.genre-dive-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.genre-dive-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: scale(1.1);
}

.genre-dive-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

.genre-dive-loading {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    padding: 60px 40px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.genre-dive-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.genre-dive-section {
    margin-bottom: 28px;
}

.genre-dive-section:last-child {
    margin-bottom: 0;
}

.genre-dive-section-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.genre-dive-icon {
    font-size: 16px;
}

/* Artists */
.genre-dive-artists {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}

.genre-dive-artists::-webkit-scrollbar { height: 4px; }
.genre-dive-artists::-webkit-scrollbar-track { background: transparent; }
.genre-dive-artists::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.genre-dive-artist {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 88px;
    max-width: 88px;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.genre-dive-artist:first-child {
    min-width: 100px;
    max-width: 100px;
}

.genre-dive-artist:nth-child(2),
.genre-dive-artist:nth-child(3) {
    min-width: 94px;
    max-width: 94px;
}

.genre-dive-artist:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-3px);
}

.genre-dive-artist-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border: 2px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.genre-dive-artist:first-child .genre-dive-artist-img {
    width: 80px;
    height: 80px;
    border-width: 3px;
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.1);
}

.genre-dive-artist:nth-child(2) .genre-dive-artist-img,
.genre-dive-artist:nth-child(3) .genre-dive-artist-img {
    width: 72px;
    height: 72px;
}

.genre-dive-artist:hover .genre-dive-artist-img {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
    transform: scale(1.08);
}

.genre-dive-artist-name {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    transition: color 0.2s;
}

.genre-dive-artist:hover .genre-dive-artist-name {
    color: #fff;
}

.genre-dive-artist-meta {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
}

.genre-dive-artist-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
    padding: 2px 6px;
    border-radius: 6px;
}

/* Source indicator dots */
.genre-dive-src-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.genre-dive-src-spotify { background: #1db954; }
.genre-dive-src-itunes { background: #fc3c44; }
.genre-dive-src-deezer { background: #a238ff; }

.genre-dive-artist .genre-dive-src-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.genre-dive-artist {
    position: relative;
}

/* Tracks */
.genre-dive-tracks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
}

.genre-dive-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 2px solid transparent;
}

.genre-dive-track:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
}

.genre-dive-track:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-left-color: rgba(var(--accent-rgb), 0.5);
}

.genre-dive-track:hover .genre-dive-track-num {
    color: rgb(var(--accent-rgb));
}

.genre-dive-track:active {
    background: rgba(var(--accent-rgb), 0.1);
}

.genre-dive-track-num {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    min-width: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.genre-dive-track-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.genre-dive-track-info {
    flex: 1;
    min-width: 0;
}

.genre-dive-track-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genre-dive-track:hover .genre-dive-track-name {
    color: #fff;
}

.genre-dive-track-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genre-dive-track-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Empty state */
.genre-dive-empty {
    text-align: center;
    padding: 50px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.genre-dive-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.genre-dive-empty p {
    margin: 4px 0;
    font-size: 14px;
}

.genre-dive-empty-hint {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Related genres */
.genre-dive-related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.genre-dive-related-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-right: 4px;
    width: 100%;
    margin-bottom: 2px;
}

.genre-dive-related-pill {
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.2s;
}

.genre-dive-related-pill:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}

/* Album card hover inside genre dive modal */
.genre-dive-modal .discover-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.genre-dive-modal .discover-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.genre-dive-modal .discover-card:hover .discover-card-title {
    color: #fff;
}

/* In Library badge on discover cards */
.discover-card-lib-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
    padding: 3px 7px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

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

/* Discover Empty State */
/* ── Spotify Library Section ────────────────────────── */

.spotify-library-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.spotify-library-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.spotify-library-refresh-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #b3b3b3;
}

.spotify-library-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.spotify-library-download-btn {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
}

.spotify-library-download-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
}

.spotify-library-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.spotify-library-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.spotify-library-search:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.spotify-library-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.spotify-library-select {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.spotify-library-select option {
    background: #1a1a1a;
    color: #fff;
}

.spotify-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 16px;
}

.spotify-library-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.spotify-library-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.spotify-library-card-img {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
}

.spotify-library-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.spotify-library-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.spotify-library-card-badge.owned {
    background: rgba(29, 185, 84, 0.85);
    color: #fff;
}

.spotify-library-card-badge.missing {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.spotify-library-card-info {
    padding: 12px;
}

.spotify-library-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-library-card-artist {
    font-size: 12px;
    color: #b3b3b3;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-library-card-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

.spotify-library-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 0;
}

.spotify-library-page-btn {
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #b3b3b3;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.spotify-library-page-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.spotify-library-page-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.spotify-library-page-info {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.spotify-library-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.spotify-library-empty p {
    margin: 8px 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .spotify-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 12px;
    }

    .spotify-library-header-actions {
        flex-wrap: wrap;
    }

    .spotify-library-filters {
        flex-direction: column;
    }

    .spotify-library-search {
        min-width: unset;
        width: 100%;
    }
}

.discover-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

/* Discover Playlist Tracks */
.discover-playlist-tracks {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.discover-playlist-track {
    display: grid;
    grid-template-columns: 40px 50px 1fr 2fr 80px;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.discover-playlist-track:hover {
    background-color: #2a2a2a;
}

.playlist-track-number {
    font-size: 14px;
    color: #999;
    text-align: center;
}

.playlist-track-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
}

.playlist-track-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-track-info {
    min-width: 0;
}

.playlist-track-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-track-artist {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-track-album {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-track-duration {
    font-size: 12px;
    color: #999;
    text-align: right;
}

/* Compact Playlist Layout */
.discover-playlist-container.compact {
    max-height: 500px;
    overflow-y: auto;
    background: #1a1a1a;
    border-radius: 8px;
}

.discover-playlist-tracks-compact {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.discover-playlist-track-compact {
    display: grid;
    grid-template-columns: 30px 40px 1fr 1.5fr 60px;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.discover-playlist-track-compact:hover {
    background-color: #2a2a2a;
}

.track-compact-number {
    font-size: 13px;
    color: #999;
    text-align: center;
}

.track-compact-image {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
}

.track-compact-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.track-compact-info {
    min-width: 0;
}

.track-compact-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-compact-artist {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-compact-album {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-compact-duration {
    font-size: 11px;
    color: #999;
    text-align: right;
}

/* #1079 — preview + selective download controls in Mixes / ListenBrainz modals.
   Scoped to .has-select so the plain compact list (Build Playlist results,
   ListenBrainz inline view) keeps its original 5-column layout untouched. */
.discover-playlist-track-compact.has-select {
    grid-template-columns: 24px 30px 40px 1fr 1.5fr 60px;
}

.track-compact-select {
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-compact-check {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1db954;
}

.has-select .track-compact-image {
    position: relative;
}

.track-compact-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.has-select .track-compact-image:hover .track-compact-play,
.track-compact-play:focus-visible {
    opacity: 1;
}

.mix-modal-selbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #2a2a2a;
    background: #1a1a1a;
}

.mix-selbar-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #ccc;
    cursor: pointer;
    white-space: nowrap;
}

.mix-selbar-all input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: #1db954;
}

.mix-sel-count {
    font-size: 12px;
    color: #999;
}

.mix-selbar-spacer {
    flex: 1;
}

.track-compact-block {
    display: none;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 80, 80, 0.12);
    color: rgba(255, 80, 80, 0.6);
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.track-compact-block:hover {
    background: rgba(255, 80, 80, 0.25);
    color: #ff5050;
}
.discover-playlist-track-compact:hover .track-compact-block {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Discovery Blacklist Button (on hero) */
.discover-blacklist-btn {
    position: absolute;
    top: 20px;
    right: 58px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.15s;
}
.discover-blacklist-btn:hover {
    background: rgba(255, 80, 80, 0.3);
    color: #fff;
}

/* Discovery Blacklist Modal */
.discover-blacklist-modal {
    background: #1a1a1a;
    border-radius: 16px;
    width: 500px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}
.discover-blacklist-modal-header {
    padding: 20px 24px 12px;
    position: relative;
}
.discover-blacklist-modal-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #fff;
}
.discover-blacklist-modal-header p {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}
.discover-blacklist-modal-search {
    padding: 0 24px 12px;
    position: relative;
}
.discover-blacklist-modal-search input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.discover-blacklist-modal-search input:focus {
    border-color: rgba(255,255,255,0.15);
}
.dbl-search-results {
    position: absolute;
    left: 24px;
    right: 24px;
    background: #222;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dbl-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
}
.dbl-search-item:hover {
    background: rgba(255,255,255,0.06);
}
.dbl-search-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.dbl-search-img-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.dbl-search-name {
    flex: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}
.dbl-search-action {
    font-size: 11px;
    color: rgba(255, 80, 80, 0.7);
    font-weight: 600;
}
.dbl-search-empty {
    padding: 12px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
}
.discover-blacklist-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
    max-height: 300px;
}
.discover-blacklist-modal-footer {
    padding: 12px 24px;
    display: flex;
    justify-content: flex-end;
}

/* Discovery Artist Blacklist Items */
.discover-blacklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.discover-blacklist-item:last-child { border-bottom: none; }
.discover-blacklist-name {
    flex: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}
.discover-blacklist-date {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
}
.discover-blacklist-remove {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.3);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.discover-blacklist-remove:hover {
    background: rgba(255, 80, 80, 0.2);
    color: #ff5050;
}
.discover-blacklist-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-size: 13px;
}

/* Discover Playlist Cards */
.discover-playlist-card {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.discover-playlist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.discover-playlist-cover {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

.discover-playlist-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playlist-play-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    background-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.2s ease;
}

.discover-playlist-card:hover .playlist-play-overlay {
    opacity: 1;
    transform: translateY(0);
}

.discover-playlist-info {
    padding: 16px;
}

.discover-playlist-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
}

.discover-playlist-description {
    font-size: 13px;
    color: #999;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.discover-playlist-count {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* ===============================
   DISCOVER DOWNLOAD BAR
   =============================== */

/* Fixed bottom download bar */
/* ===============================
   DISCOVER DOWNLOAD SIDEBAR
   Right sidebar for active downloads
   =============================== */

.discover-download-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 140px;
    height: 100vh;
    background: linear-gradient(270deg,
            rgba(18, 18, 18, 0.98) 0%,
            rgba(12, 12, 12, 0.99) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 12px;
    z-index: 9999;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hidden state */
.discover-download-sidebar.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Sidebar header */
.discover-download-sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.discover-download-sidebar-icon {
    font-size: 20px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.discover-download-sidebar-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
}

.discover-download-sidebar-count {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

/* Download bubbles container */
.discover-download-bubbles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* Individual download bubble - 100x100px circular */
.discover-download-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.discover-download-bubble-card {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.discover-download-bubble-card:hover {
    transform: scale(1.08);
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 0 15px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.discover-download-bubble-card.completed {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.discover-download-bubble-card.completed:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.3),
        0 0 15px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Bubble card background image */
.discover-download-bubble-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

/* Bubble card overlay */
.discover-download-bubble-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.5) 100%);
    border-radius: 50%;
}

/* Bubble card content (icon/status) */
.discover-download-bubble-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 8px;
}

.discover-download-bubble-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* Bubble name (below the card) */
.discover-download-bubble-name {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Bubble status text (optional, below name) */
.discover-download-bubble-status {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 2px;
}

/* Scrollbar styling */
.discover-download-sidebar::-webkit-scrollbar {
    width: 4px;
}

.discover-download-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.discover-download-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.discover-download-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===============================
   BUILD A PLAYLIST STYLES
   =============================== */

/* ---- Build a Playlist ---- */

.bp-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 8px;
    vertical-align: middle;
    transition: background 0.2s;
    line-height: 1;
}
.bp-info-toggle:hover {
    background: rgba(var(--accent-rgb), 0.3);
}

.bp-info-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: rgba(var(--accent-rgb), 0.06);
    border-radius: 10px;
    margin-bottom: 0;
}
.bp-info-panel.visible {
    max-height: 260px;
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
}
.bp-info-content p {
    color: #ccc;
    font-size: 13px;
    margin: 0 0 8px 0;
}
.bp-info-content p strong {
    color: #fff;
}
.bp-info-content ol {
    margin: 0 0 8px 0;
    padding-left: 20px;
    color: #bbb;
    font-size: 13px;
    line-height: 1.7;
}
.bp-info-note {
    color: #888 !important;
    font-size: 12px !important;
    font-style: italic;
    margin-bottom: 0 !important;
}

.build-playlist-container {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    margin-top: 16px;
}

/* -- Search Input -- */
.build-playlist-search-section {
    position: relative;
    margin-bottom: 20px;
}

.bp-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.bp-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    color: #666;
    pointer-events: none;
}
.bp-search-spinner {
    position: absolute;
    right: 14px;
    display: flex;
    align-items: center;
}

#build-playlist-search {
    width: 100%;
    padding: 12px 42px 12px 40px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#build-playlist-search::placeholder {
    color: #666;
}
#build-playlist-search:focus {
    border-color: rgb(var(--accent-rgb));
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* -- Search Results Dropdown -- */
.build-playlist-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #222;
    border: 1px solid #3a3a3a;
    border-radius: 10px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.build-playlist-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #2a2a2a;
}
.build-playlist-search-result:last-child {
    border-bottom: none;
}
.build-playlist-search-result:hover {
    background-color: rgba(var(--accent-rgb), 0.08);
}
.build-playlist-search-result:hover .bp-result-add {
    opacity: 1;
}

.build-playlist-search-result img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #333;
}

.bp-result-name {
    color: #fff;
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-result-add {
    color: rgb(var(--accent-rgb));
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.build-playlist-no-results {
    padding: 20px 16px;
    text-align: center;
    color: #777;
    font-size: 13px;
}

/* -- Selected Artists -- */
.build-playlist-selected-section {
    margin-bottom: 20px;
}

.bp-selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bp-selected-header h3 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.bp-selected-counter {
    color: #666;
    font-size: 12px;
    font-weight: 500;
}

.build-playlist-selected-artists {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 56px;
    padding: 12px;
    background: #151515;
    border: 1px dashed #333;
    border-radius: 10px;
    transition: border-color 0.2s;
}
.build-playlist-selected-artists:has(.build-playlist-selected-artist) {
    border-style: solid;
    border-color: #3a3a3a;
}

.build-playlist-selected-artist {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 20px;
    padding: 6px 10px 6px 6px;
    transition: border-color 0.2s;
}
.build-playlist-selected-artist:hover {
    border-color: #555;
}

.build-playlist-selected-artist img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #333;
}

.build-playlist-selected-artist span {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.build-playlist-remove-artist {
    background: none;
    border: none;
    color: #777;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    line-height: 1;
}
.build-playlist-remove-artist:hover {
    color: #ff5555;
    background: rgba(255,85,85,0.1);
}

.build-playlist-no-selection {
    color: #555;
    font-size: 13px;
    padding: 8px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* -- Generate Button & Loading -- */
.build-playlist-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.build-playlist-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgb(var(--accent-rgb));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.build-playlist-generate-btn:not(:disabled):hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.build-playlist-generate-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.build-playlist-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}
.build-playlist-loading span {
    color: #999;
    font-size: 13px;
}

/* -- Metadata Stats -- */
.build-playlist-metadata {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.bp-meta-stat {
    background: #222;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    border: 1px solid #2a2a2a;
}
.bp-meta-value {
    display: block;
    color: rgb(var(--accent-rgb));
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}
.bp-meta-label {
    display: block;
    color: #888;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* =======================
   DECADE BROWSER SECTION - Modern Style matching Recent Releases
   ======================= */

.decade-card-modern {
    /* Inherits from .discover-card */
}

.decade-card-image {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.decade-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.12) 0%,
            rgba(var(--accent-rgb), 0.04) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.decade-card-modern:hover .decade-card-image::before {
    opacity: 0.3;
}

.decade-icon-large {
    font-size: 96px;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.decade-card-modern:hover .decade-icon-large {
    transform: scale(1.1) rotate(5deg);
}

/* =======================
   Genre Browser Cards
   ======================= */

.genre-card-modern {
    /* Inherits from .discover-card */
}

.genre-card-image {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.genre-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(var(--accent-rgb), 0.12) 0%,
            rgba(var(--accent-rgb), 0.04) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.genre-card-modern:hover .genre-card-image::before {
    opacity: 0.3;
}

.genre-icon-large {
    font-size: 96px;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.genre-card-modern:hover .genre-icon-large {
    transform: scale(1.1) rotate(5deg);
}

/* ===============================
   TIME MACHINE (DECADE TABS)
   =============================== */

.decade-tabs,
.genre-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.decade-tab,
.genre-tab {
    background: transparent;
    border: none;
    color: #999;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    position: relative;
    bottom: -2px;
    white-space: nowrap;
}

.decade-tab:hover,
.genre-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.decade-tab.active,
.genre-tab.active {
    color: #fff;
    border-bottom-color: rgb(var(--accent-light-rgb));
}

.decade-tab-content,
.genre-tab-content {
    display: none;
}

.decade-tab-content.active,
.genre-tab-content.active {
    display: block;
}

.decade-actions,
.genre-actions {
    margin-bottom: 20px;
}

/* Responsive adjustments for Decade/Genre tabs */
@media (max-width: 768px) {

    .decade-tabs,
    .genre-tabs {
        gap: 4px;
    }

    .decade-tab,
    .genre-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* ===============================
   LISTENBRAINZ PLAYLIST CARDS
   =============================== */

.listenbrainz-tabs {
    margin-top: 20px;
    margin-bottom: 20px;
}

.listenbrainz-tab-content .discover-section-subsection {
    margin-bottom: 40px;
}

.listenbrainz-tab-content .discover-section-subsection:not(:first-child) {
    margin-top: 60px;
}

/* (Removed dead Discover-page LB card styling — solid orange gradient
 * + .listenbrainz-icon { font-size: 48px } were orphaned rules that
 * collided with the Sync-page LB tab cards. The legacy class was
 * never instantiated in JS or HTML outside the new Sync tab.) */

/* ========================================= */
/* ========================================= */
/* SEARCH SOURCE PICKER (replaces Enhanced/Basic toggle) */
/* ========================================= */

.search-source-picker-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.search-source-picker-label {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.search-source-picker-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.search-source-picker-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(30, 30, 30, 0.8);
    border: 1px solid rgba(64, 64, 64, 0.4);
    border-radius: 10px;
    color: #ffffff;
    padding: 10px 40px 10px 16px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-source-picker-select:hover {
    border-color: rgba(138, 43, 226, 0.6);
}

.search-source-picker-select:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.9);
    box-shadow: 0 2px 10px rgba(138, 43, 226, 0.35);
}

.search-source-picker-select option {
    background: #1e1e1e;
    color: #ffffff;
}

.search-source-picker-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Legacy toggle (kept for any other references, but unused by the Search page) */
.search-mode-toggle-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.search-mode-toggle {
    position: relative;
    background: rgba(30, 30, 30, 0.8);
    border-radius: 12px;
    padding: 4px;
    display: inline-flex;
    gap: 4px;
    border: 1px solid rgba(64, 64, 64, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.search-mode-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.search-mode-btn:hover {
    color: rgba(255, 255, 255, 0.9);
}

.search-mode-btn.active {
    color: #ffffff;
}

.mode-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.search-mode-btn.active .mode-icon {
    transform: scale(1.1);
}

.search-mode-toggle .toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(24, 156, 71, 0.9));
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

.search-mode-toggle[data-active="basic"] .toggle-slider {
    transform: translateX(100%);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(24, 156, 71, 0.9));
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

/* Search Section Visibility */
.search-section {
    display: none;
}

.search-section.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* ========================================= */
/* ENHANCED SEARCH STYLING */
/* ========================================= */

/* Enhanced Search Input Wrapper (relative for dropdown positioning) */
/* Hide header/toggle when enhanced results are showing */
.enh-results-active-hide {
    display: none !important;
}

.enhanced-search-input-wrapper {
    position: relative;
    margin-bottom: 0;
}

/* Enhanced Search Bar — the hero pill. One confident rounded field, the way
   Spotify/Apple lead their search surfaces; the id-lookup row hangs beneath it
   as a quiet utility line instead of a second boxed input. */
.enhanced-search-bar-container {
    background: transparent; border: none; border-radius: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px; align-items: stretch;
}
.enhanced-search-bar-container:focus-within { border-color: transparent; background: transparent; }
.enhanced-search-wrapper {
    position: relative; display: flex; align-items: center;
    background: #202024; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0 10px 0 22px; min-height: 54px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.enhanced-search-wrapper:hover { background: #26262b; border-color: rgba(255, 255, 255, 0.14); }
.enhanced-search-wrapper:focus-within {
    background: #26262b; border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(var(--accent-rgb), 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.enhanced-search-icon { font-size: 18px; margin-right: 12px; opacity: 0.55; animation: none; transition: opacity 0.2s ease; }
.enhanced-search-wrapper:focus-within .enhanced-search-icon { opacity: 0.9; }
@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}
#enhanced-search-input {
    flex-grow: 1; background: transparent; border: none; outline: none;
    font-family: 'Segoe UI', sans-serif; font-size: 16px; font-weight: 500;
    color: #ffffff; padding: 14px 0;
}
#enhanced-search-input::placeholder { color: rgba(255, 255, 255, 0.38); font-weight: 400; }
.enhanced-cancel-btn {
    background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%;
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 14px; flex-shrink: 0;
    transition: all 0.2s ease;
}
.enhanced-cancel-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Link / ID lookup row (#775) — a quiet utility line under the hero pill. */
.enh-id-lookup {
    display: flex; align-items: center; gap: 8px; margin-top: 2px;
    background: transparent; border: none; border-radius: 10px;
    padding: 0 8px 0 22px; transition: background 0.2s ease;
}
.enh-id-lookup:focus-within { background: rgba(255, 255, 255, 0.03); }
.enh-id-lookup-icon { font-size: 13px; opacity: 0.4; }
.enh-id-input {
    flex-grow: 1; background: transparent; border: none; outline: none;
    font-family: 'Segoe UI', sans-serif; font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75); padding: 8px 0;
}
.enh-id-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.enh-id-btn {
    flex-shrink: 0; background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.25); border-radius: 999px;
    padding: 5px 14px; color: rgb(var(--accent-light-rgb)); cursor: pointer;
    font-size: 12px; font-weight: 600; transition: all 0.2s ease;
}
.enh-id-btn:hover { background: rgba(var(--accent-rgb), 0.26); }

/* Enhanced Search Status */
.enhanced-search-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin-top: 16px;
    background: rgba(20, 20, 20, 0.4);
    border-radius: 10px;
    border-left: 3px solid rgba(138, 43, 226, 0.8);
}

.enhanced-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(138, 43, 226, 0.8);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(138, 43, 226, 0.6);
    }

    50% {
        box-shadow: 0 0 12px rgba(138, 43, 226, 0.9);
    }
}

#enhanced-search-status-text {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Enhanced Search Results */
.enhanced-search-results-container {
    background: rgba(20, 20, 20, 0.3);
    border-radius: 16px;
    border: 2px solid rgba(138, 43, 226, 0.2);
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.enhanced-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}

.enhanced-results-header h3 {
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.results-count-badge {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(123, 31, 162, 0.3));
    border: 1px solid rgba(138, 43, 226, 0.5);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.enhanced-results-scroll-area {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 8px;
}

.enhanced-results-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.enhanced-results-scroll-area::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, 0.3);
    border-radius: 4px;
}

.enhanced-results-scroll-area::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(138, 43, 226, 0.6), rgba(123, 31, 162, 0.6));
    border-radius: 4px;
}

.enhanced-results-scroll-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(138, 43, 226, 0.8), rgba(123, 31, 162, 0.8));
}

/* Enhanced Results Placeholder */
.enhanced-results-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: sparkle 2s ease-in-out infinite;
}

.placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px 0;
}

.placeholder-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ========================================= */
/* ENHANCED SEARCH DROPDOWN OVERLAY        */
/* ========================================= */

.enhanced-dropdown {
    position: relative;
    margin-top: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow-y: visible;
    z-index: 1;
    animation: enhFadeIn 0.2s ease-out;
}

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

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

.enhanced-dropdown-content {
    max-height: none;
    overflow-y: visible;
    padding: 0;
}

/* Close button inside dropdown - hidden on desktop, shown on mobile */
.enhanced-dropdown-close {
    display: none;
}

/* Responsive: mobile adjustments */
@media (max-width: 700px) {
    .enhanced-dropdown-close {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 8px 16px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .enhanced-dropdown-close:hover,
    .enhanced-dropdown-close:active {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
    }

    .enhanced-dropdown-close span {
        font-size: 14px;
        line-height: 1;
    }

    .enhanced-search-bar-container {
        flex-direction: column;
        padding: 8px;
        gap: 8px;
    }

    #enhanced-search-input {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .enhanced-search-wrapper {
        padding: 0 10px;
    }

    #enhanced-search-input {
        font-size: 13px;
        padding: 10px 0;
    }

    .enhanced-search-icon {
        font-size: 16px;
        margin-right: 6px;
    }

    /* Better album/track results on mobile */
    .album-result-item {
        margin-bottom: 8px;
    }

    .album-item__header {
        padding: 12px;
        gap: 12px;
    }

    .album-item__icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .album-item__title {
        font-size: 11px;
    }

    .album-item__details {
        font-size: 9px;
    }

    .album-action-btn {
        height: 32px;
        width: 140px;
        font-size: 11px;
    }

    .track-item {
        margin: 2px 12px 6px 50px;
        padding: 6px 10px;
    }

    .track-item__title {
        font-size: 10px;
    }

    .track-item__details {
        font-size: 8px;
    }

    .track-item .action-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    /* Search results area */
    .enhanced-search-results-container {
        padding: 12px;
    }

    .search-results-scroll-area {
        padding-right: 3px;
    }

    .search-result-item {
        padding: 12px;
        border-radius: 14px;
    }
}

.enhanced-dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.enhanced-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.enhanced-dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.enhanced-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Loading and Empty States */
.enhanced-loading,
.enhanced-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.enhanced-loading .spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Dropdown Sections - Enhanced with Premium Design */
/* Source tabs for multi-source search */
.enh-source-tabs {
    display: flex;
    gap: 4px;
    padding: 0;
    margin-bottom: 20px;
    border: none;
}

.enh-source-tab {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.enh-source-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

.enh-source-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
}

.enh-source-tab .enh-tab-count {
    margin-left: 4px;
    opacity: 0.5;
    font-weight: 400;
}

.enh-source-tab.enh-tab-spotify.active { background: rgba(29, 185, 84, 0.2); color: #1db954; }
.enh-source-tab.enh-tab-itunes.active { background: rgba(252, 60, 68, 0.2); color: #fc3c44; }
.enh-source-tab.enh-tab-deezer.active { background: rgba(162, 56, 255, 0.2); color: #a238ff; }
.enh-source-tab.enh-tab-discogs.active { background: rgba(212, 165, 116, 0.2); color: #D4A574; }
.enh-source-tab.enh-tab-hydrabase.active { background: rgba(0, 180, 216, 0.2); color: #00b4d8; }
.enh-source-tab.enh-tab-amazon.active { background: rgba(255, 153, 0, 0.2); color: #FF9900; }
.enh-source-tab.enh-tab-youtube.active { background: rgba(255, 0, 0, 0.2); color: #ff4444; }
.enh-source-tab.enh-tab-musicbrainz.active { background: rgba(186, 51, 88, 0.2); color: #BA3358; }
.enh-source-tab.enh-tab-jiosaavn.active { background: rgba(43, 197, 180, 0.2); color: #2bc5b4; }
.enh-source-tab.enh-tab-bandcamp.active { background: rgba(29, 160, 195, 0.2); color: #1da0c3; }

/* ── Source picker — a boxless rail of brand pills; the pills carry the
   color, the way Spotify's filter chips sit bare on the page. ── */
.enh-source-row {
    display: flex; flex-wrap: wrap;
    gap: 8px; padding: 6px 2px 10px; margin: 8px 0 10px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    flex-shrink: 0;
}
.enh-source-row::-webkit-scrollbar { height: 5px; }
.enh-source-row::-webkit-scrollbar-track { background: transparent; }
.enh-source-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
/* The panel is a grid item (min-width: auto), so any wide child can push it
   past the viewport and the overflow clips at an ancestor that never
   scrolls — the chips just vanish off-screen. min-width: 0 keeps the panel
   inside its column so children wrap or scroll THEMSELVES. Scoped to the
   search page; the downloads page shares this class. */
.downloads-main-panel:has(#enh-source-row) { min-width: 0; }
.enh-source-icon {
    position: relative; display: inline-flex; flex-direction: row;
    align-items: center; justify-content: center; gap: 8px; min-width: 0;
    padding: 9px 16px 9px 12px; border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px; background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.68); cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}
.enh-source-icon:hover {
    background: rgba(255, 255, 255, 0.09); color: #fff;
    border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.enh-source-icon:active { transform: translateY(0) scale(0.97); }
.enh-source-icon-glyph {
    font-size: 18px; line-height: 1; display: inline-flex; align-items: center;
    justify-content: center; width: 22px; height: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.enh-source-icon-glyph img { width: 22px; height: 22px; object-fit: contain; display: block; }
.enh-source-icon-label { font-size: 12.5px; letter-spacing: 0.01em; font-weight: 600; }
.enh-source-icon.active .enh-source-icon-label { font-weight: 700; }
@media (max-width: 700px) {
    .enh-source-icon { padding: 7px 12px 7px 10px; font-size: 12px; }
    .enh-source-icon-glyph { width: 18px; height: 18px; font-size: 15px; }
    .enh-source-icon-glyph img { width: 18px; height: 18px; }
}

/* Active state — brand-coloured gradient + outer glow. Each source gets its
   own palette. `transform: scale(1.03)` lifts the chip slightly above its
   siblings. */
.enh-source-icon.active {
    transform: scale(1.03);
    border-color: currentColor;
}
.enh-source-icon[data-source="spotify"].active {
    color: #1db954;
    background: linear-gradient(180deg, rgba(29, 185, 84, 0.28) 0%, rgba(29, 185, 84, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.35), 0 6px 22px rgba(29, 185, 84, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="itunes"].active {
    color: #fc3c44;
    background: linear-gradient(180deg, rgba(252, 60, 68, 0.28) 0%, rgba(252, 60, 68, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(252, 60, 68, 0.35), 0 6px 22px rgba(252, 60, 68, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="deezer"].active {
    color: #a238ff;
    background: linear-gradient(180deg, rgba(162, 56, 255, 0.28) 0%, rgba(162, 56, 255, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(162, 56, 255, 0.35), 0 6px 22px rgba(162, 56, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="discogs"].active {
    color: #D4A574;
    background: linear-gradient(180deg, rgba(212, 165, 116, 0.28) 0%, rgba(212, 165, 116, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.35), 0 6px 22px rgba(212, 165, 116, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="hydrabase"].active {
    color: #00b4d8;
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.28) 0%, rgba(0, 180, 216, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(0, 180, 216, 0.35), 0 6px 22px rgba(0, 180, 216, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="musicbrainz"].active {
    color: #BA3358;
    background: linear-gradient(180deg, rgba(186, 51, 88, 0.28) 0%, rgba(186, 51, 88, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(186, 51, 88, 0.35), 0 6px 22px rgba(186, 51, 88, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="youtube_videos"].active {
    color: #ff4444;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.28) 0%, rgba(255, 0, 0, 0.08) 100%);
    box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.35), 0 6px 22px rgba(255, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.enh-source-icon[data-source="soulseek"].active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32), 0 6px 22px rgba(255, 255, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Cache dot — brand-coloured pulse on icons that have results cached for
   the current query. */
.enh-source-icon.cached::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: enh-source-cache-pulse 2.4s ease-in-out infinite;
}
@keyframes enh-source-cache-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.enh-source-icon.loading .enh-source-icon-glyph {
    animation: enh-source-loading-spin 1.2s linear infinite;
    opacity: 0.7;
}
@keyframes enh-source-loading-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.enh-source-icon.fallback-warning {
    border-color: rgba(250, 176, 5, 0.5);
    box-shadow: 0 0 0 1px rgba(250, 176, 5, 0.25);
}

/* Unconfigured — no credentials saved for this source. The chip still
   clicks (redirects to Settings → Connections), but looks muted so the
   user's eye is drawn to the sources that actually work. */
.enh-source-icon.unconfigured {
    opacity: 0.42;
    filter: grayscale(0.7);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}
.enh-source-icon.unconfigured:hover {
    opacity: 0.75;
    filter: grayscale(0.35);
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.12);
}
/* Kill brand glow / active gradient if an unconfigured source is somehow
   marked active (defensive — setActiveSource bails before this normally). */
.enh-source-icon.unconfigured.active {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
    transform: none;
}

/* Rate-limit fallback banner above the enhanced results. */
.enh-fallback-banner {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgba(250, 176, 5, 0.12);
    border: 1px solid rgba(250, 176, 5, 0.3);
    color: #fab005;
    font-size: 12px;
    font-weight: 500;
}
.enh-fallback-banner.hidden { display: none; }

/* Music Video Grid */
.enh-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 4px 0;
}

.enh-video-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.enh-video-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.enh-video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.enh-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enh-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.enh-video-card:hover .enh-video-play {
    opacity: 1;
}

.enh-video-duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.enh-video-info {
    padding: 10px 12px;
}

.enh-video-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
}

.enh-video-channel {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

/* Video download states */
.enh-video-card.downloading {
    pointer-events: none;
}

.enh-video-card.downloading .enh-video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.enh-video-card.completed .enh-video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.enh-video-card.errored .enh-video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 0, 0, 0.3);
}

.enh-video-progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}

.enh-video-progress-ring svg {
    width: 100%;
    height: 100%;
}

.enh-video-progress-bar {
    transition: stroke-dashoffset 0.3s ease;
}

.enh-video-done, .enh-video-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    z-index: 2;
}

.enh-video-done {
    background: rgba(29, 185, 84, 0.85);
    color: #fff;
}

.enh-video-error {
    background: rgba(220, 50, 50, 0.85);
    color: #fff;
    cursor: pointer;
}

.enh-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

@media (max-width: 600px) {
    .enh-video-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 10px;
    }
}

.enh-dropdown-section {
    margin-bottom: 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    box-shadow: none;
    position: relative;
}

.enh-dropdown-section::before {
    display: none;
}

.enh-dropdown-section:last-child {
    margin-bottom: 0;
}

.enh-section-header {
    display: flex; align-items: baseline; gap: 10px; padding: 0;
    margin-bottom: 16px; border-bottom: none; position: relative;
}
.enh-section-header::after { display: none; }
.enh-section-icon { display: none; }
.enh-section-title {
    flex-grow: 1; font-size: 21px; font-weight: 800; color: #ffffff; margin: 0;
    text-transform: none; letter-spacing: -0.02em;
}
.enh-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 8px;
    background: rgba(255, 255, 255, 0.07); border: none; border-radius: 11px;
    font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.5);
    box-shadow: none; font-variant-numeric: tabular-nums;
}

/* ========================================= */
/* ARTIST CARDS - Clean Spotify Style       */
/* ========================================= */

.enh-artists-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.enh-artist-section {
    margin-bottom: 0 !important;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.enh-artist-section::before {
    display: none;
}

.enh-artist-section .enh-section-header {
    border-bottom: none;
}

.enh-artist-section .enh-section-header::after {
    display: none;
}

/* Artist grid — flexbox wrap with fixed-size cards */
.enh-compact-list.enh-artists-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 4px;
}

@media (max-width: 600px) {
    .enh-compact-list.enh-artists-grid {
        gap: 10px;
    }
}

/* Artist cards — Spotify-style circle tiles: a quiet tile that raises on
   hover, a circular portrait with its own shadow, name + meta beneath. */
.enh-compact-item.artist-card {
    background: transparent; border-radius: 12px; border: 1px solid transparent;
    padding: 16px 16px 18px; cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
    display: block; position: relative; overflow: hidden;
    width: 176px; height: auto; box-shadow: none; flex-shrink: 0;
}
.enh-compact-item.artist-card::before { display: none; }
.enh-compact-item.artist-card.has-dynamic-glow::before { display: none; }
.enh-compact-item.artist-card::after { display: none; }
.enh-compact-item.artist-card:hover {
    transform: none; background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.05); box-shadow: none; z-index: 10;
}
.enh-compact-item.artist-card:hover::after { display: none; }
.enh-compact-item.artist-card.has-dynamic-glow:hover {
    border-color: color-mix(in srgb, var(--glow-color-1) 18%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--glow-color-1) 10%, transparent);
}
.enh-item-image.artist-image {
    position: static; inset: auto; width: 144px; height: 144px;
    border-radius: 50%; object-fit: cover; border: none;
    margin: 0 auto 14px; display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    z-index: 0; flex-shrink: 0;
}
.enh-compact-item.artist-card:hover .enh-item-image.artist-image {
    transform: scale(1.04); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.enh-compact-item.artist-card.has-dynamic-glow:hover .enh-item-image.artist-image {
    transform: scale(1.04);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55),
        0 0 24px color-mix(in srgb, var(--glow-color-1) 22%, transparent);
}
.enh-item-image-placeholder.artist-placeholder {
    position: static; inset: auto; width: 144px; height: 144px;
    border-radius: 50%;
    background: linear-gradient(135deg, #26262b 0%, #1a1a1e 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; color: rgba(255, 255, 255, 0.3); border: none;
    margin: 0 auto 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 0; flex-shrink: 0;
}
.enh-compact-item.artist-card .enh-item-info {
    position: static; padding: 0 2px; z-index: 2;
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    min-width: 0; max-width: none;
}
.enh-compact-item.artist-card .enh-item-name {
    font-size: 15px; font-weight: 700; color: #ffffff; margin: 0;
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; display: block; text-shadow: none;
}
.enh-compact-item.artist-card .enh-item-meta {
    font-size: 12.5px; color: rgba(255, 255, 255, 0.5); display: block; text-shadow: none;
}
.enh-compact-item.artist-card .enh-item-badge { display: none; }

/* In Library badge on search results */
.enh-item-lib-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
    padding: 3px 7px;
    z-index: 5;
    animation: libBadgeFadeIn 0.3s ease;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Track items need relative positioning for the badge */
@keyframes libBadgeFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.enh-compact-item.track-item .enh-item-lib-badge {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 9px;
}

.enh-item-wishlist-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(251, 191, 36, 0.85);
    color: #1a1a2e;
    padding: 3px 7px;
    z-index: 5;
    animation: libBadgeFadeIn 0.3s ease;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.enh-compact-item.track-item .enh-item-wishlist-badge {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 9px;
}

/* Hydrabase badge (dev mode) */
.enh-badge-hydrabase {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: rgba(139, 92, 246, 1);
}

.enh-sr-artist-badge-hydrabase {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border: 1px solid rgba(99, 102, 241, 0.5);
    color: rgba(139, 92, 246, 1);
}


/* ========================================= */
/* ALBUM CARDS - LARGE Spotify Browse Style */
/* ========================================= */

/* Album grid — discover-style cards */
.enh-compact-list.enh-albums-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-behavior: smooth;
}

.enh-compact-list.enh-albums-grid::-webkit-scrollbar {
    height: 6px;
}
.enh-compact-list.enh-albums-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}
.enh-compact-list.enh-albums-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}
.enh-compact-list.enh-albums-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
    .enh-compact-list.enh-albums-grid {
        gap: 12px;
    }
}

/* Album cards — Spotify browse tiles: padded panel, rounded cover with its
   own shadow, title + meta BELOW the art instead of stamped over it. */
.enh-compact-item.album-card {
    display: flex; flex-direction: column; padding: 14px;
    background: #17171b; border-radius: 12px; cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: none; backdrop-filter: none; position: relative; overflow: hidden;
    flex-shrink: 0; width: 184px;
}
.enh-compact-item.album-card::before { display: none; }
.enh-compact-item.album-card.has-dynamic-glow::before { display: none; }
.enh-compact-item.album-card:hover {
    transform: translateY(-3px); background: #232329;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.enh-compact-item.album-card.has-dynamic-glow:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 18px color-mix(in srgb, var(--glow-color-1) 12%, transparent);
}
.enh-compact-item.album-card:hover::before { display: none; }
.enh-item-image.album-cover {
    width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover;
    margin-bottom: 0; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    transition: none; position: relative; z-index: 1;
}
.enh-compact-item.album-card:hover .enh-item-image.album-cover {
    transform: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); opacity: 1;
}
.enh-compact-item.album-card.has-dynamic-glow:hover .enh-item-image.album-cover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.enh-item-image-placeholder.album-placeholder {
    width: 100%; aspect-ratio: 1; border-radius: 8px;
    background: linear-gradient(135deg, #222227 0%, #17171b 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; margin-bottom: 0;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    position: relative; z-index: 1;
}
.enh-compact-item.album-card .enh-item-info { position: static; padding: 12px 2px 2px; z-index: 3; }
/* No overlay gradient — the text lives on the tile now, not on the art. */
.enh-compact-item.album-card::after { display: none; }
.enh-compact-item.album-card .enh-item-name {
    font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 3px 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3; text-shadow: none;
}
.enh-compact-item.album-card .enh-item-meta {
    font-size: 12px; color: rgba(255, 255, 255, 0.5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3; margin: 0; text-shadow: none; z-index: 1;
}
/* Ownership badge sits on the ART's corner, inside the tile padding. */
.enh-compact-item.album-card .enh-item-lib-badge,
.enh-compact-item.album-card .enh-item-wishlist-badge { top: 22px; left: 22px; }

/* ========================================= */
/* TRACK ITEMS                              */
/* ========================================= */

.enh-compact-list.enh-tracks-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.enh-compact-item.track-item {
    display: flex; align-items: center; gap: 14px; padding: 9px 14px;
    background: transparent; border-radius: 10px; cursor: pointer;
    transition: background 0.15s ease; border: none; min-width: 0;
    overflow: hidden; position: relative;
}
.enh-compact-item.track-item::before { display: none; }
.enh-compact-item.track-item.has-dynamic-glow::before { display: none; }
.enh-compact-item.track-item:hover {
    background: rgba(255, 255, 255, 0.07); border-color: transparent;
    transform: none; box-shadow: none;
}
.enh-compact-item.track-item.has-dynamic-glow:hover {
    background: color-mix(in srgb, var(--glow-color-1) 7%, transparent);
    border-color: transparent; box-shadow: none;
}
.enh-compact-item.track-item:hover::before { display: none; }
.enh-item-image.track-cover {
    width: 44px; height: 44px; border-radius: 6px; object-fit: cover;
    flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.15s ease; position: relative; z-index: 1;
}
.enh-compact-item.track-item:hover .enh-item-image.track-cover {
    transform: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.enh-compact-item.track-item.has-dynamic-glow:hover .enh-item-image.track-cover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.enh-item-image-placeholder.track-placeholder {
    width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05); display: flex;
    align-items: center; justify-content: center; font-size: 18px;
    box-shadow: none; transition: none; position: relative; z-index: 1;
}
.enh-item-info { flex-grow: 1; min-width: 0; position: relative; z-index: 1; }
.enh-compact-item.track-item .enh-item-name {
    font-size: 15px; font-weight: 500; color: #ffffff; margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    letter-spacing: -0.1px;
}
.enh-compact-item.track-item .enh-item-meta {
    font-size: 12.5px; color: rgba(255, 255, 255, 0.45);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enh-item-duration {
    font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0; margin-left: 8px; position: relative; display: flex;
    align-items: center; gap: 10px; z-index: 1; font-variant-numeric: tabular-nums;
}
/* Round accent play button on hover — the Spotify affordance. */
.enh-item-play-btn {
    opacity: 0; width: 34px; height: 34px; padding: 0 0 0 2px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--accent-rgb)); color: #ffffff; border: none;
    border-radius: 50%; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 10; backdrop-filter: none;
}
.enh-compact-item.track-item:hover .enh-item-play-btn { opacity: 1; transform: translateY(-50%); }
.enh-item-play-btn:hover {
    background: rgb(var(--accent-light-rgb, var(--accent-rgb)));
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.5);
    transform: translateY(-50%) scale(1.08);
}
.enh-item-play-btn:active { transform: translateY(-50%) scale(0.95); }

/* ── Makeover finishing layer ── */
.enhanced-loading,
.enhanced-empty { padding: 56px 20px; }
.enhanced-loading .spinner { border-top-color: rgb(var(--accent-rgb)); }
.enhanced-empty p { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.75); margin: 0; }
/* Page header sized like a destination, scoped to the search page only. */
.downloads-main-panel:has(#enh-source-row) .downloads-title { font-size: 28px; letter-spacing: -0.03em; }
.downloads-main-panel:has(#enh-source-row) .downloads-subtitle { color: rgba(255, 255, 255, 0.45); }
/* Recent searches — the idle surface under the hero pill. */
.enh-recent { margin-top: 18px; }
.enh-recent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.enh-recent-chip {
    display: inline-flex; align-items: center; gap: 2px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px; padding: 2px 6px 2px 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.enh-recent-chip:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); }
.enh-recent-chip-label {
    background: transparent; border: none; color: rgba(255, 255, 255, 0.8);
    font-size: 13px; font-weight: 500; padding: 6px 6px 6px 12px; cursor: pointer;
}
.enh-recent-chip-x {
    background: transparent; border: none; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: rgba(255, 255, 255, 0.35); font-size: 11px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.enh-recent-chip-x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Jump chips — anchor row above the sections. */
.enh-jump-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 22px; position: sticky; top: 0; z-index: 20;
    padding: 8px 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0.92) 70%, transparent);
    backdrop-filter: blur(6px);
}
.enh-jump-chip {
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px; padding: 7px 16px; color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.enh-jump-chip:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.2); }

/* Top result — the spotlight banner. */
.enh-top-result-card {
    display: flex; align-items: center; gap: 20px;
    background: #17171b; border-radius: 14px; padding: 20px 24px;
    cursor: pointer; text-decoration: none; color: inherit;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 560px;
}
.enh-top-result-card:hover {
    background: #232329; transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.enh-top-result-art {
    width: 104px; height: 104px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.enh-top-result-art--round { border-radius: 50%; }
.enh-top-result-art--ph {
    display: flex; align-items: center; justify-content: center; font-size: 40px;
    background: linear-gradient(135deg, #26262b 0%, #1a1a1e 100%); color: rgba(255, 255, 255, 0.3);
}
.enh-top-result-text { min-width: 0; }
.enh-top-result-name {
    font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 8px;
}
.enh-top-result-kind {
    display: inline-block; font-size: 11.5px; font-weight: 700;
    background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 5px 12px;
    color: rgba(255, 255, 255, 0.7);
}

/* Loading skeletons — ghosts in the result shapes. */
.enh-skel-strip { display: flex; gap: 16px; justify-content: center; margin: 22px 0 0; }
.enh-skel {
    display: inline-block; background: rgba(255, 255, 255, 0.05);
    animation: enhSkelPulse 1.4s ease-in-out infinite;
}
.enh-skel--circle { width: 92px; height: 92px; border-radius: 50%; }
.enh-skel--square { width: 92px; height: 92px; border-radius: 8px; }
.enh-skel-strip .enh-skel:nth-child(2) { animation-delay: 0.12s; }
.enh-skel-strip .enh-skel:nth-child(3) { animation-delay: 0.24s; }
.enh-skel-strip .enh-skel:nth-child(4) { animation-delay: 0.36s; }
.enh-skel-strip .enh-skel:nth-child(5) { animation-delay: 0.48s; }
@keyframes enhSkelPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
@media (max-width: 600px) {
    .enh-skel-strip .enh-skel:nth-child(n+4) { display: none; }
    .enh-top-result-art { width: 84px; height: 84px; }
    .enh-top-result-name { font-size: 19px; }
}

/* Tile sizes step down on phones. */
@media (max-width: 600px) {
    .enh-compact-item.artist-card { width: 138px; padding: 12px 12px 14px; }
    .enh-item-image.artist-image,
    .enh-item-image-placeholder.artist-placeholder { width: 110px; height: 110px; }
    .enh-compact-item.album-card { width: 150px; padding: 10px; }
    .enh-section-title { font-size: 18px; }
}

/* ========================================= */
/* SEARCH BUBBLE CARDS - Download Tracking  */
/* ========================================= */

.search-bubble-section {
    padding: 32px 24px;
}

.search-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-bubble-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.4px;
}

.search-bubble-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(var(--accent-rgb), 1);
}

.search-bubble-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.search-bubble-card {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: linear-gradient(135deg,
            rgba(26, 26, 26, 0.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(var(--accent-rgb), 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.search-bubble-card:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(var(--accent-rgb), 0.3);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.2),
        0 0 15px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-bubble-card.all-completed {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.search-bubble-card.all-completed:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.3),
        0 0 15px rgba(var(--accent-rgb), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-bubble-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    overflow: hidden;
}

.search-bubble-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.6) 100%);
    border-radius: 50%;
}

.search-bubble-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    z-index: 2;
}

.search-bubble-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.search-bubble-artist {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.search-bubble-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.search-bubble-status-icon {
    font-size: 12px;
}

.search-bubble-status-text {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-bubble-type {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(var(--accent-rgb), 0.9);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    backdrop-filter: blur(4px);
}

/* Responsive search bubbles */
@media (max-width: 768px) {
    .search-bubble-card {
        width: 120px;
        height: 120px;
    }

    .search-bubble-name {
        font-size: 12px;
    }

    .search-bubble-artist {
        font-size: 11px;
    }
}

/* ========================================= */
/* ENHANCED SEARCH CATEGORIZED RESULTS      */
/* (OLD - REMOVE IF NOT NEEDED)             */
/* ========================================= */

/* Categorized Container */
.enh-sr-categorized-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Category Section */
.enh-sr-category-section {
    background: rgba(30, 30, 30, 0.5);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(138, 43, 226, 0.2);
}

.enh-sr-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2);
}

.enh-sr-category-icon {
    font-size: 20px;
}

.enh-sr-category-title {
    flex-grow: 1;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.enh-sr-category-count {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(123, 31, 162, 0.4));
    border: 1px solid rgba(138, 43, 226, 0.5);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Artist Grid (for both DB and Spotify artists) */
.enh-sr-artist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.enh-sr-artist-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.8), rgba(30, 30, 30, 0.8));
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.enh-sr-artist-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 43, 226, 0.6);
    box-shadow: 0 8px 24px rgba(138, 43, 226, 0.3);
}

.enh-sr-artist-image-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 12px;
    border: 3px solid rgba(138, 43, 226, 0.3);
}

.enh-sr-artist-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enh-sr-artist-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(123, 31, 162, 0.4));
    font-size: 36px;
}

.enh-sr-artist-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
    word-wrap: break-word;
}

.enh-sr-artist-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 600;
}

.enh-sr-artist-badge-library {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(24, 156, 71, 0.3));
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    color: rgba(var(--accent-rgb), 1);
}

.enh-sr-artist-badge-spotify {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(123, 31, 162, 0.3));
    border: 1px solid rgba(138, 43, 226, 0.5);
    color: rgba(138, 43, 226, 1);
}

/* Album Grid */
.enh-sr-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.enh-sr-album-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.8), rgba(30, 30, 30, 0.8));
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.enh-sr-album-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 43, 226, 0.6);
    box-shadow: 0 8px 24px rgba(138, 43, 226, 0.3);
}

.enh-sr-album-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(123, 31, 162, 0.3));
}

.enh-sr-album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enh-sr-album-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.enh-sr-album-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enh-sr-album-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.enh-sr-album-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
}

/* Track List */
.enh-sr-track-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.enh-sr-track-item {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.6), rgba(30, 30, 30, 0.6));
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.enh-sr-track-item:hover {
    border-color: rgba(138, 43, 226, 0.6);
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.8), rgba(40, 40, 40, 0.8));
    transform: translateX(4px);
}

.enh-sr-track-cover {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(123, 31, 162, 0.3));
}

.enh-sr-track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enh-sr-track-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.enh-sr-track-info {
    flex-grow: 1;
    min-width: 0;
}

.enh-sr-track-name {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enh-sr-track-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enh-sr-track-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    margin-left: 12px;
}

/* ========================================= */
/* SLSKD SEARCH RESULTS VIEW                */
/* ========================================= */

.enh-sr-slskd-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.enh-sr-back-btn {
    background: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(138, 43, 226, 0.4);
    border-radius: 10px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    align-self: flex-start;
}

.enh-sr-back-btn:hover {
    background: rgba(50, 50, 50, 0.9);
    border-color: rgba(138, 43, 226, 0.6);
    transform: translateX(-4px);
}

.enh-sr-back-icon {
    font-size: 16px;
}

.enh-sr-slskd-header {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(75, 0, 130, 0.15));
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.enh-sr-slskd-title {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.enh-sr-slskd-badge {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(123, 31, 162, 0.4));
    border: 1px solid rgba(138, 43, 226, 0.5);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.enh-sr-slskd-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Slskd Result Item (reuses download manager card styles with enh-sr prefix) */
.enh-sr-download-card {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.8), rgba(30, 30, 30, 0.8));
    border-radius: 12px;
    padding: 16px;
    border: 2px solid rgba(138, 43, 226, 0.2);
    transition: all 0.3s ease;
}

.enh-sr-download-card:hover {
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.2);
}

.enh-sr-download-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.enh-sr-download-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    flex-grow: 1;
}

.enh-sr-download-btn {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(123, 31, 162, 0.8));
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 12px;
}

.enh-sr-download-btn:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 1), rgba(123, 31, 162, 1));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
}

.enh-sr-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.enh-sr-meta-badge {
    background: rgba(50, 50, 50, 0.6);
    border-radius: 6px;
    padding: 4px 8px;
}

/* ============================================================================
   MUSICBRAINZ ENRICHMENT STATUS BUTTON - PHASE 5 WEB UI
   ============================================================================ */

/* Container for button + tooltip positioning */
.mb-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

/* MusicBrainz Button */
.musicbrainz-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(186, 85, 211, 0.12) 0%,
            rgba(147, 51, 156, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(186, 85, 211, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(186, 85, 211, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.musicbrainz-button:hover {
    background: linear-gradient(135deg,
            rgba(186, 85, 211, 0.18) 0%,
            rgba(147, 51, 156, 0.25) 100%);
    border-color: rgba(186, 85, 211, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(186, 85, 211, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.musicbrainz-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(186, 85, 211, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* MusicBrainz Logo */
.mb-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.musicbrainz-button:hover .mb-logo {
    opacity: 1;
}

/* Loading Spinner - Animated Ring */
.mb-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(186, 85, 211, 0.8);
    border-right-color: rgba(186, 85, 211, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active State - Spinner visible and rotating */
.musicbrainz-button.active .mb-spinner {
    opacity: 1;
    animation: mb-spin 1.2s linear infinite;
}

.musicbrainz-button.active {
    background: linear-gradient(135deg,
            rgba(186, 85, 211, 0.22) 0%,
            rgba(147, 51, 156, 0.28) 100%);
    border-color: rgba(186, 85, 211, 0.5);
    box-shadow:
        0 6px 24px rgba(186, 85, 211, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.musicbrainz-button.active .mb-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(186, 85, 211, 0.6));
}

/* Complete/Idle State */
.musicbrainz-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.musicbrainz-button.complete .mb-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.musicbrainz-button.complete .mb-spinner {
    opacity: 0;
}

/* Paused State */
.musicbrainz-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.musicbrainz-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

/* Spinner Rotation Animation */
@keyframes mb-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   MUSICBRAINZ HOVER TOOLTIP
   ============================================================================ */

.musicbrainz-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    /* 12px gap below button */
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.musicbrainz-button:hover+.musicbrainz-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(186, 85, 211, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(186, 85, 211, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(186, 85, 211, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tooltip-status,
.tooltip-current,
.tooltip-progress {
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.tooltip-status span,
.tooltip-current,
.tooltip-progress {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

#mb-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.musicbrainz-button.paused+.musicbrainz-tooltip #mb-tooltip-status {
    color: #ffc107;
}

/* Tooltip Arrow */
.tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(186, 85, 211, 0.3);
}

.tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ============================================================================
   AUDIODB ENRICHMENT STATUS BUTTON
   ============================================================================ */

/* Container for button + tooltip positioning */
.audiodb-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

/* AudioDB Button */
.audiodb-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.12) 0%,
            rgba(0, 150, 170, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(0, 188, 212, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(0, 188, 212, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.audiodb-button:hover {
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.18) 0%,
            rgba(0, 150, 170, 0.25) 100%);
    border-color: rgba(0, 188, 212, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(0, 188, 212, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.audiodb-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(0, 188, 212, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* AudioDB Logo */
.audiodb-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.audiodb-button:hover .audiodb-logo {
    opacity: 1;
}

/* Loading Spinner - Animated Ring */
.audiodb-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(0, 188, 212, 0.8);
    border-right-color: rgba(0, 188, 212, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active State - Spinner visible and rotating */
.audiodb-button.active .audiodb-spinner {
    opacity: 1;
    animation: audiodb-spin 1.2s linear infinite;
}

.audiodb-button.active {
    background: linear-gradient(135deg,
            rgba(0, 188, 212, 0.22) 0%,
            rgba(0, 150, 170, 0.28) 100%);
    border-color: rgba(0, 188, 212, 0.5);
    box-shadow:
        0 6px 24px rgba(0, 188, 212, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.audiodb-button.active .audiodb-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 188, 212, 0.6));
}

/* Complete/Idle State */
.audiodb-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.audiodb-button.complete .audiodb-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.audiodb-button.complete .audiodb-spinner {
    opacity: 0;
}

/* Paused State */
.audiodb-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.audiodb-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

/* Spinner Rotation Animation */
@keyframes audiodb-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   AUDIODB HOVER TOOLTIP
   ============================================================================ */

.audiodb-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.audiodb-button:hover+.audiodb-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.audiodb-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(0, 188, 212, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(0, 188, 212, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.audiodb-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 188, 212, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.audiodb-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#audiodb-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.audiodb-button.paused+.audiodb-tooltip #audiodb-tooltip-status {
    color: #ffc107;
}

/* AudioDB Tooltip Arrow */
.audiodb-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(0, 188, 212, 0.3);
}

.audiodb-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ============================================================================
   DEEZER ENRICHMENT STATUS BUTTON
   ============================================================================ */

/* Container for button + tooltip positioning */
/* Discogs Enrichment Button */
.discogs-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.discogs-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(51, 51, 51, 0.12) 0%,
            rgba(80, 80, 80, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(120, 120, 120, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(80, 80, 80, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.discogs-logo {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.discogs-button:hover {
    transform: scale(1.1);
    border-color: rgba(180, 180, 180, 0.4);
    box-shadow:
        0 6px 24px rgba(120, 120, 120, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Spinner ring */
.discogs-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(180, 180, 180, 0.8);
    border-right-color: rgba(180, 180, 180, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@keyframes discogs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Active State */
.discogs-button.active .discogs-spinner {
    opacity: 1;
    animation: discogs-spin 1.2s linear infinite;
}

.discogs-button.active {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.22) 0%,
            rgba(80, 80, 80, 0.28) 100%);
    border-color: rgba(180, 180, 180, 0.5);
    box-shadow:
        0 6px 24px rgba(120, 120, 120, 0.35),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.discogs-button.active .discogs-logo {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(200, 200, 200, 0.4));
}

/* Complete/Idle State */
.discogs-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.discogs-button.complete .discogs-logo {
    opacity: 0.8;
    filter: brightness(0) invert(0.6) sepia(1) saturate(3) hue-rotate(80deg);
}

.discogs-button.complete .discogs-spinner {
    opacity: 0;
}

/* Paused State */
.discogs-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.discogs-button.paused .discogs-logo {
    opacity: 0.5;
    filter: brightness(0) invert(0.6) sepia(1) saturate(5) hue-rotate(15deg);
}

.discogs-button.paused .discogs-spinner {
    opacity: 0;
}

/* Tooltip */
.discogs-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.discogs-button:hover+.discogs-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.discogs-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.discogs-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.discogs-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#discogs-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

/* ============================================================
   AMAZON MUSIC ENRICHMENT WORKER BUTTON
   ============================================================ */

.amazon-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.amazon-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(255, 153, 0, 0.10) 0%,
            rgba(255, 120, 0, 0.16) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(255, 153, 0, 0.22);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(255, 153, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amazon-enrich-logo {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.amazon-enrich-button:hover {
    transform: scale(1.1);
    border-color: rgba(255, 153, 0, 0.45);
    box-shadow:
        0 6px 24px rgba(255, 153, 0, 0.28),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.amazon-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 153, 0, 0.85);
    border-right-color: rgba(255, 153, 0, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

@keyframes amazon-enrich-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.amazon-enrich-button.active .amazon-enrich-spinner {
    opacity: 1;
    animation: amazon-enrich-spin 1.2s linear infinite;
}

.amazon-enrich-button.active {
    background: linear-gradient(135deg,
            rgba(255, 153, 0, 0.20) 0%,
            rgba(255, 100, 0, 0.26) 100%);
    border-color: rgba(255, 153, 0, 0.55);
    box-shadow:
        0 6px 24px rgba(255, 153, 0, 0.35),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.amazon-enrich-button.active .amazon-enrich-logo {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 180, 50, 0.5));
}

.amazon-enrich-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amazon-enrich-button.complete .amazon-enrich-logo {
    opacity: 0.8;
    filter: brightness(0) invert(0.6) sepia(1) saturate(3) hue-rotate(80deg);
}

.amazon-enrich-button.complete .amazon-enrich-spinner {
    opacity: 0;
}

.amazon-enrich-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.amazon-enrich-button.paused .amazon-enrich-logo {
    opacity: 0.5;
    filter: brightness(0) invert(0.6) sepia(1) saturate(5) hue-rotate(15deg);
}

.amazon-enrich-button.paused .amazon-enrich-spinner {
    opacity: 0;
}

.amazon-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.amazon-enrich-button:hover + .amazon-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.amazon-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.amazon-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.amazon-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#amazon-enrich-tooltip-status {
    color: #FF9900;
    font-weight: 600;
}

/* Similar Artists (MusicMap relationship worker) dashboard bubble — mirrors the
   per-source bubbles with a purple accent. The MusicMap logo is a wide branded
   image, so it's cover-cropped + rounded rather than icon-filtered. */
.similar-artists-enrich-button-container { position: relative; display: inline-block; margin-right: 12px; }
.similar-artists-enrich-button {
    position: relative; width: 44px; height: 44px;
    background: linear-gradient(135deg, rgba(168,85,247,0.10) 0%, rgba(124,58,237,0.16) 100%);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(168,85,247,0.22); border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 16px rgba(168,85,247,0.12), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.similar-artists-enrich-logo {
    width: 26px; height: 26px; opacity: 0.7; object-fit: cover; border-radius: 7px;
    transition: all 0.3s ease;
}
.similar-artists-enrich-button:hover {
    transform: scale(1.1); border-color: rgba(168,85,247,0.45);
    box-shadow: 0 6px 24px rgba(168,85,247,0.28), 0 3px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.12);
}
.similar-artists-enrich-spinner {
    position: absolute; width: 44px; height: 44px; border: 3px solid transparent;
    border-top-color: rgba(168,85,247,0.85); border-right-color: rgba(168,85,247,0.5);
    border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
@keyframes similar-artists-enrich-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.similar-artists-enrich-button.active .similar-artists-enrich-spinner { opacity: 1; animation: similar-artists-enrich-spin 1.2s linear infinite; }
.similar-artists-enrich-button.active {
    background: linear-gradient(135deg, rgba(168,85,247,0.20) 0%, rgba(124,58,237,0.26) 100%);
    border-color: rgba(168,85,247,0.55);
    box-shadow: 0 6px 24px rgba(168,85,247,0.35), 0 3px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.similar-artists-enrich-button.active .similar-artists-enrich-logo { opacity: 1; }
.similar-artists-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76,175,80,0.15) 0%, rgba(56,142,60,0.20) 100%);
    border-color: rgba(76,175,80,0.35);
    box-shadow: 0 4px 16px rgba(76,175,80,0.2), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.similar-artists-enrich-button.complete .similar-artists-enrich-spinner { opacity: 0; }
.similar-artists-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255,193,7,0.12) 0%, rgba(255,152,0,0.18) 100%);
    border-color: rgba(255,193,7,0.35);
    box-shadow: 0 4px 16px rgba(255,193,7,0.2), 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
.similar-artists-enrich-button.paused .similar-artists-enrich-logo { opacity: 0.5; }
.similar-artists-enrich-button.paused .similar-artists-enrich-spinner { opacity: 0; }
.similar-artists-enrich-tooltip {
    position: absolute; left: 50%; top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px); z-index: 5000;
    opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); pointer-events: none;
}
.similar-artists-enrich-button:hover + .similar-artists-enrich-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.similar-artists-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30,30,30,0.98) 0%, rgba(20,20,20,0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.similar-artists-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif; font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.95); letter-spacing: -0.2px; margin-bottom: 12px;
    padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.similar-artists-enrich-tooltip-body { display: flex; flex-direction: column; gap: 8px; }
#similar-artists-enrich-tooltip-status { color: #c084fc; font-weight: 600; }

.deezer-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

/* Deezer Button */
.deezer-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(162, 56, 255, 0.12) 0%,
            rgba(120, 30, 200, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(162, 56, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(162, 56, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.deezer-button:hover {
    background: linear-gradient(135deg,
            rgba(162, 56, 255, 0.18) 0%,
            rgba(120, 30, 200, 0.25) 100%);
    border-color: rgba(162, 56, 255, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(162, 56, 255, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.deezer-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(162, 56, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Deezer Logo */
.deezer-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.deezer-button:hover .deezer-logo {
    opacity: 1;
}

/* Loading Spinner - Animated Ring */
.deezer-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(162, 56, 255, 0.8);
    border-right-color: rgba(162, 56, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active State - Spinner visible and rotating */
.deezer-button.active .deezer-spinner {
    opacity: 1;
    animation: deezer-spin 1.2s linear infinite;
}

.deezer-button.active {
    background: linear-gradient(135deg,
            rgba(162, 56, 255, 0.22) 0%,
            rgba(120, 30, 200, 0.28) 100%);
    border-color: rgba(162, 56, 255, 0.5);
    box-shadow:
        0 6px 24px rgba(162, 56, 255, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.deezer-button.active .deezer-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(162, 56, 255, 0.6));
}

/* Complete/Idle State */
.deezer-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.deezer-button.complete .deezer-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.deezer-button.complete .deezer-spinner {
    opacity: 0;
}

/* Paused State */
.deezer-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.deezer-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

/* Spinner Rotation Animation */
@keyframes deezer-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   DEEZER HOVER TOOLTIP
   ============================================================================ */

.deezer-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.deezer-button:hover+.deezer-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.deezer-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(162, 56, 255, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(162, 56, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.deezer-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(162, 56, 255, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.deezer-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#deezer-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.deezer-button.paused+.deezer-tooltip #deezer-tooltip-status {
    color: #ffc107;
}

/* Deezer Tooltip Arrow */
.deezer-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(162, 56, 255, 0.3);
}

.deezer-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* JioSaavn enrichment bubble (teal #2bc5b4) */
.jiosaavn-button-container { position: relative; display: inline-block; margin-right: 12px; }
.jiosaavn-button {
    position: relative; width: 44px; height: 44px;
    background: linear-gradient(135deg, rgba(43, 197, 180, 0.12) 0%, rgba(30, 160, 145, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(43, 197, 180, 0.25); border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(43, 197, 180, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.jiosaavn-button:hover { border-color: rgba(43, 197, 180, 0.4); transform: scale(1.05); }
.jiosaavn-logo { font-size: 20px; line-height: 1; opacity: 0.9; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.jiosaavn-spinner {
    position: absolute; width: 44px; height: 44px; border: 3px solid transparent;
    border-top-color: rgba(43, 197, 180, 0.8); border-right-color: rgba(43, 197, 180, 0.5);
    border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.jiosaavn-button.active .jiosaavn-spinner { opacity: 1; animation: jiosaavn-spin 1.2s linear infinite; }
.jiosaavn-button.active { border-color: rgba(43, 197, 180, 0.5); }
.jiosaavn-button.complete { border-color: rgba(76, 175, 80, 0.35); }
.jiosaavn-button.complete .jiosaavn-spinner { opacity: 0; }
.jiosaavn-button.paused { border-color: rgba(255, 193, 7, 0.35); }
@keyframes jiosaavn-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.jiosaavn-tooltip {
    position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%) translateY(-5px);
    z-index: 5000; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;
}
.jiosaavn-button:hover + .jiosaavn-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.jiosaavn-tooltip-content {
    min-width: 260px; background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    border: 1px solid rgba(43, 197, 180, 0.3); border-radius: 16px; padding: 16px 18px;
}
.jiosaavn-tooltip-header { font-size: 13px; font-weight: 600; color: rgba(43, 197, 180, 0.95); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.jiosaavn-tooltip-body { display: flex; flex-direction: column; gap: 8px; }
#jiosaavn-tooltip-status { color: rgb(var(--accent-light-rgb)); font-weight: 600; }
.jiosaavn-button.paused + .jiosaavn-tooltip #jiosaavn-tooltip-status { color: #ffc107; }

/* ============================================================================
   SPOTIFY ENRICHMENT STATUS BUTTON
   ============================================================================ */

.spotify-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.spotify-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(30, 215, 96, 0.12) 0%,
            rgba(21, 150, 67, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(30, 215, 96, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(30, 215, 96, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spotify-enrich-button:hover {
    background: linear-gradient(135deg,
            rgba(30, 215, 96, 0.18) 0%,
            rgba(21, 150, 67, 0.25) 100%);
    border-color: rgba(30, 215, 96, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(30, 215, 96, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spotify-enrich-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(30, 215, 96, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.spotify-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.spotify-enrich-button:hover .spotify-enrich-logo {
    opacity: 1;
}

.spotify-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(30, 215, 96, 0.8);
    border-right-color: rgba(30, 215, 96, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.spotify-enrich-button.active .spotify-enrich-spinner {
    opacity: 1;
    animation: spotify-enrich-spin 1.2s linear infinite;
}

.spotify-enrich-button.active {
    background: linear-gradient(135deg,
            rgba(30, 215, 96, 0.22) 0%,
            rgba(21, 150, 67, 0.28) 100%);
    border-color: rgba(30, 215, 96, 0.5);
    box-shadow:
        0 6px 24px rgba(30, 215, 96, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.spotify-enrich-button.active .spotify-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(30, 215, 96, 0.6));
}

.spotify-enrich-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spotify-enrich-button.complete .spotify-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.spotify-enrich-button.complete .spotify-enrich-spinner {
    opacity: 0;
}

.spotify-enrich-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spotify-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

.spotify-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.spotify-enrich-button.no-auth .spotify-enrich-logo {
    filter: grayscale(1) opacity(0.4);
}

.spotify-enrich-button.no-auth .spotify-enrich-spinner {
    display: none;
}

.spotify-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.spotify-enrich-button.no-auth+.spotify-enrich-tooltip #spotify-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

@keyframes spotify-enrich-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================================
   SPOTIFY ENRICHMENT HOVER TOOLTIP
   ============================================================================ */

.spotify-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.spotify-enrich-button:hover+.spotify-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.spotify-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(30, 215, 96, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(30, 215, 96, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.spotify-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(30, 215, 96, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spotify-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#spotify-enrich-tooltip-status {
    color: rgb(30, 215, 96);
    font-weight: 600;
}

.spotify-enrich-button.paused+.spotify-enrich-tooltip #spotify-enrich-tooltip-status {
    color: #ffc107;
}

.spotify-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 215, 96, 0.3);
}

.spotify-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ============================================================================
   ITUNES ENRICHMENT STATUS BUTTON
   ============================================================================ */

.itunes-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.itunes-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(251, 91, 137, 0.12) 0%,
            rgba(164, 69, 178, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(251, 91, 137, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(251, 91, 137, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.itunes-enrich-button:hover {
    background: linear-gradient(135deg,
            rgba(251, 91, 137, 0.18) 0%,
            rgba(164, 69, 178, 0.25) 100%);
    border-color: rgba(251, 91, 137, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(251, 91, 137, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.itunes-enrich-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(251, 91, 137, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.itunes-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.itunes-enrich-button:hover .itunes-enrich-logo {
    opacity: 1;
}

.itunes-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(251, 91, 137, 0.8);
    border-right-color: rgba(164, 69, 178, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.itunes-enrich-button.active .itunes-enrich-spinner {
    opacity: 1;
    animation: itunes-enrich-spin 1.2s linear infinite;
}

.itunes-enrich-button.active {
    background: linear-gradient(135deg,
            rgba(251, 91, 137, 0.22) 0%,
            rgba(164, 69, 178, 0.28) 100%);
    border-color: rgba(251, 91, 137, 0.5);
    box-shadow:
        0 6px 24px rgba(251, 91, 137, 0.4),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.itunes-enrich-button.active .itunes-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(251, 91, 137, 0.6));
}

.itunes-enrich-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.itunes-enrich-button.complete .itunes-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.itunes-enrich-button.complete .itunes-enrich-spinner {
    opacity: 0;
}

.itunes-enrich-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.itunes-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes itunes-enrich-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================================
   ITUNES ENRICHMENT HOVER TOOLTIP
   ============================================================================ */

.itunes-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.itunes-enrich-button:hover+.itunes-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.itunes-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(251, 91, 137, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(251, 91, 137, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.itunes-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(251, 91, 137, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.itunes-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#itunes-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.itunes-enrich-button.paused+.itunes-enrich-tooltip #itunes-enrich-tooltip-status {
    color: #ffc107;
}

.itunes-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(251, 91, 137, 0.3);
}

.itunes-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   LAST.FM ENRICHMENT STATUS BUTTON
   ======================================== */

.lastfm-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.lastfm-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(213, 16, 7, 0.12) 0%, rgba(180, 10, 5, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(213, 16, 7, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(213, 16, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lastfm-enrich-button:hover {
    background: linear-gradient(135deg, rgba(213, 16, 7, 0.18) 0%, rgba(180, 10, 5, 0.25) 100%);
    border-color: rgba(213, 16, 7, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(213, 16, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lastfm-enrich-button:active {
    transform: scale(0.95);
}

.lastfm-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    border-radius: 50%;
}

.lastfm-enrich-button:hover .lastfm-enrich-logo {
    opacity: 1;
}

.lastfm-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(213, 16, 7, 0.8);
    border-right-color: rgba(213, 16, 7, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lastfm-enrich-button.active .lastfm-enrich-spinner {
    opacity: 1;
    animation: lastfm-spin 1.2s linear infinite;
}

.lastfm-enrich-button.active {
    background: linear-gradient(135deg, rgba(213, 16, 7, 0.22) 0%, rgba(180, 10, 5, 0.28) 100%);
    border-color: rgba(213, 16, 7, 0.5);
    box-shadow: 0 6px 24px rgba(213, 16, 7, 0.4), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lastfm-enrich-button.active .lastfm-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(213, 16, 7, 0.6));
}

.lastfm-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lastfm-enrich-button.complete .lastfm-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.lastfm-enrich-button.complete .lastfm-enrich-spinner {
    opacity: 0;
}

.lastfm-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lastfm-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes lastfm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.lastfm-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.lastfm-enrich-button:hover+.lastfm-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.lastfm-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(213, 16, 7, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(213, 16, 7, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lastfm-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(213, 16, 7, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lastfm-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#lastfm-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.lastfm-enrich-button.paused+.lastfm-enrich-tooltip #lastfm-enrich-tooltip-status {
    color: #ffc107;
}

.lastfm-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.lastfm-enrich-button.no-auth .lastfm-enrich-logo {
    filter: grayscale(1) opacity(0.4);
}

.lastfm-enrich-button.no-auth .lastfm-enrich-spinner {
    display: none;
}

.lastfm-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.lastfm-enrich-button.no-auth+.lastfm-enrich-tooltip #lastfm-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

.lastfm-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(213, 16, 7, 0.3);
}

.lastfm-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   GENIUS ENRICHMENT STATUS BUTTON
   ======================================== */

.genius-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.genius-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 255, 100, 0.10) 0%, rgba(200, 200, 50, 0.16) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(255, 255, 100, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(255, 255, 100, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.genius-enrich-button:hover {
    background: linear-gradient(135deg, rgba(255, 255, 100, 0.16) 0%, rgba(200, 200, 50, 0.22) 100%);
    border-color: rgba(255, 255, 100, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 255, 100, 0.25), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.genius-enrich-button:active {
    transform: scale(0.95);
}

.genius-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    border-radius: 50%;
}

.genius-enrich-button:hover .genius-enrich-logo {
    opacity: 1;
}

.genius-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 255, 100, 0.8);
    border-right-color: rgba(255, 255, 100, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.genius-enrich-button.active .genius-enrich-spinner {
    opacity: 1;
    animation: genius-spin 1.2s linear infinite;
}

.genius-enrich-button.active {
    background: linear-gradient(135deg, rgba(255, 255, 100, 0.20) 0%, rgba(200, 200, 50, 0.26) 100%);
    border-color: rgba(255, 255, 100, 0.5);
    box-shadow: 0 6px 24px rgba(255, 255, 100, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.genius-enrich-button.active .genius-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 100, 0.6));
}

.genius-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.genius-enrich-button.complete .genius-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.genius-enrich-button.complete .genius-enrich-spinner {
    opacity: 0;
}

.genius-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.genius-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes genius-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.genius-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.genius-enrich-button:hover+.genius-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.genius-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255, 255, 100, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(255, 255, 100, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.genius-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 100, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.genius-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#genius-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.genius-enrich-button.paused+.genius-enrich-tooltip #genius-enrich-tooltip-status {
    color: #ffc107;
}

.genius-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.genius-enrich-button.no-auth .genius-enrich-logo {
    filter: grayscale(1) opacity(0.4);
}

.genius-enrich-button.no-auth .genius-enrich-spinner {
    display: none;
}

.genius-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.genius-enrich-button.no-auth+.genius-enrich-tooltip #genius-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

.genius-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 100, 0.3);
}

.genius-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   BANDCAMP ENRICHMENT STATUS BUTTON
   ======================================== */

.bandcamp-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.bandcamp-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(29, 160, 195, 0.10) 0%, rgba(20, 130, 165, 0.16) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(29, 160, 195, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(29, 160, 195, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bandcamp-enrich-button:hover {
    background: linear-gradient(135deg, rgba(29, 160, 195, 0.16) 0%, rgba(20, 130, 165, 0.22) 100%);
    border-color: rgba(29, 160, 195, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(29, 160, 195, 0.25), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bandcamp-enrich-button:active {
    transform: scale(0.95);
}

.bandcamp-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    border-radius: 50%;
}

.bandcamp-enrich-button:hover .bandcamp-enrich-logo {
    opacity: 1;
}

.bandcamp-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(29, 160, 195, 0.8);
    border-right-color: rgba(29, 160, 195, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bandcamp-enrich-button.active .bandcamp-enrich-spinner {
    opacity: 1;
    animation: bandcamp-spin 1.2s linear infinite;
}

.bandcamp-enrich-button.active {
    background: linear-gradient(135deg, rgba(29, 160, 195, 0.20) 0%, rgba(20, 130, 165, 0.26) 100%);
    border-color: rgba(29, 160, 195, 0.5);
    box-shadow: 0 6px 24px rgba(29, 160, 195, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.bandcamp-enrich-button.active .bandcamp-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(29, 160, 195, 0.6));
}

.bandcamp-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bandcamp-enrich-button.complete .bandcamp-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.bandcamp-enrich-button.complete .bandcamp-enrich-spinner {
    opacity: 0;
}

.bandcamp-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bandcamp-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes bandcamp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bandcamp-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.bandcamp-enrich-button:hover+.bandcamp-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.bandcamp-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(29, 160, 195, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(29, 160, 195, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bandcamp-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(29, 160, 195, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bandcamp-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bandcamp-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.bandcamp-enrich-button.paused+.bandcamp-enrich-tooltip #bandcamp-enrich-tooltip-status {
    color: #ffc107;
}

.bandcamp-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.bandcamp-enrich-button.no-auth .bandcamp-enrich-logo {
    filter: grayscale(1) opacity(0.4);
}

.bandcamp-enrich-button.no-auth .bandcamp-enrich-spinner {
    display: none;
}

.bandcamp-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.bandcamp-enrich-button.no-auth+.bandcamp-enrich-tooltip #bandcamp-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

.bandcamp-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(29, 160, 195, 0.3);
}

.bandcamp-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   TIDAL ENRICHMENT STATUS BUTTON
   ======================================== */

.tidal-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.tidal-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(30, 30, 30, 0.22) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tidal-enrich-button:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(30, 30, 30, 0.30) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.tidal-enrich-button:active {
    transform: scale(0.95);
}

.tidal-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) invert(1) brightness(1.8);
    border-radius: 50%;
}

.tidal-enrich-button:hover .tidal-enrich-logo {
    opacity: 1;
}

.tidal-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.8);
    border-right-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tidal-enrich-button.active .tidal-enrich-spinner {
    opacity: 1;
    animation: tidal-spin 1.2s linear infinite;
}

.tidal-enrich-button.active {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.28) 0%, rgba(30, 30, 30, 0.36) 100%);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.tidal-enrich-button.active .tidal-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) invert(1) brightness(1.8);
}

.tidal-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tidal-enrich-button.complete .tidal-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5)) invert(1) brightness(1.8);
}

.tidal-enrich-button.complete .tidal-enrich-spinner {
    opacity: 0;
}

.tidal-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tidal-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes tidal-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tidal-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.tidal-enrich-button:hover+.tidal-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tidal-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tidal-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tidal-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#tidal-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.tidal-enrich-button.paused+.tidal-enrich-tooltip #tidal-enrich-tooltip-status {
    color: #ffc107;
}

.tidal-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.tidal-enrich-button.no-auth .tidal-enrich-logo {
    filter: grayscale(1) opacity(0.4) invert(1) brightness(1.8);
}

.tidal-enrich-button.no-auth .tidal-enrich-spinner {
    display: none;
}

.tidal-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.tidal-enrich-button.no-auth+.tidal-enrich-tooltip #tidal-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

.tidal-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.3);
}

.tidal-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   QOBUZ ENRICHMENT STATUS BUTTON
   ======================================== */

.qobuz-enrich-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.qobuz-enrich-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(1, 112, 239, 0.10) 0%, rgba(1, 90, 200, 0.16) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(1, 112, 239, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(1, 112, 239, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.qobuz-enrich-button:hover {
    background: linear-gradient(135deg, rgba(1, 112, 239, 0.16) 0%, rgba(1, 90, 200, 0.22) 100%);
    border-color: rgba(1, 112, 239, 0.4);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(1, 112, 239, 0.25), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.qobuz-enrich-button:active {
    transform: scale(0.95);
}

.qobuz-enrich-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) invert(1);
    border-radius: 50%;
}

.qobuz-enrich-button:hover .qobuz-enrich-logo {
    opacity: 1;
}

.qobuz-enrich-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(1, 112, 239, 0.8);
    border-right-color: rgba(1, 112, 239, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.qobuz-enrich-button.active .qobuz-enrich-spinner {
    opacity: 1;
    animation: qobuz-spin 1.2s linear infinite;
}

.qobuz-enrich-button.active {
    background: linear-gradient(135deg, rgba(1, 112, 239, 0.20) 0%, rgba(1, 90, 200, 0.26) 100%);
    border-color: rgba(1, 112, 239, 0.5);
    box-shadow: 0 6px 24px rgba(1, 112, 239, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.qobuz-enrich-button.active .qobuz-enrich-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(1, 112, 239, 0.6)) invert(1);
}

.qobuz-enrich-button.complete {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.qobuz-enrich-button.complete .qobuz-enrich-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5)) invert(1);
}

.qobuz-enrich-button.complete .qobuz-enrich-spinner {
    opacity: 0;
}

.qobuz-enrich-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.qobuz-enrich-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0, 0, 0, 0.2);
}

@keyframes qobuz-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.qobuz-enrich-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.qobuz-enrich-button:hover+.qobuz-enrich-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.qobuz-enrich-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(1, 112, 239, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(1, 112, 239, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.qobuz-enrich-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(1, 112, 239, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.qobuz-enrich-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#qobuz-enrich-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.qobuz-enrich-button.paused+.qobuz-enrich-tooltip #qobuz-enrich-tooltip-status {
    color: #ffc107;
}

.qobuz-enrich-button.no-auth {
    background: linear-gradient(135deg,
            rgba(120, 120, 120, 0.08) 0%,
            rgba(80, 80, 80, 0.12) 100%);
    border-color: rgba(120, 120, 120, 0.25);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    opacity: 0.5;
    cursor: not-allowed;
}

.qobuz-enrich-button.no-auth .qobuz-enrich-logo {
    filter: grayscale(1) opacity(0.4) invert(1);
}

.qobuz-enrich-button.no-auth .qobuz-enrich-spinner {
    display: none;
}

.qobuz-enrich-button.no-auth:hover {
    border-color: rgba(120, 120, 120, 0.35);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15);
    opacity: 0.55;
}

.qobuz-enrich-button.no-auth+.qobuz-enrich-tooltip #qobuz-enrich-tooltip-status {
    color: rgba(120, 120, 120, 0.8);
}

.qobuz-enrich-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(1, 112, 239, 0.3);
}

.qobuz-enrich-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ========================================
   HYDRABASE P2P MIRROR WORKER BUTTON
   ======================================== */

.hydrabase-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.hydrabase-button {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: visible;
    padding: 0;
}

.hydrabase-button:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
}

.hydrabase-button:active {
    transform: scale(0.95);
}

.hydrabase-worker-logo {
    width: 24px;
    height: 24px;
    opacity: 0.85;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
    z-index: 1;
}

.hydrabase-spinner {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 44px;
    height: 44px;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.6);
    border-right-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active state — white spinning */
.hydrabase-button.active .hydrabase-spinner {
    opacity: 1;
    animation: hydrabase-spin 1.2s linear infinite;
}

.hydrabase-button.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.hydrabase-button.active .hydrabase-worker-logo {
    opacity: 1;
}

/* Paused state — yellow/orange */
.hydrabase-button.paused {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 152, 0, 0.10) 100%);
    border-color: rgba(255, 193, 7, 0.45);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.1);
}

.hydrabase-button.paused .hydrabase-worker-logo {
    opacity: 0.7;
    filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(15deg);
}

.hydrabase-button.paused .hydrabase-spinner {
    opacity: 0;
}

@keyframes hydrabase-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Tooltip */
.hydrabase-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.hydrabase-button-container:hover .hydrabase-tooltip {
    opacity: 1;
    visibility: visible;
}

.hydrabase-tooltip-content {
    min-width: 180px;
    background: rgba(30, 30, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.hydrabase-tooltip-header {
    font-weight: 600;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.hydrabase-tooltip-body {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.hydrabase-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(255, 255, 255, 0.25);
}

.hydrabase-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ============================================================================
   LIBRARY REPAIR WORKER STATUS BUTTON
   ============================================================================ */

/* Rainbow color animation */
@keyframes rainbow-glow {
    0%   { box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(255, 0, 0, 0.4); }
    17%  { box-shadow: 0 4px 16px rgba(255, 136, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(255, 136, 0, 0.4); }
    33%  { box-shadow: 0 4px 16px rgba(255, 255, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 0, 0.4); }
    50%  { box-shadow: 0 4px 16px rgba(0, 255, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(0, 255, 0, 0.4); }
    67%  { box-shadow: 0 4px 16px rgba(0, 136, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(0, 136, 255, 0.4); }
    83%  { box-shadow: 0 4px 16px rgba(136, 0, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(136, 0, 255, 0.4); }
    100% { box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15); border-color: rgba(255, 0, 0, 0.4); }
}

@keyframes rainbow-border {
    0%   { border-color: rgba(255, 0, 0, 0.5); }
    17%  { border-color: rgba(255, 136, 0, 0.5); }
    33%  { border-color: rgba(255, 255, 0, 0.5); }
    50%  { border-color: rgba(0, 255, 0, 0.5); }
    67%  { border-color: rgba(0, 136, 255, 0.5); }
    83%  { border-color: rgba(136, 0, 255, 0.5); }
    100% { border-color: rgba(255, 0, 0, 0.5); }
}

@keyframes rainbow-spinner {
    0%   { border-top-color: rgba(255, 0, 0, 0.8); border-right-color: rgba(255, 136, 0, 0.5); }
    17%  { border-top-color: rgba(255, 136, 0, 0.8); border-right-color: rgba(255, 255, 0, 0.5); }
    33%  { border-top-color: rgba(255, 255, 0, 0.8); border-right-color: rgba(0, 255, 0, 0.5); }
    50%  { border-top-color: rgba(0, 255, 0, 0.8); border-right-color: rgba(0, 136, 255, 0.5); }
    67%  { border-top-color: rgba(0, 136, 255, 0.8); border-right-color: rgba(136, 0, 255, 0.5); }
    83%  { border-top-color: rgba(136, 0, 255, 0.8); border-right-color: rgba(255, 0, 0, 0.5); }
    100% { border-top-color: rgba(255, 0, 0, 0.8); border-right-color: rgba(255, 136, 0, 0.5); }
}

@keyframes repair-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Container */
.repair-button-container {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

/* Base Button */
.repair-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(180, 130, 255, 0.12) 0%,
            rgba(130, 80, 220, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(180, 130, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(180, 130, 255, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.repair-button:hover {
    background: linear-gradient(135deg,
            rgba(180, 130, 255, 0.18) 0%,
            rgba(130, 80, 220, 0.25) 100%);
    border-color: rgba(180, 130, 255, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(180, 130, 255, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.repair-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(180, 130, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Logo */
.repair-logo {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.repair-button:hover .repair-logo {
    opacity: 1;
}

/* Spinner Ring */
.repair-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(180, 130, 255, 0.8);
    border-right-color: rgba(180, 130, 255, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active State — Rainbow! */
.repair-button.active .repair-spinner {
    opacity: 1;
    animation: repair-spin 1.2s linear infinite, rainbow-spinner 3s linear infinite;
}

.repair-button.active {
    animation: rainbow-glow 3s linear infinite;
    background: linear-gradient(135deg,
            rgba(180, 130, 255, 0.22) 0%,
            rgba(130, 80, 220, 0.28) 100%);
}

.repair-button.active .repair-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(180, 130, 255, 0.6));
}

/* Complete/Idle State */
.repair-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.repair-button.complete .repair-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.repair-button.complete .repair-spinner {
    opacity: 0;
}

/* Paused State */
.repair-button.paused {
    background: linear-gradient(135deg,
            rgba(255, 193, 7, 0.12) 0%,
            rgba(255, 152, 0, 0.18) 100%);
    border-color: rgba(255, 193, 7, 0.35);
    box-shadow:
        0 4px 16px rgba(255, 193, 7, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.repair-button.paused:hover {
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow:
        0 6px 20px rgba(255, 193, 7, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   REPAIR WORKER HOVER TOOLTIP
   ============================================================================ */

.repair-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.repair-button:hover+.repair-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.repair-tooltip-content {
    min-width: 280px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(180, 130, 255, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(180, 130, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.repair-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(180, 130, 255, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.repair-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#repair-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.repair-button.paused+.repair-tooltip #repair-tooltip-status {
    color: #ffc107;
}

/* Tooltip Arrow */
.repair-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(180, 130, 255, 0.3);
}

.repair-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* ============================================================================
   SOULID WORKER BUTTON + TOOLTIP
   Uses SoulSync logo (whisoul.png) with rainbow spinner like repair worker
   ============================================================================ */

.soulid-button-container {
    position: relative;
    display: flex;
    align-items: center;
}

.soulid-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(29, 185, 84, 0.12) 0%,
            rgba(100, 80, 220, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(29, 185, 84, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(29, 185, 84, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.soulid-button:hover {
    background: linear-gradient(135deg,
            rgba(29, 185, 84, 0.18) 0%,
            rgba(100, 80, 220, 0.25) 100%);
    border-color: rgba(29, 185, 84, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(29, 185, 84, 0.25),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.soulid-button:active {
    transform: scale(0.95);
}

.soulid-logo {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.soulid-button:hover .soulid-logo {
    opacity: 1;
}

.soulid-spinner {
    position: absolute;
    width: 44px;
    height: 44px;
    border: 3px solid transparent;
    border-top-color: rgba(29, 185, 84, 0.8);
    border-right-color: rgba(100, 80, 220, 0.5);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Active State — Rainbow spinner */
.soulid-button.active .soulid-spinner {
    opacity: 1;
    animation: repair-spin 1.2s linear infinite, rainbow-spinner 3s linear infinite;
}

.soulid-button.active {
    animation: rainbow-glow 3s linear infinite;
    background: linear-gradient(135deg,
            rgba(29, 185, 84, 0.22) 0%,
            rgba(100, 80, 220, 0.28) 100%);
}

.soulid-button.active .soulid-logo {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(29, 185, 84, 0.6));
}

/* Complete/Idle State */
.soulid-button.complete {
    background: linear-gradient(135deg,
            rgba(76, 175, 80, 0.15) 0%,
            rgba(56, 142, 60, 0.20) 100%);
    border-color: rgba(76, 175, 80, 0.35);
    box-shadow:
        0 4px 16px rgba(76, 175, 80, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.soulid-button.complete .soulid-logo {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(76, 175, 80, 0.5));
}

.soulid-button.complete .soulid-spinner {
    opacity: 0;
}

/* Tooltip */
.soulid-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);
    transform: translateX(-50%) translateY(-5px);
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.soulid-button:hover+.soulid-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.soulid-tooltip-content {
    min-width: 260px;
    background: linear-gradient(135deg,
            rgba(30, 30, 30, 0.98) 0%,
            rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid rgba(29, 185, 84, 0.3);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 6px 20px rgba(29, 185, 84, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.soulid-tooltip-header {
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(29, 185, 84, 0.95);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.soulid-tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#soulid-tooltip-status {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

/* Tooltip Arrow */
.soulid-tooltip-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(29, 185, 84, 0.3);
}

.soulid-tooltip-content::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgba(30, 30, 30, 0.98);
}

/* MusicBrainz Integration */
.release-card {
    position: relative !important;
    /* Ensure positioning context */
}

.mb-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle;
}

.mb-link-btn:hover {
    background: rgba(186, 71, 143, 0.4);
    /* MusicBrainz Purple-ish */
    border-color: rgba(186, 71, 143, 0.6);
    transform: translateY(-1px);
}

.mb-link-btn img,
.mb-link-btn svg {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Legacy .mb-card-icon override removed — now handled by .source-card-icon inside .card-badge-container */

/* Badge container for artist cards */
.card-badge-container {
    position: absolute;
    top: 8px;
    align-items: flex-end;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 100;
}

.source-card-icon {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9 !important;
    transition: transform 0.2s;
    cursor: pointer;
    color: white;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Invert dark SVG logos on library artist cards (Tidal and Qobuz) */
.library-artist-card .source-card-icon[title="Tidal"] img,
.library-artist-card .source-card-icon[title="Qobuz"] img {
    filter: invert(1);
}

.source-card-icon:hover {
    transform: scale(1.1);
    opacity: 1 !important;
}

.mb-card-icon:hover {
    transform: scale(1.1);
    background: #d466a9;
    opacity: 1 !important;
}

.deezer-card-icon:hover {
    background: #a238ff;
}

.audiodb-card-icon:hover {
    background: #1a6bc4;
}

.spotify-card-icon:hover {
    background: #1db954;
}

.itunes-card-icon:hover {
    background: #fc3c44;
}

.lastfm-card-icon:hover {
    background: #d51007;
}

.genius-card-icon:hover {
    background: #ffff64;
}

.tidal-card-icon:hover {
    background: #000000;
}

.qobuz-card-icon:hover {
    background: #0170ef;
}

.tidal-card-icon img,
.qobuz-card-icon img {
    filter: invert(1);
}

/* Two-column badge layout for overflow */
.card-badge-container:has(.badge-overflow-column) {
    flex-direction: row;
    gap: 3px;
    align-items: flex-start;
}

.badge-primary-column,
.badge-overflow-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.badge-overflow-column {
    width: 24px;
    flex-shrink: 0;
}

.watch-card-icon {
    cursor: pointer;
    font-size: 10px;
    white-space: nowrap;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    align-self: flex-end;
    overflow: hidden;
    transition: width 0.25s ease, padding 0.25s ease;
}
.watch-icon-emoji {
    flex-shrink: 0;
}
.watch-icon-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease 0.05s, max-width 0.25s ease;
}
.library-artist-card:hover .watch-card-icon {
    width: auto !important;
    padding: 3px 7px !important;
}
.library-artist-card:hover .watch-icon-label {
    opacity: 1;
    max-width: 60px;
    margin-left: 2px;
}
.watch-card-icon.watched {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.4);
}
.watch-card-icon:hover {
    background: rgba(255, 193, 7, 0.35);
}

/* Artist detail page source link buttons */
.source-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-left: 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    vertical-align: middle;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.source-link-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.source-link-btn img {
    height: 20px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.source-link-btn span {
    vertical-align: middle;
}

@media (max-width: 768px) {
    .source-link-btn {
        padding: 4px 10px;
        margin-left: 6px;
        font-size: 0;
    }

    .source-link-btn img {
        height: 18px;
    }

    .source-link-btn span {
        display: none;
    }
}

.watchlist-card-icon {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    z-index: 100;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.library-card-watchlist-btn {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #e0e0e0;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    z-index: 100;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.library-artist-card:hover .library-card-watchlist-btn {
    opacity: 1;
}

.library-card-watchlist-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: #fff;
    transform: scale(1.05);
}

.library-card-watchlist-btn.watching {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.4);
    opacity: 1;
}

.library-card-watchlist-btn.watching:hover {
    background: rgba(255, 193, 7, 0.35);
    border-color: rgba(255, 193, 7, 0.6);
    color: #fff;
}

.library-card-watchlist-btn:disabled {
    opacity: 0.5;
    cursor: wait;
    transform: none;
}

.library-card-watchlist-btn .watchlist-icon {
    font-size: 12px;
}

.library-card-watchlist-btn .watchlist-text {
    line-height: 1;
}

/* ============================= */
/* IMPORT MODAL                  */
/* ============================= */

.import-button {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.12) 0%,
            rgba(99, 39, 196, 0.18) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(124, 58, 237, 0.25);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px rgba(124, 58, 237, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 0;
}

.import-button:hover {
    background: linear-gradient(135deg,
            rgba(124, 58, 237, 0.18) 0%,
            rgba(99, 39, 196, 0.25) 100%);
    border-color: rgba(124, 58, 237, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 6px 20px rgba(124, 58, 237, 0.3),
        0 3px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.import-button:active {
    transform: scale(0.95);
    box-shadow:
        0 2px 8px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.import-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    filter: invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.import-button:hover .import-logo {
    opacity: 1;
}

/* ========================================
   FAILED DOWNLOAD ERROR TOOLTIP
   ======================================== */

.has-error-tooltip {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

#error-tooltip-popup {
    position: fixed;
    display: none;
    min-width: 220px;
    max-width: 480px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98), rgba(20, 20, 20, 0.99));
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    text-align: left;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

#error-tooltip-popup.visible {
    display: block;
    opacity: 1;
}

#error-tooltip-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(244, 67, 54, 0.3);
}

/* =====================================
   SEARCH CANDIDATES MODAL
   ===================================== */

.has-candidates {
    cursor: pointer !important;
    text-decoration: underline dotted !important;
}
.has-candidates:hover {
    color: rgb(var(--accent-rgb)) !important;
}

.candidates-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.candidates-modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.candidates-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    width: 90%;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.candidates-modal-overlay.visible .candidates-modal {
    transform: scale(1);
}

.candidates-modal-header {
    padding: 20px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.candidates-modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.candidates-modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    margin-top: 4px;
}
.candidates-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.candidates-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Quarantine chooser (download-modal status click) ───────────────────── */
.quarantine-chooser-modal {
    max-width: 540px;
}
.quarantine-chooser-track {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    margin-top: 4px;
}
.quarantine-chooser-body {
    padding: 22px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.quarantine-chooser-reason {
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
}
.quarantine-chooser-listen {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quarantine-chooser-listen label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.quarantine-chooser-listen audio {
    width: 100%;
}
.quarantine-chooser-muted {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-style: italic;
}
.quarantine-chooser-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quarantine-chooser-btn {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.quarantine-chooser-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}
.quarantine-chooser-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.quarantine-chooser-accept {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.15);
}
.quarantine-chooser-accept:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.28);
}

/* ── Track Detail modal ─────────────────────────────────────────────────── */
.td-overlay {
    position: fixed; inset: 0;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(12px);
    z-index: 100002;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}
.td-overlay.visible { opacity: 1; pointer-events: auto; }
/* The [hidden] attribute must win over our display:flex rules below
   (.td-thumb-ph, .td-provenance, .td-audio) — otherwise JS-toggled-off
   elements like the cover-art placeholder stay visible. */
#track-detail-overlay [hidden] { display: none !important; }
.td-modal {
    background: linear-gradient(135deg, #1c1c1c 0%, #131313 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 16px;
    width: 90%; max-width: 560px; max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    transform: scale(0.96);
    transition: transform 0.25s ease;
    overflow: hidden;
}
.td-overlay.visible .td-modal { transform: scale(1); }
.td-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.td-thumb-wrap { flex: 0 0 auto; width: 56px; height: 56px; }
.td-thumb, .td-thumb-ph {
    width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
}
.td-thumb-ph {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; background: rgba(255, 255, 255, 0.06);
}
.td-headtext { flex: 1 1 auto; min-width: 0; }
.td-title { margin: 0; font-size: 17px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-artist { color: rgba(255, 255, 255, 0.75); font-size: 13px; margin-top: 2px; }
.td-album { color: rgba(255, 255, 255, 0.45); font-size: 12px; margin-top: 1px; }
.td-status-badge {
    flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    border: 1px solid currentColor;
}
.td-badge-ok    { color: #4caf50; }
.td-badge-warn  { color: #ff9800; }
.td-badge-bad   { color: #ef5350; }
.td-badge-muted { color: #888; }
.td-badge-info  { color: rgb(var(--accent-rgb)); }
.td-close {
    flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: 8px;
    background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.td-close:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.td-body { padding: 18px 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.td-audio { width: 100%; }
.td-reason {
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 10px; padding: 12px 14px;
    color: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.5;
}
.td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.td-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-field-wide { grid-column: 1 / -1; }
.td-label { color: rgba(255, 255, 255, 0.5); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.td-value { color: rgba(255, 255, 255, 0.9); font-size: 14px; word-break: break-word; }
.td-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.td-aid-ok    { color: #4caf50; }
.td-aid-bad   { color: #ef5350; }
.td-aid-muted { color: rgba(255, 255, 255, 0.55); }
.td-provenance {
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
    padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
}
.td-prov-row { display: flex; gap: 10px; font-size: 13px; }
.td-prov-k { flex: 0 0 92px; color: rgba(255, 255, 255, 0.5); }
.td-prov-v { color: rgba(255, 255, 255, 0.85); word-break: break-word; }
.td-actions { display: flex; flex-direction: column; gap: 10px; }
.td-action-btn {
    padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.td-action-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.td-action-btn:disabled { opacity: 0.6; cursor: default; }
.td-action-primary {
    border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.15);
}
.td-action-primary:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.28); }

.candidates-modal-body {
    padding: 20px 28px;
    overflow-y: auto;
    flex: 1;
}
.candidates-modal-body::-webkit-scrollbar { width: 8px; }
.candidates-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.candidates-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.3); border-radius: 4px; }

.candidates-error-summary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
    word-break: break-word;
}
.candidates-count {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-bottom: 12px;
}

.candidates-table-wrapper { overflow-x: auto; }
.candidates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}
.candidates-table thead th {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    white-space: nowrap;
}
.candidates-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}
.candidates-table tbody tr:hover {
    background: rgba(var(--accent-rgb), 0.05);
}
.candidates-table td {
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.85);
    vertical-align: middle;
}
.candidates-col-index { color: rgba(255,255,255,0.3); width: 32px; text-align: center; }
.candidates-col-file { width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidates-col-quality { width: 110px; white-space: nowrap; }
.candidates-col-size { width: 70px; white-space: nowrap; }
.candidates-col-duration { width: 60px; white-space: nowrap; }
.candidates-col-user { width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.candidates-col-action { width: 44px; text-align: center; padding: 6px 4px !important; }

.candidates-quality-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
.candidates-quality-flac { background: rgba(var(--accent-rgb),0.2); color: rgb(var(--accent-rgb)); }
.candidates-quality-mp3 { background: rgba(100,149,237,0.2); color: #6495ed; }
.candidates-quality-ogg, .candidates-quality-aac, .candidates-quality-wma { background: rgba(255,165,0,0.2); color: #ffa500; }
.candidates-download-btn {
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-rgb));
    border-radius: 6px;
    width: 30px; height: 30px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.candidates-download-btn:hover {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: rgb(var(--accent-rgb));
}

/* Manual search section inside the candidates modal — sits above the
   auto-candidates table; visually separated by a subtle border + spacing. */
.candidates-manual-search {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.candidates-manual-search-header {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.candidates-manual-search-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.candidates-manual-search-input {
    flex: 1;
    min-width: 200px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}
.candidates-manual-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.6);
}
.candidates-manual-source {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
.candidates-manual-source:focus {
    border-color: rgba(var(--accent-rgb), 0.6);
}
.candidates-manual-source-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    padding: 0 8px;
    white-space: nowrap;
}
.candidates-manual-search-btn {
    background: rgba(var(--accent-rgb), 0.2);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: rgb(var(--accent-rgb));
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.candidates-manual-search-btn:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.35);
    border-color: rgb(var(--accent-rgb));
}
.candidates-manual-search-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.candidates-manual-search-hint {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    margin-top: 6px;
    font-style: italic;
}
.candidates-manual-search-results {
    margin-top: 12px;
}
.candidates-manual-search-results:empty {
    display: none;
}
.candidates-manual-search-loading,
.candidates-manual-search-empty,
.candidates-manual-search-error {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    padding: 14px;
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.candidates-manual-search-error {
    color: rgba(255, 100, 100, 0.85);
}
.candidates-manual-search-count {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-bottom: 8px;
}
.candidates-manual-search-status {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-bottom: 8px;
    font-style: italic;
}
.candidates-manual-search-empty-note {
    color: rgba(255, 180, 100, 0.7);
    font-size: 11px;
    margin-top: 6px;
    text-align: center;
    font-style: italic;
}
.candidates-source-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 4px;
    vertical-align: middle;
}

/* =====================================
   HYDRABASE PAGE
   ===================================== */

.hydrabase-container {
    display: flex;
    gap: 24px;
    height: calc(100% - 80px);
}

.hydrabase-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.hydrabase-panel h3 {
    margin: 0 0 4px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.hydrabase-card {
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.6), rgba(20, 20, 20, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
}

.hydrabase-card h4 {
    margin: 0 0 10px 0;
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
}

.hydrabase-input-group {
    display: flex;
    gap: 8px;
}

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

.hydrabase-icon {
    width: 18px;
    height: 18px;
    filter: invert(1);
    vertical-align: middle;
}

.hydra-payload {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: #ccc;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    resize: vertical;
    box-sizing: border-box;
}

.hydra-payload:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    outline: none;
}

.hydrabase-response-area {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #aaa;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Launch PIN Lock Screen ─────────────────────────────────────────── */

.launch-pin-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(8, 8, 8, 0.97);
    backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.launch-pin-container {
    text-align: center;
    max-width: 320px;
    width: 100%;
    padding: 40px 32px;
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.launch-pin-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.launch-pin-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.launch-pin-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 24px;
}

.launch-pin-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 4px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}

.launch-pin-input:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.launch-pin-input::placeholder {
    letter-spacing: normal;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
}

.launch-pin-submit {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.7));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.launch-pin-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
}

.launch-pin-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.launch-pin-error {
    margin: 12px 0 0;
    font-size: 13px;
    color: #ff5252;
    font-weight: 600;
}

.launch-pin-forgot {
    display: block;
    margin: 16px auto 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
    padding: 4px 8px;
}

.launch-pin-forgot:hover {
    color: rgba(255, 255, 255, 0.6);
}

.launch-pin-container.shake {
    animation: launchPinShake 0.4s ease;
}

@keyframes launchPinShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* ── Profile Picker ─────────────────────────────────────────────── */

.profile-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #0a0a1a 0%, #111827 50%, #0a0a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: profileFadeIn 0.4s ease;
}

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

.profile-picker-container {
    text-align: center;
    max-width: 700px;
    width: 100%;
    padding: 40px 20px;
}

.profile-picker-title {
    font-size: 28px;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
}

.profile-picker-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    margin-bottom: 40px;
}

.profile-picker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
    min-width: 100px;
}

.profile-picker-card:hover {
    transform: scale(1.08);
}

.profile-picker-card:hover .profile-avatar {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    transition: box-shadow 0.2s ease;
    user-select: none;
    overflow: hidden;
    position: relative;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.profile-picker-card .profile-name {
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-picker-card .profile-badge {
    font-size: 10px;
    color: #6366f1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-picker-actions {
    margin-top: 16px;
}

.profile-manage-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-manage-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #e5e7eb;
}

.profile-picker-cancel {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 10px 24px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 8px;
    transition: color 0.2s ease;
}

.profile-picker-cancel:hover {
    color: #e5e7eb;
}

/* PIN Dialog */
.profile-pin-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.profile-pin-content {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    min-width: 300px;
}

.profile-pin-avatar {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.profile-pin-name {
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.profile-pin-input {
    width: 160px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 18px;
    text-align: center;
    letter-spacing: 8px;
    outline: none;
}

.profile-pin-input::placeholder {
    font-size: 13px;
    letter-spacing: normal;
}

.profile-pin-input:focus {
    border-color: #6366f1;
}

.profile-pin-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.profile-pin-cancel, .profile-pin-submit {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: none;
}

.profile-pin-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
}

.profile-pin-submit {
    background: #6366f1;
    color: #fff;
}

.profile-pin-error {
    color: #ef4444;
    font-size: 13px;
    margin-top: 12px;
}

.profile-pin-forgot {
    display: block;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    margin-top: 10px;
    text-decoration: none;
    cursor: pointer;
}

.profile-pin-forgot:hover {
    color: rgba(138, 43, 226, 0.8);
}

/* Profile Management Panel */
.profile-manage-panel {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 16, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: pm-fade 0.18s ease;
}

@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.profile-manage-content {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
        linear-gradient(180deg, #1c2230 0%, #161a24 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 0 0 24px;
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 28px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    animation: pm-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.profile-manage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(28, 34, 48, 0.96), rgba(28, 34, 48, 0.82));
    backdrop-filter: blur(8px);
    z-index: 2;
    margin-bottom: 18px;
}

.profile-manage-header::before {
    content: "";
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / 21px no-repeat,
        linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 18px -4px rgba(99, 102, 241, 0.6);
}

.profile-manage-header h3 {
    color: #f3f4f6;
    font-size: 19px;
    font-weight: 650;
    margin: 0;
    flex: 1;
    letter-spacing: -0.2px;
}

.profile-manage-header h3 small {
    display: block;
    color: rgba(229, 231, 235, 0.5);
    font-size: 12px;
    font-weight: 400;
    margin-top: 2px;
    letter-spacing: 0;
}

.profile-manage-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    font-size: 20px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.profile-manage-close-btn:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
    transform: rotate(90deg);
}

.profile-manage-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
    padding: 0 24px;
}

.profile-manage-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.profile-manage-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}

/* The profile you're currently signed in as */
.profile-manage-item.is-current {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25) inset;
}

.profile-manage-item .profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
}

.profile-manage-item .profile-info {
    flex: 1;
    min-width: 0;
}

.profile-manage-item .profile-info .name {
    color: #f3f4f6;
    font-size: 14.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.profile-manage-item .profile-info .role {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.profile-role-pill {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(229, 231, 235, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-role-pill--admin {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.35);
}

.profile-role-pill--current {
    background: rgba(16, 185, 129, 0.16);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}

.profile-manage-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.profile-manage-item .profile-edit-btn,
.profile-manage-item .profile-delete-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #9ca3af;
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.profile-manage-item .profile-edit-btn svg,
.profile-manage-item .profile-delete-btn svg {
    width: 15px;
    height: 15px;
}

.profile-manage-item .profile-edit-btn:hover {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.profile-manage-item .profile-delete-btn:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.profile-manage-add, .admin-pin-section {
    padding: 0 24px;
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 12px;
    margin-top: 8px;
    animation: pm-rise 0.2s ease;
}

.profile-edit-buttons {
    display: flex;
    gap: 8px;
}

.profile-edit-buttons .profile-create-btn {
    flex: 1;
}

.profile-edit-buttons .profile-picker-cancel {
    flex: 1;
}

.profile-manage-add h4, .admin-pin-section h4 {
    color: #f3f4f6;
    font-size: 14px;
    font-weight: 650;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-manage-add h4::before, .admin-pin-section h4::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

.profile-input {
    width: 100%;
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.profile-input:focus {
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(0, 0, 0, 0.38);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.profile-input::placeholder {
    font-size: 12.5px;
    color: rgba(229, 231, 235, 0.38);
}

.profile-color-picker {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.profile-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.profile-color-swatch:hover {
    transform: scale(1.18) translateY(-1px);
}

.profile-color-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 12px -2px rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

.profile-color-swatch.selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* .profile-create-btn migrated to .btn .btn--block .btn--primary. The class
   is kept on the markup (init.js sets it) as a hook for the scoped
   `.profile-edit-buttons .profile-create-btn { flex: 1 }` layout rule. */

.admin-pin-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-pin-note {
    color: #9ca3af;
    font-size: 12px;
    margin: 0 0 10px;
}

/* Profile Settings in Management Panel */
.profile-settings-section {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-settings-label {
    color: #d1d5db;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Side-access flash guard: seeded pre-paint by the inline <head> script from
   the cached last-known sides, so a single-side profile never sees the
   Music↔Video switcher flash in on reload. updateProfileIndicator keeps the
   class (and the cache) in sync once the real profile arrives. */
html.side-locked .side-toggle {
    display: none !important;
}

/* Side access picker (music | video | both) — sits above Page Access in the
   create + edit profile forms. */
.profile-sides-picker {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.profile-sides-picker label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.profile-sides-picker label:hover {
    border-color: rgba(255, 255, 255, 0.18);
}
.profile-sides-picker label:has(input:checked) {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
}
.profile-sides-picker input {
    accent-color: rgb(var(--accent-rgb));
    margin: 0;
}

.profile-page-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.profile-page-group-label {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
}
.profile-page-group-label--first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.profile-page-group-note {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.3);
}

.profile-page-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
    font-size: 13px;
    cursor: pointer;
    padding: 3px 0;
}

.profile-page-checkboxes label input[type="checkbox"] {
    accent-color: rgba(var(--accent-rgb), 1);
    cursor: pointer;
}

.profile-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

.profile-checkbox-label input[type="checkbox"] {
    accent-color: rgba(var(--accent-rgb), 1);
    cursor: pointer;
}

/* Download-disabled state — hide download buttons globally */
body.downloads-disabled .download-result-btn,
body.downloads-disabled .download-btn,
body.downloads-disabled .download-button,
body.downloads-disabled .album-download-btn,
body.downloads-disabled .download-missing-btn,
body.downloads-disabled .enh-download-btn,
body.downloads-disabled .enh-download-all-btn,
body.downloads-disabled .vd-ep-grab,
body.downloads-disabled .vd-season-grab,
body.downloads-disabled .vgm-download-btn,
body.downloads-disabled .discog-download-btn,
body.downloads-disabled [onclick*="downloadTrack"],
body.downloads-disabled [onclick*="downloadAlbum"],
body.downloads-disabled [onclick*="startDownload"],
body.downloads-disabled [onclick*="startMissingTracksProcess"],
body.downloads-disabled [onclick*="startWishlistMissingTracksProcess"],
body.downloads-disabled [onclick*="DownloadMissing"]:not([onclick*="close"]) {
    display: none !important;
}

/* Profile Indicator in Sidebar */
.profile-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.profile-indicator:hover {
    background: rgba(255, 255, 255, 0.08);
}

.profile-indicator-avatar {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.profile-indicator-name {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Personal Settings Trigger (gear icon) */
.personal-settings-trigger {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 2px;
    margin-left: auto;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.personal-settings-trigger:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(30deg);
}

/* Personal Settings Modal */
.personal-settings-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ps-fade-in 0.2s ease;
}
@keyframes ps-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.personal-settings-container {
    background: linear-gradient(145deg, rgba(28, 28, 32, 0.98), rgba(18, 18, 22, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    animation: ps-slide-up 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
@keyframes ps-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.personal-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.personal-settings-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}
.personal-settings-header h3 svg {
    color: rgba(255, 255, 255, 0.5);
}
.personal-settings-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}
.personal-settings-close:hover {
    color: rgba(255, 255, 255, 0.9);
}
.personal-settings-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* Tab bar within personal settings */
.ps-tabbar {
    display: flex;
    gap: 2px;
    padding: 12px 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.15);
}
.ps-tab {
    padding: 8px 16px 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.82em;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.ps-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}
.ps-tab.active {
    color: #fff;
    border-bottom-color: var(--accent-color, #1db954);
    font-weight: 600;
}
.ps-tab-content {
    display: none;
    padding: 18px 22px 22px;
}
.ps-tab-content.active {
    display: block;
}

/* Section cards within Personal Settings */
.ps-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.ps-section:last-child { margin-bottom: 0; }
.ps-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ps-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #eb743b;
    margin: 0;
}
.ps-connection-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
}
.ps-connection-badge.connected {
    color: rgb(var(--accent-rgb));
}
.ps-connection-badge.disconnected {
    color: rgba(255, 255, 255, 0.35);
}
.ps-connection-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ps-connection-badge.connected .ps-connection-dot {
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}
.ps-connection-badge.disconnected .ps-connection-dot {
    background: rgba(255, 255, 255, 0.25);
}

/* Connected State */
.ps-connected-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 10px;
    margin-bottom: 12px;
}
.ps-connected-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.ps-connected-details {
    flex: 1;
    min-width: 0;
}
.ps-connected-username {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.ps-connected-server {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}
.ps-connected-source {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    margin-top: 2px;
}

/* Form Fields */
.ps-form-group {
    margin-bottom: 12px;
}
.ps-form-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}
.ps-form-group input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    transition: all 0.25s ease;
    box-sizing: border-box;
}
.ps-form-group input:focus {
    outline: none;
    border-color: rgba(235, 116, 59, 0.5);
    background: rgba(235, 116, 59, 0.06);
    box-shadow: 0 0 0 3px rgba(235, 116, 59, 0.1);
}
.ps-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}
.ps-help-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 4px;
}
.ps-help-text a {
    color: #eb743b;
    text-decoration: none;
}
.ps-help-text a:hover {
    text-decoration: underline;
}

/* Buttons */
.ps-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.ps-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}
.ps-btn-primary {
    background: #eb743b;
    color: #fff;
}
.ps-btn-primary:hover {
    background: #d4632f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(235, 116, 59, 0.3);
}
.ps-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ps-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}
.ps-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.ps-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
}
.ps-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Inline feedback */
.ps-inline-result {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    animation: ps-fade-in 0.2s ease;
}
.ps-inline-result.success {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
}
.ps-inline-result.error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ListenBrainz empty state on Discover page */
.lb-empty-state {
    text-align: center;
    padding: 40px 24px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 8px 0;
}
.lb-empty-state .lb-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.lb-empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 8px 0;
}
.lb-empty-state p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.lb-empty-state .lb-connect-btn {
    background: #eb743b !important;
    border-color: #eb743b !important;
    color: #fff !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}
.lb-empty-state .lb-connect-btn:hover {
    background: #d4632f !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(235, 116, 59, 0.3);
}
.lb-empty-state .lb-empty-help {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 12px;
}
.lb-empty-state .lb-empty-help a {
    color: #eb743b;
    text-decoration: none;
}
.lb-empty-state .lb-empty-help a:hover {
    text-decoration: underline;
}

/* Last.fm Track Radio — search bar & dropdown */
.lastfm-radio-search {
    margin-bottom: 16px;
}
.lastfm-radio-search-row {
    position: relative;
}
.lastfm-radio-input-wrap {
    position: relative;
}
.lastfm-radio-input-wrap input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    padding: 9px 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.lastfm-radio-input-wrap input:focus {
    border-color: rgba(255,255,255,0.28);
}
.lastfm-radio-input-wrap input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.lastfm-radio-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1a1a2a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    z-index: 200;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    padding: 4px;
}
.lastfm-radio-searching {
    padding: 12px;
    display: flex;
    justify-content: center;
}
.lastfm-radio-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.lastfm-radio-result:hover {
    background: rgba(255,255,255,0.07);
}
.lastfm-radio-result-art {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.lastfm-radio-result-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lastfm-radio-art-empty {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: rgba(255,255,255,0.2);
}
.lastfm-radio-art-empty::after { content: '♪'; }
.lastfm-radio-result-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lastfm-radio-result-track {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lastfm-radio-result-artist {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Loading state shown in the playlists container while generating */
.lastfm-radio-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
}
.lastfm-radio-generating .server-search-spinner {
    margin: 0;
}

/* ===========================
   AUTOMATIONS PAGE
   =========================== */

/* .automations-container: card styling from .page-shell */
.automations-list { display: flex; flex-direction: column; gap: 0; }
#automations-list-view { padding-bottom: 10vh; }

/* --- Section Headers (System / My Automations) --- */
.automations-section {
    margin-bottom: 8px;
}
.automations-section:last-child { margin-bottom: 0; }
.automations-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.automations-section-header:hover .section-label { color: rgba(255,255,255,0.85); }
.section-chevron {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.25s ease;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.automations-section.collapsed .section-chevron { transform: rotate(-90deg); }
.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s ease;
}
.section-count {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    padding: 1px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.section-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.06);
}
.automations-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 8000px;
    opacity: 1;
}
.automations-section.collapsed .automations-section-body {
    max-height: 0;
    opacity: 0;
}

/* --- Group header actions --- */
.section-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 4px;
}

.automations-section-header:hover .section-actions {
    opacity: 1;
}

.section-action-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: rgba(255, 255, 255, 0.5);
}

.section-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.section-action-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.section-rename-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    width: 180px;
    outline: none;
}

.section-rename-input:focus {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}

/* --- Drag and drop --- */
.automation-card[draggable="true"] {
    cursor: grab;
}

.automation-card[draggable="true"]:active {
    cursor: grabbing;
}

.automation-card.dragging {
    opacity: 0.35;
    transform: scale(0.97);
    box-shadow: none;
}

.automations-section-body.drop-target {
    background: rgba(var(--accent-rgb), 0.04);
    border: 2px dashed rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    min-height: 50px;
    transition: background 0.2s, border-color 0.2s;
}

.section-protected.no-drop {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Delete group dialog --- */
.delete-group-dialog {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(16, 16, 16, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 420px;
    width: 90vw;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.delete-group-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.delete-group-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.delete-group-message {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 18px 0;
    line-height: 1.5;
}

.delete-group-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delete-group-btn {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-group-keep {
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.25);
}

.delete-group-keep:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.delete-group-remove {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}

.delete-group-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.delete-group-cancel {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
}

.delete-group-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* --- System Automations 2-Column Grid --- */
.automations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
@media (max-width: 800px) {
    .automations-grid { grid-template-columns: 1fr; }
}

/* --- New Automation Button (rainbow glow) --- */
@keyframes btn-rainbow-glow {
    0%   { box-shadow: 0 4px 18px rgba(255, 0, 100, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(255, 0, 100, 0.35); }
    20%  { box-shadow: 0 4px 18px rgba(255, 140, 0, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(255, 140, 0, 0.35); }
    40%  { box-shadow: 0 4px 18px rgba(0, 210, 120, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(0, 210, 120, 0.35); }
    60%  { box-shadow: 0 4px 18px rgba(0, 140, 255, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(0, 140, 255, 0.35); }
    80%  { box-shadow: 0 4px 18px rgba(160, 0, 255, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(160, 0, 255, 0.35); }
    100% { box-shadow: 0 4px 18px rgba(255, 0, 100, 0.3), 0 2px 6px rgba(0,0,0,0.2); border-color: rgba(255, 0, 100, 0.35); }
}
@keyframes btn-rainbow-glow-hover {
    0%   { box-shadow: 0 6px 28px rgba(255, 0, 100, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(255, 0, 100, 0.5); }
    20%  { box-shadow: 0 6px 28px rgba(255, 140, 0, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(255, 140, 0, 0.5); }
    40%  { box-shadow: 0 6px 28px rgba(0, 210, 120, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(0, 210, 120, 0.5); }
    60%  { box-shadow: 0 6px 28px rgba(0, 140, 255, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(0, 140, 255, 0.5); }
    80%  { box-shadow: 0 6px 28px rgba(160, 0, 255, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(160, 0, 255, 0.5); }
    100% { box-shadow: 0 6px 28px rgba(255, 0, 100, 0.45), 0 3px 10px rgba(0,0,0,0.25); border-color: rgba(255, 0, 100, 0.5); }
}
.auto-new-btn {
    position: relative;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    color: #fff;
    border: 1.5px solid rgba(var(--accent-light-rgb), 0.6);
    padding: 10px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
    backdrop-filter: blur(12px);
}
.auto-new-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.5);
}
.auto-new-btn:active {
    transform: translateY(0) scale(0.97);
}

/* --- Stats Summary Bar --- */
.automations-stats {
    display: flex;
    gap: 10px;
    padding: 0 0 16px 0;
    flex-wrap: wrap;
}
.auto-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    transition: all 0.2s ease;
}
.auto-stat:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.auto-stat-value {
    font-weight: 700;
    color: rgb(var(--accent-light-rgb));
}

/* --- Global per-side master pause toggle (music + video automations pages) --- */
.auto-master-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 14px 5px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 99, 99, 0.4);
    background: rgba(255, 99, 99, 0.08);
    color: #ff8484;
    transition: all 0.15s ease;
}
.auto-master-toggle.on {
    border-color: rgba(76, 207, 133, 0.4);
    background: rgba(76, 207, 133, 0.08);
    color: #6fdd9d;
}
.auto-master-toggle:hover:not(:disabled) {
    filter: brightness(1.15);
}
.auto-master-toggle:disabled {
    opacity: 0.5;
    cursor: default;
}
.auto-master-sw {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.16s;
    flex: 0 0 auto;
}
.auto-master-sw::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.16s;
}
.auto-master-toggle.on .auto-master-sw {
    background: #4ccf85;
}
.auto-master-toggle.on .auto-master-sw::after {
    transform: translateX(15px);
}

/* --- Automation Card --- */
.automation-card {
    background: rgba(22, 22, 22, 0.95);
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07);
    margin: 4px 0; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    transition: all 0.2s ease;
    position: relative; overflow: hidden;
}
.automation-card:hover {
    background: rgba(28, 28, 28, 0.98);
    border-color: rgba(var(--accent-rgb), 0.2);
}
.automation-card.running {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15), inset 0 0 12px rgba(var(--accent-rgb), 0.03);
    animation: card-glow 2s ease-in-out infinite;
}
@keyframes card-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15), inset 0 0 12px rgba(var(--accent-rgb), 0.03); }
    50% { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25), inset 0 0 18px rgba(var(--accent-rgb), 0.05); }
}
.automation-card.disabled { opacity: 0.55; }
.automation-card.disabled:hover { opacity: 0.75; }
.automation-card.disabled .automation-name { color: rgba(255,255,255,0.5); }
.automation-card.system { border-left: none; padding: 8px 12px; }
.system-badge { display: inline-block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 6px; background: rgba(99,102,241,0.2); color: #818cf8; vertical-align: middle; }

.automation-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.automation-status.enabled { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.4); }
.automation-status.disabled { background: #555; }

.automation-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.automation-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.automation-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow-trigger, .flow-action, .flow-notify {
    font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.flow-trigger { background: rgba(var(--accent-rgb),0.12); color: rgb(var(--accent-light-rgb)); }
.flow-action { background: rgba(88,101,242,0.12); color: #7289da; }
.flow-notify { background: rgba(250,204,21,0.10); color: #fbbf24; }
.flow-arrow { color: rgba(255,255,255,0.25); font-size: 12px; }
.flow-delay { font-size: 10px; padding: 2px 6px; border-radius: 8px; white-space: nowrap; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px dashed rgba(255,255,255,0.12); }
.day-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.day-btn { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; }
.day-btn:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.day-btn.active { background: rgba(var(--accent-rgb), 0.2); color: rgb(var(--accent-light-rgb)); border-color: rgba(var(--accent-rgb), 0.4); }
.automation-meta { font-size: 10px; color: rgba(255,255,255,0.35); line-height: 1.3; }

.automation-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.automation-run-btn, .automation-edit-btn, .automation-delete-btn, .automation-dupe-btn, .automation-group-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; transition: all 0.2s ease; color: rgba(255,255,255,0.45);
}
.automation-run-btn:hover { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.4); color: rgb(var(--accent-light-rgb)); }
.automation-edit-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.automation-delete-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #ef4444; }

/* Automation toggle switch */
.automation-toggle { position: relative; display: inline-block; width: 32px; height: 18px; }
.automation-toggle input { opacity: 0; width: 0; height: 0; }
.automation-toggle .toggle-slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    background: rgba(255,255,255,0.1); border-radius: 18px; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none; z-index: auto;
}
.automation-toggle .toggle-slider::before {
    content: ''; position: absolute; height: 12px; width: 12px; left: 2px; bottom: 2px;
    background: rgba(255,255,255,0.6); border-radius: 50%; transition: all 0.3s ease;
    transform: none;
}
.automation-toggle input:checked + .toggle-slider { background: rgba(var(--accent-rgb),0.5); border-color: rgba(var(--accent-rgb),0.5); }
.automation-toggle input:checked + .toggle-slider::before { transform: translateX(14px); background: rgb(var(--accent-light-rgb)); }

/* Only wrap card layout when output panel is present */
.automation-card:has(.automation-output) { flex-wrap: wrap; }

/* Automation progress output panel */
.automation-output {
    width: 100%; max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    border-top: none; padding: 0; margin: 0;
}
.automation-output.visible {
    max-height: 300px; padding: 8px 0 4px; margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.auto-progress-bar-wrap {
    width: 100%; height: 3px; background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden; margin-bottom: 6px;
}
.auto-progress-bar {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    transition: width 0.5s ease;
}
.automation-output.finished .auto-progress-bar { background: #4ade80; }
.automation-output.error .auto-progress-bar { background: #ef4444; }
.auto-progress-phase {
    font-size: 10px; color: rgba(255,255,255,0.5);
    margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auto-progress-log {
    max-height: 200px; overflow-y: auto;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 10px; line-height: 1.5;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.auto-log-line { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auto-log-line.success { color: #4ade80; }
.auto-log-line.error   { color: #f87171; }
.auto-log-line.skip    { color: rgba(255,255,255,0.35); }
.auto-log-line.info    { color: rgba(255,255,255,0.55); }

/* Pulsing status indicator for running automation */
.automation-status.running {
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
    animation: auto-pulse 1.5s ease-in-out infinite;
}
@keyframes auto-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Duplicate & Group button hovers */
.automation-dupe-btn:hover { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.4); color: rgb(var(--accent-light-rgb)); }
.automation-group-btn:hover { background: rgba(250,204,21,0.15); border-color: rgba(250,204,21,0.35); color: #facc15; }
.automation-group-btn.grouped { color: #facc15; }

/* --- Filter Bar --- */
.auto-filter-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px;
    background: rgba(22, 22, 22, 0.8); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px; flex-wrap: wrap;
}
.auto-filter-search {
    flex: 1; min-width: 180px; max-width: 320px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 7px 12px; color: #fff; font-size: 12px; outline: none;
    transition: border-color 0.2s ease;
}
.auto-filter-search:focus { border-color: rgba(var(--accent-rgb),0.5); background: rgba(var(--accent-rgb),0.04); }
.auto-filter-search::placeholder { color: rgba(255,255,255,0.25); }
.auto-filter-select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 7px 10px; color: rgba(255,255,255,0.7); font-size: 11px;
    outline: none; cursor: pointer; transition: border-color 0.2s ease;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
}
.auto-filter-select:focus { border-color: rgba(var(--accent-rgb),0.5); }
.auto-filter-select option { background: #1a1a1a; color: #fff; }
.auto-filter-count {
    font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; margin-left: auto;
}

/* --- Inspiration / Templates Section --- */
.auto-template-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.25s ease; position: relative;
}
.auto-template-card:hover {
    background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.25);
    transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.auto-template-icon {
    font-size: 22px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(255,255,255,0.04); border-radius: 10px;
}
.auto-template-info { flex: 1; min-width: 0; }
.auto-template-name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.auto-template-desc { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.4; margin-bottom: 6px; }
.auto-template-flow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.auto-template-use {
    flex-shrink: 0; padding: 5px 14px; border-radius: 16px; border: none;
    background: rgba(var(--accent-rgb),0.15); color: rgb(var(--accent-light-rgb));
    font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.auto-template-use:hover { background: rgba(var(--accent-rgb),0.3); transform: translateY(-1px); }

/* --- Automation Hub --- */
.auto-hub-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 4px 0 0;
    margin-bottom: 16px;
    overflow-x: auto;
}
@media (max-width: 768px) {
    /* Fade the right edge to signal the tab row scrolls */
    .auto-hub-tabs {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }
    .auto-hub-tabs::-webkit-scrollbar { display: none; }
}
.auto-hub-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.auto-hub-tab:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.03);
}
.auto-hub-tab.active {
    color: rgb(var(--accent-light-rgb));
    border-bottom-color: rgb(var(--accent-light-rgb));
}
.auto-hub-tab-content { display: none; }
.auto-hub-tab-content.active { display: block; }

/* Hub Filters */
.auto-hub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.auto-hub-filter-pill {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auto-hub-filter-pill:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
}
.auto-hub-filter-pill.active {
    background: rgba(var(--accent-rgb),0.15);
    border-color: rgba(var(--accent-rgb),0.3);
    color: rgb(var(--accent-light-rgb));
}

/* Recipe Cards Grid */
.auto-hub-recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}
/* ── Pipeline Cards — Premium Design ── */
.auto-hub-pipeline-intro {
    font-size: 0.84em;
    color: rgba(255,255,255,0.35);
    padding: 0 0 20px;
    line-height: 1.5;
}
.auto-hub-pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
@media (max-width: 768px) {
    .auto-hub-pipeline-grid { grid-template-columns: 1fr; }
}
.auto-hub-pipeline-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--pipeline-color) 6%, rgba(20,20,28,0.95)),
        rgba(14,14,20,0.98)
    );
    border: 1px solid color-mix(in srgb, var(--pipeline-color) 15%, transparent);
    border-radius: 16px;
    padding: 22px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}
.auto-hub-pipeline-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 140px; height: 140px;
    background: radial-gradient(circle at top right,
        color-mix(in srgb, var(--pipeline-color) 8%, transparent),
        transparent 70%);
    pointer-events: none;
}
.auto-hub-pipeline-card:hover {
    border-color: color-mix(in srgb, var(--pipeline-color) 30%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--pipeline-color) 10%, transparent),
                0 2px 8px rgba(0,0,0,0.3);
}

/* Top row: icon + title + badge */
.pipeline-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.pipeline-card-icon {
    font-size: 1.3em;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--pipeline-color) 12%, transparent);
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--pipeline-color) 18%, transparent);
}
.pipeline-card-title-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pipeline-card-name {
    font-size: 0.98em;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipeline-card-badge {
    font-size: 0.65em;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--pipeline-color) 15%, transparent);
    color: color-mix(in srgb, var(--pipeline-color) 80%, white);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Description */
.pipeline-card-desc {
    font-size: 0.8em;
    color: rgba(255,255,255,0.38);
    line-height: 1.5;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

/* Pipeline flow — connected circles */
.pipeline-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 10px 0;
    flex: 1;
    position: relative;
    z-index: 1;
}
.pipeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.pipeline-node-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.25s;
    flex-shrink: 0;
}
.pipeline-node-action .pipeline-node-icon {
    background: color-mix(in srgb, var(--pipeline-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--pipeline-color) 20%, transparent);
}
.pipeline-node-notify .pipeline-node-icon {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
}
.auto-hub-pipeline-card:hover .pipeline-node-icon {
    transform: scale(1.06);
    border-color: color-mix(in srgb, var(--pipeline-color) 35%, transparent);
}
.pipeline-node-label {
    font-size: 0.66em;
    color: rgba(255,255,255,0.38);
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    max-width: 80px;
    word-wrap: break-word;
}
.pipeline-connector {
    width: 100%;
    max-width: 40px;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--pipeline-color) 30%, transparent),
        color-mix(in srgb, var(--pipeline-color) 12%, transparent));
    flex-shrink: 1;
    margin-top: 19px; /* vertically center with circle icons */
    align-self: flex-start;
}

/* Footer with deploy button */
.pipeline-card-footer {
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.pipeline-deploy-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pipeline-color) 85%, white),
        var(--pipeline-color));
    color: #fff;
    font-size: 0.84em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s;
    letter-spacing: 0.02em;
}
.pipeline-deploy-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--pipeline-color) 30%, transparent);
    transform: translateY(-1px);
}

/* ── Pipeline Detail Modal ── */
.pipeline-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pipeline-detail-modal {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--pipeline-color) 5%, rgba(22, 22, 30, 0.98)),
        rgba(14, 14, 20, 0.99)
    );
    border: 1px solid color-mix(in srgb, var(--pipeline-color) 15%, transparent);
    border-radius: 20px;
    padding: 32px;
    max-width: 580px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5),
                0 0 40px color-mix(in srgb, var(--pipeline-color) 8%, transparent);
}
.pipeline-detail-modal::-webkit-scrollbar { width: 4px; }
.pipeline-detail-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.pipeline-detail-close {
    position: absolute;
    top: 16px; right: 18px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5em;
    cursor: pointer;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}
.pipeline-detail-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}
.pipeline-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    padding-right: 32px;
}
.pipeline-detail-icon {
    font-size: 2em;
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--pipeline-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pipeline-color) 20%, transparent);
    border-radius: 14px;
    flex-shrink: 0;
}
.pipeline-detail-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.pipeline-detail-desc {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.5;
}
.pipeline-detail-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18px 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-bottom: 22px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.pipeline-detail-section-title {
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 6px;
}
.pipeline-detail-section-desc {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.5;
    margin-bottom: 16px;
}
/* Automation step cards */
.pipeline-detail-autos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.pipeline-detail-auto {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: border-color 0.2s;
}
.pipeline-detail-auto:hover {
    border-color: color-mix(in srgb, var(--step-color) 25%, transparent);
}
.pipeline-detail-step-num {
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 700;
    color: color-mix(in srgb, var(--step-color) 80%, white);
    background: color-mix(in srgb, var(--step-color) 15%, transparent);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.pipeline-detail-step-body {
    flex: 1;
    min-width: 0;
}
.pipeline-detail-step-name {
    font-size: 0.88em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 6px;
}
.pipeline-detail-step-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.pipeline-detail-tag {
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}
.pipeline-detail-tag.when {
    background: rgba(99, 102, 241, 0.15);
    color: rgba(129, 140, 248, 0.9);
}
.pipeline-detail-tag.do {
    background: rgba(34, 197, 94, 0.15);
    color: rgba(74, 222, 128, 0.9);
}
.pipeline-detail-tag.then {
    background: rgba(251, 191, 36, 0.15);
    color: rgba(253, 224, 71, 0.9);
}
.pipeline-detail-tag-value {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 600px) {
    .pipeline-detail-modal { padding: 20px; border-radius: 14px; }
    .pipeline-detail-header { flex-direction: column; gap: 12px; }
    .pipeline-detail-flow { flex-wrap: wrap; }
}

.auto-hub-recipe-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.auto-hub-recipe-card:hover {
    background: rgba(var(--accent-rgb),0.06);
    border-color: rgba(var(--accent-rgb),0.2);
    transform: translateY(-1px);
}
.auto-hub-recipe-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.auto-hub-recipe-icon {
    font-size: 20px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 9px;
}
.auto-hub-recipe-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.auto-hub-badge {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.auto-hub-badge.beginner {
    background: rgba(52, 211, 153, 0.12);
    color: #6ee7b7;
}
.auto-hub-badge.intermediate {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}
.auto-hub-badge.advanced {
    background: rgba(192, 90, 242, 0.12);
    color: #c084fc;
}
.auto-hub-recipe-desc {
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255,255,255,0.42);
}
.auto-hub-recipe-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.auto-hub-recipe-note {
    font-size: 10.5px;
    color: rgba(var(--accent-light-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.06);
    border-radius: 6px;
    padding: 5px 10px;
    line-height: 1.4;
}
.auto-hub-recipe-use {
    align-self: flex-end;
    padding: 5px 14px;
    border-radius: 14px;
    border: none;
    background: rgba(var(--accent-rgb),0.15);
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auto-hub-recipe-use:hover {
    background: rgba(var(--accent-rgb),0.3);
    transform: translateY(-1px);
}

/* Guide Cards */
.auto-hub-guide-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
}
.auto-hub-guide-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    cursor: pointer;
}
.auto-hub-guide-icon {
    font-size: 22px;
    flex-shrink: 0;
}
.auto-hub-guide-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.auto-hub-guide-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
    padding-left: 34px;
}
.auto-hub-steps {
    counter-reset: hub-step;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}
.auto-hub-steps li {
    counter-increment: hub-step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
}
.auto-hub-steps li:last-child { border-bottom: none; }
.auto-hub-steps li::before {
    content: counter(hub-step);
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb),0.15);
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.auto-hub-guide-related {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.auto-hub-guide-related-label {
    font-size: 10.5px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    align-self: center;
}
.auto-hub-guide-related-link {
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb),0.1);
    color: rgb(var(--accent-light-rgb));
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}
.auto-hub-guide-related-link:hover {
    background: rgba(var(--accent-rgb),0.2);
}
.auto-hub-guide-body { display: none; }
.auto-hub-guide-card.expanded .auto-hub-guide-body { display: block; }
.auto-hub-guide-chevron {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    transition: transform 0.2s ease;
}
.auto-hub-guide-card.expanded .auto-hub-guide-chevron {
    transform: rotate(180deg);
}

/* Tips Grid */
.auto-hub-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.auto-hub-tip-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(var(--accent-rgb),0.4);
    border-radius: 10px;
    padding: 14px 16px;
}
.auto-hub-tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.auto-hub-tip-icon { font-size: 16px; flex-shrink: 0; }
.auto-hub-tip-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}
.auto-hub-tip-tag {
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.35);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.auto-hub-tip-body {
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255,255,255,0.45);
}

/* Reference Accordion */
.auto-hub-ref-group {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
}
.auto-hub-ref-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: background 0.15s ease;
}
.auto-hub-ref-group-header:hover {
    background: rgba(255,255,255,0.05);
}
.auto-hub-ref-group-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    flex: 1;
}
.auto-hub-ref-group-count {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}
.auto-hub-ref-chevron {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
    transition: transform 0.2s ease;
}
.auto-hub-ref-group.expanded .auto-hub-ref-chevron {
    transform: rotate(180deg);
}
.auto-hub-ref-body {
    display: none;
    padding: 0 16px 12px;
}
.auto-hub-ref-group.expanded .auto-hub-ref-body {
    display: block;
}
.auto-hub-ref-subheader {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 0 6px;
}
.auto-hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}
.auto-hub-table th {
    text-align: left;
    padding: 7px 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.auto-hub-table td {
    padding: 7px 10px;
    color: rgba(255,255,255,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    line-height: 1.4;
}
.auto-hub-table td:first-child {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
}
.auto-hub-table tr:hover td {
    background: rgba(255,255,255,0.02);
}

/* Hub Callout */
.auto-hub-callout {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(var(--accent-rgb),0.06);
    border: 1px solid rgba(var(--accent-rgb),0.12);
    color: rgba(255,255,255,0.65);
}
.auto-hub-callout-icon {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Responsive */
@media (max-width: 800px) {
    .auto-hub-recipes-grid { grid-template-columns: 1fr; }
    .auto-hub-tips-grid { grid-template-columns: 1fr; }
}

/* --- Group Dropdown Popover --- */
.auto-group-dropdown {
    z-index: 9999;
    background: rgba(22,22,22,0.97); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 6px; min-width: 180px; max-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); backdrop-filter: blur(12px);
    margin-top: 4px;
}
.auto-group-option {
    padding: 7px 10px; border-radius: 6px; font-size: 12px; color: rgba(255,255,255,0.7);
    cursor: pointer; transition: background 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auto-group-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.auto-group-option.active { color: rgb(var(--accent-light-rgb)); background: rgba(var(--accent-rgb),0.12); }
.auto-group-option.ungroup { color: rgba(255,255,255,0.4); font-style: italic; }
.auto-group-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.auto-group-input {
    width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 6px 8px; color: #fff; font-size: 11px; outline: none;
    margin-top: 2px;
}
.auto-group-input::placeholder { color: rgba(255,255,255,0.25); }
.auto-group-input:focus { border-color: rgba(var(--accent-rgb),0.5); }

/* Group section label styling */
.automations-section .section-group-icon { margin-right: 4px; font-size: 12px; }

/* --- Empty State --- */
.automations-empty {
    text-align: center; padding: 80px 24px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.03) 0%, transparent 60%);
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,0.08);
}
.automations-empty-icon { font-size: 56px; margin-bottom: 20px; filter: grayscale(0.3); }
.automations-empty-title {
    font-size: 22px; font-weight: 700; margin-bottom: 10px;
    background: linear-gradient(135deg, #fff 0%, rgb(var(--accent-light-rgb)) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.automations-empty-text {
    font-size: 14px; color: rgba(255,255,255,0.4); margin-bottom: 28px;
    max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

/* --- Builder View --- */
.automations-builder-view { display: flex; flex-direction: column; height: 100%; }

.builder-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(18,18,18,0.95); flex-shrink: 0;
}
.builder-back-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; color: rgba(255,255,255,0.6); transition: all 0.2s ease;
}
.builder-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.builder-name-input {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 8px 14px; color: #fff; font-size: 16px; font-weight: 600;
    outline: none; transition: border-color 0.2s ease;
}
.builder-name-input:focus { border-color: rgba(var(--accent-rgb),0.5); }
.builder-name-input::placeholder { color: rgba(255,255,255,0.3); }
.builder-group-input {
    width: 160px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 7px 10px; color: rgba(255,255,255,0.7); font-size: 12px;
    outline: none; transition: border-color 0.2s ease;
}
.builder-group-input:focus { border-color: rgba(var(--accent-rgb),0.5); }
.builder-group-input::placeholder { color: rgba(255,255,255,0.25); }
.builder-header-actions { display: flex; gap: 8px; }
.builder-header-actions .btn-cancel {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7); padding: 8px 20px; border-radius: 10px; cursor: pointer; font-size: 13px; transition: all 0.2s ease;
}
.builder-header-actions .btn-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.builder-header-actions .btn-save {
    background: rgb(var(--accent-rgb)); border: none; color: #fff;
    padding: 8px 24px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease;
}
.builder-header-actions .btn-save:hover { filter: brightness(1.15); transform: translateY(-1px); }

.builder-content { display: flex; flex: 1; overflow: hidden; }

/* --- Builder Sidebar --- */
.builder-sidebar {
    width: 260px; flex-shrink: 0; overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 16px; background: rgba(14,14,14,0.5);
}
.sidebar-section { margin-bottom: 20px; }
.sidebar-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
    color: rgba(255,255,255,0.35); margin-bottom: 8px; padding-left: 4px;
}
.block-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 6px; cursor: grab; transition: all 0.2s ease; user-select: none;
}
.block-item:hover {
    background: rgba(255,255,255,0.08); border-color: rgba(var(--accent-rgb),0.3);
    transform: translateX(2px);
}
.block-item:active { cursor: grabbing; }
.block-item.coming-soon {
    opacity: 0.35; cursor: default; pointer-events: none;
}
.block-item-icon { font-size: 18px; flex-shrink: 0; width: 28px; text-align: center; }
.block-item-text { flex: 1; min-width: 0; }
.block-item-label { font-size: 13px; font-weight: 500; color: #fff; }
.block-item-desc { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 1px; }
.block-item .coming-soon-badge {
    font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px;
    color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06);
    padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}

.block-help-btn {
    width: 20px;
    height: 20px;
    font-size: 11px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.block-item:hover .block-help-btn {
    opacity: 1;
}

/* --- Builder Canvas --- */
.builder-canvas {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
    align-items: center; padding: 40px 24px; gap: 0;
}

.flow-slot {
    width: 100%; max-width: 480px; min-height: 70px;
    border: 2px dashed rgba(255,255,255,0.1); border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease; position: relative;
}
.flow-slot.empty { cursor: default; }
.flow-slot.empty .flow-slot-prompt {
    font-size: 13px; color: rgba(255,255,255,0.25); text-align: center; padding: 20px;
}
.flow-slot.drag-over {
    border-color: rgba(var(--accent-rgb),0.6); background: rgba(var(--accent-rgb),0.05);
    box-shadow: 0 0 20px rgba(var(--accent-rgb),0.1);
}
.flow-slot.filled { border: none; min-height: auto; }

.flow-connector {
    width: 2px; height: 32px; background: rgba(255,255,255,0.1); position: relative;
}
.flow-connector::after {
    content: ''; position: absolute; bottom: -4px; left: -4px;
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.15);
}

.flow-slot-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 6px; margin-bottom: 6px;
}
.flow-slot-label.when { background: rgba(var(--accent-rgb),0.2); color: rgb(var(--accent-light-rgb)); }
.flow-slot-label.do { background: rgba(88,101,242,0.2); color: #7289da; }
.flow-slot-label.notify { background: rgba(250,204,21,0.15); color: #fbbf24; }
.flow-slot-label.then { background: rgba(250,204,21,0.15); color: #fbbf24; }

.flow-connector.small { height: 16px; }

.then-add {
    min-height: 48px !important;
    border-style: dashed;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.then-add:hover, .then-add.drag-over { opacity: 1; }
.then-add .flow-slot-prompt { font-size: 12px; padding: 12px; }

/* --- Placed Block (in flow) --- */
.placed-block {
    width: 100%; max-width: 480px;
    background: linear-gradient(135deg, rgba(26,26,26,0.95) 0%, rgba(18,18,18,0.98) 100%);
    border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden; transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.placed-block:hover { border-color: rgba(255,255,255,0.18); }
.placed-block.locked { border-color: rgba(var(--accent-rgb),0.2); opacity: 0.85; }
.placed-block.locked .placed-block-header::after { content: 'Locked'; font-size: 10px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.5px; }
.placed-block-header {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.placed-block-icon { font-size: 18px; }
.placed-block-label { flex: 1; font-size: 14px; font-weight: 600; color: #fff; }
.placed-block-remove {
    background: none; border: none; color: rgba(255,255,255,0.3);
    font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: all 0.2s ease;
}
.placed-block-remove:hover { background: rgba(239,68,68,0.2); color: #ef4444; }
.placed-block-config { padding: 14px 16px; }
.placed-block-config .config-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.placed-block-config .config-row:last-child { margin-bottom: 0; }
.placed-block-config label {
    font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase;
    letter-spacing: 0.5px; white-space: nowrap; min-width: 50px;
}
.placed-block-config input[type="text"],
.placed-block-config input[type="number"],
.placed-block-config textarea {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 7px 10px; color: #fff; font-size: 13px;
    outline: none; transition: border-color 0.2s ease;
}
.placed-block-config input:focus,
.placed-block-config textarea:focus { border-color: rgba(var(--accent-rgb),0.5); }
.placed-block-config select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 7px 10px; color: #fff; font-size: 13px;
    outline: none; cursor: pointer;
}
.placed-block-config select option,
.condition-match-select option,
.condition-row select option {
    background: #1a1a1a; color: #fff;
}
.placed-block-config textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* Variable tags */
.variable-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.variable-tag {
    font-size: 11px; padding: 3px 8px; border-radius: 8px; cursor: pointer;
    background: rgba(var(--accent-rgb),0.1); color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb),0.2); transition: all 0.2s ease; font-family: monospace;
}
.variable-tag:hover { background: rgba(var(--accent-rgb),0.2); border-color: rgba(var(--accent-rgb),0.4); }

/* Condition builder */
.condition-builder { margin-top: 8px; }
.condition-header { margin-bottom: 8px; }
.condition-match-select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 12px;
}
.condition-row {
    display: flex; gap: 6px; align-items: center; margin-bottom: 6px; padding: 8px 10px;
    background: rgba(255,255,255,0.03); border-radius: 6px; border: 1px solid rgba(255,255,255,0.06);
}
.condition-row select, .condition-row input[type="text"] {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; padding: 5px 8px; border-radius: 5px; font-size: 12px;
}
.condition-row select { min-width: 80px; }
.condition-row input[type="text"] { flex: 1; min-width: 80px; }
.condition-row select:focus, .condition-row input:focus {
    border-color: rgba(var(--accent-rgb),0.5); outline: none;
}
.add-condition-btn {
    display: inline-block; margin-top: 6px; padding: 5px 12px; font-size: 12px;
    background: transparent; color: rgba(var(--accent-light-rgb),0.8);
    border: 1px dashed rgba(var(--accent-rgb),0.3); border-radius: 6px; cursor: pointer;
    transition: all 0.2s ease;
}
.add-condition-btn:hover {
    background: rgba(var(--accent-rgb),0.1); border-color: rgba(var(--accent-rgb),0.5);
}
.remove-condition-btn {
    background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer;
    font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: all 0.2s ease;
}
.remove-condition-btn:hover { color: #ff6b6b; background: rgba(255,0,0,0.1); }

/* Mirrored playlist select */
.placed-block-config input[type="checkbox"] {
    margin-right: 6px; accent-color: rgb(var(--accent-rgb));
}

/* --- Automation Run History Modal --- */
.auto-runs-link {
    cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px; color: rgba(255,255,255,0.5);
    transition: color 0.2s ease;
}
.auto-runs-link:hover { color: rgb(var(--accent-light-rgb)); }

.automation-history-modal {
    max-width: 560px; width: 90%; max-height: 75vh; display: flex; flex-direction: column;
}
.history-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.history-modal-header h3 {
    margin: 0; font-size: 15px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-close-btn {
    background: none; border: none; color: rgba(255,255,255,0.4); font-size: 22px;
    cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s;
}
.history-close-btn:hover { color: #fff; }

.history-modal-body {
    padding: 12px 20px 20px; overflow-y: auto; flex: 1;
}
.history-loading, .history-empty {
    text-align: center; color: rgba(255,255,255,0.4); padding: 40px 0; font-size: 13px;
}
.history-entries { display: flex; flex-direction: column; gap: 8px; }

.history-entry {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; overflow: hidden; transition: border-color 0.2s;
}
.history-entry:hover { border-color: rgba(255,255,255,0.12); }

.history-entry-header {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    cursor: pointer; user-select: none;
}
.history-status-badge {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.history-status-completed { background: rgba(74,222,128,0.15); color: #4ade80; }
.history-status-error { background: rgba(239,68,68,0.15); color: #ef4444; }
.history-status-skipped { background: rgba(250,204,21,0.15); color: #facc15; }
.history-status-timeout { background: rgba(251,146,60,0.15); color: #fb923c; }

.history-time {
    font-size: 11px; color: rgba(255,255,255,0.4); flex: 1;
}
.history-duration {
    font-size: 10px; color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 6px;
}
.history-expand-icon {
    font-size: 8px; color: rgba(255,255,255,0.25); transition: transform 0.2s;
}
.history-summary {
    padding: 0 14px 8px; font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.4;
}

.history-log-section {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.history-log-section.expanded {
    max-height: 400px; overflow-y: auto;
}
.history-log-line {
    padding: 4px 14px; font-size: 11px; font-family: 'SF Mono', 'Fira Code', monospace;
    line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,0.02);
}
.history-log-info { color: rgba(255,255,255,0.45); }
.history-log-success { color: #4ade80; }
.history-log-error { color: #ef4444; }
.history-log-warning { color: #facc15; }

.history-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px; padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.history-stat-item {
    background: rgba(0,0,0,0.25); border-radius: 8px; padding: 8px 12px;
}
.history-stat-label {
    font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 2px;
}
.history-stat-value {
    font-size: 14px; font-weight: 600; color: #e0e0e0;
}
.history-log-skip { color: rgba(255,255,255,0.35); }

.history-total {
    text-align: center; padding: 12px 0 4px; font-size: 11px; color: rgba(255,255,255,0.3);
}

/* ==================== Enhanced Library Management View ==================== */

/* View Toggle Buttons */
.enhanced-view-toggle-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.enhanced-view-toggle-btn:hover:not(.active) {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
}
.enhanced-view-toggle-btn.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-light-rgb), 0.15) 100%);
    border-color: rgba(var(--accent-rgb), 0.6);
    color: rgb(var(--accent-light-rgb));
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

/* Main Container */
.enhanced-view-container {
    padding: 0;
    animation: enhancedFadeIn 0.35s ease-out;
}
@keyframes enhancedFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Artist Meta Panel */
.enhanced-artist-meta {
    background: linear-gradient(135deg, rgba(35,35,35,0.6), rgba(20,20,20,0.8));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 20px;
    position: relative;
    overflow: visible;
}
.enhanced-artist-meta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6) 0%, transparent 100%);
    border-radius: 16px 16px 0 0;
}
.enhanced-artist-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
}
.enhanced-artist-meta-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}
.enhanced-artist-meta-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    flex-shrink: 0;
}
.enhanced-artist-meta-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.enhanced-artist-meta-name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enhanced-artist-id-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.enhanced-id-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.enhanced-id-badge:hover {
    filter: brightness(1.3);
    transform: translateY(-1px);
}
a.enhanced-id-badge,
a.enhanced-id-badge:visited {
    text-decoration: none;
}
.enhanced-id-badge.spotify { background: rgba(30, 215, 96, 0.15); color: #1ed760; border: 1px solid rgba(30, 215, 96, 0.25); }
.enhanced-id-badge.mb { background: rgba(186, 72, 27, 0.15); color: #e8834a; border: 1px solid rgba(186, 72, 27, 0.25); }
.enhanced-id-badge.deezer { background: rgba(160, 55, 200, 0.15); color: #c770e8; border: 1px solid rgba(160, 55, 200, 0.25); }
.enhanced-id-badge.audiodb { background: rgba(50, 120, 220, 0.15); color: #5a9de6; border: 1px solid rgba(50, 120, 220, 0.25); }
.enhanced-id-badge.lastfm { background: rgba(185, 0, 0, 0.15); color: #d42f2f; border: 1px solid rgba(185, 0, 0, 0.25); }
.enhanced-id-badge.genius { background: rgba(255, 255, 100, 0.12); color: #e8d44d; border: 1px solid rgba(255, 255, 100, 0.2); }
.enhanced-id-badge.tidal { background: rgba(0, 0, 0, 0.15); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); }
.enhanced-id-badge.qobuz { background: rgba(1, 112, 239, 0.15); color: #4da6ff; border: 1px solid rgba(1, 112, 239, 0.25); }
.enhanced-id-badge.server { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.12); }

.enhanced-meta-edit-toggle {
    padding: 8px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.enhanced-meta-edit-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.enhanced-meta-edit-toggle.active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
}

.enhanced-artist-meta-form {
    padding: 0 24px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    animation: enhancedFadeIn 0.25s ease-out;
}
.enhanced-artist-meta-form.hidden {
    display: none;
}
.enhanced-artist-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.enhanced-artist-meta-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.enhanced-meta-save-btn,
.enhanced-meta-cancel-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.enhanced-meta-save-btn {
    background: rgb(var(--accent-rgb));
    color: #ffffff;
}
.enhanced-meta-save-btn:hover {
    background: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}
.enhanced-meta-cancel-btn {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}
.enhanced-meta-cancel-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* Stats Summary Bar */
.enhanced-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.enhanced-stats-items {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.enhanced-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.enhanced-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.enhanced-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.4);
}
.enhanced-stats-formats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Expanded Album Header (inside panel) */
.enhanced-expanded-header {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 12px;
}
.enhanced-expanded-art {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
}
.enhanced-expanded-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    min-width: 0;
    flex: 1;
}
.enhanced-expanded-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enhanced-expanded-meta {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}
.enhanced-expanded-genres {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.enhanced-genre-tag {
    padding: 2px 10px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
    font-size: 11px;
    color: rgb(var(--accent-light-rgb));
    font-weight: 500;
}
.enhanced-expanded-ids {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.enhanced-artist-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.enhanced-meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.enhanced-meta-field.wide {
    grid-column: span 2;
}
.enhanced-meta-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.4);
}
.enhanced-meta-field-input {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
.enhanced-meta-field-input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 16px rgba(var(--accent-rgb), 0.08);
}
.enhanced-meta-field-input::placeholder {
    color: rgba(255,255,255,0.25);
}
textarea.enhanced-meta-field-input {
    min-height: 60px;
    resize: vertical;
}
.enhanced-meta-field-readonly {
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
    cursor: default;
    word-break: break-all;
}

/* Section Headers */
.enhanced-section {
    margin-bottom: 28px;
}
.enhanced-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 4px;
    border-bottom: 2px solid rgba(255,255,255,0.06);
}
.enhanced-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}
.enhanced-section-count {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

/* Album Grid */
.enhanced-album-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
/* Grid children default to min-width:auto, so a wide album row refused to
   shrink and overflowed the right column at full width — clipped at desktop,
   fine only once the mobile breakpoint collapsed it to one column (#1040).
   minmax(0,1fr) on the tracks + min-width:0 here lets the cells shrink so the
   row's own ellipsis engages instead of spilling past the container. */
.enhanced-album-wrapper {
    min-width: 0;
}
.enhanced-album-wrapper.expanded {
    grid-column: 1 / -1;
}

/* Album Rows */
.enhanced-album-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.enhanced-album-row:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
.enhanced-album-row.expanded {
    background: rgba(var(--accent-rgb), 0.04);
    border-color: rgba(var(--accent-rgb), 0.2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
.enhanced-album-expand-icon {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}
.enhanced-album-row.expanded .enhanced-album-expand-icon {
    transform: rotate(90deg);
    color: rgb(var(--accent-light-rgb));
}
.enhanced-album-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.enhanced-album-thumb-fallback {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.enhanced-album-info-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.enhanced-album-meta-line {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enhanced-album-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enhanced-album-year {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
    min-width: 40px;
}
.enhanced-album-type-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.enhanced-album-type-badge.album {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.enhanced-album-type-badge.ep {
    background: rgba(255, 184, 77, 0.15);
    color: #ffb84d;
    border: 1px solid rgba(255, 184, 77, 0.25);
}
.enhanced-album-type-badge.single {
    background: rgba(147, 130, 255, 0.15);
    color: #9382ff;
    border: 1px solid rgba(147, 130, 255, 0.25);
}
.enhanced-album-track-count {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
    min-width: 60px;
    text-align: right;
}

/* Expandable Tracks Panel */
.enhanced-tracks-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin-bottom: 4px;
}
.enhanced-tracks-panel.visible {
    grid-template-rows: 1fr;
}
.enhanced-tracks-panel-inner {
    overflow: hidden;
    padding: 0 16px;
    transition: padding 0.3s ease-out;
}
.enhanced-tracks-panel.visible > .enhanced-tracks-panel-inner {
    padding: 16px;
}

/* Album Meta Edit Row (inside expanded panel) */
.enhanced-album-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.enhanced-album-meta-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.enhanced-album-meta-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.35);
}
.enhanced-album-meta-input {
    width: 100%;
    padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: #ffffff;
    font-size: 12px;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.enhanced-album-meta-input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.04);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}
.enhanced-album-save-btn {
    align-self: flex-end;
    padding: 6px 14px;
    background: rgb(var(--accent-rgb));
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.enhanced-album-save-btn:hover {
    background: rgb(var(--accent-light-rgb));
}

/* Track Table */
.enhanced-track-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    contain: layout style;
}
.enhanced-track-table th {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
}
.enhanced-track-table th:first-child { width: 36px; text-align: center; }
.enhanced-track-table .col-play { width: 36px; text-align: center; padding: 0 4px; }
.enhanced-track-table .col-num { width: 45px; text-align: center; }
.enhanced-track-table .col-title { width: auto; }
.enhanced-track-table .col-duration { width: 70px; text-align: right; }
.enhanced-track-table .col-format { width: 80px; }
.enhanced-track-table .col-bitrate { width: 100px; text-align: right; }
.enhanced-track-table .col-path { width: 25%; }
.enhanced-track-table .col-bpm { width: 60px; text-align: right; }
.enhanced-track-table .col-actions { width: 50px; text-align: center; }
.enhanced-track-table .col-queue,
.enhanced-track-table .col-writetag,
.enhanced-track-table .col-delete { padding-left: 4px; padding-right: 4px; }

/* Mobile actions column — hidden on desktop, shown on mobile via mobile.css */
.enhanced-track-table .col-mobile-actions { display: none; }
.enhanced-mobile-actions-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    letter-spacing: 1px;
}
.enhanced-mobile-actions-btn:active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.enhanced-track-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.enhanced-track-table td:first-child { text-align: center; }
.enhanced-track-table td.col-num { text-align: center; color: rgba(255,255,255,0.4); font-size: 12px; }
.enhanced-track-table td.col-duration { text-align: right; color: rgba(255,255,255,0.5); font-size: 12px; }
.enhanced-track-table td.col-bitrate { text-align: right; }
.enhanced-track-table td.col-bpm { text-align: right; color: rgba(255,255,255,0.5); }
.enhanced-track-table td.col-path {
    font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    direction: rtl;
    text-align: left;
}
.enhanced-track-table tr:hover {
    background: rgba(255,255,255,0.03);
}
.enhanced-track-table tr.selected {
    background: rgba(var(--accent-rgb), 0.06);
}
.enhanced-track-table tr.enhanced-missing-track-row {
    background: rgba(255, 184, 77, 0.025);
}
.enhanced-track-table tr.enhanced-missing-track-row:hover {
    background: rgba(255, 184, 77, 0.055);
}
.enhanced-missing-track-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}
.enhanced-missing-track-badge {
    color: #ffb84d;
    background: rgba(255, 184, 77, 0.11);
    border: 1px solid rgba(255, 184, 77, 0.22);
}
.enhanced-missing-action-btn,
.enhanced-missing-manage-btn {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.09);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.enhanced-missing-manage-btn {
    min-width: 68px;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.26);
}
.enhanced-missing-manage-btn:hover {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.42);
    transform: translateY(-1px);
}
.enhanced-missing-action-btn.primary {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.9);
    border-color: rgba(var(--accent-light-rgb), 0.55);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.16);
}
.enhanced-missing-action-btn.primary:hover {
    background: rgb(var(--accent-light-rgb));
    transform: translateY(-1px);
}
.enhanced-missing-action-btn.secondary {
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.055);
}
.enhanced-missing-action-btn.secondary:hover {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.11);
    border-color: rgba(var(--accent-rgb), 0.25);
}

/* Play button */
.enhanced-play-btn {
    background: none;
    border: none;
    color: rgba(var(--accent-rgb), 0.7);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}
.enhanced-play-btn:hover {
    color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.12);
    transform: scale(1.15);
}
.enhanced-play-btn:disabled {
    color: rgba(255,255,255,0.15);
    cursor: not-allowed;
    transform: none;
    background: none;
}

/* Editable cells */
.enhanced-track-table td.editable {
    cursor: text;
    position: relative;
}
.enhanced-track-table td.editable:hover {
    background: rgba(var(--accent-rgb), 0.04);
}
.enhanced-track-table td.editable:hover::after {
    content: '\270E';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(var(--accent-rgb), 0.5);
}

/* Inline Edit Input */
.enhanced-inline-input {
    width: 100%;
    padding: 4px 8px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
    box-sizing: border-box;
}
.enhanced-inline-input.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Track Checkbox */
.enhanced-track-checkbox {
    width: 16px;
    height: 16px;
    accent-color: rgb(var(--accent-light-rgb));
    cursor: pointer;
}

/* Format Badge */
.enhanced-format-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.enhanced-format-badge.flac {
    background: rgba(255, 184, 77, 0.15);
    color: #ffb84d;
}
.enhanced-format-badge.mp3 {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
}
.enhanced-format-badge.other {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}

/* Bitrate display */
.enhanced-bitrate {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.enhanced-bitrate.high { color: rgb(var(--accent-light-rgb)); }
.enhanced-bitrate.medium { color: #ffb84d; }
.enhanced-bitrate.low { color: #ff6b6b; }

/* Bulk Actions Bar */
.enhanced-bulk-bar {
    position: fixed;
    bottom: -80px;
    left: var(--sidebar-w);
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, rgba(30,30,30,0.98), rgba(20,20,20,0.98));
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(var(--accent-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 100;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}
.enhanced-bulk-bar.visible {
    bottom: 0;
}
.enhanced-bulk-bar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.enhanced-bulk-bar-count {
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--accent-light-rgb));
}
.enhanced-bulk-bar-label {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.enhanced-bulk-bar-actions {
    display: flex;
    gap: 8px;
}
/* .enhanced-bulk-btn base + .primary/.secondary/.clear migrated to
   .btn .btn--sm (.btn--primary / .btn--secondary / .btn--danger). The
   .enhanced-bulk-btn class is kept on the markup as a hook for the mobile
   size override (.enhanced-bulk-bar .enhanced-bulk-btn) and the special
   .tag-write / .rg-analyze color variants below. */

/* Bulk Edit Modal */
.enhanced-bulk-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    width: 500px;
    max-width: 90vw;
    box-shadow: 0 25px 80px rgba(0,0,0,0.7);
}
.enhanced-bulk-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.enhanced-bulk-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.enhanced-bulk-modal-close {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.enhanced-bulk-modal-close:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}
.enhanced-bulk-modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.enhanced-bulk-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.enhanced-bulk-modal-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
}
.enhanced-bulk-modal-field input,
.enhanced-bulk-modal-field select {
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-family: inherit;
}
.enhanced-bulk-modal-field input:focus,
.enhanced-bulk-modal-field select:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}
.enhanced-bulk-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Empty album state */
.enhanced-no-tracks {
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    font-style: italic;
}

/* Scrollbar for track panels */
.enhanced-tracks-panel-inner::-webkit-scrollbar { width: 6px; }
.enhanced-tracks-panel-inner::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
.enhanced-tracks-panel-inner::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 10px; }
.enhanced-tracks-panel-inner::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); }

/* Loading state for enhanced view */
.enhanced-view-container .enhanced-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 0;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}
.enhanced-view-container .enhanced-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    border-top: 2px solid rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Enrich Dropdown */
.enhanced-enrich-wrap {
    position: relative;
    display: inline-block;
}
.enhanced-enrich-btn {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.enhanced-enrich-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.enhanced-sync-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.enhanced-sync-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   REORGANIZE STATUS PANEL — sits at the start of .enhanced-artist-meta-actions
   ═══════════════════════════════════════════════════════════════════════════ */

.reorganize-status-panel {
    flex: 1 1 100%;
    order: -1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease, border-color 0.2s ease;
    min-width: 0;
}
.reorganize-status-panel.hidden {
    display: none;
}

.reorg-panel-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    min-width: 0;
}
.reorg-panel-compact-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
.reorg-panel-compact-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.reorg-panel-active-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.reorg-panel-active-text strong {
    color: #ffffff;
    font-weight: 600;
}
.reorg-panel-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    flex-shrink: 0;
    animation: reorgPanelSpin 0.9s linear infinite;
}
@keyframes reorgPanelSpin {
    to { transform: rotate(360deg); }
}
.reorg-panel-recent-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.reorg-panel-recent-icon.recent-ok { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.4); }
.reorg-panel-recent-icon.recent-warn { background: #facc15; box-shadow: 0 0 6px rgba(250, 204, 21, 0.4); }

.reorg-panel-queue-badge {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.reorg-panel-chevron {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    transition: color 0.2s ease;
}
.reorg-panel-compact:hover .reorg-panel-chevron {
    color: rgba(255, 255, 255, 0.85);
}

.reorg-panel-expanded {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reorg-panel-active-card {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reorg-panel-active-title {
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reorg-panel-cross-artist {
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
    font-size: 11px;
    font-style: italic;
}
.reorg-panel-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.reorg-panel-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        rgb(var(--accent-rgb)) 0%,
        rgb(var(--accent-light-rgb)) 100%);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.reorg-panel-active-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
}
.reorg-panel-current-track {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.reorg-panel-counters {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}
.reorg-panel-counters .ok { color: #4ade80; }
.reorg-panel-counters .warn { color: #facc15; }
.reorg-panel-counters .fail { color: #f87171; }

.reorg-panel-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.reorg-panel-clear-btn {
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: all 0.15s ease;
}
.reorg-panel-clear-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.5);
}

.reorg-panel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reorg-panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 0;
}
.reorg-panel-row-pos {
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    width: 22px;
}
.reorg-panel-row-body {
    flex: 1 1 auto;
    min-width: 0;
}
.reorg-panel-row-title {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reorg-panel-row-sub {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reorg-panel-cancel-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.reorg-panel-cancel-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
.reorg-panel-row.recent-row.success { border-color: rgba(74, 222, 128, 0.18); }
.reorg-panel-row.recent-row.warning { border-color: rgba(250, 204, 21, 0.18); }
.reorg-panel-row.recent-row.cancelled { border-color: rgba(255, 255, 255, 0.08); opacity: 0.7; }
.reorg-panel-row-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.reorg-panel-row-icon.success { background: #4ade80; }
.reorg-panel-row-icon.warning { background: #facc15; }
.reorg-panel-row-icon.cancelled { background: rgba(255, 255, 255, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   DOWNLOAD DISCOGRAPHY — Button + Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.discog-download-wrap { margin: 0; display: inline-flex; }

.discog-download-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 10px;
    color: rgb(var(--accent-light-rgb));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
    font-family: inherit;
}

.discog-download-btn:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.1) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2);
}

.discog-btn-icon { font-size: 15px; }

.discog-btn-compact {
    width: auto;
    max-width: 220px;
    padding: 7px 16px;
    font-size: 12px;
    border-radius: 8px;
}

.discog-btn-compact .discog-btn-icon { font-size: 12px; }

.discog-btn-shimmer {
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: discogShimmer 3s ease-in-out infinite;
}

@keyframes discogShimmer {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

/* Modal overlay */
.discog-modal-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}

.discog-modal-overlay.visible { opacity: 1; }

.discog-modal {
    width: 680px; max-width: 95vw; max-height: 85vh;
    background: rgba(14, 14, 14, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(24px);
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.discog-modal-overlay.visible .discog-modal {
    transform: scale(1) translateY(0);
}

/* Hero header */
.discog-modal-hero {
    position: relative;
    padding: 28px 24px 20px;
    background-size: cover;
    background-position: center;
    min-height: 80px;
}

.discog-modal-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,14,14,0.6) 0%, rgba(14,14,14,0.95) 100%);
    backdrop-filter: blur(20px);
}

.discog-modal-hero-content { position: relative; z-index: 1; }

.discog-modal-title {
    font-size: 20px; font-weight: 800; color: #fff;
    letter-spacing: -0.3px; margin: 0 0 4px;
}

.discog-modal-artist {
    font-size: 14px; color: rgba(var(--accent-light-rgb), 0.8);
    margin: 0; font-weight: 600;
}

.discog-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: rgba(255,255,255,0.1); border: none; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer;
    transition: all 0.15s ease;
}

.discog-modal-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Filter bar */
.discog-filter-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.discog-filters { display: flex; gap: 6px; }

.discog-filter {
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s ease;
    font-family: inherit;
}

.discog-filter.active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.25);
    color: rgb(var(--accent-light-rgb));
}

/* the compare editor's delete pill goes red on hover so it reads as
   destructive without shouting at rest (mm-btn-danger's palette) */
.server-editor-delete:hover:not(:disabled) {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.4);
    color: #ff6b66;
}

.discog-select-actions { display: flex; gap: 6px; }

.discog-select-btn {
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
    background: transparent; border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.15s ease;
    font-family: inherit;
}

.discog-select-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.15); }

/* Album grid */
.discog-section-header {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    padding: 10px 4px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.discog-section-header:first-child {
    padding-top: 0;
}

.discog-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px; padding: 14px 20px; overflow-y: auto; flex: 1; min-height: 0;
}

.discog-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: all 0.15s ease;
    animation: discogCardIn 0.3s ease backwards;
}

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

.discog-card:hover { background: rgba(var(--accent-rgb), 0.05); border-color: rgba(var(--accent-rgb), 0.12); }

.discog-card.owned { opacity: 0.5; }
.discog-card.partial { border-left: 3px solid rgba(255, 193, 7, 0.5); }

.discog-card-cb { display: none; }

.discog-card-art {
    position: relative; width: 44px; height: 44px; border-radius: 6px;
    overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.04);
}

.discog-card-art img { width: 100%; height: 100%; object-fit: cover; }
.discog-card-art-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; }

.discog-card-status {
    position: absolute; bottom: 2px; right: 2px;
    background: rgba(0,0,0,0.7); border-radius: 4px;
    font-size: 10px; padding: 1px 4px; color: #4caf50;
}

.discog-card-info { flex: 1; min-width: 0; }

.discog-card-title {
    font-size: 13px; font-weight: 600; color: #fff;
    white-space: normal; word-break: break-word;
}

.discog-card-meta { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

.explicit-badge {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
    padding: 1px 4px; border-radius: 3px; vertical-align: middle; margin-left: 5px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.15); line-height: 1.4; flex-shrink: 0;
    font-family: inherit;
}
.album-card-explicit {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
    padding: 1px 4px; border-radius: 3px; vertical-align: middle; margin-left: 4px;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.2); line-height: 1.4;
    font-family: inherit; text-shadow: none;
}

.discog-card-check {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15); transition: all 0.15s ease;
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
}

.discog-card-cb:checked ~ .discog-card-check {
    background: rgb(var(--accent-rgb));
    border-color: rgb(var(--accent-rgb));
}

.discog-card-cb:checked ~ .discog-card-check::after {
    content: '✓'; color: #fff; font-size: 12px; font-weight: 700;
}

/* Footer */
.discog-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.discog-footer-info { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 600; }
.discog-footer-actions { display: flex; gap: 10px; }

.discog-cancel-btn {
    padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.15s ease;
    font-family: inherit;
}

.discog-cancel-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.discog-submit-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.7));
    border: none; color: #fff; cursor: pointer;
    transition: all 0.2s ease; font-family: inherit;
}

.discog-submit-btn:hover { filter: brightness(1.15); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); }
.discog-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.discog-submit-icon { font-size: 14px; }

/* Progress view */
.discog-progress { padding: 14px 20px; overflow-y: auto; flex: 1; min-height: 0; }

.discog-progress-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
    background: rgba(255,255,255,0.02); transition: all 0.3s ease;
}

.discog-progress-item.active { background: rgba(var(--accent-rgb), 0.06); }
.discog-progress-item.done { background: rgba(76, 175, 80, 0.05); }
.discog-progress-item.skipped { opacity: 0.5; }
.discog-progress-item.error { background: rgba(255, 82, 82, 0.05); }

.discog-prog-art {
    width: 36px; height: 36px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
    background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}

.discog-prog-art img { width: 100%; height: 100%; object-fit: cover; }

.discog-prog-info { flex: 1; min-width: 0; }

.discog-prog-title {
    font-size: 13px; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.discog-prog-status { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }

.discog-prog-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.discog-spinner {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1);
    border-top-color: rgb(var(--accent-rgb)); border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.discog-check { color: #4caf50; font-size: 16px; font-weight: 700; animation: discogPop 0.3s ease; }
.discog-skip { color: rgba(255,255,255,0.3); font-size: 16px; }
.discog-error { color: #ff5252; font-size: 16px; }

@keyframes discogPop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Mobile */
@media (max-width: 768px) {
    .discog-modal { max-width: 100vw; max-height: 100vh; border-radius: 0; }
    .discog-grid { grid-template-columns: 1fr; }
    .discog-filter-bar { flex-wrap: wrap; gap: 8px; }
}

.enhanced-enrich-btn.small {
    padding: 5px 12px;
    font-size: 11px;
}
.enhanced-enrich-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: rgba(20, 20, 20, 0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 6px;
    min-width: 180px;
    z-index: 100;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.enhanced-enrich-menu.visible {
    display: block;
}
.enhanced-enrich-menu-item {
    padding: 8px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.enhanced-enrich-menu-item:hover {
    background: rgba(var(--accent-rgb), 0.12);
    color: #fff;
}

/* Match Status Chips */
.enhanced-match-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.enhanced-match-status-row.compact {
    padding: 8px 0;
    border-top: none;
}
.enhanced-match-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45);
}
.enhanced-match-chip.matched {
    color: rgb(var(--accent-rgb));
    border-color: rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.06);
}
.enhanced-match-chip.not-found {
    color: rgba(255, 100, 100, 0.7);
    border-color: rgba(255, 100, 100, 0.15);
    background: rgba(255, 100, 100, 0.04);
}
.enhanced-match-chip.clickable {
    cursor: pointer;
    transition: all 0.15s ease;
}
.enhanced-match-chip.clickable:hover {
    filter: brightness(1.3);
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.4);
}
.enhanced-match-chip.loading {
    opacity: 0.6;
    pointer-events: none;
    animation: chipPulse 1.2s ease-in-out infinite;
}
@keyframes chipPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Expanded Album Actions */
.enhanced-expanded-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* iTunes ID badge */
.enhanced-id-badge.itunes {
    background: rgba(255, 45, 85, 0.12);
    color: rgba(255, 45, 85, 0.9);
    border-color: rgba(255, 45, 85, 0.2);
}

/* ===== Manual Match Modal ===== */
.enhanced-manual-match-modal {
    background: linear-gradient(165deg, rgba(28,28,28,0.98), rgba(14,14,14,0.99));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}
.enhanced-match-search-row {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.enhanced-match-search-input {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}
.enhanced-match-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}
.enhanced-match-results {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    min-height: 200px;
    max-height: 50vh;
}
.enhanced-match-results-hint {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    padding: 40px 20px;
}
.enhanced-match-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 8px;
    background: rgba(255,255,255,0.02);
    transition: background 0.15s, border-color 0.15s;
}
.enhanced-match-result-row:hover {
    background: rgba(var(--accent-rgb), 0.04);
    border-color: rgba(var(--accent-rgb), 0.15);
}
.enhanced-match-result-img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.enhanced-match-result-img-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255,255,255,0.2);
}
.enhanced-match-result-info {
    flex: 1;
    min-width: 0;
}
.enhanced-match-result-name {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enhanced-match-result-extra {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enhanced-match-result-id {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    margin-top: 2px;
    font-family: monospace;
}
.enhanced-have-track-modal {
    width: 640px;
}
.enhanced-have-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    font-weight: 400;
}
.enhanced-have-target {
    margin: 16px 20px 0;
    padding: 14px 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.055);
}
.enhanced-have-target-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb));
    margin-bottom: 5px;
}
.enhanced-have-target-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.enhanced-have-target-meta {
    margin-top: 3px;
    color: rgba(255,255,255,0.48);
    font-size: 12px;
}
.enhanced-have-note {
    margin: 0 20px 16px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255,255,255,0.52);
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 12px;
    line-height: 1.45;
}
.enhanced-have-import-status {
    margin: 0 20px 16px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.07);
}
.enhanced-have-import-status[hidden] {
    display: none;
}
.enhanced-have-import-status-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.enhanced-have-import-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.24);
    border-top-color: rgb(var(--accent-light-rgb));
    flex-shrink: 0;
    animation: enhanced-have-spin 0.8s linear infinite;
}
.enhanced-have-import-title {
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enhanced-have-import-time {
    color: rgba(255,255,255,0.44);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.enhanced-have-import-detail {
    margin-top: 6px;
    padding-left: 23px;
    color: rgba(255,255,255,0.54);
    font-size: 12px;
    line-height: 1.4;
}
.enhanced-have-import-status.success {
    border-color: rgba(76, 217, 100, 0.3);
    background: rgba(76, 217, 100, 0.08);
}
.enhanced-have-import-status.success .enhanced-have-import-spinner {
    animation: none;
    border-color: rgba(76, 217, 100, 0.35);
    background: rgba(76, 217, 100, 0.8);
}
.enhanced-have-import-status.error {
    border-color: rgba(255, 107, 107, 0.32);
    background: rgba(255, 107, 107, 0.08);
}
.enhanced-have-import-status.error .enhanced-have-import-spinner {
    animation: none;
    border-color: rgba(255, 107, 107, 0.38);
    background: rgba(255, 107, 107, 0.85);
}
@keyframes enhanced-have-spin {
    to { transform: rotate(360deg); }
}
.enhanced-have-result-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.025);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.16s ease;
}
.enhanced-have-result-row:hover,
.enhanced-have-result-row.selected {
    background: rgba(var(--accent-rgb), 0.07);
    border-color: rgba(var(--accent-rgb), 0.28);
}
.enhanced-have-result-row.disabled {
    opacity: 0.55;
    cursor: wait;
    pointer-events: none;
}
.enhanced-have-radio {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    flex-shrink: 0;
}
.enhanced-have-result-row.selected .enhanced-have-radio {
    border-color: rgb(var(--accent-light-rgb));
    box-shadow: inset 0 0 0 4px #151515;
    background: rgb(var(--accent-light-rgb));
}
.enhanced-have-result-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.enhanced-have-result-title {
    color: rgba(255,255,255,0.92);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enhanced-have-result-meta,
.enhanced-have-result-file {
    color: rgba(255,255,255,0.42);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enhanced-have-result-file {
    color: rgba(255,255,255,0.28);
    font-family: 'SF Mono', 'Consolas', monospace;
}
.enhanced-have-result-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.enhanced-missing-manage-modal {
    width: 520px;
}
.enhanced-missing-manage-modal .confirm-modal-header h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.enhanced-missing-manage-body {
    padding: 20px 24px;
}
.enhanced-missing-manage-target {
    padding: 14px 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.055);
}
.enhanced-missing-manage-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.enhanced-missing-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.035);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.16s ease;
}
.enhanced-missing-option:hover,
.enhanced-missing-option.primary:hover {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.28);
    transform: translateY(-1px);
}
.enhanced-missing-option.primary {
    background: rgba(var(--accent-rgb), 0.065);
    border-color: rgba(var(--accent-rgb), 0.2);
}
.enhanced-missing-option-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    font-size: 14px;
    font-weight: 800;
}
.enhanced-missing-option-title,
.enhanced-missing-option-desc {
    display: block;
}
.enhanced-missing-option-title {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: 700;
}
.enhanced-missing-option-desc {
    margin-top: 2px;
    color: rgba(255,255,255,0.46);
    font-size: 11px;
    line-height: 1.35;
}

/* Track-level match status */
.enhanced-track-match-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.enhanced-track-match-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.enhanced-track-match-chip.matched {
    color: rgb(var(--accent-rgb));
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.05);
}
.enhanced-track-match-chip.not-found {
    color: rgba(255, 100, 100, 0.6);
    border-color: rgba(255, 100, 100, 0.12);
    background: rgba(255, 100, 100, 0.03);
}
.enhanced-track-match-chip:hover {
    filter: brightness(1.3);
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), 0.3);
}
.enhanced-track-table .col-match {
    min-width: 120px;
    white-space: nowrap;
}
.enhanced-track-table .col-disc {
    width: 40px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}
.enhanced-track-table .col-track-actions {
    width: auto;
    text-align: right;
}
.enhanced-delete-btn {
    background: none;
    border: 1px solid rgba(255, 80, 80, 0.15);
    color: rgba(255, 80, 80, 0.4);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.enhanced-delete-btn:hover {
    background: rgba(255, 60, 60, 0.12);
    color: rgba(255, 80, 80, 0.9);
    border-color: rgba(255, 80, 80, 0.35);
    transform: scale(1.1);
}
.enhanced-delete-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(255, 60, 60, 0.06);
    border: 1px solid rgba(255, 60, 60, 0.15);
    color: rgba(255, 80, 80, 0.6);
    transition: all 0.15s ease;
}
.enhanced-delete-album-btn:hover {
    background: rgba(255, 60, 60, 0.12);
    color: rgba(255, 80, 80, 0.9);
    border-color: rgba(255, 60, 60, 0.35);
}
/* Sortable column headers */
.enhanced-track-table th[style*="cursor: pointer"]:hover {
    color: rgb(var(--accent-rgb));
}

/* ========== Expanded Now Playing Modal ========== */
.np-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 4, 4, 0.92);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.np-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.np-modal {
    --np-ambient-r: 29;
    --np-ambient-g: 185;
    --np-ambient-b: 84;
    width: 90vw;
    max-width: 880px;
    max-height: 85vh;
    background: linear-gradient(180deg, rgba(24, 24, 24, 0.97) 0%, rgba(10, 10, 10, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.np-modal::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%,
        rgba(var(--np-ambient-r), var(--np-ambient-g), var(--np-ambient-b), 0.35) 0%,
        rgba(var(--np-ambient-r), var(--np-ambient-g), var(--np-ambient-b), 0.08) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: background 1.2s ease;
    filter: blur(40px);
}
.np-modal > * {
    position: relative;
    z-index: 1;
}
.np-modal-overlay.hidden .np-modal {
    transform: scale(0.92);
}
.np-close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 28px;
    cursor: pointer;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.np-close-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
}

/* Layout */
/* Short-viewport safety (the #1024 bug class): the modal is clamped to 85vh
   with overflow:hidden, so on zoomed-in / short windows everything below the
   fold (controls, progress bar, the lyrics/queue headers) was CLIPPED with no
   way to reach it. Flex-column + an internally scrolling body keeps every
   control reachable — the close button (absolute) and the panel headers stay
   pinned, the body scrolls. Tall viewports fit as before: no scrollbar, no
   visual change. Mobile already does this (np-body scrolls at ≤768px). */
.np-modal {
    display: flex;
    flex-direction: column;
}
.np-body {
    display: flex;
    flex-direction: row;
    padding: 48px 40px 36px;
    gap: 48px;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.np-body::-webkit-scrollbar {
    width: 8px;
}
.np-body::-webkit-scrollbar-track {
    background: transparent;
}
.np-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.np-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.np-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    justify-content: center;
}

/* Album Art */
.np-album-art-container {
    width: 300px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
}
.np-album-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.np-album-art.hidden {
    display: none;
}
.np-album-art-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 30, 30, 1) 0%, rgba(18, 18, 18, 1) 100%);
    color: rgba(255, 255, 255, 0.12);
}
.np-album-art:not(.hidden) + .np-album-art-placeholder {
    display: none;
}

/* Track Info */
.np-track-info {
    text-align: center;
    width: 300px;
}
.np-track-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.3px;
}
.np-artist-name {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-album-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-format-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.np-format-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.np-format-badge.flac {
    color: rgba(var(--accent-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.15);
}

/* Progress Section */
.np-progress-section {
    width: 100%;
}
.np-progress-bar-container {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.np-progress-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.np-progress-bar-container:hover .np-progress-track {
    height: 6px;
}
.np-progress-fill {
    height: 100%;
    background: rgb(var(--accent-rgb));
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}
.np-progress-bar {
    position: absolute;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}
.np-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.np-progress-bar-container:hover .np-progress-bar::-webkit-slider-thumb {
    opacity: 1;
}
.np-progress-bar::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    border: none;
}
.np-progress-bar::-moz-range-track {
    background: transparent;
    border: none;
    height: 4px;
}
.np-time-display {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}
.np-current-time,
.np-total-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
}
.np-total-time {
    text-align: right;
}

/* Controls Row */
.np-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.np-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.np-btn:hover {
    color: #fff;
    transform: scale(1.08);
}
.np-btn:active {
    transform: scale(0.95);
}
.np-btn:disabled {
    color: rgba(255, 255, 255, 0.15);
    cursor: default;
    transform: none;
}
.np-btn-play {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    color: #000;
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.3);
    position: relative;
}
.np-btn-play:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.4);
}
.np-btn-play:active {
    filter: brightness(0.9);
    transform: scale(0.97);
}
.np-btn-shuffle.active,
.np-btn-repeat.active {
    color: rgb(var(--accent-rgb));
}
.np-btn-shuffle.active::after,
.np-btn-repeat.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
}
.np-btn-shuffle,
.np-btn-repeat {
    position: relative;
}

/* Volume Row */
.np-volume-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.np-mute-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
.np-mute-btn:hover {
    color: #fff;
}
.np-mute-btn.muted {
    color: rgba(255, 80, 80, 0.7);
}
.np-volume-slider-container {
    position: relative;
    width: 160px;
    height: 20px;
    display: flex;
    align-items: center;
}
.np-volume-track {
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.np-volume-fill {
    height: 100%;
    background: rgb(var(--accent-rgb));
    border-radius: 2px;
    width: 70%;
    transition: width 0.05s linear;
}
.np-volume-slider {
    position: absolute;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}
.np-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.np-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
}
.np-volume-slider::-moz-range-track {
    background: transparent;
    border: none;
    height: 4px;
}

/* Stop Row */
.np-stop-row {
    display: flex;
    justify-content: center;
}
.np-btn-stop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.np-btn-stop:hover {
    background: rgba(255, 60, 60, 0.08);
    border-color: rgba(255, 60, 60, 0.2);
    color: rgba(255, 80, 80, 0.8);
}

/* Visualizer */
.np-visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 24px;
    margin-top: 8px;
    opacity: 0.5;
}
.np-viz-bar {
    width: 3px;
    background: rgb(var(--accent-rgb));
    border-radius: 1.5px;
    height: 24px;
    transform-origin: bottom;
    transform: scaleY(0.125);
    will-change: transform;
    transition: transform 0.06s ease-out;
}
/* CSS fallback animation when Web Audio is not available */
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar {
    animation: npVizPulse 0.8s ease-in-out infinite alternate;
}
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(1) { animation-delay: 0s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(2) { animation-delay: 0.1s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(3) { animation-delay: 0.2s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(4) { animation-delay: 0.15s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(5) { animation-delay: 0.25s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(6) { animation-delay: 0.05s; }
.np-visualizer.playing.np-viz-css-fallback .np-viz-bar:nth-child(7) { animation-delay: 0.18s; }
@keyframes npVizPulse {
    0% { transform: scaleY(0.125); }
    100% { transform: scaleY(0.83); }
}

/* Track text transition animation */
.np-text-transition {
    animation: npTextFade 0.35s ease;
}
@keyframes npTextFade {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Repeat-one badge */
.np-repeat-one-badge {
    position: absolute;
    top: 2px;
    right: 0px;
    font-size: 9px;
    font-weight: 700;
    color: rgb(var(--accent-rgb));
    line-height: 1;
    pointer-events: none;
}
.np-repeat-one-badge.hidden {
    display: none;
}

/* Action buttons row */
.np-action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
}
.np-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.np-action-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}
.np-action-buttons.hidden {
    display: none;
}

/* Buffering ring on play button */
.np-buffering-ring {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: rgb(var(--accent-rgb));
    animation: npBufferSpin 0.9s linear infinite;
    pointer-events: none;
}
.np-buffering-ring.hidden {
    display: none;
}
@keyframes npBufferSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Radio mode button */
.np-radio-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.np-radio-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}
.np-radio-btn.active {
    color: rgb(var(--accent-rgb));
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.08);
}
.np-queue-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Queue panel scrollbar */
.np-queue-body::-webkit-scrollbar {
    width: 6px;
}
.np-queue-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}
.np-queue-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.np-queue-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Lyrics Panel (now-playing modal) */
.np-lyrics-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 40px;
}

.np-lyrics-header {
    display: flex;
    align-items: center;
    padding: 12px 0 8px;
}

.np-lyrics-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.np-lyrics-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

.np-lyrics-status {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 4px;
}

.np-lyrics-body {
    max-height: 260px;
    overflow-y: auto;
    padding-bottom: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
}

.np-lyrics-content {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    white-space: pre-wrap;
}

.np-lyrics-empty {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    text-align: center;
    padding: 12px 0;
}

.np-lyrics-line {
    padding: 2px 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.np-lyrics-line.active {
    color: rgb(var(--accent-rgb));
    font-weight: 600;
    transform: translateX(4px);
}

.np-lyrics-line.passed {
    color: rgba(255, 255, 255, 0.45);
}

.np-lyrics-line.upcoming {
    color: rgba(255, 255, 255, 0.55);
}

/* Queue Panel */
.np-queue-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 40px 20px;
}
.np-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 8px;
}
.np-queue-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 0;
    transition: color 0.15s ease;
}
.np-queue-toggle:hover,
.np-queue-toggle.active {
    color: rgba(255, 255, 255, 0.85);
}
.np-queue-count {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}
.np-queue-clear-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.np-queue-clear-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}
.np-queue-body {
    max-height: 200px;
    overflow-y: auto;
}
.np-queue-body.hidden {
    display: none;
}
.np-queue-empty {
    color: rgba(255, 255, 255, 0.25);
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
}
.np-queue-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.np-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.np-queue-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.np-queue-item.active {
    background: rgba(var(--accent-rgb), 0.12);
    border-left: 3px solid rgb(var(--accent-rgb));
}
.np-queue-item-info {
    min-width: 0;
    flex: 1;
}
.np-queue-item-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-queue-item.active .np-queue-item-title {
    color: rgb(var(--accent-light-rgb));
}
.np-queue-item-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-queue-item-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.np-queue-item-remove:hover {
    color: rgba(255, 80, 80, 0.8);
    background: rgba(255, 80, 80, 0.1);
}

/* ══════════════════════════════════════════════════════════════════════
   NOW PLAYING — full redesign (player revamp). Comprehensive override of the
   .np-* modal styling to the approved mockup look. !important is used through-
   out to guarantee these win over the original block above regardless of
   source order. Accent-driven via --accent-rgb / --accent-light-rgb.
   ══════════════════════════════════════════════════════════════════════ */

.np-modal {
    width: min(960px, 94vw) !important;
    max-width: 960px !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(26,26,28,0.97) 0%, rgba(11,11,12,0.99) 100%) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 40px 120px rgba(0,0,0,0.72),
                0 0 0 1px rgba(255,255,255,0.03) inset,
                0 1px 0 rgba(255,255,255,0.06) inset !important;
}
.np-modal::before {
    top: -30% !important;
    height: 72% !important;
    background: radial-gradient(ellipse at 28% 18%,
        rgba(var(--np-ambient-r), var(--np-ambient-g), var(--np-ambient-b), 0.45) 0%,
        rgba(var(--np-ambient-r), var(--np-ambient-g), var(--np-ambient-b), 0.12) 38%,
        transparent 68%) !important;
    filter: blur(48px) !important;
}
.np-body { padding: 54px 44px 38px !important; gap: 48px !important; align-items: flex-start !important; }

/* ── Album art: big, rounded, accent depth, scales while playing ── */
.np-album-art-container {
    width: 340px !important;
    height: 340px !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 6px 22px rgba(var(--accent-rgb),0.16) !important;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s !important;
}
.np-modal.playing .np-album-art-container {
    transform: scale(1.02) !important;
    box-shadow: 0 30px 92px rgba(0,0,0,0.66), 0 12px 40px rgba(var(--accent-rgb),0.28) !important;
}

/* ── "Playing from" context label (above the title) ── */
.np-play-context { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.np-play-context.hidden { display: none; }
.np-play-context-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.32);
}
.np-play-context-name {
    font-size: 12px; font-weight: 700; color: rgb(var(--accent-light-rgb));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}

/* ── Track meta ── */
.np-track-info { text-align: left !important; }
.np-track-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; }
.np-artist-name { font-size: 15px !important; font-weight: 600 !important; color: rgb(var(--accent-light-rgb)) !important; }
.np-album-name { font-size: 13px !important; color: rgba(255,255,255,0.4) !important; }

/* ── Format badges → accent pills ── */
.np-format-badges { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 16px !important; }
.np-format-badge {
    font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important;
    padding: 5px 11px !important; border-radius: 999px !important;
    background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.62) !important;
}
.np-format-badge.flac {
    color: rgb(var(--accent-light-rgb)) !important;
    border-color: rgba(var(--accent-rgb),0.4) !important;
    background: rgba(var(--accent-rgb),0.12) !important;
}

/* ── Progress / volume: thicker track, accent gradient fill, glow on hover ── */
.np-progress-track, .np-volume-track { height: 6px !important; border-radius: 999px !important; background: rgba(255,255,255,0.12) !important; }
.np-progress-fill, .np-volume-fill {
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb))) !important;
    border-radius: 999px !important;
}
.np-progress-bar-container:hover .np-progress-fill { box-shadow: 0 0 12px rgba(var(--accent-rgb),0.6) !important; }
.np-time-display { font-variant-numeric: tabular-nums !important; }

/* Seek hover tooltip — timestamp under the cursor on the progress bar. */
.np-progress-bar-container { position: relative; }
.np-seek-tip {
    position: absolute; bottom: 150%; transform: translateX(-50%);
    background: #000; color: #fff; font-size: 11px; font-variant-numeric: tabular-nums;
    padding: 3px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity 0.12s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 5;
}
.np-seek-tip.visible { opacity: 1; }

/* ── Transport: dominant gradient play button ── */
.np-controls-row { gap: 24px !important; }
.np-btn {
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    color: rgba(255,255,255,0.62) !important; transition: all 0.16s ease !important;
}
.np-btn:hover { color: #fff !important; background: rgba(255,255,255,0.07) !important; transform: scale(1.08) !important; }
.np-btn-play {
    width: 70px !important; height: 70px !important; border-radius: 50% !important;
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb))) !important;
    color: #06140b !important;
    box-shadow: 0 8px 30px rgba(var(--accent-rgb),0.5), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}
.np-btn-play:hover {
    filter: none !important;
    transform: scale(1.06) !important;
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb))) !important;
    box-shadow: 0 12px 40px rgba(var(--accent-rgb),0.66), inset 0 1px 0 rgba(255,255,255,0.45) !important;
}
.np-btn-shuffle.active, .np-btn-repeat.active { color: rgb(var(--accent-light-rgb)) !important; }
.np-btn-shuffle.active::after, .np-btn-repeat.active::after { background: rgb(var(--accent-light-rgb)) !important; }

/* Stop is a text pill, NOT a circular transport button — exempt it from the
   round .np-btn sizing above (which was squashing "Stop" into a tiny circle). */
.np-btn.np-btn-stop {
    width: auto !important; height: auto !important;
    border-radius: 999px !important;
    padding: 8px 20px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
.np-btn.np-btn-stop:hover {
    background: rgba(255,60,60,0.1) !important;
    border-color: rgba(255,60,60,0.25) !important;
    color: rgba(255,90,90,0.9) !important;
    transform: none !important;
}

/* ── Visualizer bars: accent gradient ── */
.np-viz-bar {
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgba(var(--accent-rgb),0.35)) !important;
    border-radius: 3px !important;
}

/* ── Queue rows: rounded, hover, accent active row + accent title ── */
.np-queue-item { border-radius: 12px !important; transition: background 0.14s !important; }
.np-queue-item:hover { background: rgba(255,255,255,0.05) !important; }
.np-queue-item.active { background: rgba(var(--accent-rgb),0.12) !important; }
.np-queue-item.active .np-queue-item-title { color: rgb(var(--accent-light-rgb)) !important; }
.np-radio-btn.active, .np-queue-toggle.active { color: rgb(var(--accent-light-rgb)) !important; }

/* ── Close button + lyrics (active line + click-to-seek affordance) ── */
.np-close-btn:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; }
.np-lyrics-line.active { color: rgb(var(--accent-light-rgb)) !important; font-weight: 700 !important; }
.np-lyrics-line { cursor: pointer; border-radius: 6px; transition: background 0.12s, color 0.12s; }
.np-lyrics-line:hover { background: rgba(var(--accent-rgb),0.10); color: rgb(var(--accent-light-rgb)); }

/* ── Crafted entrance: controls stagger-fade in when modal opens ──
   (Art container is intentionally excluded — its transform is reserved for the
   play-scale; it gets its own scale-in via the box transition.) */
.np-modal-overlay:not(.hidden) .np-track-info { animation: npRiseIn 0.55s cubic-bezier(0.16,1,0.3,1) 0.06s both; }
.np-modal-overlay:not(.hidden) .np-right > * { animation: npRiseIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.np-modal-overlay:not(.hidden) .np-util-row { animation-delay: 0.08s; }
.np-modal-overlay:not(.hidden) .np-progress-section { animation-delay: 0.12s; }
.np-modal-overlay:not(.hidden) .np-controls-row { animation-delay: 0.16s; }
.np-modal-overlay:not(.hidden) .np-volume-row { animation-delay: 0.20s; }
.np-modal-overlay:not(.hidden) .np-upnext { animation-delay: 0.24s; }
@keyframes npRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ── Click-art → music-synced visualizer takeover (Plexamp-style) ── */
.np-album-art-container { cursor: pointer; }
.np-art-hint {
    position: absolute; bottom: 12px; right: 12px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    display: grid; place-items: center; color: #fff;
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.np-album-art-container:hover .np-art-hint { opacity: 1; }
.np-album-art-container.viz-on .np-art-hint { opacity: 1; color: rgb(var(--accent-light-rgb)); }

.np-art-viz {
    position: absolute; inset: 0; z-index: 3;
    display: none; align-items: center; justify-content: center; gap: 5px;
    background: radial-gradient(circle at 50% 60%, rgba(var(--accent-rgb),0.20), rgba(0,0,0,0.88));
}
.np-album-art-container.viz-on .np-art-viz { display: flex; }
.np-album-art-container.viz-on .np-album-art,
.np-album-art-container.viz-on .np-album-art-placeholder { opacity: 0; transition: opacity 0.35s ease; }
.np-art-viz-bar {
    width: 7px; border-radius: 5px; height: 12%;
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgba(var(--accent-rgb),0.35));
    transform-origin: bottom; transition: height 0.08s linear;
}

/* ── Sleep / Crossfade utility row (top-right of controls) ── */
.np-util-row { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 4px; }
.np-util-btn {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.16s ease;
}
.np-util-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.18); }
.np-util-btn.active {
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb),0.12);
    border-color: rgba(var(--accent-rgb),0.32);
}

/* ── Up-next peek ── */
.np-upnext {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.np-upnext.hidden { display: none; }
.np-upnext-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.38); flex-shrink: 0;
}
.np-upnext-art { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.05); }
.np-upnext-info { min-width: 0; }
.np-upnext-title { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-upnext-artist { font-size: 11.5px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Rich queue rows: thumbnail + meta + duration/eq + remove ── */
.np-queue-item {
    display: grid !important;
    grid-template-columns: 44px 1fr auto auto !important;
    align-items: center !important; gap: 13px !important;
    padding: 8px 10px !important;
}
.np-queue-item-art { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.05); }
.np-queue-item-info { min-width: 0; }
.np-queue-item-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-queue-item-artist { font-size: 12px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-queue-item-duration { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.38); }
.np-queue-item-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.np-queue-item-eq i { width: 3px; border-radius: 2px; background: rgb(var(--accent-light-rgb)); animation: npQueueEq 0.9s ease-in-out infinite; }
.np-queue-item-eq i:nth-child(2) { animation-delay: 0.2s; }
.np-queue-item-eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes npQueueEq { 0%,100% { height: 30%; } 50% { height: 100%; } }
.np-queue-item-remove { opacity: 0; transition: opacity 0.14s, color 0.14s; }
.np-queue-item:hover .np-queue-item-remove { opacity: 1; }

/* Drag-to-reorder states */
.np-queue-item { cursor: grab; }
.np-queue-item:active { cursor: grabbing; }
.np-queue-item.dragging { opacity: 0.4; background: rgba(255,255,255,0.07) !important; }
.np-queue-item.drag-over { box-shadow: inset 0 2px 0 rgb(var(--accent-light-rgb)); }

/* Queue button in enhanced track table */
.col-queue {
    width: 36px;
    text-align: center;
}
.enhanced-queue-btn,
.enhanced-playnext-btn {
    background: none;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: rgba(var(--accent-rgb), 0.5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    margin: 0 2px;
}
.enhanced-queue-btn:hover,
.enhanced-playnext-btn:hover {
    background: rgba(var(--accent-rgb), 0.12);
    color: rgba(var(--accent-rgb), 0.9);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: scale(1.1);
}

/* ── Write Tags to File ── */

.enhanced-write-tag-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(29, 185, 84, 0.15);
    background: rgba(29, 185, 84, 0.04);
    color: rgba(29, 185, 84, 0.5);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.enhanced-write-tag-btn:hover {
    background: rgba(29, 185, 84, 0.12);
    color: rgba(29, 185, 84, 0.9);
    border-color: rgba(29, 185, 84, 0.4);
    transform: scale(1.1);
}

/* Per-track ReplayGain button — sits beside the pencil in col-writetag */
.enhanced-rg-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(147, 112, 219, 0.15);
    background: rgba(147, 112, 219, 0.04);
    color: rgba(147, 112, 219, 0.5);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.enhanced-rg-btn:hover {
    background: rgba(147, 112, 219, 0.12);
    color: rgba(147, 112, 219, 0.9);
    border-color: rgba(147, 112, 219, 0.4);
    transform: scale(1.1);
}
.enhanced-rg-btn:disabled {
    opacity: 0.4;
    cursor: wait;
    transform: none;
}

/* Album-level ReplayGain button in the album header action row */
.enhanced-rg-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(147, 112, 219, 0.06);
    border: 1px solid rgba(147, 112, 219, 0.15);
    color: rgba(147, 112, 219, 0.6);
    transition: all 0.15s ease;
}
.enhanced-rg-album-btn:hover {
    background: rgba(147, 112, 219, 0.12);
    color: rgba(147, 112, 219, 0.9);
    border-color: rgba(147, 112, 219, 0.35);
}
.enhanced-rg-album-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.enhanced-write-tags-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(29, 185, 84, 0.06);
    border: 1px solid rgba(29, 185, 84, 0.15);
    color: rgba(29, 185, 84, 0.6);
    transition: all 0.15s ease;
}
.enhanced-write-tags-album-btn:hover {
    background: rgba(29, 185, 84, 0.12);
    color: rgba(29, 185, 84, 0.9);
    border-color: rgba(29, 185, 84, 0.35);
}
.enhanced-reorganize-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(100, 149, 237, 0.06);
    border: 1px solid rgba(100, 149, 237, 0.15);
    color: rgba(100, 149, 237, 0.6);
    transition: all 0.15s ease;
}


.enhanced-reorganize-album-btn:hover {
    background: rgba(100, 149, 237, 0.12);
    color: rgba(100, 149, 237, 0.9);
    border-color: rgba(100, 149, 237, 0.35);
}
.enhanced-reorganize-album-btn.reorg-state-queued {
    background: rgba(var(--accent-rgb), 0.10);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: rgb(var(--accent-light-rgb));
}
.enhanced-reorganize-album-btn.reorg-state-queued::before {
    content: '⏳ ';
    margin-right: 2px;
}
.enhanced-reorganize-album-btn.reorg-state-running {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.55);
    color: #ffffff;
}
.enhanced-reorganize-album-btn.reorg-state-running::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: reorgPanelSpin 0.9s linear infinite;
    vertical-align: -1px;
}

/* Reassign — the album action row's pattern is identical geometry with a
   DISTINCT accent per action, so the buttons are scannable by colour. Teal:
   the two blues and two greens are taken by Reorganize, Redownload and Write
   Tags, and reusing Reorganize's blue put two same-coloured buttons next to
   each other. */
.enhanced-reassign-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(45, 212, 191, 0.06);
    border: 1px solid rgba(45, 212, 191, 0.15);
    color: rgba(45, 212, 191, 0.6);
    transition: all 0.15s ease;
}
.enhanced-reassign-album-btn:hover {
    background: rgba(45, 212, 191, 0.12);
    color: rgba(45, 212, 191, 0.9);
    border-color: rgba(45, 212, 191, 0.35);
}
.enhanced-redownload-album-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: rgba(34, 197, 94, 0.6);
    transition: all 0.15s ease;
}
.enhanced-redownload-album-btn:hover {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(34, 197, 94, 0.9);
    border-color: rgba(34, 197, 94, 0.35);
}
.enhanced-redownload-album-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Reorganize Modal ── */
.reorganize-modal {
    max-width: 900px;
    width: 95vw;
}
.reorganize-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.reorganize-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 6px;
}
.reorganize-template-section {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reorganize-template-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 8px;
}
.reorganize-template-hint code {
    background: rgba(255,255,255,0.06);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
}
.reorganize-template-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #e0e0e0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.reorganize-template-input:focus {
    border-color: rgba(100, 149, 237, 0.5);
}
/* `<select>` shares the .reorganize-template-input class but its dropdown
   options are rendered by the OS, so they don't inherit page colors —
   explicitly style options dark so they're visible against the OS's
   default white dropdown background.*/
select.reorganize-template-input,
.reorganize-template-input option {
    background: #1f1f1f;
    color: #e0e0e0;
}
.reorganize-template-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.reorganize-variables {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reorganize-var-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.reorganize-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 12px;
}
.reorganize-var-chip:hover {
    background: rgba(100, 149, 237, 0.1);
    border-color: rgba(100, 149, 237, 0.3);
}
.reorganize-var-chip code {
    color: rgba(100, 149, 237, 0.9);
    font-size: 12px;
    font-weight: 600;
}
.reorganize-var-desc {
    color: rgba(255,255,255,0.4);
    font-size: 11px;
}
.reorganize-preview-section {
    flex: 1;
}
.reorganize-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.reorganize-preview-header .reorganize-label {
    margin-bottom: 0;
}
.reorganize-preview-btn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: rgba(100, 149, 237, 0.1);
    border: 1px solid rgba(100, 149, 237, 0.25);
    color: rgba(100, 149, 237, 0.9);
    transition: all 0.15s;
}
.reorganize-preview-btn:hover {
    background: rgba(100, 149, 237, 0.2);
    border-color: rgba(100, 149, 237, 0.4);
}
.reorganize-preview-body {
    max-height: 350px;
    overflow-y: auto;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 10px;
}
.reorganize-preview-hint,
.reorganize-preview-loading {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    padding: 24px;
}
.reorganize-preview-error {
    text-align: center;
    color: rgba(255, 80, 80, 0.8);
    font-size: 12px;
    padding: 24px;
}
.reorganize-preview-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
}
.reorganize-stat {
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.reorganize-stat.changed {
    background: rgba(100, 149, 237, 0.12);
    color: rgba(100, 149, 237, 0.9);
}
.reorganize-stat.unchanged {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
}
.reorganize-stat.missing {
    background: rgba(255, 170, 50, 0.1);
    color: rgba(255, 170, 50, 0.8);
}
.reorganize-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.reorganize-preview-table th {
    text-align: left;
    padding: 6px 8px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.reorganize-preview-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    vertical-align: top;
}
.reorganize-path {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    word-break: break-all;
    max-width: 300px;
}
.reorganize-arrow {
    text-align: center;
    color: rgba(100, 149, 237, 0.7);
    font-weight: bold;
    white-space: nowrap;
}
.reorganize-row-changed .reorganize-path:last-child {
    color: rgba(100, 149, 237, 0.9);
}
.reorganize-row-unchanged td {
    color: rgba(255,255,255,0.25);
}
.reorganize-row-missing td {
    color: rgba(255, 170, 50, 0.5);
}
.reorganize-row-missing em {
    font-style: italic;
}
.reorganize-row-collision td {
    color: rgba(255, 60, 60, 0.8);
}
.reorganize-row-collision .reorganize-arrow {
    color: rgba(255, 60, 60, 0.9);
    font-weight: bold;
}
.reorganize-row-collision em {
    font-style: italic;
    color: rgba(255, 60, 60, 0.6);
}
.reorganize-stat.collision {
    background: rgba(255, 60, 60, 0.1);
    color: rgba(255, 60, 60, 0.9);
}

.enhanced-bulk-btn.tag-write {
    background: rgba(29, 185, 84, 0.08);
    border-color: rgba(29, 185, 84, 0.2);
    color: rgb(var(--accent-rgb));
}
.enhanced-bulk-btn.tag-write:hover {
    background: rgba(29, 185, 84, 0.15);
    border-color: rgba(29, 185, 84, 0.4);
}
.enhanced-bulk-btn.rg-analyze {
    background: rgba(147, 112, 219, 0.08);
    border-color: rgba(147, 112, 219, 0.2);
    color: rgba(147, 112, 219, 0.9);
}
.enhanced-bulk-btn.rg-analyze:hover {
    background: rgba(147, 112, 219, 0.15);
    border-color: rgba(147, 112, 219, 0.4);
}

.col-writetag {
    width: 60px;
    text-align: center;
}

/* Tag Preview Modal */
.tag-preview-modal {
    max-width: 700px;
    width: 90vw;
}

.tag-preview-loading {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.tag-preview-error {
    text-align: center;
    padding: 20px;
    color: rgba(255, 80, 80, 0.8);
    font-size: 14px;
}

.tag-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tag-preview-table th {
    text-align: left;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tag-preview-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
}

.tag-field-name {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    white-space: nowrap;
    width: 90px;
}

.tag-file-value {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-db-value {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-diff-indicator {
    width: 30px;
    text-align: center;
}

.tag-diff-arrow {
    color: rgb(var(--accent-rgb));
    font-size: 16px;
    font-weight: bold;
}

.tag-diff-check {
    color: rgba(255, 255, 255, 0.15);
    font-size: 14px;
}

tr.tag-diff-changed .tag-file-value {
    color: rgba(255, 80, 80, 0.6);
    text-decoration: line-through;
}

tr.tag-diff-changed .tag-db-value {
    color: rgb(var(--accent-rgb));
    font-weight: 500;
}

tr.tag-diff-same {
    opacity: 0.5;
}

.tag-empty {
    color: rgba(255, 255, 255, 0.15);
    font-style: italic;
}

.tag-preview-no-changes {
    text-align: center;
    padding: 16px;
    color: rgba(29, 185, 84, 0.6);
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 8px;
}

.tag-preview-cover-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    cursor: pointer;
}

.tag-preview-cover-label input[type="checkbox"] {
    accent-color: rgb(var(--accent-rgb));
}

.tag-preview-footer-actions {
    display: flex;
    gap: 8px;
}

.tag-preview-modal .enhanced-bulk-modal-footer {
    justify-content: space-between;
}

/* Batch Tag Preview Modal */
.batch-tag-preview-modal {
    width: 850px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.batch-tag-preview-modal .enhanced-bulk-modal-footer {
    justify-content: space-between;
}

.batch-tag-preview-body {
    overflow-y: auto;
    max-height: 55vh;
    padding: 8px 16px 16px !important;
}

.batch-tag-summary {
    display: flex;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.batch-tag-stat {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
}

.batch-tag-stat.changed {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
}

.batch-tag-stat.unchanged {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
}

.batch-tag-stat.errored {
    background: rgba(255, 80, 80, 0.1);
    color: rgba(255, 80, 80, 0.7);
}

.batch-tag-track {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 6px;
}

.batch-tag-track.error {
    border-color: rgba(255, 80, 80, 0.15);
}

.batch-tag-track-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.batch-tag-track-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.batch-tag-track-number {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: 500;
    min-width: 20px;
    text-align: right;
}

.batch-tag-track-title {
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batch-tag-track-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 8px;
}

.batch-tag-track-status.changed {
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-rgb));
}

.batch-tag-track-status.error {
    background: rgba(255, 80, 80, 0.1);
    color: rgba(255, 80, 80, 0.7);
}

.batch-tag-track-status.ok {
    color: rgba(255, 255, 255, 0.3);
}

.batch-tag-chevron {
    color: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    transition: transform 0.2s ease;
}

.batch-tag-track.expanded .batch-tag-chevron {
    transform: rotate(180deg);
}

.batch-tag-track-diff {
    display: none;
    padding: 0 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.batch-tag-track.expanded .batch-tag-track-diff {
    display: block;
}

.batch-tag-track-diff .tag-preview-table {
    font-size: 12px;
}

.batch-tag-track-diff .tag-preview-table th {
    font-size: 10px;
    padding: 6px 8px;
}

.batch-tag-track-diff .tag-preview-table td {
    padding: 5px 8px;
}

/* Unchanged tracks group */
.batch-tag-unchanged-group {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.batch-tag-unchanged-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    transition: background 0.15s ease;
}

.batch-tag-unchanged-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.batch-tag-unchanged-list {
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.batch-tag-unchanged-group.expanded .batch-tag-unchanged-list {
    display: block;
}

.batch-tag-unchanged-group.expanded .batch-tag-chevron {
    transform: rotate(180deg);
}

.batch-tag-track-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.batch-tag-track-row:last-child {
    border-bottom: none;
}

.batch-tag-track-row.unchanged {
    opacity: 0.5;
}

/* ======================================================= */
/* == HELP & DOCS PAGE                                   == */
/* ======================================================= */

.docs-layout {
    display: flex;
    height: 100%;
    gap: 0;
    overflow: hidden;
}

/* Sidebar */
.docs-sidebar {
    width: 280px;
    min-width: 280px;
    height: 100%;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
}

.docs-sidebar-header {
    padding: 24px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(12px);
    z-index: 10;
}

.docs-sidebar-header h3 {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px 0;
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.docs-search {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 13px;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.docs-search:focus {
    border-color: rgba(var(--accent-rgb), 0.5);
}

.docs-search::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.docs-nav {
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
}

.docs-nav-section {
    margin-bottom: 4px;
}

.docs-nav-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    border-left: 3px solid transparent;
}

.docs-nav-section-title:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.docs-nav-section-title.active {
    color: rgb(var(--accent-light-rgb));
    border-left-color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.06);
}

.docs-nav-section-title .docs-nav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.7;
    flex-shrink: 0;
}

.docs-nav-section-title.active .docs-nav-icon {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.4));
}

.docs-nav-section-title .docs-nav-arrow {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.4;
    transition: transform 0.2s ease;
}

.docs-nav-section-title.expanded .docs-nav-arrow {
    transform: rotate(90deg);
}

.docs-nav-children {
    display: none;
    padding: 2px 0;
}

.docs-nav-children.expanded {
    display: block;
}

.docs-nav-child {
    padding: 7px 20px 7px 53px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.docs-nav-child:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
}

.docs-nav-child.active {
    color: rgb(var(--accent-light-rgb));
    border-left-color: rgba(var(--accent-rgb), 0.5);
}

/* Main content */
.docs-content {
    flex: 1;
    position: relative;
    overflow-y: auto;
    padding: 40px 48px;
    scroll-behavior: smooth;
}

.docs-section {
    margin-bottom: 56px;
    animation: docsFadeIn 0.3s ease;
}

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

.docs-section-title {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.docs-section-title > span {
    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.docs-section-title .docs-section-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(var(--accent-rgb), 0.3));
}

.docs-subsection {
    margin: 32px 0;
}

.docs-subsection-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 12px 0;
    padding-left: 14px;
    border-left: 3px solid rgb(var(--accent-rgb));
}

.docs-text {
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 16px 0;
}

.docs-text strong {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}

/* Feature cards */
.docs-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.docs-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.docs-feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--accent-rgb), 0.15);
    transform: translateY(-2px);
}

.docs-feature-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.docs-feature-card p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Step lists */
.docs-steps {
    counter-reset: docs-step;
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.docs-steps li {
    counter-increment: docs-step;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    /* Long paths/URLs must break so the flex item can shrink instead of clipping */
    min-width: 0;
    overflow-wrap: anywhere;
}

.docs-steps li::before {
    content: counter(docs-step);
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Info/tip callouts */
.docs-callout {
    padding: 16px 20px;
    border-radius: 10px;
    margin: 16px 0;
    font-size: 13.5px;
    line-height: 1.6;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
}

/* Callout body must be able to shrink and wrap long paths/URLs */
.docs-callout > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.docs-callout-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.docs-callout.tip {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.docs-callout.warning {
    background: rgba(255, 180, 0, 0.08);
    border: 1px solid rgba(255, 180, 0, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.docs-callout.info {
    background: rgba(80, 160, 255, 0.08);
    border: 1px solid rgba(80, 160, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

/* Data tables */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13.5px;
}

.docs-table th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.docs-table td {
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: top;
    line-height: 1.5;
}

.docs-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Long inline tokens (URLs, docker paths) in prose must wrap, not clip */
.docs-content p,
.docs-content li,
.docs-content strong,
.docs-content a,
.docs-table th,
.docs-table td {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    /* Keep data tables inside the viewport by wrapping cell text */
    .docs-table {
        table-layout: fixed;
    }
}

/* Keyboard shortcut badges */
.docs-kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    white-space: nowrap;
}

/* Screenshots */
.docs-screenshot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
    cursor: pointer;
}

.docs-screenshot-wrapper:hover .docs-screenshot {
    border-color: rgba(var(--accent-light-rgb), 0.3);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-light-rgb), 0.08);
    transform: translateY(-2px);
}

.docs-screenshot-wrapper:hover .docs-screenshot-label {
    color: rgba(255, 255, 255, 0.6);
}

.docs-screenshot {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.25s ease;
    opacity: 0;
    animation: docImgFadeIn 0.4s ease forwards;
}

.docs-screenshot-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 8px;
    letter-spacing: 0.3px;
    transition: color 0.25s ease;
}

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

/* Lightbox overlay for full-size image viewing */
.docs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: zoom-out;
}

.docs-lightbox.active {
    opacity: 1;
}

.docs-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.docs-lightbox.active img {
    transform: scale(1);
}

.docs-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.docs-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Bullet lists */
.docs-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.docs-list li {
    padding: 6px 0 6px 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

.docs-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    opacity: 0.6;
}

/* Back to top */
.docs-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgb(var(--accent-light-rgb));
    font-size: 18px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 50;
    backdrop-filter: blur(8px);
}

.docs-back-to-top:hover {
    background: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-2px);
}

.docs-back-to-top.visible {
    display: flex;
}

/* Workflow cards */
.docs-workflow-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.docs-workflow-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.docs-workflow-card:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateY(-2px);
}

.docs-workflow-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.docs-workflow-card-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.docs-workflow-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

.docs-workflow-card-badge {
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.docs-workflow-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.docs-workflow-card-link {
    font-size: 12.5px;
    color: rgb(var(--accent-light-rgb));
    font-weight: 500;
    align-self: flex-start;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.docs-workflow-card:hover .docs-workflow-card-link {
    opacity: 1;
}

/* Debug info button */
.docs-debug-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.08);
    color: rgb(var(--accent-light-rgb));
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.docs-debug-button:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.docs-debug-button.copied {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgb(var(--accent-rgb));
}

.docs-debug-wrap {
    margin-top: 12px;
}

.docs-debug-wrap .docs-debug-button {
    margin-top: 0;
}

.docs-debug-options {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.docs-debug-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.docs-debug-row label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.docs-debug-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    padding: 5px 8px;
    font-family: 'SF Pro Text', -apple-system, sans-serif;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 22px;
}

.docs-debug-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.docs-debug-select:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.4);
}

.docs-debug-select option {
    background: #1a1a2e;
    color: rgba(255, 255, 255, 0.8);
}

/* Toast help link */
/* Legacy toast-help-link — kept for backward compat, now handled by toast-compact-link */
.toast-help-link {
    display: inline-block;
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
    transition: color 0.15s;
}

.toast-help-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* API code examples */
.docs-code-block {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
}

.docs-code-block .code-key {
    color: rgb(var(--accent-light-rgb));
}

.docs-code-block .code-string {
    color: rgba(152, 195, 121, 0.9);
}

.docs-code-block .code-number {
    color: rgba(209, 154, 102, 0.9);
}

.docs-code-block .code-comment {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.docs-code-label {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 4px;
}

/* ── API Tester ── */

.api-key-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.api-key-bar label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.api-key-bar input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
}

.api-key-bar input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.api-key-bar .api-key-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

.api-key-bar .api-key-status.connected {
    color: rgba(var(--accent-rgb), 0.8);
}

.api-endpoint-group {
    margin-bottom: 28px;
}

.api-endpoint-group-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.api-endpoint {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.api-endpoint:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.api-endpoint.expanded {
    border-color: rgba(var(--accent-rgb), 0.25);
}

.api-endpoint-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.api-endpoint-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.api-method {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
}

.api-method.get { background: rgba(72, 199, 142, 0.15); color: #48c78e; }
.api-method.post { background: rgba(62, 142, 208, 0.15); color: #3e8ed0; }
.api-method.put { background: rgba(255, 183, 77, 0.15); color: #ffb74d; }
.api-method.patch { background: rgba(171, 130, 255, 0.15); color: #ab82ff; }
.api-method.delete { background: rgba(241, 70, 104, 0.15); color: #f14668; }

.api-endpoint-path {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.api-endpoint-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.api-endpoint-arrow {
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.api-endpoint.expanded .api-endpoint-arrow {
    transform: rotate(90deg);
}

.api-endpoint-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.api-endpoint.expanded .api-endpoint-body {
    display: block;
}

.api-endpoint-detail {
    margin-bottom: 14px;
}

.api-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 6px;
}

.api-params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.api-params-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.api-params-table td {
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: top;
}

.api-params-table td:first-child {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11.5px;
    color: rgb(var(--accent-light-rgb));
    white-space: nowrap;
}

.api-params-table td:nth-child(2) {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.api-param-required {
    color: #f14668 !important;
    font-size: 10px;
    font-weight: 600;
}

.api-param-optional {
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 10px;
}

.api-try-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}

.api-try-params {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.api-try-param {
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-try-param label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.api-try-param input,
.api-try-param select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 5px 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11.5px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    min-width: 80px;
}

.api-try-body {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11.5px;
    resize: vertical;
    min-height: 60px;
}

.api-try-btn {
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
    color: rgb(var(--accent-light-rgb));
    font-size: 11.5px;
    font-weight: 600;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.api-try-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: rgba(var(--accent-rgb), 0.5);
}

.api-try-btn:active {
    transform: scale(0.97);
}

.api-try-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.api-response-panel {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.api-response-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 11px;
    font-weight: 600;
}

.api-response-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.api-response-status.s2xx { background: rgba(72, 199, 142, 0.15); color: #48c78e; }
.api-response-status.s4xx { background: rgba(255, 183, 77, 0.15); color: #ffb74d; }
.api-response-status.s5xx { background: rgba(241, 70, 104, 0.15); color: #f14668; }

.api-response-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.api-response-body {
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

.api-response-body .json-key { color: rgb(var(--accent-light-rgb)); }
.api-response-body .json-string { color: rgba(152, 195, 121, 0.9); }
.api-response-body .json-number { color: rgba(209, 154, 102, 0.9); }
.api-response-body .json-bool { color: rgba(86, 182, 194, 0.9); }
.api-response-body .json-null { color: rgba(255, 255, 255, 0.3); }

.api-example-json {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre;
    overflow-x: auto;
    margin: 6px 0 10px;
}

.api-base-url {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 5px;
    margin-left: 8px;
}

.api-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    padding: 8px 12px;
    background: rgba(var(--accent-rgb), 0.05);
    border-left: 3px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 0 6px 6px 0;
    margin: 8px 0;
}

/* Screenshot responsive adjustments */
@media (max-width: 600px) {
    .docs-screenshot {
        max-width: 100%;
        border-radius: 8px;
    }
    .docs-lightbox img {
        max-width: 98vw;
        border-radius: 6px;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .docs-layout {
        flex-direction: column;
    }

    .docs-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .docs-content {
        padding: 24px 20px;
    }

    .docs-features {
        grid-template-columns: 1fr;
    }

    .docs-section-title {
        font-size: 22px;
    }

    /* Step rows carry rich inline content (code, badges); let it wrap
       instead of forcing the flex row wider than the viewport */
    .docs-steps li {
        flex-wrap: wrap;
    }

    /* API param tables pin their first two columns nowrap — release that
       on small screens and let the fixed layout keep them in-bounds */
    .api-params-table {
        table-layout: fixed;
    }
    .api-params-table td:first-child,
    .api-params-table td:nth-child(2),
    .api-params-table th,
    .api-params-table td {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* API tester: key bar + endpoint headers are nowrap flex rows with a
       non-shrinking path — let them wrap and shrink on small screens */
    .api-key-bar {
        flex-wrap: wrap;
    }
    .api-endpoint-header {
        flex-wrap: wrap;
    }
    .api-endpoint-path {
        flex-shrink: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .api-endpoint-desc {
        max-width: 100%;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .docs-content {
        padding: 16px 14px;
    }

    .docs-subsection-title {
        font-size: 17px;
    }
}

/* ===== Enhanced Library — Read-only Meta Values ===== */

.enhanced-album-meta-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 28px;
    display: flex;
    align-items: center;
}

/* ===== Enhanced Library — Report Issue Button ===== */

.enhanced-report-issue-btn {
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: rgba(255, 165, 0, 0.9);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.enhanced-report-issue-btn:hover {
    background: rgba(255, 165, 0, 0.25);
    border-color: rgba(255, 165, 0, 0.5);
    color: #ffa500;
}

.enhanced-track-report-btn {
    background: none;
    border: 1px solid rgba(255, 165, 0, 0.25);
    color: rgba(255, 165, 0, 0.7);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.enhanced-track-report-btn:hover {
    background: rgba(255, 165, 0, 0.15);
    border-color: rgba(255, 165, 0, 0.5);
    color: #ffa500;
}

/* Nav Badge */

.issues-nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ffa500;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 8px;
    padding: 0 4px;
}

/* ============================================ */
/* == METADATA CACHE BROWSER                 == */
/* ============================================ */

.mcache-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mcache-fadeIn 0.2s ease;
}

@keyframes mcache-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mcache-modal {
    width: 95vw;
    max-width: 1400px;
    height: 95vh;
    max-height: 95vh;
    background: rgba(14, 14, 14, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.mcache-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.mcache-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.mcache-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mcache-btn-clear {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcache-btn-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.35);
}

.mcache-clear-dropdown {
    position: relative;
    display: inline-block;
}

.mcache-clear-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
    min-width: 180px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.mcache-clear-dropdown-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    white-space: nowrap;
}

.mcache-clear-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.mcache-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.2s;
}

.mcache-modal-close:hover {
    color: #fff;
}

/* Stats Bar */
.mcache-stats-bar {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mcache-stat-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 100px;
}

.mcache-stat-pill-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
}

.mcache-stat-pill-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent, #6d5dfc);
}

/* Tabs */
.mcache-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.mcache-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mcache-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.mcache-tab.active {
    color: rgb(var(--accent-light-rgb));
    border-bottom-color: rgb(var(--accent-light-rgb));
}

/* Filters */
.mcache-filters {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.mcache-search-input {
    flex: 1;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 9px 14px;
    color: #fff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.mcache-search-input:focus {
    border-color: rgba(var(--accent-rgb, 109, 93, 252), 0.4);
}

.mcache-search-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.mcache-source-filter,
.mcache-sort-filter {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 9px 12px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    outline: none;
}

.mcache-source-filter option,
.mcache-sort-filter option {
    background: #1a1a1a;
    color: #fff;
}

/* Grid */
.mcache-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    align-content: start;
}

.mcache-grid::-webkit-scrollbar {
    width: 6px;
}

.mcache-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

/* Cards */
.mcache-card {
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mcache-card:hover {
    border-color: rgba(var(--accent-rgb, 109, 93, 252), 0.25);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.mcache-card-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mcache-card-image {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.mcache-card-image.artist {
    border-radius: 50%;
}

.mcache-card-image-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 109, 93, 252), 0.2), rgba(var(--accent-rgb, 109, 93, 252), 0.05));
}

.mcache-card-image-placeholder.artist {
    border-radius: 50%;
}

.mcache-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mcache-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcache-card-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcache-card-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.mcache-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mcache-source-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 8px;
}

.mcache-source-badge.spotify {
    background: rgba(30, 215, 96, 0.15);
    color: #1ed760;
}

.mcache-source-badge.itunes {
    background: rgba(252, 60, 68, 0.15);
    color: #fc3c44;
}

.mcache-source-badge.deezer {
    background: rgba(160, 55, 255, 0.15);
    color: #a037ff;
}

.mcache-source-badge.beatport {
    background: rgba(0, 210, 120, 0.15);
    color: #00d278;
}

.mcache-source-badge.musicbrainz {
    background: rgba(186, 71, 143, 0.15);
    color: #BA478F;
}

.mcache-source-badge.discogs {
    background: rgba(212, 165, 116, 0.15);
    color: #D4A574;
}

.mcache-card.mb-matched {
    border-left: 2px solid rgba(76, 175, 80, 0.5);
}

.mcache-card.mb-failed {
    border-left: 2px solid rgba(255, 152, 0, 0.5);
    cursor: default;
}

.mcache-card-cache-info {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
}

/* Type badges */
.mcache-type-badge {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
}

/* Empty state */
.mcache-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.mcache-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.mcache-empty-title {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent, #6d5dfc), rgba(var(--accent-rgb, 109, 93, 252), 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.mcache-empty-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 340px;
}

/* Pagination */
.mcache-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.mcache-page-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px;
    text-align: center;
}

.mcache-page-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mcache-page-btn.active {
    background: rgba(var(--accent-rgb, 109, 93, 252), 0.2);
    border-color: rgba(var(--accent-rgb, 109, 93, 252), 0.3);
    color: var(--accent, #6d5dfc);
}

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

/* Detail Modal */
.mcache-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: mcache-fadeIn 0.15s ease;
}

.mcache-detail-modal {
    width: 90vw;
    max-width: 700px;
    max-height: 85vh;
    background: rgba(18, 18, 18, 0.99);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.mcache-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.mcache-detail-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcache-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.mcache-detail-body::-webkit-scrollbar {
    width: 6px;
}

.mcache-detail-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.mcache-detail-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.mcache-detail-image {
    width: 160px;
    height: 160px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.mcache-detail-image.artist {
    border-radius: 50%;
}

.mcache-detail-image-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 109, 93, 252), 0.25), rgba(var(--accent-rgb, 109, 93, 252), 0.05));
}

.mcache-detail-image-placeholder.artist {
    border-radius: 50%;
}

.mcache-detail-hero-info {
    flex: 1;
    min-width: 0;
}

.mcache-detail-hero-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    word-wrap: break-word;
}

.mcache-detail-hero-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.mcache-detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.mcache-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.mcache-detail-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mcache-detail-table td {
    padding: 8px 0;
    font-size: 12px;
    vertical-align: top;
}

.mcache-detail-table td:first-child {
    color: rgba(255, 255, 255, 0.4);
    width: 130px;
    font-weight: 500;
    padding-right: 12px;
}

.mcache-detail-table td:last-child {
    color: rgba(255, 255, 255, 0.8);
    word-break: break-word;
}

.mcache-detail-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mcache-raw-json-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    padding: 8px 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.mcache-raw-json-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.mcache-raw-json {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .mcache-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .mcache-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .mcache-detail-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mcache-detail-image,
    .mcache-detail-image-placeholder {
        width: 120px;
        height: 120px;
    }

    .mcache-filters {
        flex-direction: column;
    }
}

/* ================================================================
   LIBRARY MAINTENANCE MODAL
   ================================================================ */

/* Findings badge on header button */
.repair-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    z-index: 10;
}

/* Modal overlay */
.repair-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.repair-modal {
    background: rgba(14, 14, 14, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 94vw;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.repair-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(var(--accent-rgb, 99, 102, 241), 0.04) 100%);
}

.repair-modal-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.repair-modal-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.repair-modal-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.repair-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.repair-modal-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    line-height: 1.3;
}

.repair-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.repair-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.repair-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Master toggle */
.repair-master-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.repair-toggle-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.repair-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: background 0.2s ease;
    display: inline-block;
}

.repair-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.repair-master-toggle input {
    display: none;
}

.repair-master-toggle input:checked + .repair-toggle-slider {
    background: var(--accent-color, #6366f1);
}

.repair-master-toggle input:checked + .repair-toggle-slider::after {
    transform: translateX(20px);
}

/* Job toggle sizing moved to .repair-job-toggle block in Jobs Tab section */

/* Tabs */
.repair-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.repair-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.repair-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.repair-tab.active {
    color: rgb(var(--accent-light-rgb));
    border-bottom-color: rgb(var(--accent-light-rgb));
}

.repair-tab-badge {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Tab content */
.repair-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.repair-loading, .repair-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    padding: 48px 20px;
    font-size: 14px;
}

/* Gradient empty state — matches automations-empty */
.repair-empty-state {
    text-align: center;
    padding: 80px 24px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb, 99, 102, 241), 0.03) 0%, transparent 60%);
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}
.repair-empty-icon { font-size: 56px; margin-bottom: 20px; filter: grayscale(0.3); }
.repair-empty-title {
    font-size: 22px; font-weight: 700; margin-bottom: 10px;
    background: linear-gradient(135deg, #fff 0%, rgb(var(--accent-light-rgb, 129, 140, 248)) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.repair-empty-text {
    font-size: 14px; color: rgba(255, 255, 255, 0.4); margin-bottom: 0;
    max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.6;
}

/* ── Jobs Tab ── */
.repair-jobs-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (max-width: 900px) { .repair-jobs-list { grid-template-columns: 1fr; } }

.repair-job-card {
    background: linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(16, 16, 16, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.repair-job-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.repair-job-card:hover {
    background: linear-gradient(135deg, rgba(28, 28, 28, 0.98), rgba(20, 20, 20, 0.99));
    border-color: rgba(var(--accent-rgb), 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.repair-job-card:hover::before { opacity: 1; }

.repair-job-card.running {
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.1);
}

.repair-job-card.running::before {
    opacity: 1;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    animation: scanPulse 2s ease-in-out infinite;
}

.repair-job-card.disabled {
    opacity: 0.5;
}
.repair-job-card.disabled:hover {
    opacity: 0.7;
    transform: none;
}

.repair-job-main {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
}

/* Status dot */
.repair-job-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.repair-job-status.enabled {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.repair-job-status.disabled {
    background: #444;
}
.repair-job-status.running {
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: repair-status-pulse 1.5s ease-in-out infinite;
}
@keyframes repair-status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5); }
    50% { opacity: 0.4; box-shadow: 0 0 3px rgba(var(--accent-rgb), 0.2); }
}

.repair-job-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.repair-job-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.2px;
}

.repair-job-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Flow visualization — job type badges */
.repair-job-flow {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.repair-flow-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.repair-flow-badge.scan {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
}
.repair-flow-badge.autofix {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}
.repair-flow-badge.dryrun {
    background: rgba(250, 204, 21, 0.10);
    color: #fbbf24;
}
.repair-flow-badge.findings {
    background: rgba(239, 68, 68, 0.10);
    color: #f87171;
}
/* Historical "found in last scan" — present but already resolved /
   dismissed. Muted so it doesn't read as urgent action like the
   current-pending badge. */
.repair-flow-badge.findings-historical {
    background: rgba(148, 163, 184, 0.10);
    color: #94a3b8;
}
.repair-flow-arrow {
    color: rgba(255, 255, 255, 0.25);
    font-size: 12px;
}

.repair-job-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1.3;
}

.repair-job-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Toggle — matches automation-toggle (32x18) */
.repair-job-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.repair-job-toggle input { display: none; }
.repair-job-toggle .repair-toggle-slider.small {
    width: 32px;
    height: 18px;
    border-radius: 9px;
}
.repair-job-toggle .repair-toggle-slider.small::after {
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
}
.repair-job-toggle input:checked + .repair-toggle-slider.small {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.5);
}
.repair-job-toggle input:checked + .repair-toggle-slider.small::after {
    transform: translateX(14px);
    background: rgb(var(--accent-light-rgb, 129, 140, 248));
}

/* Action buttons — compact 26x26 */
.repair-run-btn, .repair-settings-btn, .repair-stop-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.2s ease;
}
/* Stop button (shown while a job is running) — reads as the destructive action */
.repair-stop-btn {
    border-color: rgba(239, 68, 68, 0.35);
    color: rgba(248, 113, 113, 0.85);
}
.repair-stop-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(248, 113, 113);
    border-color: rgba(239, 68, 68, 0.5);
}
/* #970: stop clicked but the run hasn't unwound yet (waiting on its current item) */
.repair-stop-btn.stopping {
    cursor: default;
    opacity: 0.6;
    animation: repair-stop-pulse 1s ease-in-out infinite;
}
.repair-stop-btn.stopping:hover {
    background: transparent;
    color: rgba(248, 113, 113, 0.85);
    border-color: rgba(239, 68, 68, 0.35);
}
@keyframes repair-stop-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.7; }
}

.repair-run-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}
.repair-settings-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* Job settings panel */
.repair-job-settings {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(0, 0, 0, 0.2);
}

/* The settings panel lives inside a job tile, and `.repair-tile` is
   `overflow: hidden` (for its rounded corners and glow edge). So anything
   wider than the tile is CLIPPED, not scrolled — the field just vanishes off
   the right and cannot be filled in.

   The row has to be able to shrink to whatever the tile gives it. Two things
   stop that by default and both are handled below: a form control's
   `min-width: auto` resolves to its INTRINSIC width (~170px for a number
   input, regardless of any `width` we set), and a long label like
   "Fingerprint Threshold" will not break. Together they put the row's minimum
   at roughly the tile's inner width, so it clipped on some setups and not
   others depending on scrollbars, zoom and column count. */
.repair-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Last resort: drop the input onto its own line rather than clip it. */
    flex-wrap: wrap;
    padding: 7px 0;
    gap: 6px 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.repair-setting-row:last-child {
    border-bottom: none;
}

.repair-setting-row label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    /* Let the label give way before the input does — it is the part that can
       afford to wrap. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Section header inside a repair job settings panel — used to group related
   toggles (e.g. "Release Types" above include_albums/eps/singles). Rendered
   from `_section_*` sentinel keys in a job's default_settings. */
.repair-setting-section {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    padding: 12px 0 4px;
    margin-top: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.repair-setting-section:first-child {
    margin-top: 0;
    padding-top: 4px;
}

.repair-setting-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    width: 100px;
    /* `min-width: 0` is the one that matters. Without it a form control's
       min-width is `auto` = its intrinsic size, so it ignores the 100px above
       and refuses to shrink — which is what pushed the row past the tile. */
    min-width: 0;
    max-width: 100%;
    flex: 0 1 100px;
    box-sizing: border-box;
    text-align: right;
}

.repair-setting-input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent-color, #6366f1);
}

/* Native <option> popups don't inherit the translucent select background, so
   they rendered as white-on-white. Give the options a solid dark background. */
.repair-setting-input option {
    background: #1e1e24;
    color: #fff;
}

.repair-save-settings-btn {
    margin-top: 10px;
    /* Same story: the button must not be the thing that widens the panel. */
    max-width: 100%;
    background: var(--accent-color, #6366f1);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.repair-save-settings-btn:hover {
    opacity: 0.85;
}

/* ── Findings Dashboard ── */
.repair-findings-dashboard {
    margin-bottom: 16px;
}

.repair-dashboard-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.repair-dashboard-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.repair-dashboard-stat .stat-count {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.repair-dashboard-stat.pending .stat-count {
    color: #f59e0b;
}

.repair-dashboard-stat.resolved .stat-count {
    color: #22c55e;
}

.repair-dashboard-stat.dismissed .stat-count {
    color: rgba(255, 255, 255, 0.35);
}

.repair-dashboard-stat.auto-fixed .stat-count {
    color: #3b82f6;
}

.repair-dashboard-jobs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.repair-dashboard-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.repair-dashboard-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

.repair-dashboard-chip.active {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.repair-dashboard-chip-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.repair-dashboard-chip-count {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    min-width: 20px;
    text-align: center;
}

.repair-dashboard-chip-bar {
    display: flex;
    gap: 3px;
    align-items: center;
}

.repair-dashboard-chip-severity {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.repair-dashboard-chip-severity.warning {
    background: #f59e0b;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

.repair-dashboard-chip-severity.info {
    background: #3b82f6;
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
}

/* ── Cache Health Bar (Repair Dashboard) ── */
.repair-cache-health { margin-top: 12px; }
.repair-cache-health-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}
.repair-cache-health-bar:hover { background: rgba(255,255,255,0.05); border-color: rgba(var(--accent-rgb), 0.15); }
.repair-cache-health-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.repair-cache-health-dot.healthy { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.4); }
.repair-cache-health-dot.fair { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.repair-cache-health-dot.poor { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.repair-cache-health-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); }
.repair-cache-health-summary { flex: 1; font-size: 12px; color: rgba(255,255,255,0.3); }
.repair-cache-health-action { font-size: 12px; color: rgb(var(--accent-rgb)); white-space: nowrap; }

/* ── Cache Health Modal ── */
.cache-health-modal {
    width: 680px; max-width: 95vw; max-height: 85vh;
    background: linear-gradient(135deg, rgba(20,20,20,0.97) 0%, rgba(12,12,12,0.99) 100%);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.4),
                0 0 40px rgba(var(--accent-rgb), 0.08), inset 0 1px 0 rgba(255,255,255,0.1);
    display: flex; flex-direction: column; overflow: hidden;
}
.cache-health-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}
.cache-health-header-content { display: flex; align-items: center; gap: 14px; }
.cache-health-header-icon { font-size: 28px; opacity: 0.9; }
.cache-health-title {
    font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.3px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cache-health-subtitle { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.cache-health-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.cache-health-footer {
    display: flex; justify-content: flex-end; padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2);
}
.cache-health-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 48px; gap: 12px; color: rgba(255,255,255,0.5); font-size: 14px;
}

/* Status banner */
.cache-health-status {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: 12px; margin-bottom: 20px;
}
.cache-health-status.healthy { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); }
.cache-health-status.fair { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); }
.cache-health-status.poor { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); }
.cache-health-status-icon { font-size: 20px; }
.cache-health-status.healthy .cache-health-status-icon { color: #22c55e; }
.cache-health-status.fair .cache-health-status-icon { color: #f59e0b; }
.cache-health-status.poor .cache-health-status-icon { color: #ef4444; }
.cache-health-status-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }

/* Stat cards */
.cache-health-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.cache-health-card {
    text-align: center; padding: 14px 8px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.2s;
}
.cache-health-card:hover { border-color: rgba(255,255,255,0.1); }
.cache-health-card-value { font-size: 22px; font-weight: 700; color: #fff; }
.cache-health-card-value.warn { color: rgba(255,180,80,0.9); }
.cache-health-card-label { font-size: 10px; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Sections */
.cache-health-section { margin-bottom: 16px; }
.cache-health-section-title {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.35);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}

/* Source bars */
.cache-health-source-bars { display: flex; flex-direction: column; gap: 8px; }
.cache-health-source-row { display: flex; align-items: center; gap: 10px; }
.cache-health-source-name { font-size: 13px; color: rgba(255,255,255,0.6); width: 60px; text-transform: capitalize; }
.cache-health-source-track {
    flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden;
}
.cache-health-source-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.cache-health-source-count { font-size: 12px; color: rgba(255,255,255,0.4); width: 50px; text-align: right; }

/* Type pills */
.cache-health-type-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cache-health-pill {
    padding: 6px 14px; border-radius: 20px; font-size: 13px; color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    text-transform: capitalize;
}
.cache-health-pill strong { color: #fff; margin-left: 4px; }

/* Metrics grid */
.cache-health-metrics { display: flex; flex-direction: column; gap: 6px; }
.cache-health-metric {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cache-health-metric:last-child { border-bottom: none; }
.cache-health-metric-label { font-size: 13px; color: rgba(255,255,255,0.4); }
.cache-health-metric-value { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }

/* Clickable card + action link */
.cache-health-card.clickable { cursor: pointer; transition: border-color 0.2s, transform 0.15s; }
.cache-health-card.clickable:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
.cache-health-card-action { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 4px; letter-spacing: 0.3px; }
.cache-health-card.clickable:hover .cache-health-card-action { color: rgba(255,255,255,0.6); }

/* ── Failed MB Lookups Modal ── */
.failed-mb-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%); border-radius: 16px;
    width: 720px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
.failed-mb-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 28px 16px;
    background: linear-gradient(180deg, rgba(186,71,143,0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 16px 16px 0 0;
}
.failed-mb-title { font-size: 17px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.2px; }
.failed-mb-subtitle { font-size: 12px; color: rgba(255,255,255,0.35); margin: 4px 0 0; }
.failed-mb-toolbar { padding: 14px 28px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.failed-mb-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.failed-mb-tab {
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.45); cursor: pointer; transition: all 0.2s;
}
.failed-mb-tab:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.1); }
.failed-mb-tab.active { background: rgba(186,71,143,0.15); border-color: rgba(186,71,143,0.35); color: #d584b8; }
.failed-mb-search-row { display: flex; gap: 10px; align-items: center; }
.failed-mb-search-input {
    flex: 1; padding: 8px 14px; border-radius: 10px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    color: #fff; outline: none; transition: border-color 0.2s;
}
.failed-mb-search-input::placeholder { color: rgba(255,255,255,0.2); }
.failed-mb-search-input:focus { border-color: rgba(186,71,143,0.4); background: rgba(255,255,255,0.06); }
.failed-mb-btn {
    padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600;
    border: none; cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.failed-mb-btn-primary { background: rgba(186,71,143,0.15); color: #d584b8; border: 1px solid rgba(186,71,143,0.25); }
.failed-mb-btn-primary:hover { background: rgba(186,71,143,0.25); color: #e8a3d0; }
.failed-mb-btn-danger { background: rgba(239,68,68,0.08); color: rgba(248,113,113,0.8); border: 1px solid rgba(239,68,68,0.15); }
.failed-mb-btn-danger:hover { background: rgba(239,68,68,0.15); color: #f87171; }
.failed-mb-btn-sm {
    padding: 5px 12px; border-radius: 7px; font-size: 11px; font-weight: 600;
    border: none; cursor: pointer; transition: all 0.2s;
}
.failed-mb-btn-sm.failed-mb-btn-primary { background: rgba(186,71,143,0.12); color: #d584b8; border: 1px solid rgba(186,71,143,0.2); }
.failed-mb-btn-sm.failed-mb-btn-primary:hover { background: rgba(186,71,143,0.25); color: #e8a3d0; transform: translateY(-1px); }
.failed-mb-btn-sm.failed-mb-btn-ghost { background: transparent; color: rgba(255,255,255,0.25); }
.failed-mb-btn-sm.failed-mb-btn-ghost:hover { color: rgba(248,113,113,0.8); }
.failed-mb-body {
    flex: 1; overflow-y: auto; padding: 4px 28px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.failed-mb-empty { text-align: center; padding: 48px 0; color: rgba(255,255,255,0.25); font-size: 14px; }
.failed-mb-item {
    display: flex; align-items: center; gap: 14px; padding: 11px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.03); transition: opacity 0.2s, background 0.15s;
    border-radius: 8px; margin: 0 -8px;
}
.failed-mb-item:hover { background: rgba(255,255,255,0.02); }
.failed-mb-item:last-child { border-bottom: none; }
.failed-mb-item-icon { font-size: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.03); flex-shrink: 0; }
.failed-mb-item-info { flex: 1; min-width: 0; }
.failed-mb-item-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.failed-mb-item-artist { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.failed-mb-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.failed-mb-item-type { font-size: 9px; color: rgba(186,71,143,0.5); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; }
.failed-mb-item-date { font-size: 10px; color: rgba(255,255,255,0.15); }
.failed-mb-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.failed-mb-footer { padding: 14px 28px; border-top: 1px solid rgba(255,255,255,0.05); }
.failed-mb-pagination { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 12px; color: rgba(255,255,255,0.35); }

/* ── MB Search Sub-Modal ── */
.mb-search-modal {
    background: linear-gradient(165deg, #1e1e32 0%, #181828 100%); border-radius: 16px;
    width: 620px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.mb-search-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 28px 14px;
    background: linear-gradient(180deg, rgba(186,71,143,0.06) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 16px 16px 0 0;
}
.mb-search-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0; letter-spacing: -0.2px; }
.mb-search-subtitle { font-size: 12px; color: rgba(255,255,255,0.35); margin: 4px 0 0; line-height: 1.4; }
.mb-search-subtitle strong { color: rgba(255,255,255,0.75); }
.mb-search-inputs { padding: 18px 28px; border-bottom: 1px solid rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: 10px; }
.mb-search-input-row { display: flex; align-items: center; gap: 12px; }
.mb-search-input-row label { font-size: 11px; color: rgba(255,255,255,0.35); width: 48px; flex-shrink: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.mb-search-input, .mb-search-select {
    flex: 1; padding: 8px 14px; border-radius: 10px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    color: #fff; outline: none; transition: border-color 0.2s;
}
.mb-search-input:focus, .mb-search-select:focus { border-color: rgba(186,71,143,0.4); background: rgba(255,255,255,0.06); }
.mb-search-select option { background: #1e1e32; }
.mb-search-results { flex: 1; overflow-y: auto; padding: 8px 28px 20px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }
.mb-search-result {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    border-radius: 10px; cursor: pointer; transition: all 0.15s;
    border: 1px solid transparent; margin-bottom: 4px;
}
.mb-search-result:hover { background: rgba(186,71,143,0.06); border-color: rgba(186,71,143,0.15); transform: translateY(-1px); }
.mb-search-result-score { font-size: 13px; font-weight: 800; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.03); flex-shrink: 0; }
.mb-search-result-info { flex: 1; min-width: 0; }
.mb-search-result-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.mb-search-result-disambig { font-size: 11px; color: rgba(255,255,255,0.25); font-style: italic; margin-top: 3px; }
.mb-search-result-detail { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 3px; }
.mb-search-result-mbid { font-size: 9px; color: rgba(255,255,255,0.12); font-family: monospace; flex-shrink: 0; letter-spacing: 0.5px; }

/* ── Findings Tab ── */
.repair-findings-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.repair-findings-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.repair-findings-filters select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.repair-findings-filters select option {
    background: #1a1a1a;
}

.repair-findings-summary {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}
.repair-findings-summary strong {
    color: #fff;
    font-weight: 600;
}

.repair-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    user-select: none;
}
.repair-select-all input[type="checkbox"] {
    accent-color: rgb(var(--accent-rgb, 99, 102, 241));
    cursor: pointer;
}
.repair-select-all:hover {
    color: rgba(255, 255, 255, 0.9);
}

.repair-findings-bulk {
    display: flex;
    align-items: center;
    gap: 6px;
}

.repair-bulk-count {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-right: 4px;
}

/* .repair-bulk-btn / .fix / .fix-all migrated to .btn .btn--sm
   (.btn--secondary / .btn--primary / .btn--warning). */

.repair-clear-btn {
    margin-left: auto;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 5px 12px;
    color: #f87171;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.repair-clear-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
}

.repair-findings-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Finding card — expandable two-row layout */
.repair-finding-card {
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}
.repair-finding-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(28, 28, 28, 0.98);
}
.repair-finding-card.warning {
    border-left: 3px solid rgba(245, 158, 11, 0.5);
}
.repair-finding-card.critical {
    border-left: 3px solid rgba(239, 68, 68, 0.5);
}
.repair-finding-card.info {
    border-left: 3px solid rgba(59, 130, 246, 0.3);
}

.repair-finding-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

.repair-finding-select {
    flex-shrink: 0;
}
.repair-finding-select input[type="checkbox"] {
    accent-color: var(--accent-color, #6366f1);
}

.repair-finding-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.repair-finding-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.repair-finding-icon {
    font-size: 12px;
    flex-shrink: 0;
}
.repair-finding-status-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}
.repair-finding-status-badge.resolved {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.repair-finding-status-badge.dismissed {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
}
.repair-finding-type-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
}

.repair-finding-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

.repair-finding-path {
    font-size: 11px;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repair-finding-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.repair-finding-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

.repair-finding-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    min-width: 26px;
    height: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
}
.repair-finding-btn.fix {
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    font-size: 10px;
    font-weight: 600;
    padding: 0 8px;
    letter-spacing: 0.02em;
}
.repair-finding-btn.fix:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}
.repair-finding-btn.fix:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.repair-finding-btn.resolve {
    color: #22c55e;
}
.repair-finding-btn.resolve:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}
.repair-finding-btn.dismiss {
    color: rgba(255, 255, 255, 0.4);
}
.repair-finding-btn.dismiss:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}
.repair-finding-expand-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}
.repair-finding-expand-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}
.repair-finding-expand-btn.open {
    transform: rotate(180deg);
}

/* Finding detail panel — expandable */
.repair-finding-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.repair-finding-detail.open {
    max-height: 600px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.repair-finding-detail-inner {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Detail key-value rows */
.repair-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    font-size: 12px;
}
.repair-detail-key {
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    font-weight: 500;
}
.repair-detail-val {
    color: rgba(255, 255, 255, 0.75);
    word-break: break-all;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 11px;
}
.repair-detail-val.path {
    color: rgba(var(--accent-light-rgb, 129, 140, 248), 0.8);
}
.repair-detail-val.highlight {
    color: #fbbf24;
}
.repair-detail-val.success {
    color: #4ade80;
}
.repair-detail-val.error {
    color: #f87171;
}

/* Detail sub-items (for duplicates, missing tracks, etc.) */
.repair-detail-sublist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.repair-detail-subitem {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.repair-detail-subitem strong {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}
.repair-detail-subitem .mono {
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}

/* Duplicate keep/remove badges */
.repair-detail-subitem.best {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.04);
}
.repair-detail-subitem.removable {
    opacity: 0.65;
}
.repair-keep-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    margin-right: 4px;
    letter-spacing: 0.04em;
}
.repair-remove-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    margin-right: 4px;
    letter-spacing: 0.04em;
}

/* Finding media thumbnails (album art + artist image) */
.repair-finding-media {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    align-items: flex-start;
}
.repair-finding-media-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* clickable artist card → artist page */
.repair-finding-media-card--link { cursor: pointer; border-radius: 12px; transition: transform 0.15s ease; }
.repair-finding-media-card--link:hover { transform: translateY(-2px); }
.repair-finding-media-card--link:hover .repair-finding-media-img {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 29, 185, 84), 0.7);
}
.repair-finding-media-card--link:hover .repair-finding-media-label {
    color: rgb(var(--accent-rgb, 29, 185, 84));
    text-decoration: underline;
}
.repair-finding-media-img {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.repair-finding-media-img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.repair-finding-media-img.artist {
    border-radius: 50%;
}
.repair-finding-media-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    font-weight: 500;
}
/* Per-image apply button on cover-art findings (Pache711: fix one or the other) */
.repair-art-apply-btn {
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.repair-art-apply-btn:hover {
    background: rgba(74, 222, 128, 0.22);
    transform: translateY(-1px);
}

/* Play button for findings */
.repair-finding-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    border: 1px solid rgba(var(--accent-rgb, 99, 102, 241), 0.25);
    border-radius: 8px;
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
}
.repair-finding-play-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.4);
    transform: translateY(-1px);
}
.repair-finding-play-btn:active {
    transform: translateY(0);
}
.repair-finding-play-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Artwork preview (for missing cover art) */
.repair-artwork-preview {
    margin-top: 8px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.repair-artwork-preview img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.repair-artwork-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}

/* Completion bar (for incomplete albums) */
.repair-completion-bar {
    margin: 8px 0 4px;
}
.repair-completion-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}
.repair-completion-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.repair-completion-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Spectrum bar (for fake lossless) */
.repair-spectrum-bar {
    margin-bottom: 10px;
}
.repair-spectrum-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}
.repair-spectrum-track {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    overflow: visible;
}
.repair-spectrum-detected {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f97316);
    border-radius: 5px;
    opacity: 0.7;
}
.repair-spectrum-expected {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 14px;
    background: #22c55e;
    border-radius: 1px;
}
.repair-spectrum-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
}
.repair-spectrum-legend-detected {
    color: #f97316;
}
.repair-spectrum-legend-expected {
    color: #22c55e;
}

/* Score bars (for AcoustID) */
.repair-score-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.repair-score-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    max-width: 120px;
}
.repair-score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.repair-score-bar-fill.good { background: #4ade80; }
.repair-score-bar-fill.warn { background: #fbbf24; }
.repair-score-bar-fill.bad { background: #f87171; }

/* Pagination */
.repair-findings-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 14px 0 4px;
}
.repair-page-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}
.repair-page-btn.active {
    background: var(--accent-color, #6366f1);
    color: #fff;
    border-color: var(--accent-color, #6366f1);
}
.repair-page-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.repair-page-info {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    padding: 0 8px;
}

/* ── History Tab ── */
.repair-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.repair-history-entry {
    padding: 12px 14px;
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s ease;
}
.repair-history-entry:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(28, 28, 28, 0.98);
}

.repair-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.repair-history-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.repair-history-dot.success {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}
.repair-history-dot.error {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}
.repair-history-dot.running {
    background: rgb(var(--accent-rgb, 99, 102, 241));
    box-shadow: 0 0 6px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
}

.repair-history-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

.repair-history-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: uppercase;
}
.repair-history-status.success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}
.repair-history-status.error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.repair-history-status.running {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    color: var(--accent-color, #6366f1);
}
.repair-history-duration {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.repair-history-stats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.repair-history-stat {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
}
.repair-history-stat strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
.repair-history-stat.findings {
    background: rgba(245, 158, 11, 0.08);
    color: rgba(245, 158, 11, 0.7);
}
.repair-history-stat.findings strong {
    color: #f59e0b;
}
.repair-history-stat.errors {
    background: rgba(239, 68, 68, 0.08);
    color: rgba(239, 68, 68, 0.7);
}
.repair-history-stat.errors strong {
    color: #ef4444;
}
.repair-history-stat.fixed {
    background: rgba(34, 197, 94, 0.08);
    color: rgba(34, 197, 94, 0.7);
}
.repair-history-stat.fixed strong {
    color: #22c55e;
}

.repair-history-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 6px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .repair-modal {
        width: 98vw;
        max-height: 95vh;
        border-radius: 12px;
    }

    .repair-modal-header {
        padding: 14px 16px;
    }

    .repair-modal-logo {
        width: 40px;
        height: 40px;
    }

    .repair-modal-title {
        font-size: 16px;
    }

    .repair-modal-subtitle {
        display: none;
    }

    .repair-tab-content {
        padding: 12px 14px;
    }

    .repair-findings-filters {
        flex-wrap: wrap;
    }

    .repair-job-main {
        flex-direction: column;
        gap: 10px;
    }

    .repair-job-actions {
        align-self: flex-end;
    }

    .repair-detail-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .repair-help-modal {
        max-width: 95vw;
    }
}

/* ── Repair Job Live Progress Panel ── */
@keyframes repair-card-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb, 99, 102, 241), 0.08); }
    50% { box-shadow: 0 0 16px rgba(var(--accent-rgb, 99, 102, 241), 0.2); }
}

.repair-job-card.running {
    animation: repair-card-glow 2s ease-in-out infinite;
}

.repair-job-progress {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 14px;
}

.repair-job-progress.visible {
    max-height: 300px;
    padding: 8px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.repair-progress-bar-wrap {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.repair-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb, 99, 102, 241)), rgb(var(--accent-light-rgb, 129, 140, 248)));
    transition: width 0.5s ease;
    border-radius: 2px;
}

.repair-job-progress.finished .repair-progress-bar {
    background: #4ade80;
}

.repair-job-progress.error .repair-progress-bar {
    background: #ef4444;
}

.repair-progress-phase {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repair-progress-log {
    max-height: 200px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 10px;
    line-height: 1.5;
}

.repair-progress-log::-webkit-scrollbar {
    width: 4px;
}

.repair-progress-log::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.repair-log-line {
    padding: 1px 0;
    color: rgba(255, 255, 255, 0.45);
}

.repair-log-line.success {
    color: #4ade80;
}

.repair-log-line.error {
    color: #f87171;
}

.repair-log-line.skip {
    color: rgba(255, 255, 255, 0.25);
}

/* ── Repair Job Help Button & Modal ── */
.repair-help-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.repair-help-btn:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
}

.repair-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: repair-help-fadein 0.15s ease;
}
@keyframes repair-help-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.repair-help-modal {
    background: rgba(18, 18, 18, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90vw;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: repair-help-slidein 0.2s ease;
}
@keyframes repair-help-slidein {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.repair-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
}
.repair-help-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}
.repair-help-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.repair-help-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.repair-help-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 24px 16px;
}

.repair-help-body {
    padding: 0 24px 20px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.7;
}
.repair-help-body p {
    margin: 0 0 12px;
}
.repair-help-body p:last-child {
    margin-bottom: 0;
}

.repair-help-setting-list {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 4px;
}
.repair-help-setting-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    padding: 3px 0;
    line-height: 1.5;
}
.repair-help-setting-item::before {
    content: '\2022';
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    margin-right: 8px;
}

.repair-help-settings-section {
    padding: 0 24px 20px;
}
.repair-help-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 8px;
}
.repair-help-setting {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.repair-help-setting:last-child {
    border-bottom: none;
}
.repair-help-setting-key {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}
.repair-help-setting-val {
    font-size: 12px;
    color: #fff;
    font-weight: 500;
}

/* =====================================================
   SETTINGS PAGE — Modern Tabbed Redesign (stg- prefix)
   ===================================================== */

/* Tab bar */
.stg-tabbar {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    width: fit-content;
}
.stg-tabbar::-webkit-scrollbar { display: none; }

.stg-tab {
    padding: 9px 20px;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    font-family: inherit;
}
.stg-tab:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}
.stg-tab:active {
    transform: scale(0.97);
}
.stg-tab.active {
    background: var(--accent-color, #1db954);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(var(--accent-rgb, 29, 185, 84), 0.3);
}

/* Body — single centered column */
.stg-body {
    max-width: 820px;
    width: 100%;
}

/* Panel visibility */
.stg-panel { display: none; }
.stg-panel.active { display: block; }

/* Section header — clean divider */
.stg-section-title {
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 20px 0 8px;
    margin: 0;
    border: none;
}
.stg-section-title:first-child { padding-top: 0; }

/* Setting row — label left, control right */
.stg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-height: 48px;
}
.stg-row:last-child { border-bottom: none; }

.stg-row-info {
    flex: 1;
    min-width: 0;
}
.stg-row-label {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
    line-height: 1.3;
}
.stg-row-desc {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
    line-height: 1.4;
}
.stg-row-control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.stg-row-control input[type="text"],
.stg-row-control input[type="password"],
.stg-row-control input[type="number"],
.stg-row-control input[type="url"] {
    width: 280px;
    max-width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88em;
    font-family: inherit;
    transition: border-color 0.2s;
}
.stg-row-control input:focus {
    border-color: var(--accent-color, #1db954);
    outline: none;
}
.stg-row-control select {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88em;
    font-family: inherit;
    cursor: pointer;
    min-width: 160px;
}
.stg-row-control select:focus {
    border-color: var(--accent-color, #1db954);
    outline: none;
}

/* Service accordion (API services, expandable sections) */
.stg-service {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.stg-service:last-child { border-bottom: none; }

.stg-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s, padding-left 0.2s;
    user-select: none;
}
.stg-service-header:hover {
    background: rgba(255, 255, 255, 0.04);
    padding-left: 20px;
}
.stg-service-name {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
}
.stg-service-chevron {
    color: rgba(255, 255, 255, 0.25);
    transition: transform 0.2s;
    font-size: 0.8em;
}
.stg-service.expanded .stg-service-chevron {
    transform: rotate(90deg);
    color: var(--accent-color, #1db954);
}
.stg-service.expanded .stg-service-name {
    color: #fff;
}
.stg-service-body {
    display: none;
    padding: 0 16px 16px;
}
.stg-service.expanded .stg-service-body {
    display: block;
    animation: stgSlideIn 0.25s ease-out;
}
@keyframes stgSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Card container — subtle grouping for related settings */
.stg-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.stg-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

/* Action buttons in settings */
.stg-actions {
    display: flex;
    gap: 8px;
    padding: 8px 16px 14px;
}
.stg-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.stg-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}
.stg-btn:active {
    transform: scale(0.97);
    box-shadow: none;
}
.stg-btn-primary {
    background: var(--accent-color, #1db954);
    border-color: var(--accent-color, #1db954);
    color: #fff;
    font-weight: 500;
}
.stg-btn-primary:hover {
    filter: brightness(1.15);
}

/* Toggle switch (replaces checkbox for booleans) */
.stg-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.stg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.stg-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.25s;
}
.stg-toggle-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.stg-toggle input:checked + .stg-toggle-track {
    background: var(--accent-color, #1db954);
}
.stg-toggle input:checked + .stg-toggle-track::after {
    transform: translateX(18px);
}

/* ── Settings page layout override — transform old layout ── */

/* Center everything in a single column */
#settings-page .settings-content {
    flex-direction: column;
    align-items: center;
    max-width: 100% !important;
    margin: 0 auto;
    padding-bottom: 10vh;
}

/* Tab bar + save action sit on one control row. */
#settings-page .settings-nav-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto 28px;
    padding: 0 2px;
}

#settings-page .stg-tabbar {
    display: flex;
    flex: 0 1 auto;
    margin: 0;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

#settings-page .settings-nav-row .header-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    margin: 0 0 0 auto;
    margin-top: 0;
}

#settings-page .settings-nav-row .save-button {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 0.84em;
    font-weight: 600;
    white-space: nowrap;
}

/* Columns become single centered column */
#settings-page .settings-columns {
    flex-direction: column;
    max-width: 920px;
    width: 100%;
    gap: 0;
    margin: 0 auto;
    margin-bottom: 0;
}
/* The Logs tab uses the full available width — the log terminal benefits from
   the extra horizontal space (other tabs stay at the readable 920px). Matches
   only while the logs group is the visible one (switchSettingsTab clears its
   inline display when active, sets display:none otherwise). */
#settings-page .settings-columns:has(> .settings-group[data-stg="logs"]:not([style*="none"])) {
    max-width: 100%;
}

#settings-page .settings-group[data-stg="logs"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#settings-page .settings-group[data-stg="logs"] .log-viewer-header,
#settings-page .settings-group[data-stg="logs"] .log-viewer-terminal,
#settings-page .settings-group[data-stg="logs"] .log-viewer-status {
    width: 100%;
}

#settings-page .settings-group[data-stg="logs"] .log-viewer-controls,
#settings-page .settings-group[data-stg="logs"] .log-viewer-actions {
    min-width: 0;
}

/* ── Settings local title — quiet, far-left, no dashboard banner ── */
#settings-page .dashboard-header.settings-header-compact {
    flex-direction: row;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0 0 12px;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
#settings-page .dashboard-header.settings-header-compact::after,
#settings-page .settings-header-compact .dashboard-header-sweep {
    display: none;
}
#settings-page .settings-header-compact .header-text {
    min-width: 0;
}
#settings-page .settings-header-compact .header-title {
    font-size: 1.82em;
    margin: 0;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.88);
}
#settings-page .settings-header-compact .page-header-icon {
    width: 44px;
    height: 44px;
    opacity: 0.86;
}

/* Checkbox/label rows that carry an ⓘ icon span the full width so the help
   body wraps cleanly beneath them. */
#settings-page .form-group > .setting-row {
    flex: 1 1 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

#settings-page .settings-left-column,
#settings-page .settings-right-column,
#settings-page .settings-third-column {
    min-width: unset;
    width: 100%;
    gap: 0;
}

/* Kill glassmorphic cards — flat, no bg, no borders, no shadows */
#settings-page .settings-group {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
}
/* Kill the accent gradient bar at top of cards */
#settings-page .settings-group::before {
    display: none !important;
}
/* Kill hover effects on cards */
#settings-page .settings-group:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Section titles — clean, readable, accent bar on hover */
#settings-page .settings-group > h3 {
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 32px 0 12px;
    padding-left: 14px;
    padding-right: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid rgba(var(--accent-rgb), 0.2);
    position: relative;
    transition: color 0.25s, border-color 0.3s;
}
/* Kill the accent underline on h3 */
#settings-page .settings-group > h3::after {
    display: none !important;
}
#settings-page .settings-group:first-child > h3 { padding-top: 4px; }

/* Active section — accent bar + brighter title when interacting */
#settings-page .settings-group:hover > h3,
#settings-page .settings-group:focus-within > h3 {
    border-left-color: rgb(var(--accent-rgb));
    color: rgba(255, 255, 255, 0.8);
}

/* ── Form rows — label left, control right, help text wraps below ── */
#settings-page .form-group {
    display: flex;
    align-items: center;
    /* Row grammar: label grows to hold the left, control + ⓘ group at the right.
       (Was justify-content:space-between, which stranded selects in mid-row.) */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    transition: background 0.2s;
}
#settings-page .form-group:hover {
    background: rgba(255, 255, 255, 0.02);
}
#settings-page .form-group:last-child { border-bottom: none; }

#settings-page .form-group > label {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    margin: 0;
    /* Grow to fill the left so the control aligns to a consistent right edge. */
    flex: 1 1 auto;
    min-width: 0;
}
/* The growing label pushes the control to a consistent right edge; the ⓘ rides
   immediately after the control as a pair so it can never shove it around. The
   help callout (flex-basis:100%) wraps to its own line below. */
/* Shared control column — every control type sizes to one width so labels
   sit left and controls line up in a tidy right-hand column (S1). */
#settings-page .form-group > select,
#settings-page .form-group > .form-select,
#settings-page .form-group > input[type="text"],
#settings-page .form-group > input[type="password"],
#settings-page .form-group > input[type="number"],
#settings-page .form-group > input[type="url"] {
    /* flex:none (not a fixed flex-basis) so the 260px comes from `width` on
       the desktop row layout, while the mobile column layout — which flips
       flex-direction and would otherwise read 260px as a *height* — falls
       back to content height. */
    flex: none;
    width: 260px;
    max-width: 260px;
    box-sizing: border-box;
}

#settings-page .form-group > input[type="text"],
#settings-page .form-group > input[type="password"],
#settings-page .form-group > input[type="number"],
#settings-page .form-group > input[type="url"] {
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88em;
    font-family: inherit;
    margin: 0;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
#settings-page .form-group > textarea {
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.88em;
    margin: 0;
    resize: vertical;
    transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
#settings-page .form-group > input:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
#settings-page .form-group > textarea:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
#settings-page .form-group > input:focus,
#settings-page .form-group > textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}

#settings-page .form-group > select,
#settings-page select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 9px 36px 9px 14px;
    background: rgba(255, 255, 255, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.35)' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88em;
    font-family: inherit;
    cursor: pointer;
    min-width: 0;
    margin: 0;
    transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
#settings-page select:hover {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
#settings-page select:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    outline: none;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1);
}
#settings-page select option {
    background: #1a1a1e;
    color: #fff;
    padding: 8px;
}

/* ── API service frames — subtle grouped cards ── */
#settings-page .api-service-frame {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin: 6px 0;
    padding: 0 !important;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
#settings-page .api-service-frame:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
#settings-page .api-service-frame:focus-within {
    border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.3);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 29, 185, 84), 0.1), 0 4px 20px rgba(0, 0, 0, 0.15);
}

#settings-page .api-service-frame .service-title {
    padding: 14px 18px !important;
    margin: 0 !important;
    font-size: 0.9em !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    letter-spacing: 0.02em;
}

#settings-page .api-service-frame .form-group {
    padding: 10px 18px !important;
}

#settings-page .api-service-frame .callback-info {
    padding: 2px 18px 12px;
}

#settings-page .api-service-frame .form-actions {
    padding: 4px 18px 14px;
    display: flex;
    gap: 8px;
}

/* Callback / hint text */
#settings-page .callback-info .callback-help,
#settings-page .callback-info .callback-label,
#settings-page .settings-hint,
#settings-page .setting-help-text {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.6;
    letter-spacing: 0.01em;
}
#settings-page .callback-info .callback-url {
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

/* ── Server toggles — pill buttons ── */
#settings-page .server-toggle-container {
    padding: 12px 0;
    display: flex;
    gap: 8px;
}
#settings-page .server-toggle-btn {
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#settings-page .server-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--accent-rgb), 0.25);
}
#settings-page .server-toggle-btn:active {
    transform: translateY(0);
}
#settings-page .server-config-container {
    padding: 0;
}

/* ── Buttons — unified flat style ── */
#settings-page .test-button,
#settings-page .detect-button,
#settings-page .auth-button {
    padding: 9px 18px;
    min-width: fit-content;
    border-radius: 10px;
    font-size: 0.84em;
    font-weight: 600;
    font-family: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em;
}
#settings-page .test-button::before,
#settings-page .detect-button::before,
#settings-page .auth-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2) 0%, rgba(var(--accent-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}
#settings-page .test-button:hover::before,
#settings-page .detect-button:hover::before,
#settings-page .auth-button:hover::before {
    opacity: 1;
}
#settings-page .test-button:hover,
#settings-page .detect-button:hover,
#settings-page .auth-button:hover {
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.15);
}
#settings-page .test-button:active,
#settings-page .detect-button:active,
#settings-page .auth-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Test buttons row */
#settings-page .api-test-buttons {
    padding: 16px 0;
    gap: 8px;
    display: flex;
    flex-wrap: wrap;
}

#settings-page .preset-button {
    border-radius: 8px;
    font-size: 0.84em;
    padding: 8px 18px;
}
#settings-page .quality-presets {
    padding: 8px 0 16px;
}

/* ── Checkbox labels — full-width rows ── */
#settings-page .checkbox-label {
    padding: 13px 8px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 8px;
    margin: 0 !important;
    cursor: pointer;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.8);
    transition: background 0.2s, color 0.2s;
}
#settings-page .checkbox-label:hover {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}
#settings-page .checkbox-label:last-child { border-bottom: none; }
/* When a checkbox-label is the control of a .form-group row, the row separator
   is the form-group's own border-bottom — drop the label's own border/box so
   every row (checkbox or input/select) has ONE consistent full-width divider. */
#settings-page .form-group > .checkbox-label {
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
    background: transparent !important;
}

/* ── Tag service groups ── */
#settings-page .tag-service-group {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
}
#settings-page .tag-service-group:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
#settings-page .tag-service-header {
    padding: 12px 18px;
}
#settings-page .tag-service-body {
    padding: 0 18px 12px;
}

/* ── Path input groups (dir paths with Unlock buttons) ── */
#settings-page .path-input-group {
    flex: 1;
    max-width: 340px;
    display: flex;
    gap: 6px;
    align-items: center;
}
#settings-page .path-input-group input {
    flex: 1;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88em;
    font-family: inherit;
}
#settings-page .browse-button {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.82em;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    transform: none;
}
#settings-page .browse-button:hover {
    transform: none;
    box-shadow: none;
}

/* ── Form groups with hint text — wrap to next line under the row ── */
#settings-page .form-group:has(> small.settings-hint) {
    flex-wrap: wrap;
}
#settings-page .form-group > small.settings-hint,
#settings-page .form-group > .settings-hint {
    flex-basis: 100%;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.25);
    margin-top: -2px;
    padding-bottom: 2px;
    line-height: 1.4;
}

/* ── Template path inputs — full width since labels are long ── */
#settings-page .form-group > input[type="text"][id^="template-"] {
    flex: 1;
    max-width: 420px;
}

/* Inline hints (<small>/.settings-hint) wrap below the control instead of
   stealing horizontal space and squeezing the input narrower (S1). */
#settings-page .form-group > small,
#settings-page .form-group > .settings-hint {
    flex-basis: 100%;
    width: 100%;
    margin: 4px 0 0;
}

/* ── Setting help text — always wraps to its own line ── */
#settings-page .setting-help-text {
    width: 100%;
    flex-basis: 100%;
    display: block;
    padding: 2px 0 4px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.5;
    margin: 0;
}
/* Collapsible ⓘ help bodies stay hidden until toggled — wins over the
   .setting-help-text/.settings-hint display rules that would otherwise show them. */
#settings-page .setting-help-body[hidden],
.setting-help-body[hidden] {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   Expanded tile = ONE connected card. The header rounds only its top
   and joins seamlessly to its body, which carries the side + bottom
   frame; inner groups drop their own card frame so the expanded
   settings clearly belong to the tile (no box-in-a-box, no detached feel).
   ════════════════════════════════════════════════════════════════ */
#settings-page .settings-section-header:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    /* Accent-tinted frame so the OPEN card clearly stands out from the grey
       page instead of grey-on-grey. */
    background: rgba(var(--accent-rgb), 0.07);
    border-color: rgba(var(--accent-rgb), 0.30);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
}
#settings-page .settings-section-body:not(.collapsed) {
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    /* Dark neutral body (accent stays on the border + header) so the lighter
       inner sub-cards stand out clearly instead of washing out on a tint.
       Symmetric padding so the inner sub-cards sit an equal distance from the
       outer frame on every side. */
    background: rgba(0, 0, 0, 0.22);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    padding: 14px;
}
/* Inner groups inside an expanded tile: no own frame/shadow/accent bar —
   they're sub-sections of the one tile card, separated by their h3 labels. */
/* ── Sub-cards: each sub-section inside an OPEN tile sits in its own framed
   card that stands out clearly on the accent-tinted tile background. Covers
   inner settings-groups (Folder Paths, File Organization, Retry rows, …) and
   the Security method cards. ── */
#settings-page .settings-section-body:not(.collapsed) > .settings-group,
#settings-page .settings-section-body:not(.collapsed) .security-subgroup,
#settings-page .settings-section-body:not(.collapsed) .settings-subcard,
#settings-page .settings-section-body:not(.collapsed) [id$="-settings-container"]:not(#hybrid-settings-container) {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
    padding: 6px 16px 12px !important;
    margin: 0 0 14px !important;
}
#settings-page .settings-section-body:not(.collapsed) > .settings-group:last-child,
#settings-page .settings-section-body:not(.collapsed) .security-subgroup:last-child {
    margin-bottom: 0 !important;
}
#settings-page .settings-section-body:not(.collapsed) .security-subgroup {
    padding-top: 14px !important;
}
#settings-page .settings-section-body:not(.collapsed) > .settings-group::before { display: none; }
/* Sub-card title: clean header inside its frame (no accent bar / huge padding). */
#settings-page .settings-section-body:not(.collapsed) > .settings-group > h3 {
    padding: 10px 0 10px;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* The Security wrapper group is a transparent passthrough — its .security-subgroup
   children are the actual sub-cards (avoids a card-in-a-card). */
#settings-page .settings-section-body:not(.collapsed) > .settings-group.security-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 14px 6px !important;
    margin: 0 !important;
}
/* Mid-level framed containers inside a tile sub-card get flattened so there are
   never 3 stacked frames (tile → sub-card → container). The innermost
   interactive items (draggable hybrid rows, tag-embed accordions) keep theirs. */
#settings-page .settings-section-body:not(.collapsed) .api-service-frame,
#settings-page .settings-section-body:not(.collapsed) .post-processing-section,
#settings-page .settings-section-body:not(.collapsed) #hybrid-settings-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* The Source Settings group is a transparent passthrough: the basic source/
   stream/concurrency rows + the hybrid drag list sit flat in the tile, and each
   per-source config pops open in ITS OWN frame directly inside the tile
   (tile → config card, never a triple frame). */
#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 14px 6px !important;
    margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   Collapsible info panel (ⓘ help) — one consistent pattern.
   The ⓘ is a small circular badge flush at the end of its row; the
   help body, when revealed, is an indented accent-bordered panel that
   spans the full width below the control. Rows never reflow sideways.
   ════════════════════════════════════════════════════════════════ */
#settings-page .info-icon {
    /* Single clean circle with a centred "i" (was the ⓘ glyph, which carried
       its own inner circle → a double-circle that read as off-centre). */
    /* It's a role="button" with a text "i" inside — without these, hovering the
       glyph gives the I-beam text caret on Windows (Linux happened to resolve a
       pointer). Force the button hand + make the glyph non-selectable so the
       cursor is the same on every platform. */
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: transparent;
    color: rgba(var(--accent-rgb), 0.9);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    margin-left: 6px;
    flex: 0 0 auto;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#settings-page .info-icon:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.85);
    color: rgba(var(--accent-rgb), 1);
}
#settings-page .info-icon.open {
    background: rgba(var(--accent-rgb), 0.9);
    border-color: rgba(var(--accent-rgb), 0.9);
    color: #0b0f14;
}
/* The revealed panel — indented, readable, clearly a callout (not a
   detached muted line). Higher source-order than the .settings-hint /
   .setting-help-text colour rules above, so it wins on equal specificity. */
#settings-page .setting-help-body {
    display: block;
    width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: rgba(var(--accent-rgb), 0.06);
    border-left: 2px solid rgba(var(--accent-rgb), 0.5);
    border-radius: 0 6px 6px 0;
    font-size: 0.8em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.01em;
}
#settings-page .setting-help-body strong { color: rgba(255, 255, 255, 0.82); font-weight: 600; }
#settings-page .setting-help-body em { color: rgba(var(--accent-rgb), 0.9); font-style: normal; }
#settings-page .setting-help-body code {
    font-family: monospace;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
}
/* A checkbox-label inside a .setting-row must drop its row-divider border and
   box padding — otherwise it draws a partial underline only under the label
   text and sits in a padded box, misaligned with the ⓘ. The label fills the
   row so the icon is pushed flush to the right edge. (Replaces the old
   per-element inline style="border:0;padding:0;flex:1" hacks.) */
#settings-page .setting-row > .checkbox-label {
    flex: 1 1 auto;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
}
#settings-page .setting-row > .checkbox-label:hover { background: transparent; }
/* Icon always sits at the right edge of its row, vertically centred. */
#settings-page .setting-row > .info-icon {
    margin-left: auto;
    align-self: center;
}

/* Standalone help text (not inside a form-group) — add separator */
#settings-page .settings-group > .setting-help-text {
    padding: 6px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}
/* Inline status spans — keep inline */
#settings-page span.setting-help-text {
    display: inline;
    width: auto;
    flex-basis: auto;
    padding: 0;
}

/* ── Download source containers ── */
#settings-page #soulseek-settings-container,
#settings-page #tidal-download-settings-container,
#settings-page #qobuz-settings-container,
#settings-page #hifi-download-settings-container,
#settings-page #deezer-download-settings-container,
#settings-page #amazon-download-settings-container,
#settings-page #lidarr-download-settings-container,
#settings-page #soundcloud-download-settings-container,
#settings-page #youtube-settings-container,
#settings-page #hybrid-settings-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4px 18px;
    margin: 8px 0;
    transition: border-color 0.25s, box-shadow 0.25s;
}
#settings-page #soulseek-settings-container:hover,
#settings-page #tidal-download-settings-container:hover,
#settings-page #qobuz-settings-container:hover,
#settings-page #hifi-download-settings-container:hover,
#settings-page #deezer-download-settings-container:hover,
#settings-page #amazon-download-settings-container:hover,
#settings-page #lidarr-download-settings-container:hover,
#settings-page #soundcloud-download-settings-container:hover,
#settings-page #youtube-settings-container:hover,
#settings-page #hybrid-settings-container:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}

/* ── Hybrid source priority list (drag and drop) ── */
.hybrid-source-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.hybrid-source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s;
    user-select: none;
    cursor: grab;
}
.hybrid-source-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
    border-color: rgb(var(--accent-light-rgb));
}
.hybrid-source-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}
.hybrid-source-item.disabled {
    opacity: 0.35;
}
.hybrid-source-item.disabled:hover {
    transform: none;
}
.hybrid-source-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}
.hybrid-arrow-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.6em;
    cursor: pointer;
    padding: 1px 4px;
    line-height: 1;
    border-radius: 3px;
    transition: all 0.15s;
}
.hybrid-arrow-btn:hover {
    color: var(--accent-color, #1db954);
    background: rgba(255, 255, 255, 0.06);
}
.hybrid-source-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
}
.hybrid-source-icon.emoji-icon {
    font-size: 1.2em;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hybrid-source-name {
    flex: 1;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
.hybrid-source-name[onclick]:hover {
    color: rgb(var(--accent-light-rgb, 29, 185, 84));
}
/* ⚙ Configure button on each enabled source row */
.hybrid-source-config-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.95em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
}
.hybrid-source-config-btn:hover {
    color: rgb(var(--accent-light-rgb, 29, 185, 84));
    background: rgba(255, 255, 255, 0.06);
    transform: rotate(45deg);
}
/* Row whose config panel is currently open */
.hybrid-source-item.config-open {
    border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.45);
    background: rgba(var(--accent-rgb, 29, 185, 84), 0.06);
}
.hybrid-source-item.config-open .hybrid-source-config-btn {
    color: rgb(var(--accent-light-rgb, 29, 185, 84));
    transform: rotate(45deg);
}
.hybrid-source-badge {
    flex-shrink: 0;
    font-size: 0.68em;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 4px 7px;
    border-radius: 6px;
    border: 1px solid rgba(125, 211, 252, 0.24);
    background: rgba(125, 211, 252, 0.1);
    color: #7dd3fc;
}
.hybrid-source-badge-track {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.48);
}
/* enabled but can't run yet (e.g. usenet without Prowlarr) — kept enabled,
   downloads skip it; the chip says why instead of silently unchecking */
.hybrid-source-unready {
    margin-left: 6px;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
    color: #fbcd7a;
}
.hybrid-source-priority {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}
/* Drag handle + drop-target highlight (mirrors the Quality ranked-target list). */
.hybrid-source-handle {
    cursor: grab;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    user-select: none;
    flex-shrink: 0;
}
.hybrid-source-handle:active { cursor: grabbing; }
.hybrid-source-item.drag-over {
    border-color: rgba(var(--accent-rgb), 0.7) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4);
}
/* Per-source live connection status dot (set by "Test all sources"). */
.hybrid-source-status {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hybrid-source-status.hss-ok     { background: #34d27b; box-shadow: 0 0 6px rgba(52, 210, 123, 0.6); }
.hybrid-source-status.hss-fail   { background: #ff5f57; box-shadow: 0 0 6px rgba(255, 95, 87, 0.5); }
.hybrid-source-status.hss-na     { background: rgba(255, 255, 255, 0.12); }
.hybrid-source-status.hss-testing { background: #f0b429; animation: hssPulse 0.9s ease-in-out infinite; }
@keyframes hssPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.hybrid-source-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.hybrid-source-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.hybrid-source-toggle .toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.25s;
}
.hybrid-source-toggle .toggle-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}
.hybrid-source-toggle input:checked + .toggle-track {
    background: var(--accent-color, #1db954);
}
.hybrid-source-toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
}

/* ── Settings Accordion Services — visual upgrade ── */
#settings-page .api-service-frame.stg-service {
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s, border-left-color 0.3s;
}
#settings-page .api-service-frame.stg-service:hover {
    transform: none;
}

#settings-page .stg-service > .stg-service-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    transition: background 0.2s ease, padding-left 0.25s ease;
    user-select: none;
}
#settings-page .stg-service > .stg-service-header:hover {
    background: rgba(255, 255, 255, 0.035);
    padding-left: 22px;
}

/* Override service-title styles inside accordion header */
#settings-page .stg-service .stg-service-header .service-title {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    font-size: 0.88em !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.02em;
    text-transform: none;
    flex: 1;
    transition: color 0.2s;
}
#settings-page .stg-service:hover .stg-service-header .service-title,
#settings-page .stg-service.expanded .stg-service-header .service-title {
    color: rgba(255, 255, 255, 0.95);
}

/* "Required" pill on the TMDB/TVDB service headers + the required-keys callout. */
#settings-page .stg-service .stg-req-pill {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffb020;
    background: rgba(255, 176, 32, 0.14);
    border: 1px solid rgba(255, 176, 32, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    line-height: 1;
}
#settings-page .stg-required-note {
    margin: 6px 0 14px;
    padding: 10px 12px;
    border-left: 3px solid #ffb020;
    background: rgba(255, 176, 32, 0.08);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
#settings-page .stg-required-note strong { color: #ffdca0; }

/* Brand color dot — always glows, glow intensifies on hover/expand */
#settings-page .stg-service-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.85;
    box-shadow: 0 0 6px currentColor;
    transition: opacity 0.25s, transform 0.25s, box-shadow 0.25s;
}
#settings-page .stg-service:hover .stg-service-dot {
    opacity: 1;
    box-shadow: 0 0 9px currentColor;
}
#settings-page .stg-service.expanded .stg-service-dot {
    opacity: 1;
    transform: scale(1.25);
    box-shadow: 0 0 12px currentColor;
}

/* Chevron */
#settings-page .stg-service > .stg-service-header > .stg-service-chevron {
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.1em;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s;
    flex-shrink: 0;
    margin-left: auto;
    line-height: 1;
}
#settings-page .stg-service.expanded > .stg-service-header > .stg-service-chevron {
    transform: rotate(90deg);
    color: var(--accent-color, #1db954);
}

/* Collapsible body */
#settings-page .stg-service > .stg-service-body {
    display: none;
    padding: 0 0 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}
#settings-page .stg-service.expanded > .stg-service-body {
    display: block;
    animation: stgSlideIn 0.25s ease-out;
}

/* Expanded state — accent left border + slightly brighter bg */
#settings-page .api-service-frame.stg-service.expanded {
    border-left: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.4);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── Service config-status gradients ──
   Applied to the header based on whether the user has filled in credentials.
   Subtle left-to-transparent fade that reads at a glance when scrolling. */
#settings-page .stg-service-header.status-configured {
    background-image: linear-gradient(
        90deg,
        rgba(46, 204, 113, 0.32) 0%,
        rgba(46, 204, 113, 0.12) 18%,
        rgba(46, 204, 113, 0.04) 45%,
        transparent 80%
    );
}
#settings-page .stg-service-header.status-missing {
    background-image: linear-gradient(
        90deg,
        rgba(241, 196, 15, 0.35) 0%,
        rgba(241, 196, 15, 0.13) 18%,
        rgba(241, 196, 15, 0.04) 45%,
        transparent 80%
    );
}
/* Keep hover subtlety — overlay a gentle highlight without clobbering the gradient */
#settings-page .stg-service-header.status-configured:hover,
#settings-page .stg-service-header.status-missing:hover {
    background-color: rgba(255, 255, 255, 0.035);
}

/* ── Verify state: spinner badge in the header ──
   Shown while a verify API call is in flight for this service. */
#settings-page .stg-service-verify-spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    animation: stgSpin 0.9s linear infinite;
    flex-shrink: 0;
    margin-left: 6px;
    margin-right: 6px;
}
#settings-page .stg-service-header.status-checking .stg-service-verify-spinner {
    display: inline-block;
}
@keyframes stgSpin {
    to { transform: rotate(360deg); }
}

/* ── Verify state: status line inside panel body ──
   "Testing connection…" while verify runs, removed when result arrives. */
#settings-page .stg-service-verify-status {
    padding: 10px 18px;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ── Verify failure warning bar at top of expanded panel ──
   Shown when the verify call failed. Removed on next successful verify. */
#settings-page .stg-service-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 18px;
    padding: 10px 12px;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-left: 3px solid rgba(231, 76, 60, 0.65);
    border-radius: 6px;
    font-size: 0.82em;
    color: rgba(255, 220, 216, 0.9);
    line-height: 1.4;
}
#settings-page .stg-service-warning .stg-service-warning-icon {
    flex-shrink: 0;
    font-size: 1.05em;
    color: rgba(231, 76, 60, 0.85);
    line-height: 1.3;
}
#settings-page .stg-service-warning .stg-service-warning-text {
    flex: 1;
}

/* Expand All / Collapse All toggle button */
#settings-page .stg-accordion-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.72em;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    margin-left: auto;
    letter-spacing: 0.03em;
    font-family: inherit;
}
#settings-page .stg-accordion-toggle:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Accent color picker ── */
#settings-page .accent-color-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #settings-page .settings-nav-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 8px;
    }
    #settings-page .settings-nav-row .header-actions {
        margin-left: auto;
    }
    /* Tab bar scrolls horizontally; fade the right edge to signal more tabs */
    #settings-page .stg-tabbar {
        width: 100%;
        flex: 1 1 100%;
        border-radius: 0;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }
    #settings-page .stg-tabbar::-webkit-scrollbar { display: none; }
    .stg-tab { padding: 8px 14px; font-size: 0.8em; }
    /* Content fills screen */
    #settings-page .settings-columns { max-width: 100% !important; padding: 0 8px; }
    /* Form rows stack vertically */
    #settings-page .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px 0 !important;
    }
    #settings-page .form-group > input[type="text"],
    #settings-page .form-group > input[type="password"],
    #settings-page .form-group > input[type="number"],
    #settings-page .form-group > input[type="url"],
    #settings-page .form-group > select { max-width: 100% !important; width: 100% !important; }
    /* Path input groups full width */
    #settings-page .path-input-group { max-width: 100%; width: 100%; }
    /* Source containers */
    #settings-page [id$="-settings-container"],
    #settings-page [id$="-download-settings-container"] { padding: 4px 12px !important; }
    /* API service frames */
    #settings-page .api-service-frame .form-group { padding: 8px 12px !important; }
    #settings-page .api-service-frame .callback-info { padding: 2px 12px 10px; }
    #settings-page .api-service-frame .form-actions { padding: 4px 12px 12px; }
    /* Accordion headers */
    #settings-page .stg-service > .stg-service-header { padding: 12px 14px; }
    #settings-page .stg-service > .stg-service-body { padding: 0 0 8px; }
    /* Section titles */
    #settings-page .settings-group > h3 { padding: 24px 0 10px; }
}


/* ==================================================================================
   PLAYLIST EXPLORER — Visual Discovery Tree
   ================================================================================== */

.explorer-container {
    /* card styling from .page-shell; keep full-height flex layout */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Playlist card picker */
.explorer-playlist-picker {
    margin-bottom: 16px;
}

.explorer-picker-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.explorer-picker-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.explorer-picker-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.explorer-picker-tab:hover {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
}

.explorer-picker-tab.active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.explorer-picker-tab-count {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.explorer-picker-tab.active .explorer-picker-tab-count {
    color: rgba(var(--accent-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.15);
}

.explorer-picker-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.explorer-picker-scroll::-webkit-scrollbar {
    height: 4px;
}

.explorer-picker-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.explorer-picker-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    min-width: 220px;
    max-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.explorer-picker-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.explorer-picker-card.active {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 4px 16px rgba(var(--accent-rgb), 0.1);
}

.explorer-picker-card-art {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}

.explorer-picker-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explorer-picker-card-art-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 18px;
}

.explorer-picker-card-info {
    min-width: 0;
    flex: 1;
}

.explorer-picker-card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.explorer-picker-card-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-picker-card-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
    line-height: 1.4;
}

.explorer-picker-card-actions {
    margin-top: 6px;
}

.explorer-picker-card.not-ready {
    opacity: 0.5;
    border-style: dashed;
}

.explorer-picker-card.not-ready:hover {
    opacity: 0.7;
    border-color: rgba(245, 166, 35, 0.3);
}

.explorer-picker-not-ready {
    color: rgba(245, 166, 35, 0.8);
}

.explorer-picker-discovered {
    color: rgba(74, 222, 128, 0.8);
}
.explorer-picker-in-library {
    color: rgba(96, 165, 250, 0.7); font-size: 10px;
}
.explorer-picker-wishlisted {
    color: rgba(244, 114, 182, 0.7); font-size: 10px;
}

.explorer-discovering-live {
    color: rgba(96, 165, 250, 0.9);
    animation: explorer-pulse 1.5s ease-in-out infinite;
}
@keyframes explorer-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.explorer-picker-card-lock {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    opacity: 0.5;
}

.explorer-picker-card {
    position: relative;
}

/* Status badges on picker cards — inline, not absolute */
.explorer-picker-card-badge {
    font-size: 9px; font-weight: 800; padding: 2px 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px; flex-shrink: 0; margin-left: auto; line-height: 1;
}
.explorer-picker-card-badge.explored {
    background: rgba(74, 222, 128, 0.15); color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}
.explorer-picker-card-badge.ready {
    background: rgba(251, 191, 36, 0.12); color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25); font-size: 10px;
}
.explorer-picker-card-badge.needs-discovery {
    background: rgba(245, 166, 35, 0.1); color: rgba(245, 166, 35, 0.7);
    border: 1px solid rgba(245, 166, 35, 0.2);
}
.explorer-picker-card-badge.wishlisted {
    background: rgba(244, 114, 182, 0.15); color: #f472b6;
    border: 1px solid rgba(244, 114, 182, 0.3);
}
.explorer-picker-card-badge.downloaded {
    background: rgba(96, 165, 250, 0.15); color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}
.explorer-picker-card.explored {
    border-color: rgba(74, 222, 128, 0.15);
}
.explorer-picker-card.explored:hover {
    border-color: rgba(74, 222, 128, 0.3);
}

/* Discover button — inline in card info area */
.explorer-picker-discover-btn {
    padding: 3px 8px; border-radius: 5px; font-size: 9px; font-weight: 700;
    background: rgba(96, 165, 250, 0.12); color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.2); cursor: pointer;
    transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px;
    margin-left: auto; flex-shrink: 0;
}
.explorer-picker-discover-btn:hover {
    background: rgba(96, 165, 250, 0.25);
}
.explorer-picker-discover-btn:disabled {
    opacity: 0.5; cursor: default;
}

.explorer-picker-empty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    padding: 16px 0;
}

.explorer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Mode toggle — pill segmented control */
.explorer-mode-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.explorer-mode-btn {
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
}
.explorer-mode-btn svg { opacity: 0.5; transition: opacity 0.2s; }

.explorer-mode-btn.active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.explorer-mode-btn.active svg { opacity: 1; }

.explorer-mode-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.04);
}

/* Explore button row — prominent CTA below playlist cards */
.explorer-build-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 0 4px;
}

.explorer-build-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.explorer-build-btn {
    padding: 11px 28px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, #fff));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.25);
}

.explorer-build-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

.explorer-build-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.4);
    filter: brightness(1.1);
}

.explorer-build-btn:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.95);
}

.explorer-build-btn:disabled {
    opacity: 0.5;
    cursor: default;
    filter: saturate(0.5);
    box-shadow: none;
}

/* Action bar — polished sticky toolbar */
.explorer-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(180deg, rgba(18, 18, 26, 0.95) 0%, rgba(18, 18, 22, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    margin-bottom: 16px;
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 20;
    animation: explorer-action-bar-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes explorer-action-bar-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

.explorer-action-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.explorer-nav-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.18);
    width: 100%;
    text-align: center;
    margin-top: 2px;
}

.explorer-selection-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.explorer-action-buttons {
    display: flex;
    gap: 6px;
}

/* .explorer-action-btn / .primary migrated to .btn .btn--sm
   (.btn--secondary / .btn--primary). */

/* Viewport */
.explorer-viewport {
    position: relative;
    flex: 1;
    overflow: auto;
    min-height: 400px;
    cursor: default;
    /* Enable smooth scrolling for pan operations */
}

.explorer-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.explorer-tree {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
    transform-origin: top center;
    /* No transition — zoom must be instant so SVG coordinates are correct */
}

/* Empty state */
.explorer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.explorer-empty-icon {
    width: 80px;
    height: 80px;
    color: rgba(255, 255, 255, 0.12);
    margin-bottom: 20px;
}

.explorer-empty-icon svg {
    width: 100%;
    height: 100%;
}

.explorer-empty-icon svg circle,
.explorer-empty-icon svg line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: explorer-empty-draw 2s ease forwards;
}

.explorer-empty-icon svg circle:nth-child(1) { animation-delay: 0s; }
.explorer-empty-icon svg line:nth-child(2) { animation-delay: 0.2s; }
.explorer-empty-icon svg line:nth-child(3) { animation-delay: 0.4s; }
.explorer-empty-icon svg line:nth-child(4) { animation-delay: 0.4s; }
.explorer-empty-icon svg circle:nth-child(5) { animation-delay: 0.7s; }
.explorer-empty-icon svg circle:nth-child(6) { animation-delay: 0.7s; }
.explorer-empty-icon svg circle:nth-child(7) { animation-delay: 0.7s; }
.explorer-empty-icon svg line:nth-child(8) { animation-delay: 0.5s; }

@keyframes explorer-empty-draw {
    to { stroke-dashoffset: 0; }
}

.explorer-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 8px;
}

.explorer-empty-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    margin: 0;
    max-width: 400px;
}

/* Progress bar */
.explorer-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

.explorer-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

.explorer-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6), var(--accent));
    border-radius: 4px;
    transition: width 0.4s ease;
    position: relative;
    overflow: hidden;
}

.explorer-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: explorer-shimmer 1.5s ease-in-out infinite;
}

@keyframes explorer-shimmer {
    to { left: 100%; }
}

.explorer-progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

/* ── Node Graph Tree ── */

/* Zoom controls */
.explorer-zoom-controls {
    position: sticky;
    top: 12px;
    float: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
    margin-right: 8px;
}

.explorer-zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 18, 22, 0.85);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.explorer-zoom-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.3);
    color: #fff;
}

/* Tiers: horizontal rows of nodes — z-index: 1 so they paint above the SVG (z-index: 0) */
.explorer-tier {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.explorer-tier-root {
    margin-bottom: 8px;
}

.explorer-tier-artists {
    gap: 24px;
    margin-bottom: 4px;
}

.explorer-artist-tiers {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Branch: wraps a node + its children below */
.explorer-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    animation: explorer-node-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--enter-delay, 0s);
}

/* Children container (albums under artist, tracks under album) */
.explorer-children {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding-top: 20px;
    position: relative;
    z-index: 1;
}

.explorer-children:empty {
    display: none;
}

/* ── Base Node ── */
.explorer-node {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.explorer-node:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.3);
    z-index: 10;
}

/* Ripple ring on artist hover */
.explorer-node-artist::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--accent-rgb), 0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.explorer-node-artist:hover::after {
    inset: -10px;
    border-color: rgba(var(--accent-rgb), 0.2);
}

.explorer-node.expanded {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15), 0 8px 32px rgba(0, 0, 0, 0.4);
}

.explorer-node-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.explorer-node-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    color: rgba(255, 255, 255, 0.2);
    font-size: 32px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Label overlay at bottom of node */
.explorer-node-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    text-align: center;
    z-index: 2;
}

.explorer-node-label-sub {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(var(--accent-rgb), 0.9);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.explorer-node-label-main {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.explorer-node-label-meta {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

/* ── Root Node ── */
.explorer-node-root {
    width: 160px;
    height: 160px;
    border-radius: 24px;
    border-width: 2px;
    border-color: rgba(var(--accent-rgb), 0.3);
}

.explorer-node-root .explorer-node-label {
    padding: 14px 12px 12px;
    border-radius: 0 0 22px 22px;
}

.explorer-node-root .explorer-node-label-main {
    font-size: 14px;
}

.explorer-node-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2) 0%, transparent 70%);
    z-index: 0;
    animation: explorer-glow-pulse 4s ease-in-out infinite;
}

@keyframes explorer-glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ── Artist Node ── */
.explorer-node-artist {
    width: 82px;
    height: 82px;
}

.explorer-node-artist .explorer-node-label-main {
    font-size: 11px;
}

/* Artist has selected albums indicator */
.explorer-node-artist.has-selection {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15), 0 4px 16px rgba(var(--accent-rgb), 0.1);
}

.explorer-node-artist.has-selection::after {
    inset: -10px;
    border-color: rgba(var(--accent-rgb), 0.25);
    animation: explorer-selected-breathe 2.5s ease-in-out infinite;
}

.explorer-node-artist.error {
    border-color: rgba(255, 71, 87, 0.3);
    opacity: 0.5;
    cursor: default;
}

/* Expand hint arrow on artist nodes */
.explorer-node-expand-hint {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    z-index: 5;
    transition: all 0.2s;
    line-height: 1;
}

.explorer-node-artist:hover .explorer-node-expand-hint {
    color: var(--accent);
    bottom: 0px;
}

.explorer-node-artist.expanded .explorer-node-expand-hint {
    transform: translateX(-50%) rotate(180deg);
    color: var(--accent);
}

.explorer-node-error-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 71, 87, 0.3);
    z-index: 3;
}

/* ── Album Node ── */
.explorer-node-album {
    width: 90px;
    height: 90px;
    border-radius: 16px;
}

.explorer-node-album .explorer-node-label {
    padding: 6px 6px 6px;
    border-radius: 0 0 14px 14px;
}

.explorer-node-album .explorer-node-label-main {
    font-size: 10px;
}

.explorer-node-album .explorer-node-label-meta {
    font-size: 8px;
}

.explorer-node-album.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25), 0 4px 20px rgba(var(--accent-rgb), 0.2);
    animation: explorer-selected-breathe 2.5s ease-in-out infinite;
}

@keyframes explorer-selected-breathe {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2), 0 4px 16px rgba(var(--accent-rgb), 0.1); }
    50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.35), 0 4px 24px rgba(var(--accent-rgb), 0.2); }
}

.explorer-node-album.owned {
    opacity: 0.45;
}

.explorer-node-album.added {
    border-color: rgba(76, 175, 80, 0.6);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* Selection checkmark */
.explorer-node-select {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0;
    transition: all 0.2s;
}

.explorer-node-album:hover .explorer-node-select,
.explorer-node-select.active {
    opacity: 1;
}

.explorer-node-select.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.5);
}

.explorer-node-select svg {
    width: 12px;
    height: 12px;
    color: #fff;
    opacity: 0;
}

.explorer-node-select.active svg {
    opacity: 1;
}

/* Badge floating on album node */
.explorer-node-badge-float {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    white-space: nowrap;
}

.explorer-node-badge-float.owned {
    background: rgba(76, 175, 80, 0.85);
    color: #fff;
}

.explorer-node-badge-float.playlist {
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
    top: 6px;
    left: 6px;
    bottom: auto;
    font-size: 10px;
    padding: 1px 5px;
}

/* ── Track Node ── */
.explorer-node-track {
    width: auto;
    height: auto;
    border-radius: 10px;
    overflow: visible;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.explorer-node-track:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.explorer-node-track .explorer-node-label {
    position: static;
    background: none;
    padding: 0;
    text-align: left;
}

.explorer-node-track .explorer-node-label-main {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.explorer-node-track .explorer-node-label-meta {
    font-size: 9px;
}

/* ── SVG Connection Lines ── */
.explorer-svg {
    transition: opacity 0.4s ease;
    opacity: 0;
}

.explorer-tree:hover .explorer-svg {
    opacity: 1;
}

.explorer-line {
    fill: none;
}

.explorer-line-animated {
    animation: explorer-line-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes explorer-line-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes explorer-node-enter {
    from { opacity: 0; transform: translateY(20px) scale(0.8); }
    to { opacity: 1; transform: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .explorer-container { padding: 16px; }

    .explorer-controls { width: 100%; flex-wrap: wrap; }
    .explorer-node-root { width: 120px; height: 120px; }
    .explorer-node-artist { width: 68px; height: 68px; }
    .explorer-node-album { width: 72px; height: 72px; }
    .explorer-tier { gap: 12px; }
}

@media (max-width: 600px) {
    .explorer-action-bar { flex-direction: column; gap: 10px; text-align: center; }
    .explorer-node-root { width: 100px; height: 100px; }
    .explorer-node-artist { width: 56px; height: 56px; }
    .explorer-node-album { width: 60px; height: 60px; }
}
    /* display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    animation: explorer-node-enter 0.6s ease both;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
} */

.explorer-root-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
    top: -80px;
    left: -40px;
    pointer-events: none;
}

.explorer-root-image {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    z-index: 1;
}

.explorer-root-image-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgba(255, 255, 255, 0.3);
    font-size: 28px;
    flex-shrink: 0;
    z-index: 1;
}

.explorer-root-info { z-index: 1; }

.explorer-root-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(var(--accent-rgb), 0.8);
    margin-bottom: 4px;
}

.explorer-root-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.explorer-root-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
}

/* Trunk — vertical line from root to artists */
.explorer-trunk {
    width: 2px;
    height: 32px;
    background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.15));
    margin: 0 auto;
    border-radius: 2px;
    animation: explorer-trunk-grow 0.4s ease 0.3s both;
}

@keyframes explorer-trunk-grow {
    from { height: 0; opacity: 0; }
    to { height: 32px; opacity: 1; }
}

/* Artist column — vertical list */
.explorer-artists-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Artist row — connector + card + albums */
.explorer-artist-row {
    animation: explorer-node-enter 0.5s ease both;
}

/* Left connector (dot + horizontal line) */
.explorer-artist-connector {
    display: flex;
    align-items: center;
    padding-left: 48px;
    height: 0;
    position: relative;
}

.explorer-connector-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.explorer-connector-line {
    height: 2px;
    flex: 1;
    max-width: 32px;
    background: linear-gradient(to right, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.1));
    border-radius: 2px;
}

/* Artist card — horizontal layout */
.explorer-artist-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    margin: 0 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.explorer-artist-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.explorer-artist-card.expanded {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.04);
    box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.08);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.explorer-artist-card.error {
    border-color: rgba(255, 71, 87, 0.15);
    opacity: 0.6;
    cursor: default;
}

.explorer-artist-card.empty {
    opacity: 0.5;
    cursor: default;
}

.explorer-artist-card-left { flex-shrink: 0; }

.explorer-artist-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

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

.explorer-artist-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgba(255, 255, 255, 0.4);
    font-size: 20px;
    font-weight: 700;
}

.explorer-artist-card-center {
    flex: 1;
    min-width: 0;
}

.explorer-artist-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-artist-card-tracks {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.explorer-artist-card-error {
    font-size: 11px;
    color: rgba(255, 71, 87, 0.7);
    margin-top: 3px;
}

.explorer-artist-card-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.explorer-artist-stat {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.explorer-artist-stat strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.explorer-expand-indicator {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.3s;
    width: 20px;
    text-align: center;
}

.explorer-artist-card.expanded .explorer-expand-indicator {
    color: var(--accent);
}

/* Albums container (expands below artist card) */
.explorer-albums-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 16px;
    border-left: 2px solid transparent;
}

.explorer-albums-container.open {
    max-height: 4000px;
    border-left-color: rgba(var(--accent-rgb), 0.15);
    margin-left: 56px;
    padding: 12px 0 12px 24px;
}

/* Album nodes — horizontal flow */
.explorer-album-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Individual album node */
.explorer-album-node {
    display: flex;
    align-items: stretch;
    animation: explorer-node-enter 0.4s ease both;
    position: relative;
}

.explorer-album-node-connector {
    width: 20px;
    display: flex;
    align-items: center;
    position: relative;
}

.explorer-album-node-connector::before {
    content: '';
    width: 100%;
    height: 2px;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 2px;
}

.explorer-album-node-connector::after {
    content: '';
    position: absolute;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.3);
    transform: translateX(50%);
}

.explorer-album-node-card {
    width: 160px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.explorer-album-node:hover .explorer-album-node-card {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.explorer-album-node.selected .explorer-album-node-card {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 4px 20px rgba(var(--accent-rgb), 0.12);
}

.explorer-album-node.owned {
    opacity: 0.5;
}

.explorer-album-node.selected .explorer-album-node-connector::before,
.explorer-album-node.selected .explorer-album-node-connector::after {
    background: var(--accent);
}

/* Album node art */
.explorer-album-node-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.05);
}

.explorer-album-node-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.explorer-album-node:hover .explorer-album-node-art img {
    transform: scale(1.06);
}

.explorer-album-node-art-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 32px;
}

.explorer-album-node-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.explorer-album-node:hover .explorer-album-node-check,
.explorer-album-node-check.checked {
    opacity: 1;
}

.explorer-album-node-check.checked {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.4);
}

.explorer-album-node-check svg {
    width: 14px;
    height: 14px;
    color: #fff;
    opacity: 0;
}

.explorer-album-node-check.checked svg {
    opacity: 1;
}

/* Album node info */
.explorer-album-node-info {
    padding: 10px 12px 12px;
}

.explorer-album-node-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.explorer-album-node-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

.explorer-album-node-badges {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.explorer-node-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.explorer-node-badge.owned {
    background: rgba(76, 175, 80, 0.2);
    color: rgba(76, 175, 80, 0.9);
}

.explorer-node-badge.playlist {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgba(var(--accent-rgb), 0.9);
}

/* SVG connection lines */
.explorer-connection-line {
    stroke: rgba(var(--accent-rgb), 0.2);
    stroke-width: 2;
    fill: none;
    animation: explorer-line-draw 0.6s ease forwards;
    filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.1));
}

@keyframes explorer-line-draw {
    from { stroke-dashoffset: var(--line-length, 500); }
    to { stroke-dashoffset: 0; }
}

@keyframes explorer-node-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.92) rotate(-2deg); }
    60% { transform: translateY(-2px) scale(1.02) rotate(0.5deg); }
    to { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 900px) {
    .explorer-container { padding: 16px; }

    .explorer-controls { width: 100%; }
    .explorer-root-node { padding: 16px 20px; gap: 14px; }
    .explorer-root-name { font-size: 18px; }
    .explorer-root-image { width: 56px; height: 56px; }
    .explorer-artist-card { margin: 0 8px; padding: 12px 14px; gap: 12px; }
    .explorer-artist-card-right { gap: 10px; }
    .explorer-albums-container.open { margin-left: 40px; padding-left: 16px; }
    .explorer-album-node-card { width: 130px; }
}

@media (max-width: 600px) {
    .explorer-action-bar { flex-direction: column; gap: 10px; text-align: center; }
    .explorer-artist-avatar { width: 40px; height: 40px; }
    .explorer-artist-card-right { display: none; }
    .explorer-album-nodes { gap: 8px; }
    .explorer-album-node-card { width: 110px; }
    .explorer-connector-dot { display: none; }
    .explorer-connector-line { display: none; }
}


/* ==================================================================================
   DASHBOARD — Recent Syncs
   ================================================================================== */

.sync-history-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.sync-history-cards::-webkit-scrollbar { height: 4px; }
.sync-history-cards::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

.sync-history-empty {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    padding: 16px 0;
}

.sync-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    animation: sync-card-enter 0.4s ease both;
}

@keyframes sync-card-enter {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.sync-card-delete {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    z-index: 2;
    line-height: 1;
}

.sync-history-card:hover .sync-card-delete { opacity: 1; }
.sync-card-delete:hover { background: rgba(239, 83, 80, 0.3); color: #EF5350; }

.sync-history-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    transition: all 0.2s;
}

.sync-history-card.health-good::before { background: #4CAF50; }
.sync-history-card.health-warn::before { background: #FFB74D; }
.sync-history-card.health-bad::before { background: #EF5350; }

.sync-history-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sync-card-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
}

.sync-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sync-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.15);
    font-size: 18px;
}

.sync-card-info {
    flex: 1;
    min-width: 0;
}

.sync-card-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sync-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 3px;
}

.sync-card-source {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-card-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
}

.sync-card-stats {
    flex-shrink: 0;
    text-align: right;
    min-width: 60px;
}

.sync-card-pct {
    font-size: 18px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.sync-card-bar {
    width: 60px;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin: 4px 0;
    overflow: hidden;
}

.sync-card-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.health-good .sync-card-bar-fill { background: #4CAF50; }
.health-warn .sync-card-bar-fill { background: #FFB74D; }
.health-bad .sync-card-bar-fill { background: #EF5350; }

.sync-card-counts {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
}

/* Sync Detail Modal — wider than default discog modal */
#sync-detail-overlay .discog-modal {
    max-width: 900px;
    width: 95vw;
}

/* Sync Detail Modal Table */
.sync-detail-table-wrap {
    overflow: auto;
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
}

.sync-detail-notice {
    text-align: center;
    padding: 16px !important;
}

.sync-detail-notice-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    line-height: 1.5;
}

.sync-detail-row.no-data td {
    color: rgba(255, 255, 255, 0.4);
}

.sync-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sync-detail-table thead th {
    position: sticky;
    top: 0;
    background: rgba(18, 18, 22, 0.95);
    padding: 10px 8px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 2;
}

.sync-detail-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.sync-detail-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.sync-detail-table tbody td {
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.7);
}

.sync-detail-num {
    color: rgba(255, 255, 255, 0.25);
    width: 32px;
    white-space: nowrap;
}

.sync-detail-art {
    width: 36px;
    padding: 4px 6px !important;
}

.sync-detail-art img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.sync-detail-art-empty {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.sync-dl-wishlist {
    font-size: 9px;
    color: rgba(255, 183, 77, 0.8);
    font-weight: 600;
    white-space: nowrap;
}
/* unmatched (wing-it fallback) — never wishlisted; muted, non-actionable */
.sync-dl-unmatched {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    white-space: nowrap;
}
/* clickable variant — re-add to wishlist */
.sync-dl-wishlist-btn {
    border: 1px solid rgba(255, 183, 77, 0.35);
    background: rgba(255, 183, 77, 0.1);
    border-radius: 999px;
    padding: 3px 9px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sync-dl-wishlist-btn:hover { background: rgba(255, 183, 77, 0.22); border-color: rgba(255, 183, 77, 0.6); color: #ffce8a; }
.sync-dl-wishlist-btn.is-busy { opacity: 0.6; cursor: default; }
.sync-dl-wishlist-btn.is-done {
    color: rgba(76, 175, 80, 0.95); border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.12); cursor: default;
}

.sync-detail-track {
    font-weight: 500;
    min-width: 150px;
}

.sync-detail-artist {
    min-width: 100px;
    color: rgba(255, 255, 255, 0.5);
}

.sync-detail-album {
    min-width: 100px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

.sync-detail-status { text-align: center; width: 45px; white-space: nowrap; }
.sync-detail-conf { text-align: center; width: 55px; white-space: nowrap; }
.sync-detail-dl { text-align: center; width: 35px; white-space: nowrap; }

.sync-detail-row.unmatched .sync-detail-track {
    color: rgba(255, 255, 255, 0.45);
}

.conf-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.conf-badge.conf-high {
    background: rgba(76, 175, 80, 0.15);
    color: rgba(76, 175, 80, 0.9);
}

.conf-badge.conf-mid {
    background: rgba(255, 183, 77, 0.15);
    color: rgba(255, 183, 77, 0.9);
}

.conf-badge.conf-low {
    background: rgba(239, 83, 80, 0.15);
    color: rgba(239, 83, 80, 0.9);
}

@media (max-width: 768px) {
    .sync-history-card { min-width: 240px; }
    .sync-detail-table { font-size: 11px; }
    .sync-detail-table tbody td { max-width: 120px; }
}


/* ==================================================================================
   SERVER PLAYLIST MANAGER — Sync Page Server Tab
   ================================================================================== */

/* Playlist sections */
.server-pl-section {
    margin-bottom: 24px;
}

.server-pl-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.server-pl-section-icon { font-size: 16px; }

.server-pl-section-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.server-pl-section-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    padding: 1px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
}

/* Unsynced cards — dimmer, different accent */
.server-pl-unsynced {
    opacity: 0.7;
}

.server-pl-unsynced:hover {
    opacity: 1;
}

.server-pl-unsynced .server-pl-card-glow {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.03), transparent 60%) !important;
}

/* Synced badge */
.server-pl-synced-badge {
    font-size: 9px;
    font-weight: 600;
    color: rgb(var(--accent-light-rgb));
    padding: 1px 6px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    margin-left: 6px;
}

/* Playlist grid layout */
.server-pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 4px 2px;
}

/* Playlist cards */
.server-pl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: sync-card-enter 0.35s ease both;
}

.server-pl-card-glow {
    position: absolute;
    top: -40%;
    left: -20%;
    width: 140%;
    height: 100%;
    background: radial-gradient(ellipse at center, hsla(var(--card-hue), 70%, 55%, 0.08) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.4s;
    opacity: 0.5;
}

.server-pl-card:hover {
    transform: translateY(-4px);
    border-color: hsla(var(--card-hue), 60%, 60%, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 20px hsla(var(--card-hue), 70%, 55%, 0.08);
}

.server-pl-card:hover .server-pl-card-glow {
    opacity: 1;
}

/* Top row — visual bars + server badge */
.server-pl-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.server-pl-card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: hsla(var(--card-hue), 50%, 50%, 0.12);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    gap: 3px;
}

/* Animated equalizer bars */
.server-pl-card-bars {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 20px;
}

.server-pl-card-bars span {
    display: block;
    width: 3.5px;
    border-radius: 2px;
    background: hsla(var(--card-hue), 65%, 60%, 0.7);
    transition: height 0.3s ease;
}

.server-pl-card-bars span:nth-child(1) { height: 8px; }
.server-pl-card-bars span:nth-child(2) { height: 14px; }
.server-pl-card-bars span:nth-child(3) { height: 10px; }
.server-pl-card-bars span:nth-child(4) { height: 6px; }

.server-pl-card:hover .server-pl-card-bars span:nth-child(1) { height: 14px; animation: eq-bar 0.6s ease infinite alternate; }
.server-pl-card:hover .server-pl-card-bars span:nth-child(2) { height: 8px; animation: eq-bar 0.5s ease infinite alternate 0.1s; }
.server-pl-card:hover .server-pl-card-bars span:nth-child(3) { height: 16px; animation: eq-bar 0.55s ease infinite alternate 0.2s; }
.server-pl-card:hover .server-pl-card-bars span:nth-child(4) { height: 12px; animation: eq-bar 0.65s ease infinite alternate 0.15s; }

@keyframes eq-bar {
    0% { height: 6px; }
    100% { height: 18px; }
}

.server-pl-card-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.3s, border-color 0.3s;
}

.server-pl-card:hover .server-pl-card-badge {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Card body */
.server-pl-card-body {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.server-pl-card-name {
    font-size: 14px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.server-pl-card-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 4px;
}

.server-pl-track-count {
    font-weight: 700;
    color: hsla(var(--card-hue), 60%, 65%, 0.9);
    font-variant-numeric: tabular-nums;
}

/* Card footer */
.server-pl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

.server-pl-card-action {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.3s;
}

.server-pl-card:hover .server-pl-card-action {
    color: hsla(var(--card-hue), 60%, 65%, 0.8);
}

.server-pl-card-arrow {
    color: rgba(255, 255, 255, 0.2);
    transition: transform 0.3s, color 0.3s;
    display: flex;
    align-items: center;
}

.server-pl-card:hover .server-pl-card-arrow {
    transform: translateX(4px);
    color: hsla(var(--card-hue), 60%, 65%, 0.7);
}

/* Skeleton loading state */
.server-pl-skeleton {
    pointer-events: none;
    --card-hue: 220;
}

.server-pl-skeleton .skeleton-box {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
}

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

/* ── Disambiguation Modal ── */
.server-disambig-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.server-disambig-overlay.visible { opacity: 1; pointer-events: auto; }
.server-disambig-overlay.hidden { display: none; }

.server-disambig-modal {
    background: rgba(22, 22, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px;
    max-width: 520px;
    width: 90vw;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.server-disambig-overlay.visible .server-disambig-modal { transform: scale(1); }

.server-disambig-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.server-disambig-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.server-disambig-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 4px 0 0;
}

.server-disambig-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.server-disambig-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.server-disambig-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
    animation: fadeSlideUp 0.3s ease forwards;
    opacity: 0;
}
.server-disambig-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateX(4px);
}

.server-disambig-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.server-disambig-info { flex: 1; min-width: 0; }

.server-disambig-name {
    font-size: 14px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.server-disambig-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    align-items: center;
}

.server-disambig-details .source-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.server-disambig-arrow {
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: transform 0.25s, color 0.25s;
}
.server-disambig-card:hover .server-disambig-arrow {
    transform: translateX(4px);
    color: var(--accent);
}

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

/* ── Editor Header ── */
.server-editor-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0 12px;
}

.server-editor-back {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.server-editor-back:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.server-editor-info { flex: 1; min-width: 0; }

.server-editor-refresh {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.server-editor-refresh:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.server-editor-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.server-editor-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.server-editor-stats {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.server-editor-stat {
    text-align: center;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.server-editor-stat-num {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.server-editor-stat-num.matched { color: #4caf50; }
.server-editor-stat-num.missing { color: #ef5350; }
.server-editor-stat-num.extra { color: #ffb74d; }

/* "out of order" badge — server playlist has the right tracks but a different
   sequence than the source. Opens a read-only view of the real server order. */
.server-order-badge {
    margin-left: 8px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
    font-size: 11px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap;
    color: #ffb74d; background: rgba(255, 183, 77, 0.12);
    border: 1px solid rgba(255, 183, 77, 0.4);
    transition: background 0.15s ease;
}
.server-order-badge:hover { background: rgba(255, 183, 77, 0.22); }

/* read-only server-order modal */
.server-order-overlay {
    position: fixed; inset: 0; z-index: 10000; display: flex;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(8, 9, 13, 0.72); backdrop-filter: blur(6px);
    animation: serverOrderFade 0.16s ease;
}
@keyframes serverOrderFade { from { opacity: 0; } to { opacity: 1; } }
.server-order-dialog {
    width: min(460px, 100%); max-height: 82vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #20232b, #16181e);
    border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden; animation: serverOrderPop 0.2s cubic-bezier(0.2, 0.7, 0.2, 1.1);
}
@keyframes serverOrderPop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.server-order-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 20px 15px;
    background: linear-gradient(180deg, rgba(255, 183, 77, 0.08), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.server-order-h1 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.server-order-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin-top: 4px; line-height: 1.4; }
.server-order-close {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05); border: none; color: rgba(255, 255, 255, 0.55);
    font-size: 20px; line-height: 1; cursor: pointer; transition: all 0.15s ease;
}
.server-order-close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.server-order-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 12px; scrollbar-width: thin; }
.server-order-row {
    display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px;
    transition: background 0.12s ease;
}
.server-order-row:hover { background: rgba(255, 255, 255, 0.04); }
.server-order-num {
    flex: 0 0 22px; text-align: right; font-size: 12px; font-weight: 800;
    color: rgba(255, 255, 255, 0.3); font-variant-numeric: tabular-nums;
}
.server-order-art {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 7px; object-fit: cover;
    background: rgba(255, 255, 255, 0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.server-order-art-ph { display: flex; align-items: center; justify-content: center;
    font-size: 17px; color: rgba(255, 255, 255, 0.3); }
.server-order-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.server-order-title { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-order-artist { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-order-empty { padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.4); font-size: 13px; }
.server-order-foot { flex: 0 0 auto; padding: 14px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.server-order-foot-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }
.server-order-actions { display: flex; gap: 10px; }
.server-align-btn {
    flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.server-align-btn:hover { background: rgba(76, 175, 80, 0.14); border-color: rgba(76, 175, 80, 0.5); }
.server-align-btn-t { font-size: 13px; font-weight: 700; color: #fff; }
.server-align-btn-d { font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.35; }
.server-order-foot-note { font-size: 11px; color: rgba(255, 255, 255, 0.4); margin-top: 9px; }

.server-editor-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

/* No-source banner */
.server-no-source-banner {
    padding: 10px 16px;
    background: rgba(255, 183, 77, 0.06);
    border: 1px solid rgba(255, 183, 77, 0.15);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 183, 77, 0.8);
    margin-bottom: 10px;
}

/* Editor filters */
.server-editor-filters {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

/* ── Dual-Column Compare Layout ── */
.server-compare-columns {
    display: flex;
    gap: 0;
    height: calc(100vh - 340px);
    min-height: 380px;
    max-height: 620px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
}

.server-compare-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.server-compare-col.source {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.server-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.server-col-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
}

.server-col-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
}

.server-col-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.server-col-scroll::-webkit-scrollbar { width: 4px; }
.server-col-scroll::-webkit-scrollbar-track { background: transparent; }
.server-col-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
.server-col-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }

/* ── Track Items ── */
.server-track-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.2s;
    min-height: 50px;
}
.server-track-item:hover { background: rgba(255, 255, 255, 0.03); }
.server-track-item:last-child { border-bottom: none; }

.server-track-item.highlighted {
    background: rgba(100, 181, 246, 0.07);
    box-shadow: inset 3px 0 0 rgba(100, 181, 246, 0.5);
}

.server-track-num {
    width: 22px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.server-track-art {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.server-track-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.server-track-art-empty {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.server-track-info {
    flex: 1;
    min-width: 0;
}
.server-track-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-track-artist {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.server-track-duration {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.server-track-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.server-track-item.matched .server-track-status-dot {
    background: #4caf50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.35);
}
.server-track-item.missing .server-track-status-dot {
    background: #ef5350;
    box-shadow: 0 0 6px rgba(239, 83, 80, 0.35);
}
.server-track-item.extra .server-track-status-dot {
    background: #ffb74d;
    box-shadow: 0 0 6px rgba(255, 183, 77, 0.35);
}

/* ── Empty Slots (missing / extra gap) ── */
.server-track-empty-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px dashed rgba(239, 83, 80, 0.2);
    background: rgba(239, 83, 80, 0.02);
    transition: all 0.2s;
    min-height: 36px;
}
.server-track-empty-slot:hover {
    border-color: rgba(239, 83, 80, 0.45);
    background: rgba(239, 83, 80, 0.06);
}
.server-track-empty-slot.extra {
    border-color: rgba(255, 183, 77, 0.15);
    background: rgba(255, 183, 77, 0.02);
}

.empty-slot-wrap { cursor: pointer; }
.empty-slot-wrap:hover .empty-slot-label { color: rgba(239, 83, 80, 0.9); }

.empty-slot-icon {
    color: rgba(239, 83, 80, 0.4);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.empty-slot-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(239, 83, 80, 0.5);
    transition: color 0.2s;
    white-space: nowrap;
}

.empty-slot-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* #1128: this missing row already HAS a saved manual match — it just points at a
   library track that isn't in the server playlist yet, so it can't pair in the
   preview. Green (not the row's red) because nothing is wrong: the real sync
   honours the match. Without this the row looks identical to one that was never
   matched, and users re-match the same track on every sync. */
.empty-slot-matched-note {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    color: rgb(29, 185, 84);
    background: rgba(29, 185, 84, 0.12);
    border: 1px solid rgba(29, 185, 84, 0.28);
}

/* Confidence badge on matched tracks */
.server-track-conf {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.server-track-conf.exact {
    background: rgba(76, 175, 80, 0.12);
    color: #4caf50;
}
.server-track-conf.high {
    background: rgba(139, 195, 74, 0.12);
    color: #8bc34a;
}
.server-track-conf.fuzzy {
    background: rgba(255, 183, 77, 0.12);
    color: #ffb74d;
}

/* Track action buttons (swap + remove) */
.server-track-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.server-track-item:hover .server-track-actions { opacity: 1; }

.server-track-swap-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
}
.server-track-swap-btn:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
}

.server-track-remove-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
}
.server-track-remove-btn:hover {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.25);
    color: #ef5350;
}

.extra-gap { opacity: 0.5; }
.extra-gap .server-track-empty-slot { border-color: rgba(255, 183, 77, 0.15); }
.extra-gap .empty-slot-label { color: rgba(255, 183, 77, 0.4); }

/* ── Editor Footer ── */
.server-editor-footer {
    padding: 10px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
}

/* ── Search Modal ── */
.server-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.server-search-overlay.visible { opacity: 1; }

.server-search-popover {
    width: 580px;
    max-width: 95vw;
    max-height: 80vh;
    background: rgba(20, 20, 28, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.server-search-overlay.visible .server-search-popover {
    transform: scale(1) translateY(0);
}

.server-search-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 0;
}

.server-search-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.server-search-context {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.server-search-context-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 3px;
}
.server-search-context-artist { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.server-search-context-sep { color: rgba(255, 255, 255, 0.15); }
.server-search-context-name { color: var(--accent); font-weight: 600; }

.server-search-close {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.server-search-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.server-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 14px 20px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: border-color 0.2s;
}
.server-search-input-wrap:focus-within {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.server-search-input-icon {
    padding: 0 4px 0 14px;
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.server-search-input {
    flex: 1;
    padding: 11px 14px 11px 8px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    outline: none;
}

.server-search-results-header {
    padding: 10px 20px 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.25);
    min-height: 20px;
}

.server-search-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px 12px 16px;
    max-height: 420px;
}
.server-search-results::-webkit-scrollbar { width: 4px; }
.server-search-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.server-search-hint {
    text-align: center;
    padding: 32px 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    line-height: 1.6;
}

.server-search-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin: 0 auto 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.server-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: background 0.15s;
    animation: fadeSlideUp 0.2s ease both;
}
.server-search-result:hover { background: rgba(255, 255, 255, 0.05); }

.server-search-result-art {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.server-search-result-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.server-search-result-art-empty {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.server-search-result-info {
    flex: 1;
    min-width: 0;
}

.server-search-result-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-search-result-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.server-search-result-details {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.server-search-format {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(var(--accent-rgb), 0.12);
    color: rgba(var(--accent-rgb), 0.85);
    letter-spacing: 0.03em;
}

.server-search-bitrate {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.2);
    font-variant-numeric: tabular-nums;
}

.server-search-dur {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
}

.server-search-select-btn {
    padding: 6px 14px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.server-search-select-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Server tab icon */
.tab-icon.server-icon::before {
    content: '💻';
}

/* ── Server Playlist Manager — Mobile ── */
@media (max-width: 768px) {
    .server-pl-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .server-pl-card { padding: 14px 12px 12px; }
    .server-pl-card-icon-wrap { width: 36px; height: 36px; }
    .server-pl-card-name { font-size: 12px; }

    /* Stack columns vertically with toggle */
    .server-compare-columns {
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .server-compare-col {
        max-height: 50vh;
    }
    .server-compare-col.source {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .server-editor-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .server-editor-stats {
        width: 100%;
        justify-content: flex-start;
    }

    .server-track-item { padding: 6px 10px; gap: 8px; min-height: 44px; }
    .server-track-art { width: 32px; height: 32px; }
    .server-track-title { font-size: 11px; }
    .server-track-artist { font-size: 9px; }
    .server-track-duration { display: none; }
    .server-track-actions { opacity: 1; }

    .server-disambig-modal { padding: 20px 16px; }

    .server-search-popover { max-width: 100vw; width: 100vw; max-height: 100vh; border-radius: 0; }
    .server-search-result { gap: 8px; padding: 8px 6px; }
    .server-search-result-art { width: 36px; height: 36px; }
    .server-search-result-details { gap: 3px; }

    .sync-tab-server { flex: 0 0 auto !important; }
    .sync-tab-divider { display: none; }
}

/* ==================================================================================
   SMART DELETE MODAL
   ================================================================================== */

.smart-delete-modal {
    background: rgba(20, 20, 28, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    max-width: 420px;
    width: 90vw;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.smart-delete-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.smart-delete-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.smart-delete-close {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.smart-delete-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.smart-delete-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0 0 16px;
}

.smart-delete-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.smart-delete-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: #fff;
}
.smart-delete-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
.smart-delete-option.destructive:hover {
    background: rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.2);
}

.smart-delete-option-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.smart-delete-option-info { flex: 1; min-width: 0; }

.smart-delete-option-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.smart-delete-option.destructive .smart-delete-option-title { color: #ef5350; }

.smart-delete-option-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
}

/* ==================================================================================
   TRACK REDOWNLOAD MODAL
   ================================================================================== */

.redownload-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.redownload-modal {
    background: rgba(16, 16, 24, 0.85);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    max-width: 1100px;
    width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 80px rgba(0,0,0,0.3) inset;
}

.redownload-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 32px 0;
}
.redownload-header h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.02em; }
.redownload-header-sub { font-size: 13px; color: rgba(255,255,255,0.3); margin: 6px 0 0; }

.redownload-close {
    width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4); border-radius: 50%; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
    flex-shrink: 0;
}
.redownload-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Current track card */
.redownload-current {
    display: flex; align-items: center; gap: 16px;
    margin: 20px 32px 0; padding: 16px 20px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
}
.redownload-current-art {
    width: 56px; height: 56px; border-radius: 12px;
    overflow: hidden; flex-shrink: 0;
    background: rgba(var(--accent-rgb), 0.1);
    display: flex; align-items: center; justify-content: center;
}
.redownload-current-art img {
    width: 100%; height: 100%; object-fit: cover;
}
.redownload-current-art .redownload-art-empty {
    font-size: 22px; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), 0.1); border-radius: 0;
}
.redownload-current-info { flex: 1; min-width: 0; }
.redownload-current-title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.redownload-current-meta { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.redownload-current-badges { display: flex; gap: 4px; flex-shrink: 0; }
.redownload-badge {
    font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
    letter-spacing: 0.03em;
}
.redownload-badge.fmt { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.redownload-badge.bitrate { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

/* Step indicator */
.redownload-steps {
    display: flex; align-items: center; gap: 0; padding: 22px 32px 10px;
}
.redownload-step {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.2);
    padding: 8px 16px; border-radius: 10px; transition: all 0.25s;
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.redownload-step.active {
    color: #fff; background: rgba(var(--accent-rgb), 0.12);
}
.redownload-step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.06); display: flex;
    align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
}
.redownload-step.active .redownload-step-num {
    background: var(--accent); color: #fff;
}
.redownload-step-line {
    flex: 1; height: 2px; background: rgba(255,255,255,0.06);
    margin: 0 6px; min-width: 20px; border-radius: 1px;
}

.redownload-body { padding: 8px 32px 28px; overflow-y: auto; flex: 1; }

.redownload-loading, .redownload-error, .redownload-empty {
    text-align: center; padding: 30px; color: rgba(255,255,255,0.25); font-size: 12px;
}
.redownload-error { color: #ef5350; }

/* Step 1 — Metadata source columns */
.redownload-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.redownload-source-col {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.redownload-col-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
}
.redownload-col-icon { font-size: 16px; }
.redownload-col-label { flex: 1; }
.redownload-col-count {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

.redownload-col-results {
    max-height: 380px; overflow-y: auto; padding: 6px;
}
.redownload-col-results::-webkit-scrollbar { width: 3px; }
.redownload-col-results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }

.redownload-col-empty {
    padding: 30px 16px; text-align: center;
    font-size: 12px; color: rgba(255, 255, 255, 0.2);
}

.redownload-result {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    cursor: pointer; transition: all 0.15s; margin-bottom: 3px;
    border: 1px solid transparent;
}
.redownload-result:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.redownload-result:has(input:checked) { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.15); }
.redownload-result input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }

.redownload-result-art { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.redownload-result-art img { width: 100%; height: 100%; object-fit: cover; }
.redownload-art-empty { width: 100%; height: 100%; background: rgba(255,255,255,0.04); border-radius: 6px; }

.redownload-result-info { flex: 1; min-width: 0; }
.redownload-result-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.redownload-result-meta { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.redownload-current-badge { font-size: 8px; background: rgba(var(--accent-rgb),0.15); color: var(--accent); padding: 1px 5px; border-radius: 3px; font-weight: 700; text-transform: uppercase; }

.redownload-result-score { font-size: 11px; font-weight: 700; flex-shrink: 0; padding: 4px 10px; border-radius: 6px; }
.redownload-result-score.high { background: rgba(76,175,80,0.12); color: #4caf50; }
.redownload-result-score.medium { background: rgba(255,183,77,0.12); color: #ffb74d; }
.redownload-result-score.low { background: rgba(239,83,80,0.12); color: #ef5350; }

.redownload-result-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.redownload-result-dur { font-size: 10px; color: rgba(255,255,255,0.2); flex-shrink: 0; min-width: 30px; text-align: right; }

/* Step 2 — Download source columns */
.rdl-src-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.rdl-src-col {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rdl-src-col-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
}
.rdl-src-col-icon { font-size: 16px; }
.rdl-src-col-label { flex: 1; }
.rdl-src-col-count {
    font-size: 10px; padding: 2px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35);
}

.rdl-src-col-body {
    max-height: 400px; overflow-y: auto; padding: 6px;
}
.rdl-src-col-body::-webkit-scrollbar { width: 3px; }
.rdl-src-col-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }

/* Individual result item */
.rdl-src-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    transition: all 0.15s; margin-bottom: 4px;
    border: 1px solid transparent;
}
.rdl-src-item:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); }
.rdl-src-item:has(input:checked) { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.15); }
.rdl-src-item.recommended { border-color: rgba(var(--accent-rgb), 0.1); }
.rdl-src-item.blacklisted { opacity: 0.3; cursor: not-allowed; }

.rdl-src-item input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; }
.rdl-src-radio-placeholder { width: 16px; height: 16px; flex-shrink: 0; }

.rdl-src-item-body { flex: 1; min-width: 0; }

.rdl-src-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rdl-src-item-name {
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.rdl-src-recommended {
    font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15); color: var(--accent);
    white-space: nowrap; flex-shrink: 0;
}

.rdl-src-item-details {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px;
}
.rdl-src-fmt {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.12); color: var(--accent); letter-spacing: 0.02em;
}
.rdl-src-detail {
    font-size: 10px; color: rgba(255, 255, 255, 0.3);
}
.rdl-src-user {
    color: rgba(255, 255, 255, 0.45); font-weight: 600;
}

/* Confidence bar */
.rdl-src-conf-bar {
    height: 3px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden;
}
.rdl-src-conf-fill {
    height: 100%; border-radius: 2px; transition: width 0.3s ease;
}
.rdl-src-conf-fill.high { background: #4caf50; }
.rdl-src-conf-fill.medium { background: #ffb74d; }
.rdl-src-conf-fill.low { background: #ef5350; }

.rdl-src-conf-pct {
    font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 34px; text-align: right; margin-top: 2px;
}
.rdl-src-conf-pct.high { color: #4caf50; }
.rdl-src-conf-pct.medium { color: #ffb74d; }
.rdl-src-conf-pct.low { color: #ef5350; }

.rdl-src-bl { font-size: 9px; color: #ef5350; font-weight: 600; margin-top: 2px; }

.rdl-src-col-empty {
    padding: 24px 16px; text-align: center;
    font-size: 12px; color: rgba(255, 255, 255, 0.2);
}

/* Sticky footer — always visible at bottom of modal */
.redownload-sticky-footer {
    padding: 16px 32px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(16, 16, 24, 0.95);
    backdrop-filter: blur(20px);
    flex-shrink: 0;
    border-radius: 0 0 24px 24px;
}

.redownload-delete-old {
    display: flex; align-items: center; gap: 8px; padding: 0 0 12px;
    font-size: 12px; color: rgba(255,255,255,0.4); cursor: pointer;
}
.redownload-delete-old input { accent-color: var(--accent); }

/* Step 3 — Progress */
.redownload-progress { padding: 20px 0; text-align: center; }
.redownload-progress-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.redownload-progress-from { font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 16px; }
.redownload-progress-bar-wrap { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.redownload-progress-bar { height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); border-radius: 4px; width: 0; transition: width 0.5s ease; box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); }
.redownload-progress-status { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 12px; }

/* Action buttons */
.redownload-actions { display: flex; justify-content: flex-end; gap: 12px; }
.redownload-btn {
    padding: 12px 28px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: none;
}
.redownload-btn.primary {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0.8));
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
    letter-spacing: 0.01em;
}
.redownload-btn.primary:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.4); }
.redownload-btn.secondary { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); }
.redownload-btn.secondary:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* Redownload button in track table */
.enhanced-redownload-btn {
    background: none; border: none; color: rgba(255,255,255,0.2); cursor: pointer;
    font-size: 16px; padding: 2px 4px; border-radius: 4px; transition: all 0.2s;
}
.enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }
/* Track actions group — source info, redownload, delete in one cell */
.col-track-actions { width: auto; padding: 0 4px !important; }

.enhanced-track-actions-group {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    opacity: 0.4;
    transition: opacity 0.15s;
}
tr:hover .enhanced-track-actions-group { opacity: 1; }
.enhanced-track-actions-group.visible { opacity: 1; }

.enhanced-source-info-btn,
.enhanced-reidentify-btn,
.enhanced-redownload-btn {
    background: none; border: none; cursor: pointer;
    width: 24px; height: 24px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; padding: 0;
}

.enhanced-source-info-btn { color: rgba(255,255,255,0.35); font-size: 13px; }
.enhanced-source-info-btn:hover { color: rgba(100,181,246,0.9); background: rgba(100,181,246,0.1); }

.enhanced-reidentify-btn { color: rgba(255,255,255,0.35); font-size: 15px; }
.enhanced-reidentify-btn:hover { color: rgb(var(--accent-light-rgb)); background: rgba(var(--accent-rgb),0.1); }

.enhanced-redownload-btn { color: rgba(255,255,255,0.35); font-size: 15px; }
.enhanced-redownload-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb),0.1); }

.enhanced-delete-btn {
    background: none; border: none; cursor: pointer;
    width: 24px; height: 24px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.35); font-size: 13px;
    transition: all 0.15s; padding: 0;
}
.enhanced-delete-btn:hover { color: #ef5350; background: rgba(239,83,80,0.1); }

/* Source Info Popover */
.source-info-popover {
    position: fixed;
    width: 360px;
    max-width: 95vw;
    background: rgba(20, 20, 28, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 9500;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s, transform 0.2s;
}
.source-info-popover.visible { opacity: 1; transform: scale(1); }

.source-info-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px 10px;
}
.source-info-title { font-size: 13px; font-weight: 700; color: #fff; }
.source-info-close {
    width: 24px; height: 24px; border: none; background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4); border-radius: 50%; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.source-info-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.source-info-body { padding: 0 16px 12px; }

.source-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.source-info-row:last-child { border-bottom: none; }

.source-info-label {
    font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.source-info-value {
    font-size: 12px; color: rgba(255,255,255,0.8); text-align: right;
    max-width: 220px;
}
.source-info-mono { font-family: monospace; font-size: 11px; }
.source-info-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.source-info-empty {
    padding: 20px 16px; text-align: center; font-size: 11px;
    color: rgba(255,255,255,0.25);
}

.source-info-loading {
    padding: 24px 16px; text-align: center; font-size: 11px;
    color: rgba(255,255,255,0.25);
}

.source-info-actions { padding: 4px 16px 14px; }

.source-info-blacklist-btn {
    width: 100%; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(239,83,80,0.2);
    background: rgba(239,83,80,0.06); color: #ef5350; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.source-info-blacklist-btn:hover { background: rgba(239,83,80,0.12); border-color: rgba(239,83,80,0.35); }
.source-info-blacklist-btn:disabled { opacity: 0.5; cursor: default; }

.source-info-history {
    padding: 8px 16px 14px; font-size: 10px; color: rgba(255,255,255,0.2); text-align: center;
}

/* ── Blacklist Modal ── */
.blacklist-modal {
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    max-width: 600px;
    width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.blacklist-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px 16px;
}
.blacklist-modal-header h3 { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.blacklist-modal-body { padding: 0 24px 24px; overflow-y: auto; flex: 1; }
.blacklist-modal-body::-webkit-scrollbar { width: 4px; }
.blacklist-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.blacklist-empty {
    text-align: center; padding: 30px; font-size: 12px;
    color: rgba(255, 255, 255, 0.25); line-height: 1.6;
}

.blacklist-entry {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}
.blacklist-entry:hover { background: rgba(255, 255, 255, 0.03); }

.blacklist-entry-icon {
    font-size: 16px; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(239, 83, 80, 0.08);
    display: flex; align-items: center; justify-content: center;
}

.blacklist-entry-info { flex: 1; min-width: 0; }
.blacklist-entry-track {
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blacklist-entry-file {
    font-size: 10px; color: rgba(255, 255, 255, 0.3); font-family: monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.blacklist-entry-user { font-size: 10px; color: rgba(255, 255, 255, 0.25); margin-top: 1px; }

.blacklist-entry-meta { font-size: 10px; color: rgba(255, 255, 255, 0.2); flex-shrink: 0; }

.blacklist-entry-remove {
    width: 24px; height: 24px; border-radius: 6px; border: none;
    background: transparent; color: rgba(255, 255, 255, 0.2);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0; transition: all 0.15s;
}
.blacklist-entry-remove:hover { background: rgba(239, 83, 80, 0.12); color: #ef5350; }

/* ── Reduce Visual Effects ── Performance mode. Kills the GPU-EXPENSIVE
   properties only — the actual lag (esp. Firefox) is backdrop-filter / box-shadow /
   filter re-rasterizing every frame. Because !important author declarations outrank
   animation + transition declarations in the cascade, any keyframe/transition that
   tries to set these is forced to none even while it runs — so the expensive part is
   neutralized without freezing the motion itself.

   We deliberately do NOT blanket `animation: none` / `transition-duration: 0s`:
   that froze every functional loading spinner (the dash-header worker-service
   spinners read as BROKEN, stuck mid-rotation) and killed cheap transform/colour
   feedback (e.g. the Quick Actions hover). Transform- and opacity-only motion is
   composited for ~free, so it stays — a spinner that spins, just without glow. */
body.reduce-effects *,
body.reduce-effects *::before,
body.reduce-effects *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Kill the background particle canvas entirely in performance mode */
body.reduce-effects #page-particles-canvas {
    display: none !important;
}

/* ── Max Performance ── Nuclear low-power mode for software-rendered / no-GPU
   setups (e.g. Docker, remote desktop), where there is no compositor and even
   transform/opacity motion repaints on the CPU. Superset of Reduce Visual Effects:
   kills the expensive GPU properties AND halts ALL animation + transitions — so
   functional loading spinners go static. That's the deliberate trade-off for
   minimum CPU; the user opts in explicitly. Worker orbs, particles, the cursor
   glow and the API-monitor sparks are halted in JS (gated on window._maxPerfActive). */
body.max-performance *,
body.max-performance *::before,
body.max-performance *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Drop the always-on page-particles canvas from the compositor entirely. */
body.max-performance #page-particles-canvas {
    display: none !important;
}

/* Appearance toggles that Max Performance overrides: greyed + locked while it's on. */
.form-group.setting-overridden {
    opacity: 0.45;
}
.form-group.setting-overridden .checkbox-label {
    cursor: not-allowed;
}

/* ============================================
   ACTIVE DOWNLOADS PAGE — Premium Glassmorphic
   ============================================ */

/* Batch color palette */
:root {
    --batch-color-0: 139, 92, 246;    /* violet */
    --batch-color-1: 59, 130, 246;    /* blue */
    --batch-color-2: 236, 72, 153;    /* pink */
    --batch-color-3: 245, 158, 11;    /* amber */
    --batch-color-4: 16, 185, 129;    /* emerald */
    --batch-color-5: 239, 68, 68;     /* red */
    --batch-color-6: 6, 182, 212;     /* cyan */
    --batch-color-7: 168, 85, 247;    /* purple */
}

.adl-layout {
    /* outer gutter comes from .page (40px) — consistent with the other
       full-width exception pages (library, etc.) */
    display: flex;
    gap: 0;
    max-width: 1440px;
}

.adl-main {
    flex: 1;
    min-width: 0;
}

.adl-container {
    padding: 0;
}

.adl-header {
    margin-bottom: 24px;
}

.adl-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.adl-title svg {
    color: rgb(var(--accent-rgb));
    filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.3));
}

.adl-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.adl-filter-pills {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
}

.adl-pill {
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.adl-pill:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

.adl-pill.active {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.15);
}

.adl-count {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.adl-clear-btn {
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.adl-clear-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Cancel All button — appears in the header only when at least one batch has
   active or queued work. Same shape as clear-btn, red themed. */
.adl-cancel-all-btn {
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: rgba(252, 165, 165, 0.95);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.adl-cancel-all-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.adl-cancel-all-btn:active {
    transform: scale(0.97);
}

.adl-cancel-all-btn.adl-cancel-all-pending,
.adl-cancel-all-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.adl-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.adl-empty {
    text-align: center;
    padding: 64px 20px;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
}

/* ---- Section Headers ---- */

.adl-section-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.2);
    padding: 12px 14px 4px;
}

/* ---- Download Row ---- */

.adl-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.adl-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

/* Active row accent glow */
.adl-row.adl-row-active {
    border-color: rgba(var(--accent-rgb), 0.18);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(var(--accent-rgb), 0.01) 100%);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.06);
}

/* Completed row subtle green */
.adl-row.adl-row-completed {
    border-color: rgba(34, 197, 94, 0.1);
}

/* Failed row subtle red */
.adl-row.adl-row-failed {
    border-color: rgba(239, 68, 68, 0.1);
}

/* ── Per-row cancel button ──
   Fancy reveal on hover: fades in + slides/scales from the right edge with
   a soft red glow. Only rendered on active/queued rows (set in JS). Terminal
   rows have nothing to cancel.
*/
.adl-row-cancel {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.85), rgba(220, 38, 38, 0.9));
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px) scale(0.72);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.adl-row-cancel svg {
    display: block;
}

.adl-row:hover .adl-row-cancel,
.adl-row:focus-within .adl-row-cancel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.adl-row-cancel:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(239, 68, 68, 1));
    border-color: rgba(248, 113, 113, 0.85);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateX(0) scale(1.12);
}

.adl-row-cancel:active {
    transform: translateX(0) scale(0.95);
    transition: transform 0.08s ease;
}

/* Pending state — cancel request in flight; dim the button and disable */
.adl-row-cancel-pending,
.adl-row-cancel-pending:hover {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transform: translateX(0) scale(1) !important;
    box-shadow: none !important;
}

/* Touch devices: no hover, keep the cancel button visible so it's reachable. */
@media (hover: none) {
    .adl-row-cancel {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0) scale(1);
    }
}

.adl-row-art {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.adl-row-art-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.adl-row-info {
    flex: 1;
    min-width: 0;
}

.adl-row-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.adl-row-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.adl-row-batch {
    font-size: 0.7rem;
    color: rgba(var(--accent-rgb), 0.55);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-row-error {
    font-size: 0.7rem;
    color: rgba(239, 68, 68, 0.65);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Status Badges ---- */

.adl-row-status {
    font-size: 0.76rem;
    font-weight: 500;
    white-space: nowrap;
    min-width: 95px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.adl-row-status.active {
    color: rgb(var(--accent-light-rgb));
}

.adl-row-status.queued {
    color: rgba(255, 255, 255, 0.3);
}

.adl-row-status.completed {
    color: #22c55e;
}

.adl-row-status.failed {
    color: #ef4444;
}

.adl-row-status.cancelled {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.1);
}

/* Status dot indicator */
.adl-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adl-status-dot.active {
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: adlPulse 1.5s ease infinite;
}

.adl-status-dot.queued { background: rgba(255, 255, 255, 0.2); }
.adl-status-dot.completed { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.3); }
.adl-status-dot.failed { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.3); }
.adl-status-dot.cancelled { background: rgba(255, 255, 255, 0.15); }

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

/* ---- Spinner ---- */

.adl-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: rgb(var(--accent-rgb));
    border-radius: 50%;
    animation: adlSpin 0.6s linear infinite;
    vertical-align: middle;
}

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

/* ---- Nav Badge ---- */

.dl-nav-badge {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: rgb(var(--accent-rgb));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.3);
}

/* ---- Batch row color indicator ---- */
.adl-row-batch-color {
    width: 3px;
    border-radius: 2px;
    align-self: stretch;
    flex-shrink: 0;
    min-height: 32px;
}

/* ---- Batch Context Panel ---- */
.adl-batch-panel {
    width: 366px;
    flex-shrink: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 14px 0 22px;
    margin-left: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 120px);
    position: sticky;
    top: 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.adl-batch-panel::-webkit-scrollbar { width: 7px; }
.adl-batch-panel::-webkit-scrollbar-track { background: transparent; }
.adl-batch-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.adl-batch-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

.adl-batch-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.adl-batch-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Collapse toggle */
.adl-batch-panel-collapse {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.adl-batch-panel-collapse:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.adl-batch-panel-collapse svg {
    transition: transform 0.2s;
}

.adl-batch-panel.collapsed .adl-batch-panel-collapse svg {
    transform: rotate(180deg);
}

.adl-batch-panel.collapsed .adl-batch-active,
.adl-batch-panel.collapsed .adl-batch-history-section,
/* The active-batches summary line ("N batches · M downloading · …") is shown
   via JS and was NOT hidden on collapse, so it overflowed the 44px rail as
   clipped text (#814). Hide it with the rest of the panel body. */
.adl-batch-panel.collapsed .adl-batch-summary {
    display: none;
}

.adl-batch-panel.collapsed {
    width: 44px;
    min-width: 44px;
    padding: 0 4px;
}

.adl-batch-panel.collapsed .adl-batch-panel-title {
    display: none;
}

.adl-batch-panel.collapsed .adl-batch-panel-header {
    justify-content: center;
}

.adl-batch-empty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    text-align: center;
    padding: 32px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Batch card */
.adl-batch-card {
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.adl-batch-card:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.06);
}

.adl-batch-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adl-batch-card-info {
    flex: 1;
    min-width: 0;
}

.adl-batch-card-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-batch-card-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-batch-card-source {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Batch card thumbnail */
.adl-batch-card-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.adl-batch-card-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.adl-batch-card-cancel,
.adl-batch-card-filter {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    transition: all 0.2s;
}

.adl-batch-card-cancel:hover {
    color: #ef4444;
}

.adl-batch-card-filter:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.adl-batch-card-filter.active {
    color: rgba(var(--accent-rgb), 1);
    background: rgba(var(--accent-rgb), 0.1);
}

/* Active batch glow */
.adl-batch-card.active-glow {
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.06);
}

/* Filtered batch highlight */
.adl-batch-card.filtered {
    background: rgba(var(--accent-rgb), 0.04);
    border-color: rgba(var(--accent-rgb), 0.15);
}

/* Progress bar inside batch card */
.adl-batch-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.adl-batch-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: rgba(var(--accent-rgb), 0.7);
    transition: width 0.4s ease;
}

.adl-batch-progress-fill.has-failed {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.7), #ef4444);
}

/* ── Batches panel: Phase-A upgrade ─────────────────────────────────────── */

/* Glanceable aggregate strip */
.adl-batch-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 11px; margin: 0 0 8px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 9px;
    font-size: 0.72rem;
}
.adl-batch-summary-main { color: rgba(255, 255, 255, 0.85); font-weight: 600; letter-spacing: 0.01em; }
.adl-batch-summary-eta { color: rgb(var(--accent-rgb)); font-weight: 700; white-space: nowrap; }

/* Segmented progress bar */
.adl-batch-segbar {
    display: flex; height: 4px; margin-top: 9px; border-radius: 3px; overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.adl-batch-seg { height: 100%; transition: width 0.4s ease; }
.adl-batch-seg.seg-done { background: #22c55e; }
.adl-batch-seg.seg-fail { background: #ef4444; }
.adl-batch-seg.seg-active { background: rgba(var(--accent-rgb), 0.85); }
.adl-batch-seg.seg-active.shimmer {
    background-image: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.55) 0%, rgba(var(--accent-rgb), 1) 50%, rgba(var(--accent-rgb), 0.55) 100%);
    background-size: 200% 100%;
    animation: adlSegShimmer 1.4s linear infinite;
}
@keyframes adlSegShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Stat chips + ETA */
.adl-batch-statline {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px;
}
.adl-batch-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.adl-chip {
    font-size: 0.64rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
    border: 1px solid currentColor; line-height: 1.5; white-space: nowrap;
}
.adl-chip-done { color: #22c55e; }
.adl-chip-fail { color: #ef4444; }
.adl-chip-active { color: rgb(var(--accent-rgb)); }
.adl-chip-queued { color: rgba(255, 255, 255, 0.4); }
.adl-batch-eta { font-size: 0.66rem; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }

/* "Now downloading" line */
.adl-batch-card-now {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
    font-size: 0.68rem; color: rgba(255, 255, 255, 0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adl-batch-now-icon { color: rgb(var(--accent-rgb)); font-weight: 700; }

/* Expand chevron affordance */
.adl-batch-card-chevron {
    display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, color 0.2s ease;
}
.adl-batch-card:hover .adl-batch-card-chevron { color: rgba(255, 255, 255, 0.55); }
.adl-batch-card.expanded .adl-batch-card-chevron { transform: rotate(180deg); }

/* Phase tints — subtle whole-card cue */
.adl-batch-card.phase-complete { opacity: 0.82; }
.adl-batch-card.phase-error,
.adl-batch-card.phase-cancelled { opacity: 0.7; }

/* Polished empty state */
.adl-batch-empty-icon { color: rgb(var(--accent-rgb)); opacity: 0.4; margin-bottom: 8px; }
.adl-batch-empty-title { font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.adl-batch-empty-sub { font-size: 0.7rem; margin-top: 3px; color: rgba(255, 255, 255, 0.4); }
.adl-batch-empty-links { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.adl-batch-empty-links a {
    font-size: 0.72rem; font-weight: 600; color: rgb(var(--accent-rgb)); text-decoration: none;
    padding: 4px 10px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 8px;
    transition: background 0.15s ease;
}
.adl-batch-empty-links a:hover { background: rgba(var(--accent-rgb), 0.12); }

/* Expanded tracks list */
.adl-batch-tracks {
    display: none;
    margin-top: 10px;
    /* right padding keeps the nested scrollbar off the track text */
    padding: 8px 8px 2px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.adl-batch-tracks::-webkit-scrollbar { width: 6px; }
.adl-batch-tracks::-webkit-scrollbar-track { background: transparent; }
.adl-batch-tracks::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 3px; }
.adl-batch-tracks::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }

.adl-batch-card.expanded .adl-batch-tracks {
    display: block;
}

/* Clickable batch name */
.adl-batch-card-link {
    cursor: pointer;
    transition: color 0.15s;
}

.adl-batch-card-link:hover {
    color: rgba(var(--accent-rgb), 1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.adl-batch-track-row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    column-gap: 10px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 0.76rem;
    transition: background 0.12s ease;
}
.adl-batch-track-row:hover { background: rgba(255, 255, 255, 0.04); }

.adl-batch-track-idx {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.28);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.adl-batch-track-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.adl-batch-track-title {
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-batch-track-sub {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-batch-track-state {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Row-state coloring (class from _adlStatusClass) */
.adl-batch-track-row.completed .adl-batch-track-state { color: #22c55e; }
.adl-batch-track-row.completed .adl-batch-track-idx { color: rgba(34, 197, 94, 0.45); }
.adl-batch-track-row.failed .adl-batch-track-state { color: #ef4444; }
.adl-batch-track-row.active .adl-batch-track-state { color: rgb(var(--accent-rgb)); }
.adl-batch-track-row.queued .adl-batch-track-title { color: rgba(255, 255, 255, 0.5); }
.adl-batch-track-row.cancelled .adl-batch-track-title { color: rgba(255, 255, 255, 0.4); text-decoration: line-through; }

.adl-batch-release-note {
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* Per-track progress — spans the full row width under a downloading track */
.adl-batch-track-progress {
    grid-column: 1 / -1;
    height: 2px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 1px;
    overflow: hidden;
}

.adl-batch-track-progress-fill {
    height: 100%;
    background: rgba(var(--accent-rgb), 0.8);
    border-radius: 1px;
    transition: width 0.4s ease;
}

/* Thumbnail fallback (initial letter) */
.adl-batch-card-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
}

/* Batch filter banner above download list */
.adl-batch-filter-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.adl-filter-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.adl-filter-banner-clear {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    padding: 2px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.15s;
}

.adl-filter-banner-clear:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* History source color dot */
.adl-batch-history-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Completed batch cards fade via inline opacity from JS */
.adl-batch-card {
    transition: all 0.2s ease, opacity 0.5s ease;
}

/* Batch history section */
.adl-batch-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.adl-batch-history-header:hover {
    color: rgba(255, 255, 255, 0.6);
}

.adl-batch-history-chevron {
    transition: transform 0.2s;
}

.adl-batch-history-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adl-batch-history-section.expanded .adl-batch-history-chevron {
    transform: rotate(180deg);
}

.adl-batch-history-list {
    display: none;
}

.adl-batch-history-section.expanded .adl-batch-history-list {
    display: block;
}

.adl-batch-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.adl-batch-history-name {
    flex: 1;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adl-batch-history-stats {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.adl-batch-history-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
    .adl-layout {
        flex-direction: column;
        padding: 20px 16px;
    }

    .adl-batch-panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 16px 12px 0 0;
        margin-left: 0;
        margin-top: 16px;
        max-height: 300px;
        position: static;
    }
}

@media (max-width: 600px) {
    .adl-layout {
        padding: 16px 12px;
    }

    .adl-controls {
        flex-direction: column;
        align-items: flex-start;
    }

    .adl-filter-pills {
        flex-wrap: wrap;
    }

    .adl-row-art {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .adl-row-status {
        min-width: 70px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD LIBRARY STATUS CARD
   ═══════════════════════════════════════════════════════════════════ */

.library-status-card {
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.95) 0%,
        rgba(14, 14, 14, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.library-status-card:hover {
    border-color: rgba(var(--accent-rgb), 0.15);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(var(--accent-rgb), 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Accent top line */
.library-status-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.3) 20%,
        rgba(var(--accent-rgb), 0.6) 50%,
        rgba(var(--accent-rgb), 0.3) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Animated background glow */
.library-status-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}

.library-status-card.has-data .library-status-glow {
    opacity: 1;
}

.library-status-card.has-data::before {
    opacity: 1;
}

.library-status-card.needs-setup {
    border-color: rgba(255, 193, 7, 0.15);
}

.library-status-card.needs-setup::before {
    background: linear-gradient(90deg,
        transparent, rgba(255, 193, 7, 0.4), rgba(255, 193, 7, 0.6), rgba(255, 193, 7, 0.4), transparent);
    opacity: 1;
}

.library-status-card.needs-setup .library-status-glow {
    background: radial-gradient(circle, rgba(255, 193, 7, 0.05) 0%, transparent 70%);
    opacity: 1;
}

.library-status-card.empty-library::before {
    background: linear-gradient(90deg,
        transparent, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.4), transparent);
    opacity: 1;
}

.library-status-card.empty-library .library-status-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    opacity: 1;
}

.library-status-card.scanning::before {
    opacity: 1;
    animation: scanPulse 2s ease-in-out infinite;
}

.library-status-card.scanning .library-status-glow {
    opacity: 1;
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.library-status-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.library-status-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.05));
    color: rgb(var(--accent-rgb));
    flex-shrink: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.1);
}

.library-status-card.needs-setup .library-status-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.1);
}

.library-status-card.empty-library .library-status-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.1);
}

.library-status-info {
    flex: 1;
    min-width: 0;
}

.library-status-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.2px;
}

.library-status-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 2px 0 0 0;
    font-weight: 500;
}

.library-status-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.library-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-light-rgb));
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.library-status-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
}

.library-status-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.library-status-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
}

.library-status-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.8);
}

.library-status-btn.scanning {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.library-status-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.library-status-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.2s;
}

.library-status-stat:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.library-status-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.08);
    color: rgba(var(--accent-rgb), 0.7);
    flex-shrink: 0;
}

.library-status-stat-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.library-status-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.1;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Keep values like "1.8 MB" on one line so this tile's baseline matches
       the single-line sibling tiles (2 / 12 / ...) (D5). */
    white-space: nowrap;
}

.library-status-stat-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.library-status-progress {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.library-status-phase {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-bottom: 8px;
}

.library-status-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.library-status-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
    position: relative;
}

.library-status-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    animation: barShimmer 2s ease-in-out infinite;
}

@keyframes barShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.library-status-progress-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 6px;
    text-align: right;
}

.library-status-message {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.library-status-message a,
.library-status-message span.link {
    color: rgb(var(--accent-light-rgb));
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

.library-status-message a:hover,
.library-status-message span.link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .library-status-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .library-status-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .library-status-actions {
        width: 100%;
    }

    .library-status-btn {
        flex: 1;
        justify-content: center;
    }

    .library-status-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .library-status-stat-value {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD TOOLS LINK CARD
   ═══════════════════════════════════════════════════════════════════ */

.dashboard-tools-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-tools-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(var(--accent-rgb), 0.15);
    transform: translateY(-1px);
}

.dashboard-tools-link-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-tools-link-title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   TOOLS PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* .tools-page-container: card styling now from .page-shell (no extras). */

.tools-page-header {
    padding: 20px 24px 18px;
    margin: -28px -24px 24px -24px;
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb), 0.08) 0%,
        rgba(var(--accent-rgb), 0.03) 40%,
        transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    position: relative;
}

.tools-page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.2) 20%,
        rgba(var(--accent-rgb), 0.35) 50%,
        rgba(var(--accent-rgb), 0.2) 80%,
        transparent 100%);
}

.tools-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tools-page-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 6px 0 0 0;
    font-weight: 500;
}

/* ── Library Maintenance hero section ── */
.tools-maintenance-hero {
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.95) 0%,
        rgba(12, 12, 12, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 28px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.tools-maintenance-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.5),
        rgba(var(--accent-rgb), 0.8),
        rgba(var(--accent-rgb), 0.5),
        transparent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.tools-maintenance-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.tools-maintenance-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tools-maintenance-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tools-maintenance-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px 0;
    letter-spacing: -0.3px;
}

.tools-maintenance-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    font-weight: 500;
}

/* ── The maintenance surface: one scroll, four sections ──
   The three tabs are gone. The hero itself is the scroll container so the
   section nav can stick to the top of it — and so the page below (the tool
   cards) stays reachable however much maintenance work is outstanding. */
.tools-maintenance-hero {
    max-height: min(84vh, 1040px);
    overflow: hidden auto;
    scroll-behavior: smooth;
}

.repair-section-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 6px;
    padding: 8px 0;
    margin-bottom: 14px;
    background: #17171b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.repair-section-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.repair-section-link:hover {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.repair-section {
    margin-top: 26px;
    scroll-margin-top: 52px;   /* clear the sticky nav when jumped to */
}

.repair-section-title {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* ── Library health hero ── */
.repair-health {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), 0.09), transparent 60%),
        rgba(255, 255, 255, 0.02);
    scroll-margin-top: 52px;
}

.repair-health-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 96px;
}

.repair-health-score {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #fff 20%, rgba(255, 255, 255, 0.55) 50%, #fff 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: page-title-shimmer 6s ease-in-out infinite;
}

.repair-health-band {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.repair-health-band.healthy { color: #22c55e; }
.repair-health-band.attention { color: #f59e0b; }
.repair-health-band.unhealthy { color: #f44336; }

.repair-health-body {
    flex: 1 1 320px;
    min-width: 0;
}

.repair-health-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 9px;
}

/* Each segment is one finding type, sized by its WEIGHTED share — otherwise
   three corrupt files vanish behind four hundred missing covers. */
.repair-health-bar {
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.repair-health-seg {
    min-width: 6px;
    height: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}

.repair-health-seg:hover { filter: brightness(1.35); }
.repair-health-seg.error { background: #f44336; }
.repair-health-seg.warning { background: #f59e0b; }
.repair-health-seg.info { background: rgba(var(--accent-rgb), 0.45); }

.repair-health-bar-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.repair-health-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.repair-health-fix-safe {
    padding: 7px 15px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}

.repair-health-fix-safe:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.24); }
.repair-health-fix-safe:disabled { opacity: 0.35; cursor: default; }

.repair-health-actions-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.repair-health-trend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(var(--accent-rgb), 0.7);
}

.repair-health-trend-label {
    font-size: 10px;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.25);
}

/* ── Status segmented control ── */
.repair-status-segments {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.repair-status-seg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.repair-status-seg:hover { color: #fff; }

.repair-status-seg.active {
    background: rgba(var(--accent-rgb), 0.14);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3);
}

.repair-status-seg-count {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.35);
}

.repair-status-seg.active .repair-status-seg-count { color: rgba(255, 255, 255, 0.75); }

.repair-findings-search {
    flex: 1 1 180px;
    min-width: 140px;
    padding: 6px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 12px;
}

.repair-findings-search::placeholder { color: rgba(255, 255, 255, 0.28); }

.repair-search-note {
    padding: 9px 13px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.07);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

/* ── The findings inbox ── */
.repair-inbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.repair-inbox-group {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    scroll-margin-top: 60px;
    transition: border-color 0.15s, background 0.15s;
}

.repair-inbox-group.critical { border-left-color: #f44336; }
.repair-inbox-group.warning { border-left-color: #f59e0b; }
.repair-inbox-group.info { border-left-color: rgba(var(--accent-rgb), 0.5); }
.repair-inbox-group.open { background: rgba(255, 255, 255, 0.035); }

.repair-inbox-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    cursor: pointer;
}

.repair-inbox-head:hover { background: rgba(255, 255, 255, 0.02); }

.repair-inbox-sev {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.repair-inbox-count {
    min-width: 58px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
    color: #fff;
    flex-shrink: 0;
}

.repair-inbox-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.repair-inbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.repair-inbox-risk {
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(244, 67, 54, 0.3);
    background: rgba(244, 67, 54, 0.1);
    color: #f88;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.repair-inbox-blurb {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repair-inbox-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.repair-inbox-btn {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.13);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s;
}

.repair-inbox-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.22); }
.repair-inbox-btn:disabled { opacity: 0.35; cursor: default; }

/* Destructive verbs are outlined, not filled — they should never be the
   most clickable thing in the row. */
.repair-inbox-btn.destructive {
    border-color: rgba(244, 67, 54, 0.4);
    background: rgba(244, 67, 54, 0.08);
    color: #ffb3ad;
}

.repair-inbox-btn.destructive:hover:not(:disabled) { background: rgba(244, 67, 54, 0.16); }

.repair-inbox-btn.ghost {
    border-color: rgba(255, 255, 255, 0.1);
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
}

.repair-inbox-btn.ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.repair-inbox-expand {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 10px;
    cursor: pointer;
    transition: transform 0.18s, color 0.15s;
}

.repair-inbox-expand:hover { color: #fff; }
.repair-inbox-expand.open { transform: rotate(180deg); color: #fff; }

/* The open group hosts the finding list, bounded so the inbox below it
   stays reachable without scrolling past hundreds of rows. */
.repair-inbox-body {
    max-height: 480px;
    overflow-y: auto;
    padding: 0 15px 14px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.repair-list-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 0;
}

.repair-list-controls select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
}

.repair-list-controls select option { background: #1a1a1a; }

/* A run in flight sits at surface level, above the inbox — it belongs to the
   library, not to whichever group happens to be open. */
.repair-findings-bulk.running {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    margin-bottom: 12px;
    border-radius: 9px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--accent-rgb), 0.09);
}

.repair-finding-btn.reopen {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.repair-finding-btn.reopen:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── Tool sections as containers ──
   Same chassis as the maintenance job families: a glow edge, a header that
   explains itself, and a grid inside. Eleven identical boxes in a row was
   what made the strip read as filler. */
.tools-container {
    --tile-glow: 148, 163, 184;
    position: relative;
    padding: 13px 14px 15px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background:
        radial-gradient(90% 120% at 0% 0%, rgba(var(--tile-glow), 0.06), transparent 55%),
        rgba(255, 255, 255, 0.012);
    overflow: hidden;
}

.tools-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--tile-glow), 0.5),
        rgba(var(--tile-glow), 0.8),
        rgba(var(--tile-glow), 0.5),
        transparent);
}

.tools-container-head {
    display: flex;
    align-items: baseline;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tools-container .tools-section-title { margin: 0; }

.tools-container-blurb {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.28);
}

/* A modal-opener is not the same kind of thing as the Database Updater, and
   giving it the same footprint is what made them all look alike. */
.tool-card--launcher {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.015);
}

.tool-card--launcher .tool-card-info {
    font-size: 11px;
    opacity: 0.75;
}

.tool-card--launcher:hover { border-style: solid; border-color: rgba(var(--tile-glow), 0.35); }

/* ── Operations: families of job tiles ──
   Thirty identical stacked cards had no order and no organisation. Each
   family is a container carrying its own glow, on the same chassis the
   arcade tiles and dashboard orbs use. */
.repair-families {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.repair-family {
    --tile-glow: 148, 163, 184;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background:
        radial-gradient(90% 120% at 0% 0%, rgba(var(--tile-glow), 0.07), transparent 55%),
        rgba(255, 255, 255, 0.015);
    padding: 13px 14px 15px 14px;
    position: relative;
    overflow: hidden;
}

.repair-family::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--tile-glow), 0.55),
        rgba(var(--tile-glow), 0.85),
        rgba(var(--tile-glow), 0.55),
        transparent);
}

.repair-family-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.repair-family-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.1px;
    flex-shrink: 0;
}

.repair-family-summary {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repair-family-pending {
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(var(--tile-glow), 0.16);
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.repair-family-chevron {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.18s;
    flex-shrink: 0;
}

.repair-family-chevron.open { transform: rotate(180deg); }

.repair-family-blurb {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.28);
    margin: 5px 0 0 0;
}

.repair-family.collapsed .repair-family-blurb { margin-bottom: 0; }

.repair-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 11px;
    margin-top: 12px;
}

/* ── One job tile ── */
.repair-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.repair-tile:hover { border-color: rgba(var(--tile-glow), 0.35); }
.repair-tile.off { opacity: 0.55; }
.repair-tile.sched-overdue { border-color: rgba(245, 158, 11, 0.3); }

/* The glow edge IS the progress bar: a family-coloured hairline at rest,
   filling left-to-right while the job scans. */
.repair-tile-edge {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(var(--tile-glow), 0.25),
        rgba(var(--tile-glow), 0.55));
    opacity: 0.55;
    transition: width 0.4s ease, opacity 0.3s;
}

.repair-tile-edge.running {
    opacity: 1;
    background: linear-gradient(90deg,
        rgba(var(--tile-glow), 0.7),
        rgba(var(--tile-glow), 1));
    box-shadow: 0 0 10px rgba(var(--tile-glow), 0.55);
}

.repair-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.repair-tile-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repair-tile-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.13);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
}

.repair-tile-badge:hover { background: rgba(var(--accent-rgb), 0.24); }

.repair-tile-badge.historical {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
}

.repair-tile-desc {
    font-size: 11px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.38);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repair-tile-schedule {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

/* The cadence is a control, not a label — it was the thing users could not
   find, buried in a gear as a bare "Interval (hours)" box. */
.repair-tile-cadence {
    padding: 3px 9px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.repair-tile-cadence:hover {
    border-style: solid;
    border-color: rgba(var(--tile-glow), 0.5);
    color: #fff;
    background: rgba(var(--tile-glow), 0.1);
}

.repair-tile-cadence-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.repair-tile-cadence-edit input,
.repair-tile-cadence-edit select {
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 11px;
}

.repair-tile-cadence-edit input { width: 52px; }
.repair-tile-cadence-edit select option { background: #1a1a1a; }

.repair-tile-cadence-save,
.repair-tile-cadence-cancel {
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.repair-tile-cadence-save {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.16);
    color: #fff;
}

.repair-tile-cadence-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
}

.repair-tile-cadence-cancel:hover { color: #fff; }

.repair-tile-next {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.repair-tile-next.overdue { color: #f59e0b; font-weight: 600; }
.repair-tile-next.due { color: rgba(var(--accent-rgb), 0.9); font-weight: 600; }
.repair-tile-next.running { color: #22c55e; font-weight: 600; }
.repair-tile-next.disabled { color: rgba(255, 255, 255, 0.22); }

.repair-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.repair-tile-trend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    cursor: help;
}

.repair-tile-spark { color: rgba(var(--tile-glow), 0.65); flex-shrink: 0; }

.repair-tile-trend-label {
    font-size: 9px;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
}

.repair-tile-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repair-tile .repair-job-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* ── Recent runs ── */
.repair-runs-card {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.repair-runs-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.015);
}

.repair-runs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.repair-runs-chip,
.repair-runs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.repair-runs-chip:hover,
.repair-runs-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.repair-runs-chip.active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.35);
}

/* A job with a failed run in the window says so before you click it. */
.repair-runs-chip.has-failure { border-color: rgba(244, 67, 54, 0.35); }
.repair-runs-chip.has-failure::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f44336;
}

.repair-runs-toggle.active {
    color: #ffb3ad;
    background: rgba(244, 67, 54, 0.12);
    border-color: rgba(244, 67, 54, 0.35);
}

.repair-runs-chip-count {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.35);
}

.repair-runs-chip.active .repair-runs-chip-count { color: rgba(255, 255, 255, 0.7); }

.repair-runs-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.repair-runs-refresh {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    cursor: pointer;
}

.repair-runs-refresh:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Day headings are what give a log a shape — "nine today, four yesterday,
   none since" is a rhythm you can read; fifty undifferentiated rows are not. */
.repair-runs-day-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px 6px 13px;
}

.repair-runs-day-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.repair-runs-day-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.22);
}

.repair-runs-day-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.repair-run {
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.repair-run-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 13px;
    cursor: pointer;
    transition: background 0.12s;
}

.repair-run-head:hover { background: rgba(255, 255, 255, 0.03); }
.repair-run.open .repair-run-head { background: rgba(255, 255, 255, 0.035); }

.repair-run-glyph {
    width: 18px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
}

.repair-run-glyph.success { color: #22c55e; }
.repair-run-glyph.quiet { color: rgba(255, 255, 255, 0.25); }
.repair-run-glyph.failed { color: #f44336; }
.repair-run-glyph.running { color: rgba(var(--accent-rgb), 0.9); }

.repair-run-clock {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    min-width: 46px;
}

.repair-run-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    min-width: 170px;
}

.repair-run-summary {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repair-run.failed .repair-run-summary { color: #f88; }

.repair-run-age {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.repair-run-chevron {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: transform 0.18s;
}

.repair-run-chevron.open { transform: rotate(180deg); color: #fff; }

.repair-run-detail {
    padding: 4px 13px 14px 42px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.repair-run-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.repair-run-counter {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.repair-run-counter-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.repair-run-counter-label {
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.repair-run-error {
    border: 1px solid rgba(244, 67, 54, 0.25);
    border-radius: 8px;
    background: rgba(244, 67, 54, 0.06);
    padding: 9px 11px;
}

.repair-run-error-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #f88;
    margin-bottom: 5px;
}

.repair-run-error-text {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
}

.repair-run-error-text.muted {
    font-family: inherit;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.repair-run-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.repair-run-stamps {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}

.repair-run-link {
    border: none;
    background: none;
    padding: 0;
    color: rgba(var(--accent-rgb), 0.85);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.repair-run-link:hover { color: #fff; text-decoration: underline; }


/* ── Tool card sections ── */
.tools-section {
    margin-bottom: 24px;
}

.tools-section-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 12px 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 768px) {
    .tools-page-container {
        padding: 16px;
        margin: 10px;
        border-radius: 16px;
    }

    .tools-page-header {
        padding: 16px;
        margin: -16px -16px 16px -16px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .tools-page-title {
        font-size: 22px;
    }

    .tools-maintenance-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   WATCHLIST PAGE
   ═══════════════════════════════════════════════════════════════════ */

.watchlist-page-container {
    /* card styling from .page-shell; keep page-specific positioning */
    position: relative;
}

/* ── Header ── */
.watchlist-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 18px;
    margin: -28px -24px 20px -24px;
    background: linear-gradient(180deg,
        rgba(255, 193, 7, 0.08) 0%,
        rgba(255, 193, 7, 0.03) 40%,
        transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    position: relative;
}

.watchlist-page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 193, 7, 0.2) 20%,
        rgba(255, 193, 7, 0.35) 50%,
        rgba(255, 193, 7, 0.2) 80%,
        transparent 100%);
}

.watchlist-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.watchlist-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.watchlist-page-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.watchlist-page-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.watchlist-page-count {
    color: rgba(255, 193, 7, 0.8);
    font-weight: 600;
}

.watchlist-page-timer {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Action buttons ── */
.watchlist-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0 4px;
}

/* .watchlist-action-btn* migrated to the shared .btn / .btn--primary /
   .btn--secondary / .btn--danger primitive (watchlist + wishlist headers).
   The .watchlist-batch-remove-btn / .wishlist-batch-remove-btn hook classes
   are kept on those buttons for their own overrides. */

/* ── Scan status card ── */
.watchlist-page-scan-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.95) 0%,
        rgba(12, 12, 12, 0.98) 100%);
    border-radius: 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

.watchlist-page-scan-status::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.watchlist-page-scan-status:has(.watchlist-live-activity[style*="flex"])::before {
    opacity: 1;
    animation: scanPulse 2s ease-in-out infinite;
}

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

/* ── Last scan summary strip ── */
.watchlist-last-scan-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg,
        rgba(255, 193, 7, 0.06) 0%,
        rgba(255, 152, 0, 0.03) 100%);
    border: 1px solid rgba(255, 193, 7, 0.1);
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.watchlist-last-scan-strip svg {
    color: rgba(255, 193, 7, 0.6);
    flex-shrink: 0;
}

/* ── Toolbar (search + sort) ── */
.watchlist-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 4px;
}

.watchlist-toolbar .watchlist-search-container {
    flex: 1;
    margin-bottom: 0;
}

.watchlist-sort-select {
    padding: 10px 32px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    white-space: nowrap;
}

.watchlist-sort-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.watchlist-sort-select:focus {
    border-color: rgba(255, 193, 7, 0.4);
    outline: none;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.1);
}

.watchlist-sort-select option {
    background: #1a1a1a;
    color: #fff;
}

/* ── Search bar (page-level) ── */
.watchlist-page-container .watchlist-search-container {
    margin-bottom: 16px;
    padding: 0;
    position: relative;
}

.watchlist-page-container .watchlist-search-input {
    width: 100%;
    padding: 12px 20px 12px 44px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.watchlist-page-container .watchlist-search-input:focus {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.12);
    outline: none;
}

.watchlist-page-container .watchlist-search-icon {
    left: 20px;
}

/* ── Artist grid (page-level) ── */
.watchlist-page-container .watchlist-artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 4px;
}

/* ── Artist cards upgrade ── */
.watchlist-page-container .watchlist-artist-card {
    background: linear-gradient(135deg,
        rgba(26, 26, 26, 0.95) 0%,
        rgba(18, 18, 18, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    contain: none;
}

.watchlist-page-container .watchlist-artist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.watchlist-page-container .watchlist-artist-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 193, 7, 0.15);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 193, 7, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.watchlist-page-container .watchlist-artist-card:hover::before {
    opacity: 1;
}

/* ── Batch bar ── */
.watchlist-page-container .watchlist-batch-bar {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 16px;
}

/* ── Override banner ── */
.watchlist-page-container .watchlist-global-override-banner {
    background: linear-gradient(135deg,
        rgba(255, 193, 7, 0.08) 0%,
        rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 193, 7, 0.15);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: rgba(255, 193, 7, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Empty state ── */
.watchlist-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.watchlist-page-empty-icon {
    opacity: 0.15;
    margin-bottom: 8px;
}

.watchlist-page-empty h3 {
    margin: 12px 0 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.watchlist-page-empty p {
    margin: 0 0 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 360px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST PAGE
   ═══════════════════════════════════════════════════════════════════ */

.wishlist-page-container {
    /* card styling from .page-shell; keep page-specific positioning */
    position: relative;
}

/* ── Header ── */
.wishlist-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 18px;
    margin: -28px -24px 24px -24px;
    background: linear-gradient(180deg,
        rgba(var(--accent-rgb), 0.08) 0%,
        rgba(var(--accent-rgb), 0.03) 40%,
        transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    position: relative;
}

.wishlist-page-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.2) 20%,
        rgba(var(--accent-rgb), 0.35) 50%,
        rgba(var(--accent-rgb), 0.2) 80%,
        transparent 100%);
}

.wishlist-page-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Wishlist actions live in a left-aligned row below the header, matching
   its sibling Watchlist page (.watchlist-page-actions) instead of sitting
   inside the header top-right (WL1). */
.wishlist-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0 4px;
}

.wishlist-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.wishlist-page-title-icon {
    font-size: 26px;
}

.wishlist-page-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.wishlist-page-count {
    color: rgb(var(--accent-light-rgb));
    font-weight: 600;
}

.wishlist-page-timer {
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Stats strip ── */
.wishlist-stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 14px 24px;
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.95) 0%,
        rgba(12, 12, 12, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wishlist-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 32px;
}

.wishlist-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.wishlist-stat-value.wishlist-stat-cycle {
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--accent-light-rgb));
}

.wishlist-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.wishlist-stat-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
}

/* ── Track search ── */
.wishlist-track-search-container {
    position: relative;
    margin-bottom: 12px;
}

.wishlist-track-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.wishlist-track-search-input {
    width: 100%;
    padding: 9px 16px 9px 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    box-sizing: border-box;
}

.wishlist-track-search-input:focus {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
    outline: none;
}

.wishlist-track-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST NEBULA
   ═══════════════════════════════════════════════════════════════════ */
.wl-nebula { position: relative; }
/* ── Wishlist LIST view — the nebula's operational twin. Same data, same
   actions, sortable rows with retry status visible. ── */
.wl-view-toggle { display: inline-flex; gap: 6px; margin-left: 4px; }
.wl-list { display: flex; flex-direction: column; gap: 0; padding: 4px 2px 20px;
    max-width: 1500px; margin: 0 auto; width: 100%; }
.wl-list-sortbar { display: flex; gap: 8px; margin-bottom: 14px; justify-content: space-between; }
.wl-list-sorts { display: flex; gap: 8px; }
.wl-list-sep { cursor: pointer; }
.wl-list-sep:hover { background: rgba(255,255,255,0.04); }
.wl-list-chevron { font-size: 11px; color: rgba(255,255,255,0.35); transition: transform 0.18s ease; }
.wl-list-chevron.open { transform: rotate(90deg); }
.wl-list-section { display: flex; flex-direction: column; }
.wl-list-sep { display: flex; align-items: center; gap: 10px; padding: 14px 10px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px;
    position: sticky; top: 0; background: rgba(11,11,15,0.92); backdrop-filter: blur(6px); z-index: 2; }
.wl-list-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
.wl-list-avatar--ph { display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); font-size: 16px; }
.wl-list-artist-name { background: none; border: none; padding: 0; cursor: pointer;
    font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.wl-list-artist-name:hover { color: rgb(var(--accent-light-rgb, var(--accent-rgb))); }
.wl-list-artist-meta { font-size: 12px; color: rgba(255,255,255,0.45); }
.wl-list-failing-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.35); color: #fbbf24; }
.wl-list-album-x { background: none; border: none; color: rgba(255,255,255,0.25);
    font-size: 10px; cursor: pointer; padding: 2px 4px; margin-left: 4px; border-radius: 4px;
    opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; }
.wl-list-track:hover .wl-list-album-x { opacity: 1; }
.wl-list-album-x:hover { color: #f87171; }
.wl-list-cover { width: 38px; height: 38px; border-radius: 5px; object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.wl-list-cover--ph { display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3); font-size: 13px; }
.wl-list-track { display: grid; grid-template-columns: 38px minmax(0, 1fr) 92px 130px auto;
    gap: 14px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13px;
    transition: background 0.15s ease; }
.wl-list-track-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wl-list-track:hover { background: rgba(255,255,255,0.05); }
.wl-list-track--failing { box-shadow: inset 2px 0 0 #fbbf24; border-radius: 4px 8px 8px 4px; }
.wl-list-track-name { color: rgba(255,255,255,0.92); font-weight: 500; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.wl-list-track-album { color: rgba(255,255,255,0.42); font-size: 11.5px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.wl-list-tries { font-size: 11.5px; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-list-tries--failing { color: #fbbf24; font-weight: 600; }
.wl-list-last { font-size: 11.5px; color: rgba(255,255,255,0.35); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.wl-list-track-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0;
    transition: opacity 0.15s ease; }
.wl-list-track:hover .wl-list-track-actions, .wl-list-album-head .wl-list-btn { opacity: 1; }
@media (hover: none) { .wl-list-track-actions { opacity: 0.7; } }
.wl-list-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 3px 9px; font-size: 11px; color: rgba(255,255,255,0.65);
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.wl-list-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.wl-list-btn--x:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
@media (max-width: 700px) {
    .wl-list-track { grid-template-columns: 38px 1fr 80px auto; }
    .wl-list-last { display: none; }
    .wl-list-album { margin-left: 0; }
}

.wl-nebula-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.wl-nebula-search { flex: 1; min-width: 200px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.03); color: #fff; font-size: 13px; transition: all 0.2s; box-sizing: border-box; }
.wl-nebula-search:focus { border-color: rgba(var(--accent-rgb),0.4); background: rgba(255,255,255,0.05); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.1); outline: none; }
.wl-nebula-search::placeholder { color: rgba(255,255,255,0.25); }
.wl-nebula-bar-actions { display: flex; gap: 8px; }

.wl-nebula-field { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 10px 0 30px; }
.wl-nebula-empty { width: 100%; text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.2); font-size: 14px; }

/* ── Orb group ── */
.wl-orb-group { display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; }
.wl-orb-group.expanded { background: rgba(255,255,255,0.02); border-radius: 16px; padding: 16px; box-shadow: 0 0 30px rgba(0,0,0,0.3); z-index: 5; flex-basis: 100%; max-width: 800px; }

/* ── Orb ── */
.wl-orb { position: relative; border-radius: 50%; cursor: pointer; overflow: hidden; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
.wl-orb.orb-sm { width: 70px; height: 70px; }
.wl-orb.orb-md { width: 90px; height: 90px; }
.wl-orb.orb-lg { width: 110px; height: 110px; }
.wl-orb:hover { transform: scale(1.1); }
.wl-orb-group.expanded .wl-orb { transform: scale(1.05); }

.wl-orb-glow { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, hsla(var(--orb-hue),70%,55%,0.4), hsla(calc(var(--orb-hue)+60),70%,55%,0.2), hsla(var(--orb-hue),70%,55%,0.4)); animation: orbGlowSpin 8s linear infinite; z-index: 0; filter: blur(3px); }
@keyframes orbGlowSpin { to { transform: rotate(360deg); } }

.wl-orb-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
.wl-orb-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: hsla(var(--orb-hue),70%,75%,0.9); background: hsla(var(--orb-hue),40%,15%,0.9); border-radius: 50%; position: relative; z-index: 1; }
.wl-orb-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid hsla(var(--orb-hue),60%,50%,0.3); z-index: 2; pointer-events: none; }
.wl-orb-group.expanded .wl-orb-ring { border-color: hsla(var(--orb-hue),70%,60%,0.6); box-shadow: 0 0 16px hsla(var(--orb-hue),70%,50%,0.3); }

/* Enhancement 2: hover tooltip */
.wl-orb-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(10,10,10,0.95);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 20;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.wl-orb-tooltip span { font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.45); }
.wl-orb-group:not(.expanded):hover .wl-orb-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.wl-orb-group.expanded .wl-orb-tooltip { display: none; }

/* Enhancement 3: pulse for next-in-queue */
.wl-orb.orb-pulse .wl-orb-glow { animation: orbGlowSpin 8s linear infinite, orbPulse 2.5s ease-in-out infinite; }
@keyframes orbPulse { 0%,100% { filter: blur(3px) brightness(1); } 50% { filter: blur(5px) brightness(1.4); } }

/* Enhancement 5: album art ring */
.wl-orb-art-ring { position: absolute; inset: -16px; border-radius: 50%; z-index: 0; pointer-events: none; animation: artRingSpin 30s linear infinite; }
.wl-art-ring-item { position: absolute; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; top: 50%; left: 50%; transform: rotate(var(--ring-angle)) translateY(-50%) translateX(calc(var(--ring-radius, 48px))); opacity: 0.5; border: 1px solid rgba(255,255,255,0.1); transition: opacity 0.3s; }
.wl-orb.orb-sm .wl-orb-art-ring { --ring-radius: 44px; }
.wl-orb.orb-md .wl-orb-art-ring { --ring-radius: 54px; }
.wl-orb.orb-lg .wl-orb-art-ring { --ring-radius: 66px; }
.wl-orb:hover .wl-art-ring-item { opacity: 0.85; }
@keyframes artRingSpin { to { transform: rotate(360deg); } }

/* ── Live processing state ── */
.nebula-processing .wl-orb-group.orb-processing .wl-orb {
    animation: processingOrbPulse 3s ease-in-out infinite !important;
}
@keyframes processingOrbPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.03); filter: brightness(1.1); }
}

.nebula-processing .wl-orb-group.orb-processing .wl-orb-ring {
    border-color: rgb(var(--accent-rgb)) !important;
    border-width: 3px !important;
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6), 0 0 40px rgba(var(--accent-rgb), 0.3), 0 0 60px rgba(var(--accent-rgb), 0.1) !important;
    animation: processingRing 1.5s ease-in-out infinite !important;
}
@keyframes processingRing {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6), 0 0 40px rgba(var(--accent-rgb), 0.3); }
    50% { box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.8), 0 0 50px rgba(var(--accent-rgb), 0.4), 0 0 70px rgba(var(--accent-rgb), 0.15); }
}

.nebula-processing .wl-orb-group.orb-processing .wl-orb-glow {
    filter: blur(6px) brightness(1.8) !important;
    opacity: 0.9 !important;
}

.nebula-processing .wl-orb-group.orb-processing .wl-orb-label {
    color: rgb(var(--accent-light-rgb));
}

.nebula-processing .wl-orb-group.orb-processing .wl-orb-meta {
    color: rgba(var(--accent-rgb), 0.6);
}

/* Enhancement 7: staggered entry animation */
.wl-orb-group { animation: orbEntrance 0.5s ease backwards; }
@keyframes orbEntrance { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }

.wl-orb-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); text-align: center; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 0.15s; }
.wl-orb-label:hover { color: rgb(var(--accent-light-rgb)); text-decoration: underline; }
.wl-orb-meta { font-size: 9px; color: rgba(255,255,255,0.3); text-align: center; }

/* ── Expanded ── */
.wl-orb-expanded { display: none; width: 100%; margin-top: 10px; }
.wl-orb-group.expanded .wl-orb-expanded { display: block; animation: expandFadeIn 0.3s ease; }
@keyframes expandFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Album fan (expanded) ── */
.wl-album-fan {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
    align-items: flex-start;
}

.wl-album-tile {
    position: relative;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
    cursor: default;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    animation: tileAppear 0.3s ease backwards;
}

.wl-album-tile:nth-child(1) { animation-delay: 0s; }
.wl-album-tile:nth-child(2) { animation-delay: 0.05s; }
.wl-album-tile:nth-child(3) { animation-delay: 0.1s; }
.wl-album-tile:nth-child(4) { animation-delay: 0.15s; }
.wl-album-tile:nth-child(5) { animation-delay: 0.2s; }
.wl-album-tile:nth-child(n+6) { animation-delay: 0.25s; }

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

.wl-album-tile:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 0 12px rgba(var(--accent-rgb), 0.15);
}

.wl-album-tile-art {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(30,30,30,1), rgba(20,20,20,1));
}

.wl-album-tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wl-album-tile-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; opacity: 0.2;
}

.wl-album-tile-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 8px 6px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

.wl-album-tile-name {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.wl-album-tile-badge {
    position: absolute;
    top: 5px; right: 5px;
    background: rgba(0,0,0,0.7);
    color: rgba(255,255,255,0.8);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

.wl-album-tile-count {
    font-size: 9px;
    color: rgba(255,255,255,0.4);
}

.wl-album-tile-remove {
    position: absolute;
    top: 5px; left: 5px;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.8);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
}

.wl-album-tile:hover .wl-album-tile-remove { opacity: 1; }
.wl-album-tile-remove:hover { transform: scale(1.15); }

/* ── Tile track expansion ── */
.wl-tile-tracks {
    display: none;
    width: 100%;
    padding: 4px 0 2px;
    background: rgba(0,0,0,0.4);
}

.wl-album-tile.tile-expanded {
    width: 220px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    flex-shrink: 0;
}

.wl-album-tile.tile-expanded .wl-album-tile-art {
    aspect-ratio: auto;
    height: 80px;
}

.wl-album-tile.tile-expanded .wl-album-tile-info {
    position: static;
    background: none;
    padding: 6px 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.wl-album-tile.tile-expanded .wl-album-tile-name {
    font-size: 11px;
    white-space: normal;
    line-height: 1.3;
}

.wl-album-tile.tile-expanded .wl-album-tile-count {
    color: rgba(var(--accent-rgb), 0.6);
}

.wl-album-tile.tile-expanded .wl-album-tile-badge {
    display: none;
}

.wl-album-tile.tile-expanded .wl-tile-tracks {
    display: block;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.wl-tile-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    transition: background 0.1s;
}

.wl-tile-track:hover { background: rgba(255,255,255,0.05); }

/* Repeatedly-failing wishlist items (#liveleak-failing-hub) */
.wl-failing-badge {
    flex: 0 0 auto; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em; cursor: default;
    color: #fca5a5; background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.wl-track-failing .wl-tile-track-name { color: rgba(252, 165, 165, 0.9); }
.wl-orb-meta-failing { color: #fca5a5; font-weight: 700; cursor: default; }
.wl-moon-failing img { outline: 2px solid rgba(239, 68, 68, 0.55); outline-offset: -1px; }
.wl-moon-failing-badge {
    position: absolute; top: -4px; right: -4px; z-index: 3;
    font-size: 10px; color: #fff; background: rgba(220, 38, 38, 0.9);
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.wl-failing-filter { flex: 0 0 auto; }
.wl-failing-filter.active {
    color: #fca5a5; background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.45);
}

.wl-tile-track-name {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.wl-tile-track-remove {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.15);
    font-size: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.15s;
}

.wl-tile-track:hover .wl-tile-track-remove { opacity: 1; }

/* Manual-search jump (LiveLeak hub phase 2) — mirrors the remove button */
.wl-tile-track-search {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.35);
    font-size: 9px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-left: 4px;
    opacity: 0;
    transition: all 0.15s;
}
.wl-tile-track:hover .wl-tile-track-search { opacity: 1; }
.wl-tile-track-search:hover { color: #fff; background: rgba(var(--accent-rgb), 0.35); }
.wl-tile-track-remove:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* ── Singles orbit (small moons) ── */
.wl-singles-orbit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.wl-single-moon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 60px;
    cursor: default;
    transition: all 0.2s;
}

.wl-single-moon img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.wl-single-moon:hover img {
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: scale(1.08);
}

.wl-moon-fallback {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
}

.wl-moon-label {
    font-size: 9px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.wl-moon-remove-btn {
    position: absolute;
    top: -2px; right: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(239,68,68,0.8);
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.wl-single-moon:hover .wl-moon-remove-btn { opacity: 1; }
.wl-moon-search-btn {
    position: absolute;
    top: -2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.wl-single-moon:hover .wl-moon-search-btn { opacity: 1; }
.wl-moon-remove-btn:hover { transform: scale(1.15); }

@media (max-width: 768px) {
    .wl-nebula-bar { flex-direction: column; }
    .wl-nebula-bar-actions { width: 100%; }
    .wl-nebula-bar-actions button { flex: 1; }
    .wl-orb.orb-lg { width: 80px; height: 80px; }
    .wl-orb.orb-md { width: 70px; height: 70px; }
    .wl-orb.orb-sm { width: 60px; height: 60px; }
    .wl-nebula-field { gap: 14px; }
    .wl-orb-group.expanded { max-width: 100%; }
}

/* ── Legacy (hidden) ── */
#wishlist-page-categories { display: none;
    margin-bottom: 24px;
}

.wishlist-page-container .wishlist-category-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wishlist-page-container .wishlist-category-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wishlist-page-container .wishlist-category-card.next-in-queue {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(var(--accent-rgb), 0.06),
        inset 0 1px 0 rgba(var(--accent-rgb), 0.1);
}

/* ── Mosaic background ── */
.wishlist-mosaic-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    z-index: 0;
}

.wishlist-mosaic-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.55));
    z-index: 1;
}

/* ── Track list section ── */
.wishlist-page-container .wishlist-category-tracks {
    max-height: none;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px;
}

.wishlist-page-container .wishlist-category-header {
    margin-bottom: 12px;
}

.wishlist-page-container .wishlist-tracks-scroll {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}

/* Category header right side with download button */
.wishlist-category-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Batch bar ── */
.wishlist-page-container .wishlist-batch-bar {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 10px;
    padding: 8px 16px;
    margin-bottom: 12px;
}

/* ── Album cards in track list ── */
.wishlist-page-container .wishlist-album-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s;
}

.wishlist-page-container .wishlist-album-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Empty state ── */
.wishlist-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.wishlist-page-empty-icon {
    opacity: 0.15;
    margin-bottom: 8px;
}

.wishlist-page-empty h3 {
    margin: 12px 0 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.wishlist-page-empty p {
    margin: 0 0 24px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    max-width: 360px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   WATCHLIST & WISHLIST RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .watchlist-page-container,
    .wishlist-page-container {
        padding: 16px;
        margin: 10px;
        border-radius: 16px;
    }

    .watchlist-page-header,
    .wishlist-page-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        margin: -16px -16px 16px -16px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .watchlist-page-title,
    .wishlist-page-title {
        font-size: 22px;
    }

    .watchlist-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .watchlist-page-container .watchlist-artists-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .watchlist-toolbar {
        flex-direction: column;
    }

    .watchlist-sort-select {
        width: 100%;
    }

    .wishlist-page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wishlist-stat-item {
        padding: 0 16px;
    }

    .wishlist-stat-value {
        font-size: 18px;
    }
}


/* =========================================================================
   Source-artist visibility rules
   =========================================================================
   When the artist-detail page is rendering a source artist (Spotify / Deezer /
   iTunes / etc. — not in the local library), hide library-only UI. The body
   data-artist-source attribute is set by library.js populateArtistDetailPage
   before rendering.
*/

/* Library-only: status filter (owned/missing only makes sense when you own things) */
body[data-artist-source="source"] .artist-detail-page .filter-group:has(.filter-label:only-child),
body[data-artist-source="source"] .artist-detail-page .discography-filter-btn[data-filter="ownership"] {
    display: none !important;
}

/* Library-only: Enhanced view toggle + container (per-track editing requires owned tracks) */
body[data-artist-source="source"] .artist-detail-page .enhanced-view-toggle-btn,
body[data-artist-source="source"] .artist-detail-page #enhanced-view-container {
    display: none !important;
}

/* Library-only buttons: Radio + Enhance Quality both require owned tracks.
   Enrichment coverage is a per-track DB enrichment percentage that doesn't
   apply to artists you don't own.
   .collection-overview and #artist-hero-sidebar both render usefully for
   source artists (collection shows 0/N missing, Top Tracks pulls from
   Last.fm by name) so they stay visible. */
body[data-artist-source="source"] .artist-detail-page .artist-enrichment-coverage,
body[data-artist-source="source"] .artist-detail-page #library-artist-radio-btn,
body[data-artist-source="source"] .artist-detail-page #library-artist-enhance-btn {
    display: none !important;
}


/* The artist-detail page is React-rendered and lives inside
   #webui-react-root, under the .artist-detail-page wrapper the page puts
   around itself. These rules used to name the legacy container as well; that
   element is gone, so the id half was matching nothing. The class half is
   load-bearing — dropping it un-styles the whole page: release cards lose
   their big-photo treatment and the source-artist hides (Artist Radio,
   Enhance Quality, enrichment coverage) stop applying, which is how a source
   artist once ended up offering library-only actions.
   ========================================================================= */

/* =========================================================================
   Standalone /artist-detail page hero — blurred-background treatment
   ========================================================================= */

.artist-detail-page .artist-hero-section {
    position: relative;
    overflow: hidden;
}

.artist-detail-page .artist-detail-hero-bg {
    /* Blurred artist-cover backdrop retired — Boulder didn't want the artist
       image bleeding behind the header. The element stays in the DOM (JS still
       sets its background-image) but is hidden; flip display back on to restore. */
    display: none;
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(50px) brightness(0.35) saturate(1.4);
    transform: scale(1.3);
    z-index: 0;
    pointer-events: none;
}

.artist-detail-page .artist-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 8, 8, 0.5) 0%,
        rgba(12, 12, 12, 0.7) 60%,
        rgba(12, 12, 12, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

.artist-detail-page .artist-hero-content {
    position: relative;
    z-index: 2;
}


/* =========================================================================
   Album cards on /artist-detail — big-photo treatment
   =========================================================================
   .release-card keeps the existing JS filter/state hooks; .album-card
   layers on the visual treatment from the retired inline Artists page
   (full-bleed image, gradient overlay, info pinned at bottom).

   The base .release-card rule still applies (background gradient, padding,
   fixed 300px height, flex column). These overrides switch off the parts
   that fight with the .album-card layout. */

.artist-detail-page .release-card.album-card {
    background: rgba(18, 18, 18, 1);
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0;
    display: block;
    height: auto;
    aspect-ratio: 1;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-detail-page .release-card.album-card:hover {
    background: rgba(18, 18, 18, 1);
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(var(--accent-rgb), 0.12);
}

.artist-detail-page .release-card.album-card.missing {
    opacity: 1;  /* let the completion-overlay convey state, not the whole card */
}

/* The fit-content override on the discography page also conflicts with
   aspect-ratio:1 — clear it for album-card variants. */
.artist-detail-page .discography-sections .release-card.album-card {
    height: auto;
}

/* MusicBrainz icon position (was tied to the old card's padding) */
.artist-detail-page .release-card.album-card .mb-card-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.artist-detail-page .release-card.album-card .mb-card-icon:hover {
    opacity: 1;
}

/* ── HiFi API instances list (drag and drop) ── */
#hifi-instances-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hifi-instance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.82em;
    user-select: none;
    transition: all 0.2s;
    cursor: grab;
}
.hifi-instance-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.hifi-instance-item.dragging {
    opacity: 0.4;
    border-color: rgb(var(--accent-rgb));
}
.hifi-instance-item.drag-over {
    border-color: rgb(var(--accent-rgb));
    background: rgba(var(--accent-rgb), 0.08);
}
.hifi-instance-item.disabled {
    opacity: 0.4;
}
.hifi-instance-grip {
    color: rgba(255, 255, 255, 0.3);
    cursor: grab;
    flex-shrink: 0;
    font-size: 1em;
}
.hifi-instance-url {
    flex: 1;
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hifi-instance-toggle {
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.95em;
    transition: color 0.15s, background 0.15s;
    /* Bigger tap target — the bare glyph was hard to hit/register (#Sokhi). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 6px;
    user-select: none;
}
.hifi-instance-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}
.hifi-instance-toggle.on {
    color: #4caf50;
}
.hifi-instance-toggle.on:hover {
    color: #66bb6a;
}
.hifi-instance-toggle.off {
    color: #666;
}
.hifi-instance-toggle.off:hover {
    color: #999;
}
.hifi-instance-remove {
    flex-shrink: 0;
    color: #f44336;
    cursor: pointer;
    font-size: 0.95em;
    transition: color 0.15s, background 0.15s;
    /* Bigger tap target — the bare ✖ was hard to hit/register (#Sokhi). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 6px;
    user-select: none;
}
.hifi-instance-remove:hover {
    color: #ef5350;
    background: rgba(244, 67, 54, 0.15);
}

/* ==========================================================================
   BENTO DASHBOARD — polished mixed-size card grid for the dashboard page.

   Each card has bold title + dim subtitle + hero body region + optional
   actions. Cards span 1, 2, or 3 of the 3 grid columns to create
   visual hierarchy. Preserves every JS-relied class hook + ID by
   wrapping existing markup rather than replacing it.

   Inspired by the anthropic.com "Do more with Claude" tile layout —
   subtle border, soft shadow, hover lift, generous breathing room,
   per-card accent hue tints.
   ========================================================================== */

/* ── Dashboard content band ──────────────────────────────────────────────
   Two horizontal album-art rails (Recently Added / Fresh Releases) above the
   ops grid. Cards are the discover page's .ya-card, sized down a step so
   twenty of them read as a strip rather than a wall; the strip scrolls
   sideways on its own axis and never widens the page. */
/* The rails sit INSIDE .dash-grid as dash-cards, sharing the ops cards'
   container chrome. Video-dashboard proportions: each rail takes 2 of the
   3 columns with a companion ops card (downloads / syncs) in the third.
   On the 2-col laptop bento the rail keeps both columns and the companion
   drops below — a rail squeezed to one column would show ~1.5 covers. */
.dash-card--rail {
    grid-column: 1 / -1; /* one full-width band */
    min-width: 0; /* let the strip scroll instead of widening the track */
    /* No box at all: a shelf of covers reads best floating on the page
       (the Spotify-home idiom), and the outline competed with the art. */
    background: none;
    border: none;
    box-shadow: none;
    padding: 4px 2px;
}
.dash-card--rail::before,
.dash-card--rail::after {
    display: none;
}
.dash-card--rail:hover {
    border: none;
    box-shadow: none;
}

/* The band's tab switcher — quiet text tabs, accent underline on the
   active one, matching the app's existing tab language rather than
   inventing pills. */
/* The stats STRIP — six numbers in one slim full-width card, subtitles
   demoted to tooltips. Replaces the box-of-boxes System Stats card. */
.dash-card--tiles {
    grid-column: 1 / -1;
    padding: 14px 24px;
}
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 36px;
    justify-content: space-between;
}
.stat-tile {
    min-width: 0;
}
.stat-tile .stat-card-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.stat-tile .stat-card-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 2px 0 0;
}

/* The Library STRIP — same language as the stats band above it. The tall
   card left four numbers floating beside the taller Services card;
   centering them (the first fix) just moved the void around. */
.dash-card--strip {
    grid-column: 1 / -1;
    padding: 14px 24px;
}
.dash-card--strip .dash-card__body {
    flex: none;
}

/* ── The Alerts band (data-card="alerts") — the exception surface. Not
   rendered at all while healthy; amber/red hairline rows when a core
   connection needs a human. ── */
.dash-alerts {
    grid-column: 1 / -1;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.25);
    border-top-color: rgba(251, 191, 36, 0.35);
}
.dash-alerts:hover {
    /* The dissolve-hover reads wrong on a warning — alerts hold their frame. */
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.25);
    border-top-color: rgba(251, 191, 36, 0.35);
}
.dash-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}
.dash-alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
    animation: dashAlertPulse 1.8s ease-in-out infinite;
}
.dash-alert--error .dash-alert-dot {
    background: #f87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}
@keyframes dashAlertPulse {
    50% { opacity: 0.45; }
}
.dash-alert-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.dash-alert-detail {
    color: rgba(255, 255, 255, 0.6);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-alert-action {
    flex-shrink: 0;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}
.dash-alert-action:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

/* ── The Listen band (data-card="listen") — the payoff row. Boxless like
   the rails; the hero carries the accent. ── */
.dash-card[data-card="listen"] {
    grid-column: 1 / -1;
}
.listen-band {
    display: grid;
    grid-template-columns: minmax(340px, 1.6fr) minmax(240px, 1fr);
    gap: 14px;
}
.listen-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0.06) 55%, transparent 100%),
        linear-gradient(165deg, rgba(14, 14, 18, 0.96), rgba(7, 7, 10, 0.99));
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}
.listen-hero:hover {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.18);
}
.listen-hero:hover .listen-hero-play {
    background: rgba(var(--accent-rgb), 0.9);
    transform: scale(1.08);
}
.listen-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.listen-hero-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.listen-hero-text strong {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.listen-hero-text span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}
.listen-hero-play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding-left: 3px;
    color: #fff;
    background: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
    transition: background 0.18s ease, transform 0.18s ease;
}
.listen-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    text-align: left;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, rgba(16, 16, 20, 0.94), rgba(8, 8, 12, 0.98));
    color: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.listen-tile:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(165deg, rgba(20, 20, 25, 0.95), rgba(10, 10, 14, 0.99));
}
.listen-tile:hover .listen-tile-arrow {
    transform: translateX(4px);
    color: #fff;
}
.listen-tile-title {
    font-size: 13.5px;
    font-weight: 700;
}
.listen-tile-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.45;
    padding-right: 28px;
}
.listen-tile-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.18s ease, color 0.18s ease;
}
@media (max-width: 767px) {
    .listen-band {
        grid-template-columns: 1fr;
    }
}

/* ── The Sync band (data-card="sync") — Auto Sync + Recent Syncs merged:
   one row per playlist, sharing its grid row with the Automations card.
   Art carries the color, columns carry the story: schedule → last
   result → ownership → next. ── */
.dash-card[data-card="sync"] {
    grid-column: span 2;
}

/* ── The Automations card (data-card="automations") — the engine's
   live/upcoming view beside the Sync band, plus the quick-settings
   strip. Same quiet-chrome row language. ── */
.dash-card[data-card="automations"] .dash-card__head {
    position: relative;
}
.dash-autom-rows {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
    max-height: 500px;
    padding: 2px;
}
.dash-autom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer; /* row click opens the shared run-history modal */
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-autom-row--live {
    border-color: rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--accent-rgb), 0.05);
}
.dash-autom-row:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.10);
}
.dash-autom-row--off {
    opacity: 0.55;
}
.dash-autom-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.25);
}
.dash-autom-dot--ok {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}
.dash-autom-dot--err {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.45);
}
.dash-autom-dot--live {
    background: rgb(var(--accent-light-rgb));
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.55);
    animation: syncbandLivePulse 1.6s ease-in-out infinite;
}
.dash-autom-phase {
    color: rgba(var(--accent-rgb), 0.9);
}
.dash-autom-live-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.15);
    animation: syncbandLivePulse 1.6s ease-in-out infinite;
}
.dash-autom-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.dash-autom-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-autom-name {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-autom-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-autom-last {
    color: rgba(52, 211, 153, 0.7);
}
.dash-autom-last--bad {
    color: rgba(248, 113, 113, 0.85);
}
.dash-autom-when {
    flex-shrink: 0;
    text-align: right;
}
.dash-autom-next {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--accent-light-rgb));
}
.dash-autom-paused {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
}
.dash-autom-run {
    flex-shrink: 0;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dash-autom-row:hover .dash-autom-run {
    opacity: 1;
}
.dash-autom-run:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}
.dash-autom-run:disabled {
    cursor: not-allowed;
}
@media (hover: none) {
    .dash-autom-run { opacity: 0.7; }
}
/* The quick-settings strip — pill switches on a hairline shelf. */
.dash-quick-settings {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-quick-settings-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 2px;
}
.dash-qs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 5px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dash-qs-knob {
    width: 22px;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    transition: background 0.15s ease;
}
.dash-qs-knob::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transition: transform 0.18s ease, background 0.18s ease;
}
.dash-qs-toggle--on {
    border-color: rgba(var(--accent-rgb), 0.4);
    color: rgba(255, 255, 255, 0.9);
}
.dash-qs-toggle--on .dash-qs-knob {
    background: rgba(var(--accent-rgb), 0.5);
}
.dash-qs-toggle--on .dash-qs-knob::after {
    transform: translateX(9px);
    background: #fff;
}
.dash-qs-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.dash-qs-accent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.dash-qs-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-qs-swatch:hover {
    transform: scale(1.2);
}
.dash-qs-swatch--active {
    box-shadow:
        0 0 0 2px rgba(8, 8, 12, 1),
        0 0 0 3.5px rgba(255, 255, 255, 0.75);
}
/* The custom swatch is a native color input wearing a rainbow ring. */
.dash-qs-swatch--custom {
    appearance: none;
    -webkit-appearance: none;
    background: conic-gradient(#f43f5e, #f59e0b, #1db954, #14b8a6, #1d8ab9, #8b5cf6, #f43f5e);
    overflow: hidden;
}
.dash-qs-swatch--custom::-webkit-color-swatch-wrapper {
    padding: 0;
    opacity: 0;
}
.dash-qs-swatch--custom::-webkit-color-swatch {
    border: none;
    opacity: 0;
}
.dash-qs-swatch--custom::-moz-color-swatch {
    border: none;
    opacity: 0;
}
.dash-card[data-card="sync"] .dash-card__head {
    position: relative;
}
.autosync-count-pill {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    vertical-align: 2px;
}
.autosync-manage-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.autosync-manage-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.dash-card[data-card="sync"] .dash-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.syncband-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
    max-height: 560px;
    padding: 2px;
}
.syncband-row {
    display: grid;
    grid-template-areas: "art main result owned when actions";
    /* Every min here is load-bearing: the sum (plus gaps/padding) is the
       narrowest card the flat row fits — beyond that the tablet stack
       below takes over. */
    grid-template-columns: 46px minmax(150px, 1.3fr) minmax(140px, 1fr) minmax(130px, 210px) 76px minmax(90px, auto);
    align-items: center;
    gap: 6px 14px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
        opacity 0.2s ease, transform 0.2s ease;
}
.syncband-row:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.10);
}
.syncband-row--live {
    border-color: rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--accent-rgb), 0.05);
}
.syncband-row--off {
    opacity: 0.55;
}
.syncband-art {
    grid-area: art;
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease;
}
.syncband-row:hover .syncband-art {
    transform: scale(1.05);
}
.syncband-art > img:not(.syncband-art-badge) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}
.syncband-art-glyph {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}
.syncband-art-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 19px;
    height: 19px;
    padding: 3px;
    border-radius: 6px;
    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.14);
    object-fit: contain;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* White-on-dark brand marks need inverting; the filter only touches the
   image pixels — background/border stay put because the badge's box paints
   beneath its own bitmap. Wrong for Tidal/Qobuz? They ship dark marks. */
.syncband-art-badge--tidal,
.syncband-art-badge--qobuz {
    background: #e8e8ec;
}
.syncband-main {
    grid-area: main;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.syncband-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.syncband-sub {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.syncband-result {
    grid-area: result;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}
.syncband-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}
.syncband-chip--dl {
    color: rgba(74, 222, 128, 0.9);
    border-color: rgba(74, 222, 128, 0.22);
    background: rgba(74, 222, 128, 0.08);
}
.syncband-chip--fail {
    color: rgba(248, 113, 113, 0.9);
    border-color: rgba(248, 113, 113, 0.22);
    background: rgba(248, 113, 113, 0.08);
}
.syncband-ago {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}
.syncband-ago--none {
    font-style: italic;
}
.syncband-phase {
    font-size: 11px;
    color: rgba(var(--accent-rgb), 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.syncband-owned {
    grid-area: owned;
    display: flex;
    align-items: center;
    gap: 8px;
}
.syncband-owned-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.syncband-owned-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.55), rgba(52, 211, 153, 0.95));
    transition: width 0.4s ease;
}
.syncband-owned-fill--live {
    background: rgb(var(--accent-light-rgb));
}
.syncband-owned-text {
    flex-shrink: 0;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}
.syncband-when {
    grid-area: when;
    text-align: right;
    white-space: nowrap;
}
.syncband-next {
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--accent-light-rgb));
}
.syncband-paused,
.syncband-manual {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
}
.syncband-live-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.15);
    animation: syncbandLivePulse 1.6s ease-in-out infinite;
}
@keyframes syncbandLivePulse {
    50% { opacity: 0.55; }
}
.syncband-actions {
    grid-area: actions;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.syncband-row:hover .syncband-actions {
    opacity: 1;
}
@media (hover: none) {
    .syncband-actions { opacity: 0.75; }
}
.syncband-btn {
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.syncband-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}
.syncband-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.syncband-btn--x:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}
.autosync-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 28px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.autosync-empty strong {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}
.autosync-empty span {
    max-width: 300px;
    line-height: 1.5;
}
.autosync-empty-cta {
    margin-top: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    color: rgb(var(--accent-light-rgb));
    cursor: pointer;
    transition: background 0.15s ease;
}
.autosync-empty-cta:hover {
    background: rgba(var(--accent-rgb), 0.20);
}
/* (the Sync band's body flex rules live in its block above) */

/* Live "N syncing now" pill on the Recent Syncs title. */
.dash-syncs-live {
    display: inline-block;
    margin-left: 10px;
    vertical-align: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(74, 222, 128, 0.95);
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.25);
    border-radius: 999px;
    padding: 2px 9px;
    animation: dashSyncsPulse 2.2s ease-in-out infinite;
}
@keyframes dashSyncsPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Divider between the two halves of the merged Services card. */
/* Phone widths: the tab row wraps (two 18px tabs + a subtitle overflow
   ~375px otherwise), tiles and covers size down a step. The rail itself
   already scrolls on its own axis at every width. */
@media (max-width: 699px) {
    .dash-rail-head {
        flex-wrap: wrap;
        gap: 2px 12px;
    }
    .dash-band-tab {
        font-size: 16px;
    }
    .dash-card--tiles {
        padding: 12px 16px;
    }
    /* Phone: space-between flex wrapped the six tiles into ragged rows —
       a fixed 3x2 grid (2x3 on the smallest screens, below) reads clean. */
    .stats-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 10px;
    }
    .stat-tile .stat-card-value {
        font-size: 18px;
    }
    .dash-rail .dash-rail-card {
        width: 126px;
    }
}

.dash-merged-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 16px 0;
}

.dash-band-tabs {
    display: flex;
    gap: 18px;
}
.dash-band-tab {
    background: none;
    border: none;
    padding: 0 0 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    border-bottom: 2px solid transparent;
    transition: color 0.2s;
}
.dash-band-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}
.dash-band-tab.active {
    color: #fff;
    border-bottom-color: var(--accent-color, #a97bff);
}
.dash-rail-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.dash-rail-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.dash-rail-subtitle {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
}
.dash-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    /* Firefox night scrollbar; the ::-webkit rules below cover Chromium —
       without them Chrome painted its default light bar across the dark rail. */
    scrollbar-color: rgba(var(--accent-rgb), 0.35) rgba(255, 255, 255, 0.04);
    -webkit-overflow-scrolling: touch;
}
.dash-rail::-webkit-scrollbar {
    height: 6px;
}
.dash-rail::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.dash-rail::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.35);
    border-radius: 6px;
}
.dash-rail::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.55);
}
.dash-rail .dash-rail-card {
    width: 150px;
}
.dash-rail-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-rail-caption {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: linear-gradient(165deg,
        rgba(16, 16, 20, 0.94) 0%,
        rgba(8, 8, 12, 0.98) 100%);
    /* Quiet chrome (Boulder: the bright outlined boxes read as clutter) —
       hairline neutral borders; the color belongs to the CONTENT (covers,
       service glows), not the containers. */
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        border-color 0.24s ease,
        transform 0.18s ease,
        box-shadow 0.24s ease;
    overflow: hidden;
    isolation: isolate;
}

/* Cursor-following accent blob — two-layer "liquid" effect that spans
   the bento. ::before is a huge soft halo with lag (lerped position via
   --blob-x-soft / --blob-y-soft), ::after is a smaller sharp core that
   tracks the cursor instantly (--blob-x / --blob-y). Each card renders
   its own copy of both layers; overflow:hidden on the card clips them
   to its bounds, so the blob looks continuous across cards but never
   bleeds into the gaps between them. */
.dash-card::before {
    content: '';
    position: absolute;
    left: var(--blob-x-soft, -9999px);
    top: var(--blob-y-soft, -9999px);
    width: 1280px;
    height: 1280px;
    transform: translate(-50%, -50%) scale(1);
    background: radial-gradient(
        circle,
        rgba(var(--accent-rgb), 0.13) 0%,
        rgba(var(--accent-rgb), 0.06) 25%,
        rgba(var(--accent-rgb), 0.025) 50%,
        transparent 72%);
    filter: blur(48px);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    will-change: left, top;
    /* No infinite scale-pulse: scaling a blur(48px) element re-rasterizes the blur every
       frame, and with 8 cards × 2 blobs that pinned the GPU at idle (#935). The blob still
       follows the cursor via --blob-x/y; it just doesn't breathe when nothing's happening. */
}
.dash-card::after {
    content: '';
    position: absolute;
    left: var(--blob-x, -9999px);
    top: var(--blob-y, -9999px);
    width: 540px;
    height: 540px;
    transform: translate(-50%, -50%) scale(1);
    background: radial-gradient(
        circle,
        rgba(var(--accent-rgb), 0.16) 0%,
        rgba(var(--accent-rgb), 0.07) 30%,
        rgba(var(--accent-rgb), 0.03) 55%,
        transparent 72%);
    filter: blur(18px);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    will-change: left, top;
    mix-blend-mode: screen;
    /* No infinite scale-pulse — same reason as ::before (#935). */
}

@keyframes dashBlobHaloPulse {
    0%, 100% { opacity: 0.7;  transform: translate(-50%, -50%) scale(0.96); }
    50%      { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes dashBlobCorePulse {
    0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.92); }
    50%      { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.10); }
}

@media (prefers-reduced-motion: reduce) {
    .dash-card::before,
    .dash-card::after { animation: none; }
}

body.reduce-effects .dash-card::before,
body.reduce-effects .dash-card::after,
body.max-performance .dash-card::before,
body.max-performance .dash-card::after {
    display: none;
}
/* Quiet hover (Boulder, Aug 11, trial): containers aren't clickable, so
   they don't perform for the cursor — the rail set the standard. The
   cursor-following accent blobs are the same instinct as the old glow
   hover, so they go with it; delete this display:none pair to bring them
   back (init.js keeps writing the --blob vars either way).
   No translateY lift on hover either: moving the card up pulls its bottom
   edge off the cursor → un-hover → drop → re-hover flicker loop (#816). */
.dash-card::before,
.dash-card::after {
    display: none;
}
/* Boulder preferred the rail's read: on hover the frame DISSOLVES and the
   surface deepens a touch, so the content comes forward — the opposite of
   a border brightening at the cursor. */
.dash-card:hover {
    border-color: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.04);
    background: linear-gradient(165deg,
        rgba(11, 11, 15, 0.96) 0%,
        rgba(5, 5, 8, 0.99) 100%);
}

/* Mount stagger — cards fade up on first paint (and on page revisit) */
@keyframes dashCardMount {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-card {
    animation: dashCardMount 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.dash-card[data-card="services"]        { animation-delay: 0.00s; }
.dash-card[data-card="stats"]           { animation-delay: 0.06s; }
.dash-card[data-card="library"]         { animation-delay: 0.12s; }
.dash-card[data-card="sync"]            { animation-delay: 0.18s; }
.dash-card[data-card="tools"]           { animation-delay: 0.24s; }
.dash-card[data-card="activity"]        { animation-delay: 0.30s; }
.dash-card[data-card="enrichment"]      { animation-delay: 0.36s; }
.dash-card[data-card="active-downloads"] { animation-delay: 0.20s; }

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .dash-card { animation: none; }
    .dash-card::before { animation: none; }
}

/* Span modifiers */
.dash-card--wide { grid-column: span 2; }
.dash-card--full { grid-column: 1 / -1; }

/* Card head */
.dash-card__head {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
}
.dash-card__head--withaction {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.dash-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.dash-card__sub {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
    margin: 4px 0 0;
    line-height: 1.4;
}
.dash-card__head-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.dash-card__head-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Card body */
.dash-card__body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

/* CTA card variant (Tools) — entire card is clickable */
.dash-card--cta {
    cursor: pointer;
}
.dash-card--cta:hover .dash-card__cta-arrow {
    transform: translateX(4px);
    color: rgb(var(--accent-rgb));
}
.dash-card--cta:hover .dash-card__cta-icon {
    background: rgba(var(--accent-rgb), 0.22);
    transform: scale(1.06) rotate(-2deg);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}
.dash-card__body--cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 4px;
}
.dash-card__cta-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.26);
    color: rgb(var(--accent-rgb));
    transition: background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dash-card__cta-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.dash-card__cta-arrow {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

/* Body overrides for embedded sub-grids — make them compact for bento */

/* =====================================================================
   Quick Actions — asymmetric bento with per-tile signature animations.
   Auto-Sync hero takes 2 rows on the left (equalizer bars rising).
   Tools (rotating gear) + Automations (pulsing trigger→action flow)
   stack on the right. Container-query driven, all sizes scale with
   card width.
   ===================================================================== */
.dash-card--quick-actions {
    overflow: hidden;
    container-type: inline-size;
    container-name: qaroot;
}

.dash-card--quick-actions .dash-card__body {
    min-height: 0;
}

.qa-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(8px, 0.8cqw + 4px, 14px);
    /* Size to content (rows are minmax(0,1fr) so the row-spanning hero
       auto-equalizes to the two stacked minor tiles); keep a floor for
       visual mass. Forcing a fixed height taller than content is what
       left the dead gap above the Auto-Sync title (D1). */
    min-height: clamp(220px, 14cqw + 160px, 280px);
}

.qa-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: clamp(12px, 0.8cqw + 8px, 16px);
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.95) 0%,
        rgba(13, 13, 13, 0.98) 100%);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
    display: grid;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.qa-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.4) 30%,
        rgb(var(--accent-light-rgb)) 50%,
        rgba(var(--accent-rgb), 0.4) 70%,
        transparent 100%);
    opacity: 0.55;
    transition: opacity 0.35s ease;
    z-index: 3;
    pointer-events: none;
}

.qa-tile:hover,
.qa-tile:focus-visible {
    /* No translateY lift — see .dash-card:hover (#816 hover-flicker). overflow
       is hidden here so a pseudo-element gap-buffer can't help; the glow/shadow
       below carries the hover state. */
    border-color: rgba(var(--accent-rgb), 0.32);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--accent-rgb), 0.18),
        0 0 26px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    outline: none;
}

.qa-tile:hover::before,
.qa-tile:focus-visible::before {
    opacity: 1;
}

.qa-tile--hero {
    grid-row: span 2;
    padding: clamp(20px, 1.6cqw + 14px, 32px);
    grid-template-rows: auto auto auto 1fr;
    gap: clamp(10px, 1cqw + 4px, 18px);
}

.qa-tile--minor {
    padding: clamp(14px, 1.2cqw + 10px, 22px);
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: clamp(4px, 0.5cqw, 8px);
    align-items: center;
}

.qa-tile__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Hero equalizer: 20 vertical bars at the bottom, each pulsing on its
   own offset so the whole thing reads as a live audio waveform. */
.qa-tile__eq {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(3px, 0.4cqw, 6px);
    padding: 0 clamp(14px, 1.4cqw + 8px, 24px);
    height: 60%;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 70%);
    mask-image: linear-gradient(180deg, transparent 0%, black 70%);
    transition: opacity 0.4s ease;
}

.qa-tile__eq span {
    flex: 1;
    min-width: 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg,
        rgb(var(--accent-light-rgb)),
        rgba(var(--accent-rgb), 0.3));
    transform-origin: bottom;
    animation: qa-eq 3.2s ease-in-out infinite;
}

.qa-tile__eq span:nth-child(1)  { animation-delay: -0.10s; --eq-h: 0.30; }
.qa-tile__eq span:nth-child(2)  { animation-delay: -0.30s; --eq-h: 0.55; }
.qa-tile__eq span:nth-child(3)  { animation-delay: -0.50s; --eq-h: 0.80; }
.qa-tile__eq span:nth-child(4)  { animation-delay: -0.70s; --eq-h: 0.45; }
.qa-tile__eq span:nth-child(5)  { animation-delay: -0.20s; --eq-h: 0.70; }
.qa-tile__eq span:nth-child(6)  { animation-delay: -0.60s; --eq-h: 0.95; }
.qa-tile__eq span:nth-child(7)  { animation-delay: -0.40s; --eq-h: 0.50; }
.qa-tile__eq span:nth-child(8)  { animation-delay: -0.80s; --eq-h: 0.75; }
.qa-tile__eq span:nth-child(9)  { animation-delay: -1.10s; --eq-h: 0.40; }
.qa-tile__eq span:nth-child(10) { animation-delay: -0.35s; --eq-h: 0.65; }
.qa-tile__eq span:nth-child(11) { animation-delay: -0.55s; --eq-h: 0.90; }
.qa-tile__eq span:nth-child(12) { animation-delay: -0.15s; --eq-h: 0.35; }
.qa-tile__eq span:nth-child(13) { animation-delay: -0.75s; --eq-h: 0.60; }
.qa-tile__eq span:nth-child(14) { animation-delay: -0.95s; --eq-h: 0.85; }
.qa-tile__eq span:nth-child(15) { animation-delay: -0.25s; --eq-h: 0.50; }
.qa-tile__eq span:nth-child(16) { animation-delay: -0.45s; --eq-h: 0.70; }
.qa-tile__eq span:nth-child(17) { animation-delay: -0.65s; --eq-h: 0.40; }
.qa-tile__eq span:nth-child(18) { animation-delay: -0.85s; --eq-h: 0.80; }
.qa-tile__eq span:nth-child(19) { animation-delay: -1.05s; --eq-h: 0.55; }
.qa-tile__eq span:nth-child(20) { animation-delay: -0.18s; --eq-h: 0.45; }

@keyframes qa-eq {
    0%, 100% { transform: scaleY(calc(var(--eq-h, 0.5) * 0.55)); }
    50%      { transform: scaleY(calc(var(--eq-h, 0.5) * 0.85)); }
}

.qa-tile--hero:hover .qa-tile__eq,
.qa-tile--hero:focus-visible .qa-tile__eq { opacity: 0.65; }

/* Hero playhead — slow vertical accent line that drifts across the
   equalizer like a now-playing scrubber. Fades in/out at the edges so
   the loop reset isn't visible. */
/* GPU note: this used to animate `left`, which re-lays-out and repaints every
 * frame for the whole 9s loop. The pseudo is now a full-width strip whose
 * 1.5px line is a STATIC background (background-size positioned at center),
 * and only transform/opacity animate — compositor-only, identical look. */
.qa-tile--hero .qa-tile__bg::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 65%;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(var(--accent-rgb), 0.7) 40%,
            rgba(var(--accent-rgb), 0.7) 85%,
            transparent 100%)
        50% 0 / 1.5px 100% no-repeat;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.35));
    opacity: 0;
    transform: translateX(-54%);
    animation: qa-playhead 9s linear infinite;
    pointer-events: none;
}

@keyframes qa-playhead {
    0%   { transform: translateX(-54%); opacity: 0; }
    10%  { opacity: 0.5; }
    85%  { opacity: 0.5; }
    100% { transform: translateX(52%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .qa-tile--hero .qa-tile__bg::after { animation: none; opacity: 0; }
    .qa-flow-line { animation: none; }
}

/* Tools background: large gear icon rotating slowly off the right edge */
.qa-tile__gear {
    position: absolute;
    top: 50%;
    right: -38%;
    width: 200%;
    aspect-ratio: 1;
    transform: translateY(-50%);
    color: rgba(var(--accent-rgb), 0.08);
    animation: qa-gear-rotate 28s linear infinite;
}

.qa-tile__gear svg { width: 100%; height: 100%; }

@keyframes qa-gear-rotate {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}

.qa-tile--tools:hover .qa-tile__gear,
.qa-tile--tools:focus-visible .qa-tile__gear {
    color: rgba(var(--accent-rgb), 0.14);
    animation-duration: 12s;
}

/* Automations background: 3-node trigger→action→notify flow centered
   horizontally across the lower portion of the tile. Stays inside the
   visible area regardless of how small the minor tile gets. Connecting
   lines have a moving glow that travels left-to-right like a signal
   propagating along a circuit. */
.qa-tile__flow {
    position: absolute;
    left: clamp(10px, 1.4cqw + 6px, 18px);
    right: clamp(10px, 1.4cqw + 6px, 18px);
    bottom: clamp(10px, 1.4cqw + 6px, 18px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 0.5cqw, 8px);
    /* The flow sits in the bottom row, directly behind the green "Open →" CTA —
       at 0.45 the accent nodes/line competed with the CTA and read as clutter
       (#816 "automations looks a bit strange"). Toned to a faint background
       texture; it still brightens on hover. */
    opacity: 0.22;
    transition: opacity 0.35s ease;
}

.qa-flow-node {
    position: relative;
    width: clamp(16px, 1.4cqw + 8px, 24px);
    aspect-ratio: 1;
    border: 1.5px solid rgba(var(--accent-rgb), 0.6);
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    flex-shrink: 0;
}

/* GPU note: the node pulse used to animate background + box-shadow (repaint
 * every frame, forever, x3 nodes). The bright state is painted once on a
 * pseudo and only its opacity breathes. */
.qa-flow-node::after {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.18);
    opacity: 0;
    pointer-events: none;
}

.qa-flow-node:nth-of-type(1)::after { animation: qa-flow-pulse 3.2s ease-in-out infinite; }
.qa-flow-node:nth-of-type(2)::after { animation: qa-flow-pulse 3.2s ease-in-out infinite; animation-delay: -1.07s; }
.qa-flow-node:nth-of-type(3)::after { animation: qa-flow-pulse 3.2s ease-in-out infinite; animation-delay: -2.13s; }

.qa-flow-line {
    position: relative;
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: rgba(var(--accent-rgb), 0.2);
    overflow: hidden;
}

/* Sweep is a separate pseudo so opacity can fade independently of the
   position. Without the fade the reset jump from 100% → -60% was
   visible as a snap each cycle. */
.qa-flow-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgb(var(--accent-light-rgb)) 50%,
        transparent 100%);
    transform: translateX(-100%);
    opacity: 0;
    animation: qa-flow-line-sweep 3.2s ease-in-out infinite;
}

.qa-flow-line:nth-of-type(2)::before { animation-delay: -1.0s; }

@keyframes qa-flow-line-sweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { transform: translateX(220%); opacity: 1; }
    100% { transform: translateX(220%); opacity: 0; }
}

@keyframes qa-flow-pulse {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.qa-tile--auto:hover .qa-tile__flow,
.qa-tile--auto:focus-visible .qa-tile__flow { opacity: 0.85; }

/* ── Live amplification (animation == gauge) ──
 * Each tile's signature animation SURGES while its subsystem is actually
 * working — sync pipeline running, a tool/scan/repair job running, an
 * automation firing. core.js toggles .is-live from the live socket events;
 * idle keeps the exact calm look these tiles always had. Purely additive. */
.qa-tile--sync.is-live .qa-tile__eq { opacity: 0.65; }
.qa-tile--sync.is-live .qa-tile__eq span { animation-duration: 1.1s; }
.qa-tile--sync.is-live .qa-tile__bg::after { animation-duration: 4s; }
.qa-tile--sync.is-live .qa-tile__pulse::after { animation-duration: 0.9s; }

.qa-tile--tools.is-live .qa-tile__gear {
    color: rgba(var(--accent-rgb), 0.16);
    animation-duration: 7s;
}

.qa-tile--auto.is-live .qa-tile__flow { opacity: 0.85; }
.qa-tile--auto.is-live .qa-flow-node::after { animation-duration: 1.3s; }
.qa-tile--auto.is-live .qa-flow-line::before { animation-duration: 1.3s; }

@media (prefers-reduced-motion: reduce) {
    .qa-tile__eq span,
    .qa-tile__gear,
    .qa-flow-node,
    .qa-flow-node::after,
    .qa-tile__pulse::after { animation: none !important; }
}

/* Foreground content */
.qa-tile__topline {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}

.qa-tile__kicker {
    color: rgba(var(--accent-rgb), 0.85);
    font-size: clamp(9px, 0.35cqw + 7px, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.qa-tile__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.22);
}

.qa-tile__pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.5);
    animation: qa-pulse-ring 2.2s ease-out infinite;
    z-index: -1;
}

@keyframes qa-pulse-ring {
    0%   { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0;   }
}

.qa-tile__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 3.2cqw + 26px, 56px);
    height: clamp(44px, 3.2cqw + 26px, 56px);
    border-radius: clamp(11px, 0.8cqw + 7px, 14px);
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.18),
        rgba(var(--accent-rgb), 0.05));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.qa-tile__icon svg { width: 56%; height: 56%; }

.qa-tile--hero .qa-tile__icon { grid-row: 2; }

.qa-tile--minor .qa-tile__topline { grid-column: 2; grid-row: 1; }
.qa-tile--minor .qa-tile__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: clamp(40px, 2.8cqw + 22px, 48px);
    height: clamp(40px, 2.8cqw + 22px, 48px);
}
.qa-tile--minor .qa-tile__heading { grid-column: 2; grid-row: 2; }
.qa-tile--minor .qa-tile__cta {
    grid-column: 2;
    grid-row: 3;
    margin-top: clamp(4px, 0.4cqw, 6px);
}

.qa-tile:hover .qa-tile__icon,
.qa-tile:focus-visible .qa-tile__icon {
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.32),
        rgba(var(--accent-rgb), 0.1));
    border-color: rgba(var(--accent-rgb), 0.45);
    transform: rotate(-3deg);
}

.qa-tile__heading {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.qa-tile--hero .qa-tile__heading {
    grid-row: 3;
    align-self: start;
}

.qa-tile__title {
    display: block;
    color: #fff;
    font-size: clamp(20px, 2.4cqw + 12px, 34px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.026em;
    margin-bottom: clamp(4px, 0.5cqw, 8px);
    padding-bottom: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-tile--minor .qa-tile__title {
    font-size: clamp(16px, 1.4cqw + 10px, 22px);
    margin-bottom: 2px;
}

.qa-tile__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(11px, 0.5cqw + 9px, 13px);
    line-height: 1.5;
    min-width: 0;
}

.qa-tile--minor .qa-tile__desc {
    -webkit-line-clamp: 1;
    font-size: clamp(10px, 0.3cqw + 9px, 11.5px);
}

.qa-tile__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(var(--accent-light-rgb));
    font-size: clamp(11px, 0.4cqw + 9px, 13px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    min-width: 0;
}

.qa-tile--hero .qa-tile__cta {
    grid-row: 4;
    /* Same clean inline CTA rhythm as the minor tiles — drop the divider
       "footer" treatment so all three read as one family (D2). The hero
       keeps its signature (status dot, big title, own icon row). */
    align-self: start;
    margin-top: clamp(4px, 0.4cqw, 6px);
}

.qa-tile__cta-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-tile__cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(22px, 1.6cqw + 12px, 30px);
    height: clamp(22px, 1.6cqw + 12px, 30px);
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.14);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    color: rgb(var(--accent-light-rgb));
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.qa-tile__cta-arrow svg { width: 55%; height: 55%; }

.qa-tile:hover .qa-tile__cta-arrow,
.qa-tile:focus-visible .qa-tile__cta-arrow {
    transform: translateX(4px);
    background: rgba(var(--accent-rgb), 0.28);
    border-color: rgba(var(--accent-rgb), 0.5);
}

@container qaroot (max-width: 560px) {
    .qa-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }
    /* Size to content in the single-column layout — a fixed 4:3 box left a
       big dead gap below the CTA on the narrow dashboard column (D1). */
    .qa-tile--hero { grid-row: auto; aspect-ratio: auto; }
    .qa-tile--minor { min-height: 90px; }
}

/* Legacy lane markup retired — keep an inert reference. */
.dash-card--quick-actions-legacy {
    overflow: hidden;
}

.dash-card--quick-actions-legacy .dash-card__body {
    min-height: 128px;
}

.dashboard-action-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.16), transparent 44%),
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025)),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 12px 28px rgba(0,0,0,0.16),
        0 0 0 1px rgba(var(--accent-rgb), 0.04);
}

.dashboard-action-grid::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.4),
        rgb(var(--accent-light-rgb)),
        rgba(var(--accent-rgb), 0.4),
        transparent);
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
}

.dashboard-action-lane {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 126px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border: 0;
    background:
        radial-gradient(circle at var(--lane-glow-x, 22%) 10%, var(--lane-glow), transparent 42%),
        rgba(255, 255, 255, 0.032);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-action-lane + .dashboard-action-lane {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.07);
}

.dashboard-action-lane::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dashboard-action-lane:hover,
.dashboard-action-lane:focus-visible {
    background:
        radial-gradient(circle at var(--lane-glow-x, 22%) 10%, var(--lane-glow-strong), transparent 46%),
        rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.dashboard-action-lane:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.55);
    outline-offset: -4px;
}

.dashboard-action-lane:hover::after,
.dashboard-action-lane:focus-visible::after {
    border-color: var(--lane-border);
    background: rgba(255, 255, 255, 0.025);
}

.dashboard-action-lane.tools {
    --lane-glow-x: 18%;
    --lane-glow: rgba(var(--accent-rgb), 0.12);
    --lane-glow-strong: rgba(var(--accent-rgb), 0.22);
    --lane-border: rgba(var(--accent-rgb), 0.26);
    --lane-accent: rgb(var(--accent-light-rgb));
}

.dashboard-action-lane.auto-sync {
    --lane-glow-x: 50%;
    --lane-glow: rgba(var(--accent-rgb), 0.18);
    --lane-glow-strong: rgba(var(--accent-rgb), 0.3);
    --lane-border: rgba(var(--accent-rgb), 0.34);
    --lane-accent: rgb(var(--accent-light-rgb));
}

.dashboard-action-lane.automations {
    --lane-glow-x: 82%;
    --lane-glow: rgba(var(--accent-rgb), 0.12);
    --lane-glow-strong: rgba(var(--accent-rgb), 0.22);
    --lane-border: rgba(var(--accent-rgb), 0.26);
    --lane-accent: rgb(var(--accent-light-rgb));
}

.dashboard-action-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    color: var(--lane-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 16px rgba(var(--accent-rgb), 0.08);
}

.dashboard-action-label {
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
}

.dashboard-action-copy {
    display: block;
    min-height: 28px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.dashboard-action-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--lane-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.dashboard-action-arrow::after {
    content: '›';
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform 0.18s ease;
}

.dashboard-action-lane:hover .dashboard-action-arrow::after,
.dashboard-action-lane:focus-visible .dashboard-action-arrow::after {
    transform: translate(3px, -1px);
}

@media (max-width: 1180px) {
    .dashboard-action-lane {
        padding: 14px 12px;
    }

    .dashboard-action-copy {
        min-height: 42px;
    }
}

@media (max-width: 760px) {
    .dashboard-action-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .dashboard-action-lane {
        min-height: 86px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
    }

    .dashboard-action-lane + .dashboard-action-lane {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .dashboard-action-copy {
        min-height: 0;
    }

    .dashboard-action-arrow {
        align-self: center;
    }
}

/* Service status: 3 service cards side-by-side in a tighter grid */
.dash-card[data-card="services"] .service-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.dash-card[data-card="services"] .service-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 14px;
    min-height: 0;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.dash-card[data-card="services"] .service-card:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
.dash-card[data-card="services"] .service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dash-card[data-card="services"] .service-card-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.dash-card[data-card="services"] .service-card-indicator {
    font-size: 11px;
}
.dash-card[data-card="services"] .service-card-status-text,
.dash-card[data-card="services"] .service-card-response-time {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin: 2px 0;
}
.dash-card[data-card="services"] .service-card-footer {
    margin-top: 10px;
}
.dash-card[data-card="services"] .service-card-button {
    width: 100%;
    padding: 6px 10px;
    font-size: 11.5px;
    border-radius: 6px;
}

/* Library card — trim the inner library-status-card chrome since the
   bento card already provides the framing. */
/* Strip internals: header block left, stats spread across the middle,
   scan buttons riding in the header block. Progress + status messages
   break to their own full-width line beneath. */
.dash-card[data-card="library"] .library-status-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 32px;
    overflow: visible;
}
.dash-card[data-card="library"] .library-status-card::before {
    display: none;
}
.dash-card[data-card="library"] .library-status-glow {
    display: none;
}
.dash-card[data-card="library"] .library-status-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    flex: 0 1 auto;
    min-width: 300px;
}
.dash-card[data-card="library"] .library-status-icon {
    display: none;
}
.dash-card[data-card="library"] .library-status-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 8px;
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.25);
}
.dash-card[data-card="library"] .has-data .library-status-title::before {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}
.dash-card[data-card="library"] .scanning .library-status-title::before {
    background: rgb(var(--accent-light-rgb));
    animation: dashLibDotPulse 1.2s ease-in-out infinite;
}
.dash-card[data-card="library"] .needs-setup .library-status-title::before {
    background: #fbbf24;
}
.dash-card[data-card="library"] .empty-library .library-status-title::before {
    background: rgba(255, 255, 255, 0.35);
}
@keyframes dashLibDotPulse {
    50% { opacity: 0.35; }
}
.dash-card[data-card="library"] .library-status-info {
    flex: 1;
    min-width: 0;
}
.dash-card[data-card="library"] .library-status-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}
.dash-card[data-card="library"] .library-status-subtitle {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin: 2px 0 0;
}
.dash-card[data-card="library"] .library-status-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
}
.dash-card[data-card="library"] .library-status-btn {
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 7px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
}
.dash-card[data-card="library"] .library-status-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    transform: none;
}
.dash-card[data-card="library"] .library-status-btn.scanning {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.30);
    color: #f87171;
}
.dash-card[data-card="library"] .library-status-stats {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px 0;
    padding: 0;
    /* The base card rule draws a separator line above the stats block
       (style.css ~63917); invisible while the stats wore boxes, but on the
       bare strip it met the new dividers as a stray ⌐ over every stat. */
    margin-top: 0;
    border-top: none;
}
.dash-card[data-card="library"] .library-status-stat {
    display: flex;
    align-items: center;
    padding: 2px 28px;
    background: none;
    border: none;
    border-radius: 0;
}
.dash-card[data-card="library"] .library-status-stat + .library-status-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.dash-card[data-card="library"] .library-status-stat-icon {
    display: none;
}
.dash-card[data-card="library"] .library-status-stat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dash-card[data-card="library"] .library-status-stat-value {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.dash-card[data-card="library"] .library-status-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 3px;
}
/* Scan progress and the setup/status messages break out of the strip row
   onto their own full-width line. */
.dash-card[data-card="library"] .library-status-progress,
.dash-card[data-card="library"] .library-status-message {
    flex-basis: 100%;
    margin-top: 0;
}

/* Stats card — 2x3 grid of compact metric chips. Override the default
   stats-grid-dashboard which uses wider, taller cards. */
.dash-card[data-card="stats"] .stats-grid-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.dash-card[data-card="stats"] .stat-card-dashboard {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: none;
    min-height: 0;
}
.dash-card[data-card="stats"] .stat-card-dashboard:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.12);
}
.dash-card[data-card="stats"] .stat-card-title {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.dash-card[data-card="stats"] .stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 4px 0 0;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-card[data-card="stats"] .stat-card-subtitle {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.4);
    margin: 4px 0 0;
}

/* Activity feed — trim outer chrome */
.dash-card[data-card="activity"] .activity-feed-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    max-height: 360px;
    overflow-y: auto;
}

/* (the old dashboard syncs-card overrides retired with the Sync band —
   base .sync-history-card styles above stay for the sync page surfaces) */

/* Enrichment / rate monitor — VU-meter equalizer bars.
 *
 * Each service is a vertical bar capsule arranged in a flex row,
 * so the row stays symmetric at any service count (no orphan grid
 * cells when the service list isn't divisible by the column count).
 * Bar fill height = current rate / limit, with a 4% floor so idle
 * bars still show a sliver of accent.
 *
 * Variables on the host element:
 *   --eq-accent  service brand color (set per-bar from JS)
 *   --eq-track-h vertical track height (responsive override below)
 */
.dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer {
    --eq-track-h: 168px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    padding: 14px 4px 6px;
}

.rate-eq {
    --eq-accent: #888;
    --eq-glow: 0.04;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: center;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Avatar disc — circular chip above the bar carrying the service's
 * real brand logo. Dark glass backdrop with a thin accent ring +
 * accent-colored drop-shadow halo so the logo gets its breathing
 * room without losing the per-service color cue. ``--fallback``
 * variant kicks in via the ``<img>`` onerror handler when a CDN URL
 * breaks, restoring the accent-gradient + initial-letter look. */
.rate-eq-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.08),
            rgba(0, 0, 0, 0.35) 70%);
    border: 1px solid color-mix(in srgb, var(--eq-accent) 50%, rgba(255, 255, 255, 0.12));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px color-mix(in srgb, var(--eq-accent) 30%, transparent),
        0 0 0 0 color-mix(in srgb, var(--eq-accent) 35%, transparent);
    transition: box-shadow 0.3s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
}

.rate-eq-avatar-logo {
    width: 75%;
    height: 75%;
    object-fit: contain;
    object-position: center;
    display: block;
    /* The brand-color drop-shadow pops the logo against the dark
     * disc so even dark / multi-tone logos retain the per-service
     * cue without washing out. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 4px color-mix(in srgb, var(--eq-accent) 35%, transparent));
}

/* Per-service logo tweaks — brand assets vary in shape + foreground
 * contrast; these overrides normalise their presentation in the
 * dark-glass avatar disc.
 *
 * - Last.fm ships a square Twitter avatar PNG; clip it to a circle
 *   so it matches the rounded chip aesthetic and fills the disc.
 * - Tidal / Qobuz / Discogs / Amazon ship dark-foreground marks
 *   that disappear on the dark disc — invert to white silhouette
 *   so the logo reads. ``brightness(0) invert(1)`` is the canonical
 *   recipe for "render this image as pure white"; the per-service
 *   accent drop-shadow (inherited above) keeps the color cue. */
.rate-eq[data-svc="lastfm"] .rate-eq-avatar-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.rate-eq[data-svc="tidal"] .rate-eq-avatar-logo,
.rate-eq[data-svc="qobuz"] .rate-eq-avatar-logo,
.rate-eq[data-svc="discogs"] .rate-eq-avatar-logo,
.rate-eq[data-svc="amazon"] .rate-eq-avatar-logo {
    filter: brightness(0) invert(1)
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 4px color-mix(in srgb, var(--eq-accent) 60%, transparent));
}

/* Fallback variant — restores the original accent-gradient disc +
 * initial-letter glyph when the brand logo URL fails to load. */
.rate-eq-avatar--fallback {
    background:
        radial-gradient(circle at 30% 25%,
            color-mix(in srgb, var(--eq-accent) 65%, white 35%),
            var(--eq-accent) 55%,
            color-mix(in srgb, var(--eq-accent) 55%, black 45%) 100%);
}

.rate-eq-avatar-glyph {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Daily-budget ring — a conic progress rim hugging the avatar disc's inner
 * edge, filling as the day's API budget is spent. Color comes from JS
 * (green → amber → red, purple when bridged to Spotify Free). Drawn inside
 * the disc because the avatar clips overflow. */
.rate-eq-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--eq-budget-color, #4ade80) calc(var(--eq-budget, 0) * 360deg),
        transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 2;
}

.rate-eq.has-budget .rate-eq-avatar::after {
    opacity: 0.95;
}

/* Avatar halo / warn — GPU note: these used to animate box-shadow and
 * filter:brightness directly on the avatar, which forces a repaint every
 * frame, forever, on every active bar. The bright state is now painted ONCE
 * onto wrap pseudo-elements and only their OPACITY breathes — same visuals,
 * compositor-only. The wrap exists because the avatar clips its overflow. */
.rate-eq-avatar-wrap {
    position: relative;
    margin: 0 auto;
    width: fit-content;
    flex: 0 0 auto;
}

.rate-eq-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        0 4px 18px color-mix(in srgb, var(--eq-accent) 55%, transparent),
        0 0 0 5px color-mix(in srgb, var(--eq-accent) 12%, transparent);
    opacity: 0;
    pointer-events: none;
}

.rate-eq.active .rate-eq-avatar-wrap::before {
    animation: rate-eq-halo-breathe 2.8s ease-in-out infinite;
}

@keyframes rate-eq-halo-breathe {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.rate-eq:hover .rate-eq-avatar {
    transform: translateY(-1px) scale(1.05);
}

.rate-eq.rate-limited .rate-eq-avatar {
    background:
        radial-gradient(circle at 30% 25%, #ffb4b4, #ef4444 55%, #7a1a1a 100%);
    border-color: rgba(239, 68, 68, 0.5);
}

/* The brightness(1.35) warn pulse, as a white wash whose opacity breathes */
.rate-eq-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 255, 255, 0.30),
        rgba(255, 255, 255, 0.10) 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.rate-eq.rate-limited .rate-eq-avatar-wrap::after {
    animation: rate-eq-warn-breathe 1.1s ease-in-out infinite;
}

@keyframes rate-eq-warn-breathe {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.rate-eq:focus-visible {
    outline: 2px solid var(--eq-accent);
    outline-offset: 4px;
    border-radius: 14px;
}

.rate-eq:hover {
    transform: translateY(-2px);
}

/* Track: glassy vertical capsule with subtle vignette */
.rate-eq-track {
    position: relative;
    flex: 0 0 auto;
    height: var(--eq-track-h);
    border-radius: 12px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.04) 40%,
            rgba(0, 0, 0, 0.25) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -10px 24px rgba(0, 0, 0, 0.35);
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Reflection puddle — a soft accent-colored glow rendered as a
 * pseudo on the host button so it escapes the track's
 * ``overflow: hidden`` clipping. Sits between the track and the
 * meta column, intensifying with bar height to sell the "glass
 * surface" feel: the bar looks like it's standing on a polished
 * pane, not floating in space. Opacity is driven by --eq-glow
 * which the renderer sets proportional to the real (unclamped)
 * rate, so idle bars don't pollute the row with permanent
 * ground-light. */
.rate-eq::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    /* Anchored just above the meta column. Using a numeric inset
     * from the bottom keeps the puddle visually attached to the
     * track regardless of meta-block height. */
    bottom: 44px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--eq-accent) 75%, transparent) 0%,
        color-mix(in srgb, var(--eq-accent) 40%, transparent) 40%,
        transparent 70%);
    opacity: calc(var(--eq-glow, 0.04) * 1.1);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.6s;
    z-index: 0;
}

.rate-eq.rate-limited::after,
.rate-eq.danger::after {
    background: radial-gradient(ellipse at center,
        rgba(239, 68, 68, 0.75) 0%,
        rgba(239, 68, 68, 0.4) 40%,
        transparent 70%);
}

.rate-eq:hover .rate-eq-track {
    border-color: color-mix(in srgb, var(--eq-accent) 45%, rgba(255, 255, 255, 0.12));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -10px 24px rgba(0, 0, 0, 0.35),
        0 0 24px color-mix(in srgb, var(--eq-accent) 22%, transparent);
}

/* Horizontal tick marks — like a real VU meter */
.rate-eq-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0 11px,
        rgba(255, 255, 255, 0.04) 11px 12px
    );
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 100%);
}

/* The actual fill — accent gradient growing from the bottom */
.rate-eq-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4%;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--eq-accent) 90%, white 10%) 0%,
            var(--eq-accent) 35%,
            color-mix(in srgb, var(--eq-accent) 65%, transparent) 100%);
    border-radius: 0 0 11px 11px;
    transition: height 0.55s cubic-bezier(0.34, 1.2, 0.5, 1);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--eq-accent) 65%, white 35%),
        0 0 20px color-mix(in srgb, var(--eq-accent) 35%, transparent);
}

/* Bright glow strip at the top of the fill — the "VU peak" line */
.rate-eq-tip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: color-mix(in srgb, var(--eq-accent) 30%, white 70%);
    box-shadow:
        0 0 6px color-mix(in srgb, var(--eq-accent) 80%, white),
        0 0 14px color-mix(in srgb, var(--eq-accent) 60%, transparent);
    opacity: 0.85;
}

/* Peak-hold tick — sticks at the recent maximum and slowly falls, like a
 * hardware VU meter's peak LED. Position (bottom %) is driven from JS;
 * only visible while it's meaningfully above the live fill so idle bars
 * don't carry a stray line. */
.rate-eq-peak {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 4%;
    height: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--eq-accent) 55%, white 45%);
    box-shadow: 0 0 6px color-mix(in srgb, var(--eq-accent) 70%, transparent);
    opacity: 0;
    transition: bottom 0.9s linear, opacity 0.4s;
    pointer-events: none;
    z-index: 2;
}

.rate-eq-peak.visible {
    opacity: 0.75;
}

/* Cooldown drain — while a service is rate-limit banned, the track shows a
 * red column that DRAINS as the ban ticks down plus an m:ss countdown.
 * "Back in 4:00", not just "something's red". JS drives the fill height
 * (remaining/total) and timer text; .cooldown gates visibility. */
.rate-eq-cooldown {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
    z-index: 3;
}

.rate-eq.cooldown .rate-eq-cooldown {
    opacity: 1;
}

.rate-eq.cooldown .rate-eq-fill,
.rate-eq.cooldown .rate-eq-peak {
    opacity: 0.18;  /* the live VU yields the stage to the countdown */
}

.rate-eq-cooldown-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(239, 68, 68, 0.55) 0%,
        rgba(239, 68, 68, 0.28) 60%,
        rgba(239, 68, 68, 0.12) 100%);
    border-radius: 0 0 11px 11px;
    box-shadow: inset 0 1px 0 rgba(255, 120, 120, 0.5);
    transition: height 0.9s linear;
}

.rate-eq-cooldown-time {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 200, 200, 0.95);
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

/* Call embers — tiny accent sparks rising off the fill tip, spawned per
 * socket update in proportion to real traffic. Motion == actual API calls. */
.rate-eq-ember {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--eq-accent) 60%, white 40%);
    box-shadow: 0 0 6px var(--eq-accent);
    pointer-events: none;
    animation: rate-eq-ember-rise 1.4s ease-out forwards;
    z-index: 1;
}

@keyframes rate-eq-ember-rise {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    15%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(var(--ember-drift, 0px), -26px) scale(0.4); }
}

/* Recovery flash — the moment a ban expires the track blinks back alive */
.rate-eq.recovered .rate-eq-track {
    animation: rate-eq-recovered 1.2s ease-out;
}

@keyframes rate-eq-recovered {
    0% {
        border-color: rgba(74, 222, 128, 0.9);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 26px rgba(74, 222, 128, 0.55);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.06);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            inset 0 -10px 24px rgba(0, 0, 0, 0.35);
    }
}

/* Vertical shimmer scan — runs continuously when active */
.rate-eq-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, white 22%, transparent) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s;
}

.rate-eq.active .rate-eq-shimmer {
    opacity: 1;
    animation: rate-eq-shimmer-scan 2.6s linear infinite;
}

@keyframes rate-eq-shimmer-scan {
    0%   { transform: translateY(120%); opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translateY(-120%); opacity: 0; }
}

/* Active state — fill pulses subtly so the "alive" services radiate */
/* Active-fill breathing — GPU note: this used to animate the fill's
 * box-shadow (repaint every frame on every active bar, forever). The glow is
 * now STATIC at the old animation's midpoint and the breathing moved to the
 * tip's opacity, which composites for free. Reads the same at a glance. */
.rate-eq.active .rate-eq-fill {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--eq-accent) 65%, white 35%),
        0 0 25px color-mix(in srgb, var(--eq-accent) 42%, transparent);
}

.rate-eq.active .rate-eq-tip {
    animation: rate-eq-tip-breathe 2.4s ease-in-out infinite;
}

@keyframes rate-eq-tip-breathe {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Peak-flash — fires on a real upward step in cpm between socket
 * updates. Mimics a hardware VU meter's peak-detect LED: tip
 * briefly flares white-hot, the bar fill flashes brighter, and a
 * thin ring radiates from the top of the fill. Self-contained
 * 650ms one-shot; JS removes the class after the animation ends. */
.rate-eq.peak-flash .rate-eq-tip {
    animation: rate-eq-tip-flash 0.65s ease-out;
}

.rate-eq.peak-flash .rate-eq-fill {
    animation: rate-eq-fill-flash 0.65s ease-out;
}

@keyframes rate-eq-tip-flash {
    0% {
        background: #fff;
        height: 2px;
        opacity: 1;
        box-shadow:
            0 0 18px #fff,
            0 0 36px color-mix(in srgb, var(--eq-accent) 90%, white),
            0 0 60px color-mix(in srgb, var(--eq-accent) 60%, transparent);
        transform: translateY(0);
    }
    40% {
        height: 4px;
        opacity: 1;
        box-shadow:
            0 0 22px #fff,
            0 0 44px color-mix(in srgb, var(--eq-accent) 80%, white);
        transform: translateY(-2px);
    }
    100% {
        height: 2px;
        transform: translateY(0);
    }
}

@keyframes rate-eq-fill-flash {
    0%   { filter: brightness(1.55) saturate(1.25); }
    50%  { filter: brightness(1.25) saturate(1.15); }
    100% { filter: brightness(1)    saturate(1); }
}

/* Peak-flash also briefly intensifies the reflection puddle, so
 * the surface "ripples" with the call burst. */
.rate-eq.peak-flash::after {
    animation: rate-eq-puddle-flash 0.65s ease-out;
}

@keyframes rate-eq-puddle-flash {
    0%   { opacity: calc((var(--eq-glow, 0.04) + 0.45) * 1.2); filter: blur(7px); }
    100% { opacity: calc(var(--eq-glow, 0.04) * 1.2);          filter: blur(5px); }
}

/* Idle floor: keep the 4% sliver visibly alive — a slow breathe so
   the row reads as standby, not dead. */
.rate-eq:not(.active) .rate-eq-fill {
    animation: rate-eq-idle 4.2s ease-in-out infinite;
}

@keyframes rate-eq-idle {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 0.95; }
}

/* Rate-limited state overrides accent with red + faster pulse */
.rate-eq.rate-limited .rate-eq-fill,
.rate-eq.danger .rate-eq-fill {
    background:
        linear-gradient(180deg,
            #ff8a8a 0%,
            #ef4444 35%,
            rgba(239, 68, 68, 0.5) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 200, 200, 0.7),
        0 0 24px rgba(239, 68, 68, 0.5);
}

.rate-eq.rate-limited .rate-eq-tip,
.rate-eq.danger .rate-eq-tip {
    background: #ffd6d6;
    box-shadow: 0 0 8px #ef4444, 0 0 18px rgba(239, 68, 68, 0.6);
}

.rate-eq.rate-limited .rate-eq-fill {
    animation: rate-eq-warn 1.1s ease-in-out infinite;
}

@keyframes rate-eq-warn {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.4); }
}

/* Big floating count number — overlay on the track, top-center */
.rate-eq-value {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.02em;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.rate-eq.active .rate-eq-value {
    color: color-mix(in srgb, var(--eq-accent) 25%, white 75%);
    text-shadow:
        0 0 10px color-mix(in srgb, var(--eq-accent) 50%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Meta: state pill + service name under the bar */
.rate-eq-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.1;
}

.rate-eq-name {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.01em;
}

.rate-eq-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.rate-eq-state-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.rate-eq-state[data-status="running"] {
    color: #6ee7a7;
    border-color: rgba(110, 231, 167, 0.25);
    background: rgba(110, 231, 167, 0.08);
}
.rate-eq-state[data-status="running"] .rate-eq-state-dot {
    background: #6ee7a7;
    box-shadow: 0 0 6px #6ee7a7;
    animation: rate-eq-dot-pulse 1.4s ease-in-out infinite;
}

.rate-eq-state[data-status="paused"] {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
    background: rgba(251, 191, 36, 0.08);
}

.rate-eq-state[data-status="idle"] {
    color: rgba(255, 255, 255, 0.5);
}

.rate-eq-state[data-status="not_configured"] {
    color: rgba(255, 255, 255, 0.35);
}

.rate-eq.rate-limited .rate-eq-state {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
}

@keyframes rate-eq-dot-pulse {
    0%, 100% { box-shadow: 0 0 4px currentColor; }
    50%      { box-shadow: 0 0 10px currentColor, 0 0 18px currentColor; }
}

/* Responsive — tighten the bars on narrower viewports */
@media (max-width: 1499px) {
    .dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer {
        --eq-track-h: 156px;
    }
}

@media (max-width: 1099px) {
    .dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer {
        --eq-track-h: 140px;
        gap: 4px;
    }
    .rate-eq-value  { font-size: 16px; }
    .rate-eq-name   { font-size: 10px; }
    .rate-eq-state  { font-size: 8px; padding: 1px 6px; }
    .rate-eq-avatar { width: 28px; height: 28px; }
    .rate-eq-avatar-glyph { font-size: 10px; }
}

@media (max-width: 720px) {
    .dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer {
        --eq-track-h: 124px;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 14px;
    }
    .rate-eq { flex: 0 0 calc(20% - 6px); }
}

@media (max-width: 480px) {
    .rate-eq { flex: 0 0 calc(25% - 4px); }
    .dash-card[data-card="enrichment"] .rate-monitor-grid--equalizer {
        --eq-track-h: 108px;
    }
    .rate-eq-avatar { width: 26px; height: 26px; }
    .rate-eq-avatar-glyph { font-size: 9px; }
    .rate-eq-value { font-size: 14px; }
    .rate-eq-name { font-size: 9px; }
}

/* Keep the status pill + name inside their (often narrow) bar — labels like
   "Not configured" / "Yielding" are wider than a thin equalizer column and
   would otherwise spill over neighbours. Truncate instead of overflow. */
.rate-eq-state {
    max-width: 100%;
}
.rate-eq-state-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Active downloads container */
.dash-card[data-card="active-downloads"] #dashboard-downloads-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Soft scrollbar inside cards */
.dash-card *::-webkit-scrollbar { width: 7px; height: 7px; }
.dash-card *::-webkit-scrollbar-track { background: transparent; }
.dash-card *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 99px; }
.dash-card *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* Responsive breakpoints:
   - >=1500px (large desktop):    3-col bento grid (default)
   - 1100-1499px (laptop):        2-col bento; full cards span both
   - 700-1099px (tablet):         2-col bento; tighter sub-grids
   - <700px (mobile):             1-col stack
   - <480px (small mobile):       tightest padding/typography
*/

/* Laptop — 2-col bento */
@media (max-width: 1499px) {
    .dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .dash-card--wide {
        grid-column: span 2;
    }
    .dash-card--full {
        grid-column: 1 / -1;
    }
    /* On the 2-col grid Sync's span-2 already fills its row — Automations
       loses its desktop neighbour, so half-width would strand it next to
       an empty cell. Full width until the 3-col layout pairs them again. */
    .dash-card[data-card="automations"] {
        grid-column: 1 / -1;
    }
    .dash-card {
        padding: 20px 22px;
    }
    /* Services sub-grid: 2-up — each service tile keeps room for title + status + button */
    .dash-card[data-card="services"] .service-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .dash-card[data-card="services"] .service-card {
        padding: 12px 12px;
    }
    .dash-card[data-card="services"] .service-card-title {
        font-size: 12.5px;
    }
    .dash-card[data-card="services"] .service-card-status-text,
    .dash-card[data-card="services"] .service-card-response-time {
        font-size: 11px;
    }
    /* Stats: 3-col stays, value font shrinks slightly */
    .dash-card[data-card="stats"] .stats-grid-dashboard {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .dash-card[data-card="stats"] .stat-card-dashboard {
        padding: 10px 12px;
    }
    .dash-card[data-card="stats"] .stat-card-value {
        font-size: 19px;
    }
    .dash-card[data-card="stats"] .stat-card-title,
    .dash-card[data-card="stats"] .stat-card-subtitle {
        font-size: 10px;
    }
    /* Library strip: tighter metric spacing in the narrower cell */
    .dash-card[data-card="library"] .library-status-stat {
        padding: 2px 18px;
    }
    /* Enrichment full spans both cols — 10 tiles single row still fits */
    .dash-card[data-card="enrichment"] .rate-monitor-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

/* Tablet — 2-col bento, tighter */
@media (max-width: 1099px) {
    .dash-grid {
        gap: 14px;
    }
    .dash-card {
        padding: 18px 18px;
    }
    .dash-card__title {
        font-size: 16px;
    }
    .dash-card[data-card="services"] .service-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .dash-card[data-card="services"] .service-card {
        padding: 10px 10px;
    }
    .dash-card[data-card="services"] .service-card-button {
        font-size: 11px;
        padding: 5px 8px;
    }
    .dash-card[data-card="stats"] .stats-grid-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .dash-card[data-card="stats"] .stat-card-value {
        font-size: 18px;
    }
    .dash-card[data-card="enrichment"] .rate-monitor-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    /* The flat six-column sync row needs ~730px of card; tablet cards
       don't guarantee it. Same stack the phone uses, full-size art. */
    .syncband-row {
        grid-template-areas:
            "art main when"
            "art result actions"
            "owned owned owned";
        grid-template-columns: 46px 1fr auto;
        row-gap: 5px;
    }
}

/* Mobile — 1-col stack */
@media (max-width: 699px) {
    .dash-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dash-card--wide,
    .dash-card--full,
    .dash-card[data-card="sync"],
    .dash-card[data-card="automations"] {
        grid-column: auto;
    }
    .dash-autom-rows {
        max-height: 320px;
    }
    .dash-card--strip {
        padding: 12px 16px;
    }
    /* One column can't fit header + stats side by side — stack them. */
    .dash-card[data-card="library"] .library-status-header {
        min-width: 0;
        flex-basis: 100%;
    }
    /* The band stacks: art + name + countdown up top, result chips next,
       the ownership bar full-width beneath. Actions stay touchable. */
    .syncband-rows {
        max-height: 420px;
    }
    .syncband-row {
        grid-template-areas:
            "art main when"
            "art result actions"
            "owned owned owned";
        grid-template-columns: 40px 1fr auto;
        row-gap: 5px;
        padding: 9px 10px;
    }
    .syncband-art {
        width: 40px;
        height: 40px;
    }
    .dash-card {
        padding: 16px 16px;
        border-radius: 14px;
    }
    .dash-card__title {
        font-size: 15px;
    }
    .dash-card__sub {
        font-size: 12px;
    }
    .dash-card[data-card="services"] .service-status-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .dash-card[data-card="stats"] .stats-grid-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .dash-card[data-card="library"] .library-status-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 12px;
    }
    .dash-card[data-card="library"] .library-status-stat {
        padding: 0;
    }
    .dash-card[data-card="library"] .library-status-stat + .library-status-stat {
        border-left: none;
    }
    .dash-card[data-card="library"] .library-status-header {
        flex-wrap: wrap;
    }
    .dash-card[data-card="library"] .library-status-actions {
        flex-direction: row;
        width: 100%;
    }
    .dash-card[data-card="enrichment"] .rate-monitor-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .dash-card[data-card="enrichment"] .rate-gauge-card {
        padding: 8px 6px 6px;
    }
}

/* Small mobile — tightest */
@media (max-width: 480px) {
    .dash-grid {
        gap: 10px;
    }
    .dash-card {
        padding: 14px 12px;
    }
    .dash-card__head {
        margin-bottom: 12px;
    }
    .dash-card[data-card="stats"] .stats-grid-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-card[data-card="stats"] .stat-card-value {
        font-size: 20px;
    }
    .stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dash-card[data-card="enrichment"] .rate-monitor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dash-card[data-card="enrichment"] .gauge-card-name {
        font-size: 10px;
    }
}

/* ── Manual Library Match modal ───────────────────────────────────────────── */

/* Modal body: override playlist-modal-body padding; flex column so panels + matches fill height */
.mlm-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Two-panel search area — mirrors .server-compare-columns visual language */
.mlm-panels {
    display: flex;
    gap: 0;
    height: 280px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mlm-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mlm-panel.source {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Search input lives between the column header and the scrollable results */
.mlm-panel-search-wrap {
    padding: 10px 12px 4px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mlm-search {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.mlm-search:focus {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
}

/* Result rows live inside .server-col-scroll (reused directly) */
.mlm-result-row {
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.mlm-result-row:hover {
    background: rgba(255, 255, 255, 0.05);
}
.mlm-result-row.mlm-row-selected {
    background: rgba(var(--accent-rgb), 0.15);
    border-left: 3px solid rgb(var(--accent-light-rgb));
}

.mlm-row-title {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}
.mlm-row-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.mlm-row-ctx {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.mlm-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 20px 16px;
}
.mlm-error { color: #ef4444; }

/* Status message in footer */
.mlm-status-msg {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Existing matches section */
.mlm-existing-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Extra class on server-col-header inside the matches section */
.mlm-matches-header {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mlm-matches-wrap {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mlm-matches-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mlm-matches-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    padding: 8px 14px 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mlm-matches-table td {
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.mlm-matches-table tr:last-child td {
    border-bottom: none;
}
.mlm-matches-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.mlm-source-badge {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

.mlm-remove-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-size: 14px;
    padding: 3px 7px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.mlm-remove-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}


/* =====================================================================
 * Sync page tabs — icon-chip v2 layout
 *
 * 14+ tabs no longer fit in a single horizontal pill row. Collapse
 * each tab to a circular brand-logo chip; the active tab swells
 * into a pill that shows its label inline. Hover surfaces the
 * tab title attribute as a native tooltip. ``[data-link="true"]``
 * tabs (Spotify Link, Deezer Link, iTunes Link) carry a small
 * chain-link badge bottom-right so they disambiguate from their
 * native-source siblings (same brand logo, different source mode).
 *
 * Behavior untouched — same JS event handlers, same .active class,
 * same data-tab routing. CSS-only swap.
 * ===================================================================== */

.sync-tabs {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background:
        radial-gradient(ellipse at top,
            color-mix(in srgb, rgb(var(--accent-rgb)) 4%, transparent) 0%,
            rgba(0, 0, 0, 0.22) 70%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    align-items: center;
}

.sync-tab-button {
    /* Reset: drop flex:1 stretch + heavy padding, become a chip. */
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 999px;
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(0, 0, 0, 0.18) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    overflow: hidden;
    position: relative;
    transition:
        width 0.32s cubic-bezier(0.34, 1.2, 0.5, 1),
        padding 0.32s cubic-bezier(0.34, 1.2, 0.5, 1),
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.18s ease;
}

.sync-tab-button:hover:not(.active) {
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 14%, transparent) 0%,
            rgba(0, 0, 0, 0.18) 100%);
    border-color: color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 35%, rgba(255, 255, 255, 0.1));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Active state — stay the same 40px circle as the inactive chips (no
   swell) so the row never reflows when you switch source (SY1). The active
   chip reads by its brand-color fill; the source name shows in the panel
   header below the strip. */
.sync-tab-button.active {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 92%, white 8%),
        color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 78%, black 22%));
    border-color: color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 55%, transparent);
    color: #fff;
    box-shadow:
        0 4px 18px color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 28%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sync-tab-server.active {
    /* The Server Playlists tab kept its bespoke gradient — preserve it. */
    background: linear-gradient(135deg,
        rgba(var(--accent-rgb), 0.95),
        rgba(var(--accent-rgb), 0.75)) !important;
    color: #000 !important;
}

/* Per-tab accent. Used by both the active fill and the hover ring,
 * so each chip lights up in its brand color. */
.sync-tab-button[data-tab="spotify"],
.sync-tab-button[data-tab="spotify-public"]      { --sync-tab-accent: #1DB954; }
.sync-tab-button[data-tab="tidal"]               { --sync-tab-accent: #ff6600; }
.sync-tab-button[data-tab="qobuz"]               { --sync-tab-accent: #5b8dee; }
.sync-tab-button[data-tab="deezer"],
.sync-tab-button[data-tab="deezer-link"]         { --sync-tab-accent: #a238ff; }
.sync-tab-button[data-tab="itunes-link"]         { --sync-tab-accent: #fa586a; }
.sync-tab-button[data-tab="youtube"]             { --sync-tab-accent: #ff0000; }
.sync-tab-button[data-tab="beatport"]            { --sync-tab-accent: #01ff95; }
.sync-tab-button[data-tab="listenbrainz-sync"]   { --sync-tab-accent: #eb743b; }
.sync-tab-button[data-tab="lastfm-sync"]         { --sync-tab-accent: #d51007; }
.sync-tab-button[data-tab="soulsync-discovery-sync"] { --sync-tab-accent: #14b8a6; }

/* Active tabs use white-on-color, so the per-tab icon overrides
 * shipped in the original CSS apply automatically. Nothing to do
 * for the active-icon swap — handled by existing rules above. */

/* Icon scaling — chip is 40px, icon was 16px; size up to 20px so
 * the logo fills the chip naturally. */
.sync-tab-button .tab-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Label collapses to width 0 when not active, so the chip stays
 * circular. Reveals on .active via the gap + padding shift above. */
.sync-tab-label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: max-width 0.32s cubic-bezier(0.34, 1.2, 0.5, 1),
                opacity 0.22s ease;
}

/* Labels stay collapsed for every chip (icon-only strip); the active
   source is named by the panel header, so the chip needn't swell (SY1). */

/* Chain-link badge for the ``Link`` variants (Spotify Link, Deezer
 * Link, iTunes Link). Bottom-right corner of the chip, accent-tinted
 * disc with a tiny link glyph. Disambiguates same-brand chips at
 * a glance without forcing the label to always be visible. */
.sync-tab-button[data-link="true"]::after {
    content: '';
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        color-mix(in srgb, var(--sync-tab-accent, rgb(var(--accent-rgb))) 85%, black 15%)
        center / 70% no-repeat
        url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
    border: 1.5px solid #1a1d28;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* When the link-variant tab is active, the badge inherits the
 * darker outline of the now-bright pill — bump the border to keep
 * contrast against the brand-color fill. */
.sync-tab-button[data-link="true"].active::after {
    border-color: rgba(0, 0, 0, 0.45);
}

/* Divider between Server Playlists and the rest — slim it down so
 * it doesn't dominate the compacted row. */
.sync-tab-divider {
    height: 24px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive — collapse chip size on smaller widths to fit the row. */
@media (max-width: 1099px) {
    .sync-tab-button {
        width: 36px;
        height: 36px;
    }
    .sync-tab-button .tab-icon { width: 18px; height: 18px; }
    .sync-tab-button.active { padding: 0 12px 0 8px; }
    .sync-tab-label { font-size: 11px; }
}

@media (max-width: 720px) {
    .sync-tabs {
        gap: 4px;
        padding: 6px;
    }
    .sync-tab-button {
        width: 32px;
        height: 32px;
    }
    .sync-tab-button .tab-icon { width: 16px; height: 16px; }
    .sync-tab-button[data-link="true"]::after {
        width: 12px;
        height: 12px;
        border-width: 1px;
    }
    .sync-tab-divider { display: none; }
}


/* =====================================================================
 * Auto-Sync Manager — v2 visual overhaul
 *
 * Selector-based restyle of the modal that matches the rest of the
 * app: deeper glass surfaces, accent-color radial washes, gradient
 * borders, dashboard-style stat tiles, premium tabs, refined
 * sidebar / board / cards / editor. Functionality is untouched —
 * every selector here exists in the original block above; this
 * section just wins on cascade order. Delete the entire block to
 * revert.
 * ===================================================================== */


/* — Backdrop: deeper blur + subtle accent radial wash so the modal
 *   feels like it's emerging from the dim app underneath. */
.auto-sync-overlay {
    background:
        radial-gradient(ellipse at top,
            color-mix(in srgb, rgb(var(--accent-rgb)) 9%, transparent) 0%,
            rgba(0, 0, 0, 0.78) 55%,
            rgba(0, 0, 0, 0.86) 100%);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
}


/* — Modal shell: glassy gradient card with thin accent border +
 *   inner top-edge highlight. Same architecture as the dashboard
 *   .dash-card so this modal reads as part of the same UI. */
.auto-sync-modal {
    background:
        radial-gradient(ellipse at 0% 0%,
            color-mix(in srgb, rgb(var(--accent-rgb)) 6%, transparent) 0%,
            transparent 45%),
        linear-gradient(165deg,
            rgba(22, 25, 36, 0.94) 0%,
            rgba(14, 16, 24, 0.96) 50%,
            rgba(10, 12, 18, 0.97) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: 22px;
    box-shadow:
        0 32px 96px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}


/* — Header: tighter typography, accent-tinted eyebrow, bigger
 *   title. Adds a hairline accent line below for separation
 *   instead of the flat border. */
.auto-sync-header {
    padding: 26px 32px 22px;
    border-bottom: none;
    background:
        linear-gradient(180deg, transparent 88%, rgba(var(--accent-rgb), 0.06) 100%);
    position: relative;
}

.auto-sync-header::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.35) 30%,
        rgba(var(--accent-rgb), 0.35) 70%,
        transparent);
    opacity: 0.6;
}

.auto-sync-header h3 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, rgb(var(--accent-light-rgb)) 65%, white 35%) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.auto-sync-eyebrow {
    color: rgb(var(--accent-light-rgb));
    font-weight: 800;
    letter-spacing: 0.16em;
    opacity: 0.95;
}

.auto-sync-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-close:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fff;
    transform: rotate(90deg);
}


/* — KPI summary tiles: match dashboard .dash-card aesthetic.
 *   Inset gradient + accent-tinted top-edge highlight on hover. */
.auto-sync-summary {
    padding: 18px 28px 16px;
    border-bottom: none;
    gap: 12px;
}

.auto-sync-summary div {
    padding: 14px 16px;
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-summary div::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.auto-sync-summary div:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}

.auto-sync-summary div:hover::before {
    opacity: 1;
}

.auto-sync-summary span {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, rgb(var(--accent-light-rgb)) 50%, white 50%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.auto-sync-summary small {
    margin-top: 6px;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
}


/* — Live monitor strip: distinct glass panel with accent kicker. */
.auto-sync-monitor {
    padding: 14px 28px 16px;
    border-bottom: none;
    background:
        linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.03) 0%,
            transparent 100%);
}

.auto-sync-monitor-kicker {
    color: rgb(var(--accent-light-rgb));
    letter-spacing: 0.14em;
    font-weight: 800;
}

.auto-sync-monitor-card {
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 12px;
}

.auto-sync-monitor-card.running {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.12),
        0 0 24px rgba(74, 222, 128, 0.08);
}

.auto-sync-monitor-card.error {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.12),
        0 0 24px rgba(239, 68, 68, 0.08);
}


/* — Intro / refresh button row + ghost-style refresh button. */
.auto-sync-board-intro,
.auto-sync-history-intro {
    padding: 16px 28px 14px;
    border-bottom: none;
    position: relative;
}

.auto-sync-board-intro::after,
.auto-sync-history-intro::after {
    content: '';
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent);
}

.auto-sync-monitor-head button,
.auto-sync-board-intro button,
.auto-sync-history-intro button {
    height: 32px;
    padding: 0 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 99px;
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.1) 0%,
            rgba(var(--accent-rgb), 0.04) 100%);
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-monitor-head button:hover,
.auto-sync-board-intro button:hover,
.auto-sync-history-intro button:hover {
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.2) 0%,
            rgba(var(--accent-rgb), 0.1) 100%);
    border-color: rgba(var(--accent-rgb), 0.45);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.18);
}


/* — Tabs: underline-style with accent fill + soft glow on active.
 *   Matches the underline-tabs pattern used elsewhere in the app. */
.auto-sync-tabs {
    padding: 0 28px;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
}

.auto-sync-tabs button {
    padding: 12px 18px;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s, border-color 0.2s;
    position: relative;
}

.auto-sync-tabs button:hover {
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
}

.auto-sync-tabs button.active {
    color: rgb(var(--accent-light-rgb));
    background: transparent;
    border-bottom-color: rgb(var(--accent-rgb));
    text-shadow: 0 0 16px color-mix(in srgb, rgb(var(--accent-rgb)) 50%, transparent);
}

.auto-sync-tabs button.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 60%;
    height: 8px;
    background: radial-gradient(ellipse at center,
        rgba(var(--accent-rgb), 0.35) 0%,
        transparent 70%);
    filter: blur(2px);
    pointer-events: none;
}


/* — Sidebar: dense glass panel, source groups as collapsible-feel
 *   cards, filter input pill. */
.auto-sync-sidebar {
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.28) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.auto-sync-sidebar-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb));
    opacity: 0.9;
}

.auto-sync-sidebar-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}

.auto-sync-sidebar-search:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--accent-rgb), 0.45);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.auto-sync-source-group {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.025) 0%,
            rgba(255, 255, 255, 0.012) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px;
}

.auto-sync-source-title {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.auto-sync-source-title-label {
    /* Wrap the label text so the inline-flex container doesn't
       collapse line-height when the logo isn't loaded yet. */
    display: inline-block;
    line-height: 1;
}

/* Source-group logo chip — matches the dashboard equalizer
   avatar treatment: dark glass disc, accent-tinted ring, logo
   sized at 70% with a brand-colored drop-shadow. Dark-foreground
   marks (tidal / qobuz / amazon) invert to white silhouette so
   they read against the disc, same as the equalizer overrides. */
.auto-sync-source-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.08),
            rgba(0, 0, 0, 0.35) 70%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: contain;
    padding: 2px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Last.fm's source icon is a square avatar PNG — clip it to a
   circle so the chip reads as a uniform disc just like the
   equalizer avatar does. */
.auto-sync-source-icon[data-svc="lastfm"] {
    padding: 0;
    object-fit: cover;
}

/* Dark-foreground marks: invert to white silhouette so the logo
   reads against the dark glass disc. Matches the equalizer
   ``brightness(0) invert(1)`` recipe for Tidal / Qobuz / Discogs
   / Amazon. */
.auto-sync-source-icon[data-svc="tidal"],
.auto-sync-source-icon[data-svc="qobuz"],
.auto-sync-source-icon[data-svc="itunes_link"] {
    filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}


/* — Sidebar playlist tile: dense glass row with accent border on
 *   the unscheduled state, accent fill on the scheduled state. */
.auto-sync-playlist {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-playlist::before {
    background: linear-gradient(180deg,
        rgb(var(--accent-light-rgb)) 0%,
        rgb(var(--accent-rgb)) 100%);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
}

.auto-sync-playlist:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.08) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.auto-sync-playlist.scheduled {
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.12) 0%,
            rgba(var(--accent-rgb), 0.04) 100%);
    border-color: rgba(var(--accent-rgb), 0.35);
}


/* — Board: dark canvas with subtle radial spotlight + columns
 *   as glass cards with accent-tinted headers. */
.auto-sync-board {
    background:
        radial-gradient(ellipse at 50% -20%,
            color-mix(in srgb, rgb(var(--accent-rgb)) 4%, transparent) 0%,
            transparent 60%);
    padding: 18px 24px;
    gap: 14px;
}

.auto-sync-column {
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.015) 8%,
            rgba(0, 0, 0, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: border-color 0.25s, box-shadow 0.25s;
    overflow: hidden;
    position: relative;
}

.auto-sync-column::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.3),
        transparent);
}

.auto-sync-column-head {
    background:
        linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.06) 0%,
            transparent 100%);
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.auto-sync-column-head > span:first-child {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.auto-sync-column-head small {
    color: rgba(var(--accent-light-rgb), 0.65);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
}

.auto-sync-column.drag-over {
    border-color: rgba(var(--accent-rgb), 0.6);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.4),
        0 0 32px rgba(var(--accent-rgb), 0.2),
        inset 0 0 40px rgba(var(--accent-rgb), 0.06);
}

.auto-sync-column.custom {
    border-style: dashed;
    border-color: rgba(var(--accent-rgb), 0.25);
}


/* — Drop hint: dashed glassy callout that animates on the
 *   column hover. */
.auto-sync-drop-hint {
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background:
        radial-gradient(ellipse at center,
            rgba(var(--accent-rgb), 0.04) 0%,
            transparent 70%);
    padding: 22px 14px;
    margin: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-drop-hint strong {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.auto-sync-drop-hint span {
    display: block;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    line-height: 1.5;
}

.auto-sync-column.drag-over .auto-sync-drop-hint {
    border-color: rgba(var(--accent-rgb), 0.6);
    background:
        radial-gradient(ellipse at center,
            rgba(var(--accent-rgb), 0.15) 0%,
            rgba(var(--accent-rgb), 0.04) 60%,
            transparent 90%);
    color: rgb(var(--accent-light-rgb));
}

.auto-sync-column.drag-over .auto-sync-drop-hint strong {
    color: rgb(var(--accent-light-rgb));
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}


/* — Scheduled cards: refined glass + accent left-edge stripe.
 *   Hourly + weekly variants both inherit. */
.auto-sync-scheduled-card {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.045) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.15) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 13px;
    margin: 10px 12px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-scheduled-card::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg,
        rgb(var(--accent-light-rgb)),
        rgb(var(--accent-rgb)));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.auto-sync-scheduled-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.auto-sync-scheduled-card.disabled {
    opacity: 0.55;
}

.auto-sync-scheduled-card.disabled::before {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.auto-sync-scheduled-card.failing::before {
    background: linear-gradient(180deg, #fca5a5, #ef4444);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.auto-sync-scheduled-card.warning::before {
    background: linear-gradient(180deg, #fde047, #fbbf24);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.auto-sync-scheduled-name {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}

.auto-sync-scheduled-meta {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* — Card buttons: pill primary + ghost secondary, matching the
 *   app-wide button language. */
.auto-sync-scheduled-card button.run {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, rgb(var(--accent-rgb)) 95%, white 5%) 0%,
            rgb(var(--accent-rgb)) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    border-radius: 99px;
    padding: 4px 12px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 2px 8px rgba(var(--accent-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.auto-sync-scheduled-card button.run:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(var(--accent-rgb), 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, rgb(var(--accent-rgb)) 85%, white 15%) 0%,
            color-mix(in srgb, rgb(var(--accent-rgb)) 95%, white 5%) 100%);
}

.auto-sync-scheduled-card button.run:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

.auto-sync-scheduled-card button:not(.run) {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-scheduled-card button:not(.run):hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fff;
    transform: rotate(90deg) scale(1.05);
}


/* — Timing pills inside scheduled cards: accent for primary, soft
 *   glass for tz / next-run. */
.auto-sync-scheduled-timing span {
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.18) 0%,
            rgba(var(--accent-rgb), 0.08) 100%);
    color: rgb(var(--accent-light-rgb));
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.auto-sync-scheduled-timing small {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
}


/* — History tab: rows styled like the dashboard's Recent Activity
 *   strip but bigger / scannable. */
.auto-sync-history-intro strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 800;
    letter-spacing: -0.005em;
}

.auto-sync-history-intro span {
    color: rgba(255, 255, 255, 0.45);
}

.auto-sync-history-row {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-history-row:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.06) 0%,
            rgba(255, 255, 255, 0.02) 100%);
    transform: translateY(-1px);
}

.auto-sync-history-status {
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    border-color: transparent;
}

.auto-sync-history-status.completed,
.auto-sync-history-status.finished {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}

.auto-sync-history-status.error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.auto-sync-history-status.skipped {
    background: rgba(250, 204, 21, 0.1);
    color: #fde047;
    border-color: rgba(250, 204, 21, 0.3);
}


/* — Bulk schedule popover: glass card with accent border. */
.auto-sync-bulk-menu {
    background:
        linear-gradient(160deg,
            rgba(20, 22, 32, 0.96) 0%,
            rgba(12, 14, 22, 0.97) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 16px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.auto-sync-bulk-menu-title {
    color: rgb(var(--accent-light-rgb));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 10px;
}

.auto-sync-bulk-menu button {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-bulk-menu button:hover {
    background:
        linear-gradient(160deg,
            rgba(var(--accent-rgb), 0.16) 0%,
            rgba(var(--accent-rgb), 0.06) 100%);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: #fff;
    transform: translateY(-1px);
}

.auto-sync-bulk-menu-unschedule {
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.auto-sync-bulk-menu-unschedule:hover {
    background:
        linear-gradient(160deg,
            rgba(239, 68, 68, 0.18) 0%,
            rgba(239, 68, 68, 0.06) 100%) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #fff !important;
}


/* — Weekly editor popover: full-screen glass overlay matching
 *   the version modal / tag-preview modal vibe. */
.auto-sync-weekly-editor {
    background:
        radial-gradient(ellipse at 0% 0%,
            color-mix(in srgb, rgb(var(--accent-rgb)) 7%, transparent) 0%,
            transparent 40%),
        linear-gradient(165deg,
            rgba(20, 22, 32, 0.97) 0%,
            rgba(12, 14, 22, 0.97) 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 22px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auto-sync-weekly-editor-head h4 {
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, rgb(var(--accent-light-rgb)) 60%, white 40%) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.auto-sync-weekly-day-toggle {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 99px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.auto-sync-weekly-day-toggle:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.06);
}

.auto-sync-weekly-day-toggle.active {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, rgb(var(--accent-rgb)) 95%, white 5%) 0%,
            rgb(var(--accent-rgb)) 100%);
    border-color: rgba(var(--accent-rgb), 0.55);
    color: #fff;
    box-shadow:
        0 2px 8px rgba(var(--accent-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.auto-sync-weekly-editor-save {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, rgb(var(--accent-rgb)) 95%, white 5%) 0%,
            rgb(var(--accent-rgb)) 100%) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.55) !important;
    box-shadow:
        0 4px 14px rgba(var(--accent-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: 99px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auto-sync-weekly-editor-cancel,
.auto-sync-weekly-editor-delete {
    border-radius: 99px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* — Empty / unavailable / monitor empty states. */
.auto-sync-empty,
.auto-sync-monitor-empty {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(0, 0, 0, 0.15) 100%);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.4);
    padding: 18px;
    text-align: center;
    font-size: 12px;
}

.auto-sync-source-group-disabled {
    opacity: 0.55;
}


/* — Soft scrollbars to match the dashboard. */
.auto-sync-modal *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.auto-sync-modal *::-webkit-scrollbar-track {
    background: transparent;
}

.auto-sync-modal *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.auto-sync-modal *::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.3);
    background-clip: padding-box;
}

/* ===========================================================================
   Manage Enrichment Workers modal (enrichment-manager.js)
   =========================================================================== */
.em-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 18px 0 8px;
    margin-left: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(var(--accent-rgb), 0.07) 100%);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1.5px solid rgba(var(--accent-rgb), 0.28);
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow:
        0 4px 16px rgba(var(--accent-rgb), 0.18),
        0 2px 8px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.08);
}
.em-manage-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: scale(1.04);
    box-shadow:
        0 6px 22px rgba(var(--accent-rgb), 0.32),
        0 3px 12px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.12);
}
.em-manage-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.55));
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}
.em-manage-btn-logo { width: 22px; height: 22px; object-fit: contain; display: block; }
.em-manage-btn-label { background: linear-gradient(90deg, #fff, rgba(255,255,255,0.85)); -webkit-background-clip: text; background-clip: text; }

.enrichment-manager-modal {
    position: relative;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 55%),
        radial-gradient(100% 70% at 100% 0%, rgba(255,255,255,0.04), transparent 50%),
        linear-gradient(150deg, #1c1c1f 0%, #131316 55%, #0f0f12 100%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.09);
    width: 1150px;
    max-width: 95vw;
    height: 82vh;
    max-height: 860px;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 30px 90px rgba(0,0,0,0.65),
        0 0 0 1px rgba(var(--accent-rgb), 0.12),
        inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
}
/* Hairline top accent line across the whole modal. */
.enrichment-manager-modal::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.6), transparent);
    z-index: 2;
}
/* Top bar (rebuilt header) */
.em-topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 15px 18px; position: relative;
    background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.05) 45%, transparent 78%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.em-topbar-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.5));
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.em-topbar-icon span { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.em-topbar-logo { width: 32px; height: 32px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.em-topbar-titles { flex: 1 1 auto; min-width: 0; }
.em-topbar-title {
    margin: 0; font-size: 19px; font-weight: 800; letter-spacing: 0.2px;
    background: linear-gradient(90deg, #fff, rgba(255,255,255,0.72));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.em-topbar-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 1px; }

/* Global 'process first everywhere' control */
.em-global { display: flex; align-items: center; gap: 11px; flex: 0 0 auto;
    padding: 6px 6px 6px 12px; border-radius: 13px;
    background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); }
.em-global-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    color: rgba(255,255,255,0.4); line-height: 1.25; text-align: right; }
.em-global-label span { color: rgba(255,255,255,0.7); }
.em-global-tabs { display: inline-flex; gap: 3px; padding: 3px; background: rgba(255,255,255,0.05);
    border-radius: 9px; border: 1px solid rgba(255,255,255,0.07); }
.em-global-tabs button { padding: 6px 12px; border: none; background: transparent; border-radius: 7px;
    color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
.em-global-tabs button:hover { color: #fff; background: rgba(255,255,255,0.06); }
.em-global-tabs button.active { background: rgb(var(--accent-rgb)); color: #fff; box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.5); }

.em-topbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.em-icon-btn--close { font-size: 20px; }

.em-body { display: flex; flex: 1 1 auto; min-height: 0; }

/* Left rail */
.em-rail {
    flex: 0 0 230px;
    border-right: 1px solid rgba(255,255,255,0.07);
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.em-worker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.em-worker-row { position: relative; }
.em-worker-row:hover { background: rgba(255,255,255,0.05); }
.em-worker-row.active {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.4);
}
.em-worker-row.active::before {
    content: '';
    position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--accent-rgb));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}
/* Circular glowing logo chip — mirrors the dashboard enrichment bubbles. */
.em-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1.5px solid color-mix(in srgb, var(--em-accent, #888) 45%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--em-accent, #888) 30%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.em-icon--lg { width: 52px; height: 52px; border-width: 2px; }
.em-icon-img { width: 66%; height: 66%; object-fit: contain; display: block; }
.em-icon-letter { font-weight: 800; font-size: 15px; color: var(--em-accent, #fff); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.em-icon--lg .em-icon-letter { font-size: 22px; }
.em-worker-row:hover .em-icon { transform: scale(1.08); }
.em-worker-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.em-worker-name { color: #eee; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-worker-sub { font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-rail-cov { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 2px; }
.em-rail-cov-fill { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--accent, #4ade80) 70%, transparent); background: rgb(var(--accent-rgb)); transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.em-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #555; }
.em-dot--running { background: #1db954; box-shadow: 0 0 8px #1db954; }
.em-dot--idle { background: #4a90d9; }
.em-dot--paused { background: #e0a93b; }
.em-dot--ratelimited { background: #e05b5b; box-shadow: 0 0 8px #e05b5b; }
.em-dot--disabled, .em-dot--stopped { background: #555; }

/* Right panel */
.em-panel {
    flex: 1 1 auto;
    min-width: 0;
    padding: 18px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.em-panel-header { flex: 0 0 auto; }
.em-ph-top { display: flex; align-items: center; gap: 14px; }
.em-ph-titles { flex: 1 1 auto; min-width: 0; }
.em-ph-name { font-size: 19px; font-weight: 800; color: #fff; }
.em-ph-sub { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.em-ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.em-muted { color: rgba(255,255,255,0.45); }

.em-pill {
    padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.em-pill--running { background: rgba(29,185,84,0.18); color: #4ade80; }
.em-pill--idle { background: rgba(74,144,217,0.18); color: #7fb5ec; }
.em-pill--paused { background: rgba(224,169,59,0.18); color: #f0c060; }
.em-pill--ratelimited { background: rgba(224,91,91,0.2); color: #ff8b8b; }
.em-pill--disabled, .em-pill--stopped { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

.em-chip {
    padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
}
.em-chip--err { background: rgba(224,91,91,0.18); color: #ff8b8b; }
.em-chip--nf { background: rgba(224,91,91,0.15); color: #ff9b9b; }
.em-chip--pend { background: rgba(224,169,59,0.15); color: #f0c060; }

.em-btn {
    padding: 8px 14px; border-radius: 9px; border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.15); color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s ease;
}
.em-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.28); }
.em-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.em-btn--go { background: rgba(29,185,84,0.2); border-color: rgba(29,185,84,0.5); }
.em-btn--sm { padding: 5px 10px; font-size: 12px; }
.em-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.7); }
.em-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); }

/* Stat cards */
.em-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; flex: 0 0 auto; }
.em-stat-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.em-stat-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.3); }
.em-bar-fill { box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5); }
.em-stat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.em-stat-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.6); }
.em-stat-pct { font-size: 20px; font-weight: 800; color: #fff; }
.em-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.em-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(var(--accent-rgb),0.7), rgba(var(--accent-rgb),1)); transition: width 0.4s ease; }
.em-stat-legend { display: flex; gap: 10px; margin-top: 9px; font-size: 11px; flex-wrap: wrap; }
.em-leg--matched { color: #4ade80; }
.em-leg--nf { color: #ff9b9b; }
.em-leg--pend { color: #f0c060; }

/* Unmatched browser */
.em-unmatched { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 10px; }
.em-unmatched-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.em-tabs { display: flex; gap: 6px; }
.em-tab {
    padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: transparent; color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 600; cursor: pointer;
}
.em-tab.active { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.4); color: #fff; }
.em-filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.em-select, .em-search {
    padding: 8px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; color: #fff; font-size: 13px;
}
.em-search { width: 100%; min-width: 0; }
.em-search:focus, .em-select:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); }

.em-unmatched-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.em-row {
    display: flex; align-items: center; gap: 13px; padding: 10px 14px 10px 16px;
    background: linear-gradient(100deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.07); border-radius: 12px;
    position: relative;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
/* status stripe down the left edge */
.em-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: rgba(255,255,255,0.15);
}
.em-row--nf::before { background: #e0586b; }
.em-row--pend::before { background: #f0c060; }
.em-row:hover {
    transform: translateX(2px);
    background: linear-gradient(100deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border-color: rgba(var(--em-accent-rgb, 255,255,255), 0.22);
}
.em-row-img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.em-row-img--ph {
    position: relative; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.28); font-size: 18px;
}
.em-row-img-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.em-row-info { flex: 1 1 auto; min-width: 0; }
.em-row-name { font-size: 14.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-row-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 11px; }
.em-row-actions { display: flex; gap: 6px; flex: 0 0 auto; opacity: 0.85; transition: opacity 0.15s ease; }
.em-row:hover .em-row-actions { opacity: 1; }
.em-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,0.55); font-size: 15px; }
.em-empty-emoji { font-size: 38px; margin-bottom: 10px; opacity: 0.85; }
.em-pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex: 0 0 auto; padding-top: 4px; font-size: 12px; }

/* --- Motion: entrance / exit + scroll lock --- */
body.em-scroll-lock { overflow: hidden; }
.em-overlay { transition: opacity 0.22s ease, backdrop-filter 0.22s ease; }
.em-overlay.em-closing { opacity: 0; }
@keyframes em-pop-in {
    from { opacity: 0; transform: translateY(34px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Springy rise (same easing the worker orbs reveal with) + grows from the
   bottom, toward the Manage Workers button it launched from. */
.em-in { animation: em-pop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: center bottom; }

/* The worker rail assembles like the orbs expanding: each chip springs in
   (scale 0.4→1, same orb easing), staggered, with a brief pulse of its own
   brand colour — so opening the modal mirrors the orb motion AND walks your eye
   across every worker + its live state as they land. */
@keyframes em-rail-reveal {
    0%   { opacity: 0; transform: translateX(-14px) scale(0.4); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) scale(1); box-shadow: none; }
}
@keyframes em-rail-glow {
    0%, 100% { box-shadow: none; }
    45%      { box-shadow: inset 0 0 0 1px rgba(var(--row-accent, 120,120,120), 0.6), 0 0 16px rgba(var(--row-accent, 120,120,120), 0.45); }
}
.em-in .em-worker-row {
    animation:
        em-rail-reveal 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        em-rail-glow 0.7s ease-out both;
    /* modal settles first (~0.14s), then workers cascade in */
    animation-delay: calc(0.14s + var(--i, 0) * 0.05s);
}
@media (prefers-reduced-motion: reduce) {
    .em-in { animation-duration: 0.2s; }
    .em-in .em-worker-row { animation: none; }
}
.em-overlay.em-closing .enrichment-manager-modal { transform: scale(0.98); opacity: 0; transition: all 0.16s ease; }
.enrichment-manager-modal:focus { outline: none; }

/* --- Header actions / refresh --- */
.em-header-actions { display: flex; align-items: center; gap: 8px; }
.em-icon-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
    border: none; cursor: pointer; font-size: 16px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.em-icon-btn:hover { background: rgba(255,255,255,0.16); transform: rotate(15deg); }
.em-icon-btn.em-spinning { animation: em-spin 0.6s linear; }
@keyframes em-spin { to { transform: rotate(360deg); } }

.em-stat-pct-sym { font-size: 13px; opacity: 0.6; margin-left: 1px; }

/* --- Skeleton loaders --- */
.em-skel {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.06); border-radius: 6px;
}
.em-skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    transform: translateX(-100%); animation: em-shimmer 1.3s infinite;
}
@keyframes em-shimmer { 100% { transform: translateX(100%); } }
.em-skel-line { height: 11px; }
.em-skel-bar { height: 7px; margin: 12px 0; border-radius: 999px; }
.em-skel-card { display: flex; flex-direction: column; }
.em-skel-row .em-row-img { background: rgba(255,255,255,0.06); }
.em-skel-row { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .enrichment-manager-modal.em-in,
    .em-icon-btn.em-spinning,
    .em-skel::after { animation: none; }
    .em-bar-fill, .em-rail-cov-fill { transition: none; }
}

/* --- Narrow screens: rail becomes a horizontal strip --- */
@media (max-width: 760px) {
    .enrichment-manager-modal { height: 90vh; }
    .em-body { flex-direction: column; }
    .em-rail { flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .em-worker-row { flex: 0 0 auto; }
    .em-worker-meta { display: none; }
}

/* ===== Panel polish: hero header, accent theming, segmented stats ===== */
/* The panel sets --em-accent / --em-accent-rgb to the selected worker colour. */
.em-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.4); flex: 0 0 auto;
}
.em-section-label--inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.em-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 19px; padding: 0 7px; border-radius: 999px;
    background: rgba(var(--em-accent-rgb, 99,102,241), 0.2);
    color: rgb(var(--em-accent-rgb, 129,140,248));
    font-size: 11px; font-weight: 800; letter-spacing: 0;
}

/* Hero header */
.em-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(var(--em-accent-rgb, 99,102,241), 0.16), rgba(var(--em-accent-rgb, 99,102,241), 0.03) 60%),
        rgba(255,255,255,0.03);
    border: 1px solid rgba(var(--em-accent-rgb, 99,102,241), 0.22);
}
.em-hero-glow {
    position: absolute; top: -60%; right: -10%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(var(--em-accent-rgb, 99,102,241), 0.22), transparent 70%);
    pointer-events: none;
}
/* Gentle 'alive' pulse while the worker is actively running. */
.em-hero--live .em-hero-glow { animation: em-glow-pulse 3.2s ease-in-out infinite; }
@keyframes em-glow-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .em-hero--live .em-hero-glow { animation: none; } }
.em-hero .em-icon { width: 56px; height: 56px; }
.em-hero .em-ph-titles { flex: 1 1 auto; min-width: 0; z-index: 1; }
.em-ph-nameline { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.em-ph-name-sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.45); }
.em-hero .em-ph-actions { z-index: 1; }

/* Combined coverage + processing-order cards (click to enrich a group first) */
.em-section-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.35); font-size: 11px; }
.em-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; flex: 0 0 auto; }
.em-card {
    display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;
    padding: 14px; border-radius: 14px; position: relative; overflow: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1.5px solid rgba(255,255,255,0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.em-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--em-accent-rgb, 99,102,241), 0.45);
    background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
}
.em-card-top { display: flex; align-items: center; gap: 8px; }
.em-card-glyph { font-size: 15px; }
.em-card-title { font-size: 12.5px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.em-card-pct { margin-left: auto; font-size: 21px; font-weight: 800; color: #fff; line-height: 1; }
.em-card-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); white-space: nowrap; }
.em-card-badge--pin { background: rgba(var(--em-accent-rgb, 99,102,241), 0.28); color: #fff; }
.em-card-badge--now { background: rgba(74,222,128,0.2); color: #4ade80; }
.em-card-badge--done { background: rgba(74,222,128,0.14); color: rgba(74,222,128,0.85); }
.em-card .em-stat-legend { gap: 12px; margin-top: 0; }
.em-card .em-leg { font-size: 11.5px; color: rgba(255,255,255,0.7); }
/* States */
.em-card--pinned {
    border-color: rgba(var(--em-accent-rgb, 99,102,241), 0.65);
    background: linear-gradient(160deg, rgba(var(--em-accent-rgb, 99,102,241), 0.16), rgba(255,255,255,0.02));
    box-shadow: 0 0 0 1px rgba(var(--em-accent-rgb, 99,102,241), 0.25), 0 8px 24px rgba(var(--em-accent-rgb, 99,102,241), 0.15);
}
.em-card--current { border-color: rgba(74,222,128,0.4); }
.em-card--current .em-card-badge--now { animation: em-glow-pulse 1.8s ease-in-out infinite; }
.em-card--done { opacity: 0.74; }
@media (prefers-reduced-motion: reduce) { .em-card--current .em-card-badge--now { animation: none; } }

/* Section label as a row (coverage % relocated here from the hero) */
.em-section-label--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.em-coverage-overall { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.55); }
.em-coverage-overall strong { color: rgb(var(--em-accent-rgb, 129,140,248)); font-weight: 800; }
/* Accent-themed buttons / active states inside the panel */
.em-panel .em-btn { border-color: rgba(var(--em-accent-rgb, 99,102,241), 0.45); background: rgba(var(--em-accent-rgb, 99,102,241), 0.16); }
.em-panel .em-btn:hover:not(:disabled) { background: rgba(var(--em-accent-rgb, 99,102,241), 0.3); }

/* Entity glyph in stat-card titles */
.em-stat-title { display: inline-flex; align-items: center; gap: 7px; }
.em-stat-ico { font-size: 14px; filter: saturate(0.9); }

/* Segmented matched/not-found/pending bar */
.em-seg { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.07); }
.em-seg-fill { height: 100%; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.em-seg--matched { background: linear-gradient(90deg, rgba(var(--em-accent-rgb, 74,222,128),0.85), rgb(var(--em-accent-rgb, 74,222,128))); }
.em-seg--nf { background: #e0586b; }
.em-seg--pend { background: rgba(240,192,96,0.85); }
.em-stat-legend .em-leg { display: inline-flex; align-items: center; gap: 5px; }
.em-stat-legend .em-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.em-leg--matched i { background: rgb(var(--em-accent-rgb, 74,222,128)); }
.em-leg--nf i { background: #e0586b; }
.em-leg--pend i { background: rgba(240,192,96,0.9); }

/* Unmatched toolbar */
.em-unmatched-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 100%; min-width: 0; }
.em-seg-tabs { display: inline-flex; padding: 3px; gap: 2px; background: rgba(255,255,255,0.05); border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); }
.em-seg-tab {
    padding: 6px 14px; border-radius: 8px; border: none; background: transparent;
    color: rgba(255,255,255,0.6); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: all 0.18s ease;
}
.em-seg-tab:hover { color: #fff; }
.em-seg-tab.active {
    background: rgba(var(--em-accent-rgb, 99,102,241), 0.9);
    color: #fff; box-shadow: 0 2px 8px rgba(var(--em-accent-rgb, 99,102,241), 0.4);
}
.em-search-wrap { position: relative; display: inline-flex; align-items: center; flex: 1 1 200px; min-width: 140px; max-width: 320px; margin-left: auto; }
.em-search-ico { position: absolute; left: 11px; color: rgba(255,255,255,0.4); font-size: 15px; pointer-events: none; }
.em-search-wrap .em-search { padding-left: 30px; }
.em-search:focus, .em-select:focus { outline: none; border-color: rgba(var(--em-accent-rgb, 99,102,241), 0.6); }
.em-row:hover { background: rgba(var(--em-accent-rgb, 255,255,255), 0.07); border-color: rgba(var(--em-accent-rgb, 255,255,255), 0.14); }

/* Disabled / rate-limit banner */
.em-banner { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); }
.em-banner--warn { background: rgba(240,176,80,0.12); border-color: rgba(240,176,80,0.35); color: #f3cd86; }

/* Row checkbox + parent context (#3 / #4) */
.em-row-check { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; accent-color: rgb(var(--em-accent-rgb, 99,102,241)); }
.em-row-parent { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.4); }

/* Bulk action bar */
.em-bulk-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 8px 12px;
    background: rgba(var(--em-accent-rgb, 99,102,241), 0.12); border: 1px solid rgba(var(--em-accent-rgb, 99,102,241), 0.3);
    border-radius: 10px; }
/* display:flex above defeats the UA's [hidden]{display:none} — restore it,
   or the empty bar renders as a permanent accent-tinted pill over the list. */
.em-bulk-bar[hidden] { display: none; }
.em-bulk-count { font-size: 13px; font-weight: 700; color: #fff; margin-right: auto; }

/* Bulk retry-all + helper hint */
.em-retry-all { margin-left: 4px; }
.em-hint { font-size: 11px; color: rgba(255,255,255,0.38); flex: 0 0 auto; margin-top: -2px; }
.em-hint :is(b, strong) { color: rgba(255,255,255,0.6); }

/* ════════════════════════════════════════════════════════════════════════
   MODAL REVAMP — Download modal + Discovery modal (2.6.7 polish pass)
   Visual-only overrides, appended last so they win the cascade. Functionality
   and markup untouched. Same design language as the dashboard work: deep
   glass surfaces, an accent light-edge, kicker typography, calm tables,
   gradient progress, pill buttons. Theme-aware via --accent-rgb.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared surface ── */
.download-missing-modal-content,
.youtube-discovery-modal {
    position: relative;
    background:
        linear-gradient(165deg, rgba(24, 24, 32, 0.97) 0%, rgba(13, 13, 18, 0.985) 60%, rgba(10, 10, 14, 0.99) 100%);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(var(--accent-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Accent light-edge along the top — the signature of the new surfaces */
.download-missing-modal-content::before,
.youtube-discovery-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.65) 30%,
        rgba(var(--accent-light-rgb), 0.85) 50%,
        rgba(var(--accent-rgb), 0.65) 70%,
        transparent);
    pointer-events: none;
    z-index: 3;
}

/* ── Shared progress language ── */
.download-missing-modal-content .progress-bar,
.youtube-discovery-modal .progress-bar-container {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.download-missing-modal-content .progress-fill,
.youtube-discovery-modal .progress-bar-fill {
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.85),
        rgb(var(--accent-light-rgb)));
    box-shadow:
        0 0 14px rgba(var(--accent-rgb), 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: width 0.45s cubic-bezier(0.34, 1.1, 0.5, 1);
}

.download-missing-modal-content .progress-label,
.youtube-discovery-modal .progress-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Shared table language: calm rows, micro-label headers, hover glow ── */
.download-tracks-table thead th,
.youtube-discovery-modal .discovery-table thead th {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.38);
    background: rgba(14, 14, 19, 0.95);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.download-tracks-table td,
.youtube-discovery-modal .discovery-table td {
    padding: 11px 14px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    background: transparent;
}

.download-tracks-table tbody tr,
.youtube-discovery-modal .discovery-table tbody tr {
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.download-tracks-table tbody tr:hover,
.youtube-discovery-modal .discovery-table tbody tr:hover {
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.10),
        rgba(var(--accent-rgb), 0.04) 55%,
        transparent);
    box-shadow: inset 2px 0 0 rgba(var(--accent-rgb), 0.55);
}

/* ── Shared scrollbar ── */
.download-tracks-table-container::-webkit-scrollbar,
.youtube-discovery-modal .discovery-table-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.download-tracks-table-container::-webkit-scrollbar-thumb,
.youtube-discovery-modal .discovery-table-container::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.28);
    border-radius: 999px;
}

.download-tracks-table-container::-webkit-scrollbar-thumb:hover,
.youtube-discovery-modal .discovery-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

.download-tracks-table-container::-webkit-scrollbar-track,
.youtube-discovery-modal .discovery-table-container::-webkit-scrollbar-track {
    background: transparent;
}

/* ════════════ Download modal specifics ════════════ */

.download-missing-modal-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Progress strip: the two stacked bars become side-by-side glass cards */
.download-progress-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 24px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

.download-missing-modal-content .progress-item {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.download-missing-modal-content .progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 9px;
}

.download-missing-modal-content .progress-label span {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.45);
}

/* Tracks section toolbar */
.download-tracks-header {
    padding: 14px 24px 10px;
    border-bottom: none;
}

.download-tracks-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
}

.track-selection-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--accent-light-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 999px;
    padding: 3px 12px;
}

.download-tracks-table {
    border-collapse: collapse;
}

/* Accent checkboxes */
.download-tracks-table input[type="checkbox"],
.track-select-all {
    accent-color: rgb(var(--accent-rgb));
}

/* Footer: glass action bar + pill buttons */
.download-missing-modal-footer {
    background: rgba(12, 12, 17, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.download-control-btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    transition: transform 0.18s cubic-bezier(0.34, 1.3, 0.5, 1), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}

.download-control-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}

.download-control-btn.primary {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.75));
    border-color: rgba(var(--accent-light-rgb), 0.4);
    color: #fff;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
}

.download-control-btn.primary:hover {
    box-shadow: 0 6px 26px rgba(var(--accent-rgb), 0.5);
}

.download-control-btn.danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.download-control-btn.danger:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* ════════════ Discovery modal specifics ════════════ */

/* Kill the legacy red border treatment entirely */
.youtube-discovery-modal {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.youtube-discovery-modal .modal-header {
    padding: 22px 28px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.youtube-discovery-modal .modal-header h2 {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.youtube-discovery-modal .modal-subtitle {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
}

.youtube-discovery-modal .modal-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
}

.youtube-discovery-modal .modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.youtube-discovery-modal .modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
    transform: rotate(90deg);
}

/* Progress section becomes a glass card like the download modal's */
.youtube-discovery-modal .progress-section {
    margin: 16px 24px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.youtube-discovery-modal .progress-text {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}

.youtube-discovery-modal .discovery-table-container {
    margin: 0 24px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer + pill buttons */
.youtube-discovery-modal .modal-footer {
    background: rgba(12, 12, 17, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.youtube-discovery-modal .modal-btn {
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    transition: transform 0.18s cubic-bezier(0.34, 1.3, 0.5, 1), box-shadow 0.25s, background 0.25s;
}

.youtube-discovery-modal .modal-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.youtube-discovery-modal .modal-btn-primary {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.75));
    border-color: rgba(var(--accent-light-rgb), 0.4);
    color: #fff;
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35);
}

.youtube-discovery-modal .modal-btn-primary:hover {
    box-shadow: 0 6px 26px rgba(var(--accent-rgb), 0.5);
}

/* ── Modal revamp: the living layer (dashboard-grade motion, all
   compositor-only: transform/opacity only, one-shots or self-gating) ── */

/* Entrance — a soft rise + settle, once */
.download-missing-modal-content,
.youtube-discovery-modal {
    animation: modal-revamp-enter 0.38s cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes modal-revamp-enter {
    0%   { opacity: 0; transform: translateY(12px) scale(0.975); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header light-sweep — the dashboard signature, same keyframes, same
   compositor-only strip technique. Headers clip it. */
.download-missing-modal-header::after,
.youtube-discovery-modal .modal-header::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.05) 40%,
        rgba(var(--accent-rgb), 0.10) 50%,
        rgba(var(--accent-rgb), 0.05) 60%,
        transparent 100%);
    transform: translateX(-40%);
    opacity: 0;
    animation: dashboard-header-sweep 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.youtube-discovery-modal .modal-header {
    overflow: hidden;
}

/* Progress sheen — a light band scanning the FILL. It lives inside the
   fill (overflow hidden), so 0% progress shows nothing and a finished bar
   keeps a gentle pulse of life: the motion is gated by real progress. */
.download-missing-modal-content .progress-fill,
.youtube-discovery-modal .progress-bar-fill {
    position: relative;
    overflow: hidden;
}

.download-missing-modal-content .progress-fill::before,
.youtube-discovery-modal .progress-bar-fill::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.22) 50%,
        transparent);
    transform: translateX(-110%);
    animation: modal-progress-sheen 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes modal-progress-sheen {
    0%   { transform: translateX(-110%); }
    60%, 100% { transform: translateX(330%); }
}

/* Hero stat chips — glass cards with per-state color identity */
.download-dashboard-stats {
    gap: 10px;
}

.dashboard-stat {
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.dashboard-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--stat-edge, rgba(var(--accent-rgb), 0.7)), transparent);
}

.dashboard-stat-number {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dashboard-stat-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.4);
}

.dashboard-stat.stat-found      { --stat-edge: rgba(74, 222, 128, 0.7); }
.dashboard-stat.stat-found .dashboard-stat-number      { color: #4ade80; }
.dashboard-stat.stat-missing    { --stat-edge: rgba(251, 191, 36, 0.7); }
.dashboard-stat.stat-missing .dashboard-stat-number    { color: #fbbf24; }
.dashboard-stat.stat-downloaded { --stat-edge: rgba(var(--accent-rgb), 0.8); }
.dashboard-stat.stat-downloaded .dashboard-stat-number { color: rgb(var(--accent-light-rgb)); }

/* Download modal close ✕ matches the discovery one: circular ghost, rotates */
.download-missing-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.download-missing-modal-close:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
    transform: rotate(90deg);
}

/* Press feel on every pill */
.download-control-btn:active,
.youtube-discovery-modal .modal-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Respect reduced motion + the global performance mode */
@media (prefers-reduced-motion: reduce) {
    .download-missing-modal-content,
    .youtube-discovery-modal,
    .download-missing-modal-header::after,
    .youtube-discovery-modal .modal-header::after,
    .download-missing-modal-content .progress-fill::before,
    .youtube-discovery-modal .progress-bar-fill::before {
        animation: none !important;
    }
}

/* ── Modal revamp: live track-row states (animation == gauge, in the table) ──
   The download-status cell carries data-state (set by the main renderer; a
   secondary live-progress writer uses the legacy download-downloading /
   download-complete classes — both vocabularies are styled). The row carries
   .row-working while a track is actively searching/downloading/processing.

   LAYOUT NOTE: these are <td>s — they must stay display:table-cell, so the
   pill is a centered pseudo-element painted BEHIND the text, not a box model
   change on the cell itself. State colors are CSS vars on the td; the pseudo
   reads them. */

.track-download-status[data-state],
.track-download-status.download-downloading,
.track-download-status.download-complete,
.track-match-status {
    position: relative;   /* for the hover tooltip ::after — no pill anymore */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--row-state-fg, rgba(255, 255, 255, 0.65));
}

/* Pill drawn behind the status text. ONLY the download-status column gets it —
   the track-match-status variants rendered the z-index:-1 pill behind the
   library-status cell and looked broken, so they keep just their coloured
   text (--row-state-fg), no pill. */
.track-download-status[data-state]::before,
.track-download-status.download-downloading::before,
.track-download-status.download-complete::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 18px);
    height: 26px;
    border-radius: 999px;
    background: var(--row-state-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--row-state-border, rgba(255, 255, 255, 0.1));
    z-index: -1;
    pointer-events: none;
}

.track-download-status[data-state="pending"],
.track-download-status[data-state="cancelled"],
.track-download-status[data-state="cancelling"],
.track-download-status[data-state="not_found"] {
    --row-state-fg: rgba(255, 255, 255, 0.5);
}

.track-download-status[data-state="searching"],
.track-download-status[data-state="downloading"],
.track-download-status.download-downloading {
    --row-state-border: rgba(var(--accent-rgb), 0.4);
    --row-state-bg: rgba(var(--accent-rgb), 0.12);
    --row-state-fg: rgb(var(--accent-light-rgb));
}

.track-download-status[data-state="post_processing"] {
    --row-state-border: rgba(251, 191, 36, 0.35);
    --row-state-bg: rgba(251, 191, 36, 0.1);
    --row-state-fg: #fbbf24;
}

.track-download-status[data-state="completed"],
.track-download-status.download-complete {
    --row-state-border: rgba(74, 222, 128, 0.35);
    --row-state-bg: rgba(74, 222, 128, 0.1);
    --row-state-fg: #4ade80;
}

.track-download-status[data-state="failed"] {
    --row-state-border: rgba(239, 68, 68, 0.35);
    --row-state-bg: rgba(239, 68, 68, 0.1);
    --row-state-fg: #f87171;
}

.track-download-status[data-state="quarantined"] {
    --row-state-border: rgba(251, 146, 60, 0.4);
    --row-state-bg: rgba(251, 146, 60, 0.1);
    --row-state-fg: #fb923c;
}

/* Only states that are actually WORKING breathe */
.track-download-status[data-state="searching"],
.track-download-status[data-state="downloading"],
.track-download-status[data-state="post_processing"],
.track-download-status[data-state="cancelling"],
.track-download-status.download-downloading {
    animation: row-state-breathe 1.8s ease-in-out infinite;
}

@keyframes row-state-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Match-status colors feed the same pill (classes already existed) */
.track-match-status.match-found {
    --row-state-border: rgba(74, 222, 128, 0.35);
    --row-state-bg: rgba(74, 222, 128, 0.1);
    --row-state-fg: #4ade80;
}

.track-match-status.match-missing {
    --row-state-border: rgba(251, 191, 36, 0.35);
    --row-state-bg: rgba(251, 191, 36, 0.1);
    --row-state-fg: #fbbf24;
}

.track-match-status.match-checking {
    --row-state-fg: rgba(255, 255, 255, 0.5);
}

/* The actively-working row carries a persistent accent presence — like the
   hover treatment, but earned by real work instead of the mouse */
.download-tracks-table tbody tr.row-working {
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.08),
        rgba(var(--accent-rgb), 0.025) 60%,
        transparent);
    box-shadow: inset 2.5px 0 0 rgba(var(--accent-rgb), 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .track-download-status[data-state] { animation: none !important; }
}

/* ── Download Origins modal (watchlist / playlist provenance) ── */

.origin-modal {
    position: relative;
    width: 860px;
    max-width: 94vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(165deg, rgba(24, 24, 32, 0.97) 0%, rgba(13, 13, 18, 0.985) 60%, rgba(10, 10, 14, 0.99) 100%);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.65),
        0 0 60px rgba(var(--accent-rgb), 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: modal-revamp-enter 0.38s cubic-bezier(0.22, 1.2, 0.36, 1);
    overflow: hidden;
}

.origin-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--accent-rgb), 0.65) 30%,
        rgba(var(--accent-light-rgb), 0.85) 50%,
        rgba(var(--accent-rgb), 0.65) 70%,
        transparent);
    pointer-events: none;
    z-index: 3;
}

.origin-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.origin-modal-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.origin-modal-sub {
    margin: 3px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.origin-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}

.origin-modal-close:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
    transform: rotate(90deg);
}

.origin-modal-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.origin-tab {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.origin-tab:hover {
    background: rgba(255, 255, 255, 0.07);
}

.origin-tab.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65));
    border-color: rgba(var(--accent-light-rgb), 0.4);
    color: #fff;
    box-shadow: 0 3px 14px rgba(var(--accent-rgb), 0.3);
}

.origin-tab-count {
    opacity: 0.75;
    font-weight: 500;
}

.origin-toolbar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.origin-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.origin-select-all input,
.origin-entry-check {
    accent-color: rgb(var(--accent-rgb));
}

.origin-delete-btn {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.origin-delete-btn:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.22);
}

.origin-delete-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.origin-modal-body {
    overflow-y: auto;
    padding: 10px 16px 16px;
    flex: 1;
    min-height: 220px;
}

.origin-modal-body::-webkit-scrollbar { width: 8px; }
.origin-modal-body::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.28);
    border-radius: 999px;
}
.origin-modal-body::-webkit-scrollbar-track { background: transparent; }

.origin-entry {
    display: flex;
    align-items: center;
    gap: 12px;
}

.origin-entry .origin-entry-check {
    flex: 0 0 auto;
}

.origin-context-badge {
    flex: 0 0 auto;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.1);
    color: rgb(var(--accent-light-rgb));
}

.origin-modal-loading,
.origin-modal-empty {
    padding: 48px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.origin-row-delete {
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #f87171 !important;
}

/* #831: origins grouped by what triggered them (artist / playlist) */
.origin-group {
    margin-bottom: 6px;
}

.origin-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.origin-group-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

.origin-group-caret {
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    width: 12px;
}

.origin-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--accent-light-rgb));
}

.origin-group-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.origin-group-body {
    padding: 4px 0 2px 6px;
}

/* ── Blocklist modal (artist/album/track bans) ── */
.blocklist-modal {
    position: relative;
    width: 640px;
    max-width: 94vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(24,24,32,0.97) 0%, rgba(13,13,18,0.985) 60%, rgba(10,10,14,0.99) 100%);
    backdrop-filter: blur(24px) saturate(1.35);
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 60px rgba(var(--accent-rgb),0.07), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: modal-revamp-enter 0.38s cubic-bezier(0.22,1.2,0.36,1);
    overflow: hidden;
}
.blocklist-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.65) 30%, rgba(var(--accent-light-rgb),0.85) 50%, rgba(var(--accent-rgb),0.65) 70%, transparent);
    pointer-events: none;
    z-index: 3;
}
.blocklist-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.blocklist-modal-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.blocklist-modal-sub { margin: 3px 0 0; font-size: 12px; color: rgba(255,255,255,0.4); max-width: 460px; }
.blocklist-modal-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7); cursor: pointer;
    transition: background 0.2s, transform 0.2s, color 0.2s;
}
.blocklist-modal-close:hover { background: rgba(239,68,68,0.18); color: #fff; transform: rotate(90deg); }
.blocklist-tabs { display: flex; gap: 8px; padding: 12px 24px 0; }
.blocklist-tab {
    padding: 7px 16px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.6); font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.blocklist-tab:hover { background: rgba(255,255,255,0.07); }
.blocklist-tab.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0.65));
    border-color: rgba(var(--accent-light-rgb),0.4); color: #fff;
    box-shadow: 0 3px 14px rgba(var(--accent-rgb),0.3);
}
.blocklist-search-row { position: relative; padding: 14px 24px 8px; }
.blocklist-search-input {
    width: 100%; padding: 11px 38px 11px 14px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: #fff; font-size: 13.5px; outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.blocklist-search-input:focus { border-color: rgba(var(--accent-rgb),0.5); background: rgba(255,255,255,0.06); }
.blocklist-search-spinner {
    position: absolute; right: 36px; top: 50%; width: 15px; height: 15px;
    margin-top: -3px; border-radius: 50%; opacity: 0;
    border: 2px solid rgba(var(--accent-rgb),0.25); border-top-color: rgb(var(--accent-rgb));
}
.blocklist-search-spinner.spinning { opacity: 1; animation: spin 0.7s linear infinite; }
.blocklist-search-results { max-height: 230px; overflow-y: auto; padding: 0 16px; }
.blocklist-row, .blocklist-current-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px; border-radius: 12px;
    transition: background 0.15s;
}
.blocklist-row:hover { background: rgba(255,255,255,0.04); }
.blocklist-row-img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.blocklist-row-img.artist { border-radius: 50%; }
.blocklist-row-img.placeholder {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); font-size: 18px;
}
.blocklist-row-info { flex: 1; min-width: 0; }
.blocklist-row-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blocklist-row-extra { font-size: 11.5px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blocklist-block-btn {
    flex: 0 0 auto; padding: 6px 16px; border-radius: 999px;
    border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.12);
    color: #fca5a5; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}
.blocklist-block-btn:hover { background: rgba(239,68,68,0.24); transform: translateY(-1px); }
.blocklist-current-label {
    padding: 12px 24px 6px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
    border-top: 1px solid rgba(255,255,255,0.05); margin-top: 6px;
}
.blocklist-current { flex: 1; overflow-y: auto; padding: 0 16px 16px; min-height: 80px; }
.blocklist-current-row:hover { background: rgba(255,255,255,0.03); }
.blocklist-match { flex: 0 0 auto; font-size: 11px; font-weight: 700; }
.blocklist-match.matched { color: rgb(var(--accent-light-rgb)); }
.blocklist-match.pending { color: rgba(255,255,255,0.3); animation: bl-pulse 1.6s ease-in-out infinite; }
@keyframes bl-pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.8; } }
.blocklist-unblock-btn {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55); cursor: pointer; font-size: 12px;
    transition: background 0.18s, color 0.18s;
}
.blocklist-unblock-btn:hover { background: rgba(239,68,68,0.18); color: #fff; }
.blocklist-empty { padding: 26px 16px; text-align: center; color: rgba(255,255,255,0.4); font-size: 12.5px; }
.blocklist-search-results::-webkit-scrollbar, .blocklist-current::-webkit-scrollbar { width: 8px; }
.blocklist-search-results::-webkit-scrollbar-thumb, .blocklist-current::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),0.28); border-radius: 999px; }

/* ── Quick-switch modal (active Metadata / Server / Download) — Manage-Workers style ── */
.ss-overlay { display: flex; align-items: center; justify-content: center; }
.ss-modal {
    background: linear-gradient(160deg, #181a21 0%, #121319 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px; width: min(760px, 94vw); max-height: 86vh;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}
.ss-modal.ss-in { animation: ss-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes ss-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.ss-topbar {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(var(--accent-light-rgb), 0.05);
}
.ss-topbar-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ss-topbar-logo { width: 36px; height: 36px; object-fit: contain; }
.ss-topbar-titles { flex: 1; }
.ss-topbar-title { margin: 0; font-size: 1.2rem; }
.ss-topbar-sub { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin-top: 2px; }
.ss-icon-btn {
    background: rgba(255, 255, 255, 0.06); border: none; color: #fff;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1.1rem;
}
.ss-icon-btn:hover { background: rgba(255, 255, 255, 0.14); }

.ss-body { display: flex; min-height: 320px; max-height: calc(86vh - 78px); }
.ss-rail {
    width: 196px; flex-shrink: 0; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.06); background: rgba(0, 0, 0, 0.22);
}
.ss-tab {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px;
    background: rgba(255, 255, 255, 0.02); border: 1px solid transparent; border-radius: 12px; cursor: pointer;
    color: rgba(255, 255, 255, 0.7); text-align: left; transition: all 0.18s; overflow: hidden;
}
.ss-tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ss-tab.active {
    background: linear-gradient(100deg, color-mix(in srgb, var(--ss-brand) 22%, transparent), rgba(255,255,255,0.02));
    border-color: color-mix(in srgb, var(--ss-brand) 55%, transparent); color: #fff;
}
.ss-tab.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--ss-brand); }
.ss-tab-disc {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-brand) 60%, transparent);
}
.ss-tab-logo { width: 24px; height: 24px; object-fit: contain; }
.ss-tab-disc .ss-tab-emoji { font-size: 1.2rem; }
.ss-tab-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ss-tab-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); }
.ss-tab.active .ss-tab-cat { color: color-mix(in srgb, var(--ss-brand) 75%, white); }
.ss-tab-cur { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-panel {
    flex: 1; padding: 22px 24px; overflow-y: auto;
    background:
        radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ss-brand) 9%, transparent), transparent 60%),
        radial-gradient(90% 60% at 0% 100%, rgba(255,255,255,0.02), transparent 70%);
}
.ss-hero {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 20px;
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(120deg, color-mix(in srgb, var(--ss-brand) 24%, transparent), rgba(255,255,255,0.025));
    border: 1px solid color-mix(in srgb, var(--ss-brand) 40%, transparent);
}
.ss-hero::after {
    content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ss-brand) 40%, transparent), transparent 70%);
    pointer-events: none;
}
.ss-hero-disc {
    width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px var(--ss-brand), 0 0 26px color-mix(in srgb, var(--ss-brand) 55%, transparent);
}
.ss-hero-logo { width: 36px; height: 36px; object-fit: contain; }
.ss-hero-emoji { font-size: 1.8rem; }
.ss-hero-info { flex: 1; min-width: 0; }
.ss-hero-eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--ss-brand) 70%, white); font-weight: 700; }
.ss-hero-name { font-size: 1.35rem; font-weight: 700; margin: 1px 0 3px; }
.ss-hero-sub { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.ss-hero-pill {
    align-self: flex-start; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 4px 10px; border-radius: 999px; color: #0a0a0a; background: var(--ss-brand);
}
.ss-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); margin-bottom: 16px; }
.ss-hint { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin-bottom: 12px; }
.ss-empty { color: rgba(255, 255, 255, 0.4); font-style: italic; padding: 30px 0; text-align: center; }
.ss-effective-note {
    background: rgba(255, 180, 60, 0.1); border: 1px solid rgba(255, 180, 60, 0.3);
    color: #ffcf8a; border-radius: 10px; padding: 9px 13px; font-size: 0.82rem; margin-bottom: 16px;
}

.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.ss-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 20px 12px 16px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
    cursor: pointer; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s, background 0.16s; color: #fff;
}
.ss-card:hover:not([disabled]) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ss-brand) 50%, transparent); }
.ss-card.active {
    border-color: var(--ss-brand);
    background: linear-gradient(160deg, color-mix(in srgb, var(--ss-brand) 16%, transparent), rgba(255,255,255,0.02));
    box-shadow: 0 0 0 1px var(--ss-brand), 0 10px 30px color-mix(in srgb, var(--ss-brand) 30%, transparent);
}
.ss-card-disc {
    width: 58px; height: 58px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-brand) 45%, transparent); transition: box-shadow 0.16s;
}
.ss-card.active .ss-card-disc { box-shadow: 0 0 0 3px var(--ss-brand), 0 0 22px color-mix(in srgb, var(--ss-brand) 55%, transparent); }
/* White/light wordmark logos (Plex, SoulSync) need a dark disc to be visible. */
.ss-disc--dark { background: #1f2329 !important; }
.ss-card--locked { opacity: 0.38; cursor: not-allowed; }
.ss-card[disabled] { cursor: default; }
.ss-card-logo { width: 34px; height: 34px; object-fit: contain; }
.ss-card-emoji { font-size: 1.7rem; line-height: 1; }
.ss-card-label { font-size: 0.85rem; text-align: center; font-weight: 500; }
.ss-card-badge {
    position: absolute; top: 6px; left: 6px; font-size: 0.62rem; padding: 2px 6px;
    background: rgba(0, 0, 0, 0.5); border-radius: 6px; color: rgba(255, 255, 255, 0.7);
}
.ss-card-check {
    position: absolute; top: 6px; right: 8px; color: rgb(var(--accent-light-rgb)); font-weight: 700;
}

.ss-seg { display: inline-flex; background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.ss-seg-btn {
    border: none; background: transparent; color: rgba(255, 255, 255, 0.6);
    padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.ss-seg-btn.active { background: rgb(var(--accent-light-rgb)); color: #0a0a0a; font-weight: 600; }
.ss-seg-btn[disabled] { cursor: default; }

.ss-hybrid-list { display: flex; flex-direction: column; gap: 8px; }
.ss-hybrid-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px; cursor: grab;
}
.ss-hybrid-item.dragging { opacity: 0.5; cursor: grabbing; border-color: rgb(var(--accent-light-rgb)); }
.ss-hybrid-rank {
    width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-light-rgb), 0.2); color: rgb(var(--accent-light-rgb));
    border-radius: 50%; font-size: 0.72rem; font-weight: 700;
}
.ss-hybrid-logo { width: 26px; height: 26px; object-fit: contain; }
.ss-hybrid-name { font-size: 0.9rem; }

/* Service Status quick-switch (admin only) — show the hand cursor so it's
   clearly clickable; non-admins get no clickable affordance. */
.status-section--clickable { cursor: pointer; border-radius: 10px; transition: background 0.15s; }
.status-section--clickable:hover { background: rgba(255, 255, 255, 0.04); }
.status-section--clickable .status-indicator { cursor: pointer; }
.status-section--locked, .status-section--locked .status-indicator { cursor: default; }
.status-section--locked:hover { background: transparent; }

/* ── My Accounts (per-profile self-auth for playlist services) ── */
.ma-overlay { display: flex; align-items: center; justify-content: center; }
.ma-modal {
    background: linear-gradient(160deg, #181a21 0%, #121319 100%);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
    width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.65);
}
.ma-modal.ma-in { animation: ss-pop 0.22s cubic-bezier(0.2,0.9,0.3,1.2); }
.ma-topbar {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(var(--accent-light-rgb),0.05);
}
.ma-topbar-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ma-topbar-logo { width: 36px; height: 36px; object-fit: contain; }
.ma-topbar-titles { flex: 1; }
.ma-topbar-title { margin: 0; font-size: 1.2rem; }
.ma-topbar-sub { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-top: 2px; }
.ma-icon-btn { background: rgba(255,255,255,0.06); border: none; color: #fff; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1.1rem; }
.ma-icon-btn:hover { background: rgba(255,255,255,0.14); }
.ma-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.ma-empty { color: rgba(255,255,255,0.4); font-style: italic; padding: 24px 0; text-align: center; }
.ma-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
}
.ma-disc {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ma-brand) 55%, transparent);
}
.ma-logo { width: 28px; height: 28px; object-fit: contain; }
.ma-row-info { flex: 1; min-width: 0; }
.ma-row-name { font-weight: 600; font-size: 0.98rem; }
.ma-row-status { font-size: 0.8rem; color: rgba(255,255,255,0.45); }
.ma-row-status.is-on { color: var(--ma-brand); }
.ma-row-action { display: flex; align-items: center; gap: 10px; }
.ma-account { font-size: 0.82rem; color: rgba(255,255,255,0.7); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-note { font-size: 0.78rem; color: rgba(255,255,255,0.4); font-style: italic; }
.ma-btn { border: none; border-radius: 9px; padding: 8px 18px; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.ma-btn--connect { background: var(--ma-brand); color: #0a0a0a; }
.ma-btn--connect:hover { filter: brightness(1.1); }
.ma-btn--ghost { background: transparent; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.18); }
.ma-btn--ghost:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ma-disc.ma-disc--dark { background: #1f2329; }
.ma-token-input {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
    padding: 7px 11px; color: #fff; font-size: 0.82rem; width: 150px;
}
.ma-token-input:focus { outline: none; border-color: var(--ma-brand); }

/* Verification badge on completed downloads (verified / unverified / force-imported) */
.verif-badge { display: inline-block; margin-left: 4px; font-size: 11px; cursor: help; border-radius: 999px; padding: 0 5px; line-height: 16px; }
.verif-badge.verif-ok { color: #2ecc71; background: rgba(46,204,113,0.12); }
.verif-badge.verif-unverified { color: #f1c40f; background: rgba(241,196,15,0.14); }
.verif-badge.verif-force { color: #e67e22; background: rgba(230,126,34,0.16); }
.adl-retry-info { margin-left: 6px; font-size: 11px; color: #e67e22; cursor: help; }
.adl-quality-chip { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 0 6px; line-height: 16px; cursor: help; vertical-align: middle; }
.verif-badge.verif-human { color: #3498db; background: rgba(52,152,219,0.14); }
.verif-actions { display: inline-flex; gap: 6px; margin-left: 10px; align-items: center; }
.verif-act { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; line-height: 18px; }
.verif-act:hover { background: rgba(255,255,255,0.14); }
.verif-act-ok:hover { background: rgba(46,204,113,0.25); border-color: rgba(46,204,113,0.5); }
.verif-act-del:hover { background: rgba(231,76,60,0.25); border-color: rgba(231,76,60,0.5); }
.verif-act-play.playing { background: rgba(var(--accent-rgb),0.3); }
/* Review-queue row annotations (library-history-quarantine style) */
.verif-reason-badge { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid; border-radius: 999px; padding: 1px 7px; line-height: 14px; white-space: nowrap; cursor: help; }
.verif-rb-unv { color: #f1c40f; border-color: rgba(241,196,15,0.5); }
.verif-rb-force { color: #ef5350; border-color: rgba(239,83,80,0.5); }
.verif-rb-int { color: #facc15; border-color: rgba(250,204,21,0.5); }
.verif-time { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }
.verif-quar-details { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.5; word-break: break-all; }
.verif-detail-label { color: rgba(255,255,255,0.4); margin-right: 4px; }
.verif-banner-spacer { flex: 1; }
.verif-bulk-danger { border-color: rgba(248,113,113,0.4) !important; color: #f87171 !important; }

.verif-quar-alt-wrapper { display: contents; }
.verif-quar-alt-slot { min-width: 68px; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.verif-quar-alt-btn { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); border-radius: 6px; padding: 2px 7px; font-size: 11px; cursor: pointer; white-space: nowrap; line-height: 18px; }
.verif-quar-alt-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
.verif-quar-alt-btn.open { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); }
.verif-quar-alt-members { display: none; padding-left: 20px; border-left: 2px solid rgba(255,255,255,0.07); margin-left: 8px; margin-bottom: 2px; }
.verif-quar-alt-members.vqg-open { display: block; }

/* ── Security settings: grouped sub-sections + dependency visuals ── */
.security-subgroup {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 14px 16px 4px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.02);
}
.security-subhead {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.security-subhead-note {
    font-size: 11px;
    font-weight: 400;
    opacity: 0.55;
    letter-spacing: 0.02em;
}
.security-nested {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.security-locked {
    opacity: 0.5;
}
.security-locked .toggle-label {
    cursor: not-allowed;
}
.security-saved-status {
    font-size: 12px;
    color: #4caf50;
    font-weight: 500;
    margin-bottom: 6px;
}


/* ════════════════════════════════════════════════════════════════════════
   Artist "DB Record" inspector — button + programmer-style modal
   ════════════════════════════════════════════════════════════════════════ */
#artist-hero-section { position: relative; }

.artist-db-record-btn {
    position: absolute;
    bottom: 14px;
    right: 16px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font: 600 11.5px/1 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    color: #cdd6f4;
    background: linear-gradient(135deg, rgba(20,24,34,0.72), rgba(14,17,23,0.82));
    border: 1px solid rgba(122,162,247,0.35);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03),
                0 0 0 0 rgba(122,162,247,0.0);
    opacity: 0.82;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .25s ease,
                opacity .2s ease, border-color .25s ease, color .2s ease;
}
.artist-db-record-btn svg { color: #7aa2f7; transition: color .2s ease, transform .3s ease; }
.artist-db-record-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    color: #fff;
    border-color: rgba(122,162,247,0.7);
    box-shadow: 0 8px 26px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05),
                0 0 18px rgba(122,162,247,0.35);
}
.artist-db-record-btn:hover svg { color: #9ece6a; transform: rotate(-6deg) scale(1.08); }
.artist-db-record-btn:active { transform: translateY(0); }

/* ── Overlay + card ── */
.arec-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(8,10,14,0.7);
    backdrop-filter: blur(10px);
    opacity: 0; transition: opacity .22s ease;
}
.arec-overlay.visible { opacity: 1; }

.arec-card {
    width: min(760px, 96vw);
    max-height: min(82vh, 820px);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #11151c, #0d1017);
    border: 1px solid rgba(122,162,247,0.22);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02),
                0 0 60px rgba(122,162,247,0.08);
    overflow: hidden;
    transform: translateY(10px) scale(0.985);
    transition: transform .26s cubic-bezier(.34,1.3,.5,1);
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.arec-overlay.visible .arec-card { transform: translateY(0) scale(1); }

.arec-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(122,162,247,0.06), transparent);
}
.arec-title {
    display: flex; align-items: center; gap: 8px;
    font: 700 14px/1 'JetBrains Mono', ui-monospace, Menlo, monospace;
    color: #e6ebff; letter-spacing: 0.02em;
}
.arec-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #9ece6a; box-shadow: 0 0 10px #9ece6a;
    animation: arecPulse 2.4s ease-in-out infinite;
}
@keyframes arecPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.arec-sub {
    margin-top: 4px; font-size: 12px; color: #8b93b0;
    font-family: ui-monospace, Menlo, monospace;
}
.arec-close {
    background: none; border: none; color: #8b93b0; font-size: 24px;
    line-height: 1; cursor: pointer; padding: 0 4px; transition: color .15s ease, transform .15s ease;
}
.arec-close:hover { color: #ff6b6b; transform: scale(1.12); }

/* ── Toolbar ── */
.arec-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
}
.arec-tabs { display: inline-flex; background: rgba(255,255,255,0.04); border-radius: 8px; padding: 2px; }
.arec-tab {
    border: none; background: none; cursor: pointer;
    padding: 5px 12px; border-radius: 6px;
    font: 600 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
    color: #8b93b0; transition: all .15s ease;
}
.arec-tab.active { background: rgba(var(--accent-rgb),0.22); color: rgb(var(--accent-light-rgb)); }
.arec-tab:not(.active):hover { color: #cdd6f4; }
.arec-filter {
    flex: 1; min-width: 120px;
    padding: 7px 11px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: #cdd6f4;
    font: 12px/1 ui-monospace, Menlo, monospace;
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.arec-filter:focus { border-color: rgba(122,162,247,0.5); box-shadow: 0 0 0 3px rgba(122,162,247,0.12); }
.arec-actions { display: inline-flex; gap: 8px; }
.arec-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: rgba(122,162,247,0.1);
    border: 1px solid rgba(122,162,247,0.25);
    border-radius: 8px;
    color: #c0caf5; cursor: pointer;
    font: 600 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
    transition: all .15s ease;
}
.arec-btn:hover { background: rgba(122,162,247,0.2); border-color: rgba(122,162,247,0.55); color: #fff; }
.arec-btn svg { opacity: 0.85; }

/* ── Config Migration modal (reuses the arec-card shell) ── */
.cfgx-secrets {
    display: inline-flex; align-items: center; gap: 6px;
    color: #c0caf5; font: 600 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
    cursor: pointer; user-select: none;
}
.cfgx-secrets input { accent-color: #f1c40f; margin: 0; cursor: pointer; }
.cfgx-json {
    margin: 0; padding: 4px 6px; white-space: pre-wrap; word-break: break-word;
    color: #c8d0e8; font-size: 12px; line-height: 1.5;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}
.cfgx-import { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.cfgx-import-hint { color: #8b93b0; font-size: 12.5px; line-height: 1.5; margin: 0; }
.cfgx-file { color: #c0caf5; font-size: 12px; }
.cfgx-paste {
    min-height: 180px; resize: vertical; padding: 10px 12px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; color: #c8d0e8; font-size: 11.5px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.cfgx-apply { align-self: flex-start; }

/* ── Body ── */
.arec-body {
    flex: 1; overflow: auto; padding: 8px 6px 8px 14px;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}
.arec-loading, .arec-error { padding: 28px; text-align: center; color: #8b93b0; font-size: 13px; }
.arec-error { color: #ff8585; }

.arec-fields { display: flex; flex-direction: column; }
.arec-row {
    display: grid; grid-template-columns: minmax(140px, 210px) 1fr auto;
    gap: 10px; align-items: start;
    padding: 6px 8px; border-radius: 7px;
    border-bottom: 1px solid rgba(255,255,255,0.035);
    transition: background .12s ease;
}
.arec-row:hover { background: rgba(122,162,247,0.07); }
.arec-row.is-empty { opacity: 0.5; }
.arec-key { color: #7aa2f7; font-size: 12px; font-weight: 600; word-break: break-all; }
.arec-val { color: #c8d0e8; font-size: 12px; word-break: break-word; white-space: pre-wrap; }
.arec-val .arec-json { color: #9ece6a; }
.arec-val .arec-null, .arec-null { color: #565f89; font-style: italic; }
.arec-rowcopy {
    background: none; border: none; cursor: pointer;
    color: #565f89; font-size: 13px; padding: 1px 5px; border-radius: 5px;
    opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.arec-row:hover .arec-rowcopy { opacity: 1; }
.arec-rowcopy:hover { color: #9ece6a; background: rgba(255,255,255,0.06); }

.arec-code {
    margin: 0; padding: 6px 8px; font-size: 12px; line-height: 1.55;
    color: #c0caf5; white-space: pre; tab-size: 2;
}
.arec-code .tok-key  { color: #7aa2f7; }
.arec-code .tok-str  { color: #9ece6a; }
.arec-code .tok-num  { color: #ff9e64; }
.arec-code .tok-bool { color: #bb9af7; }
.arec-code .tok-null { color: #565f89; font-style: italic; }

/* ── Footer ── */
.arec-footer {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.25);
    font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
    color: #8b93b0;
}
.arec-footer b { color: #cdd6f4; }
.arec-footer .arec-id { margin-left: auto; color: #565f89; }

/* scrollbar */
.arec-body::-webkit-scrollbar { width: 10px; }
.arec-body::-webkit-scrollbar-thumb { background: rgba(122,162,247,0.25); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.arec-body::-webkit-scrollbar-thumb:hover { background: rgba(122,162,247,0.45); background-clip: padding-box; }

@media (max-width: 640px) {
    .artist-db-record-btn span { display: none; }
    .artist-db-record-btn { padding: 8px; }
    .arec-row { grid-template-columns: 1fr; gap: 2px; }
    .arec-rowcopy { opacity: 1; justify-self: end; margin-top: -22px; }
}


/* #852: while the launch-PIN / login lock screen is up, hide EVERYTHING in the
   body except the lock overlays themselves — so removing the overlay (Safari
   "Hide Distracting Items", devtools) reveals a blank page, not the empty chrome
   or any of the on-demand modals/sidebars. The hide-element trick can only ADD
   hiding, never undo this rule. initApp() drops body.app-locked once authenticated. */
body.app-locked > *:not(#launch-pin-overlay):not(#login-overlay):not(script):not(style):not(noscript) {
    display: none !important;
}


/* Login-password clarity in Manage Profiles (#login-mode) */
.profile-manage-login-banner {
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #fcd9a8;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.30);
}
.profile-role-pill--warn {
    background: rgba(239, 68, 68, 0.16);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.40);
    text-transform: none;
}
.profile-role-pill--ok {
    background: rgba(16, 185, 129, 0.14);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.30);
    text-transform: none;
}
/* The set-login-password button (lock icon) + an attention pulse when a member
   can't sign in yet (login on, no password). */
.profile-manage-item .profile-password-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #9ca3af;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
}
.profile-manage-item .profile-password-btn svg { width: 15px; height: 15px; }
.profile-manage-item .profile-password-btn:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.4);
    color: #c7d2fe;
}
.profile-manage-item .profile-password-btn.has-password { color: #6ee7b7; }
.profile-manage-item .profile-password-btn.needs-password {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
    animation: arecPwPulse 1.8s ease-in-out infinite;
}
@keyframes arecPwPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
}


/* Watchlist export modal — reuses the .arec-* card; just the option label + button */
.wlx-opt {
    display: inline-flex; align-items: center; gap: 6px;
    font: 12px/1 'JetBrains Mono', ui-monospace, monospace;
    color: #8b93b0; cursor: pointer; user-select: none;
}
.wlx-opt input { accent-color: #7aa2f7; }
.watchlist-export-btn .watchlist-all-icon { font-weight: 700; }

/* =========================================================================
   Re-identify Track Modal (#889)
   A focused, vibey chooser: "which release does this track belong to?"
   ========================================================================= */
#reid-modal-overlay { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.reid-modal {
    position: relative;
    width: min(760px, 94vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, #14161d 0%, #0e0f15 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: reidPop 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes reidPop {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Hero ──
   No overflow:hidden on .reid-hero itself (it was clipping the header content).
   Instead the decorative blurred bg + overlay live in .reid-hero-decor, an
   absolutely-positioned clip layer: it contains the blur (so it can't bleed into
   the tabs) and is pointer-events:none (so it can never steal clicks from the
   source tabs). The actual content is a SIBLING of the decor layer, so it's never
   clipped. */
.reid-hero { position: relative; padding: 26px 28px; }
.reid-hero-decor {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    border-radius: 20px 20px 0 0;
}
.reid-hero-bg {
    position: absolute; inset: -30px;
    background-size: cover; background-position: center;
    filter: blur(46px) brightness(0.4) saturate(1.5);
    transform: scale(1.25); opacity: 0.9;
    transition: background-image 0.4s ease;
}
.reid-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,11,16,0.55) 0%, rgba(10,11,16,0.8) 100%);
}
.reid-hero-content { position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; }
.reid-hero-art {
    width: 76px; height: 76px; flex: 0 0 76px; border-radius: 12px;
    background: rgba(255,255,255,0.05) center/cover no-repeat;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
}
.reid-hero-art.empty { display: grid; place-items: center; }
.reid-hero-art.empty::after { content: '♪'; font-size: 30px; color: rgba(var(--accent-rgb), 0.7); }
.reid-hero-meta { min-width: 0; }
.reid-hero-eyebrow {
    font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgb(var(--accent-light-rgb)); margin-bottom: 7px;
}
.reid-hero-title {
    font-size: 23px; font-weight: 800; color: #fff; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reid-hero-sub { margin-top: 4px; color: #aab; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reid-close {
    position: absolute; top: 14px; right: 18px; z-index: 3;
    font-size: 26px; line-height: 1; color: #aab; cursor: pointer;
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    transition: all 0.18s ease;
}
.reid-close:hover { color: #fff; background: rgba(255,255,255,0.1); transform: rotate(90deg); }

/* ── Source tabs ── */
.reid-tabs {
    display: flex; gap: 7px; padding: 14px 28px 0; flex-wrap: wrap;
}
.reid-tab {
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: #9aa3bd;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.18s ease; white-space: nowrap;
}
.reid-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.reid-tab.active {
    color: #06210f; background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border-color: transparent; box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}

/* ── Search ── */
.reid-search { display: flex; align-items: center; gap: 10px; padding: 16px 28px 12px; position: relative; }
.reid-search-icon { position: absolute; left: 42px; color: #6b7390; pointer-events: none; }
.reid-search-input {
    flex: 1; padding: 12px 14px 12px 40px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: #fff; font-size: 14px; transition: all 0.18s ease;
}
.reid-search-input:focus {
    outline: none; border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.reid-search-btn {
    padding: 11px 20px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 13px;
    color: #06210f; background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    border: none; transition: all 0.18s ease;
}
.reid-search-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Results ── */
.reid-results { flex: 1; overflow-y: auto; padding: 4px 22px 10px; min-height: 220px; }
.reid-result {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin: 6px 0;
    border-radius: 14px; cursor: pointer;
    background: rgba(255,255,255,0.025); border: 1.5px solid transparent;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    animation: reidRowIn 0.3s ease backwards;
}
@keyframes reidRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reid-result:hover { background: rgba(255,255,255,0.05); transform: translateY(-2px); }
.reid-result.selected {
    border-color: rgba(var(--accent-rgb), 0.65);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.18);
}
.reid-result-art {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 9px;
    background: rgba(255,255,255,0.06) center/cover no-repeat; border: 1px solid rgba(255,255,255,0.07);
    display: grid; place-items: center;
}
.reid-result-art span { font-size: 20px; color: rgba(var(--accent-rgb), 0.6); }
.reid-result-info { min-width: 0; flex: 1; }
.reid-result-title { font-weight: 700; color: #fff; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reid-result-release { color: #9aa3bd; font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reid-result-meta { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.reid-result-detail { color: #6b7390; font-size: 11.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; }
.reid-result-check {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
    border: 2px solid rgba(255,255,255,0.14); display: grid; place-items: center; transition: all 0.18s ease;
}
.reid-result.selected .reid-result-check {
    border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb));
}
.reid-result.selected .reid-result-check::after { content: '✓'; color: #06210f; font-size: 13px; font-weight: 900; }

/* Type badges */
.reid-badge {
    font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}
.reid-badge.album       { color: #22ff6b; background: rgba(34,255,107,0.12); border: 1px solid rgba(34,255,107,0.25); }
.reid-badge.ep          { color: #5aa9ff; background: rgba(90,169,255,0.12); border: 1px solid rgba(90,169,255,0.25); }
.reid-badge.single      { color: #ffc24b; background: rgba(255,194,75,0.12);  border: 1px solid rgba(255,194,75,0.25); }
.reid-badge.compilation { color: #c98bff; background: rgba(201,139,255,0.12); border: 1px solid rgba(201,139,255,0.25); }

/* Idle / loading / empty */
.reid-state { display: grid; place-items: center; gap: 14px; min-height: 200px; text-align: center; color: #6b7390; padding: 20px; }
.reid-state .reid-state-icon { font-size: 38px; opacity: 0.5; }
.reid-state p { font-size: 13.5px; max-width: 360px; }
.reid-spinner {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid rgba(var(--accent-rgb), 0.15); border-top-color: rgb(var(--accent-rgb));
    animation: reidSpin 0.8s linear infinite;
}
@keyframes reidSpin { to { transform: rotate(360deg); } }
.reid-skel {
    height: 76px; margin: 6px 0; border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 37%, rgba(255,255,255,0.03) 63%);
    background-size: 400% 100%; animation: reidShimmer 1.4s ease infinite;
}
@keyframes reidShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Footer ── */
.reid-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 28px; border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2); flex-wrap: wrap;
}
.reid-replace { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.reid-replace input { display: none; }
.reid-replace-box {
    width: 20px; height: 20px; border-radius: 6px; flex: 0 0 20px;
    border: 2px solid rgba(255,255,255,0.18); transition: all 0.18s ease; display: grid; place-items: center;
}
.reid-replace input:checked + .reid-replace-box {
    background: linear-gradient(180deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb))); border-color: transparent;
}
.reid-replace input:checked + .reid-replace-box::after { content: '✓'; color: #06210f; font-size: 13px; font-weight: 900; }
.reid-replace-text { color: #c2c9de; font-size: 13px; }
.reid-replace-text em { color: #7f879e; font-style: normal; font-size: 11.5px; }
.reid-footer-actions { display: flex; gap: 10px; }
#reid-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }

/* Settings cleanup: source settings uses the same inner-card spacing as Retry Logic. */
#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#settings-page .settings-section-body:not(.collapsed) > .settings-group.source-settings-wrapper > .settings-subcard {
    margin: 0 !important;
}

/* Firefox-only performance overrides (#935). Firefox re-rasterizes blur()/backdrop-filter on
   every composite where Chrome caches them, so the frosted-glass shell costs real idle GPU on
   Firefox only. @supports(-moz-appearance) matches Firefox and NOT Chrome — this whole block is
   invisible to Chrome, which keeps the full frosted look. Revert = delete this block. */
@supports (-moz-appearance: none) {
    /* dash-card cursor-glow blobs — 16 large blur(48px)/blur(18px) layers, purely decorative */
    .dash-card::before,
    .dash-card::after { display: none; }

    /* sidebar aura orbs — two blur(28px) elements, always visible on every page */
    .sidebar::before,
    .sidebar::after { display: none; }

    /* shell frosted-glass panels — drop the backdrop blur (each element keeps its own tint, so
       it stays a solid/translucent panel, just not frosted). always-visible, so helps every page. */
    .sidebar-header,
    .header-button,
    .watchlist-button,
    .wishlist-button {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===== Album cover-art picker ===== */
.enhanced-expanded-art-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}
.enhanced-art-edit-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.28));
    opacity: 0;
    transition: opacity .18s ease;
}
.enhanced-expanded-art-wrap:hover .enhanced-art-edit-overlay { opacity: 1; }
.enhanced-art-edit-overlay svg { opacity: .95; }

.art-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
}
.art-picker-overlay.visible { opacity: 1; }
.art-picker-modal {
    width: min(920px, 94vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: #181818;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
    transform: translateY(14px) scale(.975);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.art-picker-overlay.visible .art-picker-modal { transform: none; }
.art-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.art-picker-title { font-size: 18px; font-weight: 700; color: #fff; }
.art-picker-subtitle { font-size: 13px; color: #b3b3b3; margin-top: 3px; }
.art-picker-close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: transparent; color: #b3b3b3; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.art-picker-close:hover { background: rgba(255,255,255,.1); color: #fff; }

.art-picker-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.art-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.art-picker-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #0f0f0f;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.art-picker-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-picker-tile:hover {
    transform: translateY(-2px) scale(1.03);
    border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.art-picker-tile.selected {
    border-color: rgb(var(--accent-rgb));
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .3), 0 10px 24px rgba(0,0,0,.5);
}
.art-picker-badge {
    position: absolute;
    left: 7px; bottom: 7px;
    padding: 2px 7px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #e6e6e6;
    background: rgba(0,0,0,.72);
    border-radius: 6px;
    pointer-events: none;
}
.art-picker-check {
    position: absolute;
    top: 7px; right: 7px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    color: #0b1d12;
    background: rgb(var(--accent-rgb));
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transform: scale(0);
    transition: transform .16s cubic-bezier(.2,.9,.3,1.4);
    pointer-events: none;
}
.art-picker-tile.selected .art-picker-check { transform: scale(1); }

.art-picker-skel {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: linear-gradient(100deg, #191919 30%, #232323 50%, #191919 70%);
    background-size: 200% 100%;
    animation: artPickerShimmer 1.3s ease-in-out infinite;
}
@keyframes artPickerShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.art-picker-empty { padding: 48px 12px; text-align: center; color: #b3b3b3; font-size: 14px; }

.art-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.art-picker-count { font-size: 13px; color: #b3b3b3; }
.art-picker-actions { display: flex; gap: 10px; }
.art-picker-btn {
    padding: 9px 20px;
    font-size: 14px; font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.art-picker-btn:hover { transform: scale(1.04); }
.art-picker-cancel { background: transparent; color: #e6e6e6; border-color: rgba(255,255,255,.22); }
.art-picker-cancel:hover { border-color: #fff; }
/* Hands the image back to the media server. Quieter than Cancel — it is a real
   change, but it is the escape hatch, not the primary action. */
.art-picker-release { background: transparent; color: #9aa0a6; border-color: rgba(255,255,255,.12); margin-right: auto; }
.art-picker-release:hover:not(:disabled) { color: #e6e6e6; border-color: rgba(255,255,255,.3); }
.art-picker-release:disabled { opacity: .5; cursor: default; }
.art-picker-apply { background: rgb(var(--accent-rgb)); color: #0b1d12; }
.art-picker-apply:disabled { opacity: .4; cursor: default; transform: none; }

/* Library M3U export button (standalone action in the Export modal) */
.arec-btn-m3u {
    border-color: rgba(var(--accent-rgb), .55) !important;
    color: rgb(var(--accent-light-rgb)) !important;
}
.arec-btn-m3u:hover {
    background: rgba(var(--accent-rgb), .14) !important;
    border-color: rgb(var(--accent-rgb)) !important;
}

/* Sidebar nav section headers — clean collapsible dividers. Deliberately distinct from nav items
   (they toggle a group, not navigate): compact, uppercase, readable, with a disclosure chevron. */
.nav-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 216px;
    height: 30px;
    margin: 12px 0 2px;
    padding: 0 12px 0 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    user-select: none;
    text-align: left;
    transition: background .12s ease, color .12s ease;
}
.nav-section-label:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}
.nav-section-chevron {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    transition: transform .2s ease, opacity .15s ease;
}
.nav-section-label:hover .nav-section-chevron { opacity: 1; }
/* Collapsed: chevron points right (closed). Expanded: points down (default, open). */
.nav-section-label.collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-item-hidden { display: none !important; }

/* ══ Collapsible sidebar (#1155, wishx) ═══════════════════════════════════
   One toggle, two states: full width, or just wide enough for the icons.
   The state is an attribute on <html> so --sidebar-w resolves before first
   paint — see the inline script in index.html, which has to run in <head> or
   the whole page visibly jumps on every navigation.

   Items size themselves off the sidebar rather than repeating its number,
   which is what let .nav-button and .nav-section-label sit on a hardcoded
   216px that nobody would have thought to update. */
html[data-sidebar] .nav-button,
html[data-sidebar] .nav-section-label {
    width: calc(var(--sidebar-w) - 24px);
}

/* ── Collapsed: icons only ── */
html[data-sidebar="collapsed"] .nav-text,
html[data-sidebar="collapsed"] .sidebar-brand-text,
html[data-sidebar="collapsed"] .nav-section-title,
html[data-sidebar="collapsed"] .nav-section-chevron,
html[data-sidebar="collapsed"] .side-toggle-btn span,
html[data-sidebar="collapsed"] .profile-indicator-name {
    display: none;
}

/* The footer blocks are all prose — "Support SoulSync", a version string, and
   three service rows with names and test buttons. None of it survives being
   68px wide, and there is no icon that would stand in for it. They come back
   the moment you expand. The status JS keeps updating them regardless; hiding
   is presentational only, so nothing downstream needs to know. */
html[data-sidebar="collapsed"] .support-section,
html[data-sidebar="collapsed"] .version-section,
html[data-sidebar="collapsed"] .status-section {
    display: none;
}

html[data-sidebar="collapsed"] .nav-button {
    width: 44px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    gap: 0;
    justify-content: center;
}

/* A section header with no readable text is a dead control — you would be
   clicking a nameless chevron and items would vanish with no way to tell what
   you hid or how to get it back. So the label becomes a plain divider and
   every item under it is forced visible, whatever the saved per-section state
   says. That state stays in localStorage untouched and comes back on expand. */
html[data-sidebar="collapsed"] .nav-section-label {
    width: 28px;
    height: 1px;
    min-height: 1px;
    margin: 12px auto;
    padding: 0;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 1px;
    pointer-events: none;
    overflow: hidden;
}
html[data-sidebar="collapsed"] .nav-item-hidden { display: flex !important; }

/* The header's 24px side padding eats 48px of a 68px sidebar, leaving a 20px
   content box — everything inside it overflowed right and got clipped by the
   header's own overflow:hidden, which is why nothing looked centred. */
html[data-sidebar="collapsed"] .sidebar-header {
    padding: 16px 6px;
    align-items: center;
}

/* Logo and toggle stack rather than share a line: 38px logo + 12px gap + 26px
   button is 76px, wider than the collapsed sidebar itself, so side by side they
   just squash each other. */
html[data-sidebar="collapsed"] .sidebar-brand {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* the Music/Video pill's collapsed geometry lives with the rest of it, in
   video/video-side.css — the sliding thumb has to be reasoned about as one
   piece or it ends up a stray bar. */
html[data-sidebar="collapsed"] .profile-indicator { justify-content: center; flex-wrap: wrap; }

/* The toggle itself. Sits in the sidebar header because this is a spatial
   preference you change while looking at the thing, not configuration. */
.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-collapse-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.16);
}
.sidebar-collapse-toggle svg { width: 14px; height: 14px; }
/* Chevrons point the way the click will take you: inward to shrink, outward
   to grow back. Collapsed is the only state where expanding is the only move. */
html[data-sidebar="collapsed"] .sidebar-collapse-toggle svg { transform: rotate(180deg); }

/* Mobile owns the sidebar below its breakpoint (mobile.css) — the density
   modes are a desktop concern and must not fight it. */
@media (max-width: 768px) {
    html[data-sidebar="collapsed"] {
        --sidebar-w: 240px;
    }
    .sidebar-collapse-toggle { display: none; }
    html[data-sidebar="collapsed"] .nav-text,
    html[data-sidebar="collapsed"] .sidebar-brand-text,
    html[data-sidebar="collapsed"] .nav-section-title,
    html[data-sidebar="collapsed"] .nav-section-chevron,
    html[data-sidebar="collapsed"] .side-toggle-btn span,
    html[data-sidebar="collapsed"] .profile-indicator-name,
    html[data-sidebar="collapsed"] .support-section,
    html[data-sidebar="collapsed"] .version-section,
    html[data-sidebar="collapsed"] .status-section {
        display: revert;
    }
    html[data-sidebar="collapsed"] .nav-button {
        width: calc(var(--sidebar-w) - 24px);
        padding: 0 16px;
        gap: 14px;
        justify-content: flex-start;
    }
}

/* ══ Live Server Activity (app-wide Tautulli-style view) ══════════════════ */
.activity-float-btn {
    position: fixed; bottom: 24px; right: 136px; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(20, 20, 28, 0.85); backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5);
    cursor: pointer; z-index: 999999; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: all 0.2s;
}
.activity-float-btn:hover { background: rgba(30, 30, 40, 0.95); color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.15); transform: scale(1.05); }
.activity-float-btn.activity-live { color: #4ade80; border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.25),
                0 0 22px rgba(74, 222, 128, 0.28); animation: sactPulse 2.4s ease-in-out infinite; }
@keyframes sactPulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 18px rgba(74,222,128,0.18); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 30px rgba(74,222,128,0.42); } }
.activity-float-badge {
    position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px;
    background: #22c55e; color: #04120a; font-size: 10px; font-weight: 900; display: flex;
    align-items: center; justify-content: center; padding: 0 4px; line-height: 1;
    border: 2px solid rgba(16, 16, 16, 0.95);
}

.sact-scrim-bg { position: fixed; inset: 0; z-index: 999997; background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.sact-scrim-bg.visible { opacity: 1; pointer-events: auto; }

.sact-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: 452px; max-width: 96vw; z-index: 999998;
    background: linear-gradient(180deg, #101017, #0b0b10); border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); color: #eef1f7;
}
.sact-drawer.visible { transform: translateX(0); }
.sact-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 20px 22px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.sact-head-t { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; flex-wrap: wrap; }
.sact-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex: 0 0 auto;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.8); animation: sactPulse 2.4s ease-in-out infinite; }
.sact-server { flex-basis: 100%; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.4); }
.sact-x { background: none; border: 0; color: rgba(255, 255, 255, 0.5); font-size: 27px; line-height: 1; cursor: pointer; }
.sact-x:hover { color: #fff; }
.sact-body { flex: 1; overflow-y: auto; padding: 14px 18px 24px; }
.sact-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sact-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.72); }
.sact-chip strong { color: #fff; }
.sact-chip--hero { background: rgba(74, 222, 128, 0.14); color: #7ee0a0; }
.sact-chip--tc { background: rgba(245, 158, 11, 0.16); color: #f7c265; }

.sact-list { display: flex; flex-direction: column; gap: 14px; }
.sact-card { position: relative; border-radius: 14px; overflow: hidden; background: #15151d;
    border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.sact-art { position: absolute; inset: 0; background-size: cover; background-position: center;
    filter: blur(2px) saturate(1.05); transform: scale(1.08); opacity: 0.5; }
.sact-scrim { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(12,12,18,0.94) 42%, rgba(12,12,18,0.62) 100%); }
.sact-row { position: relative; display: flex; gap: 13px; padding: 13px 14px 12px; }
.sact-poster { flex: 0 0 62px; width: 62px; aspect-ratio: 2 / 3; border-radius: 9px; overflow: hidden;
    background: #0c0c12; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.sact-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sact-poster--none { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.sact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sact-title { font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-sub { font-size: 12px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.sact-ava { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #cfe;
    background: linear-gradient(135deg, rgba(99,102,241,0.55), rgba(56,189,248,0.45)); }
.sact-uname { font-weight: 700; color: rgba(255,255,255,0.78); }
.sact-dot { opacity: 0.4; }
.sact-dev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.sact-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; }
.sact-badge--ok { background: rgba(34, 197, 94, 0.18); color: #7ee0a0; }
.sact-badge--ds { background: rgba(56, 189, 248, 0.18); color: #7dd3fc; }
.sact-badge--tc { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.sact-tag { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.sact-tag--wan { background: rgba(245, 158, 11, 0.15); color: #f7c265; }
.sact-tag--lan { background: rgba(255, 255, 255, 0.07); color: rgba(255,255,255,0.5); }
.sact-xline { font-size: 10.5px; color: rgba(255, 255, 255, 0.45); margin-top: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-prog { position: relative; height: 4px; background: rgba(255, 255, 255, 0.1); }
.sact-prog-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width 0.6s ease; }
.sact-st-paused .sact-prog-fill { background: rgba(255,255,255,0.4); }
.sact-st-buffering .sact-prog-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); animation: sactBuf 1s ease-in-out infinite; }
@keyframes sactBuf { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.sact-time { position: relative; display: flex; justify-content: space-between; padding: 7px 14px 9px;
    font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }

.sact-empty { text-align: center; padding: 48px 20px; color: rgba(255, 255, 255, 0.6); }
.sact-empty-ic { font-size: 40px; margin-bottom: 12px; }
.sact-empty-t { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.8); }
.sact-empty-s { font-size: 12.5px; margin-top: 6px; color: rgba(255,255,255,0.45); line-height: 1.5; }
@media (max-width: 560px) { .sact-drawer { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .activity-float-btn.activity-live, .sact-live-dot, .sact-st-buffering .sact-prog-fill { animation: none; } }

/* Server Activity — tabs + history rows (Phase 2) */
.sact-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sact-tab { flex: 0 0 auto; padding: 9px 16px; background: none; border: 0; cursor: pointer;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease; }
.sact-tab:hover { color: rgba(255,255,255,0.8); }
.sact-tab--on { color: #fff; border-bottom-color: #22c55e; }
.sact-hlist { display: flex; flex-direction: column; }
.sact-hrow { display: flex; align-items: center; gap: 12px; padding: 11px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05); }
.sact-hrow:last-child { border-bottom: 0; }
.sact-hthumb { flex: 0 0 44px; width: 44px; aspect-ratio: 2/3; border-radius: 7px; overflow: hidden;
    background: #0c0c12; border: 1px solid rgba(255,255,255,0.08); }
.sact-hthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sact-hthumb--none { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sact-hinfo { flex: 1; min-width: 0; }
.sact-htitle { font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-hsub { font-size: 11.5px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.sact-hmeta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.sact-hwhen { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4);
    font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Server Activity — stop-stream control */
.sact-stop { position: absolute; top: 10px; right: 10px; z-index: 3; width: 28px; height: 28px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
    opacity: 0; transition: all 0.15s ease; }
.sact-card:hover .sact-stop { opacity: 1; }
.sact-stop:hover { background: rgba(239,68,68,0.9); border-color: rgba(239,68,68,0.9); color: #fff; }
.sact-stop-ov { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.66); backdrop-filter: blur(3px); }
.sact-stop-modal { width: min(400px, 92vw); background: #14141c; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 15px; padding: 22px; color: #eef1f7; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.sact-stop-h { font-size: 17px; font-weight: 800; }
.sact-stop-sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 3px 0 16px; }
.sact-stop-lbl { display: block; font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.sact-stop-msg { width: 100%; border-radius: 9px; padding: 9px 11px; resize: vertical;
    background: #07070b; border: 1px solid rgba(255,255,255,0.12); color: #dfe3ea; font: inherit; font-size: 12.5px; }
.sact-stop-foot { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.sact-stop-btn { padding: 9px 15px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #eef1f7; }
.sact-stop-btn:hover { background: rgba(255,255,255,0.14); }
.sact-stop-btn--go { background: #ef4444; border-color: #ef4444; color: #fff; }
.sact-stop-btn--go:hover:not(:disabled) { background: #f05252; }
.sact-stop-btn--go:disabled { opacity: 0.6; cursor: default; }

/* Server Activity — Stats tab (Phase 3) */
.sact-sec { margin-top: 20px; }
.sact-sec-h { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(255,255,255,0.42); margin-bottom: 10px; }
.sact-graph { width: 100%; height: 76px; display: block; }
.sact-bar { fill: rgba(34,197,94,0.55); transition: fill 0.15s ease; }
.sact-bar:hover { fill: #4ade80; }
.sact-graph-x { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 4px; font-variant-numeric: tabular-nums; }
.sact-cwlist { display: flex; flex-direction: column; gap: 8px; }
.sact-cw { display: flex; align-items: center; gap: 11px; }
.sact-cw-th { flex: 0 0 34px; width: 34px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden;
    background: #0c0c12; border: 1px solid rgba(255,255,255,0.08); }
.sact-cw-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sact-cw-th--none { display: flex; align-items: center; justify-content: center; font-size: 15px; }
.sact-cw-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-cw-n { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #7ee0a0;
    background: rgba(34,197,94,0.14); padding: 2px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.sact-rank { display: flex; flex-direction: column; gap: 9px; }
.sact-rank-row { display: flex; align-items: center; gap: 9px; }
.sact-rank-name { flex: 0 0 34%; min-width: 0; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.85);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sact-rank-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.sact-rank-bar span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #4ade80); }
.sact-rank-n { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: rgba(255,255,255,0.6); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.sact-rank-row .sact-ava { flex: 0 0 auto; }

/* ══ Server Activity — visual elevation ═══════════════════════════════════ */
/* card entrance stagger (only on a fresh list render, never on live updates) */
.sact-list.sact-enter > .sact-card { animation: sactCardIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.sact-list.sact-enter > .sact-card:nth-child(2) { animation-delay: 0.06s; }
.sact-list.sact-enter > .sact-card:nth-child(3) { animation-delay: 0.12s; }
.sact-list.sact-enter > .sact-card:nth-child(4) { animation-delay: 0.18s; }
.sact-list.sact-enter > .sact-card:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes sactCardIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.sact-card { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.sact-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
/* richer art backdrop */
.sact-art { opacity: 0.58; filter: blur(1.5px) saturate(1.15); }
.sact-card:hover .sact-art { opacity: 0.72; transform: scale(1.12); transition: opacity 0.3s ease, transform 0.6s ease; }
.sact-scrim { background: linear-gradient(105deg, rgba(11,11,17,0.95) 40%, rgba(11,11,17,0.55) 78%, rgba(11,11,17,0.35) 100%); }
/* progress bar: taller, gradient, glowing playhead */
.sact-prog { height: 5px; background: rgba(255,255,255,0.09); }
.sact-prog-fill { position: relative; background: linear-gradient(90deg, #16a34a, #4ade80);
    box-shadow: 0 0 10px rgba(74,222,128,0.5); transition: width 0.45s linear; }
.sact-head-dot { position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-radius: 50%;
    transform: translateY(-50%); background: #eafff1; box-shadow: 0 0 8px rgba(74,222,128,0.9); }
.sact-st-paused .sact-head-dot, .sact-card:not(.sact-st-playing):not(.sact-st-buffering) .sact-head-dot { opacity: 0.6; }
.sact-st-paused .sact-prog-fill { background: rgba(255,255,255,0.42); box-shadow: none; transition: width 0.3s ease; }
.sact-st-paused .sact-head-dot { background: rgba(255,255,255,0.6); box-shadow: none; }
.sact-st-buffering .sact-prog-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.sact-elapsed, .sact-remain { font-variant-numeric: tabular-nums; }
.sact-remain { color: rgba(255,255,255,0.4); }
/* music equalizer glyph on the poster */
.sact-eq { position: absolute; left: 5px; bottom: 5px; display: flex; align-items: flex-end; gap: 2px; height: 15px; z-index: 2;
    padding: 3px 4px; border-radius: 5px; background: rgba(0,0,0,0.45); backdrop-filter: blur(3px); }
.sact-eq i { width: 2.5px; border-radius: 2px; background: #4ade80; height: 40%;
    animation: sactEq 0.9s ease-in-out infinite; }
.sact-eq i:nth-child(2) { animation-delay: 0.18s; height: 80%; }
.sact-eq i:nth-child(3) { animation-delay: 0.36s; height: 55%; }
.sact-eq i:nth-child(4) { animation-delay: 0.54s; height: 70%; }
@keyframes sactEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.sact-st-paused .sact-eq i { animation-play-state: paused; background: rgba(255,255,255,0.4); }
/* summary chips → a touch more presence */
.sact-chip--hero { box-shadow: inset 0 0 0 1px rgba(74,222,128,0.2); }
/* graph elevation */
.sact-graph { height: 82px; }
.sact-bar { fill: url(#sactBar); transition: fill 0.15s ease, opacity 0.15s ease; }
.sact-bar--empty { fill: rgba(255,255,255,0.06); }
.sact-bar--peak { fill: #4ade80; }
.sact-bar:hover { fill: #86efac; }
.sact-graph-x { justify-content: space-between; }
.sact-graph-x span:nth-child(2) { color: rgba(74,222,128,0.6); font-weight: 700; }
/* section headers get a hairline */
.sact-sec-h { display: flex; align-items: center; gap: 8px; }
.sact-sec-h::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06); }
@media (prefers-reduced-motion: reduce) {
    .sact-list.sact-enter > .sact-card, .sact-eq i { animation: none; }
    .sact-prog-fill { transition: none; }
}

/* Server Activity — click-through to the SoulSync detail page */
.sact-card--link { cursor: pointer; }
.sact-card--link .sact-title { color: rgb(var(--vd-accent-rgb, 88 101 242)); }
.sact-card--link:hover .sact-title { filter: brightness(1.25); }
/* a PERSISTENT 'Open' pill so it's obviously clickable (was hover-only, easy to miss) */
.sact-open { display: inline-flex; align-items: center; margin-left: 8px; font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--vd-accent-rgb, 88 101 242));
    background: rgba(var(--vd-accent-rgb, 88 101 242), 0.16); padding: 2px 7px; border-radius: 6px;
    vertical-align: 2px; transition: all 0.15s ease; }
.sact-open::after { content: 'Open ↗'; }
.sact-card--link:hover .sact-open { background: rgba(var(--vd-accent-rgb, 88 101 242), 0.3); }

/* ── Artist photo picker (hover overlay on the artist-detail hero image) ─── */
/* Mirrors .enhanced-art-edit-overlay: invisible until hover, click opens the
   per-source photo picker (openArtistArtPicker). Container already clips. */
.artist-image-container { cursor: pointer; }
.artist-image-edit-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.28));
    opacity: 0;
    transition: opacity .18s ease;
    border-radius: inherit;
    z-index: 2;
}
.artist-image-container:hover .artist-image-edit-overlay { opacity: 1; }
.artist-image-edit-overlay svg { opacity: .95; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT — Soulseek rooms + private messages (one page, both sidebars)
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-page-container { display: flex; flex-direction: column; height: 100%; }
/* Discord-style 4-column shell: guild rail | channels | messages | members.
   The rail + sidebar are flush (no gap) and share one panel surface, the way
   Discord reads; the message column and member list keep their own cards. */
.chat-shell {
    display: grid; grid-template-columns: 72px 240px 1fr 240px; gap: 0 12px;
    flex: 1; min-height: 0; height: calc(100vh - 210px);
}

/* ── guild rail (joined rooms as pucks) ── */
.chat-guilds {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 0; overflow-y: auto; min-height: 0;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; scrollbar-width: none;
}
.chat-guilds::-webkit-scrollbar { display: none; }
.chat-guild {
    position: relative; width: 46px; height: 46px; flex: 0 0 auto;
    border: none; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; letter-spacing: .3px;
    background: rgba(255,255,255,0.07);
    border-radius: 16px; transition: border-radius .16s ease, background .16s ease;
}
.chat-guild:hover { border-radius: 14px; background: rgba(29,185,84,0.5); }
.chat-guild--on { border-radius: 14px; background: rgba(29,185,84,0.72); }
/* the white pill Discord slides in on the active/hovered server */
.chat-guild::before {
    content: ''; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 0; border-radius: 0 4px 4px 0; background: #fff;
    transition: height .16s ease;
}
.chat-guild:hover::before { height: 20px; }
.chat-guild--on::before { height: 28px; }
.chat-guild-badge {
    position: absolute; right: -2px; bottom: -2px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    border: 2px solid #111114;
}
.chat-guild-wrap { position: relative; flex: 0 0 auto; display: flex; }
.chat-guild-leave {
    position: absolute; top: -3px; right: -3px; width: 17px; height: 17px;
    border: 2px solid #111114; border-radius: 50%; cursor: pointer;
    background: rgba(239,68,68,0.9); color: #fff;
    font-size: 11px; line-height: 1; padding: 0;
    opacity: 0; transition: opacity .15s ease;
}
.chat-guild-wrap:hover .chat-guild-leave { opacity: 1; }
.chat-guild-leave:hover { background: #ef4444; }
.chat-guild-sep { width: 32px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.1); flex: 0 0 auto; }
.chat-guild--add { background: rgba(255,255,255,0.05); color: #1db954; font-size: 22px; font-weight: 400; }
.chat-guild--add:hover { background: rgba(29,185,84,0.22); }

/* ── channel sidebar ── */
.chat-side { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-side-head {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 14px 14px; font-size: 15px; font-weight: 800; color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.4); cursor: default;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.chat-side-head-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-side-head-caret { color: rgba(255,255,255,0.5); font-size: 13px; }
.chat-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 8px; }

/* channel rows */
.chat-chan {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 6px 8px; border-radius: 6px; border: none; background: none;
    color: rgba(255,255,255,0.45); font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: left; margin-bottom: 1px;
}
.chat-chan:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.chat-chan--on { background: rgba(255,255,255,0.09); color: #fff; }
/* per-channel mute: dimmed row; the bell only shows on hover (🔔 to mute)
   except a muted channel wears its 🔕 all the time */
.chat-chan--muted { opacity: 0.45; }
.chat-chan-mute {
    display: none; font-size: 11px; line-height: 1;
    padding: 2px; border-radius: 4px; flex-shrink: 0;
}
.chat-chan:hover .chat-chan-mute { display: inline-block; }
.chat-chan--muted .chat-chan-mute { display: inline-block; }
.chat-chan-mute:hover { background: rgba(255,255,255,0.12); }
.chat-chan-hash { color: rgba(255,255,255,0.3); font-size: 17px; font-weight: 500; }
.chat-chan--on .chat-chan-hash { color: rgba(255,255,255,0.55); }
.chat-chan-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chan-unread {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
    line-height: 17px; text-align: center;
}
.chat-chan--unread { color: #fff; }
.chat-cat {
    display: flex; align-items: center; gap: 4px; width: 100%;
    padding: 14px 4px 4px; border: none; background: none; cursor: pointer;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: rgba(255,255,255,0.4); text-align: left;
}
.chat-cat:hover { color: rgba(255,255,255,0.75); }

/* forum-style threads nested under their channel */
.chat-thread {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 4px 8px 4px 22px; border-radius: 6px; border: none; background: none;
    color: rgba(255,255,255,0.4); font-size: 13px; cursor: pointer;
    text-align: left; margin-bottom: 1px; position: relative;
}
.chat-thread:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
.chat-thread--on { background: rgba(255,255,255,0.09); color: #fff; }
.chat-thread-branch {
    position: absolute; left: 12px; top: 0; bottom: 50%; width: 8px;
    border-left: 2px solid rgba(255,255,255,0.14);
    border-bottom: 2px solid rgba(255,255,255,0.14);
    border-bottom-left-radius: 6px;
}
.chat-thread-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-back {
    border: none; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    font-size: 15px; margin-right: 8px; flex: 0 0 auto;
}
.chat-thread-back:hover { background: rgba(255,255,255,0.14); color: #fff; }
.chat-cat-caret { transition: transform .15s ease; display: inline-block; }
.chat-cat--closed .chat-cat-caret { transform: rotate(-90deg); }

/* bottom-left account strip */
.chat-userpanel {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: rgba(0,0,0,0.32);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.chat-userpanel-av {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    background: rgba(29,185,84,0.28); color: #1db954;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
}
/* The cell already has a fixed 32px box, so the image can fill it without the
   circular height dependency that collapsed the avatar picker. */
.chat-userpanel-av--img { background: none; overflow: hidden; padding: 0; }
.chat-userpanel-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-guild-logo { width: 30px; height: 30px; object-fit: contain; display: block; }
.chat-userpanel-main { flex: 1; min-width: 0; }
.chat-userpanel-name {
    font-size: 13px; font-weight: 700; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-userpanel-sub { font-size: 11px; color: rgba(255,255,255,0.45); }
.chat-userpanel-btn {
    width: 28px; height: 28px; border: none; background: none; cursor: pointer;
    border-radius: 6px; color: rgba(255,255,255,0.55); font-size: 14px;
}
.chat-userpanel-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.chat-rail { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.chat-rail .chat-users { flex: 1 1 auto; }
.chat-side, .chat-users {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: 12px; overflow-y: auto; min-height: 0;
}
.chat-side-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45); margin: 6px 4px 6px;
}
.chat-side-label + .chat-side-label, .chat-side-list + .chat-side-label { margin-top: 16px; }
.chat-side-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 9px; border: none; background: transparent;
    color: rgba(255,255,255,0.75); font-size: 13.5px; font-weight: 600; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-side-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.chat-side-item--on { background: rgba(29,185,84,0.16); color: #1db954; }
.chat-side-dot {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: #1db954; margin-left: auto;
}
.chat-side-none { font-size: 12.5px; color: rgba(255,255,255,0.35); padding: 6px 10px; }
/* rooms rail: a row = the room button + a hover-revealed leave × */
.chat-side-room { position: relative; display: flex; align-items: center; border-radius: 9px; }
.chat-side-room .chat-side-item { flex: 1; min-width: 0; }
.chat-side-room.chat-side-item--on { background: rgba(29,185,84,0.16); }
.chat-side-room.chat-side-item--on .chat-side-item { color: #1db954; background: transparent; }
.chat-side-leave {
    flex: none; width: 22px; height: 22px; margin-right: 4px; border-radius: 6px;
    border: none; background: transparent; color: rgba(255,255,255,0.35);
    font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.chat-side-room:hover .chat-side-leave { opacity: 1; }
.chat-side-leave:hover { background: rgba(239,68,68,0.35); color: #fff; }
.chat-side-add { color: rgba(255,255,255,0.45); font-weight: 700; }
.chat-side-add:hover { color: #1db954; }
/* room browser modal */
.chat-rooms-modal { width: min(460px, 92vw); }
.chat-rooms-list {
    margin-top: 10px; max-height: 46vh; overflow-y: auto; display: flex;
    flex-direction: column; gap: 2px;
}
.chat-room-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    border-radius: 9px; font-size: 13px;
}
.chat-room-row:hover { background: rgba(255,255,255,0.05); }
.chat-room-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: rgba(255,255,255,0.85); font-weight: 600;
}
.chat-room-count { flex: none; font-size: 11.5px; color: rgba(255,255,255,0.4); }
.chat-room-joined {
    flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; color: #1db954;
}
.chat-room-join {
    flex: none; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 1px solid rgba(29,185,84,0.4); background: rgba(29,185,84,0.14);
    color: #1db954; cursor: pointer;
}
.chat-room-join:hover { background: rgba(29,185,84,0.3); }
/* user list: search + sections + presence */
.chat-user-search {
    width: 100%; padding: 7px 10px; margin-bottom: 8px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.25);
    color: #fff; font-size: 12.5px;
}
.chat-user-search:focus { outline: none; border-color: rgba(29,185,84,0.5); }
.chat-users-label--sub { margin-top: 12px; color: rgba(255,255,255,0.35); }
.chat-user-dot {
    flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: #1db954; opacity: 0.75;
}
.chat-user--self .chat-user-dot { background: #7c5cff; }
.chat-user--ignored { opacity: 0.45; }
.chat-user--ignored .chat-user-dot { background: rgba(255,255,255,0.25); }
.chat-user-mute {
    margin-left: auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: rgba(255,255,255,0.35);
}
/* share browser: folders → files, checkbox picks */
.chat-browse-modal { width: min(560px, 94vw); }
.chat-browse-body {
    margin-top: 10px; max-height: 50vh; overflow-y: auto; display: flex;
    flex-direction: column; gap: 1px;
}
.chat-browse-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 7px 10px; border-radius: 9px; border: none; background: transparent;
    color: rgba(255,255,255,0.8); font-size: 13px; cursor: pointer;
}
.chat-browse-row:hover { background: rgba(255,255,255,0.05); }
.chat-browse-row--all {
    position: sticky; top: 0; background: rgba(20,20,24,0.95); z-index: 1;
    font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 0;
}
.chat-browse-icon { flex: none; }
.chat-browse-name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-browse-meta { flex: none; font-size: 11.5px; color: rgba(255,255,255,0.4); }
.chat-browse-row input[type="checkbox"] { flex: none; accent-color: #1db954; }
/* history search (room head) + results banner */
.chat-head-search { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.chat-head-search .chat-filter-btn { margin-left: 0; }
.chat-head-search + .chat-filter-btn { margin-left: 8px; }
button.chat-hidden-note {
    display: block; width: 100%; border: none; background: transparent; cursor: pointer;
}
button.chat-hidden-note:hover { color: rgba(255,255,255,0.65); }

.chat-head-search-in {
    width: 190px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.3); color: #fff;
}
.chat-head-search-in:focus { outline: none; border-color: rgba(29,185,84,0.5); }
.chat-search-banner {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; margin-bottom: 8px; border-radius: 10px;
    background: rgba(29,185,84,0.1); border: 1px solid rgba(29,185,84,0.25);
    color: #d9ffe9; font-size: 13px; font-weight: 600;
}
.chat-search-banner .chat-filter-btn { margin-left: auto; }
/* polish: subtle avatar ring so initials read as identity, not blobs */
.chat-avatar { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.14); }

.chat-main {
    position: relative;   /* containing block for the settings overlay */
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; overflow: hidden;
}
.chat-head {
    display: flex; align-items: baseline; gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.chat-head-title { font-size: 16px; font-weight: 800; color: #fff; }
.chat-head-sub { font-size: 12px; color: rgba(255,255,255,0.4); }

.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 18px; min-height: 0; }
.chat-msg { padding: 5px 0; display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline; }
.chat-msg-user {
    border: none; background: transparent; padding: 0; cursor: pointer;
    font-size: 13.5px; font-weight: 800; color: #1db954;
}
.chat-msg--self .chat-msg-user { color: #58a6ff; }
.chat-msg-user:hover { text-decoration: underline; }
.chat-msg-time { font-size: 11px; color: rgba(255,255,255,0.3); white-space: nowrap; }
.chat-msg-text {
    grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.85);
    word-break: break-word; white-space: pre-wrap; margin-top: -2px;
}
.chat-empty, .chat-problem {
    padding: 40px 20px; text-align: center; font-size: 14px; color: rgba(255,255,255,0.4);
}
.chat-problem { color: #f0a05a; }
/* join gate (auto-join off = you're out until you say otherwise) */
.chat-join-btn { padding: 8px 18px; border-radius: 10px; border: 1px solid rgba(var(--accent-rgb, 29, 185, 84), 0.5);
    background: rgba(var(--accent-rgb, 29, 185, 84), 0.15); color: rgb(var(--accent-rgb, 29, 185, 84));
    font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.chat-join-btn:hover { background: rgba(var(--accent-rgb, 29, 185, 84), 0.85); color: #fff; }
.chat-join-btn:disabled { opacity: 0.5; cursor: default; }

.chat-composer {
    display: flex; gap: 10px; padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
/* display:flex above beats the browser's own [hidden] { display: none }, so
   form.hidden = true did nothing at all — the composer stayed on screen in
   the Arcade (where there is no message to send) and behind the join gate.
   Same trap as #track-detail-overlay further up this file. */
.chat-composer[hidden] { display: none !important; }
.chat-input {
    flex: 1; padding: 11px 14px; border-radius: 10px; font-size: 14px; color: #fff;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.chat-input:focus { outline: none; border-color: rgba(29,185,84,0.6); background: rgba(255,255,255,0.09); }
.chat-input:disabled { opacity: 0.55; cursor: not-allowed; }
.chat-send-btn {
    padding: 11px 20px; border-radius: 10px; border: none; cursor: pointer;
    background: #1db954; color: #06130a; font-size: 14px; font-weight: 800;
}
.chat-send-btn:hover { filter: brightness(1.08); }
.chat-composer--locked .chat-send-btn { opacity: 0.4; cursor: not-allowed; }

.chat-users-label {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45); margin: 4px 4px 8px;
}
.chat-user {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 6px 10px; border-radius: 8px;
    border: none; background: transparent; color: rgba(255,255,255,0.7);
    font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-user:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* Preset chat avatars. The art is 140x165 (portrait), so these are ROUNDED
   RECTANGLES rather than circles — a circle would crop faces. Swap the
   border-radius to 50% if you ever ship square art. */
.chat-av {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
    font-size: 11px; font-weight: 800; line-height: 1;
}
.chat-av--img { background: rgba(0,0,0,0.25); }
.chat-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* avatar picker (chat settings).
   NOTE: the cell height is EXPLICIT and the image is absolutely positioned.
   The obvious version — aspect-ratio on a flex cell with a height:100% img —
   makes the cell's height depend on the image while the image's height depends
   on the cell, and the images collapse to nothing. Don't reintroduce that. */
.chat-avpicker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px; max-height: 300px; overflow-y: auto; padding: 10px;
    background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; margin-bottom: 10px;
}
.chat-avpick {
    position: relative;            /* containing block for the image */
    height: 96px;                  /* explicit — never derived from the image */
    padding: 0; cursor: pointer; overflow: hidden;
    border: 2px solid transparent; border-radius: 8px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
    font-size: 20px; line-height: 92px; text-align: center;
    transition: border-color .12s ease, transform .12s ease;
}
.chat-avpick img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.chat-avpick:hover { border-color: rgba(255,255,255,0.4); transform: translateY(-1px); }
.chat-avpick--on { border-color: #1db954; box-shadow: 0 0 0 2px rgba(29,185,84,0.25); }
.chat-avpick--none { font-weight: 700; }

/* Discord-style member row: avatar w/ presence dot + name over an activity line */
.chat-user-av {
    position: relative; width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 50%; background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.75);
}
.chat-user--self .chat-user-av { background: rgba(29,185,84,0.28); color: #1db954; }
.chat-user-av .chat-user-dot {
    position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
    margin: 0; border-radius: 50%; background: #3ba55d; border: 2.5px solid #16161a;
}
.chat-user-av .chat-user-dot--tuned { background: rgb(var(--accent-light-rgb)); }
.chat-user-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chat-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.chat-user-act {
    font-size: 11px; color: rgba(255,255,255,0.4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
    /* stack: the guild rail + member list fold away, channels scroll horizontally */
    .chat-shell { grid-template-columns: 1fr; height: calc(100vh - 190px); }
    .chat-guilds { display: none; }
    .chat-side { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; flex-direction: row; }
    .chat-side-head, .chat-userpanel { display: none; }
    .chat-side-scroll { display: flex; gap: 6px; padding: 6px; overflow-x: auto; }
    .chat-side-label { display: none; }
    .chat-side-list { display: flex; gap: 6px; }
    .chat-chanlist { display: flex; gap: 6px; }
    .chat-cat { display: none; }
    .chat-chan { width: auto; white-space: nowrap; }
    .chat-side-item { width: auto; white-space: nowrap; }
    .chat-rail { display: none; }
}

/* ── The Arcade (chat P3) ────────────────────────────────────────────────
   Games take over the message column. Accent is the same #1db954 the rest of
   chat uses; the board is deliberately desaturated so the green reads as
   "your turn" and nothing else competes with it.

   The board sizes itself off the column width with an aspect-ratio grid, so
   it stays square at any width without JS. Note the cells do NOT set their
   own height — the grid rows do — which is what stops the collapse the avatar
   picker hit (a cell height depending on content that depends on the cell). */
.chat-arc-lobby { padding: 12px 16px 24px; overflow-y: auto; }
/* the marquee: layered glows, not a flat tinted box */
.chat-arc-hero {
    position: relative; overflow: hidden;
    border-radius: 16px; padding: 22px 24px; margin-bottom: 18px;
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(29,185,84,0.18), transparent 55%),
        radial-gradient(70% 120% at 100% 100%, rgba(255,213,79,0.08), transparent 60%),
        rgba(255,255,255,0.025);
    border: 1px solid rgba(29,185,84,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.chat-arc-hero-title {
    font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
    color: #fff; margin-bottom: 6px;
}
.chat-arc-hero-sub {
    font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); max-width: 62ch;
}
.chat-arc-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chat-arc-hero-top { display: flex; align-items: flex-start; gap: 18px; }
.chat-arc-hero-top > div:first-child { flex: 1; min-width: 0; }
/* the purse reads as a physical thing rather than another stat line */
.chat-arc-purse {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 11px 18px; border-radius: 14px;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,213,79,0.10), transparent 65%),
        rgba(0,0,0,0.3);
    border: 1px solid rgba(255,213,79,0.32);
    box-shadow: inset 0 1px 0 rgba(255,213,79,0.15);
}
.chat-arc-purse-coin { font-size: 17px; line-height: 1; }
.chat-arc-purse-amt {
    font-size: 20px; font-weight: 800; color: #ffd54f; font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.chat-arc-purse-sub {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
    color: rgba(255,255,255,0.4);
}
.chat-arc-hero-turn {
    margin-top: 12px; display: inline-block; padding: 4px 11px; border-radius: 20px;
    background: rgba(29,185,84,0.18); color: #1db954; font-size: 12px; font-weight: 800;
}

/* game picker — tiles rather than a row of look-alike buttons */
.chat-arc-tiles {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px; margin-bottom: 6px;
}
.chat-arc-tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 15px 14px 13px; cursor: pointer; text-align: left;
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035); color: inherit;
    transition: transform .12s ease, border-color .12s ease,
                background .12s ease, box-shadow .12s ease;
    --tile-glow: 29,185,84;   /* each game overrides its own hue below */
}
.chat-arc-tile::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, rgba(var(--tile-glow),0.75), transparent 70%);
    opacity: 0.55; transition: opacity .12s ease;
}
.chat-arc-tile:hover {
    background:
        radial-gradient(120% 130% at 20% 0%, rgba(var(--tile-glow),0.16), transparent 60%),
        rgba(255,255,255,0.045);
    border-color: rgba(var(--tile-glow),0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.chat-arc-tile:hover::before { opacity: 1; }
.chat-arc-tile-icon {
    font-size: 28px; line-height: 1.15;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
}
.chat-arc-tile-name { font-size: 14px; font-weight: 800; color: #fff; }
.chat-arc-tile-blurb { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.35; }
/* every game gets its own light — the shelf reads like a real arcade row */
.chat-arc-tile[data-chat-arc-variant="connect4"] { --tile-glow: 90,140,235; }
.chat-arc-tile[data-chat-arc-variant="battleship"] { --tile-glow: 88,178,196; }
.chat-arc-tile[data-chat-arc-variant="othello"] { --tile-glow: 46,160,84; }
.chat-arc-tile[data-chat-arc-variant="gomoku"] { --tile-glow: 202,146,80; }
.chat-arc-tile[data-chat-arc-room] { --tile-glow: 168,120,250; }
.chat-arc-tile[data-chat-triv-open] { --tile-glow: 236,116,166; }
.chat-arc-tile[data-chat-slot-open] { --tile-glow: 255,193,7; }
.chat-arc-tilefoot { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.chat-arc-inline {
    border: none; background: none; padding: 0; cursor: pointer; font: inherit;
    color: #1db954; text-decoration: underline dotted rgba(29,185,84,0.5);
    text-underline-offset: 2px;
}
.chat-arc-blank {
    text-align: center; padding: 26px 16px; border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.12); color: rgba(255,255,255,0.42);
    font-size: 13px; margin-top: 14px;
}

.chat-arc-sectitle {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45); margin: 18px 2px 8px;
}
/* a hairline runs out from each section title — cheap structure, big calm */
.chat-arc-sectitle::after {
    content: ''; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent);
}
.chat-arc-count {
    background: rgba(255,255,255,0.08); border-radius: 8px; padding: 1px 7px;
    font-size: 11px; letter-spacing: 0;
}

.chat-arc-card {
    display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
    padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03); color: inherit;
    transition: transform .1s ease, border-color .1s ease,
                background .1s ease, box-shadow .1s ease;
}
.chat-arc-card:hover {
    background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.16);
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.chat-arc-card--mine {
    border-color: rgba(29,185,84,0.35);
    box-shadow: inset 3px 0 0 rgba(29,185,84,0.55);
}
.chat-arc-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-arc-card-sub { font-size: 12px; color: rgba(255,255,255,0.45); }
.chat-arc-card-actions { display: flex; gap: 8px; margin-top: 4px; }
.chat-arc-vs { font-size: 11px; color: rgba(255,255,255,0.35); text-transform: uppercase; }

.chat-arc-who {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.8);
}
.chat-arc-who--turn { color: #1db954; }
.chat-arc-who-dot { font-size: 17px; line-height: 1; }

.chat-arc-badge {
    align-self: flex-start; border-radius: 6px; padding: 2px 8px;
    font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6);
}
.chat-arc-badge--you { background: rgba(29,185,84,0.18); color: #1db954; }
.chat-arc-badge--open { background: rgba(88,166,255,0.16); color: #8ab4f8; }
.chat-arc-badge--stale { background: rgba(255,193,7,0.15); color: #ffc107; }
.chat-arc-badge--bad { background: rgba(244,67,54,0.15); color: #ff6b5e; }
.chat-arc-badge--done { background: rgba(255,255,255,0.06); }

.chat-arc-btn {
    border-radius: 8px; padding: 7px 13px; cursor: pointer; font-size: 13px; font-weight: 700;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
}
.chat-arc-btn:hover { background: rgba(255,255,255,0.1); }
.chat-arc-btn--go { background: #1db954; border-color: #1db954; color: #06130a; }
.chat-arc-btn--go:hover { filter: brightness(1.08); background: #1db954; }
.chat-arc-btn--bad { border-color: rgba(244,67,54,0.4); color: #ff6b5e; }
.chat-arc-btn--slim { padding: 4px 9px; font-size: 12px; }

/* ── board ── */
.chat-arc-board-wrap {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 24px; overflow-y: auto; max-width: 640px; margin: 0 auto; width: 100%;
}
.chat-arc-players { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-arc-board {
    display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 1 / 1; width: 100%;
    border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12);
    user-select: none;
}
/* all four boards sit ON the page rather than in it */
.chat-arc-board, .chat-arc-c4board, .chat-arc-othboard, .chat-arc-gmkboard {
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.chat-arc-board--over { opacity: 0.75; }
.chat-arc-sq {
    display: flex; align-items: center; justify-content: center; position: relative;
    cursor: pointer;
}
.chat-arc-sq--light { background: #6f7c86; }
.chat-arc-sq--dark { background: #46525c; }
.chat-arc-sq--last { box-shadow: inset 0 0 0 100px rgba(255,193,7,0.16); }
.chat-arc-sq--sel { box-shadow: inset 0 0 0 3px #1db954; }
.chat-arc-sq--check { box-shadow: inset 0 0 0 100px rgba(244,67,54,0.35); }
/* A legal empty square gets a dot; a legal capture gets a ring, so the two
   read differently at a glance the way they do on every chess site. */
.chat-arc-sq--dest::after {
    content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%;
    background: rgba(29,185,84,0.55);
}
.chat-arc-sq--take::after {
    content: ''; position: absolute; inset: 6%; border-radius: 50%;
    border: 4px solid rgba(29,185,84,0.6);
}
.chat-arc-pc {
    font-size: clamp(20px, 6.2vw, 44px); line-height: 1; position: relative; z-index: 1;
    pointer-events: none;
}
.chat-arc-pc--w { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.chat-arc-pc--b { color: #14181c; text-shadow: 0 1px 1px rgba(255,255,255,0.18); }

/* the status line is the board's VOICE — a quiet pill, not floating text */
.chat-arc-status {
    font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 8px 12px;
}
.chat-arc-note {
    font-size: 12px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04);
    border-left: 3px solid rgba(255,193,7,0.5); border-radius: 4px; padding: 7px 10px;
}
.chat-arc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-arc-promo {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: rgba(29,185,84,0.1); border: 1px solid rgba(29,185,84,0.3);
    border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700;
}
.chat-arc-promobtn {
    font-size: 24px; line-height: 1; padding: 2px 10px; cursor: pointer; color: #fff;
    border-radius: 6px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
}
.chat-arc-promobtn:hover { background: rgba(255,255,255,0.14); }

.chat-arc-moves {
    display: flex; flex-direction: column; gap: 1px; font-size: 13px;
    background: rgba(255,255,255,0.03); border-radius: 8px; padding: 8px 10px;
    max-height: 220px; overflow-y: auto;
}
.chat-arc-moverow {
    display: grid; grid-template-columns: 40px 1fr 1fr; gap: 8px;
    color: rgba(255,255,255,0.8); padding: 2px 0;
}
.chat-arc-moverow--none { color: rgba(255,255,255,0.4); grid-template-columns: 1fr; }
.chat-arc-moveno { color: rgba(255,255,255,0.35); }

/* acknowledgement line — derived, no extra round trip */
.chat-arc-ack { font-size: 12px; color: rgba(255,255,255,0.45); }
.chat-arc-ack--seen { color: #1db954; }

/* ── slot machine (arcade P10) ── */
.chat-slot-wrap {
    display: flex; flex-direction: column; gap: 14px; align-items: center;
    padding: 20px 16px 28px; max-width: 460px; margin: 0 auto; width: 100%;
}
.chat-slot-cab {
    width: 100%; border-radius: 16px; padding: 22px 18px 16px;
    background: linear-gradient(160deg, #2a1b3d, #14171c 70%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.35);
}
.chat-slot-reels { display: flex; gap: 10px; justify-content: center; }
.chat-slot-reel {
    flex: 1; max-width: 108px; aspect-ratio: 3 / 4; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(34px, 11vw, 56px); line-height: 1;
    background: linear-gradient(180deg, #f6f2ea, #cfc7bb);
    box-shadow: inset 0 -6px 14px rgba(0,0,0,0.22), inset 0 4px 8px rgba(255,255,255,0.6);
}
/* the blur only during the pull — a still reel should read crisply */
.chat-slot-cab--spin .chat-slot-reel { filter: blur(1.2px); }
.chat-slot-verdict {
    text-align: center; margin-top: 14px; font-size: 15px; font-weight: 800;
    letter-spacing: 0.4px; color: rgba(255,255,255,0.5); min-height: 22px;
}
.chat-slot-verdict--win { color: #ffd54f; text-shadow: 0 0 18px rgba(255,213,79,0.5); }
.chat-slot-bank { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.chat-slot-balance {
    font-size: 26px; font-weight: 800; color: #1db954; font-variant-numeric: tabular-nums;
}
.chat-slot-banklabel { font-size: 11px; color: rgba(255,255,255,0.4); }
.chat-slot-stakes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chat-slot-pull { padding: 9px 26px; font-size: 15px; }
.chat-slot-pull[disabled] { opacity: 0.5; cursor: default; }
.chat-slot-pays {
    width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
    background: rgba(255,255,255,0.03); border-radius: 10px; padding: 10px 14px;
}
.chat-slot-payrow {
    display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px;
    align-items: center; font-size: 13px; color: rgba(255,255,255,0.7);
}
.chat-slot-payrow b { color: #1db954; font-variant-numeric: tabular-nums; }
.chat-slot-paytwo { text-align: right; opacity: 0.65; }
@media (max-width: 560px) { .chat-slot-pays { grid-template-columns: 1fr; } }

/* ── battleship (arcade P9) ── */
.chat-bs-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.45); margin-top: 4px;
}
.chat-bs-lost { text-transform: none; letter-spacing: 0; color: #ffc107; font-weight: 600; }
.chat-bs-grid {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
    aspect-ratio: 1 / 1; width: 100%; padding: 6px; border-radius: 10px;
    background: #0d2438; border: 1px solid rgba(255,255,255,0.1);
}
/* their waters read cooler and emptier; yours warmer, because you can see it */
.chat-bs-grid--foe { background: #0a1c2c; }
.chat-bs-cell {
    border-radius: 3px; background: rgba(120,180,230,0.09); position: relative;
}
.chat-bs-cell--ship { background: rgba(255,255,255,0.32); }
.chat-bs-cell--fire { cursor: crosshair; }
.chat-bs-cell--fire:hover { background: rgba(29,185,84,0.55); }
.chat-bs-cell--miss::after {
    content: ''; position: absolute; inset: 34%; border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
.chat-bs-cell--hit { background: #d63a2f; }
.chat-bs-cell--hit::after {
    content: ''; position: absolute; inset: 22%; border-radius: 50%;
    background: rgba(255,220,120,0.9);
}
.chat-bs-fleetbar { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-bs-ship {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
}
.chat-bs-ship b { color: rgba(255,255,255,0.8); }
.chat-bs-ship--set { background: rgba(29,185,84,0.16); color: #1db954; }
.chat-bs-ship--next { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); color: #fff; }

/* ── room ballot (arcade P5) ── */
.chat-arc-ballot {
    background: rgba(255,255,255,0.04); border-radius: 8px; padding: 9px 11px;
    display: flex; flex-direction: column; gap: 5px;
}
.chat-arc-ballot-head {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px;
    color: rgba(255,255,255,0.45);
}
.chat-arc-ballotrow {
    display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center;
    font-size: 13px; color: rgba(255,255,255,0.8);
}
.chat-arc-ballotmv { font-weight: 700; }
.chat-arc-ballotbar {
    height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden;
}
.chat-arc-ballotbar i { display: block; height: 100%; background: #1db954; }
.chat-arc-ballotn {
    font-size: 11px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums;
}

/* ── connect 4 (arcade P5) ── */
.chat-arc-c4board {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    aspect-ratio: 7 / 6; width: 100%; padding: 8px;
    background: #2b4f8a; border-radius: 12px;
}
.chat-arc-c4cell {
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(0,0,0,0.28);
}
/* the whole COLUMN is the target — you drop into a column, not onto a cell */
.chat-arc-c4cell--live { cursor: pointer; }
.chat-arc-c4cell--live:hover { background: rgba(255,255,255,0.14); }
.chat-arc-disc { width: 82%; height: 82%; border-radius: 50%; }
.chat-arc-disc--w { background: radial-gradient(circle at 35% 30%, #ff8a80, #d63a2f); }
/* Yellow, not blue: the board is blue, and a blue disc on a blue board is
   the one colour pairing that cannot work. Red/yellow on blue is also what
   the actual game looks like, so it reads instantly. */
.chat-arc-disc--b { background: radial-gradient(circle at 35% 30%, #ffe082, #f2b90c); }

/* ── trivia card (rides the pollcard chrome) ── */
.chat-trivcard .chat-triv-row { display: flex; gap: 8px; margin-top: 8px; }
.chat-triv-in { flex: 1 1 auto; min-width: 0; padding: 8px 12px; font-size: 13px; }
.chat-triv-tail {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px;
    font-size: 11.5px; color: rgba(255,255,255,0.45);
}
.chat-triv-guess--win { color: #6ee7a0; font-weight: 700; }
.chat-triv-winline { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,0.85); }

/* ── Othello: green felt, black/white discs, glowing legal squares ── */
.chat-arc-othboard {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    aspect-ratio: 1 / 1; width: 100%; padding: 8px;
    background: #14351f; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
}
.chat-arc-othcell {
    display: flex; align-items: center; justify-content: center;
    background: #1d5e33; border-radius: 4px;
}
.chat-arc-othcell--live { cursor: pointer; }
.chat-arc-othcell--live:hover { background: #2a7a44; }
.chat-arc-othdisc {
    width: 80%; height: 80%; border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.45);
}
/* seat 'w' opens the game and plays the DARK discs (Othello's first mover) */
.chat-arc-othdisc--dark { background: radial-gradient(circle at 35% 30%, #4a4a4a, #0b0b0b); }
.chat-arc-othdisc--light { background: radial-gradient(circle at 35% 30%, #ffffff, #c9c9c9); }
.chat-arc-othdot {
    width: 26%; height: 26%; border-radius: 50%;
    background: rgba(255,255,255,0.22);
}
.chat-arc-othcell--live:hover .chat-arc-othdot { background: rgba(255,255,255,0.45); }
.chat-arc-othscore {
    margin-left: auto; font-size: 12px; font-weight: 700;
    color: rgba(255,255,255,0.75); white-space: nowrap;
    background: rgba(255,255,255,0.06); border-radius: 8px; padding: 3px 9px;
}

/* ── Gomoku: warm goban, stones with a last-move ring ── */
.chat-arc-gmkboard {
    display: grid; grid-template-columns: repeat(15, 1fr); gap: 0;
    aspect-ratio: 1 / 1; width: 100%; padding: 8px;
    background: #b98a4e; border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.35);
}
.chat-arc-gmkcell {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    /* the grid LINES live on each cell's midlines, goban-style */
    background:
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) center / 100% 1px no-repeat,
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) center / 1px 100% no-repeat;
}
.chat-arc-gmkcell--live { cursor: pointer; }
.chat-arc-gmkcell--live:hover::after {
    content: ''; position: absolute; width: 62%; height: 62%; border-radius: 50%;
    background: rgba(0,0,0,0.18);
}
.chat-arc-stone {
    width: 86%; height: 86%; border-radius: 50%; z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.chat-arc-stone--dark { background: radial-gradient(circle at 35% 30%, #555, #0a0a0a); }
.chat-arc-stone--light { background: radial-gradient(circle at 35% 30%, #fff, #d6d6d6); }
.chat-arc-stone--last { outline: 2px solid rgba(var(--accent-rgb), 0.9); outline-offset: 1px; }

/* ── ladder + the reveal (arcade P4) ── */
.chat-arc-ladder {
    background: rgba(255,255,255,0.03); border-radius: 10px; padding: 8px 10px;
}
.chat-arc-ladrow {
    display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center;
    padding: 5px 4px; font-size: 13px; color: rgba(255,255,255,0.78);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.chat-arc-ladrow:last-of-type { border-bottom: none; }
.chat-arc-ladrow--me { color: #1db954; font-weight: 700; }
.chat-arc-ladno { color: rgba(255,255,255,0.35); text-align: right; }
/* the podium: gold, silver, bronze — rank readable before any number is */
.chat-arc-ladrow:nth-of-type(1) .chat-arc-ladno { color: #ffd54f; font-weight: 800; }
.chat-arc-ladrow:nth-of-type(1) .chat-arc-ladelo { color: #ffd54f; }
.chat-arc-ladrow:nth-of-type(2) .chat-arc-ladno { color: #cfd8dc; font-weight: 800; }
.chat-arc-ladrow:nth-of-type(3) .chat-arc-ladno { color: #d29c6b; font-weight: 800; }
.chat-arc-ladname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-arc-ladwl { font-size: 11px; color: rgba(255,255,255,0.4); }
.chat-arc-ladelo { font-weight: 800; font-variant-numeric: tabular-nums; }
.chat-arc-ladnote {
    font-size: 11px; color: rgba(255,255,255,0.38); line-height: 1.5; padding: 8px 4px 2px;
}

.chat-arc-exports { display: flex; gap: 8px; }
.chat-arc-reveal { margin-top: 4px; }
.chat-arc-reveal-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
    border-radius: 8px; padding: 8px 11px; font-size: 12px; font-weight: 700;
    border: 1px dashed rgba(29,185,84,0.35); background: rgba(29,185,84,0.07);
    color: #1db954; text-align: left;
}
.chat-arc-reveal-btn:hover { background: rgba(29,185,84,0.13); }
.chat-arc-reveal-caret { margin-left: auto; }
.chat-arc-rawnote {
    font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.5; padding: 8px 4px 4px;
}
.chat-arc-raw {
    max-height: 240px; overflow: auto; border-radius: 8px;
    background: rgba(0,0,0,0.28); padding: 8px 10px;
}
.chat-arc-rawrow {
    display: flex; gap: 8px; align-items: baseline; padding: 2px 0;
    font-size: 11px; color: rgba(255,255,255,0.55);
}
.chat-arc-rawrow code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap; word-break: break-all; color: rgba(255,255,255,0.75);
}
.chat-arc-rawwho { flex: none; color: #1db954; font-weight: 700; }

/* a game in the sidebar where it is your move */
.chat-thread--turn { color: #1db954; }

/* message-this-user links (chat P4) — any surface can render one */
.chat-user-link {
    border: none; background: transparent; padding: 0; cursor: pointer;
    color: inherit; font: inherit; text-decoration: underline dotted rgba(255,255,255,0.35);
    text-underline-offset: 2px;
}
.chat-user-link:hover { color: #1db954; text-decoration-color: #1db954; }

/* rich chat (richchat P2): formatting, spoilers, toolbar, emoji picker */
.chat-msg-text code.chat-code {
    font-family: 'SF Mono', Consolas, monospace; font-size: 12.5px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px; padding: 1px 6px;
}
.chat-msg-text .chat-link { color: #58a6ff; word-break: break-all; }
.chat-msg-text .chat-link:hover { text-decoration: underline; }
.chat-quote {
    display: inline-block; border-left: 3px solid rgba(29,185,84,0.6);
    padding-left: 10px; color: rgba(255,255,255,0.6); font-style: italic;
}
.chat-spoiler {
    background: rgba(255,255,255,0.14); color: transparent; border-radius: 4px;
    padding: 0 4px; cursor: pointer; user-select: none;
    text-shadow: none; transition: color 0.15s ease, background 0.15s ease;
}
.chat-spoiler--shown { color: inherit; background: rgba(255,255,255,0.06); cursor: text; user-select: text; }
.chat-toolbar {
    position: relative; display: flex; gap: 4px; align-items: center;
    padding: 8px 14px 0;
}
.chat-fmt-btn {
    min-width: 30px; height: 28px; padding: 0 8px; border-radius: 7px; border: none;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7);
    font-size: 12.5px; cursor: pointer;
}
.chat-fmt-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* display:grid would override the [hidden] UA rule — restate it explicitly,
   or the picker can never close (the toggle sets hidden but grid wins) */
.chat-emoji-pop[hidden] { display: none !important; }
.chat-emoji-pop {
    position: absolute; bottom: 36px; left: 14px; z-index: 30;
    display: grid; grid-template-columns: repeat(10, 32px); gap: 2px;
    padding: 10px; border-radius: 12px;
    background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    max-height: 220px; overflow-y: auto;
}
.chat-emoji {
    width: 32px; height: 32px; border: none; border-radius: 7px; background: transparent;
    font-size: 19px; line-height: 1; cursor: pointer;
}
.chat-emoji:hover { background: rgba(255,255,255,0.12); }

/* chat embeds (richchat P3) — click-to-load chips, image + youtube frames */
.chat-embed-chip {
    border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75); border-radius: 999px; padding: 2px 10px;
    font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.chat-embed-chip:hover { background: rgba(29,185,84,0.16); color: #1db954; border-color: rgba(29,185,84,0.4); }
.chat-embed-img {
    display: block; max-width: min(420px, 100%); max-height: 340px;
    border-radius: 10px; margin: 6px 0; object-fit: contain;
}
.chat-embed-frame {
    display: block; position: relative; max-width: 480px; aspect-ratio: 16 / 9;
    margin: 6px 0; border-radius: 10px; overflow: hidden; background: #000;
}
.chat-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* chat: external-client distinction + SoulSync-only filter (chatux P1) */
.chat-ext-tag {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
.chat-msg--ext .chat-msg-user { color: rgba(255,255,255,0.55); }
.chat-filter-btn {
    margin-left: auto; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65);
    font-size: 11.5px; font-weight: 700; padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.chat-filter-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.chat-filter-btn--on { color: #1db954; border-color: rgba(29,185,84,0.45); background: rgba(29,185,84,0.12); }
.chat-hidden-note {
    text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.35); padding: 8px 0;
}

/* chat: extended formatting (chatux P2) */
.chat-msg-text .chat-codeblock {
    display: block; margin: 6px 0; padding: 10px 12px; border-radius: 9px;
    font-family: 'SF Mono', Consolas, monospace; font-size: 12.5px; line-height: 1.5;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.09);
    white-space: pre-wrap; word-break: break-word; max-width: 640px;
}
.chat-h1, .chat-h2, .chat-h3 { display: block; font-weight: 800; color: #fff; margin: 4px 0 2px; }
.chat-h1 { font-size: 19px; }
.chat-h2 { font-size: 16.5px; }
.chat-h3 { font-size: 14.5px; }
.chat-li { display: block; padding-left: 10px; }
.chat-link-domain { font-size: 11px; color: rgba(255,255,255,0.35); margin-left: 4px; }
.chat-msg-text u { text-underline-offset: 2px; }

/* chat: Discord-style messages (chatux P3) — groups, avatars, day separators */
.chat-group {
    display: grid; grid-template-columns: 40px 1fr; gap: 12px;
    padding: 6px 8px; border-radius: 8px; margin: 2px 0;
}
.chat-group:hover { background: rgba(255,255,255,0.03); }
.chat-avatar {
    width: 38px; height: 38px; border-radius: 50%; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: rgba(255,255,255,0.92);
    user-select: none; flex: none;
}
/* Preset-avatar variant of the message-group avatar. Rounded rectangle rather
   than the initial's circle — the art is 140x165 portrait and a circle crops
   faces (see .chat-av). */
.chat-avatar--img {
    border-radius: 9px; background: rgba(0,0,0,0.25); overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.chat-avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-group-body { min-width: 0; }
.chat-group-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.chat-group-head .chat-msg-user { font-size: 14.5px; }
.chat-group--ext .chat-avatar { filter: saturate(0.35) brightness(0.8); }
.chat-line {
    font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.85);
    word-break: break-word; white-space: pre-wrap; padding: 1px 0;
}
.chat-day-sep {
    display: flex; align-items: center; gap: 12px; margin: 14px 0 6px;
    color: rgba(255,255,255,0.35); font-size: 11.5px; font-weight: 700;
}
.chat-day-sep::before, .chat-day-sep::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}

/* chat: GIF picker (chatux P4) */
.chat-gif-btn { font-weight: 900; letter-spacing: 0.5px; }
.chat-gif-pop[hidden] { display: none !important; }
.chat-gif-pop {
    position: absolute; bottom: 36px; left: 14px; right: 14px; z-index: 30;
    max-width: 520px; padding: 12px; border-radius: 14px;
    background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.chat-gif-search { width: 100%; margin-bottom: 10px; }
.chat-gif-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px; max-height: 300px; overflow-y: auto;
}
.chat-gif-cell {
    border: none; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: rgba(255,255,255,0.04); aspect-ratio: 4 / 3;
}
.chat-gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-gif-cell:hover { outline: 2px solid #1db954; }
.chat-gif-hint {
    grid-column: 1 / -1; text-align: center; padding: 24px 0;
    font-size: 13px; color: rgba(255,255,255,0.4);
}
.chat-embed-img.chat-gif { max-width: min(320px, 100%); }

/* chat: admin settings modal (cog) */
.chat-cog-btn {
    border: none; background: transparent; color: rgba(255,255,255,0.5);
    font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 7px;
}
.chat-cog-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.chat-settings-overlay[hidden] { display: none !important; }
.chat-settings-overlay {
    position: absolute; inset: 0; z-index: 40; display: flex;
    align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 14px;
}
.chat-settings-modal {
    width: min(460px, 92%);
    max-height: 88%;
    overflow-y: auto;
    padding: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
    display: flex; flex-direction: column;
}
.chat-settings-title {
    margin: 0;
    padding: 18px 24px 14px;
    font-size: 17px; font-weight: 700; color: #fff;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 0%, transparent 55%);
}
/* everything between the header and the actions row shares the gutter */
.chat-settings-modal > :not(.chat-settings-title):not(.chat-settings-actions) {
    margin: 14px 24px 0;
}
.chat-settings-label { display: flex; flex-direction: column; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); }
.chat-settings-hint { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.4); }
.chat-settings-check { display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: rgba(255,255,255,0.8); cursor: pointer; }
.chat-settings-check input { accent-color: rgb(var(--accent-rgb)); width: 15px; height: 15px; }
.chat-settings-actions {
    margin-top: 18px;
    padding: 14px 24px 18px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.1);
    display: flex; justify-content: flex-end; gap: 10px;
    flex-wrap: wrap;
}
/* modal-scoped inputs pick up the accent focus ring (the chat composer's
   green stays chat-branded; modals follow the app accent) */
.chat-settings-modal .chat-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}
.chat-settings-modal .chat-input:focus {
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
/* the standard buttons run large — trim them to chat-modal scale */
.chat-settings-actions .modal-button { padding: 9px 18px; font-size: 13px; min-width: 0; }

/* chat: composer textarea + unread affordances (chatbic P1) */
.chat-input--area {
    resize: none; overflow-y: auto; line-height: 1.45; max-height: 132px;
    font-family: inherit;
}
.chat-jump-pill[hidden] { display: none !important; }
.chat-jump-pill {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 25;
    border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
    background: #1db954; color: #06130a; font-size: 12.5px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.chat-jump-pill:hover { filter: brightness(1.08); }
.chat-new-sep {
    display: flex; align-items: center; gap: 10px; margin: 10px 0 4px;
    color: #f23f43; font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px;
}
.chat-new-sep::before, .chat-new-sep::after {
    content: ''; flex: 1; height: 1px; background: rgba(242,63,67,0.45);
}
.chat-new-sep span { flex: none; }
.chat-new-sep::after { flex: 0 0 12px; }

/* chat: mentions + replies (chatbic P3) */
.chat-mention {
    color: #7aa7ff; background: rgba(88,101,242,0.16); border-radius: 4px;
    padding: 0 3px; font-weight: 700; cursor: pointer;
}
.chat-mention:hover { background: rgba(88,101,242,0.3); }
.chat-mention--self { color: #ffd166; background: rgba(250,166,26,0.18); }
.chat-line--me {
    background: rgba(250,166,26,0.07); border-radius: 6px;
    box-shadow: inset 3px 0 0 rgba(250,166,26,0.7);
    padding-left: 8px; margin-left: -8px;
}
.chat-line { position: relative; }
.chat-line-reply {
    position: absolute; right: 4px; top: 0; display: none;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(18,18,22,0.95);
    color: rgba(255,255,255,0.7); border-radius: 7px; padding: 1px 8px;
    font-size: 12px; cursor: pointer;
}
.chat-line:hover .chat-line-reply { display: inline-block; }
.chat-line-reply:hover { color: #1db954; border-color: rgba(29,185,84,0.45); }
/* The table-stake selector above the game tiles. */
.chat-arc-stakes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 4px 0 10px; }
.chat-arc-stakes-lab { font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: rgba(255,255,255,0.35); margin-right: 2px; }
.chat-arc-stakes-note { font-size: 10.5px; color: rgba(255,255,255,0.3); margin-left: 4px; }

/* Cold arcade tables — a muted expandable line, not forever-cards. */
.chat-arc-cold-line {
    display: block; width: 100%; text-align: left;
    background: none; border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px; margin-top: 10px;
    color: rgba(255,255,255,0.35); font-size: 12px; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.chat-arc-cold-line:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }

/* Moderator-hidden message stub — collapsed for the whole room. */
.chat-line--hidden {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; margin: 2px 0; border-radius: 8px;
    background: rgba(248, 113, 113, 0.05);
    border: 1px dashed rgba(248, 113, 113, 0.25);
    color: rgba(255, 255, 255, 0.45); font-size: 12.5px;
    cursor: pointer;
}
.chat-line--hidden:hover { background: rgba(248, 113, 113, 0.09); }

.chat-reply-ref {
    font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 1px;
    border-left: 2px solid rgba(255,255,255,0.2); padding-left: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px;
}
.chat-reply-ref b { color: rgba(255,255,255,0.75); }

/* message edits: the marker on an edited message (hover = full history)
   and the ✏ note on a carrier whose original isn't loaded */
.chat-line-edited {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.38);
    margin-left: 6px;
    cursor: help;
}
.chat-line-editnote { color: rgba(255, 255, 255, 0.45); }
.chat-reply-bar[hidden], .chat-mention-pop[hidden] { display: none !important; }
.chat-reply-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 14px; padding: 7px 12px; border-radius: 9px 9px 0 0;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
    border-bottom: none; font-size: 12.5px; color: rgba(255,255,255,0.65);
}
.chat-reply-bar-x { color: rgba(255,255,255,0.4); margin-left: 6px; }
.chat-reply-bar-close {
    border: none; background: transparent; color: rgba(255,255,255,0.5);
    font-size: 16px; cursor: pointer; line-height: 1;
}
.chat-reply-bar-close:hover { color: #fff; }
.chat-mention-pop {
    position: absolute; bottom: 74px; left: 14px; z-index: 30;
    min-width: 220px; padding: 6px; border-radius: 12px;
    background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.chat-mention-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: none; background: transparent; color: rgba(255,255,255,0.8);
    padding: 6px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; text-align: left;
}
.chat-mention-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.chat-mention-opt .chat-avatar { width: 24px; height: 24px; font-size: 11px; margin: 0; }

/* chat: reactions + user card (chatbic P4) */
.chat-line-acts { position: absolute; right: 4px; top: 0; display: none; gap: 4px; }
.chat-line:hover .chat-line-acts { display: inline-flex; }
.chat-line-acts .chat-line-reply { position: static; display: inline-block; }
.chat-react-row { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.chat-react-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 999px; font-size: 13px; cursor: default;
    background: rgba(88,101,242,0.14); border: 1px solid rgba(88,101,242,0.35);
}
.chat-react-chip b { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.chat-react-pick {
    position: absolute; right: 4px; top: 24px; z-index: 20; display: flex; gap: 2px;
    padding: 5px; border-radius: 10px;
    background: rgba(18,18,22,0.98); border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.chat-user-card { width: min(340px, 92%); }
.chat-card-head { display: flex; align-items: center; gap: 12px; }
.chat-card-head .chat-avatar { width: 46px; height: 46px; font-size: 19px; }
.chat-card-name { font-size: 17px; font-weight: 800; color: #fff; }
.chat-card-info { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.chat-card-row { display: flex; justify-content: space-between; gap: 12px;
    font-size: 13px; color: rgba(255,255,255,0.6); }
.chat-card-row b { color: rgba(255,255,255,0.85); font-weight: 700;
    text-align: right; word-break: break-word; }
.chat-card-none { justify-content: center; color: rgba(255,255,255,0.35); }

/* artist photo picker: custom URL row */
.art-picker-custom { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.art-picker-url {
    width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; color: #fff;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.art-picker-url:focus { outline: none; border-color: rgba(29,185,84,0.6); }
.art-picker-custom-slot .art-picker-tile { max-width: 180px; }
.art-picker-custom-err { font-size: 12.5px; color: #f0a05a; }

/* artist photo picker: the current photo as a display-only reference tile */
.art-picker-tile--current { cursor: default; opacity: 0.95; }
.art-picker-tile--current:hover { transform: none; }
.art-picker-badge--current {
    background: rgba(29,185,84,0.85) !important; color: #06130a !important;
    font-weight: 800;
}

/* ── composer redesign: one fused panel, ghost icon toolbar, circular send ── */
.chat-composer {
    display: block; position: relative;
    padding: 10px 14px 14px; border-top: 1px solid rgba(255,255,255,0.06);
}
.chat-composer-panel {
    border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    background: rgba(255,255,255,0.04);
    transition: border-color .15s ease, background .15s ease;
}
.chat-composer-panel:focus-within {
    border-color: rgba(29,185,84,0.45); background: rgba(255,255,255,0.055);
}
.chat-toolbar {
    position: static; display: flex; gap: 2px; align-items: center;
    padding: 6px 8px 5px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chat-tbtn {
    width: 30px; height: 28px; padding: 0; border: none; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: rgba(255,255,255,0.45); cursor: pointer;
    transition: background .1s ease, color .1s ease;
}
.chat-tbtn svg { width: 16px; height: 16px; }
.chat-tbtn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.chat-tbtn-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.1); margin: 0 6px; flex: none; }
.chat-toolbar-hint {
    margin-left: auto; padding-right: 6px; font-size: 11px;
    color: rgba(255,255,255,0.22); user-select: none; white-space: nowrap;
}
.chat-composer-row { display: flex; align-items: flex-end; gap: 4px; padding: 4px 8px 6px 6px; }
.chat-input--bare, .chat-input--bare:focus {
    border: none; background: transparent; box-shadow: none;
}
.chat-input--bare { padding: 9px 10px; }
.chat-tbtn--side { width: 32px; height: 32px; margin-bottom: 2px; flex: none; }
.chat-tbtn.chat-gif-btn {
    width: auto; padding: 0 8px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.5px;
}
.chat-send-fab {
    flex: none; width: 34px; height: 34px; margin: 0 2px 2px 4px; border: none;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #1db954; color: #06130a; cursor: pointer;
    transition: transform .1s ease, filter .15s ease;
}
.chat-send-fab svg { width: 16px; height: 16px; margin: 1px 1px 0 -1px; }
.chat-send-fab:hover { filter: brightness(1.1); transform: scale(1.06); }
.chat-composer--locked .chat-send-fab,
.chat-composer--locked .chat-tbtn--side { opacity: 0.35; cursor: not-allowed; }
.chat-composer--locked .chat-composer-panel { opacity: 0.75; }
/* pickers + reply bar anchor to the whole composer now (it's the positioned box) */
.chat-emoji-pop { bottom: calc(100% + 6px); left: 10px; }
.chat-gif-pop { bottom: calc(100% + 6px); left: 10px; right: 10px; }
.chat-reply-bar { position: static; margin: 0 0 8px; }
.chat-jump-pill { bottom: 128px; }
/* the mention pop sits above the (taller) composer now */
.chat-mention-pop { bottom: 132px; }

/* Global "Retry all failed" — a text button in the Manage Workers topbar
   (video parity; overrides the round .em-icon-btn sizing; amber = retry). */
.em-retry-global {
    width: auto; height: 32px; padding: 0 13px; border-radius: 999px;
    gap: 6px; font-size: 12px; font-weight: 800; white-space: nowrap;
    color: #fbcd7a; background: rgba(245, 158, 11, 0.14);
}
.em-retry-global:hover { transform: none; background: rgba(245, 158, 11, 0.24); }
.em-retry-global:disabled { opacity: 0.55; cursor: default; }

/* Global "Verify matches" — same pill override beside it (green = repair). */
.em-verify-global {
    width: auto; height: 32px; padding: 0 13px; border-radius: 999px;
    gap: 6px; font-size: 12px; font-weight: 800; white-space: nowrap;
    color: #86efac; background: rgba(34, 197, 94, 0.14);
}
.em-verify-global:hover { transform: none; background: rgba(34, 197, 94, 0.24); }
.em-verify-global:disabled { opacity: 0.55; cursor: default; }

/* discography gap-fill (#1067): source badge on cards from other sources */
.gapfill-source-badge {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(12, 12, 16, 0.85); color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}
.discog-gap-src {
    font-weight: 800; text-transform: uppercase; font-size: 0.85em;
    color: rgba(255, 255, 255, 0.55);
}

/* ── chat user card: history + private note (chat P1) ── */
.chat-card-hist {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.chat-card-note { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-card-note-input {
    width: 100%; resize: vertical; min-height: 40px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; color: #fff; font-size: 12px; font-family: inherit;
    padding: 7px 9px;
}
.chat-card-note-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.45); }
.chat-card-note-save { align-self: flex-end; }

/* the Challenge variant row (⚔ on the user card) */
.chat-card-challenge {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; gap: 7px;
}
.chat-card-challenge-label { font-size: 11px; color: rgba(255,255,255,0.55); }
.chat-card-challenge-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── chat file sharing (filepost.dev, chat P2) ── */
.chat-file-card {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 9px 12px; margin: 2px 0; max-width: 460px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px;
}
.chat-file-icon { font-size: 18px; }
.chat-file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-file-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: 10.5px; color: rgba(255,255,255,0.4); }
.chat-file-dl { text-decoration: none; }
.chat-file-slot { flex-basis: 100%; }
.chat-file-player { width: 100%; margin-top: 6px; }
.chat-file-player--video { max-height: 260px; border-radius: 8px; }
.chat-attach-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chat-attach-or { font-size: 11px; color: rgba(255,255,255,0.4); }
.chat-attach-results { max-height: 220px; overflow-y: auto; }
.chat-attach-status { font-size: 11.5px; color: rgba(var(--accent-light-rgb), 0.9); padding: 6px 2px; }
.chat-attach-status--err { color: rgb(252, 165, 165); }

/* ── chat jukebox (shared room listening) ─────────────────────────────── */
.chat-jukebox {
    flex: 0 0 auto;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 52%;
    overflow-y: auto;
}

/* ── movie night (watch-together ballot, rail card under the jukebox) ── */
.chat-watch {
    flex: 0 0 auto;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 44%;
    overflow-y: auto;
}
.chat-watch[hidden] { display: none !important; }
/* The party's screen. Sits OUTSIDE .chat-watch so the card's re-renders can't
   tear the <video> down mid-film (see the host's comment in index.html). */
.chat-watch-stagehost {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
}
.chat-watch-stagehost[hidden] { display: none !important; }
.chat-watch-video {
    width: 100%;
    max-height: 42vh;
    display: block;
    background: #000;
}
.chat-watch-stage-warn {
    padding: 6px 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 214, 140, 0.95);
    background: rgba(255, 176, 32, 0.12);
    border-top: 1px solid rgba(255, 176, 32, 0.25);
}
.chat-watch-stage-warn[hidden] { display: none !important; }
/* The header was wrapping "Movie night" onto two lines AND clipping the
   + Nominate button off the panel edge (screenshots, Aug 13). The title must
   never wrap, the meta may shrink to nothing, and the button keeps its width. */
.chat-watch-headrow {
    display: flex; align-items: center; gap: 6px; font-size: 13px;
    color: rgba(255,255,255,0.9); min-width: 0;
}
.chat-watch-headrow > b { white-space: nowrap; flex: 0 0 auto; }
.chat-watch-headrow .chat-jbx-meta {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-watch-nombtn { white-space: nowrap; flex: 0 0 auto; padding: 3px 8px; font-size: 11px; }
.chat-watch-now {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px; border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.chat-watch-now-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-watch-now-ti { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.92); }
.chat-watch-now-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-watch-poster {
    width: 44px; height: 66px; object-fit: cover; border-radius: 6px;
    flex: 0 0 auto; background: rgba(255,255,255,0.05);
}
.chat-watch-thumb {
    width: 30px; height: 45px; object-fit: cover; border-radius: 5px;
    flex: 0 0 auto; background: rgba(255,255,255,0.05);
}
.chat-watch-poster--ph { display: flex; align-items: center; justify-content: center;
    font-size: 15px; opacity: 0.6; }
/* A GRID, not a flex row. The rail is narrow and the controls vary in number
   (own-chip / vote / play / withdraw), so as flex siblings they shrank below
   their own text and collided. Two areas — thumb + title on the first line,
   controls on their own beneath — means nothing ever has to squeeze. */
.chat-watch-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "thumb main" "acts acts";
    align-items: center;
    gap: 4px 8px;
    padding: 6px; border-radius: 8px;
}
.chat-watch-row:hover { background: rgba(255,255,255,0.04); }
.chat-watch-row > .chat-watch-thumb { grid-area: thumb; }
.chat-watch-row-main { grid-area: main; min-width: 0; }
.chat-watch-row-acts {
    grid-area: acts;
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
}
/* Controls keep their intrinsic width and wrap instead of compressing. */
.chat-watch-row-acts > * { flex: 0 0 auto; }
.chat-watch-row-ti { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.88);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-watch-se { font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); }
.chat-watch-own { font-size: 10.5px; font-weight: 700; white-space: nowrap;
    color: #6ee7a0; }
.chat-watch-own--want { color: rgba(var(--accent-light-rgb), 0.9); }
.chat-watch-own--wait { color: rgba(255,255,255,0.45); font-weight: 600; font-style: italic; }
/* The showing block. The screenshots showed Pause / End / ✓ you have this /
   Leave each taking a WHOLE line — the buttons were full-size in a rail this
   narrow, so every one of them wrapped. Compact them and they sit two or three
   to a row instead of four stacked. */
.chat-watch-now { min-width: 0; }
.chat-watch-now-main { flex: 1 1 auto; min-width: 0; }
.chat-watch-now-ti { overflow: hidden; text-overflow: ellipsis; }
.chat-watch-now-acts > * { flex: 0 0 auto; }
.chat-watch-now-acts .chat-arc-btn {
    padding: 3px 8px; font-size: 11px; line-height: 1.4; white-space: nowrap;
}
/* The stage's own volume row — the browser hides its native volume control
   when the audio track can't decode, which is exactly when you reach for it. */
.chat-watch-stage-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 7px;
    background: rgba(0,0,0,0.35);
}
.chat-watch-volic { font-size: 12px; opacity: 0.75; flex: 0 0 auto; }
.chat-watch-vol { flex: 1 1 auto; min-width: 0; }
/* A 'no' verdict is louder than a 'maybe' — it means it genuinely won't work. */
.chat-watch-stage-warn--hard {
    color: rgba(255, 170, 170, 0.98);
    background: rgba(220, 60, 60, 0.16);
    border-top-color: rgba(220, 60, 60, 0.35);
}
.chat-watch-own--bad { color: rgba(255,150,150,0.95); }
/* Picker: "Start now" beside the nominate affordance, without stacking. */
.chat-watch-resact { display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    align-self: center; white-space: nowrap; }
.chat-watch-resnom { font-size: 11px; color: rgba(255,255,255,0.5); }
.chat-watch-resnow { font-size: 11px; }
/* ── movie night picker modal — its OWN design. The jukebox's landscape
   video-card grid (minmax(180px) columns, 16:9 thumbs) cannot hold 2:3
   posters; these are row cards: poster left, title/meta/overview right. ── */
.chat-watch-modal { width: min(720px, 94%); max-height: 88%; }
.chat-watch-searchgrid {
    margin: 14px 24px 0;
    display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; min-height: 140px; align-content: start;
}
.chat-watch-rescard {
    display: flex; align-items: stretch; gap: 12px;
    cursor: pointer; text-align: left;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-watch-rescard:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(255,255,255,0.05);
}
.chat-watch-rescard--picking {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.07);
}
.chat-watch-resposter {
    flex: 0 0 auto; width: 58px; height: 87px;
    border-radius: 8px; overflow: hidden;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; opacity: 0.95;
}
.chat-watch-resposter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-watch-resmain {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.chat-watch-restitle {
    font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.94);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-watch-resyear { font-weight: 500; font-size: 12px; color: rgba(255,255,255,0.45); margin-left: 6px; }
.chat-watch-resmeta { display: flex; align-items: center; gap: 8px; font-size: 11px;
    color: rgba(255,255,255,0.5); flex-wrap: wrap; }
.chat-watch-reskind {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
    padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--accent-rgb), 0.18); color: rgba(var(--accent-light-rgb), 0.95);
}
.chat-watch-reskind--show { background: rgba(151, 117, 250, 0.16); color: #c9b8ff; }
.chat-watch-resover {
    font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,0.42);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the affordance whispers until you hover — the whole row is the button */
.chat-watch-resact {
    flex: 0 0 auto; align-self: center; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; color: rgba(var(--accent-light-rgb), 0.9);
    opacity: 0; transition: opacity 0.15s ease;
}
.chat-watch-rescard:hover .chat-watch-resact,
.chat-watch-rescard--picking .chat-watch-resact { opacity: 1; }
.chat-watch-sepick {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.chat-watch-sepick label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgba(255,255,255,0.55);
}
.chat-watch-sein { width: 70px; padding: 7px 10px; font-size: 13px; text-align: center; }
.chat-watch-resnote { padding: 30px 0; text-align: center; font-size: 12.5px;
    color: rgba(255,255,255,0.4); }
/* the jukebox control bar rides the page header's right side */
.chat-page-head { display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; }
.chat-jbx-headbar[hidden] { display: none !important; }
.chat-jbx-headbar {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    flex: 0 1 460px; min-width: 260px;
}
.chat-jbx-brand { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); white-space: nowrap; }
.chat-jbx-listeners { font-size: 11.5px; color: rgba(var(--accent-light-rgb), 0.85); white-space: nowrap; }
.chat-jbx-headbar .chat-jbx-form { margin-left: auto; flex: 1 1 auto; min-width: 180px; }
.chat-jbx-headbar .chat-jbx-input { padding: 8px 12px; font-size: 13px; }
/* search results float under the header input */
.chat-jbx-headbar .chat-jbx-results {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    width: min(420px, 92vw);
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
    padding: 6px;
}
.chat-jbx-now { display: flex; flex-direction: column; gap: 8px; }
.chat-jbx-nowcard { display: flex; gap: 10px; align-items: flex-start; }
.chat-jbx-art {
    width: 72px; height: 54px; object-fit: cover; border-radius: 8px;
    flex: 0 0 auto; background: rgba(255,255,255,0.05);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.chat-jbx-nowmain { flex: 1 1 auto; min-width: 0; }
.chat-jbx-titlerow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.chat-jbx-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; flex: 0 0 auto; }
.chat-jbx-eq i {
    width: 3px; background: rgb(var(--accent-light-rgb)); border-radius: 1px;
    animation: chatJbxEq 1.1s ease-in-out infinite;
}
.chat-jbx-eq i:nth-child(2) { animation-delay: 0.3s; }
.chat-jbx-eq i:nth-child(3) { animation-delay: 0.6s; }
@keyframes chatJbxEq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
a.chat-jbx-title { text-decoration: none; }
a.chat-jbx-title:hover { color: rgb(var(--accent-light-rgb)); }
.chat-jbx-progress {
    height: 3px; margin-top: 7px; border-radius: 2px; overflow: hidden;
    background: rgba(255,255,255,0.08);
}
.chat-jbx-progbar {
    display: block; height: 100%; border-radius: 2px;
    background: rgb(var(--accent-rgb));
    transition: width 5s linear;   /* glides between watchdog ticks */
}
.chat-jbx-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chat-jbx-vol { flex: 1 1 60px; min-width: 50px; max-width: 110px; accent-color: rgb(var(--accent-rgb)); height: 4px; }
.chat-jbx-idle { padding: 2px 0; }
.chat-jbx-title {
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%; min-width: 0; flex: 1 1 auto;
}
.chat-jbx-meta { font-size: 11.5px; color: rgba(255,255,255,0.45); }
.chat-jbx-tune { flex: 0 0 auto; }
.chat-jbx-player { border-radius: 10px; overflow: hidden; line-height: 0; }
.chat-jbx-player iframe { border: 0; }
/* audio-only: collapse the video but keep the iframe alive (audio plays on) */
.chat-jbx-player--audio { height: 0 !important; border-radius: 0; }
.chat-jbx-queue { display: flex; flex-direction: column; gap: 2px; }
.chat-jbx-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 8px;
}
.chat-jbx-row:hover { background: rgba(255,255,255,0.04); }
.chat-jbx-row--next {
    background: rgba(var(--accent-rgb), 0.07);
    outline: 1px solid rgba(var(--accent-rgb), 0.18);
}
.chat-jbx-qthumb {
    width: 42px; height: 32px; object-fit: cover; border-radius: 6px;
    flex: 0 0 auto; background: rgba(255,255,255,0.05);
}
.chat-jbx-qmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-jbx-qmain .chat-jbx-title { font-weight: 600; font-size: 12.5px; flex: none; max-width: 100%; }
.chat-jbx-next { color: rgb(var(--accent-light-rgb)); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; }
.chat-jbx-unsub {
    background: none; border: 0; cursor: pointer; flex: 0 0 auto;
    color: rgba(255,255,255,0.4); font-size: 14px; padding: 0 3px;
}
.chat-jbx-unsub:hover { color: rgb(252, 165, 165); }
.chat-jbx-histbtn {
    background: none; border: 0; cursor: pointer; text-align: left;
    color: rgba(255,255,255,0.45); font-size: 11.5px; font-weight: 600;
    padding: 6px 6px 2px; margin-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.chat-jbx-histbtn:hover { color: rgba(255,255,255,0.8); }
.chat-jbx-row--hist { opacity: 0.75; }
.chat-jbx-row--hist:hover { opacity: 1; }
.chat-jbx-vote {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border-radius: 8px; padding: 2px 9px; font-size: 12px; cursor: pointer;
}
.chat-jbx-vote:hover:not(:disabled) {
    background: rgba(var(--accent-light-rgb), 0.18);
    border-color: rgba(var(--accent-light-rgb), 0.4);
}
.chat-jbx-vote:disabled { opacity: 0.4; cursor: default; }
.chat-jbx-form { display: flex; gap: 8px; }
.chat-jbx-input { flex: 1 1 auto; min-width: 0; }
.chat-jbx-add { flex: 0 0 auto; }
.chat-jbx-results { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.chat-jbx-result {
    display: flex; align-items: center; gap: 10px; text-align: left;
    background: none; border: 0; cursor: pointer;
    padding: 5px 6px; border-radius: 8px; width: 100%;
}
.chat-jbx-result:hover { background: rgba(255,255,255,0.05); }

/* ── chat pin board + room poll + topic (protocol-bus surfaces) ───────── */
.chat-pinbar[hidden] { display: none !important; }
.chat-pinbar {
    position: absolute; top: 54px; right: 14px; z-index: 35;   /* under the modal overlay (40) */
    width: min(400px, calc(100% - 28px));
    max-height: 50%;
    overflow-y: auto;
    padding: 8px;
    background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}
.chat-pins-title {
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
    padding: 4px 6px 8px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
    margin-bottom: 4px;
}
.chat-pin-row {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 6px; border-radius: 8px; font-size: 12.5px;
}
.chat-pin-row:hover { background: rgba(255,255,255,0.04); }
.chat-pin-text {
    color: rgba(255,255,255,0.85); min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-pin-by { font-size: 11px; color: rgba(255,255,255,0.35); white-space: nowrap; }
.chat-pin-del {
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,0.4); font-size: 14px; padding: 0 4px;
}
.chat-pin-del:hover { color: rgb(252, 165, 165); }
.chat-pollcard {
    flex: 0 0 auto;
    margin: 0 16px 8px;
    padding: 10px 12px;
    background: rgba(var(--accent-light-rgb), 0.05);
    border: 1px solid rgba(var(--accent-light-rgb), 0.18);
    border-radius: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.chat-poll-head { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.chat-poll-head b { color: rgba(255,255,255,0.92); }
.chat-poll-opt {
    position: relative; display: flex; align-items: center; gap: 10px;
    padding: 5px 8px; border-radius: 8px; overflow: hidden;
}
.chat-poll-opt--win { outline: 1px solid rgba(var(--accent-light-rgb), 0.5); }
.chat-poll-vote {
    background: none; border: 0; cursor: pointer; text-align: left;
    color: rgba(255,255,255,0.85); font-size: 12.5px; padding: 0;
    flex: 1 1 auto; min-width: 0; position: relative; z-index: 1;
}
.chat-poll-vote:hover { color: rgb(var(--accent-light-rgb)); }
.chat-poll-label { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
.chat-poll-n { font-size: 11.5px; color: rgba(255,255,255,0.5); white-space: nowrap; position: relative; z-index: 1; }
.chat-poll-bar {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
    background: rgba(var(--accent-light-rgb), 0.14);
    border-radius: 8px; transition: width 0.3s ease;
}
.chat-poll-pop .chat-input { margin-bottom: 6px; }
.chat-topic-edit {
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,0.35); font-size: 11px; padding: 0 2px;
}
.chat-topic-edit:hover { color: rgba(255,255,255,0.8); }
.chat-head-sub--topic { color: rgba(var(--accent-light-rgb), 0.9); }
.chat-topic-in { max-width: 420px; margin-left: 12px; }
.chat-user-tuned { color: rgb(var(--accent-light-rgb)); margin-left: 5px; font-size: 11px; }

/* chat modal polish: browse retry + the note save button follow the accent */
.chat-browse-retry-row { display: flex; justify-content: center; padding: 6px 0 10px; }
.chat-card-note-save {
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
}
.chat-card-note-save:hover {
    background: rgba(var(--accent-rgb), 0.28);
    color: #fff;
}

/* ── typing indicators ────────────────────────────────────────────────── */
.chat-typing[hidden] { display: none !important; }
.chat-typing {
    padding: 2px 18px 4px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
}
.chat-typing b { color: rgba(255,255,255,0.75); font-weight: 600; }
.chat-typing-dots { display: inline-flex; gap: 3px; margin-right: 3px; vertical-align: middle; }
.chat-typing-dots i {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 0.8);
    animation: chatTypDot 1.2s ease-in-out infinite;
}
.chat-typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTypDot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
                        30% { opacity: 1; transform: translateY(-2px); } }

/* slash-command options in the mention pop */
.chat-slash-opt { display: flex; align-items: baseline; gap: 10px; }
.chat-slash-cmd { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.9); white-space: nowrap; }
.chat-slash-cmd i { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.4); }
.chat-slash-desc { font-size: 11.5px; color: rgba(255,255,255,0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* auto-DJ toggle in the jukebox header bar */
.chat-jbx-radiobtn { white-space: nowrap; }
.chat-jbx-radiobtn--on {
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-light-rgb));
}

/* chat: save-shared-file-to-library chip */
.chat-file-save {
    background: rgba(var(--accent-rgb), 0.14);
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.3);
}
.chat-file-save:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.26); color: #fff; }
.chat-file-save:disabled { opacity: 0.65; cursor: default; }

/* ── jukebox YouTube search modal (search-page video-card look) ─────────── */
.chat-jbx-search-modal { width: min(680px, 94%); max-height: 88%; }
.chat-jbx-searchform { display: flex; gap: 8px; margin: 14px 24px 0; }
.chat-jbx-searchform .chat-input { flex: 1 1 auto; min-width: 0; }
.chat-jbx-searchgrid {
    margin: 14px 24px 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; overflow-y: auto; align-content: start;
}
.chat-jbx-vcard {
    display: flex; flex-direction: column; text-align: left; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; overflow: hidden; padding: 0;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.chat-jbx-vcard:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    transform: translateY(-2px);
}
.chat-jbx-vthumb { position: relative; aspect-ratio: 16 / 9; background: rgba(255,255,255,0.05); }
.chat-jbx-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-jbx-vplay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: #fff; opacity: 0; transition: opacity 0.15s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.chat-jbx-vcard:hover .chat-jbx-vplay { opacity: 0.95; }
.chat-jbx-vdur {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.82); color: #fff; font-size: 11px; font-weight: 600;
    padding: 1px 6px; border-radius: 5px;
}
.chat-jbx-vinfo { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.chat-jbx-vtitle {
    font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.92);
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chat-jbx-vchannel { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* =========================================================================
   LABEL DETAIL PAGE
   -------------------------------------------------------------------------
   Moved here from static/label-detail.js, which injected it into <head> at
   runtime. The React page renders inside #webui-react-root under a
   .label-detail-page wrapper, so every rule names that class rather than the
   deleted #label-detail-page container. The .release-card/.album-card rules
   below are container overrides on purpose: they turn the shared discography
   card into the full-bleed square this page wants, and dropping them leaves
   label releases rendered as 300px stacked artist-detail cards.
   ========================================================================= */
.label-detail-page .label-detail-container { padding: 22px 28px 60px; max-width: 1500px; margin: 0 auto; }
.label-detail-page .label-detail-back { background: rgba(255,255,255,0.06); color: var(--text-secondary,#9aa0aa);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 7px 14px; cursor: pointer;
    font-size: 13px; margin-bottom: 20px; }
.label-detail-page .label-detail-back:hover { background: rgba(255,255,255,0.12); color: #fff; }
.label-detail-page .label-detail-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.label-detail-page .label-detail-hero-art { width: 104px; height: 104px; border-radius: 16px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 50px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb,29,185,84),0.22), rgba(255,255,255,0.05));
    border: 1px solid rgba(255,255,255,0.08); }
.label-detail-page .label-detail-hero-main { flex: 1 1 260px; min-width: 0; }
.label-detail-page .label-detail-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
    font-weight: 700; color: rgb(var(--accent-light-rgb,52,211,120)); margin-bottom: 6px; }
.label-detail-page .label-detail-name { font-size: 32px; font-weight: 800; margin: 0; color: var(--text-primary,#fff);
    line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.label-detail-page .label-detail-meta { color: var(--text-secondary,#9aa0aa); font-size: 13px; margin-top: 8px; }
.label-detail-page .label-detail-hero-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.label-detail-page .label-detail-backlog { display: flex; align-items: center; gap: 8px; }
.label-detail-page .label-detail-backlog-label { font-size: 12px; color: var(--text-secondary,#8a909a); }
.label-detail-page .label-detail-seg { display: inline-flex; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 2px; }
.label-detail-page .label-detail-seg button { border: none; background: transparent; color: var(--text-secondary,#9aa0aa);
    font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.label-detail-page .label-detail-seg button.active { background: rgb(var(--accent-rgb,29,185,84)); color: #fff; }
.label-detail-page .label-detail-toolbar { display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin: 26px 0 18px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 20px; }
.label-detail-page .label-detail-filters { display: flex; gap: 8px; }
.label-detail-page .label-detail-filters button { background: rgba(255,255,255,0.05); color: var(--text-secondary,#9aa0aa);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 7px 16px; cursor: pointer; font-size: 13px; font-weight: 600; }
.label-detail-page .label-detail-filters button:hover { color: #fff; }
.label-detail-page .label-detail-filters button.active { background: rgba(var(--accent-rgb,29,185,84),0.9); color: #fff; border-color: transparent; }
.label-detail-page .label-detail-filters button span { opacity: .7; font-size: 12px; margin-left: 2px; }
.label-detail-page .label-detail-sort { background: rgba(255,255,255,0.05); color: var(--text-primary,#eaecef);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.label-detail-page .label-detail-status { color: var(--text-secondary,#9aa0aa); padding: 40px 0; text-align: center; font-size: 15px; }
.label-detail-page .label-release-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 20px; align-items: start; }
/* The .album-card square/overlay treatment is scoped to #artist-detail-page
   in style.css; bring the SAME container override here so label cards are
   full-bleed squares with the info pinned over the art (not the base
   .release-card 300px stacked layout). .album-card-image/-content are
   global, so they overlay correctly once the container is fixed. */
.label-detail-page .release-card.album-card { background: rgba(18,18,18,1); backdrop-filter: none;
    border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 0; display: block;
    height: auto; aspect-ratio: 1; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.label-detail-page .release-card.album-card:hover { transform: translateY(-5px) scale(1.02);
    border-color: rgba(var(--accent-rgb,29,185,84),0.25);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(var(--accent-rgb,29,185,84),0.12); }
.label-detail-page .release-card.album-card.missing { opacity: 1; }
/* the go-to-artist chip (top-LEFT so it never collides with the
   top-right Owned/Missing completion badge) */
.label-detail-page .album-card .label-card-artist-btn { position: absolute; top: 8px; left: 8px; z-index: 4;
    width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; font-size: 13px;
    background: rgba(0,0,0,0.55); color: #fff; opacity: 0; transition: opacity .15s; display: flex;
    align-items: center; justify-content: center; }
.label-detail-page .album-card:hover .label-card-artist-btn { opacity: 1; }
.label-detail-page .album-card .label-card-artist-btn:hover { background: rgb(var(--accent-rgb,29,185,84)); }
.label-detail-page .album-card .album-card-year .lc-artist { color: rgba(255,255,255,0.85); }
@media (max-width: 640px) {
    .label-detail-page .label-detail-container { padding: 16px; }
    .label-detail-page .label-detail-hero-actions { align-items: stretch; width: 100%; }
    .label-detail-page .label-release-grid { grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 14px; }
    .label-detail-page .album-card .label-card-artist-btn { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   React discover port — Artist Map / Artist Web chrome (#258)

   1:1 transcriptions of the inline `style="…"` strings the vanilla builders
   carried (discover.js line refs on every rule). The vanilla said outright why
   it inline-styled these: "so it doesn't depend on CSS that might not exist"
   (6148). The React components replaced those inline styles with the classes
   below; anything DATA-DRIVEN (per-hue colors, widths, per-state backgrounds)
   stays inline in the components and is deliberately absent here.

   Two mechanical notes:
   - Rows the vanilla built as <div onclick> are <button>s in the port, so
     those rules carry explicit UA resets (background/border/font/width).
   - Positions the vanilla MEASURED at runtime (toolbar height, sidebar width)
     are custom properties with the vanilla's fallback values; the page hook
     sets them the way the vanilla measured them:
       --artmap-panel-top   toolbar height       (6346, fallback 56px)
       --artmap-chrome-top  toolbar height + 10  (6165, fallback 66px)
       --artmap-chrome-left sidebar width + 16   (6166, fallback 16px)
       --artmap-menu-top    nav bottom + 6       (6193, fallback 124px)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Artist Map: info panel shell (6321-6349) ── */
.artmap-panel {
    position: absolute;
    background: linear-gradient(180deg, rgba(20,15,34,0.95), rgba(11,8,20,0.97));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 22;
    display: flex; flex-direction: column;
    color: #fff; overflow: hidden; font-size: 13px;
    /* desktop: right sidebar below the toolbar (6345-6347) */
    top: var(--artmap-panel-top, 56px); right: 0; width: 320px;
    height: calc(100% - var(--artmap-panel-top, 56px));
    border-left: 1px solid rgba(168,85,247,0.18);
    box-shadow: -10px 0 36px rgba(0,0,0,0.45);
    transform: none;
}
/* mobile: bottom sheet (6331-6335); the component drives transform inline */
.artmap-panel--sheet {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; max-height: 62%;
    border-left: none;
    border-top: 1px solid rgba(168,85,247,0.25);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 36px rgba(0,0,0,0.5);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.artmap-panel-grip { /* 6336-6337; a <button> in the port */
    flex: none; height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; position: relative;
    width: 100%; padding: 0; background: transparent; border: none;
}
.artmap-panel-grip > span { /* 6341 */
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.25);
}
.artmap-panel-head { /* 6320 */
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.artmap-panel-body { /* 6321 */
    flex: 1; overflow-y: auto; padding: 12px 14px;
    -webkit-overflow-scrolling: touch;
}

/* ── Artist Map: dashboard head (6421-6437) ── */
.artmap-panel-eyebrow { /* 6422 */
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.artmap-panel-heading { /* 6423 */
    font-size: 19px; font-weight: 800; margin-top: 2px;
}
.artmap-panel-stats { /* 6424; the card reuses it at margin-top:16px (6483) */
    display: flex; gap: 8px; margin-top: 12px;
}
.artmap-ministat { /* _miniStat, 6394 */
    flex: 1; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 6px; text-align: center;
}
.artmap-ministat-value { /* 6395; per-hue color stays inline */
    font-size: 18px; font-weight: 800; color: #fff; line-height: 1;
}
.artmap-ministat-label { /* 6396 */
    font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin-top: 4px;
}
.artmap-panel-coverage { /* 6429 */
    margin-top: 12px;
}
.artmap-panel-coverage-row { /* 6430 */
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: rgba(255,255,255,0.5); margin-bottom: 4px;
}
.artmap-panel-coverage-track { /* 6433 */
    height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
}
.artmap-panel-coverage-fill { /* 6434; width + gradient stay inline.
    The dashboard fill has border-radius:3px, the card's pop fill none —
    inside an overflow:hidden 3px track the clip renders them identical. */
    height: 100%; border-radius: 3px;
}

/* ── Artist Map: top-artists list (6441-6453); rows are <button>s ── */
.artmap-panel-list-title { /* 6442 (its letter-spacing is 0.1em there vs the
    eyebrow's 0.12em — a merge of 0.02em, invisible at 10px) */
    margin: 2px 2px 8px;
}
.artmap-panel-row { /* 6445-6446 */
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 9px; cursor: pointer;
    width: 100%; background: transparent; border: none;
    color: inherit; font: inherit; text-align: left;
}
.artmap-panel-row:hover { /* onmouseover, 6447 */
    background: rgba(255,255,255,0.06);
}
.artmap-panel-rank { /* 6448 */
    width: 18px; text-align: center; font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.35);
}
.artmap-panel-thumb { /* 6449 */
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    overflow: hidden; background: rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
}
.artmap-panel-thumb img { /* 6450 */
    width: 100%; height: 100%; object-fit: cover;
}
.artmap-panel-row-name { /* 6452 */
    flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artmap-panel-star { /* 6453 */
    color: #c084fc; font-size: 11px;
}
.artmap-panel-empty { /* 6454 */
    color: rgba(255,255,255,0.4); padding: 8px;
}

/* ── Artist Map: artist card (6473-6500) ── */
.artmap-card-back { /* 6474 */
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7); border-radius: 8px; padding: 4px 10px;
    font-size: 11px; cursor: pointer; margin-bottom: 12px;
}
.artmap-card-head { /* 6475 */
    text-align: center;
}
.artmap-card-avatar { /* 6476; border-color + box-shadow are per-hue, inline */
    width: 120px; height: 120px; margin: 0 auto; border-radius: 50%;
    overflow: hidden; border: 2px solid transparent;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
}
.artmap-card-canvas { /* 6477 */
    width: 120px; height: 120px;
}
.artmap-card-img { /* 6478 */
    width: 100%; height: 100%; object-fit: cover;
}
.artmap-card-glyph { /* 6478 */
    font-size: 36px; opacity: 0.5;
}
.artmap-card-name { /* 6480 */
    font-size: 18px; font-weight: 800; margin-top: 12px;
}
.artmap-card-type { /* 6481; per-hue color inline */
    font-size: 11px; margin-top: 3px;
}
.artmap-card-genres { /* 6483 */
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin-top: 14px;
}
.artmap-card-genre { /* 6484; per-hue bg/border-color/color inline */
    font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
    border: 1px solid transparent;
}
.artmap-card-pop { /* 6490 — the coverage track again, nudged down */
    margin-top: 8px;
}
.artmap-card-actions { /* 6493 */
    display: flex; flex-direction: column; gap: 8px; margin-top: 18px;
}
.artmap-card-explore { /* 6494; per-hue gradient inline */
    border: none; color: #fff; border-radius: 10px; padding: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.artmap-card-action-row { /* 6495 */
    display: flex; gap: 8px;
}
.artmap-card-details { /* 6496 */
    flex: 1; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); color: #fff;
    border-radius: 10px; padding: 9px; font-size: 12px; cursor: pointer;
}
.artmap-card-watch { /* _artMapWatchBtnHtml, 6259-6261; the watched/unwatched
    background + border-color are state-driven and stay inline */
    flex: 1; border: 1px solid transparent; color: #e9d5ff;
    border-radius: 10px; padding: 9px; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.artmap-card-open { /* 6499 */
    text-align: center; color: rgba(255,255,255,0.55); font-size: 11.5px;
    text-decoration: none; padding: 4px;
}

/* ── Artist Map: island nav (6167-6178) ── */
.artmap-island-nav {
    position: absolute;
    top: var(--artmap-chrome-top, 66px); left: var(--artmap-chrome-left, 16px);
    display: flex; align-items: center; gap: 12px; padding: 7px 12px;
    background: rgba(16,12,28,0.82);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168,85,247,0.25); border-radius: 14px;
    z-index: 30; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    user-select: none; max-width: calc(100vw - 32px);
}
.artmap-island-nav > button { /* the prev/next roundels, 6170 */
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
    color: #fff; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.artmap-island-nav > button.artmap-island-nav-current { /* the center block,
    6173 — a div in the vanilla, a button here, hence the resets */
    width: auto; height: auto; border-radius: 0; border: none;
    background: transparent; display: block; flex: initial;
    text-align: center; min-width: 120px; cursor: pointer;
    padding: 0; color: inherit; font: inherit;
}
.artmap-island-nav-name { /* 6174; per-hue color inline; block so the two
    spans stack like the vanilla's divs */
    display: block; font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
}
.artmap-island-nav-meta { /* 6175 */
    display: block; font-size: 11px; color: rgba(255,255,255,0.55);
    margin-top: 1px;
}

/* ── Artist Map: island quick-jump menu (6193-6203); rows are <button>s ── */
.artmap-island-menu {
    position: absolute;
    top: var(--artmap-menu-top, 124px); left: var(--artmap-chrome-left, 16px);
    min-width: 180px; max-height: 50vh; overflow-y: auto;
    background: rgba(16,12,28,0.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168,85,247,0.25); border-radius: 12px;
    z-index: 31; box-shadow: 0 8px 28px rgba(0,0,0,0.5); padding: 6px;
}
.artmap-island-menu-row { /* 6196 */
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer;
    width: 100%; background: transparent; border: none; font: inherit;
}
.artmap-island-menu-row:hover { /* 6197 */
    background: rgba(255,255,255,0.08);
}
.artmap-island-menu-row.active { /* 6196 (i === cur) */
    background: rgba(168,85,247,0.18);
}
.artmap-island-menu-dot { /* 6199; per-hue background inline */
    width: 9px; height: 9px; border-radius: 50%; flex: none;
}
.artmap-island-menu-name { /* 6198 */
    flex: 1; min-width: 0; text-align: left; font-size: 12.5px;
    font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artmap-island-menu-count { /* 6202 */
    font-size: 11px; color: rgba(255,255,255,0.45);
}

/* ── Artist Web: side panel (7902-7907) ── */
.artweb-panel { /* geometry (position/size/z-index) stays inline in the
    component; this is the visual half of the vanilla cssText */
    background: rgba(20,18,26,0.92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.artweb-panel-body { /* 7907 */
    flex: 1; overflow-y: auto; padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.artweb-panel-close { /* 7988 / 8040 / 8066 / 7787 */
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7); border-radius: 8px; padding: 4px 10px;
    font-size: 11px; cursor: pointer; margin-bottom: 14px;
}

/* ── Artist Web: cards (7988-8028 artist, 8040-8053 genre, 8066-8093
      discovery, 7786-7793 path) ── */
.artweb-card-head { /* 7989 */
    text-align: center;
}
.artweb-avatar { /* 7990; border-color + box-shadow are per-color, inline */
    width: 110px; height: 110px; margin: 0 auto; border-radius: 50%;
    overflow: hidden; border: 2px solid transparent;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
}
.artweb-avatar img { /* 8018 */
    width: 100%; height: 100%; object-fit: cover;
}
.artweb-avatar-glyph { /* 7991 */
    font-size: 34px; opacity: 0.5;
}
.artweb-card-name { /* 7993 */
    font-size: 18px; font-weight: 800; margin-top: 12px;
}
.artweb-card-genre { /* 7994; color inline */
    font-size: 11px; margin-top: 3px;
}
.artweb-card-badge { /* 8071; color + border-color inline */
    display: inline-block; font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; border: 1px solid transparent;
    border-radius: 999px; padding: 2px 9px; margin-top: 6px;
}
.artweb-card-pills { /* 8073 */
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin-top: 14px;
}
.artweb-card-pill { /* 8074; bg + border-color inline */
    font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
    border: 1px solid transparent; color: #ffd9a3;
}
.artweb-card-stats { /* 7996 */
    display: flex; gap: 8px; margin-top: 16px;
}
.artweb-ministat { /* _miniStat, 6394 — the Web reuses the Map's tile */
    flex: 1; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 8px 6px; text-align: center;
}
.artweb-ministat-value { /* 6395 */
    font-size: 18px; font-weight: 800; color: #fff; line-height: 1;
}
.artweb-ministat-label { /* 6396 */
    font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); margin-top: 4px;
}
.artweb-card-meter { /* 8000 */
    margin-top: 8px; height: 6px; background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
}
.artweb-card-meter > div { /* 8001; width + background inline */
    height: 100%;
}
.artweb-card-actions { /* 8003 */
    display: flex; flex-direction: column; gap: 8px; margin-top: 18px;
}
.artweb-btn-primary { /* Play radio, 8004 */
    background: #1db954; border: none; color: #0b0b0f;
    border-radius: 10px; padding: 10px; font-size: 13px; font-weight: 800;
    cursor: pointer;
}
.artweb-btn-lens { /* Expand / Explore / Add — per-lens background inline
    (8005, 8006, 8089) */
    border: none; color: #0b0b0f; border-radius: 10px; padding: 10px;
    font-size: 13px; font-weight: 800; cursor: pointer;
}
.artweb-btn-ghost { /* the discovery-lens Explore variant, 8006 */
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; border-radius: 10px; padding: 10px; font-size: 13px;
    font-weight: 800; cursor: pointer;
}
#artweb-preview-btn.artweb-btn-ghost { /* the preview button's vanilla values
    differ by a shade (8087): 0.08/0.14 and weight 700 — kept exact by id */
    background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
    font-weight: 700;
}
.artweb-btn-link { /* the discography anchor, 8007 / 8091 */
    display: block; text-align: center; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); color: #fff;
    border-radius: 10px; padding: 9px; font-size: 12px; text-decoration: none;
}
.artweb-card-kicker { /* 8041 / 7788 */
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.artweb-card-kicker-spaced { /* the genre card's "Top artists" (8045);
    its letter-spacing is 0.1em there — same 0.02em merge as the Map's */
    margin: 16px 2px 8px;
}
.artweb-card-title { /* 8042 genre (margin-top:2px) and 7789 path
    (margin:3px 0 2px) — merged on the path values, 1px apart */
    font-size: 20px; font-weight: 800; margin: 3px 0 2px;
}
.artweb-card-sub { /* 8043 genre (12px/0.55/margin-top:6px) and 7790 path
    (11.5px/0.5/margin-bottom:14px) — merged on the genre type values; the
    14px bottom collapses against the 16px kicker above, so the genre card's
    vanilla 16px gap is preserved exactly */
    font-size: 12px; color: rgba(255,255,255,0.55); margin: 6px 0 14px;
}
.artweb-card-empty { /* 8053 */
    color: rgba(255,255,255,0.4); padding: 8px;
}

/* ── Artist Web: genre-card member rows (8047-8052); <button>s here ── */
.artweb-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 9px; cursor: pointer;
    width: 100%; background: transparent; border: none;
    color: inherit; font: inherit; text-align: left;
}
.artweb-member-row:hover { /* 8049 */
    background: rgba(255,255,255,0.06);
}
.artweb-member-rank { /* 8050 */
    width: 18px; text-align: center; font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.35);
}
.artweb-member-name { /* 8051 */
    flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Artist Web: path rows (7780-7784); <button>s here ── */
.artweb-path-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 9px; cursor: pointer;
    width: 100%; background: transparent; border: none;
    color: inherit; font: inherit; text-align: left;
}
.artweb-path-row:hover { /* 7780 */
    background: rgba(255,255,255,0.06);
}
.artweb-path-dot { /* 7781; background + endpoint ring (box-shadow) inline */
    width: 11px; height: 11px; border-radius: 50%; flex: none;
}
.artweb-path-name { /* 7782; endpoint font-weight inline */
    flex: 1; min-width: 0; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artweb-path-tag { /* 7783 */
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.artweb-path-link { /* the connector between rows, 7784 */
    margin-left: 13px; height: 10px;
    border-left: 2px solid rgba(255,255,255,0.12);
}

/* ── Artist Web: genre-filter rows (8225-8234); <button>s here ── */
.artweb-genre-clear { /* 8225 */
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; cursor: pointer;
    color: #fff; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.06);
    width: 100%; border: none; font-family: inherit; text-align: left;
}
.artweb-genre-row { /* 8228 */
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
    width: 100%; background: transparent; border: none;
    color: inherit; font: inherit; text-align: left;
}
.artweb-genre-row:hover { /* 8229 */
    background: rgba(255,255,255,0.06);
}
.artweb-genre-row.active { /* 8228 (on) */
    background: rgba(255,255,255,0.09);
}
.artweb-genre-row.active .artweb-genre-name { /* 8231 (on) */
    font-weight: 700;
}
.artweb-genre-dot { /* 8230; per-genre background inline */
    width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.artweb-genre-name { /* 8231 */
    flex: 1; min-width: 0; font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.artweb-genre-count { /* 8232 */
    font-size: 10.5px; color: rgba(255,255,255,0.4);
}
.artweb-genre-empty { /* 8234 */
    color: rgba(255,255,255,0.4); padding: 8px; font-size: 12px;
}

/* ── Artist Web: floating hint pills (7811-7813, 7838-7841) ── */
.artweb-hint {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 25;
    background: rgba(20,18,26,0.94); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px; font-size: 12.5px; color: rgba(255,255,255,0.88);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.artweb-path-hint { /* 7811 */
    top: 70px; padding: 8px 16px; pointer-events: none;
}
.artweb-firstrun-hint { /* 7839-7841 */
    bottom: 20px; padding: 9px 18px; transition: opacity 0.4s ease;
}

/* React discover port — div->button UA resets (live smoke-test round 2).
   These three were DIVs in the vanilla with no background rule of their own,
   so as <button>s they rendered the UA's white. Same reset family as the
   #258 block above; vanilla styling stays in each class's own rule. */
.artmap-genre-sidebar-item,
.artist-map-search-item,
.build-playlist-search-result,
.artmap-explore-result {
    background: transparent; border: none; width: 100%;
    font: inherit; color: inherit; text-align: left;
}

/* ── Album reassign modal ──────────────────────────────────────────────────
   Rides the .reid-* chassis (hero / tabs / search / results / footer). Only
   the two things re-identify has no equivalent for live here: the step rail,
   and the track mapping rows. */

.reassign-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px 2px;
}

.reassign-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7390;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: all 0.18s ease;
}

.reassign-step-num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-weight: 700;
}

.reassign-step.active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.35);
}

.reassign-step.active .reassign-step-num {
    background: rgb(var(--accent-rgb));
    color: #0b0d12;
}

.reassign-step.done {
    color: rgba(45, 212, 191, 0.85);
}

.reassign-step.done .reassign-step-num {
    background: rgba(45, 212, 191, 0.18);
    color: rgba(45, 212, 191, 0.95);
}

/* The verdict line above the mapping. Amber when tracks would be left behind:
   proceeding then SPLITS the album, which is the problem the feature fixes. */
.reassign-summary {
    padding: 10px 14px;
    margin: 4px 0 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(45, 212, 191, 0.9);
    background: rgba(45, 212, 191, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.2);
}

.reassign-summary.warn {
    color: rgba(245, 158, 11, 0.95);
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}

.reassign-row {
    display: grid;
    /* minmax(0,…) on the text columns — without it a long title refuses to
       shrink and pushes the reason column out of the modal. */
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 4px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid transparent;
    font-size: 13px;
    color: #cfd3e2;
}

.reassign-row.unmapped {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.18);
    color: #8b8fa3;
}

.reassign-row-local,
.reassign-row-target {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reassign-row-target {
    color: #fff;
}

.reassign-row.unmapped .reassign-row-target {
    color: rgba(245, 158, 11, 0.8);
    font-style: italic;
}

.reassign-row-arrow {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
}

.reassign-row-why {
    font: 600 10px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .reassign-row {
        grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    }

    .reassign-row-why {
        display: none;
    }

    .reassign-steps {
        padding: 12px 16px 0;
    }
}