/* GrooveFlow Design System & Styling */

:root {
    --bg-dark: #f5f2eb; /* Cream background */
    --panel-bg: rgba(255, 255, 255, 0.55); /* Frosted light mode panel */
    --panel-border: rgba(0, 0, 0, 0.06);
    --panel-border-glow: rgba(0, 0, 0, 0.12);
    --text-primary: #2b2b36; /* Dark charcoal text */
    --text-secondary: #6e6e7f;
    --text-muted: #9595a6;
    
    /* Active album dynamic theme (updated by JS) */
    --accent: #c68a4c; /* Slightly darker accent for readability on light bg */
    --accent-glow: rgba(198, 138, 76, 0.2);
    --accent-rgb: 198, 138, 76;

    /* Cover Flow layout size scale */
    --crate-card-size: 260px;
    
    /* Dynamic Player Scaling - Safe default, overridden by media queries */
    --deck-scale: min(1.2, calc(min(100vw - 40px, 100dvh - 300px) / 460));
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Jost', 'League Spartan', 'Futura', system-ui, -apple-system, sans-serif;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    /* iOS notch / Dynamic Island / Android safe-area support */
    padding-top: max(40px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* Ambient Drifting Background Glows */
.background-glows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.glow-1, .glow-2, .glow-3 {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.18; /* softer glows for light bg */
    transition: background 2s ease;
}

.glow-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: 10%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.4) 0%, rgba(255,255,255,0) 70%);
    animation: drift-1 25s infinite alternate ease-in-out;
}

.glow-2 {
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: 10%;
    background: radial-gradient(circle, rgba(100, 149, 237, 0.3) 0%, rgba(255,255,255,0) 70%);
    animation: drift-2 30s infinite alternate ease-in-out;
}

.glow-3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 45%;
    background: radial-gradient(circle, rgba(186, 85, 211, 0.2) 0%, rgba(255,255,255,0) 70%);
    animation: drift-3 20s infinite alternate ease-in-out;
}

@keyframes drift-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-80px, 100px) scale(1.2); }
}
@keyframes drift-2 {
    0% { transform: translate(0, 0) scale(1.1); }
    100% { transform: translate(100px, -100px) scale(0.9); }
}
@keyframes drift-3 {
    0% { transform: translate(0, 0) scale(0.8); }
    100% { transform: translate(-50px, -50px) scale(1.3); }
}

/* App Container Layout */
.app-container {
    width: 98%;
    max-width: 2200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
    box-sizing: border-box;
}

/* Header */
.app-header { z-index: 99999999 !important; position: relative !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; overflow: visible !important; width: 100%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo:hover {
    transform: scale(1.03);
}

.logo-text, .logo-circle-badge {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.logo-main-title {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.4rem !important;
    line-height: 0.9 !important;
    letter-spacing: 2px !important;
    background: linear-gradient(135deg, #ffffff 45%, #e2a567 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    filter: drop-shadow(0 2px 10px rgba(198, 138, 76, 0.45)) !important;
    transition: filter 0.3s ease !important;
}

.logo:hover .logo-main-title {
    filter: drop-shadow(0 2px 16px rgba(226, 165, 103, 0.75)) !important;
}

.logo-text h1 {
    font-size: 2.35rem;
    font-weight: 900;
    letter-spacing: -1.5px;
    line-height: 0.88;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    color: #16161f;
    margin: 0;
}

.logo-text-svg {
    stroke: var(--accent);
    filter: drop-shadow(0 0 10px var(--accent-glow));
    transition: stroke 0.8s ease, filter 0.8s ease;
}

.logo:hover .logo-text-svg {
    filter: drop-shadow(0 0 18px var(--accent));
}

.logo-text span {
    font-size: 0.62rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
    white-space: nowrap;
    font-family: 'Jost', 'Futura', sans-serif;
}

.header-controls { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex !important; flex-direction: row !important; 
    display: flex;
    align-items: center;
    gap: 16px;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 0;
    border: none;
}

.status-indicator {
    display: none;
}

.status-indicator.online {
    background-color: #34c759;
    color: #34c759;
}

.status-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Premium Switch Toggle */
.premium-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s, text-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.premium-label.active {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* HQ Audio Switch & Quality styling */
.hq-switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hq-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s, text-shadow 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hq-label.active {
    color: #00d2ff;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

input:checked + .slider-round.hq-slider {
    background-color: rgba(0, 210, 255, 0.15);
    border-color: #00d2ff;
}

input:checked + .slider-round.hq-slider:before {
    transform: translateX(20px);
    background-color: #00d2ff;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}

/* Format Badges */
.format-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: rgba(18, 18, 18, 0.4);
}

.format-badge.wav-format {
    border-color: #00d2ff;
    color: #00d2ff;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.3);
    background: rgba(0, 210, 255, 0.05);
}

.format-badge.mp3-format {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

.format-badge.synth-format {
    border-color: #9b59b6;
    color: #9b59b6;
    background: rgba(155, 89, 182, 0.05);
}


.crown-icon {
    font-size: 1rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid var(--panel-border);
    transition: .4s;
    border-radius: 0px;
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: .4s;
    border-radius: 0px;
}

input:checked + .slider-round {
    background-color: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
}

input:checked + .slider-round:before {
    transform: translateX(20px);
    background-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Glassmorphic Panels */
.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 24px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.glass-panel:hover {
    border-color: var(--panel-border-glow);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

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

.panel-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* 3D Cover Flow Carousel */
.carousel-section {
    min-height: 480px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-perspective: 1200px; perspective: 1200px;
    overflow: visible;
    position: relative;
    padding: 20px 0;
}

.cover-flow-container {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}

/* Cover Flow Card Item */
.flow-card {
    position: absolute;
    width: var(--crate-card-size, 280px);
    height: var(--crate-card-size, 280px);
    left: 50%;
    top: 50%;
    margin-left: calc(-0.5 * var(--crate-card-size, 280px));
    margin-top: calc(-0.5 * var(--crate-card-size, 280px));
    cursor: pointer;
    -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s, left 0.6s;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-box-reflect: below 6px linear-gradient(transparent 50%, rgba(0, 0, 0, 0.18));
}

/* Vinyl Sleeve Cover Art */
.flow-card .sleeve {
    z-index: 999 !important;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    background: #222;
    z-index: 3;
    transition: box-shadow 0.5s ease;
}

.flow-card .sleeve img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vinyl Disc inside the Card */
.flow-card .vinyl-disc {
    position: absolute;
    width: calc(var(--crate-card-size, 280px) - 10px);
    height: calc(var(--crate-card-size, 280px) - 10px);
    border-radius: 50%;
    background: 
        /* Glossy reflection sweep */
        conic-gradient(from 45deg, 
            #0a0a0a 0deg, 
            #222 45deg, 
            #0a0a0a 90deg, 
            #0a0a0a 180deg, 
            #333 225deg, 
            #0a0a0a 270deg, 
            #0a0a0a 360deg),
        #050505;
    box-shadow: inset 0 0 0 3px #111, inset 0 0 10px rgba(255,255,255,0.05), 0 5px 15px rgba(0,0,0,0.5);
    top: 5px;
    left: 5px;
    z-index: 2;
    transform: translateX(0) rotate(0deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, z-index 0.6s; /* No delay when retracting */
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
    -webkit-backface-visibility: visible; backface-visibility: visible;
    touch-action: none;
}

/* cover spiral canvas style */
.flow-card .vinyl-disc canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

/* Center vinyl groove texture */
.flow-card .vinyl-disc::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle,
        #000 0px,
        #1a1a1a 1px,
        #000 2px,
        #111 3px,
        transparent 4px,
        transparent 6px
    );
    opacity: 0.8;
    pointer-events: none;
}

/* Label on the vinyl in cover flow */
.flow-card .vinyl-disc .label {
    width: 32%;
    height: 32%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #111;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}

/* Spindle Hole inside the Label */
.flow-card .vinyl-disc .label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px; /* Standard spindle hole size */
    height: 8px;
    transform: translate(-50%, -50%);
    background: #000; /* Looks right through to the dark platter/spindle */
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.1);
    z-index: 10;
}

.flow-card .vinyl-disc .label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Album Label Text under the Card */
.flow-card .card-info {
    position: absolute;
    top: calc(var(--crate-card-size, 280px) + 16px);
    left: 50%;
    transform: translateX(-50%);
    width: min(540px, 94vw);
    min-width: 360px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 100;
}

.flow-card.active .card-info {
    pointer-events: auto;
    opacity: 1;
}

.flow-card .card-info h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.flow-card .card-info p {
    font-size: 0.84rem;
    color: var(--accent, #e2a567);
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: 0.3px;
}

/* Card Title Row with inline expand toggle */
.card-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.btn-details-toggle {
    background: rgba(226, 165, 103, 0.15);
    border: 1px solid rgba(226, 165, 103, 0.4);
    color: var(--accent, #e2a567);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.2s ease;
    outline: none;
    flex-shrink: 0;
}

.btn-details-toggle:hover {
    background: var(--accent, #e2a567);
    border-color: var(--accent, #e2a567);
    color: #111;
    transform: scale(1.12);
}

/* Glassmorphic Collapsible Details Panel */
.card-details-expanded {
    max-height: 0;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    background: rgba(14, 10, 14, 0.96);
    border-radius: 4px ;
    border: 1px solid rgba(226, 165, 103, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    padding: 0 14px;
    margin: 0;
    text-align: left;
    font-size: 0.85rem;
}

.card-details-expanded.show {
    max-height: 480px;
    opacity: 1;
    padding: 16px 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow-y: auto;
}

/* Custom thin scrollbar for expanded details panel */
.card-details-expanded::-webkit-scrollbar {
    width: 5px;
}

.card-details-expanded::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.card-details-expanded::-webkit-scrollbar-thumb {
    background: var(--accent, #e2a567);
    border-radius: 3px;
}

/* Mini tracks list inside details panel */
.side-title-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent, #e2a567);
    margin: 12px 0 6px 0;
    border-bottom: 1px solid rgba(226, 165, 103, 0.25);
    padding-bottom: 3px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.side-tracks-mini-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-track-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px ;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 12px;
    user-select: none;
    box-sizing: border-box;
}

.side-track-mini-item:hover {
    background: rgba(226, 165, 103, 0.22);
    border-color: rgba(226, 165, 103, 0.55);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mini-track-num {
    color: var(--accent, #e2a567);
    font-weight: 800;
    font-size: 0.85rem;
    width: 22px;
    flex-shrink: 0;
    text-align: left;
}

.mini-track-title {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #f0f0f5;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
}

.mini-track-duration {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.btn-mini-enqueue {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--accent, #e2a567);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
}

.btn-mini-enqueue:hover {
    background: var(--accent, #e2a567);
    color: #111;
    border-color: var(--accent, #e2a567);
    transform: scale(1.12);
    opacity: 1;
    box-shadow: 0 0 10px rgba(226, 165, 103, 0.5);
}

.side-track-mini-item:hover .btn-mini-enqueue {
    opacity: 1;
}

.enqueue-album-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.enqueue-album-btn:hover {
    background: rgba(226, 165, 103, 0.2) !important;
    border-color: var(--accent, #e2a567) !important;
    color: var(--accent, #e2a567) !important;
    transform: translateY(-1px);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.details-item {
    color: #ffffff;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.details-item strong {
    color: var(--accent, #e2a567);
    font-weight: 700;
    margin-right: 4px;
}

.sides-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.side-detail-row {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.74rem;
}

/* Cookie Consent Banner Backdrop & Overlay */
.cookie-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 0 30px 0;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.cookie-banner.show {
    opacity: 1;
    pointer-events: auto;
}

/* Light/Bright Styled Cookie Card */
.cookie-banner-content {
    background: #ffffff;
    color: #1f2937;
    width: calc(100% - 40px);
    max-width: 680px;
    border-radius: 6px ;
    padding: 20px 24px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateY(100px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.cookie-banner.show .cookie-banner-content {
    transform: translateY(0);
}

.cookie-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
}

.cookie-text-container {
    flex-grow: 1;
}

.cookie-text-container h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.cookie-text-container p {
    margin: 0;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.4;
}

.cookie-actions {
    flex-shrink: 0;
}

/* Premium Dark Button on Bright Cookie Card */
.cookie-banner-content #acceptCookiesBtn {
    background: #111827;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cookie-banner-content #acceptCookiesBtn:hover {
    background: #1f2937;
    transform: translateY(-1px);
}

.cookie-banner-content #acceptCookiesBtn:active {
    transform: translateY(0);
}

@media (max-width: 600px) {
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 24px 20px;
    }
    .cookie-actions {
        width: 100%;
        margin-top: 10px;
    }
    .cookie-banner-content #acceptCookiesBtn {
        width: 100%;
        justify-content: center;
    }
}

/* Card Flow 3D Positioning States */
.flow-card.active {
    opacity: 1;
    z-index: 10;
    cursor: grab;
}

.flow-card.active:active {
    cursor: grabbing;
}

.flow-card.active .card-info {
    opacity: 1;
    transform: translateY(0) ;
    pointer-events: auto;
}

/* Slide vinyl out when active and hovered, or when marked as slid-out */
.flow-card.active:hover .vinyl-disc,
.flow-card.active.slid-out .vinyl-disc {
    transform: translateX(45%) rotate(45deg);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease cubic-bezier(0.25, 0.8, 0.25, 1) 0.35s; /* Delay of 0.35s before sliding out */
    z-index: 1;
    pointer-events: auto;
}

.flow-card.active .sleeve {
    box-shadow: 0 15px 35px var(--accent-glow), 0 5px 15px rgba(0,0,0,0.5);
}

.flow-card.left-side {
    opacity: 0.6;
    z-index: 5;
}

.flow-card.right-side {
    opacity: 0.6;
    z-index: 5;
}

/* Reflection Effect for active cover flow */
.flow-card .sleeve::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}

/* Main Layout Stack - 3 Equal Columns Side-by-Side */
.main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.main-layout > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#coverFlowDrawer,
.inline-crate-section {
    grid-column: 1 / 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.player-column {
    grid-column: 2 / 3;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.details-column {
    grid-column: 3 / 4;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}


/* Turntable Player Section */
.deck-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.deck-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    height: auto; min-height: calc(460px * var(--deck-scale)); flex-direction: column; align-items: center;
}

/* Turntable Plinth */
#vinyl-deck {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    width: 540px;
    height: 460px;
    background: #e2dcd0; /* Wood/metallic light plinth */
    border-radius: 6px;
    position: relative;
    box-shadow: 
        inset 0 2px 5px rgba(255,255,255,0.6),
        0 15px 35px rgba(0,0,0,0.12),
        0 0 0 1px rgba(0,0,0,0.04);
    border: 8px solid #bab4a6;
    margin: 0 auto;
    overflow: visible;
    flex-shrink: 0;
    transition: border-color 0.3s, box-shadow 0.3s;
    transform: scale(var(--deck-scale));
    transform-origin: center top;
}

#vinyl-deck.drag-hover {
    border-color: var(--accent);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.5), 0 15px 35px rgba(0,0,0,0.12);
}

/* Premium Brand Badge on Plinth */
.deck-brand-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    margin: 0;
    z-index: 5;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
    user-select: none;
}

.deck-brand-sub {
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    color: #6e6e7f !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
}

.deck-brand-name {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #16161f 35%, var(--accent, #c68a4c) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #16161f !important;
    letter-spacing: -0.8px !important;
    line-height: 0.88 !important;
    text-transform: uppercase !important;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
    filter: none !important;
}

/* Circular metallic platter */
#platter {
    transform: translateZ(0px) !important;
    z-index: 1 !important;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #f0f0f5 20%, #d5d5df 50%, #b8b8c3 70%);
    flex-shrink: 0;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

/* Platter Dot Stroboscope (outer edge details) */
#platter::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px dashed #a0a0af;
    opacity: 0.5;
}

/* Spindle Pin on the Turntable */
#turntable-spindle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    background: radial-gradient(circle at 30% 30%, #eee 0%, #aaa 40%, #222 100%);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 -2px 5px rgba(0,0,0,0.5);
    z-index: 100;
    pointer-events: none;
}

#record-flip-wrapper {
    transform: translateZ(1px);
    width: 100%;
    height: 100%;
    z-index: 2 !important;
    position: absolute;
    top: 0;
    left: 0;
    /* transform-style removed to fix canvas freeze */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    -webkit-backface-visibility: visible; backface-visibility: visible;
}

#record-flip-wrapper.side-b {
    transform: rotateY(180deg);
}

#record-flip-wrapper.side-b #label-artwork {
    transform: rotateY(180deg);
}

/* 3D Flip Animations */
@keyframes flipToSideB {
    0% { transform: scale(1) translateY(0) rotateY(0deg); }
    30% { transform: scale(1.15) translateY(-30px) rotateY(90deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
    70% { transform: scale(1.15) translateY(-30px) rotateY(180deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
    100% { transform: scale(1) translateY(0) rotateY(180deg); filter: none; }
}

@keyframes flipToSideA {
    0% { transform: scale(1) translateY(0) rotateY(180deg); }
    30% { transform: scale(1.15) translateY(-30px) rotateY(90deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
    70% { transform: scale(1.15) translateY(-30px) rotateY(0deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
    100% { transform: scale(1) translateY(0) rotateY(0deg); filter: none; }
}

#record-flip-wrapper.animating-to-b {
    animation: flipToSideB 3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    transition: none !important;
}

#record-flip-wrapper.animating-to-a {
    animation: flipToSideA 3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    transition: none !important;
}

/* Interactive Drag and Flip */
#record-flip-wrapper {
    cursor: grab;
}
#record-flip-wrapper.record-held {
    transform: scale(1.1) translateY(-20px);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease !important;
    cursor: grabbing !important;
    z-index: 9999999 !important;
}
#record-flip-wrapper.side-b.record-held {
    transform: scale(1.1) translateY(-20px) rotateY(180deg);
}

@keyframes playBtnHintPulse {
    0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.8); transform: scale(1); }
    50% { box-shadow: 0 0 0 15px rgba(167, 139, 250, 0); transform: scale(1.1); border-color: var(--accent); }
    100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); transform: scale(1); }
}

.play-hint-pulse {
    animation: playBtnHintPulse 1s ease-out 3;
}

/* Platter Dot Stroboscope (outer edge details) */
#platter::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px dashed #a0a0af;
    opacity: 0.5;
}

/* Vinyl Record Body */
#record-body {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: #0d0d0f; /* Black vinyl */
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0,0,0,0.35);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(0deg);
}

#record-body.spinning {
    animation: rotate 1.2s linear infinite;
}

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

@keyframes record-flash-animation {
    0% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
        filter: brightness(1);
    }
    15% {
        box-shadow: 0 4px 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.6);
        filter: brightness(1.6);
    }
    30% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
        filter: brightness(1);
    }
    45% {
        box-shadow: 0 4px 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.6);
        filter: brightness(1.6);
    }
    60% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
        filter: brightness(1);
    }
    75% {
        box-shadow: 0 4px 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.6);
        filter: brightness(1.6);
    }
    100% {
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
        filter: brightness(1);
    }
}

.record-flash {
    animation: record-flash-animation 1.5s ease-in-out;
}

/* Canvas Record faces (Side A & B) */
.record-canvas-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    border-radius: 50%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    pointer-events: none;
}
.record-canvas-face.back {
    transform: rotateY(180deg);
}

/* Vinyl Sheen Overlay */
#record-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: conic-gradient(
        from 0deg,
        transparent 15%,
        rgba(255,255,255,0.06) 25%,
        transparent 35%,
        transparent 65%,
        rgba(255,255,255,0.06) 75%,
        transparent 85%
    );
    pointer-events: none;
}

/* Center artwork label */
#record-label {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    z-index: 3;
    background: #000;
    border: 5px solid #0d0d0f;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    overflow: hidden;
}

#label-artwork {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 1.5s ease-in-out;
}

#record-body.off #label-artwork {
    opacity: 0;
}

#label-center {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #dcd8cd;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 2px rgba(255,255,255,0.4);
    border: 2px solid #555;
}

/* Tonearm Base & Needle Arm */
#tonearm-base {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    width: 60px !important;
    height: 60px !important;
    background: radial-gradient(circle, #f0f0f5 25%, #c8c8d2 60%, #888894 100%) !important;
    border-radius: 50% !important;
    border: 3px solid #5a5a66 !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), inset 0 2px 4px rgba(255,255,255,0.8) !important;
    z-index: 1000 !important;
    transform: translateZ(50px) !important;
}

.tonearm-pivot-ring {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #2a2a35 0%, #15151c 100%) !important;
    border: 2px solid var(--accent, #c68a4c) !important;
    box-shadow: 0 0 8px rgba(198,138,76,0.5) !important;
}

#tonearm-rest {
    position: absolute !important;
    top: 135px !important;
    right: 38px !important;
    width: 14px !important;
    height: 26px !important;
    background: linear-gradient(to right, #333, #555, #222) !important;
    border-radius: 3px 3px 6px 6px !important;
    border: 1px solid #777 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
    z-index: 900 !important;
    transform: translateZ(30px) !important;
}

#tonearm-rest::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -2px !important;
    width: 18px !important;
    height: 6px !important;
    background: #222 !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

#needle {
    position: absolute !important;
    top: 52px !important;
    right: 52px !important;
    width: 20px !important;
    height: 260px !important;
    z-index: 1005 !important;
    transform-origin: 10px 4px !important;
    transform: translate3d(0, 0, 120px) rotate(-5deg);
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    will-change: transform !important;
    cursor: grab !important;
    display: block !important;
}

#needle::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -20px !important;
    width: 60px !important;
    height: 100% !important;
    cursor: grab !important;
}

#needle:active,
#needle:active::after {
    cursor: grabbing !important;
}

#needle.lifted {
    filter: drop-shadow(10px 10px 12px rgba(0,0,0,0.5)) !important;
}

.needle-arm {
    width: 6px !important;
    height: 225px !important;
    background: linear-gradient(to right, #ffffff 0%, #e0e0e6 40%, #9a9a9f 100%) !important;
    border-radius: 3px !important;
    margin: 0 auto !important;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.3) !important;
    position: relative !important;
    z-index: 1006 !important;
    will-change: transform, height !important;
}

.needle-head {
    width: 18px !important;
    height: 38px !important;
    background: linear-gradient(135deg, #2d2d38 0%, #1a1a22 100%) !important;
    border: 1px solid #7a7a85 !important;
    border-radius: 2px 2px 6px 6px !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 1px !important;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.4) !important;
    z-index: 1007 !important;
}

.needle-head::before {
    content: '' !important;
    position: absolute !important;
    top: 4px !important;
    left: 3px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--accent, #c68a4c) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px rgba(198,138,76,0.6) !important;
}

.stylus-tip {
    position: absolute !important;
    bottom: -4px !important;
    left: 7px !important;
    width: 4px !important;
    height: 6px !important;
    background: #fff !important;
    border-radius: 0 0 2px 2px !important;
    box-shadow: 0 0 4px #fff, 0 2px 4px rgba(0,0,0,0.5) !important;
}


/* Active playback track info display */
.now-playing {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(14, 14, 18, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(226, 165, 103, 0.3) !important;
    padding: 12px 24px 14px 24px !important;
    margin-top: auto !important;
    position: relative !important;
    z-index: 150 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8) !important;
}

.now-playing-header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.track-details {
    text-align: center;
    min-width: 0;
}

.track-details h2,
#current-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important;
}

.track-details p,
#current-artist {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--accent, #e2a567) !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
}

/* Progress bar container */
.time-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffffff !important;
}

#time-current,
#time-total {
    color: #ffffff !important;
    font-variant-numeric: tabular-nums;
    min-width: 35px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.progress-bar-wrapper {
    flex-grow: 1;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

#progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    border-radius: 3px;
    z-index: 2;
    transition: background-color 1s ease, box-shadow 1s ease;
}

#progress-buffer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    z-index: 1;
}

/* Controls Panel */
.controls-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin-top: 20px; margin-bottom: 15px;
}

.control-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.control-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.control-btn:active {
    transform: translateY(0);
}

.control-btn.primary {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #111;
    border: none;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.control-btn.primary svg {
    width: 24px;
    height: 24px;
}

.control-btn.primary:hover {
    background: #f0be8c;
    transform: translateY(-2px) scale(1.04);
}

.control-btn.secondary {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.control-btn.icon-only {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.control-btn.icon-only:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
}

.control-btn.active-state {
    color: var(--accent) !important;
    background: rgba(226, 165, 103, 0.18) !important;
    box-shadow: 0 0 10px var(--accent-glow) !important;
    border-radius: 50% !important;
}

.control-btn.repeat-one svg text {
    fill: var(--accent) !important;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-weight: 900;
}

/* Volume Slider */
.volume-slider-container {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.slider {
    -webkit-appearance: none;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    outline: none;
    transition: width 0.3s ease;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    transition: background-color 0.2s;
}

.slider::-webkit-slider-thumb:hover {
    background: var(--accent);
}

.volume-slider-container:hover .slider {
    width: 90px;
}

/* Crate Scale Slider */
.crate-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.08);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.crate-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-secondary);
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
    transition: background-color 0.2s, transform 0.1s;
}

.crate-slider::-webkit-slider-thumb:hover {
    background: var(--accent);
    transform: scale(1.2);
}

/* Sidebar Tab System */
.queue-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 485px;
    max-height: 485px;
}

.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 15px;
    gap: 16px;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
    position: relative;
    transition: color 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent);
    transition: color 1s ease;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent);
    transition: background-color 1s ease;
}

.tab-content {
    display: none;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
}

.panel-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-text {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.btn-text:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.queue-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 4px;
}

/* Queue List styling */
#queue-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#queue-list li {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px ;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

#queue-list li:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

#queue-list li.playing {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
}

.queue-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 75%;
}

.queue-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

.queue-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.queue-details h4 {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-details span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.queue-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.queue-duration {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.remove-queue-item {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s;
}

#queue-list li:hover .remove-queue-item {
    opacity: 1;
}

.remove-queue-item:hover {
    color: #ff453a;
    background: rgba(255,69,58,0.1);
}

.remove-queue-item svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.queue-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 40px 20px;
    line-height: 1.5;
    border: 1px dashed rgba(255,255,255,0.06);
    border-radius: 6px ;
    background: transparent !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* Playlist Creator & List styling */
.playlist-creator {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.playlist-creator input {
    flex-grow: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 4px ;
    padding: 8px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s;
}

.playlist-creator input:focus {
    border-color: var(--accent);
}

.playlist-creator button.small {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 4px ;
}

#playlists-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playlist-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 4px ;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.playlist-item:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}

.playlist-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 80%;
}

.playlist-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 1s ease, color 1s ease;
    flex-shrink: 0;
}

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

.playlist-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.playlist-details h4 {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-details span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.delete-playlist-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s;
}

.playlist-item:hover .delete-playlist-btn {
    opacity: 1;
}

.delete-playlist-btn:hover {
    color: #ff453a;
    background: rgba(255,69,58,0.1);
}

.delete-playlist-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Playlist Add Dropdown Menu */
.playlist-dropdown-menu {
    position: absolute;
    background: #181824;
    border: 1px solid var(--panel-border-glow);
    border-radius: 4px ;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 100;
    padding: 6px 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
}

.playlist-dropdown-header {
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 4px;
}

.playlist-dropdown-item {
    padding: 8px 14px;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    width: 100%;
    transition: background-color 0.2s, color 0.2s;
}

.playlist-dropdown-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--accent);
}

/* Equalizer Bars Animation */
.eq-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 12px;
    height: 12px;
}

.eq-bar {
    width: 2px;
    background-color: var(--accent);
    border-radius: 1px;
    animation: bounce 0.8s ease-in-out infinite alternate;
    transform-origin: bottom;
    transition: background-color 1s ease;
}

.eq-bar:nth-child(1) { height: 100%; animation-delay: -0.3s; }
.eq-bar:nth-child(2) { height: 60%; animation-delay: -0.1s; }
.eq-bar:nth-child(3) { height: 80%; animation-delay: -0.5s; }

@keyframes bounce {
    0% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}

/* Track List Section styling */
.tracklist-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.album-info-summary h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.meta-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}

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

.btn-primary-action {
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary-action:hover {
    background: var(--accent);
    color: #111;
    border-color: transparent;
    box-shadow: 0 4px 10px var(--accent-glow);
}

.btn-secondary-action {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-action:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.nav-link {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 12px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-link.active {
    color: var(--accent);
    font-weight: 700;
}

.btn-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Side A/B Selector segment */
.side-selector-container {
    display: flex;
    align-items: center;
}

.segment-control {
    display: flex;
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    padding: 2px;
    border-radius: 4px;
    user-select: none;
    width: 180px;
}

.segment-control input {
    display: none;
}

.segment-control label {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}

.segment-control input:checked + label {
    color: #111;
}

.segment-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 2px);
    height: calc(100% - 4px);
    background: var(--accent);
    border-radius: 4px;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 1s ease;
}

#sideB-radio:checked ~ .segment-slider {
    transform: translateX(100%);
}

/* Table Stylings */
.tracklist-table-container {
    overflow-x: auto;
}

.tracklist-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
}

.tracklist-table th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border);
}

.tracklist-table td {
    padding: 12px 16px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}

.tracklist-table tbody tr {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.2s;
}

.tracklist-table tbody tr:hover {
    background-color: rgba(0,0,0,0.015);
}

.tracklist-table tbody tr.active-row {
    background-color: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
}

/* Locked states (Free Mode) */
.tracklist-table tr.locked-row .col-title {
    opacity: 0.8;
}

.tracklist-table tr.locked-row .col-title::after {
    content: '\1F512  Premium';
    font-size: 0.75rem;
    margin-left: 8px;
    opacity: 0.55;
}

.col-num {
    width: 45px;
    color: var(--text-muted);
    font-weight: 500;
}

.col-title {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-row .col-title {
    color: var(--accent);
}

.col-genre {
    color: var(--text-secondary);
    width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-duration {
    color: var(--text-secondary);
    width: 70px;
    text-align: right;
}

.col-actions {
    width: 180px;
    text-align: right;
}

.table-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 30px !important;
}

/* Row Action Buttons */
.row-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.row-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.row-btn:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
}

.row-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.row-btn:hover.play-row-btn {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

/* Premium Lock Dialog Modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999999;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active,
.modal-overlay.open {
    display: flex !important;
}

.modal-content {
    width: 90%;
    max-width: 400px;
    background: #fdfcf8;
    border: 1px solid rgba(198, 138, 76, 0.3);
    border-radius: 4px ;
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    transform: translateY(20px);
    animation: slideUp 0.3s forwards;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.modal-header h3 {
    font-size: 1.25rem;
    color: var(--accent);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

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

.modal-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes slideUp {
    to { transform: translateY(0); }
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Prevent Text Selection on Interactive Elements */
.control-btn,
.tab-btn,
.btn-primary-action,
.btn-secondary-action,
.row-btn,
#queue-list li,
.segment-control label {
    user-select: none;
    -webkit-user-select: none;
}

/* Now Playing Sleeve Badge */
.playing-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px var(--accent-glow);
    z-index: 5;
    animation: badge-pulse 1.5s infinite alternate ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

.vinyl-disc.is-dragging { z-index: 2147483647 !important; pointer-events: none; opacity: 0.9; cursor: grabbing !important; }

.deck-drag-over {
    box-shadow: 0 0 30px 10px rgba(167, 139, 250, 0.4) !important;
    border-radius: 50% !important;
    transform: scale(1.02) !important;
    transition: all 0.2s ease !important;
}

@keyframes badge-pulse {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.1); opacity: 1; box-shadow: 0 4px 15px var(--accent-glow); }
}

/* Small Equalizer inside table rows */
.eq-bars.small-eq {
    width: 14px;
    height: 12px;
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
}
.eq-bars.small-eq .eq-bar {
    width: 2.5px;
    border-radius: 0.5px;
}

/* Context Warning Banner for browsing another album */
.view-alert-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px dashed rgba(var(--accent-rgb), 0.3);
    border-radius: 6px ;
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-primary);
    animation: bannerFadeIn 0.3s ease-out;
}

.view-alert-banner span {
    font-weight: 500;
}

.view-alert-banner .btn-primary-action {
    padding: 4px 12px;
    font-size: 0.75rem;
    border-radius: 6px ;
}

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

/* Sortable Table Headers */
.sortable-header {
    cursor: pointer;
    transition: color 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.sortable-header:hover {
    color: var(--accent);
}

.sort-icon {
    font-size: 0.7rem;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* Cover Flow 3D Flip state for Side B */
.flow-card .vinyl-disc.side-b {
    transform: translateX(0) rotateY(180deg) rotate(0deg);
}

/* Mobile FAB Container & Quick Menu */
.mobile-fab-container {
    display: none !important;
}

.flow-card.active:hover .vinyl-disc.side-b,
.flow-card.active.slid-out .vinyl-disc.side-b {
    transform: translateX(45%) rotateY(180deg) rotate(-45deg);
    pointer-events: auto;
}

.flow-card .vinyl-disc.side-b .label img {
    transform: rotateY(180deg);
}

/* Cover Flow Card Side Buttons */
.card-side-control {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 4px ;
    padding: 3px 4px;
    margin-top: 8px;
    margin-bottom: 8px;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}

.card-side-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px ;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-side-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.card-side-btn.active {
    background: var(--accent);
    color: #111;
    font-weight: 800;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.flow-card .vinyl-disc .label {
    z-index: 2; /* keep label above canvas grooves */
}

/* Stacking column for right side elements */
.details-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Drawer overlay covering viewport */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(8, 8, 10, 0.88);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.drawer-content {
    width: 92vw;
    height: 82vh;
    max-width: 1600px;
    background: rgba(22, 22, 28, 0.75);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px ;
    padding: 32px 50px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
    position: relative;
    box-sizing: border-box;
    max-height: 95vh;
    overflow-y: auto;
}

.drawer-overlay.active .drawer-content {
    transform: scale(1);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
    transition: opacity 0.3s ease;
}

.drawer-header h3 {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.drawer-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0 8px;
    transition: color 0.2s, transform 0.2s;
}

.drawer-header .close-btn:hover {
    color: var(--accent);
    transform: scale(1.1);
}

/* Translucent mode for Drag & Drop visibility */
.drawer-overlay.dragging-active,
.inline-crate-section.dragging-active,
#coverFlowDrawer.dragging-active {
    pointer-events: none !important;
    opacity: 1 !important;
    transform: scale(0.96) translateY(20px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

#coverFlowDrawer.dragging-active .drawer-header,
#coverFlowDrawer.dragging-active .card-info,
#coverFlowDrawer.dragging-active .sleeve,
#coverFlowDrawer.dragging-active .flow-card:not(.card-being-dragged) {
    opacity: 0.05 !important;
    transition: opacity 0.3s ease !important;
}

/* Now Playing Cover Zoom Thumbnail */
.now-playing-header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.track-cover-thumbnail {
    width: 48px;
    height: 48px;
    border-radius: 4px ;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: 1px solid var(--panel-border);
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.track-cover-thumbnail:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.track-cover-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-zoom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.track-cover-thumbnail:hover .thumb-zoom-overlay {
    opacity: 1;
}

/* Draggable, Resizable Floating Album Steckbrief Window */
.floating-window-overlay {
    display: none;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    justify-content: center;
    align-items: center;
}

.floating-window-overlay.active,
.floating-window-overlay.open {
    display: flex !important;
}

.floating-window-content {
    background: var(--panel-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--panel-border);
    border-radius: 4px ;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    width: 680px;
    height: 620px;
    min-width: 450px;
    min-height: 400px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    resize: both; /* Allow resizing */
    pointer-events: auto; /* Handle clicks on the window itself */
    position: absolute !important;
    animation: coverPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

/* Header Drag Bar */
.floating-window-header {
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid var(--panel-border);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.floating-window-header:active {
    cursor: grabbing;
}

.window-title-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    letter-spacing: 0.2px;
}

.window-title-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.win-btn {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s, transform 0.1s;
    outline: none;
}

.win-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.05);
}

.close-btn-x {
    font-size: 1.4rem !important;
    font-weight: 300;
    line-height: 1;
}

/* Window Body */
.floating-window-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
    min-height: 0; /* Enable flex container shrinking for vertical scrolling */
}

.large-cover-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    border-radius: 4px ;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    background: #111;
    transition: width 0.2s, height 0.2s;
    flex-shrink: 0;
}

#large-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.large-cover-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.large-cover-caption {
    text-align: center;
    color: var(--text-primary);
}

.large-cover-caption h3 {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

.large-cover-caption p {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Profile details: checklist left, lyrics right */
.profile-details-section {
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
    margin-top: 15px;
    border-top: 1px solid var(--panel-border);
    padding-top: 20px;
    text-align: left;
    box-sizing: border-box;
}

.profile-tracks-panel, .profile-lyrics-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-tracks-panel h4, .profile-lyrics-panel h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 4px 0;
}

.checklist-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.profile-checklist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 4px ;
    background: rgba(0,0,0,0.01);
    border: 1px solid rgba(0,0,0,0.02);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}

.profile-checklist-item:hover {
    background: rgba(0,0,0,0.04);
}

.profile-checklist-item input[type="checkbox"] {
    cursor: pointer;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.profile-checklist-item.active-track {
    border-color: var(--accent);
    background: rgba(226, 165, 103, 0.08);
}

/* Lyrics box styling */
.lyrics-container-box {
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid var(--panel-border);
    border-radius: 6px ;
    padding: 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap; /* Preserve linebreaks */
    max-height: 280px;
    overflow-y: auto;
    font-style: italic;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    box-sizing: border-box;
}

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

/* News/Blog styles */
.news-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    max-height: 390px;
    padding-right: 5px;
    scrollbar-width: thin;
}

.news-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 6px ;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s, background 0.2s;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.news-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.news-album-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px ;
    padding: 10px;
    margin-top: 20px; margin-bottom: 15px;
    border: 1px solid rgba(255,255,255,0.02);
}

.news-album-cover {
    width: 48px;
    height: 48px;
    border-radius: 4px ;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.news-album-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.news-album-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.news-album-artist {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Library Tab Styles */
#library-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 390px;
    scrollbar-width: thin;
}

.library-section-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--panel-border);
    padding: 6px 12px;
    border-radius: 4px ;
    margin-top: 12px;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.library-section-header:first-child {
    margin-top: 0;
}

.library-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border);
    border-radius: 6px ;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s, transform 0.2s;
}

.library-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.library-cover {
    width: 48px;
    height: 48px;
    border-radius: 4px ;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.library-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.library-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.library-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.library-date {
    font-size: 0.68rem;
    color: var(--accent);
    font-weight: 500;
}

/* Deletion & Missing Files Overlay Styles */
.btn-delete-album {
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.25);
    color: #e74c3c;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    font-size: 0.75rem;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px ;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-delete-album:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.45);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
}

.btn-delete-lib {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    margin-left: 6px;
}

.btn-delete-lib:hover {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    transform: scale(1.1);
}

.flow-card .sleeve-warning-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(230, 126, 34, 0.95);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Music Store Modal receipt styles */
.store-modal-content {
    max-width: 380px !important;
}

.store-receipt {
    background: #f7f3eb; /* Retro paper cream color */
    border: 1px solid #d8cfb4;
    color: #3e382d;
    font-family: 'Courier New', Courier, monospace;
    padding: 18px;
    border-radius: 4px;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.05), 0 8px 16px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
}

.store-receipt::before, .store-receipt::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 6px;
    background-image: linear-gradient(135deg, transparent 50%, #f7f3eb 50%), linear-gradient(225deg, transparent 50%, #f7f3eb 50%);
    background-size: 10px 10px;
    background-repeat: repeat-x;
}

.store-receipt::before {
    top: 0;
    transform: rotate(180deg);
}

.store-receipt::after {
    bottom: 0;
}

.receipt-header {
    text-align: center;
    border-bottom: 2px dashed #d8cfb4;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.receipt-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.receipt-date {
    font-size: 0.75rem;
    margin: 4px 0 0 0;
    color: #7d735f;
}

.receipt-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.receipt-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    line-height: 1.4;
}

.receipt-label {
    font-weight: bold;
    color: #7d735f;
}

.receipt-value {
    text-align: right;
    max-width: 70%;
    word-break: break-all;
}

.receipt-divider {
    border-bottom: 1px dashed #d8cfb4;
    margin: 8px 0;
}

.price-row {
    font-size: 1.1rem;
    font-weight: bold;
    color: #1a150e;
    padding: 4px 0;
}

.receipt-footer {
    text-align: center;
    border-top: 2px dashed #d8cfb4;
    margin-top: 15px;
    padding-top: 10px;
    font-size: 0.7rem;
    color: #7d735f;
}

.receipt-footer p {
    margin: 0;
}

/* Buy/Download button styling inside track rows */
.row-btn.buy-row-btn {
    color: var(--accent);
}

.row-btn.buy-row-btn:hover {
    background: rgba(226, 165, 103, 0.15) !important;
    color: #fff !important;
}

.row-btn.download-row-btn {
    color: #2ecc71;
}

.row-btn.download-row-btn:hover {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #fff !important;
}

/* Info & Manual Modal Styles */
.info-modal-content {
    max-width: 680px !important;
    width: 95vw !important;
    max-height: 90vh !important;
    display: flex;
    flex-direction: column;
}

.info-modal-scroll {
    max-height: 72vh;
    overflow-y: auto;
    margin-top: 15px;
    padding-right: 12px;
    scrollbar-width: thin;
}

.info-modal-scroll h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent, #e2a567);
    margin-bottom: 8px;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
}

.info-modal-scroll p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}

.info-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px ;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.info-section h5 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-section p {
    font-size: 0.84rem;
    margin-bottom: 8px;
    line-height: 1.5;
}

.info-section ul, .info-section ol {
    margin: 8px 0 8px 18px;
    padding: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.45;
}

/* Importer Modal CSS */
.import-modal-content {
    max-width: 550px !important;
}

.import-dropzone {
    border: 2px dashed rgba(var(--accent-rgb), 0.3);
    border-radius: 6px ;
    padding: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.import-dropzone.drag-hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
    transform: scale(1.02);
}

.import-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.import-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.import-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.import-table th {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--panel-border);
}

.import-table td {
    padding: 8px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.import-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.status-badge.pending {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.status-badge.loading {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
}

.status-badge.success {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.status-badge.failed {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* Tracklist Editing Inputs */
.edit-header-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--panel-border-glow);
    border-radius: 4px ;
    padding: 6px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
    width: 250px;
    transition: border 0.2s, background 0.2s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.edit-header-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
}

.edit-header-meta-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--panel-border-glow);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    width: 180px;
    margin-top: 4px;
    transition: border 0.2s, background 0.2s;
}

.edit-header-meta-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
}

.track-edit-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--panel-border-glow);
    border-radius: 6px;
    padding: 4px 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border 0.2s, background 0.2s;
}

.track-edit-input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
}

/* Scrollbar styling for active tracks on cards */
.card-active-tracks {
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 4px ;
    padding: 10px 14px;
    margin: 10px 0;
    border: 1px solid rgba(226, 165, 103, 0.3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
    max-height: 320px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100%;
    box-sizing: border-box;
    pointer-events: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

.card-active-tracks::-webkit-scrollbar {
    width: 7px !important;
    display: block !important;
}

.card-active-tracks::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 6px !important;
}

.card-active-tracks::-webkit-scrollbar-thumb {
    background: var(--accent, #e2a567) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.card-active-tracks::-webkit-scrollbar-thumb:hover {
    background: #ffffff !important;
}

/* CMS Modal specific styles */
.cms-modal-content {
    max-width: 750px !important;
    width: 95% !important;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cms-modal-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid rgba(198, 138, 76, 0.15);
    margin-bottom: 16px;
    padding-bottom: 4px;
}

.cms-tab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px ;
    transition: all 0.2s ease;
}

.cms-tab-btn:hover {
    background: rgba(198, 138, 76, 0.08);
    color: var(--accent);
}

.cms-tab-btn.active {
    background: rgba(198, 138, 76, 0.15);
    color: var(--accent);
    font-weight: 600;
}

.cms-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 6px;
}

.cms-modal-body::-webkit-scrollbar {
    width: 6px;
}
.cms-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.cms-modal-body::-webkit-scrollbar-thumb {
    background: rgba(198, 138, 76, 0.2);
    border-radius: 4px;
}

.cms-form-group {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cms-form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cms-input {
    background: rgba(253, 252, 248, 0.6);
    border: 1px solid rgba(198, 138, 76, 0.25);
    border-radius: 4px ;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-main);
    outline: none;
    transition: all 0.2s ease;
}

.cms-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(198, 138, 76, 0.15);
    background: rgba(253, 252, 248, 0.9);
}

.cms-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.cms-info-box {
    background: rgba(198, 138, 76, 0.05);
    border: 1px dashed rgba(198, 138, 76, 0.2);
    border-radius: 4px ;
    padding: 12px 16px;
}

.cms-albums-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.cms-album-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(253, 252, 248, 0.5);
    border: 1px solid rgba(198, 138, 76, 0.15);
    border-radius: 6px ;
    transition: background-color 0.2s ease;
}

.cms-album-row:hover {
    background: rgba(253, 252, 248, 0.8);
}

.cms-album-row img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.05);
}

.cms-album-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cms-album-info h5 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.cms-album-info span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cms-album-actions {
    display: flex;
    gap: 6px;
}

.cms-side-builder {
    background: rgba(198, 138, 76, 0.04);
    border: 1px solid rgba(198, 138, 76, 0.1);
    border-radius: 6px ;
    padding: 12px;
}

.cms-side-builder h5 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cms-track-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.cms-track-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(253, 252, 248, 0.8);
    border: 1px solid rgba(198, 138, 76, 0.15);
    border-radius: 4px ;
    padding: 6px;
}

.cms-track-row input {
    padding: 6px 10px;
    font-size: 0.75rem;
}

.cms-track-row .track-title-input {
    flex-grow: 2;
}

.cms-track-row .track-genre-input {
    flex-grow: 1;
    max-width: 100px;
}

.cms-track-row .track-dur-input {
    width: 60px;
    text-align: center;
}

.cms-track-row .track-file-input {
    font-size: 0.7rem;
    max-width: 150px;
}

.cms-status-msg {
    padding: 8px;
    border-radius: 6px;
    font-weight: 500;
}
.cms-status-msg.success {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}
.cms-status-msg.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.2);
}

.cms-upload-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(253, 252, 248, 0.85);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px ;
}

.cms-upload-box {
    width: 80%;
    max-width: 350px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid rgba(198, 138, 76, 0.25);
    border-radius: 4px ;
}

.cms-progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(198, 138, 76, 0.15);
    border-radius: 4px;
    margin-top: 15px;
    overflow: hidden;
}

.cms-progress-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.2s ease;
}

.btn-primary-action.small {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
}

.btn-secondary-action.small {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(198, 138, 76, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    margin-bottom: 12px;
}

/* Offline state on album cards */
.download-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(198, 138, 76, 0.1);
    color: var(--accent);
    font-size: 0.8rem;
    border: 1px solid rgba(198, 138, 76, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: auto;
}

.download-badge:hover {
    background: rgba(198, 138, 76, 0.2);
    transform: scale(1.1);
}

.download-badge.downloaded {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.3);
}

.offline-badge {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 6px;
}

/* Onboarding Tutorial styles */
.tutorial-highlight {
    position: relative !important;
    z-index: 10001 !important;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.9) !important;
    pointer-events: none !important;
}

.tutorial-info-box {
    animation: fadeInTutorial 0.4s ease forwards;
}

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

/* ==========================================
   VYNL SHOWCASE BLOG STYLES
   ========================================== */

.blog-body {
    background-color: #0c0a09;
    color: var(--text-primary);
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100dvh;
}

.blog-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 120px 24px; /* bottom padding accounts for docked player */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-hero {
    padding: 36px 40px;
    border-radius: 0px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.blog-hero h2 {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.blog-hero p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    max-width: 900px;
}

.blog-hero .hero-subtext {
    font-size: 0.95rem;
    background: rgba(226, 165, 103, 0.08);
    border-left: 3px solid var(--accent);
    padding: 12px 20px;
    border-radius: 0px;
    color: var(--text-primary);
}

.blog-showcase {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-showcase h3 {
    font-family: 'Architects Daughter', cursive;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 0;
    letter-spacing: 1px;
    text-transform: lowercase;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.blog-card {
    border-radius: 0px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    padding: 24px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.15);
}

.blog-card-header {
    display: flex;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.blog-cover-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background: #111;
    flex-shrink: 0;
}

.blog-cover-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-card:hover .blog-cover-wrapper img {
    transform: scale(1.08);
}

.blog-cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.blog-cover-wrapper:hover .blog-cover-overlay {
    opacity: 1;
}

.btn-preview-play {
    background: var(--accent);
    color: #000;
    border: none;
    padding: 6px 12px;
    border-radius: 0px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
}

.btn-preview-play:hover {
    transform: scale(1.05);
}

.blog-album-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.blog-album-meta h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-album-meta .artist-name {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 500;
    margin: 0;
}

.blog-album-meta .release-date {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}

.blog-album-meta .badge {
    align-self: flex-start;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 0px;
    color: var(--text-secondary);
}

.blog-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.blog-tracklist-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-tracklist-preview h5 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.blog-tracklist-preview ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-track-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}

.preview-track-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.preview-track-item.active-preview {
    background: rgba(226, 165, 103, 0.08);
    border-color: var(--accent);
    font-weight: 600;
}

.preview-track-item.active-preview .play-indicator {
    color: var(--accent);
}

.play-indicator {
    font-size: 0.65rem;
    width: 14px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.track-num {
    color: var(--text-secondary);
    opacity: 0.7;
    width: 14px;
}

.track-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.track-dur {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

.blog-card-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    position: relative;
}

.blog-card-actions button {
    flex-grow: 1;
    justify-content: center;
    font-size: 0.8rem;
    padding: 10px 16px;
}

/* Dropdown Menu for Downloads */
.download-dropdown-container {
    position: relative;
    flex-grow: 1;
    display: flex;
}

.download-dropdown-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 250px;
    background: rgba(18, 16, 15, 0.95);
    border: 1px solid var(--panel-border);
    border-radius: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 200;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    overflow: hidden;
    animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.download-dropdown-container.active .download-dropdown-menu {
    display: flex;
}

.download-dropdown-menu a {
    color: var(--text-primary);
    text-decoration: none;
    padding: 12px 16px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--panel-border);
    transition: background 0.2s;
    text-align: left;
}

.download-dropdown-menu a:last-child {
    border-bottom: none;
}

.download-dropdown-menu a:hover {
    background: rgba(226, 165, 103, 0.1);
    color: var(--accent);
}

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

/* Floating Bottom Preview Player Widget */
.blog-preview-player {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 48px);
    max-width: 800px;
    background: rgba(18, 16, 15, 0.85);
    border: 1px solid var(--panel-border);
    border-radius: 0px;
    padding: 14px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5000;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-sizing: border-box;
    animation: playerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes playerSlideIn {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.preview-player-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex-grow: 1;
}

.preview-playing-icon {
    font-size: 1.3rem;
    color: var(--accent);
    animation: iconBounce 1.5s ease-in-out infinite alternate;
}

@keyframes iconBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}

.preview-player-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

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

.preview-player-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.preview-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.preview-bar-wrapper {
    width: 150px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

#previewProgressBar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 0px;
}

.btn-close-preview {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.btn-close-preview:hover {
    color: #e74c3c;
}

@media (max-width: 767px) {
    .blog-layout {
        padding-top: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .blog-hero h2 {
        font-size: 1.8rem;
    }
    
    .blog-preview-player {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
        bottom: 12px;
    }
    
    .preview-player-controls {
        justify-content: space-between;
    }
    
    .preview-bar-wrapper {
        width: 120px;
    }

    /* 1. Glass panel padding adjustments */
    .glass-panel {
        padding: 16px !important;
    }
    
    /* 2. Single-line header on mobile */
    .app-header { z-index: 99999999 !important; position: relative !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; overflow: visible !important; width: 100%; 
        gap: 5px;
        padding-bottom: 8px;
    }
    .header-controls { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex !important; flex-direction: row !important; 
        gap: 4px;
    }
    .nav-link {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    .logo-icon {
        width: 28px;
        height: 28px;
    }
    .logo-text-svg {
        width: 30px !important;
        height: 30px !important;
    }
    .logo-text span {
        font-size: 0.5rem !important;
    }

    /* 3. Horizontal scrolling for sidebar tabs and CMS tabs */
    .sidebar-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 12px !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE 10+ */
    }
    .sidebar-tabs::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }
    .tab-btn {
        flex-shrink: 0 !important;
        font-size: 0.85rem !important;
        padding: 8px 4px !important;
    }
    .cms-modal-tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }
    .cms-modal-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .cms-tab-btn {
        flex-shrink: 0 !important;
    }

    /* 4. Zoom Floating Window responsiveness */
    .floating-window-content {
        width: 95vw !important;
        height: 85vh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
    }
    .large-cover-wrapper {
        width: min(75vw, 320px) !important;
        height: min(75vw, 320px) !important;
    }

    /* 5. Crate card sizing and info panel scaling */
    :root {
        --crate-card-size: 110px !important;
    }
    .flow-card .card-info {
        width: 290px !important;
        left: calc((var(--crate-card-size, 220px) - 290px) / 2) !important;
    }
    .card-details-expanded.show {
        max-height: 300px;
        padding: 12px 14px;
    }

    /* 6. Turntable deck scaling */
    .deck-wrapper {
        display: flex;
        justify-content: center; overflow: visible;
    }
    #vinyl-deck {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    /* 7. Drawer overlay headers */
    .drawer-content {
        padding: 16px 16px !important;
    }
    .drawer-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .drawer-header-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .drawer-header-actions select,
    .drawer-header-actions input[type="range"] {
        width: 100% !important;
    }
}

@media (max-width: 450px) {
    /* 8. Extra small screen adjustments */
    .deck-wrapper {
    }
    #vinyl-deck {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    }
    
    .blog-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .blog-album-meta {
        align-items: center;
        text-align: center;
    }
    .blog-album-meta .badge {
        align-self: center;
    }
    .blog-card-actions {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 350px) {
    .deck-wrapper {
    }
    #vinyl-deck {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    }
    .flow-card .card-info {
        width: 250px !important;
        left: calc((var(--crate-card-size, 220px) - 250px) / 2) !important;
    }
}

/* Locked preview song styles in blog and embed player */
.preview-track-item.locked-preview,
.track-item.locked {
    opacity: 0.45;
    cursor: not-allowed !important;
}
.preview-track-item.locked-preview .track-title,
.track-item.locked .track-title {
    text-decoration: line-through;
}

/* --- VYNL Dynamic Sides, Checkout & Stats Layouts --- */

/* Double Album Badge */
.double-album-badge {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
    color: #111;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Dynamic Segmented Button tab layout */
.segment-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    text-align: center;
    font-family: inherit;
}
.segment-btn.active {
    background: var(--accent);
    color: #111;
    box-shadow: 0 2px 6px var(--accent-glow);
}

/* Checkout Store Modal */
.checkout-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    background: rgba(18, 16, 15, 0.7);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.checkout-box {
    background: #fdfcf8;
    border: 1px solid rgba(198, 138, 76, 0.35);
    border-radius: 4px ;
    width: 90%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: coverPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    color: var(--text-primary);
}

.checkout-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

.checkout-summary-tile {
    background: rgba(198, 138, 76, 0.05);
    border: 1px solid rgba(198, 138, 76, 0.15);
    border-radius: 4px ;
    padding: 12px;
    margin-bottom: 15px;
}

.checkout-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 1px dashed rgba(198, 138, 76, 0.25);
    padding-top: 10px;
    margin-top: 10px;
}

.payment-method-selectors {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.payment-method-btn {
    flex: 1;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,0.4);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.payment-method-btn.active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.1);
}

/* Statistics Dashboard Layouts */
.stats-tab-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.stats-card {
    background: rgba(255,255,255,0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px ;
    padding: 14px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.stats-card-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 4px;
}

.stats-card-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stats-table-container {
    border: 1px solid var(--panel-border);
    border-radius: 4px ;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(255,255,255,0.2);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.stats-table th, .stats-table td {
    padding: 8px 10px;
    text-align: left;
}

.stats-table th {
    background: rgba(0,0,0,0.03);
    font-weight: 600;
    border-bottom: 1px solid var(--panel-border);
}

.stats-table tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.02);
}

/* ==========================================
   USER AUTHENTICATION & PROFILE DASHBOARD
   ========================================== */
#userAuthModal .modal-content {
    width: 400px;
    max-width: 90vw;
}

.auth-form-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.profile-dashboard {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-info-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.03);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
}

.profile-avatar {
    font-size: 2.2rem;
    background: rgba(var(--accent-rgb), 0.1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
}

.profile-details h4 {
    margin: 0;
    font-size: 0.95rem;
}

.profile-details p {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cloud-vault-status {
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px dashed rgba(var(--accent-rgb), 0.3);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.cloud-vault-status strong {
    color: var(--accent);
}

.ipad-sim-card {
    background: rgba(230, 126, 34, 0.06);
    border: 1px solid rgba(230, 126, 34, 0.2);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ipad-sim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #e67e22;
}

.ipad-sim-desc {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ==========================================
   CLOUD RECOVERY MATCHING INTERFACE
   ========================================== */
#cloudRecoveryModal .modal-content {
    width: 480px;
    max-width: 90vw;
}

.recovery-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.03);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    margin-bottom: 12px;
}

.recovery-search-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--accent-rgb), 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.recovery-matches-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
}

.recovery-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 0.72rem;
}

.recovery-match-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.recovery-match-filename {
    font-weight: 600;
    color: var(--text-primary);
}

.recovery-match-meta {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.recovery-match-status {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

.recovery-match-status.matched {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.25);
}

.recovery-match-status.searching {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.25);
}

/* recovery banner styling */
.recovery-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.2);
    border-radius: 6px;
    color: #d35400;
    font-size: 0.75rem;
    margin-top: 10px;
    gap: 12px;
    animation: bannerFadeIn 0.3s ease;
}

.recovery-banner-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ==========================================
   VYNL ROTATING INTRO LOADER SCREEN
   ========================================== */
.intro-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background-color: #121110;
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

.intro-loader-overlay.fade-out {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.intro-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    width: 300px;
    height: 300px;
    justify-content: center;
}

/* Vinyl Wrapper */
.intro-vinyl-wrapper {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: wrapperScaleDown 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 3.0s forwards;
}

.intro-vinyl-disc {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #222 30%, #080808 60%, #000 80%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.05);
    animation: spin 3s linear infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-vinyl-grooves {
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.03);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.2), inset 0 0 15px rgba(255,255,255,0.02);
}

.intro-vinyl-label {
    width: 44px;
    height: 44px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #000;
}

.intro-vinyl-center-hole {
    width: 8px;
    height: 8px;
    background: #121110;
    border-radius: 50%;
}

/* Positioned Letters Around Vinyl */
.intro-letter {
    position: absolute;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent-glow);
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom override for center position of letters on active reveal */
@keyframes revealLetterV { to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes revealLetterY { to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } }
@keyframes revealLetterN { to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes revealLetterL { to { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } }

.letter-v {
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    animation: revealLetterV 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

.letter-y {
    right: -10px;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    animation: revealLetterY 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.1s forwards;
}

.letter-n {
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    animation: revealLetterN 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.7s forwards;
}

.letter-l {
    left: -10px;
    top: 50%;
    transform: translateY(-50%) translateX(-20px);
    animation: revealLetterL 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.3s forwards;
}

/* Logo Banner revealed at the end */
.intro-logo-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    animation: revealLogoBanner 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.2s forwards;
    position: absolute;
}

.intro-logo-svg {
    color: var(--accent);
    filter: drop-shadow(0 0 10px var(--accent-glow));
    animation: logoPulse 2s ease-in-out infinite alternate;
}

.intro-logo-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: #e2dcd0;
    letter-spacing: 4px;
}

@keyframes wrapperScaleDown {
    to {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes revealLogoBanner {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes logoPulse {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 8px var(--accent-glow));
    }
    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 18px var(--accent-glow));
    }
}

/* Climax Ending Flash Overlay */
.flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
.flash-overlay.blind {
    opacity: 1;
    background: white;
    transition: opacity 1.5s ease-out;
}
.flash-overlay.black {
    opacity: 1;
    background: black;
    transition: background 2s ease;
}
@keyframes pulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 5px var(--accent-glow)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 15px var(--accent)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 5px var(--accent-glow)); }
}

/* Minimalist Sharp Blog & Drawer Styles (Bauhaus/Swiss Modern inspired) */
.sharp-card {
    border-radius: 0px !important;
}
.sharp-card *:not(.vinyl-disc):not(.vinyl-disc *):not(.label):not(.label *):not(#platter):not(#platter *):not(.record-canvas-face):not(.cd-digital-display):not(.cd-tray-disc):not(.cd-led):not(.close-btn):not(circle) {
    border-radius: 0px !important;
}

.sharp-btn,
.sharp-btn * {
    border-radius: 0px !important;
}

/* Force sharp corners on all blog elements */
.blog-body,
.blog-body *,
#blogDrawer,
#blogDrawer * {
    border-radius: 0px !important;
}


/* Artist Spotlight Styling */
.artist-spotlight {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.spotlight-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 10px;
}

.spotlight-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.spotlight-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.spotlight-bio {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Blog grid styling adjustments for drawer */
.blog-drawer-overlay .drawer-content {
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0px !important;
    padding: 40px 60px;
}

.blog-drawer-body {
    padding: 10px 0;
}

.blog-drawer-overlay .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* ==========================================================================
   Albumstelle Header (Active Album Detail View)
   ========================================================================== */
.albumstelle-header {
    display: none !important;
}

.albumstelle-cover {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    background: #111;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    border-radius: 0px !important;
}

.albumstelle-cover:hover {
    transform: scale(1.04);
}

.albumstelle-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.albumstelle-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.albumstelle-artist {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.8s ease;
}

.albumstelle-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.albumstelle-meta .badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    padding: 3px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px !important;
}

@media (max-width: 600px) {
    .albumstelle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }
    
    .albumstelle-cover {
        width: 100%;
        max-width: 150px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Inline Plattenkiste (Cover Flow) Modern & Minimalist Style overrides */
.inline-crate-section {
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.inline-crate-section .drawer-header {
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.crate-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.crate-main-title {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    color: var(--text-primary, #1e1e28) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* Modern Segmented View Switcher */
.crate-view-switcher {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.06);
    padding: 3px;
    border-radius: 4px ;
    gap: 3px;
}

.crate-view-switcher .view-switch-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 4px ;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary, #6e6e7f);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.crate-view-switcher .view-switch-btn.active {
    background: var(--text-primary, #1e1e28);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.sort-collection-highlight-btn {
    background: var(--accent, #c68a4c) !important;
    color: #111116 !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(198, 138, 76, 0.25) !important;
    transition: all 0.2s ease !important;
}

.sort-collection-highlight-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(198, 138, 76, 0.4) !important;
}

/* Minimalist Card Info Typography & Layout */
.card-album-heading {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.3px !important;
    color: var(--text-primary, #1e1e28) !important;
    margin: 0 !important;
    text-align: center;
}

.card-artist-subheading {
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif !important;
    font-size: 0.8rem !important;
    color: var(--text-secondary, #6e6e7f) !important;
    margin: 2px 0 6px 0 !important;
    text-align: center;
}

.card-main-actions {
    display: flex;
    gap: 8px;
    margin: 8px auto;
    width: 100%;
    max-width: 280px;
}

.card-main-actions .btn-primary-action {
    flex: 1.3;
    padding: 7px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 4px ;
    justify-content: center;
    background: var(--accent, #c68a4c);
    color: #111;
    border: none;
    box-shadow: 0 3px 10px rgba(198, 138, 76, 0.28);
    cursor: pointer;
    transition: all 0.2s ease;
}

.card-main-actions .btn-secondary-action {
    flex: 1;
    padding: 7px 10px;
    font-size: 0.78rem;
    border-radius: 4px ;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary, #1e1e28);
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Accordion Toggle for Tracklist & Details */
.btn-tracklist-accordion-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 320px;
    padding: 6px 12px;
    margin: 6px auto 0 auto;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed rgba(0, 0, 0, 0.18);
    border-radius: 4px ;
    font-family: 'Jost', 'League Spartan', 'Futura', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary, #6e6e7f);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.btn-tracklist-accordion-toggle:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary, #1e1e28);
    border-color: var(--accent, #c68a4c);
}

.btn-tracklist-accordion-toggle.active {
    background: rgba(198, 138, 76, 0.1);
    border-color: var(--accent, #c68a4c);
    color: var(--accent, #c68a4c);
}

.card-tracklist-drawer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px ;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.card-tracklist-drawer.show, .card-tracklist-drawer.expanded {
    max-height: 420px;
    opacity: 1;
    margin-top: 8px;
    padding: 10px;
    overflow-y: auto;
}

/* Default / Collapsed (Strip view) */
.inline-crate-section:not(.crate-expanded) {
    --crate-card-size: 260px !important;
}

.inline-crate-section:not(.crate-expanded) .scale-control-group {
    display: none !important;
}

.inline-crate-section:not(.crate-expanded) .carousel-section {
    min-height: 420px !important;
    height: 100% !important;
    padding: 10px 0 !important;
}

.inline-crate-section:not(.crate-expanded) .flow-card.active .card-info {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Expanded state (showing all details) - Detailansicht */
.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) {
    --crate-card-size: 540px !important; /* Exact size of Turntable unscaled */
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .scale-control-group {
    display: flex !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .carousel-section {
    height: calc(460px * var(--deck-scale) + 150px) !important;
    padding: 30px 0 !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.active {
    transform: scale(var(--deck-scale)) !important;
    z-index: 100 !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.left-side {
    transform: translateX(-55%) scale(calc(var(--deck-scale) * 0.45)) rotateY(60deg) !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.right-side {
    transform: translateX(55%) scale(calc(var(--deck-scale) * 0.45)) rotateY(-60deg) !important;
}

.inline-crate-section.crate-expanded .flow-card .card-info {
    display: block !important;
}

.flow-card .vinyl-disc .label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    width: 32% !important;
    height: 32% !important;
}

/* Fullscreen Grid View State */
/* Replaced fixed fullscreen with inline grid */

.spotlight-bio {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Blog grid styling adjustments for drawer */
.blog-drawer-overlay .drawer-content {
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0px !important;
    padding: 40px 60px;
}

.blog-drawer-body {
    padding: 10px 0;
}

.blog-drawer-overlay .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

/* ==========================================================================
   Albumstelle Header (Active Album Detail View)
   ========================================================================== */
.albumstelle-header {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 20px;
    align-items: center;
}

.albumstelle-cover {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    background: #111;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    border-radius: 0px !important;
}

.albumstelle-cover:hover {
    transform: scale(1.04);
}

.albumstelle-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.albumstelle-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.albumstelle-artist {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.8s ease;
}

.albumstelle-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.albumstelle-meta .badge {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    padding: 3px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0px !important;
}

/* Inline Plattenkiste (Cover Flow) Compact Strip Style overrides */
.inline-crate-section {
    padding: 12px 16px !important;
}

.inline-crate-section .drawer-header {
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    flex-wrap: wrap;
    gap: 10px;
}

.inline-crate-section .drawer-header h3 {
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Default / Collapsed (Strip view) */
.inline-crate-section:not(.crate-expanded) {
    --crate-card-size: 260px !important;
}

.inline-crate-section:not(.crate-expanded) .scale-control-group {
    display: none !important;
}

.inline-crate-section:not(.crate-expanded) .carousel-section {
    min-height: 420px !important;
    height: 100% !important;
    padding: 10px 0 !important;
}

.inline-crate-section:not(.crate-expanded) .flow-card.active .card-info {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Expanded state (showing all details) - Detailansicht */
.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) {
    --crate-card-size: 540px !important; /* Exact size of Turntable unscaled */
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .scale-control-group {
    display: flex !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .carousel-section {
    height: calc(460px * var(--deck-scale) + 150px) !important;
    padding: 30px 0 !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.active {
    transform: scale(var(--deck-scale)) !important;
    z-index: 100 !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.left-side {
    transform: translateX(-55%) scale(calc(var(--deck-scale) * 0.45)) rotateY(60deg) !important;
}

.inline-crate-section.crate-expanded:not(.crate-fullscreen-grid) .flow-card.right-side {
    transform: translateX(55%) scale(calc(var(--deck-scale) * 0.45)) rotateY(-60deg) !important;
}

.inline-crate-section.crate-expanded .flow-card .card-info {
    display: block !important;
}

.flow-card .vinyl-disc .label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    width: 32% !important;
    height: 32% !important;
}

/* Fullscreen Grid View State */
/* Replaced fixed fullscreen with inline grid */

.inline-crate-section.crate-fullscreen-grid > .drawer-header {
    flex-shrink: 0 !important;
    padding-bottom: 15px !important;
    margin-bottom: 0 !important;
}
.inline-crate-section.crate-fullscreen-grid .carousel-section {
    flex-grow: 1 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px 20px 40px 20px !important;
    margin-top: 0 !important;
}


/* ==============================================================================
   🌟 DEFINITIVE MASTER STYLING & ANIMATION ENGINE FOR VYNL
   - Ultra-Clean Transparent Header (No black bar)
   - 100% Full Widescreen Coverage (Exactly 3 Wide Studio Columns: Plattenkiste | Plattenspieler | Warteschlange)
   - Balanced, Expansive Proportions filling the entire viewport
   - Footer hidden from main stage, placed in Info Handbuch
   ============================================================================== */

:root {
    --crate-card-size: 240px;
}

/* --- APP HEADER (Ultra-Clean, Transparent, Seamless) --- */
.app-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 4px 12px 4px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--panel-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
}

.header-search-container {
    flex: 1 !important;
    max-width: 460px !important;
    margin: 0 16px !important;
    position: relative !important;
}

.header-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

/* --- 1. COVER FLOW & PLATTENKISTE 3D STYLING --- */
.inline-crate-section {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--panel-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
}

.drawer-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--panel-border) !important;
}

.crate-header-left {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.crate-main-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.crate-filter-group {
    display: flex !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 4px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

.crate-filter-btn {
    flex: 1 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 6px 2px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.crate-filter-btn.active {
    background: var(--accent, #c68a4c) !important;
    color: #fff !important;
}

/* ─── ⋮ Kebab Button (Album 3-dot) ─── */
.card-title-row {
    position: relative !important;
}

.album-kebab-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    font-size: 1.1rem !important;
    color: var(--text-secondary) !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.flow-card .album-kebab-btn {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
}
.album-kebab-btn:hover {
    background: var(--accent-glow, rgba(198,138,76,0.15)) !important;
    color: var(--accent, #c68a4c) !important;
}

/* ─── Global Album Context Menu ─── */
.album-ctx-menu {
    position: fixed !important;
    z-index: 9999999 !important;
    min-width: 230px !important;
    background: var(--panel-bg, rgba(255,255,255,0.97)) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid var(--panel-border, rgba(0,0,0,0.1)) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.15) !important;
    padding: 6px !important;
    display: none;
    flex-direction: column !important;
    gap: 1px !important;
    user-select: none !important;
}

.album-ctx-menu.show {
    display: flex !important;
    animation: ctxFadeIn 0.12s ease !important;
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.album-ctx-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 8px 8px 8px !important;
}

.album-ctx-cover {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    background: #222 !important;
}

.album-ctx-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
}

.album-ctx-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #111) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.album-ctx-artist {
    font-size: 0.7rem !important;
    color: var(--accent, #c68a4c) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.album-ctx-close-btn {
    background: rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    color: var(--text-secondary, #666) !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.album-ctx-close-btn:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #ef4444 !important;
}

.album-ctx-divider {
    height: 1px !important;
    background: var(--panel-border, rgba(0,0,0,0.08)) !important;
    margin: 3px 6px !important;
}

.album-ctx-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
    position: relative !important;
}

.album-ctx-item i {
    width: 14px !important;
    text-align: center !important;
    color: var(--accent, #c68a4c) !important;
    flex-shrink: 0 !important;
}

.album-ctx-item:hover {
    background: var(--accent-glow, rgba(198,138,76,0.12)) !important;
}

.album-ctx-chevron {
    margin-left: auto !important;
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
}

/* Playlist submenu */
.album-ctx-submenu {
    display: none !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 2px 0 0 0 !important;
    border-top: 1px solid var(--panel-border, rgba(0,0,0,0.08)) !important;
    margin-top: 3px !important;
}

.album-ctx-submenu.open {
    display: flex !important;
}

.album-ctx-submenu-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 7px 10px 7px 28px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.12s ease !important;
}

.album-ctx-submenu-item:hover {
    background: var(--accent-glow, rgba(198,138,76,0.12)) !important;
    color: var(--text-primary) !important;
}

.album-ctx-submenu-new {
    color: var(--accent, #c68a4c) !important;
    font-style: italic !important;
}

/* ─── Alphabet Navigation Bar ─── */
.alphabet-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1px !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 4px 0 6px 0 !important;
    box-sizing: border-box !important;
}

.alphabet-nav span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
    user-select: none !important;
}

.alphabet-nav span:hover {
    background: var(--accent-glow, rgba(198,138,76,0.2)) !important;
    color: var(--text-primary) !important;
}

.sync-header-btn {
    transition: all 0.2s ease !important;
}
.sync-header-btn:hover {
    background: linear-gradient(135deg, rgba(226,165,103,0.35) 0%, rgba(198,138,76,0.2) 100%) !important;
    border-color: #ffd700 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(198,138,76,0.3) !important;
}
.sync-header-btn:hover .fa-sync-alt,
.sync-crate-highlight-btn:hover .fa-sync-alt {
    transform: rotate(180deg);
    transition: transform 0.4s ease;
}

.sync-crate-highlight-btn {
    transition: all 0.2s ease !important;
}
.sync-crate-highlight-btn:hover {
    background: rgba(198, 138, 76, 0.25) !important;
    color: #fff !important;
    border-color: #ffd700 !important;
    transform: translateY(-1px) !important;
}

/* ─── Plattenkiste Artist Navigator & Breadcrumb Track ─── */
.crate-artist-navigator {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 580px !important;
    margin: 2px auto 8px auto !important;
    padding: 2px 8px !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    user-select: none !important;
}

.artist-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-muted, #888) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    opacity: 0.65 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
    max-width: 32% !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
}

.artist-nav-btn:hover {
    opacity: 1 !important;
    color: var(--text-primary) !important;
    background: var(--accent-glow, rgba(198,138,76,0.15)) !important;
}

.artist-nav-btn .artist-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 400 !important;
}

.artist-nav-btn .nav-arrow {
    font-size: 0.85rem !important;
    color: var(--accent, #c68a4c) !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.artist-nav-current {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 3px 12px !important;
    background: rgba(198, 138, 76, 0.1) !important;
    border: 1px solid rgba(198, 138, 76, 0.3) !important;
    border-radius: 20px !important;
    max-width: 44% !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    flex-shrink: 0 !important;
}

.artist-nav-letter-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    background: var(--accent, #c68a4c) !important;
    color: #111 !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
}

.artist-name-active {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: var(--accent, #c68a4c) !important;
    letter-spacing: 0.5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
}

/* ─── Sort Dropdown ─── */
.sort-dropdown-container {
    position: relative !important;
    display: inline-block !important;
}

.sort-dropdown-btn {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,0.04) !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: background 0.2s ease !important;
}

.sort-dropdown-btn:hover {
    background: var(--accent-glow, rgba(198,138,76,0.15)) !important;
}

.sort-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: var(--panel-bg, rgba(255,255,255,0.95)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    min-width: 180px !important;
    padding: 4px !important;
    display: none !important;     /* hidden by default */
    flex-direction: column !important;
    gap: 2px !important;
}

.sort-dropdown-menu.open {
    display: flex !important;
}

.sort-dropdown-item {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 7px 12px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    letter-spacing: 0.4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.sort-dropdown-item:hover {
    background: var(--accent-glow, rgba(198,138,76,0.15)) !important;
    color: var(--text-primary) !important;
}

.sort-dropdown-item.active {
    background: var(--accent, #c68a4c) !important;
    color: #fff !important;
}


.carousel-section {
    position: relative !important;
    width: 100% !important;
    height: 340px !important;
    min-height: 340px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
    overflow: hidden !important;       /* ← horizontally clip side cards */
    padding: 10px 0 !important;
    box-sizing: border-box !important;
}

.cover-flow-container {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    overflow: visible !important;      /* ← let card-info popup show below */
}

/* Flow Card (Single Album) */
.flow-card {
    position: absolute !important;
    width: var(--crate-card-size, 240px) !important;
    height: var(--crate-card-size, 240px) !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: calc(-0.5 * var(--crate-card-size, 240px)) !important;
    margin-top: calc(-0.5 * var(--crate-card-size, 240px)) !important;
    cursor: pointer !important;
    user-select: none !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.45s ease !important;
    z-index: 10 !important;
}

.flow-card .sleeve {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #15151b !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    z-index: 5 !important;
    transition: box-shadow 0.3s ease !important;
}

.flow-card .sleeve img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Realistic Vinyl Disc */
.flow-card .vinyl-disc {
    position: absolute !important;
    width: 94% !important;
    height: 94% !important;
    top: 3% !important;
    left: 3% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #222 0%, #111 50%, #050505 100%) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255,255,255,0.05) !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s ease !important;
    cursor: grab !important;
    touch-action: none !important;
}

.flow-card .vinyl-disc::before {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: repeating-radial-gradient(
        circle,
        #000 0px,
        #1c1c1c 1px,
        #000 2px,
        #111 3px,
        transparent 4px,
        transparent 6px
    ) !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
}

.flow-card .vinyl-disc .label {
    position: absolute !important;
    width: 34% !important;
    height: 34% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid #111 !important;
    z-index: 4 !important;
}

.flow-card .vinyl-disc .label img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.flow-card.active .vinyl-disc {
    transform: translateX(42%) rotate(20deg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 15 !important;
}

.flow-card.active .vinyl-disc.side-b {
    transform: translateX(42%) rotateY(180deg) rotate(-20deg) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 15 !important;
}

.flow-card.active .sleeve {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 25px var(--accent-glow, rgba(198, 138, 76, 0.3)) !important;
    z-index: 10 !important;
}

.flow-card .card-info {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(320px, 92vw) !important;
    text-align: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    background: var(--panel-bg, rgba(255, 255, 255, 0.88)) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    border: 1px solid var(--panel-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
    z-index: 200 !important;
}

.flow-card.active .card-info {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    z-index: 200 !important;
}

.flow-card .card-info button,
.flow-card .card-info a,
.flow-card .card-info input,
.flow-card .card-info select {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 210 !important;
}


/* --- 2. PLATTENSPIELER (TURNTABLE) & TONEARM --- */
.deck-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.deck-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: calc(460px * var(--deck-scale, 1)) !important;
    min-height: calc(460px * var(--deck-scale, 1)) !important;
    overflow: visible !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
}

#vinyl-deck {
    position: relative !important;
    width: 540px !important;
    height: 460px !important;
    background: #e2dcd0 !important;
    border-radius: 8px !important;
    box-shadow: 
        inset 0 2px 5px rgba(255,255,255,0.6),
        inset 0 -2px 5px rgba(0,0,0,0.3),
        0 15px 35px rgba(0,0,0,0.25),
        0 0 0 1px rgba(0,0,0,0.12) !important;
    transform: scale(var(--deck-scale, 1)) !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    flex-shrink: 0 !important;
}

#platter {
    position: absolute !important;
    width: 420px !important;
    height: 420px !important;
    top: 20px !important;
    left: 20px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #f0f0f5 20%, #d5d5df 50%, #b8b8c3 70%) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3), inset 0 0 15px rgba(0,0,0,0.2) !important;
    z-index: 1 !important;
}

#record-flip-wrapper {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 50% !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2 !important;
}

#record-flip-wrapper.side-b {
    transform: rotateY(180deg) !important;
}

#platter.spinning #record-flip-wrapper {
    animation: spinPlatter 1.8s linear infinite !important;
}

@keyframes spinPlatter {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#platter.spinning #record-flip-wrapper.side-b {
    animation: spinPlatterSideB 1.8s linear infinite !important;
}

@keyframes spinPlatterSideB {
    from { transform: rotateY(180deg) rotate(0deg); }
    to { transform: rotateY(180deg) rotate(-360deg); }
}



/* 🎛️ Unified Luxury Studio Control Deck under the Turntable */
.player-unified-studio-deck {
    width: 100% !important;
    max-width: 520px !important;
    margin: 16px auto 0 auto !important;
    background: rgba(14, 14, 20, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(198, 138, 76, 0.35) !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    color: #fff !important;
}

.player-unified-studio-deck .now-playing-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

.player-unified-studio-deck .track-cover-thumbnail {
    width: 54px !important;
    height: 54px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(198, 138, 76, 0.4) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
    transition: transform 0.2s ease;
}

.player-unified-studio-deck .track-cover-thumbnail:hover {
    transform: scale(1.06) !important;
}

.player-unified-studio-deck .track-cover-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.player-unified-studio-deck .track-details {
    text-align: left !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.player-unified-studio-deck .track-details h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.3px !important;
}

.player-unified-studio-deck .track-details p {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--accent, #e2a567) !important;
    margin: 3px 0 0 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.player-unified-studio-deck .time-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-variant-numeric: tabular-nums !important;
}

.player-unified-studio-deck .progress-bar-wrapper {
    flex-grow: 1 !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 3px !important;
    position: relative !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.player-unified-studio-deck #progress-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #fae0b5 0%, #c68a4c 100%) !important;
    box-shadow: 0 0 10px rgba(198, 138, 76, 0.8) !important;
    border-radius: 3px !important;
}

.player-unified-studio-deck .controls-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
}

.albumstelle-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px !important;
    background: var(--panel-bg) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
}

.albumstelle-cover {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    border: 1px solid var(--panel-border) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
    flex-shrink: 0 !important;
}

/* ==============================================================================
   🎧 VYNL STUDIO 3-COLUMN RESPONSIVE ARCHITECTURE
   Spalte 1 (Links): Plattenkiste (Cover Flow)
   Spalte 2 (Mitte): Schallplattenspieler Deck + Studio Dock
   Spalte 3 (Rechts): Warteschlange, Playlists, Favoriten & Details
   ============================================================================== */

/* --- 💻 DESKTOP, LAPTOP & TABLET (>= 768px): 3 EQUAL STUDIO COLUMNS (1fr 1fr 1fr) --- */
@media (min-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .app-container {
        width: 98% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 16px 40px 16px !important;
        box-sizing: border-box !important;
    }

    .app-header {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .main-layout {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    .main-layout > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Column 1: Plattenkiste (Left Studio Shelf - 33.3% Width) */
    #coverFlowDrawer,
    .inline-crate-section {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 640px !important;
        height: auto !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--panel-bg) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important;
        overflow: visible !important;     /* ← allow sort dropdown to escape */
        position: relative !important;
        z-index: 20 !important;
    }

    .inline-crate-section .carousel-section {
        min-height: 340px !important;
        height: 340px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;     /* ← clips cover-flow side cards */
    }

    /* Column 2: Schallplattenspieler (Center Studio Deck - 33.3% Width) */
    .player-column {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    #playerDeckSection {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    :root {
        --deck-scale: min(1.25, calc((100vw * 0.31) / 420)) !important;
        --crate-card-size: clamp(240px, 20vw, 340px) !important;
    }

    /* Column 3: Warteschlange & Details (Right Studio Tower - 33.3% Width) */
    .details-column {
        grid-column: 3 / 4 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        box-sizing: border-box !important;
    }

    .details-column .queue-card,
    .details-column .tracklist-section {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        grid-column: auto !important;
        box-sizing: border-box !important;
    }

    .details-column .tracklist-table-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Studio Dock sits directly under turntable */
    .player-unified-studio-deck {
        position: static !important;
        width: 100% !important;
        max-width: 540px !important;
        margin: 16px auto 0 auto !important;
    }

    /* Hide Mobile-Only Elements on Desktop */
    .mobile-fab-container {
        display: none !important;
    }
}

/* --- 📱 MOBILE (< 768px): VERTICAL STACK & FIXED BOTTOM PLAYER BAR WITH DVH & SAFE AREA --- */
@media (max-width: 767px) {
    html {
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        padding: 10px 12px calc(145px + env(safe-area-inset-bottom, 0px)) 12px !important;
        box-sizing: border-box !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    /* === CRITICAL: Override base 3-column grid → single-column vertical stack === */
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        /* Reset all grid properties from the base CSS */
        grid-template-columns: none !important;
        align-items: stretch !important;
    }

    .main-layout > * {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Column 1 → Plattenkiste (top on mobile) */
    #coverFlowDrawer,
    .inline-crate-section {
        order: 1 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-height: 480px !important;
        height: auto !important;
        padding: 14px 12px 24px 12px !important;
        overflow: visible !important;    /* ← allow sort dropdown to escape */
        position: relative !important;
        z-index: 20 !important;
        background: var(--panel-bg) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 8px !important;
    }

    .inline-crate-section .carousel-section {
        min-height: 340px !important;
        height: 340px !important;
        overflow: hidden !important;     /* ← clips cover-flow side cards */
    }

    /* Column 2 → Plattenspieler (middle on mobile) */
    .player-column {
        order: 2 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Mobile-optimized turntable scale */
    :root {
        --deck-scale: min(1.05, calc((100vw - 32px) / 460)) !important;
        --crate-card-size: 260px !important;
    }

    /* Column 3 → Warteschlange & Details (below turntable on mobile) */
    .details-column {
        order: 3 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .details-column .queue-card,
    .details-column .tracklist-section {
        width: 100% !important;
        grid-column: auto !important;
    }

    .details-column .tracklist-table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide desktop turntable deck section (visible via fixed bottom player on mobile) */
    .deck-card .deck-header {
        cursor: pointer !important;
    }

    /* === 📱 FIXED BOTTOM STUDIO PLAYER (ALWAYS VISIBLE + SAFE AREA INSETS) === */
    .player-unified-studio-deck {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid rgba(198, 138, 76, 0.45) !important;
        background: rgba(10, 11, 16, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95) !important;
        z-index: 999999 !important;
        padding-top: 10px !important;
        padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .player-unified-studio-deck .now-playing-header {
        gap: 10px !important;
    }

    .player-unified-studio-deck .track-cover-thumbnail {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .player-unified-studio-deck .track-details h2 {
        font-size: 0.92rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .player-unified-studio-deck .track-details p {
        font-size: 0.74rem !important;
    }

    .player-unified-studio-deck .controls-panel {
        gap: 8px !important;
    }

    .player-unified-studio-deck .control-btn.primary {
        width: 46px !important;
        height: 46px !important;
    }

    .player-unified-studio-deck .control-btn.secondary {
        width: 36px !important;
        height: 36px !important;
    }

    /* Volume slider hidden on mobile (use hardware buttons) */
    .player-unified-studio-deck .volume-slider-container {
        display: none !important;
    }

    /* Show mobile FAB on small screens */
    .mobile-fab-container {
        display: block !important;
    }
}

.vynl-fixed-dock {
    display: none !important;
}

/* Groove Progress Scrubber Bar at top edge of dock */
.dock-progress-wrapper {
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    z-index: 10;
    transition: height 0.15s ease;
}

.dock-progress-wrapper:hover {
    height: 9px;
    top: -6px;
}

.dock-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c68a4c 0%, #fae0b5 100%);
    box-shadow: 0 0 10px rgba(198, 138, 76, 0.7);
    transition: width 0.1s linear;
    position: relative;
}

.dock-progress-bar::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dock-progress-wrapper:hover .dock-progress-bar::after {
    opacity: 1;
}

/* Inner 3-Column Dock Layout */
.dock-inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 24px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Left: Track Information */
.dock-track-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.dock-cover-img {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dock-track-info:hover .dock-cover-img {
    transform: scale(1.05);
}

.dock-text-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.dock-track-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}

.dock-track-artist {
    font-size: 0.78rem;
    color: #c68a4c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.dock-time-display {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
    margin-left: 8px;
    white-space: nowrap;
}

/* Center: Transport Controls */
.dock-transport-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 1.2;
}

.dock-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dock-btn:hover {
    background: rgba(198, 138, 76, 0.2);
    border-color: #c68a4c;
    color: #ffd700;
    transform: translateY(-2px);
}

.dock-btn.icon-btn {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.7);
}

.dock-btn.icon-btn.active {
    color: #c68a4c;
    border-color: #c68a4c;
    background: rgba(198, 138, 76, 0.25);
    box-shadow: 0 0 10px rgba(198, 138, 76, 0.4);
}

.dock-btn.secondary-btn {
    width: 42px;
    height: 42px;
}

.dock-btn.play-btn {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #fae0b5 0%, #c68a4c 100%) !important;
    border: none !important;
    color: #111 !important;
    box-shadow: 0 4px 18px rgba(198, 138, 76, 0.45) !important;
}

.dock-btn.play-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 6px 24px rgba(198, 138, 76, 0.7) !important;
}

/* Right: Volume & Action Pills */
.dock-right-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1;
}

.dock-volume-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-volume-bar {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.dock-volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c68a4c;
    cursor: pointer;
}

.dock-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #eee;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dock-action-pill:hover {
    background: rgba(198, 138, 76, 0.2);
    border-color: #c68a4c;
    color: #fff;
    transform: translateY(-2px);
}

.dock-action-pill.highlight {
    background: linear-gradient(135deg, rgba(198, 138, 76, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    border-color: #c68a4c;
    color: #ffd700;
}

/* Mobile & Tablet Responsive Adjustments */
@media (max-width: 900px) {
    .vynl-fixed-dock {
        height: 70px !important;
    }
    .dock-volume-group {
        display: none !important;
    }
    .dock-inner-container {
        padding: 0 12px;
    }
    .dock-cover-img {
        width: 44px;
        height: 44px;
    }
    .dock-track-title {
        font-size: 0.85rem;
    }
    .dock-track-artist {
        font-size: 0.72rem;
    }
    .dock-time-display {
        display: none;
    }
    .dock-action-pill {
        padding: 6px 10px;
    }
}

/* ==========================================================================
   📖 VYNL HEFTCHEN / BOOKLET MODAL  — complete styling
   ========================================================================== */

/* ── Modal shell ───────────────────────────────────────── */
.booklet-modal-content {
    width: min(1060px, 95vw) !important;
    max-width: 1060px !important;
    height: min(840px, 90vh) !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #13131a !important;
    border: 1px solid rgba(198, 138, 76, 0.4) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(198, 138, 76, 0.15) !important;
    border-radius: 8px !important;
}

#bookletModal .modal-header {
    background: #0d0d12 !important;
    border-bottom: 1px solid rgba(198, 138, 76, 0.25) !important;
    padding: 12px 20px !important;
}

.booklet-modal-body {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #13131a !important;
}

/* Hide the old static HTML tabs that the JS overwrites */
.booklet-tabs { display: none !important; }
.booklet-tab-content { display: none !important; }

/* ── Heftchen top bar ─────────────────────────────────── */
.heftchen-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    font-family: 'Jost', 'League Spartan', sans-serif;
}

.heftchen-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: #0f0f16;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.heftchen-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.heftchen-tab-btn {
    padding: 7px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: #a1a1aa;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.heftchen-tab-btn:hover   { background: var(--accent-glow, rgba(198,138,76,0.15)); color: #fff; border-color: var(--accent); }
.heftchen-tab-btn.active  { background: var(--accent, #c68a4c); color: #111; border-color: var(--accent, #c68a4c); font-weight: 800; }

.heftchen-page-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-heftchen-nav {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    transition: all 0.15s;
}
.btn-heftchen-nav:hover:not([disabled]) { background: var(--accent, #c68a4c); color: #111; border-color: var(--accent); }
.btn-heftchen-nav[disabled] { opacity: 0.25; cursor: default; }

.heftchen-page-indicator {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--accent, #c68a4c);
    min-width: 42px;
    text-align: center;
}

/* ── Stage / Pages ─────────────────────────────────────── */
.heftchen-stage {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.heftchen-page {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 20px 20px 24px 20px;
    box-sizing: border-box;
    animation: heftchenPageIn 0.22s ease;
}
.heftchen-page.active { display: flex; flex-direction: column; }

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

/* ── PAGE 1: Cover & Intro ────────────────────────────── */
.heftchen-cover-hero {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
}

.heftchen-cover-art-wrapper {
    position: relative;
    flex-shrink: 0;
}

.heftchen-vinyl-mockup {
    position: relative;
    width: min(250px, 55vw);
    height: min(250px, 55vw);
}

.heftchen-main-cover {
    width: min(250px, 55vw);
    height: min(250px, 55vw);
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.6);
    display: block;
    position: relative;
    z-index: 2;
}

.heftchen-sliding-disc {
    position: absolute;
    top: 10px;
    right: min(-65px, -20vw);
    width: min(230px, 50vw);
    height: min(230px, 50vw);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #111 30%, #222 70%, #0d0d0d 100%);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heftchen-disc-center {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.1), 0 0 0 2px rgba(0,0,0,0.8);
}

.heftchen-artist-badge {
    position: absolute;
    bottom: -12px;
    left: -12px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent, #c68a4c);
    box-shadow: 0 4px 14px rgba(0,0,0,0.6);
    z-index: 3;
}

.heftchen-cover-intro {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.heftchen-edition-tag {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent, #c68a4c);
    background: rgba(198,138,76,0.15);
    border: 1px solid rgba(198,138,76,0.3);
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.heftchen-cover-artist {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin: 0;
    color: #ffffff;
    line-height: 1.15;
}

.heftchen-cover-album {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--accent, #c68a4c);
}

.heftchen-meta-pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.heftchen-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e4e4e7;
}

.heftchen-preface-text {
    font-size: 0.88rem;
    line-height: 1.7;
    color: #a1a1aa;
    margin: 4px 0 10px 0;
}

.heftchen-cover-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.btn-heftchen-play {
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #e2a567 0%, #c68a4c 100%);
    color: #111;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(198,138,76,0.4);
}
.btn-heftchen-play:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(198,138,76,0.6); }

.btn-heftchen-secondary {
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    background: transparent;
    color: #e4e4e7;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.btn-heftchen-secondary:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: var(--accent); }

/* ── PAGE 2: Story & Band ─────────────────────────────── */
.heftchen-story-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    flex: 1;
    min-height: 0;
}
@media (max-width: 800px) { .heftchen-story-layout { grid-template-columns: 1fr; } }

.heftchen-story-main {
    overflow-y: auto;
    padding-right: 14px;
}

.heftchen-story-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.heftchen-subheading {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent, #c68a4c);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.heftchen-body-text {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #e4e4e7;
}
.heftchen-body-text p { margin: 0 0 14px 0; }

.heftchen-photo-frame {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(255,255,255,0.03);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}
.heftchen-photo-frame img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
    max-height: 240px;
}
.heftchen-photo-caption {
    font-size: 0.68rem;
    color: #a1a1aa;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-top: 4px;
}

.heftchen-info-box {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--accent, #c68a4c);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.78rem;
    line-height: 1.8;
}
.heftchen-info-box h5 {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── PAGE 3: Lyrics & Video ───────────────────────────── */
.heftchen-lyrics-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
@media (max-width: 640px) { .heftchen-lyrics-layout { grid-template-columns: 1fr; } }

.heftchen-track-selector-pane {
    overflow-y: auto;
    border-right: 1px solid var(--panel-border);
    padding-right: 12px;
}

.heftchen-track-picker-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heftchen-track-picker-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
    text-align: left;
    transition: background 0.12s;
}
.heftchen-track-picker-btn:hover { background: var(--accent-glow); color: var(--text-primary); }
.heftchen-track-picker-btn.active { background: var(--accent, #c68a4c); color: #fff; font-weight: 700; }

.track-picker-num { font-weight: 700; min-width: 22px; font-size: 0.68rem; opacity: 0.7; flex-shrink: 0; }
.track-picker-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-picker-dur { font-size: 0.65rem; opacity: 0.6; flex-shrink: 0; }

.heftchen-lyrics-display-pane {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.heftchen-lyrics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
}

.heftchen-lyrics-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
}

.heftchen-lyrics-track-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 2px 0 0 0;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.btn-copy-lyrics {
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.btn-copy-lyrics:hover { background: var(--accent-glow); color: var(--text-primary); }

.heftchen-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}
.heftchen-video-wrapper iframe { width: 100%; height: 100%; border: none; }

.heftchen-lyrics-scroll-box {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 14px 16px;
    background: var(--panel-bg);
}

.heftchen-lyrics-pre {
    white-space: pre-wrap;
    font-family: 'Jost', sans-serif;
    font-size: 0.84rem;
    line-height: 1.85;
    color: var(--text-primary);
    margin: 0;
}

.heftchen-no-lyrics {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-secondary);
    gap: 8px;
    padding: 30px 0;
    font-size: 0.82rem;
}

/* ── PAGE 4: Credits ──────────────────────────────────── */
.heftchen-credits-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
    flex: 1;
    min-height: 0;
}
@media (max-width: 640px) { .heftchen-credits-layout { grid-template-columns: 1fr; } }

.heftchen-credits-main { overflow-y: auto; }
.heftchen-credits-aside { display: flex; flex-direction: column; gap: 14px; }

.heftchen-credits-pre {
    white-space: pre-wrap;
    font-family: 'Jost', monospace;
    font-size: 0.78rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin: 0;
}

.heftchen-wiki-source-box {
    margin-top: 20px;
    padding: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-bg);
}
.heftchen-wiki-source-box h5 {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    background: transparent;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}
.btn-wiki-link:hover { background: var(--accent-glow); color: var(--text-primary); border-color: var(--accent); }

.heftchen-ai-enhancer-card {
    background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(139,92,246,0.04));
    border: 1px solid rgba(167,139,250,0.25);
    border-radius: 8px;
    padding: 16px;
}
.heftchen-ai-enhancer-card h5 {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-ai-enhance {
    padding: 10px 16px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}
.btn-ai-enhance:hover:not([disabled]) { opacity: 0.87; }
.btn-ai-enhance[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Refresh button in booklet header ────────────────── */
.btn-booklet-refresh {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: background 0.15s;
}
.btn-booklet-refresh:hover { background: var(--accent-glow); color: var(--text-primary); }

/* ── Scrollbar in booklet ─────────────────────────────── */
.heftchen-page::-webkit-scrollbar,
.heftchen-track-selector-pane::-webkit-scrollbar,
.heftchen-story-main::-webkit-scrollbar,
.heftchen-credits-main::-webkit-scrollbar,
.heftchen-lyrics-scroll-box::-webkit-scrollbar { width: 4px; }
.heftchen-page::-webkit-scrollbar-thumb,
.heftchen-track-selector-pane::-webkit-scrollbar-thumb,
.heftchen-story-main::-webkit-scrollbar-thumb,
.heftchen-credits-main::-webkit-scrollbar-thumb,
.heftchen-lyrics-scroll-box::-webkit-scrollbar-thumb {
    background: var(--accent-glow);
    border-radius: 2px;
}

/* ==========================================================================
   🎛️ INTEGRATED SOUND & PITCH STUDIO (Directly under the Turntable)
   ========================================================================== */

.deck-dsp-toggle-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border, rgba(255,255,255,0.06));
}

.deck-dsp-toggle-btn,
.deck-booklet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border, rgba(255,255,255,0.1));
    border-radius: 20px;
    padding: 6px 14px;
    font-family: 'Jost', 'League Spartan', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.deck-booklet-btn i {
    color: var(--accent, #c68a4c);
    font-size: 0.82rem;
}

.deck-dsp-toggle-btn i.fa-sliders-h {
    color: var(--accent, #c68a4c);
    font-size: 0.8rem;
}

.deck-dsp-toggle-btn .dsp-chevron {
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.deck-dsp-toggle-btn:hover,
.deck-booklet-btn:hover {
    background: var(--accent-glow, rgba(198,138,76,0.15));
    border-color: var(--accent, #c68a4c);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.deck-dsp-toggle-btn.active {
    background: var(--accent, #c68a4c);
    color: #111;
    border-color: var(--accent, #c68a4c);
}
.deck-dsp-toggle-btn.active i.fa-sliders-h {
    color: #111;
}

/* Expanded Hardware Panel */
.turntable-dsp-panel {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(14, 14, 20, 0.94);
    border: 1px solid var(--panel-border, rgba(255,255,255,0.12));
    border-top: 2px solid var(--accent, #c68a4c);
    border-radius: 8px;
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 30px rgba(0,0,0,0.5);
    animation: dspSlideDown 0.22s ease forwards;
    text-align: left;
}

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

.dsp-hardware-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 12px 14px;
}

.dsp-hardware-card.pitch-card {
    background: linear-gradient(135deg, rgba(198, 138, 76, 0.1) 0%, rgba(20, 20, 28, 0.5) 100%);
    border-color: rgba(198, 138, 76, 0.25);
}

.dsp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 8px;
    flex-wrap: wrap;
}

.dsp-card-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--accent, #c68a4c);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dsp-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(198, 138, 76, 0.3);
}

.dsp-badge-small {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent, #c68a4c);
}

/* RPM Buttons */
.dsp-rpm-buttons {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.rpm-btn {
    flex: 1;
    padding: 7px 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.74rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.rpm-btn:hover {
    background: var(--accent-glow, rgba(198,138,76,0.15));
    color: var(--text-primary);
}

.rpm-btn.active {
    background: var(--accent, #c68a4c);
    color: #111;
    border-color: var(--accent, #c68a4c);
}

/* Pitch Fader Box */
.dsp-pitch-fader-box {
    margin-bottom: 8px;
}

.dsp-fader-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted, #777);
    margin-bottom: 4px;
    font-family: monospace;
}

.dsp-horizontal-slider {
    width: 100%;
    accent-color: var(--accent, #c68a4c);
    cursor: pointer;
    height: 5px;
}

.dsp-pitch-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 10px;
    flex-wrap: wrap;
}

.dsp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.dsp-checkbox-label input { accent-color: var(--accent, #c68a4c); }

.dsp-reset-btn {
    background: transparent;
    border: 1px solid var(--panel-border, rgba(255,255,255,0.15));
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.dsp-reset-btn:hover {
    background: var(--accent-glow);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* Preset Dropdown */
.dsp-preset-select {
    background: rgba(0, 0, 0, 0.6);
    color: var(--accent, #c68a4c);
    border: 1px solid rgba(198, 138, 76, 0.35);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

/* 5-Band Vertical EQ */
.dsp-eq-grid {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 0;
}

.dsp-eq-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.eq-gain {
    font-size: 0.66rem;
    color: var(--accent, #c68a4c);
    font-weight: 800;
    font-family: monospace;
}

.dsp-vertical-slider {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 80px;
    accent-color: var(--accent, #c68a4c);
    cursor: pointer;
}

.eq-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.eq-label small {
    font-size: 0.55rem;
    color: var(--text-muted, #777);
    letter-spacing: 0.5px;
}

/* FX Grid */
.dsp-fx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 540px) {
    .dsp-fx-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CROSS-PLATFORM COMPATIBILITY FIXES  (v170)
   Touch, iOS Safari, Android Chrome, Firefox
   ============================================================ */

/* 1. -webkit-user-select: none for Safari/iOS compatibility */
* {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
.btn,
.alpha-nav span,
.album-card,
.cover-item,
.deck-btn,
.nav-tab,
.ctx-btn,
.album-ctx-item,
.deck-dsp-toggle-btn,
.playlist-item,
.crate-sort-btn {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* 2. Restrict :hover effects to devices with a real pointer (mouse/trackpad).
      Touch devices get sticky hover without this guard, which looks broken. */
@media (hover: none) {
    /* Kill all hover highlight states on touch-only devices */
    .album-card:hover,
    .album-card:hover .album-info,
    .cover-item:hover,
    .nav-tab:hover,
    .album-ctx-item:hover,
    .deck-btn:hover,
    .btn:hover,
    .crate-sort-btn:hover,
    .sync-crate-highlight-btn:hover,
    .sync-header-btn:hover,
    .alpha-nav span:hover,
    .playlist-item:hover {
        transform: none !important;
        background: unset !important;
        box-shadow: unset !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /* Booklet nav buttons – no hover glow on touch */
    .booklet-nav-btn:hover,
    .heftchen-nav-btn:hover {
        background: rgba(255,255,255,0.06) !important;
        transform: none !important;
    }
}

/* 3. iOS momentum scrolling for all overflow containers */
.modal-body,
.heftchen-lyrics-content,
.heftchen-story-body,
.playlist-tracks-list,
.crate-grid,
.cover-flow-wrapper,
.queue-list,
.sync-hub-body,
[class*="-scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 4. Booklet modal full-screen on very small phones */
@media (max-width: 500px) {
    .booklet-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Show a swipe hint on first page */
    .heftchen-page.page-1::after {
        content: '← Wischen zum Blättern →';
        display: block;
        text-align: center;
        font-size: 0.65rem;
        color: rgba(255,255,255,0.25);
        letter-spacing: 1px;
        margin-top: 8px;
    }
}

/* 5. Crate artist navigator: stack to single column on narrow phones */
@media (max-width: 380px) {
    #crateArtistNavigator {
        flex-direction: column !important;
        align-items: center !important;
    }
    .crate-nav-prev,
    .crate-nav-next {
        display: none !important;
    }
}