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

/* 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-top-right-radius: 24px;
    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;
}

@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;
    background: linear-gradient(180deg,
            rgba(var(--accent-rgb), 0.14) 0%,
            rgba(var(--accent-rgb), 0.08) 30%,
            rgba(var(--accent-rgb), 0.03) 70%,
            transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-top-right-radius: 20px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;

    /* 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;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    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.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.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 {
    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);
    transform: translateX(6px);
    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);
}

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

.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: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    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: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    color: rgba(var(--accent-rgb), 0.7);
}

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

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

/* Media Player Section - Premium Compact Design */
.media-player {
    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(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    margin: 8px 14px;
    padding: 0;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    position: relative;
}

.media-player:hover {
    border-color: rgba(var(--accent-rgb), 0.18);
    border-top-color: rgba(var(--accent-rgb), 0.22);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 4px 14px rgba(var(--accent-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Top progress bar - thin line across full width */
.player-top-progress {
    padding: 0 14px;
    padding-top: 10px;
}

.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-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;
    right: 84px;
    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;
}

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

.main-content {
    flex: 1;
    /* Opaque dark background (GPU-optimized: no backdrop-filter needed on solid dark body) */
    background: linear-gradient(135deg,
            rgba(10, 10, 10, 1) 0%,
            rgba(15, 15, 15, 1) 50%,
            rgba(11, 11, 11, 1) 100%);
    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 */
.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;
}

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

.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 370px;
    /* Left panel is flexible, right is fixed */
    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;
    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 bell/helper buttons */
.toast-container {
    position: fixed;
    bottom: 84px;
    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
   ================================================================================== */

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

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

/* 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-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;
    overflow: hidden;

    /* 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;
    overflow: hidden;

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

.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__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.download-item__title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 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: all 0.2s ease;
    align-self: flex-start;
    width: fit-content !important;
    height: fit-content !important;

}

.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 */
.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Spacing between sections */
    padding: 28px 24px 30px 24px;

    /* 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-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;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    margin: -28px -24px 20px -24px;
    position: relative;
    overflow: visible;
    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 */
.dashboard-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: 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%);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: dashboard-header-sweep 12s ease-in-out infinite;
    clip-path: inset(0 0 0 0 round 24px 24px 0 0);
}

@keyframes dashboard-header-sweep {
    0%, 100% { background-position: -60% 0; opacity: 0; }
    10% { opacity: 1; }
    50% { background-position: 160% 0; 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-spacer {
    flex-grow: 1;
    /* Pushes buttons to the right */
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

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

    .header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .header-button {
        flex: 1;
        min-width: 100%;
    }

    .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: 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: 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-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-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.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.import {
    color: rgba(120, 160, 230, 0.9);
    background: rgba(120, 160, 230, 0.1);
    border: 1px solid rgba(120, 160, 230, 0.2);
}

.library-history-entry-time {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    flex-shrink: 0;
}

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

/* ── 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 {
    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-btn:hover { color: rgb(var(--accent-rgb)); background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.3); }

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

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

/* Server tab — prominent first tab */
.sync-tab-server {
    flex: 1.4 !important;
    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>');
}

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

/* 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-delete {
    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 {
    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 {
    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-clear {
    opacity: 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);
}

.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(18, 18, 18, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    animation: mirroredOverlayFadeIn 0.3s ease forwards;
}

@keyframes mirroredOverlayFadeIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(12px); }
}

@keyframes mirroredModalSlideIn {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.mirrored-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: 90%;
    max-width: 950px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.7),
        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.15);
    animation: mirroredModalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mirrored-modal-header {
    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);
    padding: 0;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.mirrored-modal-hero {
    display: flex;
    align-items: center;
    padding: 28px 32px;
    padding-right: 60px;
    gap: 20px;
    position: relative;
    z-index: 2;
    min-height: 110px;
}

.mirrored-modal-hero-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.08) 100%);
    border: 1px solid rgba(167, 139, 250, 0.3);
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    color: #a78bfa;
}

.mirrored-modal-hero-icon.spotify { background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(29, 185, 84, 0.08) 100%); border-color: rgba(29, 185, 84, 0.3); box-shadow: 0 8px 24px rgba(29, 185, 84, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #1db954; }
.mirrored-modal-hero-icon.tidal { background: linear-gradient(135deg, rgba(255, 102, 0, 0.2) 0%, rgba(255, 102, 0, 0.08) 100%); border-color: rgba(255, 102, 0, 0.3); box-shadow: 0 8px 24px rgba(255, 102, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #ff6600; }
.mirrored-modal-hero-icon.youtube { background: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.08) 100%); border-color: rgba(255, 0, 0, 0.3); box-shadow: 0 8px 24px rgba(255, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #ff4444; }
.mirrored-modal-hero-icon.beatport { background: linear-gradient(135deg, rgba(1, 255, 149, 0.2) 0%, rgba(1, 255, 149, 0.08) 100%); border-color: rgba(1, 255, 149, 0.3); box-shadow: 0 8px 24px rgba(1, 255, 149, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); color: #01ff95; }

.mirrored-modal-hero-info {
    flex: 1;
    min-width: 0;
}

.mirrored-modal-hero-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.5px;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mirrored-modal-hero-subtitle {
    color: #b3b3b3;
    font-size: 14px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mirrored-modal-hero-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 6px;
    color: rgb(var(--accent-light-rgb));
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.mirrored-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 3;
    color: #b3b3b3;
    font-size: 18px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    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);
}

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

.mirrored-modal-tracks {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: #121212;
}

.mirrored-modal-tracks::-webkit-scrollbar { width: 8px; }
.mirrored-modal-tracks::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.mirrored-modal-tracks::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 4px; }
.mirrored-modal-tracks::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); }

.mirrored-track-header {
    display: grid;
    grid-template-columns: 40px 1.6fr 1.4fr 1fr 56px;
    align-items: center;
    padding: 10px 28px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: #121212;
    z-index: 1;
}

.mirrored-track-row {
    display: grid;
    grid-template-columns: 40px 1.6fr 1.4fr 1fr 56px;
    align-items: center;
    padding: 11px 28px;
    font-size: 13px;
    color: #b3b3b3;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.mirrored-track-row:hover {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 100%);
    transform: translateX(2px);
}

.mirrored-track-row .track-pos {
    color: #555;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.mirrored-track-row:hover .track-pos {
    color: rgb(var(--accent-light-rgb));
}

.mirrored-track-row .track-title {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.mirrored-track-row .track-artist {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.mirrored-track-row .track-album {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
    color: #777;
}

.mirrored-track-row .track-duration {
    text-align: right;
    color: #666;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mirrored-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: 18px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.mirrored-modal-footer button {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 100px;
}

.mirrored-btn-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.mirrored-btn-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

.mirrored-btn-discover {
    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
    color: #000;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
    border: 1px solid rgba(var(--accent-rgb), 0.3) !important;
}

.mirrored-btn-discover:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.mirrored-btn-delete {
    background: rgba(244, 67, 54, 0.12);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.2) !important;
}

.mirrored-btn-delete:hover {
    background: rgba(244, 67, 54, 0.2);
    color: #ff6659;
    border-color: rgba(244, 67, 54, 0.35) !important;
    transform: translateY(-1px);
}

.sync-tab-content {
    display: none;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    overflow: 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);
}

/* 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 {
    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 {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 400;
}

#youtube-parse-btn,
#deezer-parse-btn,
#spotify-public-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 {
    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);
}

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

#spotify-public-parse-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(29, 185, 84, 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);
}

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

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

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

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

.youtube-playlist-card .playlist-card-content,
.tidal-playlist-card .playlist-card-content,
.deezer-playlist-card .playlist-card-content,
.spotify-public-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 { 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 { 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 {
    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 {
    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)); }

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

.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 {
    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(255, 255, 255, 0.1);
    color: #ffffff;
    font-weight: 600;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    position: sticky;
    top: 0;
    z-index: 1;
    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 .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;
    gap: 12px;
    align-items: center;
}

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

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

.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-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: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 18, 18, 0.98);
    z-index: 10;
    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 button {
    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;
}

.watchlist-detail-actions button: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;
}

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

.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-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 {
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.config-modal-btn-primary {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
    color: #000;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}

.config-modal-btn-primary:hover {
    background: linear-gradient(135deg, #1fdf64, rgb(var(--accent-light-rgb)));
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
}

.config-modal-btn-primary:active {
    transform: translateY(0);
}

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

.config-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.config-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Linked Provider Artist */
.watchlist-linked-artist-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.watchlist-linked-artist-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.watchlist-linked-artist-img-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.watchlist-linked-artist-info {
    flex: 1;
    min-width: 0;
}

.watchlist-linked-artist-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watchlist-linked-artist-providers {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.watchlist-provider-badge {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.watchlist-provider-badge.spotify {
    background: rgba(30, 215, 96, 0.15);
    color: #1ed760;
    border: 1px solid rgba(30, 215, 96, 0.3);
}

.watchlist-provider-badge.itunes {
    background: rgba(252, 60, 68, 0.15);
    color: #fc3c44;
    border: 1px solid rgba(252, 60, 68, 0.3);
}

.watchlist-provider-badge.deezer {
    background: rgba(162, 56, 255, 0.15);
    color: #a238ff;
    border: 1px solid rgba(162, 56, 255, 0.3);
}

.watchlist-linked-mismatch-warning {
    margin-top: 6px;
    font-size: 12px;
    color: #ffc107;
    line-height: 1.3;
}

.watchlist-linked-mismatch-warning strong {
    color: #fff;
}

.watchlist-linked-change-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ccc;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.watchlist-linked-change-btn:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: #fff;
    border-color: rgba(var(--accent-rgb), 0.3);
}

/* Linked Provider Search */
.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-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);
}

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

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

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

.library-artist-watchlist-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.85);
    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);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.library-artist-watchlist-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    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;
}

.library-artist-watchlist-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.library-artist-watchlist-btn: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);
}

.library-artist-watchlist-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-watchlist-btn .watchlist-icon {
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.library-artist-watchlist-btn:hover:not(:disabled) .watchlist-icon {
    transform: scale(1.15);
}

.library-artist-watchlist-btn .watchlist-text {
    position: relative;
    z-index: 1;
}

.library-artist-watchlist-btn.watching {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.05) 100%);
    color: #ffc107;
    border-color: rgba(255, 193, 7, 0.25);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.08);
}

.library-artist-watchlist-btn.watching::before {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.08) 100%);
}

.library-artist-watchlist-btn.watching:hover:not(:disabled) {
    color: #ffffff;
    border-color: rgba(255, 193, 7, 0.5);
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.25), 0 0 0 1px rgba(255, 193, 7, 0.15);
}

.library-artist-watchlist-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ─── Enhance Quality Button ─── */

.library-artist-enhance-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(79, 195, 247, 0.9);
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.08) 0%, rgba(79, 195, 247, 0.02) 100%);
    border: 1px solid rgba(79, 195, 247, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.library-artist-enhance-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.22) 0%, rgba(100, 220, 255, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.library-artist-enhance-btn:hover::before {
    opacity: 1;
}

.library-artist-enhance-btn:hover {
    color: #ffffff;
    border-color: rgba(79, 195, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(79, 195, 247, 0.2), 0 0 0 1px rgba(79, 195, 247, 0.1);
}

.library-artist-enhance-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-enhance-btn .enhance-icon {
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.library-artist-enhance-btn:hover .enhance-icon {
    transform: scale(1.2) rotate(8deg);
}

.library-artist-enhance-btn .enhance-text {
    position: relative;
    z-index: 1;
}

.library-artist-enhance-btn.hidden {
    display: none;
}

/* ─── Artist Radio Button ─── */

.library-artist-radio-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.85);
    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);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.library-artist-radio-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    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;
}

.library-artist-radio-btn:hover::before {
    opacity: 1;
}

.library-artist-radio-btn:hover {
    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);
}

.library-artist-radio-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.library-artist-radio-btn .radio-icon {
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.library-artist-radio-btn:hover .radio-icon {
    transform: scale(1.15);
}

.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 {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    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;
}

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

/* Pagination */
.library-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    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(180px, 1fr));
    gap: 16px;
    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(150px, 1fr));
        gap: 16px;
    }

    .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);
}
.artist-hero-badge[data-url] {
    cursor: pointer;
}
.artist-hero-badge[data-url]: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);
}
.artist-hero-badge[data-url]:hover img {
    opacity: 1;
}
.artist-hero-badge:not([data-url]) {
    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;
}

/* 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 {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 120px;
}

.wishlist-modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.wishlist-modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

.wishlist-modal-btn-download {
    background: linear-gradient(135deg, #1db954, #1ed760);
    color: #ffffff;
    border: 1px solid rgba(29, 185, 84, 0.3);
}

.wishlist-modal-btn-download:hover {
    background: linear-gradient(135deg, #1ed760, #1db954);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
}

.wishlist-modal-btn-download:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}

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

.wishlist-modal-btn-primary:hover {
    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #22e167 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
}

.wishlist-modal-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

/* Loading State */
.wishlist-modal-btn-primary.loading {
    background: rgba(255, 193, 7, 0.9);
    color: #000000;
    animation: pulse-loading 1.5s infinite;
    cursor: not-allowed;
}

.wishlist-modal-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

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

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

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

.listenbrainz-playlist-card {
    background: linear-gradient(135deg, #eb743b 0%, #d26230 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.listenbrainz-playlist-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

.listenbrainz-icon {
    font-size: 48px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }
}

/* ========================================= */
/* SEARCH MODE TOGGLE SYSTEM */
/* ========================================= */

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

.enhanced-search-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.enhanced-search-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.enhanced-search-btn:active {
    transform: scale(0.97);
}

.btn-icon {
    font-size: 14px;
}

/* 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-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }

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

    .enhanced-search-btn {
        padding: 9px 14px;
        font-size: 12px;
    }

    /* 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-hydrabase.active { background: rgba(0, 180, 216, 0.2); color: #00b4d8; }

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

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

/* ========================================
   IMPORT PAGE (full page, replaces modal)
   ======================================== */

/* ============================================================================
   STATS PAGE
   ============================================================================ */

/* Stats page uses dashboard-container pattern for consistency */
.stats-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px 30px;
    overflow: hidden;
    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;
    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);
}

/* Header uses same pattern as .dashboard-header */
.stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    margin: -28px -24px 0 -24px;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 16px;
    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;
}

.stats-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 12s ease-in-out infinite;
}

@keyframes stats-header-sweep {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}

.stats-header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stats-header-title h1 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

/* Time range pills */
.stats-time-range {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
}

.stats-range-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.stats-range-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
}

.stats-range-btn.active {
    background: rgb(var(--accent-rgb));
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.stats-header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stats-sync-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-last-synced {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.3);
}

.stats-sync-btn {
    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.5);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-sync-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.stats-sync-btn.syncing {
    pointer-events: none;
    color: transparent;
    position: relative;
}

.stats-sync-btn.syncing::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: rgba(var(--accent-rgb), 0.8);
    border-radius: 50%;
    animation: stats-spin 0.8s linear infinite;
}

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

/* Overview cards */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.stats-card {
    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: 14px;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
    border-radius: 2px;
    transition: all 0.3s;
}

.stats-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.08);
}

.stats-card:hover::before {
    left: 10%;
    right: 10%;
    height: 3px;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.stats-card-value {
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
}

.stats-card-label {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Main grid */
.stats-main-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    min-width: 0;
}

.stats-left-col, .stats-right-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.stats-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Section cards */
.stats-section-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px;
    transition: border-color 0.2s;
    min-width: 0;
    overflow: hidden;
}

.stats-section-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.stats-full-width {
    /* No extra margin — container handles it */
}

.stats-section-title {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Genre chart */
.stats-genre-chart-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

.stats-genre-chart-container canvas {
    width: 180px !important;
    height: 180px !important;
    flex-shrink: 0;
}

.stats-genre-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-genre-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.7);
}

.stats-genre-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.stats-genre-pct {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

/* Top artists visual bubbles */
.stats-top-artists-visual {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-artist-bubbles {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    gap: 8px;
}

.stats-artist-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
    transition: transform 0.2s;
}

.stats-artist-bubble:hover {
    transform: translateY(-3px);
}

.stats-bubble-img {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stats-artist-bubble:hover .stats-bubble-img {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.2);
}

.stats-bubble-img span {
    font-size: 1.2em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
}

.stats-bubble-bar-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.stats-bubble-bar {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), 0.4));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.stats-bubble-name {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stats-bubble-count {
    font-size: 0.65em;
    color: rgba(var(--accent-rgb), 0.7);
    font-weight: 600;
}

/* Ranked lists */
.stats-ranked-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.stats-ranked-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s;
    cursor: default;
}

.stats-ranked-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.stats-ranked-num {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}

.stats-ranked-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.stats-ranked-info {
    flex: 1;
    min-width: 0;
}

.stats-ranked-name {
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-ranked-meta {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.4);
}

.stats-ranked-count {
    font-size: 0.78em;
    color: rgba(var(--accent-rgb), 0.8);
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.stats-artist-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.stats-artist-link:hover {
    color: rgb(var(--accent-rgb));
}

/* Play buttons */
.stats-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--accent-rgb), 0.15);
    color: rgb(var(--accent-rgb));
    font-size: 10px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.stats-ranked-item:hover .stats-play-btn,
.stats-recent-item:hover .stats-play-btn {
    opacity: 1;
}

.stats-play-btn:hover {
    background: rgb(var(--accent-rgb));
    color: #fff;
    transform: scale(1.1);
}

.stats-play-btn-sm {
    width: 22px;
    height: 22px;
    font-size: 8px;
}

/* Library health */
.stats-health-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.stats-health-item {
    text-align: center;
}

.stats-health-item:first-child {
    text-align: left;
}

.stats-health-value {
    font-size: 1.6em;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
}

.stats-health-label {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Format breakdown bar */
.stats-format-bar {
    display: flex;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.stats-format-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    min-width: 30px;
    transition: flex 0.5s ease;
}

/* Recent plays */
.stats-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.stats-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
}

.stats-recent-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.stats-recent-title {
    flex: 1;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-recent-artist {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.stats-recent-time {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    min-width: 65px;
    text-align: right;
}

/* Enrichment coverage */
.stats-enrichment {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    flex-wrap: wrap;
}

.stats-enrich-item {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-enrich-name {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.45);
    min-width: 70px;
    font-weight: 500;
}

.stats-enrich-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.stats-enrich-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.stats-enrich-pct {
    font-size: 0.72em;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
}

/* Database Storage Chart */
.stats-db-storage-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
}

.stats-db-chart-container {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

.stats-db-chart-container canvas {
    width: 180px !important;
    height: 180px !important;
}

.stats-db-total {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.stats-db-total-value {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.stats-db-total-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-db-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.stats-db-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.stats-db-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.stats-db-legend-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats-db-legend-size {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

/* Stats empty state */
.stats-empty {
    text-align: center;
    padding: 80px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.stats-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.stats-empty h3 {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.stats-empty p {
    font-size: 0.88em;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .stats-container {
        margin: 10px;
        padding: 16px;
    }
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-main-grid {
        grid-template-columns: 1fr;
    }
    .stats-health-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stats-genre-chart-container {
        flex-direction: column;
    }
    .stats-two-col {
        grid-template-columns: 1fr;
    }
    .stats-genre-chart-container canvas {
        width: 150px !important;
        height: 150px !important;
    }
    .stats-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .stats-header-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
    .stats-card-value {
        font-size: 1.5em;
    }
}

/* ============================================================================
   IMPORT PAGE
   ============================================================================ */

.import-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}

.import-page-header {
    margin-bottom: 20px;
}

.import-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

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

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

.import-page-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.import-page-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.import-page-staging-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.import-staging-path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-staging-stats {
    color: rgb(var(--accent-light-rgb));
    font-weight: 500;
    white-space: nowrap;
}

/* Tab Bar */
.import-page-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0;
}

.import-page-tab {
    padding: 10px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
}

.import-page-tab:hover {
    color: rgba(255, 255, 255, 0.8);
}

.import-page-tab.active {
    color: rgb(var(--accent-light-rgb));
    border-bottom-color: rgb(var(--accent-light-rgb));
}

.import-page-tab-content {
    display: none;
}

.import-page-tab-content.active {
    display: block;
}

/* Section labels */
.import-page-section-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Search bar */
.import-page-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    position: relative;
}

.import-page-search-input {
    flex: 1;
    padding: 10px 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;
    outline: none;
    transition: border-color 0.2s;
}

.import-page-search-input:focus {
    border-color: rgba(var(--accent-light-rgb), 0.5);
}

.import-page-search-btn {
    padding: 10px 20px;
    background: rgb(var(--accent-light-rgb));
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.import-page-search-btn:hover {
    background: #1fdf64;
}

.import-page-clear-btn {
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.import-page-clear-btn:hover {
    color: #fff;
}

/* Album grid */
.import-page-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.import-page-album-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.import-page-album-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--accent-light-rgb), 0.3);
    transform: translateY(-2px);
}

.import-page-album-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.import-page-album-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.import-page-album-card-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-page-album-card-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

/* Album hero (selected album) */
.import-page-album-hero {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 20px;
    align-items: center;
}

.import-page-album-hero img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.import-page-album-hero-info {
    flex: 1;
    min-width: 0;
}

.import-page-album-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.import-page-album-hero-artist {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.import-page-album-hero-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
}

/* Match header */
.import-page-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.import-page-match-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.import-page-match-actions {
    display: flex;
    gap: 8px;
}

/* Match list */
.import-page-match-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.import-page-match-row {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 36px;
    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;
    min-height: 44px;
    transition: all 0.2s;
}

.import-page-match-row.drag-over {
    background: rgba(var(--accent-light-rgb), 0.08);
    border-color: rgba(var(--accent-light-rgb), 0.4);
    box-shadow: 0 0 12px rgba(var(--accent-light-rgb), 0.15);
}

.import-page-match-row.matched {
    border-color: rgba(var(--accent-light-rgb), 0.2);
}

.import-page-match-num {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-weight: 500;
}

.import-page-match-track {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-page-match-file {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.import-page-match-file.has-file {
    color: rgb(var(--accent-light-rgb));
}

.import-page-match-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-page-match-confidence {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(var(--accent-light-rgb), 0.15);
    color: rgb(var(--accent-light-rgb));
    font-weight: 500;
    white-space: nowrap;
}

.import-page-match-confidence.low {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
}

.import-page-match-drop-zone {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.import-page-match-unmatch {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-page-match-unmatch:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
}

/* Unmatched file pool */
.import-page-unmatched-pool {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 16px;
}

.import-page-pool-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
    font-weight: 500;
}

.import-page-pool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.import-page-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    font-size: 12px;
    color: #ccc;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
}

.import-page-file-chip:active {
    cursor: grabbing;
}

.import-page-file-chip:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--accent-light-rgb), 0.3);
    color: #fff;
}

.import-page-file-chip.selected {
    background: rgba(var(--accent-light-rgb), 0.15);
    border-color: rgba(var(--accent-light-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

.import-page-pool-empty {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
}

/* Match footer */
.import-page-match-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.import-page-match-stats {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Buttons */
.import-page-process-btn {
    padding: 10px 24px;
    background: rgb(var(--accent-light-rgb));
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.import-page-process-btn:hover {
    background: #1fdf64;
}

.import-page-process-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}

.import-page-secondary-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.import-page-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.import-page-back-btn {
    padding: 8px 16px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.import-page-back-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Singles */
.import-page-singles-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.import-page-singles-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.import-page-singles-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.import-page-single-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    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;
}

.import-page-single-item.matched {
    border-color: rgba(var(--accent-light-rgb), 0.2);
}

.import-page-single-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.import-page-single-checkbox.checked {
    background: rgb(var(--accent-light-rgb));
    border-color: rgb(var(--accent-light-rgb));
}

.import-page-single-checkbox.checked::after {
    content: '✓';
    color: #000;
    font-size: 12px;
    font-weight: 700;
}

.import-page-single-info {
    min-width: 0;
}

.import-page-single-filename {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-page-single-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 2px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.import-page-single-matched-info {
    font-size: 12px;
    color: rgb(var(--accent-light-rgb));
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.import-page-single-matched-change {
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 11px;
    text-decoration: underline;
}

.import-page-single-matched-change:hover {
    color: #fff;
}

.import-page-single-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.import-page-identify-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #ccc;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.import-page-identify-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Inline search panel for singles */
.import-page-single-search-panel {
    grid-column: 1 / -1;
    padding: 12px 0 4px 44px;
}

.import-page-single-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.import-page-single-search-input {
    flex: 1;
    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;
    outline: none;
}

.import-page-single-search-input:focus {
    border-color: rgba(var(--accent-light-rgb), 0.4);
}

.import-page-single-search-go {
    padding: 8px 14px;
    background: rgb(var(--accent-light-rgb));
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.import-page-single-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.import-page-single-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.import-page-single-result-item:hover {
    background: rgba(var(--accent-light-rgb), 0.08);
    border-color: rgba(var(--accent-light-rgb), 0.25);
}

.import-page-single-result-img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.import-page-single-result-info {
    flex: 1;
    min-width: 0;
}

.import-page-single-result-name {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-page-single-result-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

.import-page-single-result-select {
    padding: 4px 12px;
    background: rgba(var(--accent-light-rgb), 0.15);
    border: 1px solid rgba(var(--accent-light-rgb), 0.3);
    border-radius: 6px;
    color: rgb(var(--accent-light-rgb));
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.import-page-single-result-select:hover {
    background: rgba(var(--accent-light-rgb), 0.25);
}

/* Empty state */
.import-page-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

/* Suggestions */
.import-page-suggestions {
    margin-bottom: 24px;
}

/* Processing Queue */
.import-page-queue {
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.import-page-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.import-page-queue-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.import-page-queue-clear {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 8px;
}

.import-page-queue-clear:hover {
    color: #fff;
}

.import-page-queue-list {
    display: flex;
    flex-direction: column;
}

.import-page-queue-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.import-page-queue-item:last-child {
    border-bottom: none;
}

.import-page-queue-art {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
}

.import-page-queue-info {
    min-width: 0;
}

.import-page-queue-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.import-page-queue-detail {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.import-page-queue-progress {
    width: 120px;
    flex-shrink: 0;
}

.import-page-queue-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}

.import-page-queue-fill {
    height: 100%;
    background: rgb(var(--accent-light-rgb));
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s ease;
}

.import-page-queue-fill.error {
    background: #ef4444;
}

.import-page-queue-status {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
}

.import-page-queue-status.done {
    color: rgb(var(--accent-light-rgb));
}

.import-page-queue-status.error {
    color: #ef4444;
}

/* ========================================
   END IMPORT PAGE
   ======================================== */

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

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

/* =====================================
   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 Management Panel */
.profile-manage-panel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.profile-manage-content {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px;
    width: 420px;
    max-height: 80vh;
    overflow-y: auto;
}

.profile-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-manage-header h3 {
    color: #e5e7eb;
    font-size: 18px;
    margin: 0;
}

.profile-manage-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 24px;
    cursor: pointer;
}

.profile-manage-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.profile-manage-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.profile-manage-item .profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 16px;
}

.profile-manage-item .profile-info {
    flex: 1;
}

.profile-manage-item .profile-info .name {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 500;
}

.profile-manage-item .profile-info .role {
    color: #6366f1;
    font-size: 11px;
    text-transform: uppercase;
}

.profile-manage-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.profile-manage-item .profile-edit-btn,
.profile-manage-item .profile-delete-btn {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.profile-manage-item .profile-edit-btn:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.profile-manage-item .profile-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 8px;
    margin-top: 4px;
}

.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: #e5e7eb;
    font-size: 14px;
    margin: 0 0 12px;
}

.profile-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 13px;
    color: #e5e7eb;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
}

.profile-input:focus {
    border-color: #6366f1;
}

.profile-input::placeholder {
    font-size: 12px;
}

.profile-color-picker {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

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

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

.profile-color-swatch.selected {
    border-color: #fff;
}

.profile-create-btn {
    width: 100%;
    padding: 10px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.profile-create-btn:hover {
    background: #4f46e5;
}

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

/* ===========================
   AUTOMATIONS PAGE
   =========================== */

.automations-container { padding: 20px 24px; }
.automations-list { display: flex; flex-direction: column; gap: 0; }

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

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

/* 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 {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.enhanced-bulk-btn.primary {
    background: rgb(var(--accent-rgb));
    color: #ffffff;
}
.enhanced-bulk-btn.primary:hover {
    background: rgb(var(--accent-light-rgb));
}
.enhanced-bulk-btn.secondary {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
.enhanced-bulk-btn.secondary:hover {
    background: rgba(255,255,255,0.15);
}
.enhanced-bulk-btn.clear {
    background: rgba(255, 65, 54, 0.1);
    color: #ff4136;
}
.enhanced-bulk-btn.clear:hover {
    background: rgba(255, 65, 54, 0.2);
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   DOWNLOAD DISCOGRAPHY — Button + Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.discog-download-wrap { margin: 12px 0 4px; }

.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;
    margin-top: 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: center; 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: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.discog-card-meta { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }

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

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

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

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

/* Queue button in enhanced track table */
.col-queue {
    width: 36px;
    text-align: center;
}
.enhanced-queue-btn {
    background: none;
    border: 1px solid rgba(29, 185, 84, 0.2);
    color: rgba(29, 185, 84, 0.5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.enhanced-queue-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);
}

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

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

.col-writetag {
    width: 36px;
    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;
}

/* ===== Issues Page ===== */

.issues-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 20px;
}

.issues-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.issues-header-left {
    flex: 1;
    min-width: 200px;
}

.issues-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.issues-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.issues-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.issues-filters {
    display: flex;
    gap: 8px;
}

.issues-filter-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23888'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    min-width: 130px;
}

.issues-filter-select:focus {
    border-color: rgba(var(--accent-light-rgb), 0.5);
}

.issues-filter-select option {
    background: #1a1a2e;
    color: #fff;
}

/* Issues Stats */

.issues-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.issues-stat-card {
    flex: 1;
    min-width: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
    transition: border-color 0.2s;
}

.issues-stat-number {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.issues-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.issues-stat-open { border-left: 3px solid #ffa500; }
.issues-stat-progress { border-left: 3px solid #4da6ff; }
.issues-stat-resolved { border-left: 3px solid #4ade80; }
.issues-stat-dismissed { border-left: 3px solid #888; }
.issues-stat-total { border-left: 3px solid rgba(var(--accent-light-rgb), 0.6); }

/* Issues List */

.issues-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issues-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.issues-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(var(--accent-light-rgb), 0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.issues-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.4);
}

.issues-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.issues-empty-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.issues-empty-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}

/* Issue Card */

.issue-card {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 14px;
}

.issue-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.issue-card-left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.issue-card-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
}

.issue-card-thumb-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.issue-card-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.issue-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.issue-card-category-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.issue-card-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-card-responded {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.7;
}

.issue-card-entity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.issue-card-entity-type {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.issue-card-entity-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-card-meta-line {
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-card-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 500px;
}

.issue-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.issue-card-profile {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}

.issue-card-date {
    opacity: 0.8;
}

.issue-card-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

/* Status Badges */

.issue-status-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.issue-status-open {
    background: rgba(255, 165, 0, 0.15);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.25);
}

.issue-status-progress {
    background: rgba(77, 166, 255, 0.15);
    color: #4da6ff;
    border: 1px solid rgba(77, 166, 255, 0.25);
}

.issue-status-resolved {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.issue-status-dismissed {
    background: rgba(136, 136, 136, 0.15);
    color: #888;
    border: 1px solid rgba(136, 136, 136, 0.25);
}

/* Priority Dots */

.issue-priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.issue-priority-low, .issue-priority-dot.issue-priority-low {
    background: #666;
}

.issue-priority-normal, .issue-priority-dot.issue-priority-normal {
    background: #4da6ff;
}

.issue-priority-high, .issue-priority-dot.issue-priority-high {
    background: #ff4d4d;
    box-shadow: 0 0 6px rgba(255, 77, 77, 0.4);
}

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

/* ===== Report Issue Modal ===== */

.report-issue-modal {
    max-width: 580px;
    width: 95vw;
}

.report-issue-entity-info {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.report-issue-entity-name {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.report-issue-entity-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 3px;
}

.report-issue-section {
    margin-bottom: 16px;
}

.report-issue-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.report-issue-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.3);
}

.report-issue-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.report-issue-category-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.report-issue-category-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.report-issue-category-card.selected {
    background: rgba(var(--accent-light-rgb), 0.1);
    border-color: rgba(var(--accent-light-rgb), 0.4);
}

.report-issue-category-icon {
    font-size: 22px;
    margin-bottom: 6px;
}

.report-issue-category-label {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 3px;
}

.report-issue-category-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
}

.report-issue-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.report-issue-input:focus {
    border-color: rgba(var(--accent-light-rgb), 0.5);
}

.report-issue-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.report-issue-textarea:focus {
    border-color: rgba(var(--accent-light-rgb), 0.5);
}

.report-issue-priority-row {
    display: flex;
    gap: 8px;
}

.report-issue-priority-btn {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.report-issue-priority-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.report-issue-priority-btn.selected {
    background: rgba(var(--accent-light-rgb), 0.12);
    border-color: rgba(var(--accent-light-rgb), 0.4);
    color: rgb(var(--accent-light-rgb));
}

/* ===== Issue Detail Modal ===== */

.issue-detail-modal {
    max-width: 750px;
    width: 95vw;
    max-height: 85vh;
}

.issue-detail-modal .enhanced-bulk-modal-body {
    overflow-y: auto;
    max-height: calc(85vh - 120px);
}

/* Issue Detail — Hero Section (Enhanced Library Style) */

.issue-hero {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 14px;
}

.issue-hero-art-group {
    position: relative;
    flex-shrink: 0;
}

.issue-hero-artist-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: -6px;
    left: -10px;
    border: 2px solid rgba(30, 30, 30, 0.9);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.issue-hero-album-art {
    width: 140px;
    height: 140px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.issue-hero-album-placeholder {
    width: 140px;
    height: 140px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.15);
}

.issue-hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.issue-hero-artist {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.issue-hero-album {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.issue-hero-track-name {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    margin-top: 2px;
}

.issue-hero-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.issue-hero-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.issue-hero-genre-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Issue Detail — Info Bar */

.issue-detail-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 14px;
}

.issue-detail-info-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.issue-detail-info-right {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

/* Issue Detail — Action Buttons */

.issue-action-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.issue-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-family: inherit;
}

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

.issue-action-download {
    background: rgba(var(--accent-light-rgb), 0.12);
    color: rgb(var(--accent-light-rgb));
    border-color: rgba(var(--accent-light-rgb), 0.25);
}

.issue-action-download:hover:not(:disabled) {
    background: rgba(var(--accent-light-rgb), 0.22);
    border-color: rgba(var(--accent-light-rgb), 0.4);
}

.issue-action-wishlist {
    background: rgba(255, 165, 0, 0.1);
    color: #ffa500;
    border-color: rgba(255, 165, 0, 0.2);
}

.issue-action-wishlist:hover:not(:disabled) {
    background: rgba(255, 165, 0, 0.2);
    border-color: rgba(255, 165, 0, 0.35);
}

/* Issue Detail — Track Duration */

.issue-detail-tracklist-dur {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
}


.issue-detail-section {
    margin-bottom: 16px;
}

.issue-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    font-weight: 500;
}

.issue-detail-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.issue-detail-category {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.issue-detail-date {
    color: rgba(255, 255, 255, 0.35);
}

.issue-detail-profile {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.issue-detail-title-text {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.issue-detail-description {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
    white-space: pre-wrap;
}

.issue-detail-no-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

/* Issue Detail — Snapshot */

.issue-detail-snapshot {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
}

.issue-detail-snapshot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.issue-detail-snapshot-row:last-child {
    border-bottom: none;
}

.issue-detail-snapshot-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    min-width: 70px;
}

.issue-detail-snapshot-value {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

.issue-detail-snapshot-tracklist-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 10px;
    margin-bottom: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.issue-detail-snapshot-track {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 0;
}

.issue-detail-snapshot-track-meta {
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin-left: 6px;
}


/* Issue Detail — Metadata Grid */

.issue-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.issue-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.issue-meta-icon {
    font-size: 14px;
    opacity: 0.5;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.issue-meta-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.issue-meta-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin-left: auto;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* Issue Detail — Album Context (for track issues) */

.issue-detail-album-context {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.issue-detail-album-context-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.issue-detail-album-context-info {
    flex: 1;
    min-width: 0;
}

.issue-detail-album-context-title {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-detail-album-context-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Issue Detail — File Path */

.issue-detail-filepath {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 10px;
    border-radius: 6px;
    font-family: monospace;
    word-break: break-all;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Issue Detail — Track Listing (redesigned) */

.issue-detail-tracklist {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 6px 0;
    max-height: 240px;
    overflow-y: auto;
}

.issue-detail-tracklist-disc {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.issue-detail-tracklist-disc:first-child {
    border-top: none;
    padding-top: 4px;
}

.issue-detail-tracklist-row {
    display: flex;
    align-items: center;
    padding: 4px 14px;
    gap: 10px;
    transition: background 0.15s;
}

.issue-detail-tracklist-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.issue-detail-tracklist-num {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
}

.issue-detail-tracklist-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issue-detail-tracklist-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}


.issue-detail-section-count {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

/* Issue Detail — External Links */

.issue-ext-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.issue-ext-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.issue-ext-chip-type {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.7;
}

.issue-ext-chip.ext-spotify {
    background: rgba(30, 215, 96, 0.1);
    color: #1ed760;
    border-color: rgba(30, 215, 96, 0.2);
}

.issue-ext-chip.ext-spotify:hover {
    background: rgba(30, 215, 96, 0.2);
}

.issue-ext-chip.ext-mb {
    background: rgba(186, 81, 163, 0.1);
    color: #d4a0cb;
    border-color: rgba(186, 81, 163, 0.2);
}

.issue-ext-chip.ext-mb:hover {
    background: rgba(186, 81, 163, 0.2);
}

.issue-ext-chip.ext-deezer {
    background: rgba(160, 54, 255, 0.1);
    color: #c88eff;
    border-color: rgba(160, 54, 255, 0.2);
}

.issue-ext-chip.ext-deezer:hover {
    background: rgba(160, 54, 255, 0.2);
}

.issue-ext-chip.ext-tidal {
    background: rgba(0, 255, 255, 0.08);
    color: #66ffff;
    border-color: rgba(0, 255, 255, 0.15);
}

.issue-ext-chip.ext-tidal:hover {
    background: rgba(0, 255, 255, 0.15);
}

.issue-ext-chip.ext-qobuz {
    background: rgba(0, 130, 200, 0.1);
    color: #5bb8e8;
    border-color: rgba(0, 130, 200, 0.2);
}

.issue-ext-chip.ext-qobuz:hover {
    background: rgba(0, 130, 200, 0.2);
}

/* Issue Detail — Responsive */

@media (max-width: 768px) {
    .issue-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .issue-hero-album-art,
    .issue-hero-album-placeholder {
        width: 120px;
        height: 120px;
    }

    .issue-hero-artist-thumb {
        width: 40px;
        height: 40px;
    }

    .issue-hero-info {
        align-items: center;
    }

    .issue-hero-genres {
        justify-content: center;
    }

    .issue-hero-album {
        font-size: 17px;
    }

    .issue-detail-info-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .issue-action-buttons {
        flex-direction: column;
    }

    .issue-action-btn {
        justify-content: center;
    }

    .issue-detail-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .issue-meta-value {
        max-width: 80px;
    }

    .issue-ext-chips {
        gap: 4px;
        justify-content: center;
    }

    .issue-ext-chip {
        font-size: 11px;
        padding: 3px 8px;
    }
}

/* Issue Detail — Admin Response */

.issue-detail-response-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.issue-detail-response-textarea:focus {
    border-color: rgba(var(--accent-light-rgb), 0.5);
}

.issue-detail-admin-response {
    background: rgba(74, 222, 128, 0.06);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Issue Detail — Footer Action Buttons */

.issue-btn-progress {
    background: rgba(77, 166, 255, 0.15) !important;
    border-color: rgba(77, 166, 255, 0.3) !important;
    color: #4da6ff !important;
}

.issue-btn-progress:hover {
    background: rgba(77, 166, 255, 0.25) !important;
}

.issue-btn-resolve {
    background: rgba(74, 222, 128, 0.15) !important;
    border-color: rgba(74, 222, 128, 0.3) !important;
    color: #4ade80 !important;
}

.issue-btn-resolve:hover {
    background: rgba(74, 222, 128, 0.25) !important;
}

.issue-btn-dismiss {
    background: rgba(136, 136, 136, 0.15) !important;
    border-color: rgba(136, 136, 136, 0.3) !important;
    color: #aaa !important;
}

.issue-btn-dismiss:hover {
    background: rgba(136, 136, 136, 0.25) !important;
}

.issue-btn-reopen {
    background: rgba(255, 165, 0, 0.15) !important;
    border-color: rgba(255, 165, 0, 0.3) !important;
    color: #ffa500 !important;
}

.issue-btn-reopen:hover {
    background: rgba(255, 165, 0, 0.25) !important;
}

.issue-btn-delete {
    background: rgba(255, 77, 77, 0.1) !important;
    border-color: rgba(255, 77, 77, 0.2) !important;
    color: #ff6b6b !important;
}

.issue-btn-delete:hover {
    background: rgba(255, 77, 77, 0.2) !important;
}

/* ===== Issues Page — Responsive ===== */

@media (max-width: 768px) {
    .issues-header {
        flex-direction: column;
    }

    .issues-stats {
        flex-wrap: wrap;
    }

    .issues-stat-card {
        min-width: 80px;
    }

    .issue-card {
        flex-wrap: wrap;
        padding: 12px;
    }

    .issue-card-left {
        display: none;
    }

    .issue-card-description {
        max-width: 100%;
    }

    .report-issue-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .issue-detail-header-info {
        flex-direction: column;
    }

    .issue-detail-snapshot-value {
        max-width: 200px;
    }
}

/* ============================================ */
/* == 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-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: flex;
    flex-direction: column;
    gap: 8px;
}

.repair-job-card {
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.repair-job-card:hover {
    background: rgba(28, 28, 28, 0.98);
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.repair-job-card.running {
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.35);
    box-shadow: 0 0 12px rgba(var(--accent-rgb, 99, 102, 241), 0.08),
                inset 0 0 20px rgba(var(--accent-rgb, 99, 102, 241), 0.03);
}

.repair-job-card.disabled {
    opacity: 0.55;
}
.repair-job-card.disabled:hover {
    opacity: 0.75;
}

.repair-job-main {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

/* Status dot — matches automation-status */
.repair-job-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.repair-job-status.enabled {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}
.repair-job-status.disabled {
    background: #555;
}
.repair-job-status.running {
    background: rgb(var(--accent-rgb, 99, 102, 241));
    box-shadow: 0 0 6px rgba(var(--accent-rgb, 99, 102, 241), 0.4);
    animation: repair-status-pulse 1.5s ease-in-out infinite;
}
@keyframes repair-status-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(var(--accent-rgb, 99, 102, 241), 0.4); }
    50% { opacity: 0.4; box-shadow: 0 0 2px rgba(var(--accent-rgb, 99, 102, 241), 0.2); }
}

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

.repair-job-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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;
}
.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: 4px;
    flex-shrink: 0;
}

/* 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: 6px 0;
    gap: 12px;
}

.repair-setting-row label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

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

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

/* ── 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 {
    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);
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.repair-bulk-btn.fix {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
    border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.3);
    color: rgb(var(--accent-light-rgb, 129, 140, 248));
    font-weight: 600;
}

.repair-bulk-btn.fix:hover {
    background: rgba(var(--accent-rgb, 99, 102, 241), 0.2);
}

.repair-bulk-btn.fix-all {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    font-weight: 600;
}
.repair-bulk-btn.fix-all:hover {
    background: rgba(245, 158, 11, 0.22);
}

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

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

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

/* ── 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; }
    /* 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 {
    padding: 24px 32px;
    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: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    min-width: 200px;
    max-width: 260px;
    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 {
    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;
}

.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-card-lock {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    opacity: 0.5;
}

.explorer-picker-card {
    position: relative;
}

.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 — segmented control */
.explorer-mode-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.explorer-mode-btn {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    z-index: 1;
    letter-spacing: 0.2px;
}

.explorer-mode-btn.active {
    color: #fff;
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.explorer-mode-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.65);
}

/* Explore button — primary CTA */
.explorer-build-btn {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

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

.explorer-build-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.35);
    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);
}

/* Action bar — sticky at top */
.explorer-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(18, 18, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
    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-nav-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    width: 100%;
    text-align: center;
    margin-top: 2px;
}

.explorer-selection-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

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

.explorer-action-btn {
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.2px;
}

.explorer-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
}

.explorer-action-btn.primary {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    padding: 8px 22px;
    font-size: 12px;
    position: relative;
    overflow: hidden;
}

.explorer-action-btn.primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    border-radius: inherit;
}

.explorer-action-btn.primary:hover {
    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.4);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* 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;
    max-width: 360px;
    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 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-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; }