/* 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;
}

.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: 240px;

    /* 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 */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(var(--accent-rgb), 0.06),
        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;
    overflow-y: auto;
    overflow-x: 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%;
    filter: blur(40px);
    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 {
    display: none !important;
}

@keyframes sidebar-orb-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25% { transform: translate(30px, 80px) scale(1.2); opacity: 1; }
    50% { transform: translate(-10px, 180px) scale(0.9); opacity: 0.6; }
    75% { transform: translate(20px, 50px) scale(1.15); opacity: 0.9; }
}

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

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

/* Sidebar Audio Visualizer — fixed strip on right edge of sidebar */
.sidebar-visualizer {
    position: fixed;
    left: 240px;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 100;
    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;
}

.sidebar-header {
    min-height: 115px;
    /* Translucent so the backdrop-filter blur below is visible — the dark tint
       keeps the header readable while nav items scrolling behind it read as a
       soft frosted blur instead of a sharp bleed-through. */
    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%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: sticky;
    top: 0;
    /* Above the nav (the sidebar gives its children z-index:1) so nav items
       scrolling up sit BEHIND the header — i.e. in its backdrop, where the
       blur below can actually act on them. Without this they paint in front
       and backdrop-filter has nothing to blur. */
    z-index: 2;
    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-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) 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%
    );
    animation: sidebar-header-sweep 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sidebar-header-sweep {
    0%, 100% { left: -100%; opacity: 0; }
    10% { opacity: 1; }
    50% { left: 140%; 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 {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body.reduce-effects .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 bell/help buttons ────── */
.media-player {
    position: fixed;
    bottom: 24px;
    right: 132px;
    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) */
.helper-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 99998;
    animation: tourOverlayIn 0.3s ease;
    backdrop-filter: blur(2px);
}

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

.helper-tour-target {
    position: relative;
    z-index: 99999 !important;
    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 {
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-rgb), 0.4);
    animation: version-glow 2s ease-in-out infinite;
    position: relative;
}

.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(--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(--accent-rgb), 0.2), 0 0 8px rgba(var(--accent-rgb), 0.1);
        border-color: rgba(var(--accent-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5), 0 0 20px rgba(var(--accent-rgb), 0.3), 0 0 30px rgba(var(--accent-rgb), 0.1);
        border-color: rgba(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);
}

.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: 240px; /* sidebar width */
    right: 0;
    bottom: 0;
    width: calc(100vw - 240px);
    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;
}

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

.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 */
}

/* Lidarr-style intro hero card on Indexers & Downloaders tab */
.ind-hero {
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(35, 35, 35, 0.6));
    border: 1px solid rgba(var(--accent-rgb), 0.15);
}

.ind-hero-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgb(var(--accent-rgb));
    margin-bottom: 12px;
}

.ind-hero-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.ind-hero-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.ind-hero-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    color: rgb(var(--accent-rgb));
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ind-hero-arrow {
    color: rgba(var(--accent-rgb), 0.55);
    font-weight: 700;
}

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

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

.ind-hero-warning-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffb155;
    letter-spacing: 0.4px;
    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);
}

/* 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);
}

/* Quality tier cards - upgraded inner cards */
.quality-tier {
    margin-bottom: 16px;
    padding: 12px;
    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: 12px;
    transition: all 0.2s ease;
}

.quality-tier:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.quality-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.quality-tier-name {
    color: rgba(255, 255, 255, 0.95);
    font-size: 12px;
    font-weight: 600;
}

.quality-tier-priority {
    color: rgba(255, 255, 255, 0.45);
    font-size: 10px;
    font-weight: 500;
}

.quality-tier-sliders {
    padding-left: 24px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.quality-tier-sliders.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.flac-bit-depth-selector {
    padding: 8px 12px;
    transition: opacity 0.3s ease;
}

.flac-bit-depth-selector.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.flac-bit-depth-selector label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

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

.bit-depth-btn {
    flex: 1;
    padding: 7px 12px;
    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: 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);
}

.bit-depth-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);
}

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

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

.slider-group {
    margin-top: 8px;
}

.slider-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.dual-slider-container {
    position: relative;
    height: 40px;
    margin: 10px 0;
}

.range-slider {
    position: absolute;
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    pointer-events: none;
}

.range-slider::-webkit-slider-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    cursor: pointer;
    pointer-events: all;
    border: 2px solid #0a0a0a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--accent-rgb), 0.2);
}

.range-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
    transform: scale(1.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.range-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
    cursor: pointer;
    pointer-events: all;
    border: 2px solid #0a0a0a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--accent-rgb), 0.2);
}

.range-slider::-moz-range-thumb:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
    transform: scale(1.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(var(--accent-rgb), 0.3);
}

.range-slider-track {
    position: absolute;
    top: 18px;
    width: 100%;
    height: 4px;
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 2px;
    pointer-events: none;
}

.slider-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
}

.slider-values span:first-child,
.slider-values span:last-child {
    color: rgb(var(--accent-light-rgb));
    font-weight: 700;
}

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

.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);
}

.settings-actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

/* 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: rgba(20, 20, 20, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(64, 64, 64, 0.2);
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    /* Take remaining vertical space */
}

.search-results-header h3 {
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

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

.search-results-placeholder {
    text-align: center;
    padding: 50px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 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); }

.notif-panel-body {
    overflow-y: auto; flex: 1; padding: 6px;
}
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.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%);
}

.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: var(--accent); 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;
    }

    .sidebar {
        min-width: 240px;
        max-width: 240px;
    }

    .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 */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2),
        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 */
}

.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 — shown beside all page titles */
.page-header-icon {
    width: 176px;
    height: 176px;
    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;
}

.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;
}

.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 {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    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 {
    background: rgba(18, 18, 22, 0.9);
    backdrop-filter: blur(12px);
    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.95) 0%,
            rgba(18, 18, 18, 0.98) 100%);
    backdrop-filter: blur(12px) saturate(1.1);
    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));
}

/* 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;
}

.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);
}

.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;
}

/* Tab System */
.sync-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 4px;
}

.sync-tab-button {
    flex: 1;
    padding: 12px;
    background: transparent;
    color: #b3b3b3;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.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 {
    background: #a78bfa;
    color: #fff;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 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-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-rename,
.mirrored-playlist-card:hover .mirrored-card-pipeline {
    opacity: 1;
}

.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;
}

.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;
}

.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;
    overflow-y: auto;
    overflow-x: hidden;
    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: center;
    padding: 8px 0;
}

.library-source-filter {
    display: flex;
    justify-content: center;
    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: center;
    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;
}

#artist-hero-section #artist-detail-image {
    width: 100%;
    height: auto;
    max-width: 40vw;
}

.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;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 10px;
}

.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;
}

.wishlist-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* .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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    filter: blur(0px);
}

.discover-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
}

.discover-hero-content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px;
    gap: 40px;
}

.discover-hero-info {
    flex: 1;
    max-width: 600px;
    z-index: 1;
}

.discover-hero-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgb(var(--accent-rgb));
    margin-bottom: 16px;
    text-transform: uppercase;
    display: inline-block;
    padding: 6px 16px;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 20px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.discover-hero-title {
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.05;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    letter-spacing: -1px;
}

.discover-hero-subtitle {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    line-height: 1.7;
    font-weight: 400;
}

/* 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, #f093fb 0%, #f5576c 100%);
}

.hero-popularity.medium {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-popularity.low {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.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: linear-gradient(135deg, #667eea 0%, #764ba2 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: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.discover-section-subtitle {
    font-size: 14px;
    color: #999;
    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, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.discover-section-actions .action-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 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(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 8px;
    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); }

/* ── 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);
}
.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-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; }
#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: var(--accent); }
.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;
}

.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(102, 126, 234, 0.1) 0%,
            rgba(118, 75, 162, 0.1) 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(102, 126, 234, 0.1) 0%,
            rgba(118, 75, 162, 0.1) 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: #667eea;
}

.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(138, 43, 226, 0.9), rgba(123, 31, 162, 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(138, 43, 226, 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 — clean, minimal */
.enhanced-search-bar-container {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 8px 8px 0;
    display: flex;
    gap: 8px;
    align-items: center;
    transition: all 0.3s ease;
}

.enhanced-search-bar-container:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.enhanced-search-wrapper {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 12px;
    border: none;
    padding: 0 16px;
    transition: all 0.3s ease;
}

.enhanced-search-wrapper:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.enhanced-search-icon {
    font-size: 18px;
    margin-right: 10px;
    opacity: 0.6;
    animation: none;
}

@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: 15px;
    color: #ffffff;
    padding: 10px 0;
}

#enhanced-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.enhanced-cancel-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.enhanced-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Link / ID lookup row (#775) — paste a provider link/ID under the search bar */
.enh-id-lookup {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px 8px 4px 14px;
    transition: all 0.3s ease;
}

.enh-id-lookup:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.enh-id-lookup-icon {
    font-size: 15px;
    opacity: 0.55;
}

.enh-id-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 8px 0;
}

.enh-id-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.enh-id-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.enh-id-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* 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; }

/* ── Source picker icon row (replaces dropdown + post-search tabs) ── */
.enh-source-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 10px;
    padding: 12px 14px;
    margin: 10px 0 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    /* Frosted-glass panel that holds the icons together visually. */
    background: linear-gradient(180deg, 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: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.15);
    /* Don't compress when the parent flex container is tight. */
    flex-shrink: 0;
}
.enh-source-row::-webkit-scrollbar { height: 6px; }
.enh-source-row::-webkit-scrollbar-track { background: transparent; }
.enh-source-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }

.enh-source-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    color: rgba(255, 255, 255, 0.65);
    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: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.enh-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 4px 14px rgba(0, 0, 0, 0.25);
}
.enh-source-icon:active { transform: translateY(0) scale(0.97); }

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

/* 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: center;
    gap: 8px;
    padding: 0;
    margin-bottom: 12px;
    border-bottom: none;
    position: relative;
}

.enh-section-header::after {
    display: none;
}

.enh-section-icon {
    display: none;
}

.enh-section-title {
    flex-grow: 1;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.enh-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

/* ========================================= */
/* 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 — full-bleed photo style matching library page */
.enh-compact-item.artist-card {
    background: rgba(18, 18, 18, 1);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0;
    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);
    display: block;
    position: relative;
    overflow: hidden;
    width: 160px;
    height: 195px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.enh-compact-item.artist-card::before {
    display: none;
}

.enh-compact-item.artist-card.has-dynamic-glow::before {
    display: none;
}

/* Gradient overlay for text readability */
.enh-compact-item.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;
}

.enh-compact-item.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);
    z-index: 10;
}

.enh-compact-item.artist-card:hover::after {
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            transparent 65%);
}

.enh-compact-item.artist-card.has-dynamic-glow:hover {
    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 24px color-mix(in srgb, var(--glow-color-1) 15%, transparent);
}

/* Artist image — fills entire card */
.enh-item-image.artist-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    border: none;
    margin: 0;
    box-shadow: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    flex-shrink: 0;
}

.enh-compact-item.artist-card:hover .enh-item-image.artist-image {
    transform: scale(1.06);
    box-shadow: none;
}

.enh-compact-item.artist-card.has-dynamic-glow:hover .enh-item-image.artist-image {
    transform: scale(1.06);
}

.enh-item-image-placeholder.artist-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(30, 30, 30, 1) 0%, rgba(20, 20, 20, 1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(255, 255, 255, 0.3);
    border: none;
    margin: 0;
    box-shadow: none;
    z-index: 0;
    flex-shrink: 0;
}

/* Info pinned to bottom over gradient */
.enh-compact-item.artist-card .enh-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    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.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.enh-compact-item.artist-card .enh-item-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    display: block;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.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 — discover-style */
.enh-compact-item.album-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #1a1a1a;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    backdrop-filter: none;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: 170px;
}

.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(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.enh-compact-item.album-card.has-dynamic-glow:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 16px 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: 0;
    object-fit: cover;
    margin-bottom: 0;
    box-shadow: none;
    transition: none;
    position: relative;
    z-index: 1;
}

.enh-compact-item.album-card:hover .enh-item-image.album-cover {
    transform: none;
    box-shadow: none;
    opacity: 1;
}

.enh-compact-item.album-card.has-dynamic-glow:hover .enh-item-image.album-cover {
    box-shadow: none;
}

.enh-item-image-placeholder.album-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 0;
    box-shadow: none;
    position: relative;
    z-index: 1;
}

.enh-compact-item.album-card .enh-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px 12px;
    z-index: 3;
}

/* Gradient overlay for text readability on enhanced search album cards */
.enh-compact-item.album-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.enh-compact-item.album-card .enh-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.enh-compact-item.album-card .enh-item-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* ========================================= */
/* 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: 12px;
    padding: 8px 12px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 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.06);
    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) 6%, transparent);
    border-color: transparent;
    box-shadow: none;
}

.enh-compact-item.track-item:hover::before {
    display: none;
}

.enh-item-image.track-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 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 8px rgba(0, 0, 0, 0.4);
}

.enh-compact-item.track-item.has-dynamic-glow:hover .enh-item-image.track-cover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.enh-item-image-placeholder.track-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    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: all 0.15s ease;
    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: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.1px;
}

.enh-compact-item.track-item .enh-item-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enh-item-duration {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    margin-left: 8px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

/* Play button on hover */
.enh-item-play-btn {
    opacity: 0;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    backdrop-filter: blur(8px);
}

.enh-compact-item.track-item:hover .enh-item-play-btn {
    opacity: 1;
    transform: translateY(-50%);
}

.enh-item-play-btn:hover {
    background: rgba(var(--accent-rgb), 0.8);
    box-shadow: none;
    transform: translateY(-50%) scale(1.05);
}

.enh-item-play-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* ========================================= */
/* 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);
}

/* ============================================================================
   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);
}

/* ========================================
   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;
}

.profile-page-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.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 [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, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.15);
    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;
    animation: btn-rainbow-glow 6s linear infinite;
    backdrop-filter: blur(12px);
}
.auto-new-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%);
    animation: btn-rainbow-glow-hover 4s linear infinite;
}
.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));
}

/* --- 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;
}
.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, 1fr);
    gap: 6px;
}
.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: 75px; 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: 240px;
    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));
}

.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 */
.np-body {
    display: flex;
    flex-direction: row;
    padding: 48px 40px 36px;
    gap: 48px;
    align-items: flex-start;
}
.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;
}

.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);
}

.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;
}

.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);
}

/* 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;
    }
}

@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: var(--accent, #6d5dfc);
    border-bottom-color: var(--accent, #6d5dfc);
}

/* 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: var(--accent-color, #6366f1);
    border-bottom-color: var(--accent-color, #6366f1);
}

.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 {
    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;
}

.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);
}

.repair-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    gap: 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);
}

/* 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;
    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;
    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;
}
.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 centered */
#settings-page .stg-tabbar {
    margin: 0 auto 28px;
}

/* Columns become single centered column */
#settings-page .settings-columns {
    flex-direction: column;
    max-width: 760px;
    width: 100%;
    gap: 0;
    margin: 0 auto;
    margin-bottom: 0;
}

#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;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 14px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    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;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
}

#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: 1;
    max-width: 340px;
    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 > input:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
#settings-page .form-group > input: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: 180px;
    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;
}

/* ── Quality section ── */
#settings-page .quality-tier {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
#settings-page .quality-tier:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
#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; }

/* ── 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;
}

/* ── Save button — centered, sticky feel ── */
#settings-page .settings-actions {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 0 16px;
}
#settings-page .settings-actions .save-button {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.92em;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#settings-page .settings-actions .save-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb, 29, 185, 84), 0.35);
}
#settings-page .settings-actions .save-button:active {
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb, 29, 185, 84), 0.2);
}

/* ── 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;
}

/* ── 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;
}
/* 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 #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 #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);
}

/* ── Path inputs with lock buttons ── */
#settings-page .form-group .path-input-wrapper {
    flex: 1;
    max-width: 340px;
}

/* ── 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-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);
}
.hybrid-source-priority {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}
.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);
}

/* 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) {
    /* Tab bar scrolls horizontally */
    #settings-page .stg-tabbar {
        width: 100%;
        border-radius: 0;
        margin-bottom: 16px;
        justify-content: flex-start;
    }
    .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; }
    /* Save button */
    #settings-page .settings-actions { padding: 16px 8px; }
    #settings-page .settings-actions .save-button { width: 100%; }
    /* 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;
}

.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; }

.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;
}

/* 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: 1 !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-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-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 ── Full performance mode: disables GPU-heavy
   properties and halts decorative animation globally. */
body.reduce-effects *,
body.reduce-effects *::before,
body.reduce-effects *::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;
}

/* Kill the background particle canvas entirely in performance mode */
body.reduce-effects #page-particles-canvas {
    display: none !important;
}

/* ============================================
   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;
}

.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;
}

/* Repair tabs on the tools page */
.tools-maintenance-hero .repair-tabs {
    margin-bottom: 16px;
}

.tools-maintenance-hero .repair-tab-content {
    min-height: 200px;
}

/* ── 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-page-header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.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; }
.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); }

.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; }
.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-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-header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .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;
}


/* =========================================================================
   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 {
    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.
   ========================================================================== */

.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%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    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, transform, opacity;
    animation: dashBlobHaloPulse 5.5s ease-in-out infinite;
}
.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, transform, opacity;
    mix-blend-mode: screen;
    animation: dashBlobCorePulse 3.7s ease-in-out infinite;
}

@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 {
    display: none;
}
.dash-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    /* No translateY lift: moving the card up on hover pulls its bottom edge off
       the cursor when you hover that edge, which un-hovers → drops → re-hovers
       in a rapid flicker loop (#816). The stronger shadow + glow below already
       reads as "raised" without moving the hit box. */
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.40),
        0 4px 14px rgba(0, 0, 0, 0.22),
        0 0 28px rgba(var(--accent-rgb), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* 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="syncs"]           { 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);
    height: clamp(280px, 18cqw + 200px, 340px);
}

.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 1fr auto;
    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: end;
}

.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);
    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;
    padding-top: clamp(10px, 1cqw + 4px, 16px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.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;
    }
    .qa-tile--hero { grid-row: auto; aspect-ratio: 4 / 3; }
    .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. */
.dash-card[data-card="library"] .library-status-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 10px 0 0;
    border-radius: 0;
}
.dash-card[data-card="library"] .library-status-glow {
    display: none;
}
.dash-card[data-card="library"] .library-status-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.dash-card[data-card="library"] .library-status-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: rgba(168, 85, 247, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.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: column;
    gap: 6px;
}
.dash-card[data-card="library"] .library-status-btn {
    padding: 6px 10px;
    font-size: 11.5px;
    border-radius: 7px;
    white-space: nowrap;
}
.dash-card[data-card="library"] .library-status-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0;
}
.dash-card[data-card="library"] .library-status-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.dash-card[data-card="library"] .library-status-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(168, 85, 247, 0.10);
    color: rgba(168, 85, 247, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.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: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-card[data-card="library"] .library-status-stat-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* 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;
}

/* Sync history strip — horizontal scroller */
.dash-card[data-card="syncs"] .sync-history-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px;
    max-height: 350px;
}

.dash-card[data-card="syncs"] .sync-history-card {
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
}

/* 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;
    }
    .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 stats: 4 across stays in wider 2-col cell */
    .dash-card[data-card="library"] .library-status-stats {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 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="library"] .library-status-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-card[data-card="enrichment"] .rate-monitor-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Mobile — 1-col stack */
@media (max-width: 699px) {
    .dash-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dash-card--wide,
    .dash-card--full {
        grid-column: auto;
    }
    .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 {
        grid-template-columns: repeat(2, 1fr);
    }
    .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;
    }
    .dash-card[data-card="syncs"] .sync-history-cards {
        max-height: 220px;
    }
}

/* 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;
    }
    .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 — swell into a pill that shows the label inline. */
.sync-tab-button.active {
    width: auto;
    padding: 0 14px 0 10px;
    gap: 8px;
    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;
}

.sync-tab-button.active .sync-tab-label {
    max-width: 200px;
    opacity: 1;
}

/* 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; }
.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 { min-width: 200px; }
.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; }
.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; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; flex: 0 0 auto; }
.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; }
.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; }
.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; }
.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; }

/* ── 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(122,162,247,0.22); color: #cdd6f4; }
.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; }

/* ── 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; }