/* ============================================
   VINYL COLLECTION - CUSTOM STYLES
   Skeuomorphic effects and custom gradients
   ============================================ */

/* Navigation Bar */
.main-nav {
    background: linear-gradient(135deg, #533622 0%, #95664f 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.nav-icon {
    width: 32px;
    height: 32px;
    color: #FFD6E8;
    filter: invert(1);
}

.nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.025em;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-email {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.logout-btn {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.logout-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

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

/* Language Switcher */
.language-switcher {
    position: relative;
    display: inline-block;
}

.language-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.language-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

.lang-flag {
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    overflow: hidden;
}

.lang-option {
    width: 100%;
    padding: 0.75rem 1rem;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    transition: background 0.2s ease;
    color: #2C3E50;
}

.lang-option:hover {
    background: #F3F4F6;
}

.lang-option .lang-flag {
    font-size: 1.25rem;
}

.lang-option span:last-child {
    font-weight: 500;
}

/* Landing Page */
.landing-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #FAF8F3 0%, #F5EFE6 50%, #E8DED0 100%);
}

/* Landing Navigation */
.landing-nav {
    background: linear-gradient(135deg, #533622 0%, #95664f 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.landing-nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.landing-auth-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.landing-auth-btn.signup-btn {
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.2);
}

.landing-auth-btn.signup-btn:hover {
    box-shadow: 0 4px 6px rgba(236, 72, 153, 0.3);
    transform: translateY(-1px);
}

.landing-auth-btn.login-btn {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.landing-auth-btn.login-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Landing Hero Section */
.landing-hero {
    text-align: center;
    padding: 4rem 2rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.landing-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #2C3E50;
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.landing-hero-subtitle {
    font-size: 1.375rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.hero-signup-btn {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 16px rgba(236, 72, 153, 0.3);
}

.hero-signup-btn:hover {
    box-shadow: 0 12px 24px rgba(236, 72, 153, 0.4);
    transform: translateY(-2px);
}

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

/* Landing Shelves Section */
.landing-shelves-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    width: 100%;
}

/* Landing Footer */
.landing-footer {
    background: linear-gradient(135deg, #533622 0%, #95664f 100%);
    color: white;
    margin-top: 4rem;
    padding: 3rem 0 1.5rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.landing-footer-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.landing-footer-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.landing-footer-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
}

.landing-footer-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFD6E8;
    margin: 0 0 0.5rem 0;
}

.landing-footer-description {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

.landing-footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #FFD6E8;
    margin: 0 0 0.5rem 0;
}

.landing-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.landing-footer-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.landing-footer-link:hover {
    color: #FFD6E8;
    text-decoration: underline;
}

.landing-footer-tech {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin: 0;
    font-size: 0.95rem;
}

.landing-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.landing-footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.9rem;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .landing-footer {
        padding: 2rem 0 1rem;
        margin-top: 2rem;
    }
    
    .landing-footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .landing-footer-title {
        font-size: 1.25rem;
    }
}

/* Auth Modal */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.auth-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 480px;
    width: 100%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.auth-modal.visible .auth-modal-content {
    transform: scale(1);
}

.close-auth-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
}

.close-auth-modal:hover {
    color: #333;
}

.auth-form-container {
    padding: 2.5rem;
}

.auth-form-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 1.5rem;
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.auth-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.auth-form-group input {
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    color: #1f2937;
    transition: all 0.2s ease;
    background: white;
}

.auth-form-group input:focus {
    outline: none;
    border-color: #EC4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.auth-form-group input::placeholder {
    color: #9ca3af;
}

.auth-error {
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-success {
    padding: 0.75rem 1rem;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    color: #065f46;
    font-size: 0.875rem;
    font-weight: 500;
}

.auth-submit-btn {
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.3);
}

.auth-submit-btn:hover {
    box-shadow: 0 6px 10px -1px rgba(236, 72, 153, 0.4);
    transform: translateY(-1px);
}

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

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.auth-switch-btn {
    background: none;
    border: none;
    color: #EC4899;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    margin-left: 0.25rem;
}

.auth-switch-btn:hover {
    color: #DB2777;
}

/* Responsive adjustments for landing page */
@media (max-width: 640px) {
    .landing-hero-title {
        font-size: 2.25rem;
    }
    
    .landing-hero-subtitle {
        font-size: 1.125rem;
    }
    
    .landing-hero {
        padding: 3rem 1.5rem 2rem;
    }
    
    .hero-signup-btn {
        font-size: 1rem;
        padding: 0.875rem 2rem;
    }
    
    .landing-auth-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    .user-email {
        display: none;
    }
    
    .nav-container {
        padding: 0.75rem 1rem;
    }
    
    .nav-title {
        font-size: 1rem;
    }
    
    .nav-icon {
        width: 24px;
        height: 24px;
    }
}

/* Active state for density buttons */
.density-btn.active {
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.3), 
                0 2px 4px -1px rgba(236, 72, 153, 0.2);
}

.density-btn.active svg rect {
    fill: #EC4899;
}

.density-btn.active span {
    color: #DB2777;
    font-weight: 600;
}

/* Shelf base styling with wood grain effect and isometric perspective */
.shelf {
    position: relative;
    width: 100%;
    height: 24px; /* Reduced from 40px for thinner appearance */
    background: linear-gradient(to bottom, 
        #D4C4A8 0%, 
        #C8B89C 50%, 
        #BCA788 100%);
    border-radius: 2px;
    
    /* Isometric perspective effect - create depth */
    transform-style: preserve-3d;
    
    /* Multi-layer shadow for isometric depth */
    box-shadow: 
        /* Top highlight for realism */
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        /* Inner shadow for depth */
        inset 0 -1px 3px rgba(0, 0, 0, 0.1),
        /* Main shelf shadow - shorter for thinner shelf */
        0 6px 12px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1),
        /* Isometric depth layers - simulate 3D shelf thickness */
        0 1px 0 #A89B85,
        0 2px 0 #9D9078,
        0 3px 0 #92856B,
        0 4px 2px rgba(0, 0, 0, 0.2);
    
    /* Position shelf normally */
    margin-top: 0;
    z-index: 1;
}

/* Top edge highlight for 3D effect */
.shelf::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.6), 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.6));
    border-radius: 4px 4px 0 0;
}

/* Vinyl records container */
.vinyl-records {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    /* Remove padding to allow full width */
    padding: 0;
    /* Add small margins on sides (about half a record width) */
    margin: 0 60px;
    transition: all 0.5s ease-in-out;
    /* Position records to slightly overlap the shelf */
    margin-bottom: -8px; /* Negative margin to overlap shelf */
    position: relative;
    z-index: 2;
    /* iOS Safari optimization - prevent flickering */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

/* Individual vinyl box */
.vinyl-box {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    box-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.15),
        4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    /* Position boxes to slightly overlap the shelf */
    margin-bottom: -8px; /* Negative margin to overlap shelf */
    /* Prepare for smooth animations */
    will-change: transform, opacity;
    /* Enable 3D transforms for flip animation */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* iOS Safari optimization - prevent flickering */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Front and back faces of vinyl box */
.vinyl-box-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Force GPU acceleration for Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.vinyl-box-front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}

.vinyl-box-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* Placeholder for vinyl box when enlarged */
.vinyl-placeholder {
    position: relative;
    aspect-ratio: 1 / 1;
    /* Invisible but takes up space */
    visibility: hidden;
    pointer-events: none;
    /* Preserve the same margin as vinyl-box to prevent layout shift */
    margin-bottom: -8px;
    /* Smooth transition for placeholder appearance */
    transition: opacity 0.2s ease-out;
}

/* Spine effect on left side */
.vinyl-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.3), 
        rgba(0, 0, 0, 0.1), 
        transparent);
    border-radius: 6px 0 0 6px;
}

/* Hover effect - lift animation */
.vinyl-box:hover {
    transform: translateY(-8px);
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.2),
        6px 6px 12px rgba(0, 0, 0, 0.15),
        8px 8px 16px rgba(0, 0, 0, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}

/* Enlarged vinyl box state */
.vinyl-box.enlarged {
    /* Position and scale are controlled by JavaScript for consistency across modes */
    z-index: 99999 !important; /* Maximum z-index to ensure it's always on top */
    cursor: pointer;
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.5),
        0 15px 25px -5px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    /* Fast but smooth animation with custom easing */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Ensure the box is not affected by any parent overflow settings */
    max-width: none !important;
    max-height: none !important;
    /* Optimize rendering performance */
    will-change: transform, box-shadow;
    /* 3D transform for flip animation */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Flipped state - realistic 3D rotation */
.vinyl-box.enlarged.flipped {
    /* Transform is controlled by JavaScript */
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Force 3D context preservation on Safari */
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* Animation state when box is being enlarged */
.vinyl-box.enlarging {
    animation: expandBox 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animation state when box is being returned */
.vinyl-box.shrinking {
    animation: contractBox 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* Keep box in center during shrinking */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
}

/* Keyframe animations - scale values are controlled by JavaScript */
@keyframes expandBox {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes contractBox {
    0% {
        opacity: 1;
        box-shadow: 
            0 30px 60px -12px rgba(0, 0, 0, 0.5),
            0 15px 25px -5px rgba(0, 0, 0, 0.3),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
    100% {
        opacity: 1;
        box-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.15),
            4px 4px 8px rgba(0, 0, 0, 0.1),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
}

@keyframes contractBoxFlipped {
    0% {
        opacity: 1;
        box-shadow: 
            0 30px 60px -12px rgba(0, 0, 0, 0.5),
            0 15px 25px -5px rgba(0, 0, 0, 0.3),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
    100% {
        opacity: 1;
        box-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.15),
            4px 4px 8px rgba(0, 0, 0, 0.1),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
}

/* Overlay to block scroll and clicks on other elements */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark semi-transparent overlay */
    z-index: 99998; /* Just below the enlarged box */
    display: none; /* Hidden by default */
    /* Prevent any interaction with elements behind the overlay */
    pointer-events: auto;
    /* Smooth fade in/out */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

/* Overlay visible state */
.overlay.visible {
    opacity: 1;
}

/* Flip button for enlarged vinyl box */
.flip-button {
    position: fixed; /* Fixed to viewport, not the box */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 36px; /* Restored original size for better usability */
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 100000; /* Above the enlarged box */
    transition: opacity 0.1s ease-out, background 0.3s, box-shadow 0.3s;
    color: #333;
    /* Prevent blur on small elements */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
}

.flip-button:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flip-button:active {
    background: rgba(255, 255, 255, 0.9);
}

.flip-button.visible {
    display: flex;
    opacity: 1;
}

.flip-button.hiding {
    opacity: 0;
}

.flip-button svg {
    width: 20px; /* Larger icon for better visibility */
    height: 20px;
    /* Prevent blur on small SVG */
    shape-rendering: crispEdges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Tracks button (left side, similar to flip button) */
.tracks-button {
    position: fixed;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
    height: 36px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: opacity 0.1s ease-out, background 0.3s, box-shadow 0.3s;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.tracks-button:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tracks-button:active {
    background: rgba(255, 255, 255, 0.9);
}

.tracks-button.visible {
    display: flex;
    opacity: 1;
}

.tracks-button.hiding {
    opacity: 0;
}

.tracks-button-text {
    color: #333;
}

/* Close box button (top-right, next to flip button) */
.close-box-button {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    transition: opacity 0.1s ease-out, background 0.3s, box-shadow 0.3s;
    color: #333;
}

.close-box-button:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #DB2777;
}

.close-box-button:active {
    background: rgba(255, 255, 255, 0.9);
}

.close-box-button.visible {
    display: flex;
    opacity: 1;
}

.close-box-button svg {
    width: 18px;
    height: 18px;
}

/* Gradient definitions for vinyl boxes */
.gradient-g1 {
    background: linear-gradient(to bottom, 
        #FFD6E8 0%, 
        #E8D6FF 100%);
}

.gradient-g2 {
    background: linear-gradient(135deg, 
        #C7F0DB 0%, 
        #C7E7FF 100%);
}

.gradient-g3 {
    background: linear-gradient(to bottom, 
        #FFE5C7 0%, 
        #FFF4C7 100%);
}

.gradient-g4 {
    background: linear-gradient(-135deg, 
        #E8D6FF 0%, 
        #C7F0DB 100%);
}

.gradient-g5 {
    background: radial-gradient(circle at center, 
        #C7E7FF 0%, 
        #FFD6E8 100%);
}

.gradient-g6 {
    background: linear-gradient(to bottom, 
        #FFF4C7 0%, 
        #FFE5C7 100%);
}

.gradient-g7 {
    background: linear-gradient(135deg, 
        #FFD6E8 0%, 
        #C7F0DB 100%);
}

.gradient-g8 {
    background: linear-gradient(to bottom, 
        #C7E7FF 0%, 
        #E8D6FF 100%);
}

/* Size variants for different density modes */
.vinyl-box.size-small {
    width: 80px;
}

.vinyl-box.size-medium {
    width: 110px;
}

.vinyl-box.size-large {
    width: 150px;
}

/* Increase gap for spacious mode */
.vinyl-records:has(.vinyl-box.size-large) {
    gap: 18px;
}

/* Medium gap for standard mode */
.vinyl-records:has(.vinyl-box.size-medium) {
    gap: 14px;
}

/* Smaller gap for compact mode */
.vinyl-records:has(.vinyl-box.size-small) {
    gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    /* Mobile: boxes fill available width with dynamic sizing */
    .vinyl-box.size-small {
        /* Compact mode: 5 boxes per shelf */
        flex: 1;
        max-width: calc((100% - (4px * 4)) / 5); /* Full width minus gaps, divided by 5 */
    }
    
    .vinyl-box.size-medium {
        /* Standard mode: 3 boxes per shelf */
        flex: 1;
        max-width: calc((100% - (4px * 2)) / 3); /* Full width minus gaps, divided by 3 */
    }
    
    .vinyl-box.size-large {
        /* Spacious mode: 2 boxes per shelf */
        flex: 1;
        max-width: calc((100% - 4px) / 2); /* Full width minus gap, divided by 2 */
    }
    
    /* Adjust box overlap for mobile */
    .vinyl-box {
        margin-bottom: -6px; /* Less overlap on mobile */
    }
    
    .shelf {
        height: 18px; /* Thinner on mobile */
        margin-top: 0;
        /* Simplified shadows for mobile performance */
        box-shadow: 
            inset 0 1px 2px rgba(255, 255, 255, 0.5),
            inset 0 -1px 3px rgba(0, 0, 0, 0.1),
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 1px 0 #A89B85,
            0 2px 0 #9D9078,
            0 3px 2px rgba(0, 0, 0, 0.2);
    }
    
    /* Very compact spacing for mobile */
    .shelf-container {
        padding-top: 2px;
        margin-bottom: 0;
    }
    
    .shelf-container:first-child {
        padding-top: 0;
    }
    
    .vinyl-records {
        gap: 4px;
        /* Remove side margins to use full width */
        margin: 0 8px; /* Minimal margins for edge spacing */
        margin-bottom: -6px; /* Negative margin for overlap on mobile */
        /* Ensure boxes fill available space */
        width: calc(100% - 16px); /* Account for minimal margins */
    }
    
    /* Adjust enlargement for mobile */
    .vinyl-box.enlarged {
        /* Scale is controlled by JavaScript for consistency */
        /* Slightly faster animation on mobile */
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-style: preserve-3d;
    }
    
    .vinyl-box.enlarged.flipped {
        /* Transform is controlled by JavaScript */
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .vinyl-box.size-small {
        width: 70px;
    }
    
    .vinyl-box.size-medium {
        width: 95px;
    }
    
    .vinyl-box.size-large {
        width: 130px;
    }
    
    .vinyl-records {
        margin: 0 50px;
    }
    
    .vinyl-box.enlarged {
        /* Scale is controlled by JavaScript for consistency */
        transform-style: preserve-3d;
    }
    
    .vinyl-box.enlarged.flipped {
        /* Transform is controlled by JavaScript */
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

@media (min-width: 1280px) {
    .vinyl-box.size-small {
        width: 90px;
    }
    
    .vinyl-box.size-medium {
        width: 120px;
    }
    
    .vinyl-box.size-large {
        width: 160px;
    }
    
    .vinyl-records {
        margin: 0 60px;
    }
    
    /* Scale is controlled by JavaScript for consistency across all modes */
}

/* Animation for shelf appearance */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shelf-container {
    /* Remove slideIn animation - shelves should be visible immediately */
    /* animation: slideInLeft 0.8s ease-out forwards; */
    /* animation-fill-mode: both; */
    opacity: 1; /* Changed from 0 to 1 - visible immediately */
    position: relative;
    /* Very compact spacing: minimal gap between shelves */
    padding-top: 2px;
    margin-bottom: 0;
    /* Ensure shelf doesn't shift when box is removed from flow */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* iOS Safari optimization - prevent flickering during scroll */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent animation from retriggering */
    will-change: auto;
}

/* Remove animated class - no longer needed */
/* .shelf-container.animated {
    animation: none;
    opacity: 1;
    transform: translateX(0);
} */

/* Remove padding on first shelf */
.shelf-container:first-child {
    padding-top: 0;
}

/* Stagger animation delays - DISABLED since animation is removed */
/* .shelf-container:nth-child(1) {
    animation-delay: 0.1s;
}

.shelf-container:nth-child(2) {
    animation-delay: 0.25s;
}

.shelf-container:nth-child(3) {
    animation-delay: 0.4s;
}

.shelf-container:nth-child(4) {
    animation-delay: 0.55s;
}

.shelf-container:nth-child(5) {
    animation-delay: 0.7s;
}

.shelf-container:nth-child(6) {
    animation-delay: 0.85s;
} */

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .vinyl-box,
    .density-btn,
    .shelf-container {
        animation: none;
        transition: none;
    }
    
    .vinyl-box:hover {
        transform: none;
    }
}

/* Button scale animation on click */
.density-btn:active {
    transform: scale(0.95);
}

/* Focus visible for keyboard navigation */
.density-btn:focus-visible {
    outline: 3px solid #EC4899;
    outline-offset: 2px;
}

/* Vinyl disc styles */
.vinyl-disc {
    position: absolute;
    top: 50%;
    left: 50%; /* Start from center */
    transform: translate(-50%, -50%); /* Center the disc */
    width: 95%; /* Increased from 85% - disc is now just slightly smaller than box */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #1a1a1a; /* Black vinyl */
    /* Add realistic vinyl texture */
    background-image: url('../assets/vinyl_real.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Behind the enlarged box */
    pointer-events: none; /* Don't interfere with clicks */
    /* Keep only outer shadow for depth */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    /* Always fully opaque */
    opacity: 1;
    /* Smooth animation - only position, no opacity */
    transition: transform 0.4s ease-out;
}

/* Vinyl spinning animation */
@keyframes vinylSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes vinylSpinVisible {
    from { transform: translate(0%, -50%) rotate(0deg); }
    to { transform: translate(0%, -50%) rotate(360deg); }
}

@keyframes vinylSpinVisibleMobile {
    from { transform: translate(-50%, -100%) rotate(0deg); }
    to { transform: translate(-50%, -100%) rotate(360deg); }
}

/* When vinyl is spinning */
.vinyl-disc.spinning {
    animation: vinylSpin 2s linear infinite;
}

.vinyl-disc.visible.spinning {
    animation: vinylSpinVisible 2s linear infinite;
}

@media (max-width: 767px) {
    .vinyl-disc.visible.spinning {
        animation: vinylSpinVisibleMobile 2s linear infinite;
    }
}

/* Smooth deceleration when stopping */
.vinyl-disc.stopping {
    animation: none;
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.4, 1);
}

/* Vinyl disc center label (white) */
.vinyl-disc::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; /* Center label size */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #f5f5f5; /* White center */
    box-shadow: 
        0 0 0 2px #e0e0e0,
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Center hole */
.vinyl-disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8%; /* Small center hole */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #2a2a2a;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Label text container on white center */
.vinyl-label-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Align to the top */
    width: 28%; /* Slightly smaller than white center to fit text */
    height: 28%;
    text-align: center;
    pointer-events: none;
    /* Prevent text selection */
    user-select: none;
    padding-top: 0.1em; /* Small padding from the top edge */
}

/* Individual text lines */
.vinyl-label-text .title {
    font-size: 0.039em;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.1;
    margin-bottom: 0.017em;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vinyl-label-text .artist {
    font-size: 0.031em;
    font-weight: 500;
    color: #2a2a2a;
    line-height: 1.1;
    margin-bottom: 0.017em;
    /* Limit to 1 line with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vinyl-label-text .year {
    font-size: 0.02em;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1;
    white-space: nowrap;
}

/* Visible state - slide out to the right */
.vinyl-disc.visible {
    transform: translate(0%, -50%); /* Slide to the right, showing ~50% of disc */
}

/* Hide state - slide back to center */
.vinyl-disc.hiding {
    transform: translate(-50%, -50%); /* Return to center */
    transition: transform 0.3s ease-in;
}

/* Mobile: vinyl disc appears above the box */
@media (max-width: 767px) {
    .vinyl-disc.visible {
        transform: translate(-50%, -100%); /* Slide up above the box, showing ~50% */
    }
    
    .vinyl-disc.hiding {
        transform: translate(-50%, -50%); /* Return to center */
    }
}

/* Caption for enlarged vinyl box */
.vinyl-caption {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100001; /* Above the enlarged box and flip button */
    text-align: center;
    pointer-events: none; /* Don't block clicks */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    max-width: 90%;
    padding: 0 20px;
}

.vinyl-caption.visible {
    opacity: 1;
}

.vinyl-caption-title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
    pointer-events: none; /* Don't block clicks */
}

.vinyl-caption-artist {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none; /* Don't block clicks */
}

/* View Tracks Button */
.view-tracks-btn {
    display: inline-block;
    margin-top: 0;
    font-size: 14px;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: auto;
    z-index: 1;
    position: relative;
    background: none;
    border: none;
}

.view-tracks-btn:hover {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Buttons container for edit and delete links */
.vinyl-caption-buttons {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* Enable clicks on buttons */
}

/* Delete record link */
.delete-record-link {
    display: inline-block;
    margin-top: 0; /* Remove top margin, handled by container */
    font-size: 14px;
    font-weight: 500;
    color: #ef4444;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: auto; /* Enable clicks on the link */
    z-index: 1; /* Ensure it's above siblings */
    position: relative; /* Create stacking context */
}

.delete-record-link:hover {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Edit record link */
.edit-record-link {
    display: inline-block;
    margin-top: 0; /* Remove top margin, handled by container */
    margin-right: 0; /* Remove right margin, handled by gap */
    font-size: 14px;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: auto; /* Enable clicks on the link */
    z-index: 1; /* Ensure it's above siblings */
    position: relative; /* Create stacking context */
}

.edit-record-link:hover {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Responsive caption sizes */
@media (max-width: 767px) {
    .vinyl-caption-title {
        font-size: 24px;
    }
    
    .vinyl-caption-artist {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .vinyl-caption-title {
        font-size: 28px;
    }
    
    .vinyl-caption-artist {
        font-size: 18px;
    }
}

/* Add Vinyl Button */
.add-vinyl-btn {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: linear-gradient(135deg, #F5E6D3 0%, #E8DCC8 100%);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Position boxes to slightly overlap the shelf */
    margin-bottom: -8px;
    /* Prepare for smooth animations */
    will-change: transform, opacity;
    /* Use outline instead of border - outline NEVER affects element size */
    outline: 4px dashed #8B4513;
    outline-offset: -4px; /* Place outline inside the element */
}

/* Remove the pseudo-element as we're using outline now */
/*
.add-vinyl-btn::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 2px dashed #8B4513;
    border-radius: 2px;
    pointer-events: none;
    transition: border-color 0.3s ease;
}
*/

.add-vinyl-btn:hover {
    transform: translateY(-8px);
    background: linear-gradient(135deg, #E8DCC8 0%, #F5E6D3 100%);
    outline-color: #A0522D; /* Lighter brown on hover */
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.2),
        6px 6px 12px rgba(0, 0, 0, 0.15);
}

/* Remove hover effect for pseudo-element */
/*
.add-vinyl-btn:hover::before {
    border-color: #A0522D;
}
*/

.add-vinyl-btn svg {
    width: 50%;
    height: 50%;
    color: #8B4513;
    transition: all 0.3s ease;
}

.add-vinyl-btn:hover svg {
    color: #A0522D;
    transform: scale(1.1);
}

/* Size variants for add button */
.add-vinyl-btn.size-small {
    width: 80px;
}

.add-vinyl-btn.size-medium {
    width: 110px;
}

.add-vinyl-btn.size-large {
    width: 150px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .add-vinyl-btn {
        margin-bottom: -6px;
        outline-width: 3px; /* Thinner outline on mobile */
        outline-offset: -3px;
    }
    
    .add-vinyl-btn.size-small {
        width: auto !important; /* Override desktop fixed width */
        flex: 1 1 auto; /* Grow and shrink with other boxes */
        min-width: 0; /* Allow shrinking below content size */
        max-width: calc((100% - (4px * 4)) / 5);
    }
    
    .add-vinyl-btn.size-medium {
        width: auto !important; /* Override desktop fixed width */
        flex: 1 1 auto; /* Grow and shrink with other boxes */
        min-width: 0; /* Allow shrinking below content size */
        max-width: calc((100% - (4px * 2)) / 3);
    }
    
    .add-vinyl-btn.size-large {
        width: auto !important; /* Override desktop fixed width */
        flex: 1 1 auto; /* Grow and shrink with other boxes */
        min-width: 0; /* Allow shrinking below content size */
        max-width: calc((100% - 4px) / 2);
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .add-vinyl-btn.size-small {
        width: 70px;
    }
    
    .add-vinyl-btn.size-medium {
        width: 95px;
    }
    
    .add-vinyl-btn.size-large {
        width: 130px;
    }
}

@media (min-width: 1280px) {
    .add-vinyl-btn.size-small {
        width: 90px;
    }
    
    .add-vinyl-btn.size-medium {
        width: 120px;
    }
    
    .add-vinyl-btn.size-large {
        width: 160px;
    }
}

/* Add Vinyl Modal */
.add-vinyl-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.add-vinyl-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.add-vinyl-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.add-vinyl-modal.visible .add-vinyl-modal-content {
    transform: scale(1);
}

.add-vinyl-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e5e5e5;
}

.add-vinyl-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.close-modal-btn:hover {
    color: #333;
}

.add-vinyl-form {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #EC4899;
}

.form-group input::placeholder {
    color: #999;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-cancel,
.btn-submit {
    flex: 1;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.btn-cancel:hover {
    background: #e5e5e5;
    color: #333;
}

.btn-submit {
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.3);
}

.btn-submit:hover {
    box-shadow: 0 6px 10px -1px rgba(236, 72, 153, 0.4);
    transform: translateY(-1px);
}

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

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.form-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Delete Confirmation Modal */
.delete-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.delete-confirm-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.delete-confirm-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 100%;
    padding: 32px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.delete-confirm-modal.visible .delete-confirm-content {
    transform: scale(1);
}

.delete-confirm-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-confirm-icon svg {
    width: 36px;
    height: 36px;
    color: #dc2626;
}

.delete-confirm-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
}

.delete-confirm-content p {
    font-size: 16px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.delete-confirm-actions {
    display: flex;
    gap: 12px;
}

.btn-delete-cancel,
.btn-delete-confirm {
    flex: 1;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-delete-cancel {
    background: #f5f5f5;
    color: #666;
}

.btn-delete-cancel:hover {
    background: #e5e5e5;
    color: #333;
}

.btn-delete-confirm {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.3);
}

.btn-delete-confirm:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 10px -1px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

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

.btn-delete-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Discogs Search Styles */
.discogs-search-container {
    position: relative;
    display: flex;
    gap: 8px;
}

.discogs-search-container input {
    flex: 1;
}

.discogs-search-btn {
    padding: 12px 16px;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.discogs-search-btn:hover {
    border-color: #EC4899;
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.3);
}

.discogs-search-btn svg {
    width: 20px;
    height: 20px;
}

.discogs-results {
    margin-top: 12px;
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    background: white;
}

.discogs-result-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f5f5f5;
}

.discogs-result-item:last-child {
    border-bottom: none;
}

.discogs-result-item:hover {
    background: #f9f9f9;
}

.discogs-result-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    flex-shrink: 0;
}

.discogs-result-info {
    flex: 1;
    min-width: 0;
}

.discogs-result-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discogs-result-artist {
    font-size: 13px;
    color: #666;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discogs-result-year {
    font-size: 12px;
    color: #999;
}

.discogs-result-action {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.discogs-result-item:hover .discogs-result-action {
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

.discogs-loading {
    padding: 16px;
    text-align: center;
    color: #666;
    font-size: 14px;
    font-weight: 500;
}

.discogs-no-results {
    padding: 24px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* Discogs Pagination */
.discogs-pagination {
    padding: 16px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    background: #fafafa;
}

.discogs-pagination-info {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.discogs-load-more-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.discogs-load-more-btn:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(236, 72, 153, 0.3);
    transform: translateY(-2px);
}

.discogs-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e5e5;
}

.form-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tracklist Preview Styles */
.tracklist-preview {
    margin-top: 20px;
    padding: 16px;
    background: #f9f9f9;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
}

.tracklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e5e5;
}

.tracklist-header strong {
    font-size: 15px;
    color: #333;
}

.btn-edit-tracks {
    padding: 4px 12px;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    color: #DB2777;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-tracks:hover {
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
    transform: translateY(-1px);
}

.tracklist-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tracklist-side {
    background: white;
    border-radius: 6px;
    padding: 12px;
    border: 1px solid #e5e5e5;
}

.tracklist-side-header {
    font-size: 14px;
    font-weight: 700;
    color: #DB2777;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

.tracklist-side-tracks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
}

.track-position {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
    color: #999;
    font-size: 12px;
}

.track-title {
    flex: 1;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.track-duration {
    font-size: 12px;
    color: #666;
    font-family: 'Courier New', monospace;
    min-width: 48px;
    text-align: right;
}

/* Tracks Overlay Modal */
.tracks-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 100001; /* Above enlarged box and controls on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Desktop: lower z-index so tracks appear below the vinyl box but above overlay */
@media (min-width: 768px) {
    .tracks-overlay {
        z-index: 99998; /* Below enlarged box (99999), above or equal to overlay (99998) */
        background: transparent; /* Remove dark background on desktop */
        pointer-events: none; /* Allow clicks to pass through to overlay */
    }
    
    .tracks-overlay-content {
        pointer-events: auto; /* But allow clicks on the content itself */
    }
}

/* Desktop side panel mode */
@media (min-width: 768px) {
    .tracks-overlay.desktop-side-panel {
        background: transparent;
        pointer-events: none;
        padding: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .tracks-overlay.desktop-side-panel .tracks-overlay-content {
        pointer-events: auto;
        position: fixed;
        /* Position set by JS based on box location */
        max-width: 400px;
        margin: 0;
        border-radius: 16px 0 0 16px;
        /* Slide animation - start from right (hidden behind box) */
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
    }
    
    .tracks-overlay.desktop-side-panel.visible .tracks-overlay-content {
        transform: translateX(0);
    }
    
    /* Hide header on desktop side panel */
    .tracks-overlay.desktop-side-panel .tracks-overlay-header {
        display: none;
    }
    
    /* Adjust body to fill the space */
    .tracks-overlay.desktop-side-panel .tracks-overlay-body {
        border-radius: 16px 0 0 16px;
    }
}

.tracks-overlay.visible {
    opacity: 1;
}

.tracks-overlay-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.tracks-overlay.visible .tracks-overlay-content {
    transform: scale(1);
}

.tracks-overlay-header {
    padding: 24px;
    border-bottom: 2px solid #e5e5e5;
    position: relative;
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    border-radius: 16px 16px 0 0;
}

.tracks-overlay-title {
    font-size: 24px;
    font-weight: 700;
    color: #DB2777;
    margin-bottom: 4px;
    padding-right: 40px;
}

.tracks-overlay-artist {
    font-size: 16px;
    font-weight: 500;
    color: #a21659;
}

.tracks-overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 24px;
    color: #DB2777;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    font-weight: 300;
    font-family: Arial, sans-serif;
}

.tracks-overlay-close:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(219, 39, 119, 0.3);
}

.tracks-overlay-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.track-overlay-side {
    margin-bottom: 24px;
}

.track-overlay-side:last-child {
    margin-bottom: 0;
}

.track-overlay-side-header {
    font-size: 18px;
    font-weight: 700;
    color: #DB2777;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #FFD6E8;
}

.track-overlay-side-tracks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.track-overlay-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #f9f9f9;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.track-overlay-item:hover {
    background: #f0f0f0;
}

/* Track play button */
.track-play-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    padding: 0;
    position: relative;
}

/* Circular progress bar around play button */
.track-play-btn::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    transition: border-color 0.2s ease;
}

.track-play-btn.playing::before {
    border-color: #e5e5e5;
}

.track-play-btn.playing::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border-radius: 50%;
    background: conic-gradient(
        #1DB954 0deg,
        #1DB954 var(--progress-degrees, 0deg),
        transparent var(--progress-degrees, 0deg),
        transparent 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 50%, black 50%);
    mask: radial-gradient(circle, transparent 50%, black 50%);
    transition: none;
}

.track-play-btn:hover {
    background: linear-gradient(135deg, #1ed760 0%, #1fdf64 100%);
    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.4);
}

.track-play-btn svg {
    width: 16px;
    height: 16px;
    color: white;
}

.track-play-btn .play-icon {
    margin-left: 2px; /* Визуальное выравнивание треугольника */
}

/* Track loader */
.track-loader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.track-overlay-position {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    color: #DB2777;
    font-size: 14px;
    background: rgba(255, 214, 232, 0.5);
    border-radius: 4px;
    padding: 4px;
}

.track-overlay-title {
    flex: 1;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.track-overlay-duration {
    font-size: 14px;
    color: #666;
    font-family: 'Courier New', monospace;
    min-width: 56px;
    text-align: right;
    font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .tracks-overlay {
        background: transparent;
    }
    
    .tracks-overlay-content {
        max-height: 90vh;
    }
    
    .tracks-overlay-header {
        padding: 20px;
    }
    
    .tracks-overlay-title {
        font-size: 20px;
    }
    
    .tracks-overlay-artist {
        font-size: 14px;
    }
    
    .tracks-overlay-body {
        padding: 16px;
    }
    
    .track-overlay-side-header {
        font-size: 16px;
    }
    
    .track-overlay-item {
        padding: 6px 10px;
    }
    
    .track-overlay-position {
        min-width: 28px;
        font-size: 13px;
    }
    
    .track-overlay-title {
        font-size: 14px;
    }
    
    .track-overlay-duration {
        font-size: 13px;
        min-width: 48px;
    }
}

/* YouTube Player Container - Hidden (audio only) */
#youtube-preview-container {
    position: fixed;
    bottom: -1000px;
    left: -1000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}