:root {
    /* ========================================
       ZulfiyAan AI Studio - MASTER THEME TOKENS
       ======================================== */
    
    /* Core Background Colors (FINAL SPEC) */
    --bg-main: #050716;
    --bg-elevated: #0a0a1a;
    --bg-dark: #050716;
    --bg-primary: #080812;
    --bg-secondary: #0a0a18;
    --bg-tertiary: #11121B;
    
    /* Glass Effects (FINAL SPEC) */
    --glass: rgba(10, 10, 26, 0.75);
    --glass-elevated: rgba(10, 10, 26, 0.85);
    --glass-card: rgba(10, 10, 26, 0.75);
    --bg-card: rgba(10, 10, 26, 0.75);
    --bg-glass: rgba(10, 10, 26, 0.75);
    --bg-card-premium: linear-gradient(135deg, rgba(10, 10, 26, 0.85), rgba(5, 7, 22, 0.92));
    --bg-dropdown: rgba(12, 10, 32, 0.96);
    
    /* Accent Colors (exact spec) */
    --accent-a: #ff6fd8;
    --accent-b: #9b5cff;
    --accent-c: #46e1ff;
    --accent-primary: #9b5cff;
    --accent-secondary: #a855f7;
    --accent-tertiary: #c084fc;
    --accent-tertiary-alt: #d8b4fe;
    --accent-cyan: #46e1ff;
    --accent-pink: #ff6fd8;
    --accent-purple-bright: #9b5cff;
    --accent-blue-bright: #46e1ff;
    --accent-section-title: #8b7aff;
    
    /* Text Colors (FINAL SPEC) */
    --text-primary: #f8fafc;
    --text-secondary: #e7e1ff;
    --text-strong: #ffffff;
    --muted: rgba(255, 255, 255, 0.65);
    --subtle: rgba(255, 255, 255, 0.45);
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-hover: #ffffff;
    
    /* Border Colors (exact spec) */
    --outline-soft: rgba(255, 255, 255, 0.08);
    --border-color: rgba(170, 120, 255, 0.25);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-premium: rgba(180, 100, 255, 0.3);
    --border-hover: rgba(200, 130, 255, 0.45);
    --border-dropdown: rgba(170, 120, 255, 0.35);
    --border-brand: linear-gradient(135deg, rgba(255, 111, 216, 0.5) 0%, rgba(155, 92, 255, 0.5) 50%, rgba(70, 225, 255, 0.5) 100%);
    
    /* Premium Gradients */
    --accent-gradient: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 50%, var(--accent-c) 100%);
    --accent-gradient-premium: linear-gradient(90deg, var(--accent-a) 0%, var(--accent-b) 50%, var(--accent-c) 100%);
    --accent-gradient-brand: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 50%, var(--accent-c) 100%);
    --accent-gradient-header: linear-gradient(90deg, var(--accent-a) 0%, var(--accent-b) 50%, var(--accent-c) 100%);
    --accent-gradient-subtle: linear-gradient(135deg, rgba(155, 92, 255, 0.15) 0%, rgba(70, 225, 255, 0.1) 100%);
    --accent-gradient-border: linear-gradient(135deg, rgba(255, 111, 216, 0.5), rgba(155, 92, 255, 0.5), rgba(70, 225, 255, 0.5));
    
    /* Sidebar Gradient */
    --sidebar-gradient: linear-gradient(180deg, #050716, #0A0D1F);
    
    /* Glow Effects */
    --accent-glow: rgba(155, 92, 255, 0.4);
    --accent-glow-strong: rgba(155, 92, 255, 0.55);
    --accent-glow-brand: 0 0 40px rgba(155, 92, 255, 0.3), 0 0 80px rgba(255, 111, 216, 0.15);
    --header-glow: 0 0 32px rgba(155, 92, 255, 0.35);
    --sidebar-glow: 0 0 24px rgba(140, 80, 255, 0.55);
    --neon-edge: 0 0 24px rgba(140, 80, 255, 0.55);
    --neon-glow-hover: rgba(140, 80, 255, 0.25);
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    
    /* Shadow System */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.75);
    --shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 24px rgba(155, 92, 255, 0.35);
    --shadow-glow-lg: 0 0 40px rgba(155, 92, 255, 0.45);
    --shadow-glow-premium: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(140, 80, 255, 0.55);
    --shadow-glow-brand: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(155, 92, 255, 0.7);
    --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.7);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(155, 92, 255, 0.5);
    --shadow-dropdown: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(155, 92, 255, 0.5);
    
    /* Border Radius (exact spec) */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.125rem;
    --radius-2xl: 1.25rem;
    --radius-card: 20px;
    --radius-dropdown: 18px;
    --radius-pill: 9999px;
    --radius-full: 9999px;
    --radius-premium: 1.5rem;
    
    /* Transitions (exact spec) */
    --transition-fast: 150ms ease-out;
    --transition-normal: 180ms ease-out;
    --transition-slow: 220ms ease-out;
    --transition-premium: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-Index (exact spec) */
    --dropdown-z: 99999;
    --modal-z: 100000;
    --overlay-z: 99998;
    
    /* Layout */
    --sidebar-width: 260px;
    --max-content-width: 1280px;
    
    /* Spacing System */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    --spacing-section: 4rem;
    
    /* Icon Sizes */
    --icon-xs: 1rem;
    --icon-sm: 1.25rem;
    --icon-md: 1.5rem;
    --icon-lg: 2rem;
    --icon-xl: 2.5rem;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

.mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.hidden {
    display: none !important;
}

/* ========================================
   ZULFIYAAN COMPONENT LIBRARY (MASTER)
   ======================================== */

/* ============ GLOBAL GLASSMORPHISM LAYER ============ */
.glass-layer {
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* ============ PAGE TRANSITIONS ============ */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content,
.main-content > *:not(.flash-messages) {
    animation: pageEnter 300ms ease-out forwards;
}

/* Staggered section animations */
.section-animate {
    opacity: 0;
    animation: pageEnter 400ms ease-out forwards;
}

.section-animate:nth-child(1) { animation-delay: 0ms; }
.section-animate:nth-child(2) { animation-delay: 100ms; }
.section-animate:nth-child(3) { animation-delay: 200ms; }
.section-animate:nth-child(4) { animation-delay: 300ms; }
.section-animate:nth-child(5) { animation-delay: 400ms; }

/* ============ SECTION HEADERS WITH NEON UNDERLINE ============ */
.section-header {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(120deg, var(--accent-b), var(--accent-c));
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(155, 92, 255, 0.5);
}

.section-header.centered::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ============ APP-CARD (ULTRA PREMIUM) ============ */
.app-card {
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(160, 80, 255, 0.12);
    border-radius: 24px;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}

.app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155, 92, 255, 0.5), rgba(70, 225, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.app-card:hover {
    border-color: rgba(160, 80, 255, 0.25);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 16px rgba(150, 80, 255, 0.25);
    transform: translateY(-4px);
}

.app-card:hover::before {
    opacity: 1;
}

.app-card.no-hover:hover {
    transform: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Card premium glow effect */
.app-card.glow-on-hover:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(150, 80, 255, 0.35);
}

/* ============ PRIMARY BUTTON (ULTRA PREMIUM) ============ */
.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c));
    background-size: 200% 100%;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 0 24px rgba(160, 80, 255, 0.35);
    position: relative;
    overflow: hidden;
}

/* Shimmer highlight every 4s */
.primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: btnShimmer 4s ease-in-out infinite;
}

@keyframes btnShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Inner pulse effect */
.primary-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.primary-btn:hover {
    background-position: 100% 50%;
    transform: scale(1.03);
    filter: brightness(1.1);
    box-shadow: 0 0 28px rgba(160, 80, 255, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

.primary-btn:active::after {
    opacity: 1;
    animation: btnPulse 0.3s ease-out;
}

@keyframes btnPulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(100, 100, 120, 0.4);
    box-shadow: none;
    animation: none;
}

.primary-btn:disabled::before {
    animation: none;
}

.primary-btn.full-width {
    width: 100%;
}

/* Button ripple effect */
.primary-btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

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

/* ============ SECONDARY BUTTON ============ */
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-soft);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.secondary-btn:hover {
    color: #fff;
    border-color: var(--border-hover);
    background: rgba(155, 92, 255, 0.12);
    transform: translateY(-2px);
}

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

/* ============ ICON BUTTON (ULTRA PREMIUM) ============ */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(160, 80, 255, 0.12);
    border-radius: 12px;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
    transition: all var(--transition-fast);
}

.icon-btn:hover {
    color: #fff;
    border-color: rgba(160, 80, 255, 0.3);
    background: rgba(155, 92, 255, 0.18);
    box-shadow: 0 0 20px rgba(160, 80, 255, 0.3);
}

.icon-btn:hover svg {
    transform: rotate(6deg);
    filter: drop-shadow(0 0 8px rgba(155, 92, 255, 0.6));
}

/* ============ CHIP COMPONENT (ULTRA PREMIUM) ============ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(160, 80, 255, 0.12);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.chip-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.3), rgba(70, 225, 255, 0.25));
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.chip-icon svg {
    width: 14px;
    height: 14px;
    color: var(--accent-b);
    transition: all var(--transition-fast);
}

.chip:hover {
    color: #fff;
    border-color: rgba(180, 90, 255, 0.35);
    background: rgba(155, 92, 255, 0.15);
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 0 24px rgba(180, 90, 255, 0.45);
}

.chip:hover .chip-icon {
    animation: microBounce 0.4s ease;
}

@keyframes microBounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
}

.chip.selected {
    color: #fff;
    border-color: rgba(155, 92, 255, 0.5);
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.2), rgba(70, 225, 255, 0.15));
    box-shadow: inset 0 0 0 2px rgba(155, 92, 255, 0.3);
}

.chip.selected::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: transparent;
    animation: chipPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(155, 92, 255, 0.3); }
    50% { box-shadow: 0 0 0 4px rgba(155, 92, 255, 0.1); }
}

/* Staggered chip/preset fade-up animation (60ms delay) */
@keyframes chipFadeUp {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chip-animate,
.preset-animate { 
    animation: chipFadeUp 0.4s ease-out forwards; 
    opacity: 0; 
}
.chip-animate:nth-child(1), .preset-animate:nth-child(1) { animation-delay: 0ms; }
.chip-animate:nth-child(2), .preset-animate:nth-child(2) { animation-delay: 60ms; }
.chip-animate:nth-child(3), .preset-animate:nth-child(3) { animation-delay: 120ms; }
.chip-animate:nth-child(4), .preset-animate:nth-child(4) { animation-delay: 180ms; }
.chip-animate:nth-child(5), .preset-animate:nth-child(5) { animation-delay: 240ms; }
.chip-animate:nth-child(6), .preset-animate:nth-child(6) { animation-delay: 300ms; }
.chip-animate:nth-child(7), .preset-animate:nth-child(7) { animation-delay: 360ms; }
.chip-animate:nth-child(8), .preset-animate:nth-child(8) { animation-delay: 420ms; }

/* ============ APP DROPDOWN ============ */
.app-dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-dropdown label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-soft);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.dropdown-trigger:hover {
    border-color: var(--border-hover);
    background: rgba(155, 92, 255, 0.08);
}

.dropdown-trigger.is-open {
    border-color: var(--accent-b);
    box-shadow: 0 0 0 2px rgba(155, 92, 255, 0.16);
}

.dropdown-trigger svg.caret {
    width: 18px;
    height: 18px;
    color: var(--subtle);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.dropdown-trigger.is-open svg.caret {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.dropdown-panel {
    position: absolute;
    z-index: var(--dropdown-z) !important;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
    background: var(--bg-dropdown);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border-dropdown);
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease-out;
}

.dropdown-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-panel::-webkit-scrollbar {
    width: 4px;
}

.dropdown-panel::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-panel::-webkit-scrollbar-thumb {
    background: rgba(155, 92, 255, 0.3);
    border-radius: 4px;
}

/* Dropdown Section Headers */
.dropdown-section-header {
    padding: 12px 16px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--subtle);
}

.dropdown-divider {
    height: 1px;
    margin: 8px 16px;
    background: linear-gradient(90deg, transparent, rgba(155, 92, 255, 0.2), rgba(70, 225, 255, 0.15), transparent);
}

/* Dropdown Option */
.dropdown-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-strong);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
    position: relative;
}

.dropdown-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
    border-radius: 0 4px 4px 0;
    transition: height var(--transition-fast);
}

.dropdown-option:hover {
    background: rgba(255, 255, 255, 0.06);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.dropdown-option:hover::before {
    height: 20px;
}

.dropdown-option.selected {
    background: rgba(155, 92, 255, 0.12);
    color: var(--accent-tertiary-alt);
}

.dropdown-option.selected::before {
    height: 24px;
}

.dropdown-option .check-icon {
    width: 18px;
    height: 18px;
    color: var(--accent-b);
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.dropdown-option.selected .check-icon {
    opacity: 1;
}

/* Dropdown option with subtext */
.dropdown-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-option-subtext {
    font-size: 12px;
    color: var(--subtle);
}

/* ============ MOBILE BOTTOM SHEET DROPDOWN ============ */
@media (max-width: 768px) {
    .dropdown-panel.mobile-bottom-sheet {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 70vh;
        border-radius: 24px 24px 0 0;
        z-index: 100000;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .dropdown-panel.mobile-bottom-sheet.is-open {
        transform: translateY(0);
    }
    
    .dropdown-panel.mobile-bottom-sheet::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
    
    .dropdown-panel.mobile-bottom-sheet .dropdown-option {
        padding: 16px 20px;
        font-size: 16px;
    }
    
    /* Bottom sheet overlay */
    .dropdown-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .dropdown-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

/* ============ PRIMARY TEXTAREA ============ */
.primary-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-soft);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    resize: vertical;
    transition: all var(--transition-fast);
}

.primary-textarea::placeholder {
    color: var(--subtle);
}

.primary-textarea:focus {
    outline: none;
    border-color: var(--accent-b);
    box-shadow: 0 0 0 2px rgba(155, 92, 255, 0.16);
}

/* Textarea with counter */
.textarea-wrapper {
    position: relative;
}

.textarea-counter {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-size: 12px;
    color: var(--subtle);
}

.textarea-counter.warning { color: var(--warning); }
.textarea-counter.error { color: var(--error); }

/* ============ PRIMARY INPUT ============ */
.primary-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-soft);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.primary-input::placeholder {
    color: var(--subtle);
}

.primary-input:focus {
    outline: none;
    border-color: var(--accent-b);
    box-shadow: 0 0 0 2px rgba(155, 92, 255, 0.16);
}

/* ============ PREMIUM SLIDER (ULTRA) - GLOBAL ============ */
input[type="range"],
.premium-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, rgba(155, 92, 255, 0.3), rgba(70, 225, 255, 0.2));
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

input[type="range"]::-webkit-slider-track,
.premium-slider::-webkit-slider-track {
    height: 6px;
    background: linear-gradient(90deg, var(--accent-b), var(--accent-c));
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb,
.premium-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent-b), var(--accent-c));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(155, 92, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-fast);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

input[type="range"]:hover::-webkit-slider-thumb,
.premium-slider:hover::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 18px rgba(155, 92, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4);
}

input[type="range"]:active::-webkit-slider-thumb,
.premium-slider:active::-webkit-slider-thumb {
    animation: sliderPulse 0.3s ease-out;
}

/* Firefox slider styles */
input[type="range"]::-moz-range-track,
.premium-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, var(--accent-b), var(--accent-c));
    border-radius: 3px;
}

input[type="range"]::-moz-range-thumb,
.premium-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--accent-b), var(--accent-c));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(155, 92, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

@keyframes sliderPulse {
    0% { box-shadow: 0 0 12px rgba(155, 92, 255, 0.6); }
    50% { box-shadow: 0 0 24px rgba(155, 92, 255, 1); }
    100% { box-shadow: 0 0 12px rgba(155, 92, 255, 0.6); }
}

/* ============ PREMIUM UPLOAD ZONE ============ */
.premium-upload-zone,
.upload-zone,
.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
    background: rgba(10, 5, 25, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px dashed rgba(160, 80, 255, 0.25);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.premium-upload-zone::before,
.upload-zone::before,
.drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(160, 80, 255, 0.4);
    border-radius: 18px;
    opacity: 0;
    animation: dashMove 2s linear infinite;
    pointer-events: none;
}

@keyframes dashMove {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 100; }
}

.premium-upload-zone:hover,
.upload-zone:hover,
.drop-zone:hover {
    border-color: rgba(155, 92, 255, 0.5);
    background: rgba(155, 92, 255, 0.08);
    box-shadow: 0 0 24px rgba(155, 92, 255, 0.2);
}

.premium-upload-zone:hover::before,
.upload-zone:hover::before,
.drop-zone:hover::before {
    opacity: 1;
}

.premium-upload-zone.dragover,
.upload-zone.dragover,
.drop-zone.dragover {
    border-color: rgba(155, 92, 255, 0.7);
    background: rgba(155, 92, 255, 0.12);
    transform: scale(1.02);
    box-shadow: 0 0 32px rgba(155, 92, 255, 0.35);
}

.upload-zone-icon,
.upload-icon {
    width: 56px;
    height: 56px;
    color: var(--accent-b);
    animation: uploadPulse 1.5s ease-in-out infinite;
}

@keyframes uploadPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* ============ MICRO-ANIMATIONS ============ */
/* Icon lift on hover */
.icon-lift:hover svg,
.nav-item:hover svg,
.quick-tool-card:hover svg {
    transform: translateY(-3px);
}

/* Text gradient shimmer */
.text-shimmer {
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b), var(--accent-c), var(--accent-a));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s ease-in-out infinite;
}

@keyframes textShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Section fade-in with delay */
.fade-in-section {
    opacity: 0;
    animation: fadeInUp 400ms ease-out forwards;
}

.fade-in-section:nth-child(1) { animation-delay: 0ms; }
.fade-in-section:nth-child(2) { animation-delay: 150ms; }
.fade-in-section:nth-child(3) { animation-delay: 300ms; }
.fade-in-section:nth-child(4) { animation-delay: 450ms; }

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

/* Neon border glow */
.neon-border {
    border: 1px solid rgba(160, 80, 255, 0.25);
    box-shadow: 0 0 0 0 rgba(160, 80, 255, 0);
    transition: all var(--transition-normal);
}

.neon-border:hover {
    border-color: rgba(160, 80, 255, 0.5);
    box-shadow: 0 0 16px rgba(160, 80, 255, 0.3);
}

/* ============ TOGGLE SWITCH ============ */
.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.toggle-switch.active {
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
}

.toggle-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.toggle-switch.active::before {
    transform: translateX(24px);
}

/* ============ PAGE ANIMATIONS ============ */
@keyframes pageSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.page-animate {
    animation: pageSlideUp 0.5s ease-out forwards;
}

.page-fade {
    animation: pageFadeIn 0.4s ease-out forwards;
}

/* Staggered content animation */
.stagger-animate > * {
    opacity: 0;
    animation: pageSlideUp 0.4s ease-out forwards;
}

.stagger-animate > *:nth-child(1) { animation-delay: 0ms; }
.stagger-animate > *:nth-child(2) { animation-delay: 80ms; }
.stagger-animate > *:nth-child(3) { animation-delay: 160ms; }
.stagger-animate > *:nth-child(4) { animation-delay: 240ms; }
.stagger-animate > *:nth-child(5) { animation-delay: 320ms; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============ BASE STYLES ============ */
/* Base Card Style (legacy compatibility) */
.card-base {
    background: var(--bg-card-premium);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-card);
}

.card-base:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

/* Base Button Styles (legacy) */
.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--border-premium);
    color: var(--text-primary);
    backdrop-filter: blur(12px);
}

.btn-secondary:hover {
    border-color: var(--border-hover);
    background: rgba(155, 92, 255, 0.1);
    transform: translateY(-2px);
}

/* Base Icon Alignment */
.icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-inline svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

/* Base Link Styles */
a, .link-base {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover, .link-base:hover {
    color: var(--accent-secondary);
}

/* ========================================
   END COMPONENT LIBRARY
   ======================================== */

/* ========================================
   GLOBAL FOCUS & ACCESSIBILITY STYLES
   ======================================== */

/* Premium Focus Ring for Interactive Elements */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid rgba(140, 92, 255, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========================================
   GLOBAL ANIMATIONS FRAMEWORK
   ======================================== */

/* Smooth element enter animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(140, 92, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 35px rgba(140, 92, 255, 0.5);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   DROPDOWN Z-INDEX MANAGEMENT
   ======================================== */
.dropdown-container,
.tools-dropdown,
.modal-container,
.select-dropdown,
.premium-dropdown {
    z-index: 99999;
    position: absolute;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-radius: 16px;
    overflow: visible;
    margin-top: 6px;
    animation: dropdownOpen 180ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dropdownOpen {
    from {
        opacity: 0;
        transform: scale(0.94);
        filter: blur(12px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.modal-overlay,
.dropdown-overlay {
    z-index: 99998;
}

.sidebar {
    z-index: 1000;
}

.bottom-nav {
    z-index: 999;
}

/* Nav section dropdown fix */
.nav-section.has-dropdown-open {
    z-index: 99999;
}

button:focus-visible,
.nav-item:focus-visible,
.quick-tool-card:focus-visible,
.usecase-open-btn:focus-visible,
.hero-action-primary:focus-visible,
.hero-action-secondary:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.7);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Smooth Selection Highlighting */
::selection {
    background: rgba(99, 102, 241, 0.35);
    color: #fff;
}

::-moz-selection {
    background: rgba(99, 102, 241, 0.35);
    color: #fff;
}

/* Premium Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.4));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6));
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   END GLOBAL FOCUS & ACCESSIBILITY STYLES
   ======================================== */

.app-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--glass);
    background-image: linear-gradient(180deg, rgba(5, 7, 22, 0.92), rgba(10, 13, 31, 0.95));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid var(--outline-soft);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.26s ease-out;
    box-shadow: inset -1px 0 0 rgba(155, 92, 255, 0.1), 20px 0 50px -15px rgba(155, 92, 255, 0.2);
}

/* Border-right glow line */
.sidebar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(176, 108, 255, 0.4) 20%,
        rgba(180, 100, 255, 0.5) 50%,
        rgba(100, 200, 255, 0.3) 80%,
        transparent 100%
    );
    pointer-events: none;
}

/* ===== PREMIUM LOGO CARD ===== */
.sidebar-header-premium {
    padding: 1.25rem;
    margin: 0.75rem;
    background: rgba(22, 10, 40, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(180, 90, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 0 22px rgba(150, 60, 255, 0.35);
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header-premium:hover {
    transform: scale(1.015);
    box-shadow: 0 0 26px rgba(160, 70, 255, 0.55);
    border-color: rgba(180, 90, 255, 0.35);
}

/* Legacy sidebar header (kept for compatibility) */
.sidebar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

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

.logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-close {
    display: none;
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.sidebar-close:hover {
    background: var(--error);
    color: white;
}

.sidebar-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ===== PREMIUM SIDEBAR BRAND HEADER ===== */
.sidebar-header-premium {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
    position: relative;
    overflow: visible;
}

.brand-block-premium {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 1rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 0;
}

.brand-block-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.15), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.brand-block-premium:hover {
    border-color: rgba(99, 102, 241, 0.35);
    transform: scale(1.01);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-block-premium:hover::before {
    opacity: 1;
}

.brand-glow-premium {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.brand-block-premium:hover .brand-glow-premium {
    opacity: 1;
}

.brand-icon-container-premium {
    position: relative;
    flex-shrink: 0;
}

.brand-icon-glow-premium {
    position: absolute;
    inset: -6px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(168, 85, 247, 0.2) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0.8;
    animation: brandIconGlowPulse 3s ease-in-out infinite;
}

@keyframes brandIconGlowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.1); }
}

.brand-icon-premium {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.brand-icon-premium svg {
    width: 1.5rem;
    height: 1.5rem;
    z-index: 2;
}

.brand-pulse-ring-premium {
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    opacity: 0;
    animation: brandPulseRing 2.5s ease-out infinite;
}

.brand-pulse-ring-premium.delay {
    animation-delay: 1.25s;
}

@keyframes brandPulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.brand-text-premium {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.brand-name-premium {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.brand-name-main {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.brand-name-sub {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
}

.brand-tagline-premium {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(148, 163, 184, 0.7);
    text-transform: uppercase;
}

/* Premium Close Button */
.sidebar-close-premium {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0.625rem;
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sidebar-close-premium:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.95) 100%);
    border-color: rgba(239, 68, 68, 0.3);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.sidebar-close-premium svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Responsive - show close button on mobile */
@media (max-width: 1024px) {
    .sidebar-close-premium {
        display: flex;
    }
    
    .brand-block-premium {
        padding: 0.625rem 0.875rem;
    }
    
    .brand-icon-premium {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .brand-icon-premium svg {
        width: 1.375rem;
        height: 1.375rem;
    }
    
    .brand-name-main {
        font-size: 1rem;
    }
    
    .brand-name-sub {
        font-size: 0.9375rem;
    }
    
    .brand-tagline-premium {
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .sidebar-header-premium {
        padding: 1rem;
    }
    
    .brand-block-premium {
        padding: 0.5rem 0.75rem;
        gap: 0.625rem;
    }
    
    .brand-icon-container-premium {
        display: none;
    }
    
    .brand-name-main {
        font-size: 1.0625rem;
    }
    
    .brand-tagline-premium {
        display: none;
    }
}

/* ===== ULTRA-PREMIUM SIDEBAR NAV ===== */
.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sidebar-nav-premium {
    --section-delay: 0;
}

.nav-section {
    margin-bottom: 0.375rem;
}

/* Section Title - ULTRA PREMIUM Style */
.nav-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.375rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-section-title);
    text-shadow: 0 0 16px rgba(155, 92, 255, 0.5);
    position: relative;
    margin-top: 22px;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(8px);
}

/* Neon edge glow around category titles */
.nav-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(155, 92, 255, 0.6);
    opacity: 0.8;
    animation: sectionTitleRevealPremium 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nav-section:first-child .nav-section-title {
    margin-top: 0;
}

.nav-section-main .nav-section-title { animation-delay: 0ms; }
.nav-section.create-section .nav-section-title { animation-delay: 60ms; }
.nav-section.polish-section .nav-section-title { animation-delay: 120ms; }
.nav-section.protect-section .nav-section-title { animation-delay: 180ms; }
.nav-section-more .nav-section-title { animation-delay: 240ms; }

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

.nav-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(118, 113, 255, 0.2) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 100%);
    margin-left: 0.5rem;
}

/* Section-specific title colors - unified #7671ff */
.nav-section.create-section .nav-section-title,
.nav-section.polish-section .nav-section-title,
.nav-section.protect-section .nav-section-title,
.nav-section-more .nav-section-title { 
    color: var(--accent-section-title); 
    text-shadow: 0 0 12px rgba(118, 113, 255, 0.35);
}

.nav-section.create-section .nav-section-title::after,
.nav-section.polish-section .nav-section-title::after,
.nav-section.protect-section .nav-section-title::after { 
    background: linear-gradient(90deg, rgba(118, 113, 255, 0.22) 0%, transparent 60%); 
}

/* Ultra-Premium Nav Item - Studio Style (FINAL SPEC) */
.nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(8px);
    animation: menuItemReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered menu item animation */
.nav-section .nav-item:nth-child(2) { animation-delay: 40ms; }
.nav-section .nav-item:nth-child(3) { animation-delay: 80ms; }
.nav-section .nav-item:nth-child(4) { animation-delay: 120ms; }
.nav-section .nav-item:nth-child(5) { animation-delay: 160ms; }
.nav-section .nav-item:nth-child(6) { animation-delay: 200ms; }
.nav-section .nav-item:nth-child(7) { animation-delay: 240ms; }

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

.nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav Item Icon */
.nav-item svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.65;
}

/* FINAL SPEC Hover State - translateX(4px), icon scale 1.06, soft neon glow */
.nav-item:hover {
    color: #fff;
    transform: translateX(4px);
    box-shadow: 0 0 20px var(--neon-glow-hover);
    transition: all var(--transition-fast);
}

/* Left glow bar on hover (4px) */
.nav-item:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 14px rgba(155, 92, 255, 0.7);
    opacity: 1;
}

.nav-item:hover svg {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(155, 92, 255, 0.6));
    transform: scale(1.06);
}

/* Focus State for Accessibility */
.nav-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(189, 107, 255, 0.5);
}

/* FINAL SPEC Active State - left 3px accent bar gradient; pill background, icon+label white */
.nav-item.active {
    background: rgba(155, 92, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    position: relative;
    transform: translateX(0);
}

/* Left 3px accent bar gradient */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-a), var(--accent-b));
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 12px rgba(255, 111, 216, 0.6), 0 0 20px rgba(155, 92, 255, 0.4);
}

.nav-item.active svg {
    opacity: 1;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}

.nav-item.active:hover {
    transform: translateX(0);
    background: rgba(155, 92, 255, 0.22);
}

.nav-footer {
    margin-top: auto;
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid rgba(140, 100, 255, 0.1);
}

.sidebar-user {
    padding: 1rem 0.875rem 1.25rem;
    border-top: 1px solid rgba(140, 100, 255, 0.1);
}

/* Ultra Pro CTA Button - Get Started */
.user-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, #ff5de0, #7b5dff);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: 60px;
    color: white;
    box-shadow: 0 0 30px rgba(160, 90, 255, 0.7);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 0 24px rgba(99, 102, 241, 0.3),
        0 6px 20px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.user-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.user-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent, rgba(139, 92, 246, 0.2));
    border-radius: 62px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.25s ease;
}

.user-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 40px rgba(160, 90, 255, 0.85), 0 8px 30px rgba(255, 93, 224, 0.4);
}

.user-btn:hover::before {
    opacity: 1;
}

.user-btn:hover::after {
    opacity: 1;
}

.user-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.user-avatar svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.user-text {
    flex: 1;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Premium Mobile Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-overlay.open {
    display: block;
    opacity: 1;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at top center,
        rgba(40, 20, 80, 0.7) 0%,
        rgba(8, 8, 20, 0.96) 70%
    );
    position: relative;
    overflow: hidden;
}

/* Studio-grade floating particles */
.main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.004) 1px, transparent 1px),
                      radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.004) 1px, transparent 1px),
                      radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.004) 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px, 100px 100px;
    animation: floatingParticles 14s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes floatingParticles {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-15px) translateX(8px);
    }
}

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

/* Main content centering and fade-in */
.main-content-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 20px;
    width: 100%;
    animation: contentFadeIn 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.top-header {
    display: none;
    position: sticky;
    top: 0;
    padding: 1rem 1.5rem;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    z-index: 100;
    align-items: center;
    gap: 1rem;
}

.menu-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.menu-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.menu-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.header-spacer {
    flex: 1;
}

.header-auth-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.header-auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.header-auth-btn svg {
    width: 1rem;
    height: 1rem;
}

.header-auth-container {
    position: relative;
}

.header-auth-btn.logged-in {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

.header-auth-btn.logged-in:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 280px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 0.75rem;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-normal);
    z-index: 1000;
}

.profile-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.dropdown-user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-user-avatar svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.dropdown-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    overflow: hidden;
}

.dropdown-user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-user-email {
    font-size: 0.8125rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dropdown-item svg {
    width: 1.125rem;
    height: 1.125rem;
}

.page {
    flex: 1;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

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

/* Embedded App Container for iframe pages */
.embedded-app-container {
    width: 100%;
    height: calc(100vh - 80px);
    margin: -2rem;
    position: relative;
}

.embedded-app-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

#create-music-new-page {
    padding: 0;
    overflow: hidden;
}

#create-music-new-page .embedded-app-container {
    margin: 0;
    height: 100%;
}

/* NEW badge for nav items */
.nav-badge-new {
    font-size: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

@media (max-width: 768px) {
    .embedded-app-container {
        height: calc(100vh - 140px);
    }
}

.home-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 3rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 1.2;
}

.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prompt-composer {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-3xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-xl);
}

.prompt-textarea-wrapper {
    margin-bottom: 1rem;
}

.prompt-textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    outline: none;
}

.prompt-textarea::placeholder {
    color: var(--text-muted);
}

.prompt-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.prompt-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.attach-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.attach-btn:hover {
    background: var(--accent-primary);
    color: white;
}

.attach-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.toggle-pills {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    padding: 0.25rem;
}

.toggle-pill {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-pill.active {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.toggle-pill:hover:not(.active) {
    color: var(--text-secondary);
}

.prompt-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tools-dropdown-container {
    position: relative;
}

.tools-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tools-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.tools-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-fast);
}

.tools-btn.open svg {
    transform: rotate(180deg);
}

.tools-dropdown {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 0.5rem;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    z-index: 100;
}

.tools-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tools-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.tools-option:hover {
    background: rgba(99, 102, 241, 0.1);
}

.tools-option-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tools-option-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.tools-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.tools-option-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tools-option-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.send-btn {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-glow);
}

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

.send-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mode-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-tab {
    flex: 1;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mode-tab:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.mode-tab.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    box-shadow: var(--shadow-glow);
}

.mode-tab-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mode-tab-icon svg {
    width: 2rem;
    height: 2rem;
}

.mode-tab-text {
    font-size: 0.875rem;
    font-weight: 600;
}

.playlist-section {
    margin-bottom: 2rem;
}

.section-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.playlist-cards {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) transparent;
}

.playlist-cards::-webkit-scrollbar {
    height: 6px;
}

.playlist-cards::-webkit-scrollbar-track {
    background: transparent;
}

.playlist-cards::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.playlist-card {
    min-width: 200px;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.playlist-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.playlist-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    margin-bottom: 0.75rem;
}

.playlist-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.playlist-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.qc-container {
    max-width: 900px;
    margin: 0 auto;
}

.qc-header {
    text-align: center;
    margin-bottom: 2rem;
}

.qc-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qc-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.upload-card {
    background: var(--bg-card-premium);
    border: 2px dashed var(--border-premium);
    border-radius: var(--radius-card);
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
}

.upload-card:hover,
.upload-card.dragover {
    border-color: var(--border-hover);
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.upload-icon {
    width: 4rem;
    height: 4rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.upload-icon svg {
    width: 100%;
    height: 100%;
}

.upload-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.upload-formats {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
}

.file-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent-primary);
}

.file-details {
    flex: 1;
    text-align: left;
}

.file-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    word-break: break-all;
}

.file-size {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.file-remove {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.file-remove:hover {
    background: var(--error);
}

.file-remove svg {
    width: 1rem;
    height: 1rem;
    color: var(--text-secondary);
}

.file-remove:hover svg {
    color: white;
}

.metadata-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.metadata-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.metadata-header svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.metadata-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.metadata-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.metadata-group {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.metadata-group:last-child {
    margin-bottom: 0;
}

.group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-field input,
.form-field textarea,
.form-field select {
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--text-muted);
}

.form-field select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* ===== PREMIUM DROPDOWN SYSTEM ===== */
/* Global Premium Select Styling - Ultra Modern Pill Design */

/* Base premium select - applied to all selects */
.form-field select,
.lyrics-select,
.converter-select,
.copyright-select,
select.select-premium,
.settings-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1.25rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 9999px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='arrowGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%236366f1'/%3E%3Cstop offset='100%25' style='stop-color:%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 9l6 6 6-6' stroke='url(%23arrowGrad)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    position: relative;
    z-index: 1;
}

/* Premium hover state */
.form-field select:hover,
.lyrics-select:hover,
.converter-select:hover,
.copyright-select:hover,
select.select-premium:hover,
.settings-select:hover {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(145deg, rgba(35, 48, 70, 0.98) 0%, rgba(20, 30, 52, 0.99) 100%);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Premium focus state with glow */
.form-field select:focus,
.lyrics-select:focus,
.converter-select:focus,
.copyright-select:focus,
select.select-premium:focus,
.settings-select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 
        0 0 0 4px rgba(99, 102, 241, 0.15),
        0 0 20px rgba(99, 102, 241, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(40, 55, 80, 0.98) 0%, rgba(25, 35, 60, 0.99) 100%);
}

/* Premium option styling */
.form-field select option,
.lyrics-select option,
.converter-select option,
.copyright-select option,
select.select-premium option,
.settings-select option {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

.form-field select option:hover,
.lyrics-select option:hover,
.converter-select option:hover,
.copyright-select option:hover,
select.select-premium option:hover,
.settings-select option:hover {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.2) 100%);
}

.form-field select option:checked,
.lyrics-select option:checked,
.converter-select option:checked,
.copyright-select option:checked,
select.select-premium option:checked,
.settings-select option:checked {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.3) 100%);
    font-weight: 600;
}

/* Disabled state */
.form-field select:disabled,
.lyrics-select:disabled,
.converter-select:disabled,
.copyright-select:disabled,
select.select-premium:disabled,
.settings-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(30%);
}

/* Premium select wrapper for enhanced styling */
.select-premium-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-premium-wrapper::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9999px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.2), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.select-premium-wrapper:hover::before,
.select-premium-wrapper:focus-within::before {
    opacity: 1;
}

/* Glow effect on focus */
.select-premium-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.select-premium-wrapper:focus-within::after {
    opacity: 1;
    animation: selectGlowPulse 2s ease-in-out infinite;
}

@keyframes selectGlowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .form-field select,
    .lyrics-select,
    .converter-select,
    .copyright-select,
    select.select-premium,
    .settings-select {
        padding: 0.75rem 2.75rem 0.75rem 1rem;
        font-size: 0.875rem;
        background-size: 1.125rem;
        background-position: right 0.875rem center;
    }
}

@media (max-width: 480px) {
    .form-field select,
    .lyrics-select,
    .converter-select,
    .copyright-select,
    select.select-premium,
    .settings-select {
        padding: 0.6875rem 2.5rem 0.6875rem 0.875rem;
        font-size: 0.8125rem;
        background-size: 1rem;
        background-position: right 0.75rem center;
    }
}

/* Light mode adjustments for premium selects */
[data-theme="light"] .form-field select,
[data-theme="light"] .lyrics-select,
[data-theme="light"] .converter-select,
[data-theme="light"] .copyright-select,
[data-theme="light"] select.select-premium,
[data-theme="light"] .settings-select {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.98) 100%);
    border-color: rgba(99, 102, 241, 0.25);
    color: var(--text-primary);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .form-field select:hover,
[data-theme="light"] .lyrics-select:hover,
[data-theme="light"] .converter-select:hover,
[data-theme="light"] .copyright-select:hover,
[data-theme="light"] select.select-premium:hover,
[data-theme="light"] .settings-select:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.99) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.1),
        0 4px 12px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .form-field select:focus,
[data-theme="light"] .lyrics-select:focus,
[data-theme="light"] .converter-select:focus,
[data-theme="light"] .copyright-select:focus,
[data-theme="light"] select.select-premium:focus,
[data-theme="light"] .settings-select:focus {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 
        0 0 0 4px rgba(99, 102, 241, 0.1),
        0 0 20px rgba(99, 102, 241, 0.12),
        0 8px 32px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .form-field select option,
[data-theme="light"] .lyrics-select option,
[data-theme="light"] .converter-select option,
[data-theme="light"] .copyright-select option,
[data-theme="light"] select.select-premium option,
[data-theme="light"] .settings-select option {
    background: #fff;
    color: var(--text-primary);
}

.submit-btn {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    transition: all var(--transition-normal);
}

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

.submit-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.submit-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.feature-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.feature-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.feature-card p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.qc-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.qc-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.qc-link:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.qc-link svg {
    width: 1rem;
    height: 1rem;
}

.placeholder-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.placeholder-icon {
    width: 5rem;
    height: 5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-glow);
}

.placeholder-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.placeholder-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.placeholder-page p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.cta-btn {
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.auth-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.auth-modal.open {
    opacity: 1;
    visibility: visible;
}

.auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.auth-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.auth-modal.open .auth-container {
    transform: translateY(0);
}

.auth-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.auth-close:hover {
    background: var(--error);
    color: white;
}

.auth-close svg {
    width: 1rem;
    height: 1rem;
}

.auth-step {
    animation: fadeIn 0.3s ease;
}

.auth-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.auth-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.auth-header p {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.auth-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.auth-back:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.auth-back svg {
    width: 1rem;
    height: 1rem;
}

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

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

.auth-input-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.auth-input-group input {
    padding: 0.875rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.auth-input-group input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.auth-input-group input::placeholder {
    color: var(--text-muted);
}

.auth-error {
    font-size: 0.75rem;
    color: var(--error);
    min-height: 1rem;
}

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.auth-submit svg {
    width: 1.25rem;
    height: 1.25rem;
}

.auth-resend {
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.auth-resend:hover {
    text-decoration: underline;
}

.auth-resend:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.otp-inputs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.otp-input {
    width: 3rem;
    height: 3.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    transition: all var(--transition-fast);
}

.otp-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.otp-preview {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px dashed var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--accent-primary);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.auth-footer p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    /* Premium Mobile Sidebar Animation */
    .sidebar {
        transform: translateX(-100%) scale(0.96);
        opacity: 0;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 99999;
    }

    .sidebar.open {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    .sidebar-close {
        display: flex;
    }

    .sidebar-overlay {
        background: rgba(10, 5, 20, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 99998;
    }

    .sidebar-overlay.open {
        display: block;
        opacity: 1;
    }

    .main-content {
        margin-left: 0;
    }

    .top-header {
        display: flex;
    }

    .home-container {
        padding-top: 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .prompt-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .prompt-left {
        justify-content: space-between;
    }

    .prompt-right {
        justify-content: flex-end;
    }

    .mode-tabs {
        flex-direction: column;
        gap: 0.75rem;
    }

    .mode-tab {
        max-width: none;
        flex-direction: row;
        justify-content: flex-start;
        padding: 1rem;
    }

    .mode-tab-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .mode-tab-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .page {
        padding: 1rem;
    }

    .qc-title {
        font-size: 1.5rem;
    }

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

    .otp-input {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .playlist-cards {
        flex-direction: column;
    }

    .playlist-card {
        min-width: auto;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .qc-links {
        flex-direction: column;
    }

    .qc-link {
        justify-content: center;
    }
}

.flash-messages {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flash-message {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.flash-error {
    background: rgba(239, 68, 68, 0.1);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.flash-success {
    background: rgba(16, 185, 129, 0.1);
    color: #a7f3d0;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.flash-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    padding: 0;
    line-height: 1;
}

.flash-close:hover {
    opacity: 1;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 1.5s infinite;
}

.profile-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.profile-modal.open {
    opacity: 1;
    visibility: visible;
}

.profile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.profile-container {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    transform: translateY(30px);
    transition: transform var(--transition-normal);
}

.profile-modal.open .profile-container {
    transform: translateY(0);
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.profile-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.profile-close {
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.profile-close:hover {
    background: var(--error);
    color: white;
}

.profile-close svg {
    width: 1rem;
    height: 1rem;
}

.profile-content {
    padding: 1.5rem;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profile-avatar {
    width: 6rem;
    height: 6rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar svg {
    width: 3rem;
    height: 3rem;
    color: white;
}

.change-photo-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.change-photo-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.change-photo-btn svg {
    width: 1rem;
    height: 1rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.profile-input-readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-family: 'JetBrains Mono', monospace;
}

.profile-input-readonly.copyable {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-input-readonly.copyable:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.profile-input-readonly svg {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.profile-input-readonly.copyable:hover svg {
    color: var(--accent-primary);
}

.profile-field input {
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
}

.profile-field input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.profile-field input::placeholder {
    color: var(--text-muted);
}

.profile-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.profile-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.profile-save-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.profile-divider {
    height: 1px;
    background: var(--border-light);
    margin: 1.5rem 0;
}

.profile-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-xl);
    color: #fca5a5;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-logout-btn:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.profile-logout-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.profile-page-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
}

.profile-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.profile-page-avatar {
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}

.profile-page-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-page-avatar svg {
    width: 4rem;
    height: 4rem;
    color: white;
}

.profile-page-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.profile-page-email {
    font-size: 1rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.profile-page-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.profile-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    text-align: center;
    transition: all var(--transition-fast);
}

.profile-stat-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.profile-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.profile-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.profile-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.profile-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.profile-action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.profile-action-btn.primary {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
}

.profile-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.profile-action-btn svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 480px) {
    .profile-page-stats {
        grid-template-columns: 1fr;
    }
}

.language-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.language-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.language-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.language-container {
    position: relative;
    width: 90%;
    max-width: 440px;
    background: linear-gradient(180deg, rgba(20, 25, 45, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 28px;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 60px rgba(99, 102, 241, 0.2);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    overflow: hidden;
}

.language-modal:not(.hidden) .language-container {
    transform: translateY(0);
    opacity: 1;
}

.language-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.language-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.language-close {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(51, 65, 85, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.language-close:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
    transform: rotate(90deg);
}

.language-close svg {
    width: 1.125rem;
    height: 1.125rem;
}

.language-content {
    padding: 1rem 1.25rem 1.5rem;
}

.language-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.125rem;
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

.language-option:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(6px);
}

.language-option.selected {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.12) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 24px rgba(99, 102, 241, 0.15);
}

.language-flag {
    width: 2.5rem;
    height: 1.75rem;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.language-flag .flag-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.language-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.language-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.language-subtext {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.language-check {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-option.selected .language-check {
    opacity: 1;
    transform: scale(1);
}

.language-check svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--success);
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}

@media (max-width: 768px) {
    .language-modal {
        align-items: flex-end;
    }

    .language-backdrop {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .language-container {
        width: 100%;
        max-width: none;
        border-radius: 26px 26px 0 0;
        transform: translateY(100%);
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .language-modal:not(.hidden) .language-container {
        transform: translateY(0);
    }

    .language-header {
        padding: 1.75rem 1.25rem 1rem;
        position: relative;
    }

    .language-header::before {
        content: '';
        position: absolute;
        top: 0.625rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.75rem;
        height: 5px;
        background: rgba(148, 163, 184, 0.35);
        border-radius: 3px;
    }

    .language-content {
        padding: 1rem 1.25rem 2.5rem;
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    .language-option {
        padding: 1rem 1.125rem;
        min-height: 3.5rem;
    }

    .language-flag {
        width: 2.75rem;
        height: 2rem;
    }

    .language-name {
        font-size: 1rem;
    }

    .language-subtext {
        font-size: 0.875rem;
    }

    .language-close {
        width: 2.5rem;
        height: 2.5rem;
    }
}

.bpm-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1rem;
}

.bpm-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.bpm-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    color: var(--text-primary);
}

.bpm-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 500px;
    margin: 0 auto;
}

.bpm-upload-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.bpm-upload-card:hover,
.bpm-upload-card.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: var(--shadow-glow);
}

.bpm-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bpm-upload-icon {
    width: 4rem;
    height: 4rem;
    color: var(--accent-primary);
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

.bpm-upload-icon svg {
    width: 100%;
    height: 100%;
}

.bpm-upload-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.bpm-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-glow);
    margin-top: 0.5rem;
}

.bpm-choose-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}

.bpm-choose-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.bpm-upload-formats {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.bpm-filename-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: fadeIn 0.3s ease;
}

.bpm-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bpm-file-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.bpm-file-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    word-break: break-all;
}

.bpm-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.bpm-progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
    animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.bpm-status-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
}

.bpm-results {
    animation: fadeIn 0.4s ease;
}

.bpm-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.bpm-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.bpm-result-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, rgba(99, 102, 241, 0.1) 50%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.bpm-result-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.bpm-result-card:hover::before {
    opacity: 1;
}

.bpm-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.bpm-card-value {
    font-size: 2.25rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.bpm-happiness-sublabel {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent-secondary);
    margin-top: -0.25rem;
}

.bpm-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: auto;
}

.bpm-analyze-again-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin: 0 auto;
    display: flex;
}

.bpm-analyze-again-btn:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.bpm-analyze-again-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 768px) {
    .bpm-container {
        padding-top: 0.5rem;
    }
    
    .bpm-title {
        font-size: 1.75rem;
    }
    
    .bpm-subtitle {
        font-size: 1rem;
    }
    
    .bpm-upload-card {
        padding: 2rem 1.5rem;
        min-height: 180px;
    }
    
    .bpm-upload-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .bpm-upload-text {
        font-size: 1rem;
    }
    
    .bpm-results-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .bpm-result-card {
        padding: 1.25rem;
        border-radius: 16px;
    }
    
    .bpm-card-value {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .bpm-results-grid {
        grid-template-columns: 1fr;
    }
    
    .bpm-result-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
    
    .bpm-card-label {
        order: 1;
        flex-basis: 100%;
    }
    
    .bpm-card-value {
        order: 2;
        font-size: 1.5rem;
    }
    
    .bpm-happiness-sublabel {
        order: 3;
        margin-left: 0.5rem;
    }
    
    .bpm-card-desc {
        order: 4;
        flex-basis: 100%;
    }
}

.bpm-dna-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-light);
}

.bpm-dna-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.bpm-dna-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.bpm-dna-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

.bpm-dna-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.bpm-dna-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.bpm-dna-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.bpm-dna-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
}

.bpm-dna-card:hover::before {
    opacity: 1;
}

.bpm-dna-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.bpm-dna-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.bpm-dna-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.bpm-dna-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .bpm-dna-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bpm-dna-section {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }
    
    .bpm-dna-title {
        font-size: 1.5rem;
    }
    
    .bpm-dna-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .bpm-dna-card {
        padding: 1.5rem 1.25rem;
    }
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1rem;
    animation: fadeIn 0.4s ease;
}

.about-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.about-hero-icon {
    width: 5rem;
    height: 5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 50px rgba(139, 92, 246, 0.6);
    }
}

.about-hero-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.about-title {
    font-size: 2.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.about-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.about-description {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-lg);
}

.about-text {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
    margin-bottom: 1.25rem;
}

.about-text:last-child {
    margin-bottom: 0;
}

.about-features-section {
    margin-bottom: 3rem;
}

.about-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.about-feature-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.about-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.about-feature-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.2);
}

.about-feature-card:hover::before {
    opacity: 1;
}

.about-feature-icon {
    position: relative;
    z-index: 1;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

.about-feature-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: white;
}

.about-feature-title {
    position: relative;
    z-index: 1;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.about-feature-desc {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.about-contact-section {
    margin-bottom: 3rem;
}

.about-contact-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1.5rem;
}

.about-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.about-contact-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    transition: all var(--transition-normal);
}

.about-contact-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.15);
}

.about-contact-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.about-contact-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.about-contact-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.about-contact-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a.about-contact-value:hover {
    color: var(--accent-primary);
}

.about-contact-subtext {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.about-social-card {
    grid-column: span 2;
}

.about-social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.about-social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.about-social-link:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.about-social-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

.about-footer-signature {
    text-align: center;
    padding: 2rem 0;
    margin-top: 1rem;
}

.about-footer-signature span {
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.7;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

@media (max-width: 1024px) {
    .about-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 2rem;
    }
    
    .about-subtitle {
        font-size: 1.0625rem;
    }
    
    .about-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .about-feature-card {
        padding: 1.5rem;
    }
    
    .about-contact-grid {
        grid-template-columns: 1fr;
    }
    
    .about-social-card {
        grid-column: span 1;
    }
    
    .about-description {
        padding: 1.5rem;
    }
    
    .about-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-container {
        padding-top: 0.5rem;
    }
    
    .about-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .about-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .about-title {
        font-size: 1.75rem;
    }
    
    .about-subtitle {
        font-size: 1rem;
    }
    
    .about-section-heading {
        font-size: 1.25rem;
    }
    
    .about-social-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}


@media (max-width: 1024px) {
    .about-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 2rem;
    }
    
    .about-subtitle {
        font-size: 1.0625rem;
    }
    
    .about-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .about-feature-card {
        padding: 1.5rem;
    }
    
    .about-contact-grid {
        grid-template-columns: 1fr;
    }
    
    .about-social-card {
        grid-column: span 1;
    }
    
    .about-description {
        padding: 1.5rem;
    }
    
    .about-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about-container {
        padding-top: 0.5rem;
    }
    
    .about-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .about-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .about-title {
        font-size: 1.75rem;
    }
    
    .about-subtitle {
        font-size: 1rem;
    }
    
    .about-section-heading {
        font-size: 1.25rem;
    }
    
    .about-social-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================
   ABOUT PAGE PREMIUM STYLES
   ============================================ */

.about-hero-premium {
    text-align: center;
    margin-bottom: 2.5rem;
}

.about-hero-icon-premium {
    width: 5rem;
    height: 5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 
        0 0 40px rgba(99, 102, 241, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.15);
    animation: float-icon 3s ease-in-out infinite;
    transition: all var(--transition-normal);
}

.about-hero-icon-premium:hover {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 
        0 0 60px rgba(139, 92, 246, 0.6),
        inset 0 0 25px rgba(255, 255, 255, 0.2);
}

@keyframes float-icon {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.about-hero-icon-premium svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.about-title-premium {
    font-size: 3rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.about-subtitle-premium {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
    font-style: italic;
}

.about-hero-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-3xl);
    padding: 2rem;
    margin-top: 2.5rem;
    box-shadow: 
        var(--shadow-xl),
        0 0 50px rgba(99, 102, 241, 0.1);
}

.about-hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: start;
}

.about-hero-left {
    text-align: left;
}

.about-hero-text {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-hero-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.about-hero-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
}

.about-hero-list li svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--success);
    flex-shrink: 0;
}

.about-stats-widget {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: 
        0 0 30px rgba(99, 102, 241, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.about-stats-widget-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.about-stats-widget-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-stats-widget-item:first-child {
    padding-top: 0;
}

.about-stats-widget-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.about-stats-widget-icon svg {
    width: 1.125rem;
    height: 1.125rem;
    color: white;
}

.about-stats-widget-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Premium Features Section */
.about-features-section-premium {
    margin-bottom: 3rem;
}

.about-section-heading-premium {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
}

.about-section-heading-premium::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
    margin: 0.75rem auto 0;
}

.about-features-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.about-feature-card-premium {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.6) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.about-feature-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.about-feature-card-premium:hover {
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-4px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(99, 102, 241, 0.2);
}

.about-feature-card-premium:hover::before {
    opacity: 1;
}

.about-feature-icon-premium {
    position: relative;
    z-index: 1;
    width: 4rem;
    height: 4rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    transition: transform var(--transition-normal);
}

.about-feature-card-premium:hover .about-feature-icon-premium {
    transform: scale(1.05);
}

.about-feature-icon-premium svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.about-feature-title-premium {
    position: relative;
    z-index: 1;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
}

.about-feature-desc-premium {
    position: relative;
    z-index: 1;
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.about-feature-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.about-feature-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
    transition: all var(--transition-fast);
}

.about-feature-card-premium:hover .about-feature-tag {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
}

/* Label Stats Section */
.about-label-stats-section {
    margin-bottom: 3rem;
}

.about-label-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.about-label-stat-card {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-xl);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.about-label-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: all var(--transition-normal);
}

.about-label-stat-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.about-label-stat-card:hover::before {
    opacity: 1;
    width: 80%;
}

.about-label-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.about-label-stat-caption {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Premium Contact Section */
.about-contact-section-premium {
    margin-bottom: 3rem;
}

.about-contact-subtitle-premium {
    font-size: 1rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2rem;
}

.about-contact-grid-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.about-contact-card-premium {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    transition: all var(--transition-normal);
}

.about-contact-card-premium:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(30, 41, 59, 0.8);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.about-contact-icon-premium {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    box-shadow: 
        0 6px 20px rgba(99, 102, 241, 0.4),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-normal);
}

.about-contact-card-premium:hover .about-contact-icon-premium {
    transform: scale(1.08);
}

.about-contact-icon-premium svg {
    width: 1.375rem;
    height: 1.375rem;
    color: white;
}

.about-contact-label-premium {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.about-contact-value-premium {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a.about-contact-value-premium:hover {
    color: var(--accent-primary);
}

.about-contact-subtext-premium {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.about-social-links-premium {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.about-social-link-premium {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.about-social-link-premium:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.45);
}

.about-social-link-premium svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Premium Footer Signature */
.about-footer-signature-premium {
    text-align: center;
    padding: 2.5rem 0;
    margin-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.about-footer-signature-premium span {
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.8;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
}

/* Premium About Page Responsive Styles */
@media (max-width: 1024px) {
    .about-features-grid-premium {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .about-label-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .about-title-premium {
        font-size: 2.25rem;
    }
    
    .about-subtitle-premium {
        font-size: 1.0625rem;
    }
    
    .about-hero-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .about-hero-left {
        text-align: center;
    }
    
    .about-hero-list {
        align-items: center;
    }
    
    .about-features-grid-premium {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .about-feature-card-premium {
        padding: 1.75rem;
    }
    
    .about-label-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-contact-grid-premium {
        grid-template-columns: 1fr;
    }
    
    .about-section-heading-premium {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .about-hero-icon-premium {
        width: 4rem;
        height: 4rem;
    }
    
    .about-hero-icon-premium svg {
        width: 2rem;
        height: 2rem;
    }
    
    .about-title-premium {
        font-size: 1.875rem;
    }
    
    .about-subtitle-premium {
        font-size: 1rem;
    }
    
    .about-hero-card {
        padding: 1.5rem;
    }
    
    .about-label-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .about-label-stat-value {
        font-size: 1.5rem;
    }
    
    .about-social-links-premium {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .about-feature-tags {
        gap: 0.375rem;
    }
    
    .about-feature-tag {
        font-size: 0.6875rem;
        padding: 0.25rem 0.625rem;
    }
}

.terms-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1rem;
    animation: fadeIn 0.4s ease;
}

.terms-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.terms-hero-icon {
    width: 5rem;
    height: 5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

.terms-hero-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.terms-title {
    font-size: 2.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.terms-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.terms-section {
    margin-bottom: 2.5rem;
    animation: slideUp 0.5s ease forwards;
    opacity: 0;
}

.terms-section:nth-child(2) {
    animation-delay: 0.1s;
}

.terms-section:nth-child(3) {
    animation-delay: 0.2s;
}

.terms-section:nth-child(4) {
    animation-delay: 0.3s;
}

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

.terms-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.terms-section-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
    flex-shrink: 0;
}

.terms-section-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.terms-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.terms-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-lg);
}

.terms-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-light);
}

.terms-item:first-child {
    padding-top: 0;
}

.terms-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.terms-item-number {
    width: 2rem;
    height: 2rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.terms-item-content {
    flex: 1;
}

.terms-item-content h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-item-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.375rem;
}

.terms-list li:last-child {
    margin-bottom: 0;
}

.terms-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-glow);
}

.terms-contact-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    box-shadow: var(--shadow-lg);
}

.terms-contact-info {
    display: flex;
    justify-content: center;
}

.terms-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.terms-contact-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.terms-contact-item svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.terms-social-links {
    display: flex;
    gap: 0.75rem;
}

.terms-social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.terms-social-link:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.terms-social-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

.terms-footer {
    text-align: center;
    padding: 2rem 0;
    margin-top: 1rem;
}

.terms-footer span {
    font-size: 0.875rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ===== PREMIUM PRICING PAGE ===== */
.pricing-container-premium {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.pricing-hero-premium {
    text-align: center;
    margin-bottom: 3.5rem;
}

.pricing-hero-icon-premium {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 0 40px rgba(99, 102, 241, 0.5),
        0 0 80px rgba(139, 92, 246, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: pricingIconPulse 3s ease-in-out infinite;
}

@keyframes pricingIconPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.5), 0 0 80px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.6), 0 0 100px rgba(139, 92, 246, 0.4); }
}

.pricing-hero-icon-premium svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.pricing-title-premium {
    font-size: 2.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.pricing-subtitle-premium {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Pricing Cards Grid */
.pricing-cards-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
    align-items: stretch;
}

/* Pricing Card */
.pricing-card-premium {
    position: relative;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pricing-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.1), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.pricing-card-premium:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(99, 102, 241, 0.15);
}

.pricing-card-premium:hover::before {
    opacity: 1;
}

/* Featured Card (Pro) */
.pricing-card-premium.featured {
    background: linear-gradient(145deg, rgba(40, 50, 75, 0.8) 0%, rgba(20, 28, 50, 0.9) 100%);
    border-color: rgba(99, 102, 241, 0.35);
    transform: scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(99, 102, 241, 0.2);
}

.pricing-card-premium.featured:hover {
    transform: scale(1.02) translateY(-8px);
}

/* Card Badge */
.pricing-card-badge-premium {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.pricing-card-badge-premium.badge-popular {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.pricing-card-badge-premium.badge-studio {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border-color: rgba(168, 85, 247, 0.25);
}

/* Card Icon */
.pricing-card-icon-premium {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    margin-top: 1rem;
}

.pricing-card-icon-premium svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--accent-primary);
    position: relative;
    z-index: 2;
}

.pricing-icon-glow-premium {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(168, 85, 247, 0.15) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(12px);
    animation: pricingIconGlow 3s ease-in-out infinite;
}

.pricing-icon-glow-premium.glow-pro {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, rgba(168, 85, 247, 0.3) 50%, transparent 70%);
}

@keyframes pricingIconGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.pricing-icon-ring-premium {
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    animation: pricingRingPulse 2.5s ease-out infinite;
}

@keyframes pricingRingPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Card Name */
.pricing-card-name-premium {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Card Price */
.pricing-card-price-premium {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.pricing-card-price-premium .price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pricing-card-price-premium .price-period {
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Features List */
.pricing-features-list-premium {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    width: 100%;
    text-align: left;
}

.pricing-features-list-premium li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.pricing-features-list-premium li:last-child {
    border-bottom: none;
}

.pricing-features-list-premium li svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--success);
    flex-shrink: 0;
}

/* CTA Button */
.pricing-cta-btn-premium {
    width: 100%;
    padding: 0.9375rem 1.5rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 9999px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
}

.pricing-cta-btn-premium:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
}

.pricing-cta-btn-premium.cta-pro {
    background: var(--accent-gradient);
    border: none;
    color: white;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.pricing-cta-btn-premium.cta-pro:hover {
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.5);
    transform: translateY(-3px);
}

.pricing-cta-btn-premium.cta-studio {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.3);
}

.pricing-cta-btn-premium.cta-studio:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

/* Comparison Section */
.pricing-comparison-section-premium {
    margin-bottom: 4rem;
}

.pricing-section-title-premium {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
}

.pricing-table-wrapper-premium {
    overflow-x: auto;
    border-radius: var(--radius-xl);
}

.pricing-table-premium {
    width: 100%;
    border-collapse: collapse;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.pricing-table-premium thead tr {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.pricing-table-premium th {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
}

.pricing-table-premium th.feature-col {
    text-align: left;
    padding-left: 1.5rem;
    width: 30%;
}

.pricing-table-premium th.pro-col {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

.pricing-table-premium td {
    padding: 1rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.pricing-table-premium td.feature-name {
    text-align: left;
    padding-left: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pricing-table-premium td.pro-value {
    background: rgba(99, 102, 241, 0.05);
    color: var(--accent-primary);
    font-weight: 600;
}

.pricing-table-premium tbody tr:last-child td {
    border-bottom: none;
}

.pricing-table-premium tbody tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

/* FAQ Section */
.pricing-faq-section-premium {
    margin-bottom: 3rem;
}

.pricing-faq-grid-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.pricing-faq-item-premium {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.7) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
}

.pricing-faq-item-premium:hover {
    border-color: rgba(99, 102, 241, 0.25);
}

.pricing-faq-question-premium {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pricing-faq-question-premium:hover {
    color: var(--accent-primary);
}

.pricing-faq-question-premium .faq-chevron {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.pricing-faq-item-premium.active .pricing-faq-question-premium .faq-chevron {
    transform: rotate(180deg);
    color: var(--accent-primary);
}

.pricing-faq-answer-premium {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.pricing-faq-item-premium.active .pricing-faq-answer-premium {
    max-height: 200px;
}

.pricing-faq-answer-premium p {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Footer */
.pricing-footer-premium {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.pricing-footer-premium span {
    font-size: 0.8125rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 1024px) {
    .pricing-cards-grid-premium {
        grid-template-columns: 1fr;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .pricing-card-premium.featured {
        transform: none;
        order: -1;
    }
    
    .pricing-card-premium.featured:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .pricing-title-premium {
        font-size: 2rem;
    }
    
    .pricing-subtitle-premium {
        font-size: 1rem;
    }
    
    .pricing-faq-grid-premium {
        grid-template-columns: 1fr;
    }
    
    .pricing-table-premium th,
    .pricing-table-premium td {
        padding: 0.875rem 0.625rem;
        font-size: 0.8125rem;
    }
    
    .pricing-table-premium th.feature-col,
    .pricing-table-premium td.feature-name {
        padding-left: 1rem;
    }
}

@media (max-width: 480px) {
    .pricing-container-premium {
        padding: 0 1rem 2rem;
    }
    
    .pricing-hero-icon-premium {
        width: 4rem;
        height: 4rem;
    }
    
    .pricing-hero-icon-premium svg {
        width: 2rem;
        height: 2rem;
    }
    
    .pricing-title-premium {
        font-size: 1.75rem;
    }
    
    .pricing-card-premium {
        padding: 1.5rem;
    }
    
    .pricing-card-price-premium .price-amount {
        font-size: 2rem;
    }
    
    .pricing-section-title-premium {
        font-size: 1.5rem;
    }
}

/* ===== PREMIUM TERMS & PRIVACY PAGE ===== */
.terms-container-premium {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

.terms-hero-premium {
    text-align: center;
    margin-bottom: 2.5rem;
}

.terms-hero-icon-premium {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 0 40px rgba(99, 102, 241, 0.5),
        0 0 80px rgba(139, 92, 246, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: termsIconPulse 3s ease-in-out infinite;
}

@keyframes termsIconPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.5), 0 0 80px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 60px rgba(99, 102, 241, 0.6), 0 0 100px rgba(139, 92, 246, 0.4); }
}

.terms-hero-icon-premium::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    z-index: -1;
}

.terms-hero-icon-premium svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.terms-title-premium {
    font-size: 2.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.terms-subtitle-premium {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tabs */
.terms-tabs-premium {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.terms-tab-premium {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.terms-tab-premium svg {
    width: 1.125rem;
    height: 1.125rem;
}

.terms-tab-premium:hover {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(99, 102, 241, 0.3);
    color: var(--text-primary);
}

.terms-tab-premium.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

/* Tab Content */
.terms-tab-content-premium {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.terms-tab-content-premium.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Cards Grid */
.terms-cards-grid-premium {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

/* Glass Card */
.terms-glass-card-premium {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.5) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
}

.terms-glass-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.terms-glass-card-premium:hover {
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-4px);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(99, 102, 241, 0.1);
}

.terms-glass-card-premium:hover::before {
    opacity: 1;
}

.terms-glass-card-premium.full-width {
    grid-column: span 2;
}

/* Card Badge */
.terms-card-badge-premium {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Card Icon (Privacy) */
.terms-card-icon-premium {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.terms-card-icon-premium svg {
    width: 1.375rem;
    height: 1.375rem;
    color: white;
}

.terms-card-title-premium {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
}

.terms-card-text-premium {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.terms-card-text-premium:last-child {
    margin-bottom: 0;
}

.terms-card-list-premium {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-card-list-premium li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.375rem;
}

.terms-card-list-premium li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.terms-card-list-premium li:last-child {
    margin-bottom: 0;
}

/* Section Heading */
.terms-section-heading-premium {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.75rem;
}

/* Data Protection Section */
.terms-protection-section-premium {
    margin-bottom: 3rem;
}

.terms-protection-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.terms-protection-card-premium {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.terms-protection-card-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.terms-protection-card-premium:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.terms-protection-card-premium:hover::before {
    opacity: 1;
}

.terms-protection-icon-premium {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 
        0 8px 20px rgba(99, 102, 241, 0.35),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
}

.terms-protection-icon-premium svg {
    width: 1.625rem;
    height: 1.625rem;
    color: white;
}

.terms-protection-title-premium {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-protection-text-premium {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Contact Section */
.terms-contact-section-premium {
    margin-bottom: 2.5rem;
}

.terms-contact-card-premium {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.terms-contact-main-premium {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.terms-contact-icon-glow-premium {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 30px rgba(99, 102, 241, 0.5),
        0 0 60px rgba(139, 92, 246, 0.25);
    animation: contactIconGlow 2s ease-in-out infinite alternate;
}

@keyframes contactIconGlow {
    0% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.5), 0 0 60px rgba(139, 92, 246, 0.25); }
    100% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6), 0 0 80px rgba(139, 92, 246, 0.35); }
}

.terms-contact-icon-glow-premium svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.terms-contact-details-premium {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.terms-contact-label-premium {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.terms-contact-email-premium {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.terms-contact-email-premium:hover {
    color: var(--accent-primary);
}

.terms-contact-socials-premium {
    display: flex;
    gap: 0.75rem;
}

.terms-social-btn-premium {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.terms-social-btn-premium svg {
    width: 1.25rem;
    height: 1.25rem;
}

.terms-social-btn-premium:hover {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

/* Footer */
.terms-footer-premium {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border-light);
}

.terms-footer-premium span {
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.75;
}

/* Responsive */
@media (max-width: 992px) {
    .terms-protection-grid-premium {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .terms-title-premium {
        font-size: 2rem;
    }

    .terms-subtitle-premium {
        font-size: 1rem;
    }

    .terms-tabs-premium {
        flex-direction: column;
        gap: 0.75rem;
    }

    .terms-tab-premium {
        justify-content: center;
        width: 100%;
    }

    .terms-cards-grid-premium {
        grid-template-columns: 1fr;
    }

    .terms-glass-card-premium.full-width {
        grid-column: span 1;
    }

    .terms-contact-card-premium {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .terms-contact-main-premium {
        flex-direction: column;
    }

    .terms-contact-socials-premium {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .terms-hero-icon-premium {
        width: 4rem;
        height: 4rem;
    }

    .terms-hero-icon-premium svg {
        width: 2rem;
        height: 2rem;
    }

    .terms-title-premium {
        font-size: 1.75rem;
    }

    .terms-glass-card-premium {
        padding: 1.25rem;
    }

    .terms-protection-card-premium {
        padding: 1.25rem;
    }

    .terms-section-heading-premium {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .terms-title {
        font-size: 2rem;
    }
    
    .terms-subtitle {
        font-size: 1rem;
    }
    
    .terms-section-title {
        font-size: 1.25rem;
    }
    
    .terms-card {
        padding: 1.25rem;
    }
    
    .terms-item {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .terms-item-number {
        align-self: flex-start;
    }
    
    .terms-contact-item {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .terms-container {
        padding-top: 0.5rem;
    }
    
    .terms-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .terms-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .terms-title {
        font-size: 1.75rem;
    }
    
    .terms-subtitle {
        font-size: 0.9375rem;
    }
    
    .terms-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .terms-social-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.mediainfo-container {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 1rem;
}

.mediainfo-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.mediainfo-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.mediainfo-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.mediainfo-privacy-note {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mediainfo-privacy-note::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-secondary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-glow);
}

.mediainfo-upload-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
    margin-bottom: 1.5rem;
}

.mediainfo-upload-card:hover,
.mediainfo-upload-card.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.15);
}

.mediainfo-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.mediainfo-upload-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

.mediainfo-upload-icon svg {
    width: 2.25rem;
    height: 2.25rem;
    color: white;
}

.mediainfo-upload-text {
    font-size: 1.0625rem;
    color: var(--text-secondary);
}

.mediainfo-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.mediainfo-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.mediainfo-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mediainfo-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.mediainfo-analyzing {
    margin-bottom: 1.5rem;
}

.mediainfo-analyzing-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mediainfo-file-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mediainfo-file-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
}

.mediainfo-file-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-all;
}

.mediainfo-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.mediainfo-progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 3px;
    width: 0%;
    animation: mediainfoProgress 2s ease-in-out infinite;
}

@keyframes mediainfoProgress {
    0% { width: 0%; }
    50% { width: 80%; }
    100% { width: 100%; }
}

.mediainfo-status-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

.mediainfo-error-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.mediainfo-error-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mediainfo-error-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: #ef4444;
}

.mediainfo-error-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mediainfo-error-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.mediainfo-try-again-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mediainfo-try-again-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.mediainfo-try-again-btn svg {
    width: 1rem;
    height: 1rem;
}

.mediainfo-results {
    margin-bottom: 2rem;
}

.mediainfo-results-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mediainfo-section {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.mediainfo-section.open {
    box-shadow: var(--shadow-lg);
}

.mediainfo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background var(--transition-normal);
}

.mediainfo-section-header:hover {
    background: rgba(99, 102, 241, 0.05);
}

.mediainfo-section-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mediainfo-section-icon {
    width: 2rem;
    height: 2rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.mediainfo-section-icon svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

.mediainfo-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mediainfo-section-toggle {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-muted);
    transition: transform var(--transition-normal);
}

.mediainfo-section.open .mediainfo-section-toggle {
    transform: rotate(180deg);
}

.mediainfo-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mediainfo-section.open .mediainfo-section-body {
    max-height: 1000px;
}

.mediainfo-section-content {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-light);
}

.mediainfo-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.625rem 0;
    gap: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.mediainfo-row:last-child {
    border-bottom: none;
}

.mediainfo-row-key {
    font-size: 0.875rem;
    color: var(--text-muted);
    flex-shrink: 0;
    max-width: 45%;
}

.mediainfo-row-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.mediainfo-analyze-again-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mediainfo-analyze-again-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.mediainfo-analyze-again-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mediainfo-info-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.mediainfo-info-header {
    text-align: center;
    margin-bottom: 2rem;
}

.mediainfo-info-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mediainfo-info-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.mediainfo-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mediainfo-info-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.mediainfo-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.mediainfo-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.mediainfo-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.mediainfo-info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mediainfo-info-card-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mediainfo-title {
        font-size: 2rem;
    }
    
    .mediainfo-subtitle {
        font-size: 1rem;
    }
    
    .mediainfo-upload-card {
        padding: 2rem 1.5rem;
    }
    
    .mediainfo-info-grid {
        grid-template-columns: 1fr;
    }
    
    .mediainfo-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .mediainfo-row-key {
        max-width: 100%;
    }
    
    .mediainfo-row-value {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .mediainfo-container {
        padding-top: 0.5rem;
    }
    
    .mediainfo-title {
        font-size: 1.75rem;
    }
    
    .mediainfo-upload-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .mediainfo-upload-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .mediainfo-info-title {
        font-size: 1.5rem;
    }
    
    .mediainfo-info-card {
        padding: 1.25rem;
    }
}

.stem-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1rem;
}

.stem-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.stem-hero-icon {
    width: 5rem;
    height: 5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: var(--shadow-glow);
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.stem-hero-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
}

.stem-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.stem-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.stem-upload-section {
    margin-bottom: 2rem;
}

.stem-upload-card {
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-out;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Neon dashed gradient border */
.stem-upload-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.5), rgba(70, 225, 255, 0.4), rgba(255, 111, 216, 0.4));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Dashed overlay */
.stem-upload-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(155, 92, 255, 0.4);
    border-radius: 16px;
    pointer-events: none;
}

.stem-upload-card:hover,
.stem-upload-card.dragover {
    background: rgba(155, 92, 255, 0.1);
    box-shadow: 0 0 32px rgba(155, 92, 255, 0.4), 0 0 60px rgba(70, 225, 255, 0.15);
    transform: scale(1.02) translateY(-2px);
}

.stem-upload-card:hover::before,
.stem-upload-card.dragover::before {
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.8), rgba(70, 225, 255, 0.6), rgba(255, 111, 216, 0.6));
}

.stem-upload-card:hover::after,
.stem-upload-card.dragover::after {
    border-color: rgba(155, 92, 255, 0.7);
}

/* Stem icon glow on hover */
.stem-result-card:hover .stem-icon {
    filter: drop-shadow(0 0 12px rgba(155, 92, 255, 0.6));
    transform: scale(1.1);
}

.stem-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.stem-upload-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.25), rgba(70, 225, 255, 0.2));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    animation: uploadPulse 1.5s ease-in-out infinite;
}

.stem-upload-icon svg {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--accent-b);
    filter: drop-shadow(0 0 8px rgba(155, 92, 255, 0.4));
}

.stem-upload-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stem-upload-or {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.stem-choose-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.stem-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.stem-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.stem-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.stem-file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 400px;
}

.stem-file-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stem-file-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.stem-file-details {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.stem-file-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stem-file-size {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.stem-file-remove {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.stem-file-remove:hover {
    background: var(--error);
}

.stem-file-remove svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
}

.stem-file-remove:hover svg {
    color: white;
}

.stem-process-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto 0;
    padding: 1rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.stem-process-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.stem-process-btn svg {
    width: 1.375rem;
    height: 1.375rem;
}

.stem-processing-section {
    margin-bottom: 2rem;
}

.stem-processing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
}

.stem-processing-animation {
    margin-bottom: 1.5rem;
}

.stem-wave-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
}

.stem-wave-bar {
    width: 6px;
    background: var(--accent-gradient);
    border-radius: 3px;
    animation: stemWave 1s ease-in-out infinite;
}

.stem-wave-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.stem-wave-bar:nth-child(2) { height: 35px; animation-delay: 0.1s; }
.stem-wave-bar:nth-child(3) { height: 50px; animation-delay: 0.2s; }
.stem-wave-bar:nth-child(4) { height: 40px; animation-delay: 0.3s; }
.stem-wave-bar:nth-child(5) { height: 55px; animation-delay: 0.4s; }
.stem-wave-bar:nth-child(6) { height: 35px; animation-delay: 0.5s; }
.stem-wave-bar:nth-child(7) { height: 45px; animation-delay: 0.6s; }
.stem-wave-bar:nth-child(8) { height: 25px; animation-delay: 0.7s; }

@keyframes stemWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

.stem-processing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stem-processing-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.stem-progress-bar {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    margin: 0 auto 0.75rem;
    overflow: hidden;
}

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

.stem-progress-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}

.stem-results-section {
    margin-bottom: 2rem;
    animation: fadeSlideUp 0.5s ease;
}

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

.stem-results-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.stem-results-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stem-results-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.stem-download-all {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.stem-download-all-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.stem-download-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

.stem-download-all-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.stem-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.stem-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-normal);
}

.stem-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stem-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.stem-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stem-card-icon.vocals {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
}

.stem-card-icon.instrumental {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.stem-card-icon.drums {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stem-card-icon.bass {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}

.stem-card-icon.other {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.stem-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.stem-card-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
}

.stem-card-waveform span {
    width: 3px;
    background: currentColor;
    border-radius: 1.5px;
    opacity: 0.7;
}

.stem-card-info {
    flex: 1;
    min-width: 0;
}

.stem-card-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stem-card-duration {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.stem-card-player {
    margin-bottom: 1rem;
}

.stem-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stem-play-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.stem-play-btn.playing {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.stem-play-btn svg {
    width: 1rem;
    height: 1rem;
}

.stem-card-downloads {
    display: flex;
    gap: 0.625rem;
}

.stem-download-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.stem-download-btn.wav {
    background: var(--accent-gradient);
    color: white;
}

.stem-download-btn.wav:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.stem-download-btn.mp3 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.stem-download-btn.mp3:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.stem-download-btn svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.stem-new-file {
    display: flex;
    justify-content: center;
}

.stem-new-file-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stem-new-file-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.stem-new-file-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.stem-info-section {
    margin-bottom: 2rem;
}

.stem-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stem-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.stem-info-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.stem-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.stem-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.stem-info-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.stem-info-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.stem-privacy-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    color: var(--success);
}

.stem-privacy-note svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .stem-title {
        font-size: 2rem;
    }
    
    .stem-subtitle {
        font-size: 1rem;
    }
    
    .stem-upload-card {
        padding: 2rem 1.5rem;
    }
    
    .stem-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .stem-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stem-card-downloads {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .stem-container {
        padding-top: 0.5rem;
    }
    
    .stem-title {
        font-size: 1.75rem;
    }
    
    .stem-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .stem-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .stem-upload-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .stem-upload-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .stem-info-grid {
        grid-template-columns: 1fr;
    }
    
    .stem-privacy-note {
        flex-direction: column;
        text-align: center;
    }
}

/* AI Mastering Tool (ULTRA PREMIUM) */
.mastering-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1.5rem;
    animation: cardFadeIn 0.5s ease-out forwards;
}

.mastering-hero {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.mastering-hero-icon {
    width: 5.5rem;
    height: 5.5rem;
    background: linear-gradient(135deg, rgba(255, 91, 181, 0.3), rgba(189, 107, 255, 0.35), rgba(70, 226, 255, 0.3));
    border: 1px solid rgba(189, 107, 255, 0.4);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 30px rgba(189, 107, 255, 0.3);
    animation: iconBreathe 5s ease-in-out infinite;
    position: relative;
}

.mastering-hero-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, rgba(255, 91, 181, 0.4), rgba(189, 107, 255, 0.5), rgba(70, 226, 255, 0.4), rgba(255, 91, 181, 0.4));
    animation: rotateGlowRing 12s linear infinite;
    z-index: -1;
    filter: blur(6px);
    opacity: 0.6;
}

.mastering-hero-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
    filter: drop-shadow(0 0 8px rgba(189, 107, 255, 0.5));
}

.mastering-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, #fff, rgba(189, 107, 255, 0.9), #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 10s ease-in-out infinite;
}

.mastering-subtitle {
    font-size: 1.125rem;
    color: rgba(139, 143, 168, 0.9);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.85;
}

.mastering-upload-section {
    margin-bottom: 2rem;
}

.mastering-upload-card {
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease-out;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Neon dashed gradient border */
.mastering-upload-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.5), rgba(70, 225, 255, 0.4), rgba(255, 111, 216, 0.4));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Dashed overlay */
.mastering-upload-card::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(155, 92, 255, 0.4);
    border-radius: 16px;
    pointer-events: none;
}

.mastering-upload-card:hover,
.mastering-upload-card.dragover {
    background: rgba(155, 92, 255, 0.1);
    box-shadow: 0 0 32px rgba(155, 92, 255, 0.4), 0 0 60px rgba(70, 225, 255, 0.15);
    transform: translateY(-2px) scale(1.01);
}

.mastering-upload-card:hover::before,
.mastering-upload-card.dragover::before {
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.8), rgba(70, 225, 255, 0.6), rgba(255, 111, 216, 0.6));
}

.mastering-upload-card:hover::after,
.mastering-upload-card.dragover::after {
    border-color: rgba(155, 92, 255, 0.7);
}

.mastering-upload-card.has-file {
    border-style: solid;
    cursor: default;
}

.mastering-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mastering-upload-icon {
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.25), rgba(70, 225, 255, 0.2));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    animation: uploadPulse 1.5s ease-in-out infinite;
}

.mastering-upload-icon svg {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--accent-b);
    filter: drop-shadow(0 0 8px rgba(155, 92, 255, 0.4));
}

.mastering-upload-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mastering-upload-or {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.mastering-choose-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mastering-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.mastering-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mastering-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.mastering-file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 450px;
}

.mastering-file-icon {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mastering-file-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.mastering-file-details {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.mastering-file-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mastering-file-meta {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-file-remove {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    border: none;
    background: var(--bg-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.mastering-file-remove:hover {
    background: var(--error);
}

.mastering-file-remove svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--text-secondary);
}

.mastering-file-remove:hover svg {
    color: white;
}

.mastering-waveform-preview {
    width: 100%;
    max-width: 800px;
    margin: 1rem auto 0;
}

.mastering-waveform-preview canvas {
    width: 100%;
    height: 80px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.mastering-file-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    margin-top: 1rem;
}

.mastering-stat {
    background: var(--bg-secondary);
    padding: 0.875rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.mastering-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.mastering-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-settings-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mastering-settings-card,
.mastering-metadata-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
}

.mastering-settings-header,
.mastering-metadata-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.mastering-settings-title,
.mastering-metadata-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mastering-settings-title svg,
.mastering-metadata-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.mastering-mode-toggle {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: var(--radius-lg);
}

.mastering-mode-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.mastering-mode-btn.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-sm);
}

.mastering-mode-btn svg {
    width: 1rem;
    height: 1rem;
}

.mastering-preset-row {
    margin-bottom: 1.5rem;
}

.mastering-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.mastering-preset-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.mastering-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mastering-preset-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.mastering-preset-btn.active {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--accent-primary);
}

.mastering-preset-btn .preset-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mastering-preset-btn .preset-value {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-advanced-settings {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    margin-top: 1rem;
}

.mastering-setting-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.mastering-setting {
    display: flex;
    flex-direction: column;
}

.mastering-setting.half {
    grid-column: span 1;
}

.mastering-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mastering-slider-row input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: var(--bg-tertiary);
    border-radius: 3px;
    cursor: pointer;
}

.mastering-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.mastering-slider-value {
    min-width: 3.5rem;
    text-align: right;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--accent-primary);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.mastering-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color var(--transition-fast);
}

.mastering-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.mastering-input::placeholder {
    color: var(--text-muted);
}

.mastering-collapse-btn {
    width: 2rem;
    height: 2rem;
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mastering-collapse-btn:hover {
    background: var(--bg-tertiary);
}

.mastering-collapse-btn svg {
    width: 1rem;
    height: 1rem;
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.mastering-collapse-btn.collapsed svg {
    transform: rotate(-90deg);
}

.mastering-metadata-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mastering-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mastering-form-row:has(.full) {
    grid-template-columns: 1fr;
}

.mastering-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mastering-form-field.full {
    grid-column: span 2;
}

.mastering-form-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.mastering-form-field input,
.mastering-form-field select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: border-color var(--transition-fast);
}

.mastering-form-field input:focus,
.mastering-form-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.mastering-form-field input::placeholder {
    color: var(--text-muted);
}

.mastering-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-glow);
}

.mastering-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
}

.mastering-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mastering-submit-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mastering-loading-section {
    padding: 3rem 0;
}

.mastering-loading-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem;
    text-align: center;
}

.mastering-loading-spinner {
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    animation: spin 1s linear infinite;
}

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

.mastering-loading-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mastering-loading-text {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.mastering-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 300px;
    margin: 0 auto;
}

.mastering-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.mastering-step.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--text-primary);
}

.mastering-step.complete {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.mastering-step .step-icon {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.mastering-step.active .step-icon {
    background: var(--accent-gradient);
    color: white;
}

.mastering-step.complete .step-icon {
    background: var(--success);
    color: white;
}

.mastering-results-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.mastering-qc-badge {
    padding: 0.5rem 1.5rem;
    background: var(--success);
    border-radius: var(--radius-xl);
    font-size: 1rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mastering-qc-badge.warn {
    background: var(--warning);
}

.mastering-qc-badge.fail {
    background: var(--error);
}

.mastering-score-display {
    font-family: 'JetBrains Mono', monospace;
}

.mastering-score-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.mastering-score-label {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.mastering-comparison-card,
.mastering-issues-card,
.mastering-export-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.mastering-comparison-title,
.mastering-issues-title,
.mastering-export-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.mastering-comparison-title svg,
.mastering-issues-title svg,
.mastering-export-title svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--accent-primary);
}

.mastering-waveform-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.mastering-waveform-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mastering-waveform-item .waveform-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mastering-waveform-item canvas {
    width: 100%;
    height: 60px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.mastering-stats-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mastering-stats-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.mastering-stats-row .stats-label {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.mastering-stats-row .stats-before {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-stats-row .stats-arrow {
    color: var(--accent-primary);
    font-weight: 700;
}

.mastering-stats-row .stats-after {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--success);
    font-family: 'JetBrains Mono', monospace;
}

.mastering-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mastering-issue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--error);
}

.mastering-issue-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.mastering-export-options {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.mastering-export-format label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.mastering-format-btns {
    display: flex;
    gap: 0.5rem;
}

.mastering-format-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mastering-format-btn:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.mastering-format-btn.active {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
}

.mastering-export-settings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.export-setting-group label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.export-setting-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
}

.mastering-download-btns {
    display: flex;
    gap: 1rem;
}

.mastering-download-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mastering-download-btn.primary {
    background: var(--accent-gradient);
    color: white;
}

.mastering-download-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.mastering-download-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.mastering-download-btn.secondary:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.mastering-download-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mastering-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mastering-new-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.mastering-new-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.mastering-error-section {
    padding: 3rem 0;
}

.mastering-error-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem;
    text-align: center;
}

.mastering-error-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.mastering-error-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--error);
}

.mastering-error-card h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mastering-error-message {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.mastering-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mastering-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.mastering-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}

.mastering-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.mastering-feature-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-3px);
}

.mastering-feature-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.mastering-feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
}

.mastering-feature-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mastering-feature-card p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .mastering-title {
        font-size: 2rem;
    }
    
    .mastering-subtitle {
        font-size: 1rem;
    }
    
    .mastering-upload-card {
        padding: 2rem 1.5rem;
    }
    
    .mastering-file-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mastering-preset-btns {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mastering-setting-group {
        grid-template-columns: 1fr;
    }
    
    .mastering-form-row {
        grid-template-columns: 1fr;
    }
    
    .mastering-form-field.full {
        grid-column: span 1;
    }
    
    .mastering-waveform-comparison {
        grid-template-columns: 1fr;
    }
    
    .mastering-download-btns {
        flex-direction: column;
    }
    
    .mastering-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mastering-export-settings {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .mastering-container {
        padding-top: 0.5rem;
    }
    
    .mastering-title {
        font-size: 1.75rem;
    }
    
    .mastering-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .mastering-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .mastering-mode-toggle {
        flex-direction: column;
    }
    
    .mastering-preset-btns {
        grid-template-columns: 1fr;
    }
    
    .mastering-results-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mastering-features-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== AI MASTERING PREMIUM STYLES ===== */

.mastering-premium {
    --mastering-primary: #a855f7;
    --mastering-secondary: #6366f1;
    --mastering-glow: rgba(168, 85, 247, 0.4);
    --mastering-glow-soft: rgba(168, 85, 247, 0.15);
    --mastering-bg-dark: #0f0f1a;
    --mastering-bg-card: rgba(20, 20, 35, 0.85);
    --mastering-border: rgba(168, 85, 247, 0.2);
    --mastering-text: #f8fafc;
    --mastering-text-muted: rgba(248, 250, 252, 0.6);
}

.mastering-card-glass {
    background: var(--mastering-bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--mastering-border);
    border-radius: 20px;
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mastering-hero-premium {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 2rem 0;
}

.mastering-hero-badge {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.2));
    border-radius: 20px;
    border: 1px solid var(--mastering-border);
}

.mastering-badge-glow {
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle at center, var(--mastering-glow-soft), transparent 70%);
    border-radius: 28px;
    z-index: -1;
}

.mastering-hero-badge svg {
    width: 36px;
    height: 36px;
}

.mastering-title-premium {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.mastering-gradient-text {
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mastering-subtitle-premium {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Upload Card Premium */
.mastering-upload-card.mastering-card-glass {
    padding: 3rem 2rem;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.mastering-upload-card.mastering-card-glass:hover {
    border-color: var(--mastering-primary);
    box-shadow: 0 0 32px rgba(168, 85, 247, 0.15), 0 8px 40px rgba(0, 0, 0, 0.35);
}

.mastering-upload-card.mastering-card-glass.dragover {
    border-color: var(--mastering-primary);
    background: rgba(168, 85, 247, 0.1);
    box-shadow: 0 0 48px var(--mastering-glow);
}

.mastering-upload-icon-premium {
    margin-bottom: 1.5rem;
}

.upload-icon-circle {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.15), rgba(99, 102, 241, 0.15));
    border: 2px dashed var(--mastering-border);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.upload-icon-circle svg {
    width: 28px;
    height: 28px;
    color: var(--mastering-primary);
}

.mastering-upload-card:hover .upload-icon-circle {
    border-color: var(--mastering-primary);
    background: rgba(168, 85, 247, 0.2);
}

.mastering-upload-text-premium {
    font-size: 1.125rem;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.mastering-choose-btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.mastering-choose-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

.mastering-upload-formats-premium {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 1rem;
}

.mastering-upload-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mastering-border);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mastering-upload-footer .footer-dot {
    color: var(--mastering-primary);
}

/* File Info Premium */
.mastering-file-info-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid var(--mastering-border);
    border-radius: 12px;
    margin-top: 1rem;
}

.mastering-track-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.track-badge-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border-radius: 10px;
}

.track-badge-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.track-badge-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mastering-file-info-premium .mastering-file-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mastering-file-info-premium .mastering-file-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mastering-file-remove-premium {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastering-file-remove-premium svg {
    width: 16px;
    height: 16px;
    color: #ef4444;
}

.mastering-file-remove-premium:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* Waveform Preview Premium */
.mastering-waveform-preview-premium {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid var(--mastering-border);
}

.mastering-waveform-preview-premium canvas {
    width: 100%;
    height: 120px;
    display: block;
}

/* File Stats Premium */
.mastering-file-stats-premium {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: center;
}

.mastering-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid var(--mastering-border);
    border-radius: 10px;
    min-width: 100px;
}

.stat-chip-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.stat-chip-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mastering-primary);
}

/* Settings Card Premium */
.mastering-settings-card.mastering-card-glass {
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.mastering-settings-header-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.mastering-settings-title-premium {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mastering-mode-toggle-premium {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 10px;
}

.mastering-mode-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastering-mode-pill svg {
    width: 14px;
    height: 14px;
}

.mastering-mode-pill.active {
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    color: white;
}

.mastering-mode-pill:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(168, 85, 247, 0.1);
}

/* Preset Pills */
.mastering-presets-premium {
    margin-bottom: 1.5rem;
}

.mastering-preset-pills {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.mastering-preset-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mastering-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastering-preset-pill:hover {
    border-color: var(--mastering-primary);
    background: rgba(168, 85, 247, 0.1);
}

.mastering-preset-pill.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.2));
    border-color: var(--mastering-primary);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

.preset-pill-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.preset-pill-value {
    font-size: 0.75rem;
    color: var(--mastering-primary);
    font-weight: 500;
}

/* Slider Styles Premium */
.mastering-sliders-premium {
    display: none;
}

.mastering-sliders-premium.visible {
    display: block;
}

.mastering-slider-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.mastering-slider-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mastering-slider-item.full-width {
    grid-column: span 2;
}

.slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.slider-value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    min-width: 48px;
}

.slider-track-container {
    position: relative;
}

.mastering-range-premium {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;
}

.mastering-range-premium::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    transition: transform 0.2s ease;
}

.mastering-range-premium::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.mastering-range-premium::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.slider-scale.intensity-scale {
    justify-content: space-between;
}

.slider-scale.intensity-scale span:nth-child(2) {
    text-align: center;
}

/* Filter Controls */
.mastering-filter-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mastering-border);
}

.filter-control-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-control-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.filter-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.filter-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.filter-toggle input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
}

.filter-toggle input:checked + .toggle-slider::before {
    transform: translateX(16px);
    background: white;
}

.filter-input {
    padding: 0.625rem 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--mastering-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-input:focus {
    outline: none;
    border-color: var(--mastering-primary);
}

.filter-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Metadata Card Premium */
.mastering-metadata-card.mastering-card-glass {
    padding: 1.5rem;
}

.mastering-metadata-header-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.mastering-metadata-title-premium {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mastering-metadata-title-premium svg {
    width: 20px;
    height: 20px;
    color: var(--mastering-primary);
}

.mastering-collapse-btn-premium {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mastering-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastering-collapse-btn-premium svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.mastering-collapse-btn-premium.collapsed svg {
    transform: rotate(-90deg);
}

.mastering-collapse-btn-premium:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: var(--mastering-primary);
}

.mastering-metadata-content-premium {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mastering-metadata-content-premium.hidden {
    display: none;
}

.metadata-field,
.metadata-field-full {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metadata-grid-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.metadata-grid-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.metadata-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metadata-input-premium,
.metadata-select-premium {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--mastering-border);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.metadata-input-premium::placeholder {
    color: var(--text-secondary);
}

.metadata-input-premium:focus,
.metadata-select-premium:focus {
    outline: none;
    border-color: var(--mastering-primary);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}

.metadata-select-premium {
    cursor: pointer;
}

.metadata-select-premium option {
    background: var(--mastering-bg-dark);
    color: var(--text-primary);
}

/* Submit Button Premium */
.mastering-submit-btn-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 2rem;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35);
}

.mastering-submit-btn-premium svg {
    width: 20px;
    height: 20px;
}

.mastering-submit-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.5);
}

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

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

/* Loading Card Premium */
.mastering-loading-card-premium {
    text-align: center;
    padding: 3rem;
}

.mastering-loading-spinner-premium {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--mastering-primary);
    border-radius: 50%;
    animation: spinRing 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring.inner {
    inset: 10px;
    border-top-color: var(--mastering-secondary);
    animation-delay: -0.3s;
}

@keyframes spinRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mastering-loading-title-premium {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.mastering-loading-text-premium {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.mastering-steps-premium {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
    margin: 0 auto;
}

.mastering-step-pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mastering-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.mastering-step-pill.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: var(--mastering-primary);
}

.mastering-step-pill.completed {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.step-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.mastering-step-pill.active .step-number {
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

.mastering-step-pill.completed .step-number {
    background: #22c55e;
    color: white;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); }
}

.step-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.mastering-step-pill.active .step-text,
.mastering-step-pill.completed .step-text {
    color: var(--text-primary);
}

/* Results Section Premium */
.mastering-results-header-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
}

.mastering-qc-badge-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.mastering-qc-badge-premium .badge-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.05em;
}

.mastering-qc-badge-premium.fail {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.mastering-results-header-premium.fail {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.3);
}

.mastering-score-display-premium {
    display: flex;
    align-items: baseline;
}

.mastering-score-display-premium .score-value {
    font-size: 3rem;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
}

.mastering-score-display-premium .score-divider {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

/* Comparison Section */
.mastering-comparison-section {
    margin-bottom: 1.5rem;
}

.comparison-cards-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}

.comparison-card {
    padding: 1.25rem;
}

.comparison-card-header {
    margin-bottom: 0.75rem;
}

.comparison-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.comparison-card.original .comparison-label {
    color: var(--text-secondary);
}

.comparison-card.mastered .comparison-label {
    color: var(--mastering-primary);
}

.comparison-waveform {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.comparison-waveform canvas {
    width: 100%;
    height: 80px;
    display: block;
}

.comparison-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comparison-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mastering-border);
}

.comparison-stat-row:last-child {
    border-bottom: none;
}

.stat-name {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.stat-value {
    font-size: 0.9375rem;
    font-weight: 600;
}

.stat-value.before {
    color: var(--text-secondary);
}

.stat-value.after {
    color: var(--mastering-primary);
}

.comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border-radius: 50%;
}

.comparison-arrow svg {
    width: 24px;
    height: 24px;
    color: white;
}

/* Issues Card Premium */
.mastering-issues-card-premium {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-color: rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

.issues-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #ef4444;
    font-weight: 600;
}

.issues-header svg {
    width: 20px;
    height: 20px;
}

.mastering-issues-list-premium {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mastering-issues-list-premium .issue-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* No Issues Badge */
.mastering-no-issues-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: #22c55e;
    font-weight: 500;
}

.mastering-no-issues-badge svg {
    width: 20px;
    height: 20px;
}

/* Export Card Premium */
.mastering-export-card-premium {
    padding: 1.5rem;
}

.export-title-premium {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    text-align: center;
}

.export-format-pills {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.export-format-pill {
    padding: 0.75rem 2rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mastering-border);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-format-pill:hover {
    border-color: var(--mastering-primary);
    color: var(--text-primary);
}

.export-format-pill.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(99, 102, 241, 0.2));
    border-color: var(--mastering-primary);
    color: var(--mastering-primary);
}

.export-settings-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.export-setting-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 120px;
}

.export-setting-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: center;
}

.export-select-premium {
    padding: 0.625rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--mastering-border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
}

.export-select-premium:focus {
    outline: none;
    border-color: var(--mastering-primary);
}

.export-select-premium option {
    background: var(--mastering-bg-dark);
}

.export-buttons-row {
    display: flex;
    gap: 1rem;
}

.export-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.export-btn-primary svg {
    width: 18px;
    height: 18px;
}

.export-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

.export-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--mastering-border);
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.export-btn-secondary svg {
    width: 18px;
    height: 18px;
    color: var(--mastering-primary);
}

.export-btn-secondary:hover {
    border-color: var(--mastering-primary);
    background: rgba(168, 85, 247, 0.1);
}

/* New Button Premium */
.mastering-new-btn-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    margin-top: 1.5rem;
    background: transparent;
    border: 1px dashed var(--mastering-border);
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mastering-new-btn-premium svg {
    width: 18px;
    height: 18px;
}

.mastering-new-btn-premium:hover {
    border-color: var(--mastering-primary);
    color: var(--mastering-primary);
    background: rgba(168, 85, 247, 0.05);
}

/* Error Card Premium */
.mastering-error-card-premium {
    text-align: center;
    padding: 3rem;
}

.error-icon-premium {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
}

.error-icon-premium svg {
    width: 32px;
    height: 32px;
    color: #ef4444;
}

.error-title-premium {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.mastering-error-message-premium {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.mastering-retry-btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--mastering-primary), var(--mastering-secondary));
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}

.mastering-retry-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}

/* Feature Chips */
.mastering-features-grid-premium {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--mastering-border);
}

.mastering-feature-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid var(--mastering-border);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.mastering-feature-chip:hover {
    border-color: var(--mastering-primary);
    color: var(--text-primary);
}

.feature-chip-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-chip-icon svg {
    width: 14px;
    height: 14px;
    color: var(--mastering-primary);
}

/* Responsive Mastering Premium */
@media (max-width: 768px) {
    .mastering-title-premium {
        font-size: 2rem;
    }
    
    .mastering-preset-pills {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mastering-slider-group {
        grid-template-columns: 1fr;
    }
    
    .mastering-slider-item.full-width {
        grid-column: span 1;
    }
    
    .metadata-grid-two,
    .metadata-grid-three {
        grid-template-columns: 1fr;
    }
    
    .mastering-filter-controls {
        grid-template-columns: 1fr;
    }
    
    .comparison-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
    }
    
    .export-settings-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .export-buttons-row {
        flex-direction: column;
    }
    
    .mastering-results-header-premium {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .mastering-hero-premium {
        padding: 1rem 0;
    }
    
    .mastering-hero-badge {
        width: 56px;
        height: 56px;
    }
    
    .mastering-hero-badge svg {
        width: 28px;
        height: 28px;
    }
    
    .mastering-title-premium {
        font-size: 1.75rem;
    }
    
    .mastering-preset-pills {
        grid-template-columns: 1fr;
    }
    
    .mastering-mode-toggle-premium {
        flex-direction: column;
        width: 100%;
    }
    
    .mastering-mode-pill {
        justify-content: center;
    }
    
    .export-format-pills {
        flex-direction: column;
    }
    
    .export-format-pill {
        width: 100%;
    }
    
    .mastering-features-grid-premium {
        flex-direction: column;
        align-items: center;
    }
}

/* TikTok Voice Claim Tool */
.tvc-container {
    max-width: 900px;
    margin: 0 auto;
    padding-top: 1rem;
}

.tvc-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.tvc-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.tvc-subtitle {
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.tvc-description-card {
    display: flex;
    gap: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    margin-bottom: 2rem;
}

.tvc-description-icon {
    width: 4rem;
    height: 4rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tvc-description-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.tvc-description-content {
    flex: 1;
}

.tvc-description-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.tvc-description-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tvc-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tvc-feature-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
}

.tvc-privacy-note {
    font-size: 0.8125rem;
    color: var(--success);
}

.tvc-upload-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-bottom: 2rem;
}

.tvc-upload-card:hover,
.tvc-upload-card.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: var(--shadow-glow);
}

.tvc-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.tvc-upload-icon {
    width: 4rem;
    height: 4rem;
    color: var(--accent-primary);
}

.tvc-upload-icon svg {
    width: 100%;
    height: 100%;
}

.tvc-upload-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

.tvc-choose-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tvc-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.tvc-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.tvc-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.tvc-files-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.tvc-files-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.tvc-files-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tvc-files-count {
    padding: 0.25rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tvc-add-more-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tvc-add-more-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.tvc-add-more-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.tvc-files-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.tvc-files-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    min-height: 80px;
}

.tvc-file-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: grab;
    transition: all var(--transition-fast);
}

.tvc-file-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.tvc-file-item.dragging {
    opacity: 0.5;
    border-style: dashed;
    border-color: var(--accent-primary);
}

.tvc-file-item.drag-over {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.tvc-file-drag-handle {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    cursor: grab;
}

.tvc-file-drag-handle svg {
    width: 1.125rem;
    height: 1.125rem;
}

.tvc-file-number {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.tvc-file-icon {
    width: 2rem;
    height: 2rem;
    color: var(--accent-primary);
}

.tvc-file-icon svg {
    width: 100%;
    height: 100%;
}

.tvc-file-details {
    flex: 1;
    min-width: 0;
}

.tvc-file-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.tvc-file-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.tvc-file-remove {
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.tvc-file-remove:hover {
    background: var(--error);
    color: white;
}

.tvc-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.tvc-controls-section {
    border-top: 1px solid var(--border-light);
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.tvc-controls-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.tvc-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.tvc-control-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
}

.tvc-control-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.875rem;
}

.tvc-control-label svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary);
}

.tvc-control-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tvc-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    outline: none;
}

.tvc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    transition: transform var(--transition-fast);
}

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

.tvc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.tvc-control-value {
    min-width: 3.5rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-primary);
    text-align: center;
}

.tvc-control-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tvc-process-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.tvc-process-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.tvc-process-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.tvc-processing {
    margin-bottom: 2rem;
}

.tvc-processing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
}

.tvc-processing-spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 3px solid var(--bg-tertiary);
    border-top: 3px solid var(--accent-primary);
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    animation: spin 1s linear infinite;
}

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

.tvc-processing-text {
    display: block;
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.tvc-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    max-width: 300px;
    margin: 0 auto;
}

.tvc-progress-fill {
    height: 100%;
    background: var(--accent-gradient);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

.tvc-results {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    margin-bottom: 2rem;
}

.tvc-results-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.tvc-results-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
}

.tvc-results-icon svg {
    width: 2rem;
    height: 2rem;
}

.tvc-results-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tvc-player-section {
    margin-bottom: 1.5rem;
}

.tvc-player-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.tvc-audio-player {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-lg);
}

.tvc-download-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tvc-download-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
}

.tvc-download-btn svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
}

.tvc-download-btn span:first-of-type {
    font-size: 0.9375rem;
}

.tvc-download-hint {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.7;
}

.tvc-download-wav {
    background: var(--accent-gradient);
    color: white;
}

.tvc-download-wav:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.tvc-download-mp3 {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.tvc-download-mp3:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

.tvc-start-over-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tvc-start-over-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.tvc-start-over-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.tvc-info-section {
    margin-bottom: 2rem;
}

.tvc-info-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tvc-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.tvc-info-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.tvc-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.tvc-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.tvc-info-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.tvc-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.tvc-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.tvc-info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.tvc-info-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .tvc-title {
        font-size: 2rem;
    }
    
    .tvc-subtitle {
        font-size: 1rem;
    }
    
    .tvc-description-card {
        flex-direction: column;
        text-align: center;
    }
    
    .tvc-description-icon {
        margin: 0 auto;
    }
    
    .tvc-features-list {
        justify-content: center;
    }
    
    .tvc-controls-grid {
        grid-template-columns: 1fr;
    }
    
    .tvc-download-section {
        grid-template-columns: 1fr;
    }
    
    .tvc-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tvc-container {
        padding-top: 0.5rem;
    }
    
    .tvc-title {
        font-size: 1.75rem;
    }
    
    .tvc-upload-card {
        padding: 2rem 1rem;
    }
    
    .tvc-files-header {
        flex-wrap: wrap;
    }
    
    .tvc-add-more-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

/* ==========================================
   LYRICS GENERATOR PAGE STYLES (ULTRA PREMIUM)
   ========================================== */

.lyrics-container {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 1.5rem;
    animation: cardFadeIn 0.5s ease-out forwards;
}

.lyrics-hero {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.lyrics-hero-icon {
    width: 5.5rem;
    height: 5.5rem;
    background: linear-gradient(135deg, rgba(255, 91, 181, 0.3), rgba(189, 107, 255, 0.35), rgba(70, 226, 255, 0.3));
    border: 1px solid rgba(189, 107, 255, 0.4);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 30px rgba(189, 107, 255, 0.3);
    animation: iconBreathe 5s ease-in-out infinite;
    position: relative;
}

.lyrics-hero-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, rgba(255, 91, 181, 0.4), rgba(189, 107, 255, 0.5), rgba(70, 226, 255, 0.4), rgba(255, 91, 181, 0.4));
    animation: rotateGlowRing 12s linear infinite;
    z-index: -1;
    filter: blur(6px);
    opacity: 0.6;
}

.lyrics-hero-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
    filter: drop-shadow(0 0 8px rgba(189, 107, 255, 0.5));
}

.lyrics-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, #fff, rgba(189, 107, 255, 0.9), #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 10s ease-in-out infinite;
}

.lyrics-subtitle {
    color: rgba(139, 143, 168, 0.9);
    font-size: 1.125rem;
    max-width: 500px;
    margin: 0 auto;
    opacity: 0.85;
}

.lyrics-form-section {
    margin-bottom: 2rem;
}

.lyrics-form-card {
    background: rgba(17, 18, 27, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(180, 100, 255, 0.2);
    border-radius: 1.375rem;
    padding: 2rem;
    position: relative;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.25s ease-out;
}

.lyrics-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(189, 107, 255, 0.5), rgba(70, 226, 255, 0.4), transparent);
}

.lyrics-form-card:hover {
    border-color: rgba(180, 100, 255, 0.35);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(189, 107, 255, 0.15);
}

.lyrics-form-group {
    margin-bottom: 1.5rem;
}

.lyrics-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.lyrics-label svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.lyrics-input,
.lyrics-textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    background: rgba(17, 18, 27, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(180, 100, 255, 0.18);
    border-radius: 0.875rem;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease-out;
}

.lyrics-textarea {
    min-height: 120px;
    resize: vertical;
}

.lyrics-input:focus,
.lyrics-textarea:focus {
    outline: none;
    border-color: rgba(189, 107, 255, 0.5);
    background: rgba(20, 22, 35, 0.75);
    box-shadow: 0 0 0 3px rgba(189, 107, 255, 0.12), 0 0 20px rgba(189, 107, 255, 0.15);
}

.lyrics-input::placeholder,
.lyrics-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.lyrics-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.lyrics-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.lyrics-advanced-options {
    margin-bottom: 1.5rem;
}

.lyrics-options-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
}

.lyrics-options-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.lyrics-options-header svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--accent-primary);
}

.lyrics-title-options {
    margin-bottom: 1rem;
}

.lyrics-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.lyrics-checkbox-label:hover {
    color: var(--text-primary);
}

.lyrics-checkbox-label input[type="checkbox"] {
    display: none;
}

.lyrics-checkbox-custom {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.lyrics-checkbox-label input[type="checkbox"]:checked + .lyrics-checkbox-custom {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.lyrics-checkbox-label input[type="checkbox"]:checked + .lyrics-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.3125rem;
    height: 0.5625rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.lyrics-custom-title-wrapper {
    margin-top: 0.75rem;
    margin-left: 1.875rem;
}

.lyrics-custom-title-wrapper .lyrics-input {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.lyrics-style-boosts {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.lyrics-boosts-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.lyrics-boosts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.25rem;
}

.lyrics-generate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 0.5rem;
}

.lyrics-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.lyrics-btn-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Loading Section */
.lyrics-loading-section {
    margin-bottom: 2rem;
}

.lyrics-loading-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
}

.lyrics-loading-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.lyrics-loading-dot {
    width: 1rem;
    height: 1rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    animation: lyricsLoadingBounce 1.4s ease-in-out infinite;
}

.lyrics-loading-dot:nth-child(1) {
    animation-delay: 0s;
}

.lyrics-loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.lyrics-loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes lyricsLoadingBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.lyrics-loading-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.lyrics-loading-text {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Result Section */
.lyrics-result-section {
    margin-bottom: 2rem;
}

.lyrics-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.lyrics-result-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lyrics-result-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lyrics-meta-tag {
    padding: 0.375rem 0.875rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.lyrics-output-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.lyrics-output-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.lyrics-action-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.lyrics-action-btn:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.lyrics-action-btn svg {
    width: 1rem;
    height: 1rem;
}

.lyrics-song-title-display {
    text-align: center;
    padding: 1.5rem 1.5rem 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
}

.lyrics-song-title-display:empty {
    display: none;
}

.lyrics-output-content {
    padding: 1.5rem;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 1.0625rem;
    line-height: 1.9;
    color: var(--text-primary);
    font-family: inherit;
}

.lyrics-section-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.lyrics-section-label:first-child {
    margin-top: 0;
}

.lyrics-verse-line {
    display: block;
    margin-bottom: 0.25rem;
}

.lyrics-output-content::-webkit-scrollbar {
    width: 8px;
}

.lyrics-output-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.lyrics-output-content::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.lyrics-output-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

.lyrics-new-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 1rem;
}

.lyrics-new-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.lyrics-new-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Error Section */
.lyrics-error-section {
    margin-bottom: 2rem;
}

.lyrics-error-card {
    background: var(--bg-card);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-2xl);
    padding: 2.5rem 2rem;
    text-align: center;
}

.lyrics-error-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.lyrics-error-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--error);
}

.lyrics-error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.lyrics-error-text {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.lyrics-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.lyrics-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.lyrics-retry-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Info Section */
.lyrics-info-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.lyrics-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.lyrics-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.lyrics-info-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.lyrics-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lyrics-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.lyrics-info-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.lyrics-info-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .lyrics-title {
        font-size: 2rem;
    }
    
    .lyrics-subtitle {
        font-size: 1rem;
    }
    
    .lyrics-form-row {
        grid-template-columns: 1fr;
    }
    
    .lyrics-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lyrics-result-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .lyrics-container {
        padding-top: 0.5rem;
    }
    
    .lyrics-title {
        font-size: 1.75rem;
    }
    
    .lyrics-hero-icon {
        width: 4rem;
        height: 4rem;
    }
    
    .lyrics-hero-icon svg {
        width: 2rem;
        height: 2rem;
    }
    
    .lyrics-form-card {
        padding: 1.5rem;
    }
    
    .lyrics-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   AUDIO CONVERTER PAGE STYLES
   ============================================ */

.converter-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.converter-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.converter-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.converter-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.converter-description-card {
    display: flex;
    gap: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.converter-description-icon {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.converter-description-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.converter-description-content {
    flex: 1;
}

.converter-description-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.converter-description-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.converter-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.converter-feature-tag {
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
}

.converter-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.converter-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.converter-upload-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.converter-upload-card:hover,
.converter-upload-card.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.converter-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.converter-upload-icon {
    width: 4rem;
    height: 4rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.converter-upload-card:hover .converter-upload-icon {
    background: var(--accent-gradient);
}

.converter-upload-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
    transition: color var(--transition-normal);
}

.converter-upload-card:hover .converter-upload-icon svg {
    color: white;
}

.converter-upload-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

.converter-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.converter-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.converter-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.converter-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.converter-file-info {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.converter-file-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.converter-file-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.converter-file-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.converter-file-details {
    flex: 1;
    min-width: 0;
}

.converter-file-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.converter-file-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.converter-file-remove {
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.converter-file-remove:hover {
    background: var(--error);
    color: white;
}

.converter-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.converter-waveform-box {
    height: 120px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.converter-waveform-placeholder {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.converter-waveform-canvas {
    width: 100%;
    height: 100%;
}

.converter-options-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
}

.converter-option-group {
    margin-bottom: 1.25rem;
}

.converter-option-group:last-of-type {
    margin-bottom: 1.5rem;
}

.converter-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.converter-option-label svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary);
}

/* Converter select uses global premium dropdown styles */

.converter-option-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.converter-convert-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.converter-convert-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.converter-convert-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.converter-convert-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.converter-convert-btn .spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.converter-processing {
    margin-bottom: 2rem;
}

.converter-processing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.converter-processing-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.converter-processing-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

.converter-results {
    margin-bottom: 2rem;
}

.converter-results-card {
    background: var(--bg-card);
    border: 1px solid var(--success);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
}

.converter-results-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.converter-results-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.converter-results-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--success);
}

.converter-results-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.converter-results-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.converter-result-item {
    text-align: center;
}

.converter-result-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.converter-result-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.converter-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-bottom: 1rem;
}

.converter-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.converter-download-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.converter-start-over-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.converter-start-over-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.converter-start-over-btn svg {
    width: 1rem;
    height: 1rem;
}

.converter-error {
    margin-bottom: 2rem;
}

.converter-error-card {
    background: var(--bg-card);
    border: 1px solid var(--error);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
}

.converter-error-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.converter-error-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--error);
}

.converter-error-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.converter-error-message {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.converter-try-again-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.converter-try-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.converter-try-again-btn svg {
    width: 1rem;
    height: 1rem;
}

.converter-info-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.converter-info-header {
    text-align: center;
    margin-bottom: 2rem;
}

.converter-info-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.converter-info-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.converter-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.converter-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.converter-info-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.converter-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.converter-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.converter-info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.converter-info-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Audio Converter Responsive Styles */
@media (max-width: 768px) {
    .converter-title {
        font-size: 2rem;
    }
    
    .converter-subtitle {
        font-size: 1rem;
    }
    
    .converter-description-card {
        flex-direction: column;
        text-align: center;
    }
    
    .converter-description-icon {
        margin: 0 auto;
    }
    
    .converter-features-list {
        justify-content: center;
    }
    
    .converter-main-grid {
        grid-template-columns: 1fr;
    }
    
    .converter-results-info {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .converter-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .converter-container {
        padding: 0.5rem 1rem 2rem;
    }
    
    .converter-title {
        font-size: 1.75rem;
    }
    
    .converter-description-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .converter-description-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .converter-upload-card {
        padding: 1.5rem;
    }
    
    .converter-options-card {
        padding: 1.25rem;
    }
    
    .converter-results-info {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

/* ============================================
   COPYRIGHT AVOID PAGE STYLES
   ============================================ */

.copyright-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.copyright-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.copyright-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.copyright-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.copyright-description-card {
    display: flex;
    gap: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.copyright-description-icon {
    width: 4rem;
    height: 4rem;
    min-width: 4rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright-description-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.copyright-description-content {
    flex: 1;
}

.copyright-description-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.copyright-description-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.copyright-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.copyright-feature-tag {
    display: inline-flex;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--accent-primary);
}

.copyright-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.copyright-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.copyright-upload-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.copyright-upload-card:hover,
.copyright-upload-card.dragover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.copyright-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.copyright-upload-icon {
    width: 4rem;
    height: 4rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
}

.copyright-upload-card:hover .copyright-upload-icon {
    background: var(--accent-gradient);
}

.copyright-upload-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
    transition: color var(--transition-normal);
}

.copyright-upload-card:hover .copyright-upload-icon svg {
    color: white;
}

.copyright-upload-text {
    font-size: 1rem;
    color: var(--text-secondary);
}

.copyright-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.copyright-choose-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-choose-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.copyright-upload-formats {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.copyright-file-info {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.copyright-file-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.copyright-file-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright-file-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.copyright-file-details {
    flex: 1;
    min-width: 0;
}

.copyright-file-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copyright-file-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.copyright-file-remove {
    width: 2rem;
    height: 2rem;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.copyright-file-remove:hover {
    background: var(--error);
    color: white;
}

.copyright-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.copyright-waveform-box {
    height: 120px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.copyright-waveform-placeholder {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.copyright-waveform-canvas {
    width: 100%;
    height: 100%;
}

.copyright-options-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
}

.copyright-option-group {
    margin-bottom: 1.25rem;
}

.copyright-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.copyright-option-label svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary);
}

/* Copyright select uses global premium dropdown styles */

.copyright-slider-group {
    margin-bottom: 1.5rem;
}

.copyright-slider-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.copyright-slider-label svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary);
}

.copyright-slider-value {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-md);
}

.copyright-slider {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.copyright-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent-gradient);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    transition: transform var(--transition-fast);
}

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

.copyright-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.copyright-slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.copyright-process-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 0.5rem;
}

.copyright-process-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-process-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.copyright-process-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.copyright-processing {
    margin-bottom: 2rem;
}

.copyright-processing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.copyright-processing-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.copyright-processing-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.copyright-processing-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.copyright-results {
    margin-bottom: 2rem;
}

.copyright-results-card {
    background: var(--bg-card);
    border: 1px solid var(--success);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
}

.copyright-results-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.copyright-results-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright-results-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--success);
}

.copyright-results-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.copyright-results-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.copyright-result-item {
    text-align: center;
}

.copyright-result-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.copyright-result-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.copyright-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-bottom: 1rem;
}

.copyright-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-download-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.copyright-start-over-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.copyright-start-over-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.copyright-start-over-btn svg {
    width: 1rem;
    height: 1rem;
}

.copyright-error {
    margin-bottom: 2rem;
}

.copyright-error-card {
    background: var(--bg-card);
    border: 1px solid var(--error);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    text-align: center;
}

.copyright-error-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.copyright-error-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--error);
}

.copyright-error-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.copyright-error-message {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.copyright-try-again-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.copyright-try-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-try-again-btn svg {
    width: 1rem;
    height: 1rem;
}

.copyright-info-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.copyright-info-header {
    text-align: center;
    margin-bottom: 2rem;
}

.copyright-info-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.copyright-info-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.copyright-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.copyright-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-normal);
}

.copyright-info-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.copyright-info-icon {
    width: 3rem;
    height: 3rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.copyright-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.copyright-info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.copyright-info-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Copyright Avoid Responsive Styles */
@media (max-width: 768px) {
    .copyright-title {
        font-size: 2rem;
    }
    
    .copyright-subtitle {
        font-size: 1rem;
    }
    
    .copyright-description-card {
        flex-direction: column;
        text-align: center;
    }
    
    .copyright-description-icon {
        margin: 0 auto;
    }
    
    .copyright-features-list {
        justify-content: center;
    }
    
    .copyright-main-grid {
        grid-template-columns: 1fr;
    }
    
    .copyright-results-info {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .copyright-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .copyright-container {
        padding: 0.5rem 1rem 2rem;
    }
    
    .copyright-title {
        font-size: 1.75rem;
    }
    
    .copyright-description-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .copyright-description-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .copyright-upload-card {
        padding: 1.5rem;
    }
    
    .copyright-options-card {
        padding: 1.25rem;
    }
    
    .copyright-results-info {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ==========================================
   Copyright Check Page Styles
   ========================================== */

.copyright-check-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.copyright-check-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.copyright-check-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.copyright-check-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.copyright-check-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.copyright-check-card {
    background: rgba(10, 5, 25, 0.65);
    border: 1px solid rgba(160, 80, 255, 0.18);
    border-radius: 24px;
    padding: 1.5rem;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    transition: all 200ms ease-out;
}

.copyright-check-card:hover {
    border-color: rgba(163, 95, 255, 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 24px rgba(155, 92, 255, 0.15);
}

.copyright-check-card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.copyright-check-card-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.copyright-check-upload-area {
    border: none;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.25s ease-out;
    cursor: pointer;
    background: rgba(10, 5, 25, 0.45);
    position: relative;
}

/* Neon dashed gradient border for upload area */
.copyright-check-upload-area::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.4), rgba(70, 225, 255, 0.3), rgba(255, 111, 216, 0.35));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.copyright-check-upload-area::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(155, 92, 255, 0.35);
    border-radius: 16px;
    pointer-events: none;
}

.copyright-check-upload-area:hover,
.copyright-check-upload-area.dragover {
    background: rgba(155, 92, 255, 0.08);
    box-shadow: 0 0 28px rgba(155, 92, 255, 0.25);
}

.copyright-check-upload-area:hover::before,
.copyright-check-upload-area.dragover::before {
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.7), rgba(70, 225, 255, 0.5), rgba(255, 111, 216, 0.55));
}

.copyright-check-upload-area:hover::after,
.copyright-check-upload-area.dragover::after {
    border-color: rgba(155, 92, 255, 0.6);
}

.copyright-check-upload-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, rgba(155, 92, 255, 0.25), rgba(70, 225, 255, 0.2));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: uploadPulse 1.5s ease-in-out infinite;
}

.copyright-check-upload-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--accent-b);
    filter: drop-shadow(0 0 8px rgba(155, 92, 255, 0.4));
}

.copyright-check-upload-text {
    display: block;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.copyright-check-select-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.copyright-check-select-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-check-select-btn svg {
    width: 1rem;
    height: 1rem;
}

.copyright-check-formats {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.copyright-check-file-info {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

.copyright-check-file-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.copyright-check-file-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.copyright-check-file-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}

.copyright-check-file-details {
    flex: 1;
    min-width: 0;
}

.copyright-check-file-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copyright-check-file-size {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.copyright-check-file-remove {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.copyright-check-file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.copyright-check-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.copyright-check-analyze-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 1rem;
}

.copyright-check-analyze-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.copyright-check-analyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.copyright-check-analyze-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Fade+slide animation for result panels */
@keyframes copyrightResultFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.copyright-check-result-initial {
    padding: 2rem 1rem;
    text-align: center;
}

.copyright-check-result-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.copyright-check-result-placeholder svg {
    width: 3rem;
    height: 3rem;
    color: var(--text-muted);
    opacity: 0.5;
}

.copyright-check-result-placeholder p {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.copyright-check-result-loading {
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.copyright-check-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.copyright-check-loading-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.copyright-check-loading-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.copyright-check-result-safe {
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: copyrightResultFadeIn 250ms ease-out forwards;
}

.copyright-check-safe-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.copyright-check-safe-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.copyright-check-safe-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--success);
}

.copyright-check-safe-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.copyright-check-result-match {
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: copyrightResultFadeIn 250ms ease-out forwards;
}

.copyright-check-match-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

.copyright-check-match-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.copyright-check-match-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--warning);
}

.copyright-check-match-details {
    width: 100%;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: left;
}

.copyright-check-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}

.copyright-check-detail-row:last-child {
    border-bottom: none;
}

.copyright-check-detail-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.copyright-check-detail-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

.copyright-check-match-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.copyright-check-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.copyright-check-link-btn svg {
    width: 1rem;
    height: 1rem;
}

.copyright-check-link-btn.spotify {
    background: #1DB954;
    color: white;
}

.copyright-check-link-btn.spotify:hover {
    background: #1ed760;
    transform: translateY(-2px);
}

.copyright-check-link-btn.apple {
    background: linear-gradient(135deg, #fa2d48, #fc3d39);
    color: white;
}

.copyright-check-link-btn.apple:hover {
    background: linear-gradient(135deg, #ff4458, #ff5050);
    transform: translateY(-2px);
}

.copyright-check-result-error {
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: copyrightResultFadeIn 250ms ease-out forwards;
}

.copyright-check-error-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.copyright-check-error-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.copyright-check-error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--error);
}

.copyright-check-error-message {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.copyright-check-raw-section {
    margin-top: 1rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1rem;
}

.copyright-check-raw-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.copyright-check-raw-toggle:hover {
    color: var(--accent-primary);
}

.copyright-check-raw-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-fast);
}

.copyright-check-raw-toggle.expanded svg {
    transform: rotate(180deg);
}

.copyright-check-raw-content {
    margin-top: 0.75rem;
    background: var(--bg-dark);
    border-radius: var(--radius-md);
    padding: 1rem;
    max-height: 300px;
    overflow: auto;
}

.copyright-check-raw-content pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
}

.copyright-check-reset-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 1rem;
}

.copyright-check-reset-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

.copyright-check-reset-btn svg {
    width: 1rem;
    height: 1rem;
}

.copyright-check-info-section {
    margin-top: 2rem;
}

.copyright-check-info-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.copyright-check-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.copyright-check-info-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.copyright-check-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.copyright-check-info-card {
    background: rgba(10, 5, 25, 0.55);
    border: 1px solid rgba(160, 80, 255, 0.12);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 180ms ease-out;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.copyright-check-info-card:hover {
    border-color: rgba(160, 80, 255, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 12px rgba(155, 92, 255, 0.2);
    transform: translateY(-4px);
}

.copyright-check-info-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright-check-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: white;
}

.copyright-check-info-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.copyright-check-info-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================================
   COPYRIGHT SCANNER PRO - RESPONSIVE STYLES
   Desktop: 2-column grid | Mobile (<768px): Stacked vertical layout
   ============================================================================ */

/* Desktop: Ensure 2-column layout */
@media (min-width: 769px) {
    .copyright-check-main-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .copyright-check-upload-section,
    .copyright-check-result-section {
        width: 100%;
        min-height: auto;
    }
    
    .copyright-check-card {
        height: auto;
        min-height: 320px;
        overflow-y: auto;
    }
}

/* Tablet/Mobile: Stacked vertical layout */
@media (max-width: 768px) {
    .copyright-check-container {
        padding: 1rem 16px 2rem;
    }
    
    .copyright-check-hero {
        margin-bottom: 1.5rem;
    }
    
    .copyright-check-title {
        font-size: 1.875rem;
        line-height: 1.2;
    }
    
    .copyright-check-subtitle {
        font-size: 0.9375rem;
    }
    
    /* Main grid: Stacked vertical layout */
    .copyright-check-main-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Upload card - First */
    .copyright-check-upload-section {
        order: 1;
        width: 100%;
    }
    
    /* Result card - Second */
    .copyright-check-result-section {
        order: 2;
        width: 100%;
    }
    
    /* Cards: Full width, no fixed heights, proper padding */
    .copyright-check-card {
        width: 100%;
        padding: 16px;
        min-height: auto;
        max-height: none;
        height: auto;
        overflow-y: auto;
        border-radius: 20px;
    }
    
    /* Result states: Flexible height with proper padding */
    .copyright-check-result-initial,
    .copyright-check-result-loading,
    .copyright-check-result-safe,
    .copyright-check-result-match,
    .copyright-check-result-error {
        min-height: 160px;
        height: auto;
        padding: 1.25rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Ensure hidden class still works */
    .copyright-check-result-section .hidden {
        display: none !important;
    }
    
    /* Upload area */
    .copyright-check-upload-area {
        padding: 1.5rem 1rem;
    }
    
    .copyright-check-upload-area::before {
        border-radius: 16px;
    }
    
    .copyright-check-upload-area::after {
        border-radius: 12px;
        inset: 3px;
    }
    
    /* Match details: Allow horizontal scroll if needed */
    .copyright-check-match-details {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Info section: Below both cards */
    .copyright-check-info-section {
        order: 3;
        margin-top: 1.5rem;
    }
    
    .copyright-check-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .copyright-check-info-card {
        padding: 1.25rem;
    }
}

/* Small mobile: Extra compact */
@media (max-width: 480px) {
    .copyright-check-container {
        padding: 0.75rem 12px 2rem;
    }
    
    .copyright-check-title {
        font-size: 1.5rem;
    }
    
    .copyright-check-subtitle {
        font-size: 0.875rem;
    }
    
    .copyright-check-card {
        padding: 14px;
        border-radius: 16px;
    }
    
    .copyright-check-card-title {
        font-size: 1rem;
        gap: 0.5rem;
    }
    
    .copyright-check-upload-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .copyright-check-upload-text {
        font-size: 0.875rem;
    }
    
    .copyright-check-select-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Stack match details vertically */
    .copyright-check-detail-row {
        flex-direction: column;
        gap: 0.25rem;
        text-align: left;
    }
    
    .copyright-check-detail-value {
        text-align: left;
    }
    
    /* Stack link buttons vertically */
    .copyright-check-match-links {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .copyright-check-link-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Result icons smaller */
    .copyright-check-safe-icon,
    .copyright-check-match-icon,
    .copyright-check-error-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .copyright-check-safe-icon svg,
    .copyright-check-match-icon svg,
    .copyright-check-error-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    
    .copyright-check-safe-title,
    .copyright-check-match-title,
    .copyright-check-error-title {
        font-size: 1.125rem;
    }
}

/* ============================================================================
   AI AUDIO QC RESULTS STYLES - GLASSMORPHISM UPGRADE
   ============================================================================ */

/* QC Category Card (Glassmorphism) */
.qc-category {
    background: rgba(10, 5, 25, 0.55);
    border: 1px solid rgba(160, 80, 255, 0.12);
    border-radius: 24px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    transition: all 180ms ease-out;
    position: relative;
    overflow: hidden;
}

.qc-category:hover {
    border-color: rgba(160, 80, 255, 0.25);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 16px rgba(150, 80, 255, 0.25);
    transform: translateY(-4px);
}

/* QC PASS/FAIL badges redesigned */
.qc-badge-pass,
.qc-status.pass {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.qc-badge-fail,
.qc-status.fail {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.qc-categories {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #ff6fd8, #9b5cff);
    border-radius: 2px;
}

.qc-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.qc-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: background 160ms ease;
}

.qc-row:hover {
    background: rgba(155, 92, 255, 0.08);
}

.qc-param {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.qc-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    color: #fff;
    text-align: right;
}

.qc-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.qc-status.pass {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.qc-status.warning, .qc-status.need_fix {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.qc-status.fail {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Report Tabs Styling */
.report-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(10, 10, 26, 0.6);
    border: 1px solid rgba(155, 92, 255, 0.15);
    border-radius: 14px;
    margin-bottom: 1.5rem;
}

.tab-btn {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 160ms ease;
}

.tab-btn:hover {
    background: rgba(155, 92, 255, 0.1);
    color: #fff;
}

.tab-btn.active {
    background: linear-gradient(90deg, rgba(255, 111, 216, 0.25), rgba(155, 92, 255, 0.25));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 16px rgba(155, 92, 255, 0.2);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: tabFadeIn 200ms ease-out;
}

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

.qc-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem 2rem;
    background: rgba(10, 10, 26, 0.75);
    border: 1px solid rgba(155, 92, 255, 0.22);
    border-radius: 18px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    margin-bottom: 1.5rem;
}

.qc-status-badge {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qc-status-badge.status-pass {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: var(--success);
    border: 1px solid var(--success);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.qc-status-badge.status-need-fix {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: var(--warning);
    border: 1px solid var(--warning);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.qc-status-badge.status-fail {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: var(--error);
    border: 1px solid var(--error);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.qc-score-display {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.qc-score-value {
    font-size: 3rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.qc-score-label {
    font-size: 1.25rem;
    color: var(--text-muted);
    font-weight: 500;
}

.qc-waveform-preview {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.qc-waveform-preview img {
    width: 100%;
    height: auto;
    display: block;
}

.qc-analysis-summary {
    margin-bottom: 1.5rem;
}

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

.analysis-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
}

.analysis-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.analysis-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.analysis-value.value-good {
    color: var(--success);
}

.analysis-value.value-warn {
    color: var(--warning);
}

.qc-comparison {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.comparison-section {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    position: relative;
}

.before-section {
    border-left: 3px solid var(--warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, var(--bg-card) 50%);
}

.after-section {
    border-left: 3px solid var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-card) 50%);
}

.comparison-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.before-section .comparison-title {
    color: var(--warning);
}

.before-section .comparison-title svg {
    width: 18px;
    height: 18px;
    stroke: var(--warning);
}

.after-section .comparison-title {
    color: var(--success);
}

.after-section .comparison-title svg {
    width: 18px;
    height: 18px;
    stroke: var(--success);
}

.comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.comparison-arrow svg {
    width: 32px;
    height: 32px;
    stroke: var(--accent-primary);
    animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

.mastered-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border: 1px solid var(--success);
    border-radius: var(--radius-lg);
    color: var(--success);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mastered-badge svg {
    width: 16px;
    height: 16px;
    stroke: var(--success);
}

.pdf-btn {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.pdf-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

@media (max-width: 768px) {
    .qc-comparison {
        flex-direction: column;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }
}

.qc-issues-list {
    margin-bottom: 1.5rem;
}

.issues-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.issues-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.issue-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    border-left: 3px solid;
}

.issue-item.issue-error {
    border-left-color: var(--error);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-card) 50%);
}

.issue-item.issue-warn {
    border-left-color: var(--warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--bg-card) 50%);
}

.issue-item.issue-info {
    border-left-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, var(--bg-card) 50%);
}

.issue-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.issue-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.issue-severity {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
}

.issue-item.issue-error .issue-severity {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.issue-item.issue-warn .issue-severity {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.issue-item.issue-info .issue-severity {
    background: rgba(99, 102, 241, 0.2);
    color: var(--accent-primary);
}

.issue-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.issue-fix {
    font-size: 0.8125rem;
    color: var(--success);
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--success);
}

.no-issues {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 50%);
    border: 1px solid var(--success);
    border-radius: var(--radius-lg);
    color: var(--success);
    font-weight: 500;
}

.no-issues svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.qc-download-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.qc-download-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.qc-download-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.qc-download-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.download-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.download-btn.wav-btn {
    background: var(--accent-gradient);
    color: white;
}

.download-btn.wav-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.download-btn.flac-btn {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.download-btn.flac-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.secondary-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.secondary-btn:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
}

.loading-container,
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner {
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

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

.loading-container h3,
.error-container h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.loading-container p,
.error-container p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    max-width: 400px;
}

.error-icon {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.error-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--error);
}

.error-container .secondary-btn {
    margin-top: 1.5rem;
}

/* QC Page Responsive Styles */
@media (max-width: 768px) {
    .qc-results-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.25rem;
    }
    
    .qc-score-value {
        font-size: 2.5rem;
    }
    
    .analysis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .qc-download-buttons {
        flex-direction: column;
    }
    
    .download-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .qc-status-badge {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    .analysis-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    .analysis-item {
        padding: 0.75rem;
    }
    
    .analysis-value {
        font-size: 1rem;
    }
}

/* =====================================================
   NEW HOME PAGE STYLES - Zulfiyaan Music Studio
   ===================================================== */

.home-new-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 3rem 0 4rem;
    margin-bottom: 3rem;
    border-radius: var(--radius-3xl);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(168, 85, 247, 0.05) 100%);
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.hero-left {
    max-width: 600px;
}

.hero-main-title {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-xl);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    text-decoration: none;
}

.hero-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hero-btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: var(--shadow-glow);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.hero-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.hero-btn-secondary:hover {
    border-color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}

/* Audio Preview Card (Glassmorphism) */
.hero-right {
    display: flex;
    justify-content: center;
}

.audio-preview-card {
    width: 100%;
    max-width: 400px;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.preview-waveform {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 120px;
    margin-bottom: 1.5rem;
}

.waveform-bar {
    width: 6px;
    background: var(--accent-gradient);
    border-radius: 3px;
    opacity: 0.8;
    animation: waveformPulse 1.5s ease-in-out infinite;
}

.waveform-bar:nth-child(1) { animation-delay: 0s; }
.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }
.waveform-bar:nth-child(6) { animation-delay: 0.5s; }
.waveform-bar:nth-child(7) { animation-delay: 0.6s; }
.waveform-bar:nth-child(8) { animation-delay: 0.7s; }
.waveform-bar:nth-child(9) { animation-delay: 0.8s; }
.waveform-bar:nth-child(10) { animation-delay: 0.9s; }
.waveform-bar:nth-child(11) { animation-delay: 1s; }
.waveform-bar:nth-child(12) { animation-delay: 1.1s; }
.waveform-bar:nth-child(13) { animation-delay: 1.2s; }
.waveform-bar:nth-child(14) { animation-delay: 1.3s; }
.waveform-bar:nth-child(15) { animation-delay: 1.4s; }
.waveform-bar:nth-child(16) { animation-delay: 0.05s; }
.waveform-bar:nth-child(17) { animation-delay: 0.15s; }
.waveform-bar:nth-child(18) { animation-delay: 0.25s; }
.waveform-bar:nth-child(19) { animation-delay: 0.35s; }
.waveform-bar:nth-child(20) { animation-delay: 0.45s; }

@keyframes waveformPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.8; }
    50% { transform: scaleY(0.6); opacity: 0.5; }
}

.preview-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-play-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preview-play-icon svg {
    width: 1rem;
    height: 1rem;
    color: white;
    margin-left: 2px;
}

.preview-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Section Titles */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: -0.02em;
}

.section-title-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quick Tools Section */
.quick-tools-section {
    margin-bottom: 5rem;
}

.quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Ultra-Premium Quick Tool Cards */
.quick-tool-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 1.375rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
    min-height: 88px;
    box-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.quick-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(99, 102, 241, 0.15) 50%, transparent 90%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.quick-tool-card:hover {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.12) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateY(-5px);
    box-shadow: 
        0 12px 32px rgba(99, 102, 241, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.quick-tool-card:hover::before {
    opacity: 1;
}

.tool-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.quick-tool-card:hover .tool-card-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 6px 20px rgba(99, 102, 241, 0.4),
        0 0 20px rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.tool-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(99, 102, 241, 0.9);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-tool-card:hover .tool-card-icon svg {
    color: white;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.tool-card-content {
    flex: 1;
    min-width: 0;
}

.tool-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.tool-card-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-card-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(148, 163, 184, 0.5);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.tool-card-arrow svg {
    width: 100%;
    height: 100%;
}

.quick-tool-card:hover .tool-card-arrow {
    color: var(--accent-primary);
    transform: translateX(6px);
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4));
}

/* Ultra-Premium Workflow Section */
.workflow-section {
    margin-bottom: 5rem;
    padding: 3.5rem 2.5rem;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.75) 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.workflow-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6), transparent);
    border-radius: 2px;
}

.workflow-section::after {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.workflow-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Ultra-Premium Workflow Steps */
.workflow-step {
    flex: 1;
    max-width: 300px;
    text-align: center;
    padding: 2.25rem 1.75rem;
    position: relative;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.workflow-step:hover {
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateY(-6px);
    box-shadow: 
        0 16px 48px rgba(99, 102, 241, 0.15),
        0 6px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Glowing Step Number Badge */
.step-number {
    position: absolute;
    top: -1.125rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.5),
        0 4px 16px rgba(99, 102, 241, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.step-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 1.125rem auto 1.375rem;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
}

.workflow-step:hover .step-icon {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.22), rgba(139, 92, 246, 0.2));
    transform: scale(1.08);
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.2);
}

.step-icon svg {
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(99, 102, 241, 0.9);
    transition: all 0.3s ease;
}

.workflow-step:hover .step-icon svg {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.4));
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
}

.step-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.workflow-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    margin-top: 5rem;
    color: var(--accent-primary);
    opacity: 0.6;
}

.workflow-connector svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Use Case Section */
.usecase-section {
    margin-bottom: 5rem;
}

.usecase-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Ultra-Premium Suite Cards */
.usecase-card {
    background: linear-gradient(155deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 24px;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.usecase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-accent, rgba(99, 102, 241, 0.7)), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.usecase-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at top left, var(--card-accent, rgba(99, 102, 241, 0.05)) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.usecase-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 60px rgba(99, 102, 241, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.3);
}

.usecase-card:hover::before {
    opacity: 1;
}

.usecase-card:hover::after {
    opacity: 1;
}

.usecase-card:nth-child(1) { --card-accent: #6366f1; }
.usecase-card:nth-child(2) { --card-accent: #8b5cf6; }
.usecase-card:nth-child(3) { --card-accent: #a855f7; }

.usecase-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--card-accent, var(--accent-primary)), var(--accent-secondary));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
    transition: transform var(--transition-premium);
}

.usecase-card:hover .usecase-icon {
    transform: scale(1.05) rotate(-2deg);
}

.usecase-icon svg {
    width: 2rem;
    height: 2rem;
    color: white;
}

.usecase-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.625rem;
}

.usecase-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.usecase-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    flex: 1;
}

/* Premium Tag Chips */
.usecase-link {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(99, 102, 241, 0.9);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.08);
}

.usecase-link:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.14));
    border-color: rgba(99, 102, 241, 0.35);
    transform: translateY(-2px);
    color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* Premium Open Tools CTA */
.usecase-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.6), rgba(30, 41, 59, 0.8));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.usecase-open-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.usecase-open-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.usecase-open-btn span {
    position: relative;
    z-index: 1;
}

.usecase-open-btn:hover {
    border-color: rgba(99, 102, 241, 0.4);
    color: white;
    box-shadow: 
        0 6px 24px rgba(99, 102, 241, 0.35),
        0 0 20px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.usecase-open-btn:hover::before {
    opacity: 1;
}

.usecase-open-btn:hover svg {
    transform: translateX(4px);
}

/* Ultra-Premium Stats Strip */
.stats-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 2.25rem 3rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.8) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    box-shadow: 
        0 8px 40px rgba(99, 102, 241, 0.12),
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.stats-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-align: center;
    padding: 0.5rem;
    transition: all 0.25s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
}

.stat-value {
    font-size: 1.625rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

.stat-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(99, 102, 241, 0.8);
    transition: all 0.25s ease;
}

.stat-item:hover .stat-icon {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.5));
}

.stat-icon svg {
    width: 100%;
    height: 100%;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(148, 163, 184, 0.8);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 2.25rem;
    background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.2), transparent);
}

/* Ultra-Premium Footer */
.home-footer {
    border-top: 1px solid rgba(99, 102, 241, 0.08);
    padding: 2.5rem 0 1.5rem;
    margin-top: 2rem;
    position: relative;
}

.home-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.12), transparent);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.footer-copyright {
    font-size: 0.875rem;
    color: rgba(148, 163, 184, 0.6);
    font-weight: 400;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.footer-link {
    font-size: 0.875rem;
    color: rgba(148, 163, 184, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    position: relative;
}

.footer-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--accent-primary);
    transition: width 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.06);
}

.footer-link:hover::before {
    width: 60%;
}

.footer-dot {
    color: rgba(148, 163, 184, 0.3);
}

/* Ultra-Premium Testimonials Section */
.testimonials-section {
    padding: 4.5rem 0;
    margin-top: 3rem;
    position: relative;
}

.testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
}

.testimonials-header {
    text-align: center;
    margin-bottom: 3.5rem;
    padding: 0 1rem;
}

.testimonials-title {
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.125rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.testimonials-subtitle {
    font-size: 1.0625rem;
    color: rgba(148, 163, 184, 0.85);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.testimonials-carousel {
    overflow: hidden;
    padding: 1rem 0;
}

.testimonials-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 1rem;
}

/* Ultra-Premium Testimonial Cards */
.testimonial-card {
    background: linear-gradient(155deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.85));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 22px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 28px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.testimonial-card::after {
    content: '"';
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    font-size: 4.5rem;
    font-family: Georgia, serif;
    color: rgba(99, 102, 241, 0.08);
    line-height: 1;
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 56px rgba(0, 0, 0, 0.35),
        0 0 56px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

.testimonial-card:hover::before {
    opacity: 1;
}

/* Premium Avatar with Accent Ring */
.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(168, 85, 247, 0.6)) padding-box,
                linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5)) border-box;
    box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.testimonial-card:hover .testimonial-avatar {
    box-shadow: 
        0 0 28px rgba(99, 102, 241, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.25);
    transform: scale(1.05);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.testimonial-stars {
    color: #fbbf24;
    font-size: 1rem;
    letter-spacing: 2px;
}

.testimonial-review {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.9375rem * 1.65 * 3);
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.testimonial-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.testimonial-role {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
    .testimonials-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Mobile: horizontal scroll carousel */
@media (max-width: 768px) {
    .testimonials-section {
        padding: 3rem 0;
        margin-top: 2rem;
    }
    
    .testimonials-title {
        font-size: 1.625rem;
    }
    
    .testimonials-subtitle {
        font-size: 0.9375rem;
        padding: 0 0.5rem;
    }
    
    .testimonials-carousel {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .testimonials-carousel::-webkit-scrollbar {
        display: none;
    }
    
    .testimonials-track {
        display: flex;
        gap: 1rem;
        padding: 0.5rem 1rem;
        width: max-content;
    }
    
    .testimonial-card {
        flex: 0 0 calc(100vw - 3rem);
        max-width: 340px;
        scroll-snap-align: center;
        padding: 1.5rem;
    }
    
    .testimonial-avatar {
        width: 48px;
        height: 48px;
    }
    
    .testimonial-review {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: 2.5rem 0;
    }
    
    .testimonials-title {
        font-size: 1.375rem;
    }
    
    .testimonial-card {
        flex: 0 0 calc(100vw - 2.5rem);
        max-width: 300px;
        padding: 1.25rem;
    }
}

/* Responsive Styles for New Home Page */
@media (max-width: 1200px) {
    .quick-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }
    
    .hero-left {
        max-width: 100%;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .usecase-cards {
        grid-template-columns: 1fr;
    }
    
    .workflow-connector {
        display: none;
    }
    
    .workflow-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .workflow-step {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .home-new-container {
        padding: 0 1rem;
    }
    
    .hero-section {
        padding: 2rem 0 3rem;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    .hero-main-title {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.0625rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .hero-btn {
        width: 100%;
        justify-content: center;
    }
    
    .audio-preview-card {
        max-width: 340px;
    }
    
    .quick-tools-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-tool-card {
        padding: 1rem 1.25rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .workflow-section {
        padding: 2rem 1.5rem;
    }
    
    .stats-strip {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.5rem;
    }
    
    .stat-divider {
        display: none;
    }
    
    .stat-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-main-title {
        font-size: 1.875rem;
    }
    
    .preview-waveform {
        height: 80px;
    }
    
    .waveform-bar {
        width: 4px;
        gap: 2px;
    }
    
    .audio-preview-card {
        padding: 1.5rem;
    }
    
    .usecase-card {
        padding: 1.5rem;
        border-radius: 18px;
    }
    
    .step-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .step-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* Premium Mobile Polish */
    .workflow-section {
        border-radius: 20px;
        padding: 1.75rem 1.25rem;
    }
    
    .stats-strip {
        border-radius: 18px;
    }
    
    .quick-tool-card {
        border-radius: 14px;
        min-height: 76px;
    }
    
    .tool-card-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 12px;
    }
    
    .tool-card-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ============================================================================
   COVER ART IMPROVER ULTRA X - PREMIUM STYLES
   ============================================================================ */

.caux-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: calc(100vh - 80px);
}

.caux-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.caux-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.caux-logo {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.caux-logo svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: white;
}

.caux-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.caux-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.caux-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-muted);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-full);
}

.caux-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.caux-mode-toggle {
    display: flex;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    border: 1px solid var(--border-light);
}

.caux-mode-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.caux-mode-btn.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.caux-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caux-action-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.caux-action-btn:hover:not(:disabled) {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-muted);
}

.caux-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.caux-action-btn svg {
    width: 1rem;
    height: 1rem;
}

.caux-export-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.caux-export-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.caux-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.caux-export-btn svg {
    width: 1rem;
    height: 1rem;
}

.caux-main-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    flex: 1;
}

.caux-left-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.caux-panel-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    padding-right: 0.5rem;
}

.caux-panel-scroll::-webkit-scrollbar {
    width: 4px;
}

.caux-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.caux-panel-scroll::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.caux-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.caux-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.caux-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.caux-card-title svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.caux-upload-zone {
    display: block;
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-subtle);
}

.caux-upload-zone:hover,
.caux-upload-zone.dragover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.caux-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.caux-upload-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary-muted);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.caux-upload-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
}

.caux-upload-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.caux-upload-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.caux-file-info {
    margin-top: 0.75rem;
}

.caux-file-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.caux-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caux-file-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.caux-file-remove:hover {
    background: var(--danger);
}

.caux-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.caux-file-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caux-file-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caux-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.caux-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    background: var(--bg-subtle);
    padding: 0.5rem;
    border-radius: var(--radius-md);
}

.caux-meta-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.caux-meta-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.caux-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
}

.caux-warning svg {
    width: 1rem;
    height: 1rem;
    color: var(--warning);
    flex-shrink: 0;
}

.caux-warning span {
    font-size: 0.75rem;
    color: var(--warning);
}

.caux-resize-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.caux-resize-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.caux-resize-option:hover {
    border-color: var(--primary);
    background: var(--primary-muted);
}

.caux-resize-option.active,
.caux-resize-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-muted);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.caux-resize-option input {
    display: none;
}

.caux-resize-icon {
    font-size: 1.25rem;
}

.caux-resize-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.caux-resize-badge {
    font-size: 0.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
    padding: 0.15rem 0.35rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.caux-resize-manual.active,
.caux-resize-manual:has(input:checked) {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.caux-manual-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-md);
    color: #22c55e;
}

.caux-manual-info svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.caux-manual-info span {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
}

.caux-bg-options {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.caux-bg-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.caux-bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.caux-bg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.caux-bg-btn:hover,
.caux-bg-btn.active {
    border-color: var(--primary);
    color: var(--primary);
}

.caux-bg-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium);
}

.caux-bg-swatch.dominant { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.caux-bg-swatch.gradient { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.caux-bg-swatch.custom { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
.caux-bg-swatch.cinematic { background: linear-gradient(135deg, #0c1445 0%, #1a0a2e 100%); }
.caux-bg-swatch.glass { background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%); border: 1px solid rgba(255,255,255,0.3); }
.caux-bg-swatch.studio { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); }

.caux-color-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.caux-color-picker input[type="color"] {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.caux-color-picker span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: monospace;
}

.caux-presets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.caux-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.caux-preset-btn:hover,
.caux-preset-btn.active {
    border-color: var(--primary);
    background: var(--primary-muted);
}

.caux-preset-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background-size: cover;
    background-position: center;
}

.caux-preset-thumb.natural { background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); }
.caux-preset-thumb.hdr { background: linear-gradient(135deg, #f5af19 0%, #f12711 100%); }
.caux-preset-thumb.matte { background: linear-gradient(135deg, #d4d4d4 0%, #a8a8a8 100%); }
.caux-preset-thumb.vibrant { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.caux-preset-thumb.bollywood { background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); }
.caux-preset-thumb.kpop { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); }
.caux-preset-thumb.moody { background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); }
.caux-preset-thumb.urban { background: linear-gradient(135deg, #232526 0%, #414345 100%); }
.caux-preset-thumb.spotify { background: linear-gradient(135deg, #1DB954 0%, #191414 100%); }
.caux-preset-thumb.vintage { background: linear-gradient(135deg, #d4a574 0%, #8b7355 100%); }
.caux-preset-thumb.teal { background: linear-gradient(135deg, #11998e 0%, #f2994a 100%); }
.caux-preset-thumb.lofi { background: linear-gradient(135deg, #6a82fb 0%, #fc5c7d 100%); }

.caux-preset-btn span {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

.caux-expand-btn {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.caux-expand-btn:hover {
    background: var(--bg-subtle);
    color: var(--primary);
}

.caux-expand-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s;
}

.caux-expand-btn.expanded svg {
    transform: rotate(180deg);
}

.caux-adj-section {
    margin-bottom: 0.75rem;
}

.caux-adj-section:last-child {
    margin-bottom: 0;
}

.caux-adj-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-light);
}

.caux-slider-row {
    display: grid;
    grid-template-columns: 80px 1fr 35px;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.caux-slider-row:last-child {
    margin-bottom: 0;
}

.caux-slider-row label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.caux-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-medium);
    border-radius: 2px;
    outline: none;
}

.caux-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

.caux-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.caux-slider.temp {
    background: linear-gradient(90deg, #3b82f6, #f59e0b);
}

.caux-slider.tint {
    background: linear-gradient(90deg, #22c55e, #ec4899);
}

.caux-slider.hue {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}

.caux-slider-val {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    font-family: 'SF Mono', monospace;
}

.caux-pro-section {
    transition: all 0.3s ease;
}

.caux-hsl-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.caux-hsl-tab {
    flex: 1;
    padding: 0.4rem 0;
    font-size: 0.65rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.caux-hsl-tab:hover {
    background: var(--bg-card);
}

.caux-hsl-tab.active {
    background: var(--primary);
    color: white;
}

.caux-hsl-tab[data-channel="red"] { color: #ef4444; }
.caux-hsl-tab[data-channel="orange"] { color: #f97316; }
.caux-hsl-tab[data-channel="yellow"] { color: #eab308; }
.caux-hsl-tab[data-channel="green"] { color: #22c55e; }
.caux-hsl-tab[data-channel="cyan"] { color: #06b6d4; }
.caux-hsl-tab[data-channel="blue"] { color: #3b82f6; }
.caux-hsl-tab[data-channel="purple"] { color: #8b5cf6; }
.caux-hsl-tab[data-channel="magenta"] { color: #ec4899; }
.caux-hsl-tab.active { color: white !important; }

.caux-process-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.75rem;
}

.caux-process-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.caux-process-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.caux-process-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.caux-center-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.caux-canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.caux-canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-subtle);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.caux-zoom-controls,
.caux-view-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.caux-zoom-btn,
.caux-view-btn {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.caux-zoom-btn:hover,
.caux-view-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.caux-view-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.caux-zoom-btn svg,
.caux-view-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.caux-zoom-level {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 2.5rem;
    text-align: center;
}

.caux-safe-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.caux-toggle-switch {
    position: relative;
    width: 2rem;
    height: 1rem;
    cursor: pointer;
}

.caux-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.caux-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border-medium);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.caux-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 0.75rem;
    height: 0.75rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.caux-toggle-switch input:checked + .caux-toggle-track {
    background: var(--primary);
}

.caux-toggle-switch input:checked + .caux-toggle-track::after {
    transform: translateX(1rem);
}

.caux-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark, #0a0a0f);
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.caux-canvas-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.caux-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.caux-placeholder-content svg {
    width: 4rem;
    height: 4rem;
    opacity: 0.3;
}

.caux-placeholder-content p {
    font-size: 0.9rem;
    font-weight: 500;
}

.caux-placeholder-content span {
    font-size: 0.75rem;
    opacity: 0.6;
}

.caux-canvas-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caux-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.caux-canvas-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.9);
    gap: 1rem;
}

.caux-loader {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cauxSpin 0.8s linear infinite;
}

.caux-manual-crop-workspace {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark, #0a0a0f);
    overflow: hidden;
}

.caux-crop-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
}

.caux-crop-container:active {
    cursor: grabbing;
}

.caux-crop-image {
    position: absolute;
    user-select: none;
    pointer-events: none;
    transition: none;
    z-index: 1;
}

.caux-crop-frame {
    position: absolute;
    width: 320px;
    height: 320px;
    border: 2px solid #22c55e;
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caux-crop-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.caux-grid-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
}

.caux-grid-line.horizontal {
    left: 0;
    right: 0;
    height: 1px;
}

.caux-grid-line.vertical {
    top: 0;
    bottom: 0;
    width: 1px;
}

.caux-crop-corners {
    position: absolute;
    inset: -2px;
}

.caux-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #22c55e;
}

.caux-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.caux-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.caux-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.caux-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

.caux-crop-size-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.caux-crop-overlay-mask {
    display: none;
}

.caux-crop-warning {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    z-index: 20;
    max-width: 90%;
}

.caux-crop-warning svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.caux-crop-warning span {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
}

.caux-crop-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--glass-bg);
    border-top: 1px solid var(--border-light);
}

.caux-crop-zoom-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.caux-crop-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.caux-crop-label svg {
    width: 1rem;
    height: 1rem;
}

.caux-crop-zoom-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caux-crop-zoom-slider input[type="range"] {
    width: 120px;
    height: 4px;
    background: var(--border-medium);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.caux-crop-zoom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
}

.caux-crop-zoom-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.caux-crop-zoom-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
    min-width: 36px;
    text-align: right;
}

.caux-crop-buttons {
    display: flex;
    gap: 0.5rem;
}

.caux-crop-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.caux-crop-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-muted);
}

.caux-crop-btn svg {
    width: 0.9rem;
    height: 0.9rem;
}

.caux-crop-hint {
    width: 100%;
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

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

.caux-canvas-loading span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.caux-canvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-subtle);
}

.caux-output-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
}

.caux-output-label {
    color: var(--text-muted);
}

.caux-output-value {
    font-weight: 600;
    color: var(--text-primary);
}

.caux-dsp-badges {
    display: flex;
    gap: 0.35rem;
}

.caux-dsp-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.caux-dsp-badge.spotify { background: #1DB954; color: white; }
.caux-dsp-badge.apple { background: #fc3c44; color: white; }
.caux-dsp-badge.youtube { background: #ff0000; color: white; }

.caux-right-panel {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.caux-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-muted);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
}

.caux-quality-scores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.caux-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.caux-score-ring {
    position: relative;
    width: 3rem;
    height: 3rem;
}

.caux-score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.caux-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

.caux-score-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
}

.caux-histogram-tabs {
    display: flex;
    gap: 0.25rem;
}

.caux-hist-tab {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.caux-hist-tab:hover,
.caux-hist-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.caux-histogram-display {
    background: var(--bg-dark, #0a0a0f);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.caux-histogram-display canvas {
    width: 100%;
    height: 80px;
    display: block;
}

.caux-success-msg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.caux-success-msg svg {
    width: 1rem;
    height: 1rem;
    color: #22c55e;
    flex-shrink: 0;
}

.caux-success-msg span {
    font-size: 0.75rem;
    font-weight: 500;
    color: #22c55e;
}

.caux-filename-group {
    margin-bottom: 0.75rem;
}

.caux-filename-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.caux-filename-label svg {
    color: var(--text-muted);
}

.caux-filename-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.15s;
}

.caux-filename-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.caux-filename-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
}

.caux-filename-input::placeholder {
    color: var(--text-muted);
}

.caux-filename-ext {
    padding: 0.5rem 0.625rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    white-space: nowrap;
}

.caux-export-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caux-export-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.15s;
}

.caux-export-item:hover {
    border-color: var(--primary);
    background: var(--primary-muted);
}

.caux-export-item.primary {
    background: var(--primary-muted);
    border-color: var(--primary);
}

.caux-export-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}

.caux-export-icon svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.caux-export-info {
    flex: 1;
    min-width: 0;
}

.caux-export-name {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.caux-export-meta {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.caux-export-badge {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
}

.caux-social-export {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.caux-social-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.caux-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.caux-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.25rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.caux-social-btn:hover {
    border-color: var(--primary);
    background: var(--primary-muted);
}

.caux-social-btn span {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
}

.caux-social-btn small {
    font-size: 0.55rem;
    color: var(--text-muted);
}

.caux-dsp-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.caux-dsp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
}

.caux-dsp-item.pass {
    border-left: 3px solid #22c55e;
}

.caux-dsp-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.caux-dsp-status {
    font-size: 0.65rem;
    color: #22c55e;
}

@media (max-width: 1200px) {
    .caux-main-grid {
        grid-template-columns: 280px 1fr;
    }
    
    .caux-right-panel {
        display: none;
    }
}

@media (max-width: 1024px) {
    .caux-main-grid {
        grid-template-columns: 1fr;
    }
    
    .caux-panel-scroll {
        max-height: none;
    }
}

@media (max-width: 768px) {
    .caux-top-bar {
        padding: 0.75rem 1rem;
    }
    
    .caux-title {
        font-size: 1rem;
    }
    
    .caux-mode-toggle {
        order: 3;
        width: 100%;
    }
    
    .caux-mode-btn {
        flex: 1;
    }
    
    .caux-resize-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .caux-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   COVER ART IMPROVER STYLES (Legacy)
   ============================================================================ */

.cover-art-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.cover-art-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.cover-art-hero-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background: var(--accent-gradient);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.cover-art-hero-icon svg {
    width: 2rem;
    height: 2rem;
    stroke: white;
}

.cover-art-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.cover-art-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.cover-art-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cover-art-left-panel,
.cover-art-right-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cover-art-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.cover-art-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.cover-art-card-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
}

.cover-art-upload-zone {
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 2rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-subtle);
}

.cover-art-upload-zone:hover,
.cover-art-upload-zone.dragover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

.cover-art-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cover-art-upload-icon {
    width: 3rem;
    height: 3rem;
    background: var(--primary-muted);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-art-upload-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.cover-art-upload-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cover-art-upload-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cover-art-file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

.cover-art-file-preview {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.cover-art-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-art-file-details {
    flex: 1;
    min-width: 0;
}

.cover-art-file-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.cover-art-file-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cover-art-file-meta span {
    display: inline-flex;
    align-items: center;
}

.cover-art-file-meta span:not(:last-child)::after {
    content: '•';
    margin-left: 0.75rem;
    color: var(--border-medium);
}

.cover-art-file-remove {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cover-art-file-remove:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.cover-art-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.cover-art-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius-lg);
    margin-top: 1rem;
}

.cover-art-warning svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--warning);
    flex-shrink: 0;
}

.cover-art-warning span {
    font-size: 0.875rem;
    color: var(--warning);
    line-height: 1.5;
}

.cover-art-resize-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cover-art-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-art-radio-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.cover-art-radio-option.active,
.cover-art-radio-option:has(input:checked) {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
}

.cover-art-radio-option input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    accent-color: var(--primary);
}

.cover-art-radio-content {
    flex: 1;
}

.cover-art-radio-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.cover-art-radio-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.cover-art-sliders {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cover-art-slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cover-art-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cover-art-slider-header label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cover-art-slider-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    min-width: 2.5rem;
    text-align: right;
}

.cover-art-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-subtle);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.cover-art-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    transition: transform 0.15s ease;
}

.cover-art-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.cover-art-slider::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.cover-art-process-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cover-art-process-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.cover-art-process-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cover-art-process-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.cover-art-preview-card {
    flex: 1;
}

.cover-art-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.cover-art-preview-empty {
    text-align: center;
    color: var(--text-muted);
}

.cover-art-preview-empty svg {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.cover-art-preview-empty p {
    font-size: 0.9375rem;
}

.cover-art-preview-compare {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cover-art-compare-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-subtle);
}

.cover-art-compare-before,
.cover-art-compare-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cover-art-compare-before img,
.cover-art-compare-after img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cover-art-compare-before {
    clip-path: inset(0 50% 0 0);
}

.cover-art-compare-label {
    position: absolute;
    bottom: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cover-art-compare-before .cover-art-compare-label {
    left: 0.75rem;
}

.cover-art-compare-after .cover-art-compare-label {
    right: 0.75rem;
}

.cover-art-compare-slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: white;
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 10;
}

.cover-art-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.cover-art-compare-handle::before,
.cover-art-compare-handle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.cover-art-compare-handle::before {
    left: 6px;
    border-width: 5px 6px 5px 0;
    border-color: transparent #333 transparent transparent;
}

.cover-art-compare-handle::after {
    right: 6px;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent #333;
}

.cover-art-compare-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cover-art-info-item {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.cover-art-info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cover-art-info-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.25rem;
}

.cover-art-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
}

.cover-art-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.cover-art-preview-loading span {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.cover-art-download-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: var(--primary);
}

.cover-art-download-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cover-art-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.cover-art-download-btn.primary {
    background: var(--accent-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cover-art-download-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.cover-art-download-btn.secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.cover-art-download-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.cover-art-download-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.cover-art-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-art-reset-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cover-art-reset-btn svg {
    width: 1rem;
    height: 1rem;
}

.cover-art-info-section {
    margin-top: 3rem;
    text-align: center;
}

.cover-art-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.cover-art-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cover-art-info-card {
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    text-align: center;
}

.cover-art-info-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    background: var(--primary-muted);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-art-info-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.cover-art-info-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.cover-art-info-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cover-art-file-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.cover-art-meta-item {
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.cover-art-meta-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.cover-art-meta-value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cover-art-issues-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-lg);
}

.cover-art-issues-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #ef4444;
    margin-bottom: 0.75rem;
}

.cover-art-issues-title svg {
    width: 1rem;
    height: 1rem;
}

.cover-art-issues-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cover-art-issue-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.cover-art-issue-item.critical {
    border-left: 3px solid #ef4444;
}

.cover-art-issue-item.warning {
    border-left: 3px solid #f59e0b;
}

.cover-art-issue-item.good {
    border-left: 3px solid #10b981;
}

.cover-art-issue-badge {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cover-art-issue-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.cover-art-issue-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.cover-art-issue-badge.good {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.cover-art-issue-text {
    flex: 1;
    color: var(--text-secondary);
}

.cover-art-bg-options {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.cover-art-bg-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.cover-art-bg-buttons {
    display: flex;
    gap: 0.5rem;
}

.cover-art-bg-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-art-bg-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.cover-art-bg-btn.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
    color: var(--text-primary);
}

.cover-art-bg-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
}

.cover-art-bg-icon.dominant-icon {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.cover-art-bg-icon.gradient-icon {
    background: linear-gradient(135deg, #f43f5e 0%, #6366f1 50%, #06b6d4 100%);
}

.cover-art-bg-icon.custom-icon {
    background: conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #06b6d4, #6366f1, #ec4899, #ef4444);
}

.cover-art-color-picker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.625rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.cover-art-color-picker input[type="color"] {
    width: 2.5rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
}

.cover-art-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.cover-art-color-picker input[type="color"]::-webkit-color-swatch {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium);
}

.cover-art-color-picker span {
    font-size: 0.8125rem;
    font-family: monospace;
    color: var(--text-secondary);
}

.cover-art-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.cover-art-preset-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-art-preset-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
    transform: translateY(-1px);
}

.cover-art-preset-btn.active {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

.preset-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.preset-icon.natural {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.preset-icon.hdr {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
}

.preset-icon.matte {
    background: linear-gradient(135deg, #f5f5f4 0%, #d6d3d1 100%);
}

.preset-icon.vibrant {
    background: linear-gradient(135deg, #fce7f3 0%, #f472b6 100%);
}

.preset-icon.bollywood {
    background: linear-gradient(135deg, #fef3c7 0%, #f97316 100%);
}

.preset-icon.moody {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.preset-icon.urban {
    background: linear-gradient(135deg, #18181b 0%, #52525b 100%);
}

.preset-icon.spotify {
    background: linear-gradient(135deg, #1db954 0%, #191414 100%);
}

.cover-art-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.cover-art-card-header .cover-art-card-title {
    margin-bottom: 0;
}

.cover-art-pro-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-art-pro-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cover-art-pro-toggle.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.cover-art-pro-toggle svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
}

.cover-art-pro-toggle.active svg {
    transform: rotate(180deg);
}

.cover-art-slider-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cover-art-slider-group.full-width {
    grid-column: span 2;
}

.cover-art-slider.temperature::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #3b82f6 0%, #f59e0b 100%);
}

.cover-art-slider.tint::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #22c55e 0%, #ec4899 100%);
}

.cover-art-safe-zone-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cover-art-toggle {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.375rem;
}

.cover-art-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cover-art-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-light);
    transition: 0.3s;
    border-radius: 1rem;
}

.cover-art-toggle-slider::before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0.125rem;
    bottom: 0.125rem;
    background-color: var(--text-muted);
    transition: 0.3s;
    border-radius: 50%;
}

.cover-art-toggle input:checked + .cover-art-toggle-slider {
    background-color: var(--primary);
    border-color: var(--primary);
}

.cover-art-toggle input:checked + .cover-art-toggle-slider::before {
    transform: translateX(1.125rem);
    background-color: white;
}

.cover-art-toggle-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cover-art-compare-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cover-art-safe-zones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.safe-zone {
    position: absolute;
    border: 2px dashed;
    border-radius: 0.25rem;
}

.safe-zone.outer-crop {
    top: 2%;
    left: 2%;
    right: 2%;
    bottom: 2%;
    border-color: rgba(239, 68, 68, 0.7);
}

.safe-zone.text-safe {
    top: 8%;
    left: 8%;
    right: 8%;
    bottom: 8%;
    border-color: rgba(245, 158, 11, 0.7);
}

.safe-zone.icon-safe {
    top: 15%;
    left: 15%;
    right: 15%;
    bottom: 15%;
    border-color: rgba(16, 185, 129, 0.7);
}

.cover-art-safe-zone-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 1rem;
    height: 0.25rem;
    border-radius: 2px;
}

.legend-color.outer {
    background: rgba(239, 68, 68, 0.7);
}

.legend-color.text {
    background: rgba(245, 158, 11, 0.7);
}

.legend-color.icon {
    background: rgba(16, 185, 129, 0.7);
}

.cover-art-info-group {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

.cover-art-info-heading {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.cover-art-info-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cover-art-info-size {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cover-art-info-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.cover-art-info-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
}

.cover-art-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.loading-step {
    font-size: 0.8125rem;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.loading-step.active {
    color: var(--primary);
    opacity: 1;
}

.loading-step.complete {
    color: var(--success);
    opacity: 0.7;
}

.cover-art-success-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.cover-art-success-message svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #10b981;
    flex-shrink: 0;
}

.cover-art-success-message span {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #10b981;
}

.cover-art-download-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cover-art-download-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.download-btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
}

.download-btn-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.download-btn-info {
    flex: 1;
    text-align: left;
}

.download-btn-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
}

.download-btn-desc {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.125rem;
}

.download-btn-badge {
    position: absolute;
    top: -0.5rem;
    right: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.download-btn-badge.recommended {
    background: #10b981;
    color: white;
}

.cover-art-download-btn.tertiary {
    background: var(--bg-subtle);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.cover-art-download-btn.tertiary:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.cover-art-download-btn.tertiary .download-btn-icon {
    background: var(--bg-card);
}

.cover-art-filename-input {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.cover-art-filename-input label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cover-art-filename-input input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.cover-art-filename-input input:focus {
    outline: none;
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .cover-art-container {
        padding: 0.5rem 1rem 2rem;
    }
    
    .cover-art-title {
        font-size: 1.75rem;
    }
    
    .cover-art-main-grid {
        grid-template-columns: 1fr;
    }
    
    .cover-art-info-grid {
        grid-template-columns: 1fr;
    }
    
    .cover-art-compare-info {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .cover-art-card {
        padding: 1.25rem;
    }
    
    .cover-art-upload-zone {
        padding: 1.5rem 1rem;
    }
    
    .cover-art-file-info {
        flex-direction: column;
        text-align: center;
    }
    
    .cover-art-file-meta {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.music-gen-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.music-gen-card {
    background: linear-gradient(145deg, rgba(30, 32, 48, 0.95) 0%, rgba(22, 24, 38, 0.98) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 80px rgba(99, 102, 241, 0.08);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.music-gen-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
}

.music-gen-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.music-gen-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(139, 92, 246, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.625rem;
}

.music-gen-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.625rem;
    line-height: 1.25;
    max-width: 100%;
}

.music-gen-title .title-text {
    display: inline-block;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.music-gen-title .title-text.switching {
    opacity: 0;
    transform: translateY(-8px);
}

.gradient-text-glow {
    background: linear-gradient(135deg, #818cf8 0%, #a855f7 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(139, 92, 246, 0.35);
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.25));
}

.music-gen-subtitle {
    font-size: 0.9375rem;
    font-weight: 450;
    color: rgba(156, 163, 175, 0.9);
    margin: 0 auto;
    max-width: 650px;
    line-height: 1.5;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.music-gen-subtitle.switching {
    opacity: 0;
    transform: translateY(8px);
}

.music-gen-mode-toggle {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.music-gen-mode-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-subtle);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.music-gen-mode-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.music-gen-mode-btn .mode-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.music-gen-mode-btn:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.music-gen-mode-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.music-gen-mode-btn.active .mode-glow {
    opacity: 1;
}

.music-gen-prompt-box {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.prompt-box-glow {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
    border-radius: var(--radius-2xl);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.music-gen-prompt-box:focus-within .prompt-box-glow {
    opacity: 1;
}

.prompt-box-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.prompt-attachment-area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.prompt-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-attach-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.prompt-attach-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.attached-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
}

.attached-file-name {
    font-size: 0.8125rem;
    color: var(--primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attached-file-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}

.attached-file-remove:hover {
    color: #ef4444;
}

.attached-file-remove svg {
    width: 0.875rem;
    height: 0.875rem;
}

.music-gen-prompt-input {
    flex: 1;
    min-height: 80px;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
}

.music-gen-prompt-input::placeholder {
    color: var(--text-muted);
}

.music-gen-prompt-input:focus {
    outline: none;
}

.lyrics-input-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.lyrics-input-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.lyrics-input-header svg {
    width: 1rem;
    height: 1rem;
}

.generate-lyrics-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-full);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.generate-lyrics-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.generate-lyrics-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.25));
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

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

.generate-lyrics-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.generate-lyrics-btn .btn-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
}

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

.music-gen-lyrics-input {
    width: 100%;
    min-height: 120px;
    padding: 0.875rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.music-gen-lyrics-input::placeholder {
    color: var(--text-muted);
}

.music-gen-lyrics-input:focus {
    outline: none;
    border-color: var(--primary);
}

.style-mode-container {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
}

.style-mode-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.style-mode-header svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--primary);
}

.style-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 28px;
}

.style-tags-container:empty {
    margin-bottom: 0;
    min-height: 0;
}

.style-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    animation: tagAppear 0.2s ease;
}

@keyframes tagAppear {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.style-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(99, 102, 241, 0.2);
    border: none;
    border-radius: 50%;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.style-tag-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.style-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .style-mode-grid {
        grid-template-columns: 1fr;
    }
}

.style-dropdown-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.style-dropdown-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.style-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 52px;
    padding: 0.875rem 3rem 0.875rem 1.25rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 9999px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.125rem;
}

.style-dropdown:hover {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(145deg, rgba(35, 48, 70, 0.98) 0%, rgba(20, 30, 52, 0.99) 100%);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.style-dropdown:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 
        0 0 0 4px rgba(99, 102, 241, 0.15),
        0 0 20px rgba(99, 102, 241, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(40, 55, 80, 0.98) 0%, rgba(25, 35, 60, 0.99) 100%);
}

.style-dropdown option {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    font-weight: 400;
}

.style-dropdown option:hover,
.style-dropdown option:focus {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(168, 85, 247, 0.2));
}

.style-dropdown optgroup {
    font-weight: 700;
    color: var(--text-muted);
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: 0.5rem 0;
}

.vocal-gender-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.vocal-sublabel {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

.vocal-gender-pills {
    display: flex;
    gap: 0.75rem;
}

.vocal-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: var(--bg-base);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vocal-pill svg {
    width: 1.25rem;
    height: 1.25rem;
}

.vocal-pill:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.vocal-pill.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border-color: var(--primary);
    color: var(--primary);
}

.vocal-pill.active svg {
    color: var(--primary);
}

.language-dropdown-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.language-select {
    width: 100%;
    max-width: 300px;
}

.duration-note {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.result-download-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
}

.download-section-title {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.result-download-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.download-option-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.download-option-btn:hover {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    transform: translateX(4px);
}

.download-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.download-option-btn .download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    border-radius: var(--radius-md);
}

.download-option-btn .download-icon svg {
    width: 22px;
    height: 22px;
    color: var(--primary);
}

.download-option-btn .download-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.download-option-btn .download-type {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.download-option-btn .download-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.download-option-btn .download-arrow {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.download-option-btn:hover .download-arrow {
    color: var(--primary);
    transform: translateY(2px);
}

.download-option-btn.full-song-btn .download-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}

.download-option-btn.vocals-btn .download-icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.2));
}

.download-option-btn.vocals-btn .download-icon svg {
    color: #ec4899;
}

.download-option-btn.instrumental-btn .download-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2));
}

.download-option-btn.instrumental-btn .download-icon svg {
    color: #10b981;
}

.stem-processing-note {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.stem-processing-note svg {
    width: 16px;
    height: 16px;
    color: #f59e0b;
    flex-shrink: 0;
}

.stem-processing-note.hidden {
    display: none;
}

.music-gen-options {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.music-gen-option-group {
    flex: 1;
}

.option-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.music-gen-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 1.25rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 9999px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(99, 102, 241, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.125rem;
}

.music-gen-select:hover {
    border-color: rgba(99, 102, 241, 0.45);
    background-color: linear-gradient(145deg, rgba(35, 48, 70, 0.98) 0%, rgba(20, 30, 52, 0.99) 100%);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.music-gen-select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 
        0 0 0 4px rgba(99, 102, 241, 0.15),
        0 0 20px rgba(99, 102, 241, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(40, 55, 80, 0.98) 0%, rgba(25, 35, 60, 0.99) 100%);
}

.music-gen-select option {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
}

.music-gen-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.music-gen-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.music-gen-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(99, 102, 241, 0.5);
}

.music-gen-create-btn:active {
    transform: translateY(0);
}

.music-gen-create-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.music-gen-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.music-gen-loading {
    margin-top: 2rem;
}

.music-gen-loading .loading-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 3rem 2rem;
    text-align: center;
}

.loading-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: #6366f1;
    animation-delay: 0s;
}

.spinner-ring:nth-child(2) {
    width: 65%;
    height: 65%;
    top: 17.5%;
    left: 17.5%;
    border-right-color: #8b5cf6;
    animation-delay: 0.15s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3) {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-bottom-color: #a855f7;
    animation-delay: 0.3s;
}

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

.loading-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.loading-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

.loading-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 300px;
    margin: 0 auto;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    min-width: 40px;
}

.music-gen-result {
    margin-top: 2rem;
}

.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: 2rem;
}

.result-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.result-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.result-meta {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.meta-tag {
    padding: 0.375rem 0.875rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.result-waveform {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
    border-radius: var(--radius-xl);
}

.waveform-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 80px;
}

.waveform-bar {
    width: 8px;
    background: linear-gradient(to top, #6366f1, #a855f7);
    border-radius: 4px;
    animation: waveform-pulse 1.5s ease-in-out infinite;
}

.waveform-bar:nth-child(odd) {
    animation-delay: 0.1s;
}

.waveform-bar:nth-child(3n) {
    animation-delay: 0.2s;
}

.waveform-bar:nth-child(4n) {
    animation-delay: 0.3s;
}

@keyframes waveform-pulse {
    0%, 100% { opacity: 0.5; transform: scaleY(0.8); }
    50% { opacity: 1; transform: scaleY(1); }
}

.result-player {
    margin-bottom: 1.5rem;
}

.result-player .audio-player {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-lg);
}

.result-prompt {
    padding: 1rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.prompt-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
}

.prompt-text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.result-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.result-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-action-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.result-action-btn.download-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    color: white;
}

.result-action-btn.download-btn:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.result-action-btn.secondary-btn {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.result-action-btn.secondary-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.music-gen-history {
    margin-top: 3rem;
}

.history-header {
    margin-bottom: 1.5rem;
}

.history-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
}

.history-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.history-item-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-prompt {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.history-item-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.history-item-play:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.history-item-play svg {
    width: 1rem;
    height: 1rem;
    margin-left: 2px;
}

.history-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.history-empty svg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.history-empty p {
    margin: 0;
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .music-gen-container {
        padding: 1rem 1rem 3rem;
    }
    
    .music-gen-title {
        font-size: 1.75rem;
    }
    
    .music-gen-mode-toggle {
        flex-direction: column;
    }
    
    .music-gen-mode-btn {
        width: 100%;
        justify-content: center;
    }
    
    .prompt-box-inner {
        flex-direction: column;
    }
    
    .prompt-attachment-area {
        width: 100%;
        justify-content: flex-start;
    }
    
    .result-actions {
        flex-direction: column;
    }
    
    .result-action-btn {
        width: 100%;
    }
    
    .history-item {
        flex-wrap: wrap;
    }
    
    .history-item-info {
        flex: 1 1 calc(100% - 60px);
    }
    
    .history-item-play {
        margin-left: auto;
    }
}

@media (max-width: 480px) {
    .music-gen-prompt-box {
        padding: 1rem;
    }
    
    .music-gen-create-btn {
        width: 100%;
        padding: 1rem 1.5rem;
    }
    
    .result-card {
        padding: 1.25rem;
    }
    
    .waveform-bar {
        width: 4px;
    }
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification.toast-success {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 100%);
}

.toast-notification.toast-error {
    border-color: var(--error);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--bg-card) 100%);
}

.toast-notification.toast-info {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, var(--bg-card) 100%);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toast-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
}

.toast-success .toast-icon {
    background: var(--success);
    color: white;
}

.toast-error .toast-icon {
    background: var(--error);
    color: white;
}

.toast-info .toast-icon {
    background: var(--accent-primary);
    color: white;
}

.toast-message {
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Result Track Title */
.result-track-title {
    font-size: 1.75rem;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Lyrics Panel Styles */
.result-lyrics-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    margin: 1.5rem 0;
    overflow: hidden;
}

.lyrics-panel-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
}

.lyrics-panel-header svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.lyrics-panel-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 1.25rem;
}

.lyrics-panel-content::-webkit-scrollbar {
    width: 6px;
}

.lyrics-panel-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.lyrics-panel-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.lyrics-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-secondary);
    white-space: pre-wrap;
    margin: 0;
}

/* Style Mode Container hide for instrumental */
.style-mode-container.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .toast-notification {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
    
    .lyrics-panel-content {
        max-height: 200px;
    }
}

/* Premium MusicGPT-style UI Enhancements */

/* Instrumental Mode Subtitle */
.instrumental-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
    color: var(--accent-primary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.instrumental-subtitle svg {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.instrumental-subtitle.hidden {
    display: none;
}

/* Song Title Section */
.song-title-section {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.song-title-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.song-title-header svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-primary);
}

.song-title-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.song-title-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.song-title-input::placeholder {
    color: var(--text-muted);
}

/* Reference Section Premium Styling */
.reference-section {
    margin: 1.25rem 0;
    position: relative;
}

.reference-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.25s ease;
    color: var(--text-primary);
    font-weight: 500;
}

.reference-dropdown-trigger:hover {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
}

.reference-dropdown-trigger svg:first-child {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.reference-dropdown-trigger .dropdown-arrow {
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

.reference-dropdown-trigger.open .dropdown-arrow {
    transform: rotate(180deg);
}

.reference-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 0.5rem;
    z-index: 100;
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    pointer-events: none;
}

.reference-dropdown-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.reference-dropdown-panel.hidden {
    display: none;
}

.reference-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.reference-option:hover {
    background: var(--bg-tertiary);
}

.reference-option.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: var(--accent-primary);
}

.reference-option svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.reference-option .ref-option-check {
    margin-left: auto;
    color: var(--accent-primary);
    font-weight: 600;
}

.reference-option .ref-option-check.hidden {
    display: none;
}

/* Reference Input Areas */
.reference-inputs {
    margin-top: 1rem;
}

.reference-upload-area,
.reference-youtube-area,
.reference-record-area {
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    animation: slideIn 0.25s ease;
}

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

.reference-upload-area .attached-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.reference-upload-area .attached-file svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
}

.reference-upload-area .attached-file-name {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-upload-area .attached-file-name.has-file {
    color: var(--text-primary);
    font-weight: 500;
}

.upload-browse-btn {
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-browse-btn:hover {
    background: var(--accent-secondary);
    transform: translateY(-1px);
}

.attached-file-remove {
    padding: 0.375rem;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--error);
    cursor: pointer;
    transition: all 0.2s ease;
}

.attached-file-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}

.attached-file-remove svg {
    width: 1rem;
    height: 1rem;
}

.attached-file-remove.hidden {
    display: none;
}

.youtube-link-input {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 3rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.youtube-link-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.reference-youtube-area {
    position: relative;
}

.youtube-clear-btn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--error);
    cursor: pointer;
    transition: all 0.2s ease;
}

.youtube-clear-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.youtube-clear-btn svg {
    width: 1rem;
    height: 1rem;
}

.youtube-clear-btn.hidden {
    display: none;
}

.record-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.record-status svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-muted);
}

/* Enhanced Mode Toggle */
.music-gen-mode-toggle {
    display: flex;
    gap: 0.5rem;
    padding: 0.375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    margin-bottom: 1.5rem;
}

.music-gen-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-xl);
    color: var(--text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.music-gen-mode-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.music-gen-mode-btn .mode-glow {
    position: absolute;
    inset: 0;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: -1;
}

.music-gen-mode-btn:hover {
    color: var(--text-primary);
}

.music-gen-mode-btn:hover .mode-glow {
    opacity: 0.1;
}

.music-gen-mode-btn.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.music-gen-mode-btn.active .mode-glow {
    opacity: 0;
}

/* Vocal Gender Pills */
.vocal-gender-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.vocal-sublabel {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.vocal-gender-pills {
    display: flex;
    gap: 0.75rem;
}

.vocal-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.vocal-pill svg {
    width: 1.125rem;
    height: 1.125rem;
}

.vocal-pill:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.vocal-pill.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

/* Premium Dropdown Styling - Matches AI Audio QC style */
/* Note: Main .style-dropdown styles are defined earlier - this section removed to avoid duplicates */

/* Style Tags Container */
.style-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    min-height: 0;
}

.style-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-full);
    color: var(--accent-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    animation: tagPop 0.2s ease;
}

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

.style-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    background: rgba(99, 102, 241, 0.2);
    border: none;
    border-radius: 50%;
    color: var(--accent-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    line-height: 1;
}

.style-tag-remove:hover {
    background: var(--accent-primary);
    color: white;
}

/* Responsive Adjustments - Music Generator */
@media (max-width: 768px) {
    .music-gen-container {
        padding: 1rem 0.75rem 3rem;
    }
    
    .music-gen-card {
        padding: 1.25rem;
        border-radius: 18px;
    }
    
    .music-gen-header {
        margin-bottom: 1rem;
    }
    
    .music-gen-title {
        font-size: 1.5rem;
    }
    
    .music-gen-subtitle {
        font-size: 0.875rem;
    }
    
    .music-gen-mode-toggle {
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .music-gen-mode-btn {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
        min-height: 48px;
        flex: 1;
        justify-content: center;
    }
    
    .music-gen-mode-btn span {
        display: none;
    }
    
    .music-gen-mode-btn svg {
        width: 1.375rem;
        height: 1.375rem;
    }
    
    .music-gen-prompt-box {
        padding: 1rem;
        margin-bottom: 1.25rem;
    }
    
    .prompt-box-inner {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .prompt-attachment-area {
        width: 100%;
        justify-content: flex-start;
    }
    
    .prompt-attach-btn {
        width: 3rem;
        height: 3rem;
    }
    
    .prompt-input-area {
        width: 100%;
    }
    
    .music-gen-prompt {
        min-height: 80px;
        font-size: 0.9375rem;
    }
    
    .vocal-gender-pills {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .vocal-pill {
        flex: 1;
        min-width: 45%;
        min-height: 48px;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
    
    .music-gen-select,
    .music-gen-duration {
        min-height: 48px;
        font-size: 0.9375rem;
    }
    
    .music-gen-lyrics {
        min-height: 100px;
    }
    
    .music-gen-create-btn {
        min-height: 52px;
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
    
    .reference-dropdown-panel {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        top: auto;
        bottom: 0.75rem;
        border-radius: 20px;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1000;
    }
    
    .ref-option {
        min-height: 52px;
        padding: 0.875rem 1rem;
    }
    
    .style-mode-container {
        margin-top: 1.25rem;
        padding: 1rem;
        position: relative;
        z-index: 1;
    }
    
    .reference-section {
        position: relative;
        z-index: 10;
        margin-bottom: 1rem;
    }
    
    .lyrics-input-section {
        position: relative;
        z-index: 1;
    }
    
    .style-dropdown {
        height: 48px;
        padding: 0.75rem 2.5rem 0.75rem 1rem;
        border-radius: 9999px;
    }
    
    .generate-lyrics-btn {
        padding: 0.375rem 0.625rem;
        font-size: 0.6875rem;
    }
    
    .lyrics-input-header {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    
    .result-card {
        padding: 1.25rem;
    }
    
    .result-title {
        font-size: 1.25rem;
    }
    
    .result-track-title {
        font-size: 1.5rem;
    }
    
    .result-download-section {
        padding: 1rem;
    }
    
    .download-option-btn {
        padding: 1rem;
        min-height: 64px;
    }
    
    .download-option-btn .download-icon {
        width: 40px;
        height: 40px;
    }
    
    .result-action-btn {
        min-height: 48px;
        padding: 0.875rem 1.25rem;
    }
    
    .music-gen-history {
        margin-top: 2rem;
    }
    
    .history-item {
        padding: 0.875rem;
    }
}

@media (max-width: 480px) {
    .music-gen-card {
        padding: 1rem;
        border-radius: 16px;
    }
    
    .music-gen-title {
        font-size: 1.375rem;
    }
    
    .music-gen-mode-btn {
        padding: 0.75rem;
    }
    
    .vocal-pill {
        min-width: 100%;
    }
    
    .result-meta {
        gap: 0.5rem;
    }
    
    .meta-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
    
    .waveform-bar {
        width: 5px;
    }
}

/* Accessibility - Focus States */
.music-gen-mode-btn:focus-visible,
.music-gen-create-btn:focus-visible,
.vocal-pill:focus-visible,
.download-option-btn:focus-visible,
.result-action-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.music-gen-prompt:focus-visible,
.music-gen-lyrics:focus-visible,
.music-gen-select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .waveform-bar {
        animation: none;
    }
    
    .loading-spinner .spinner-ring {
        animation: none;
    }
    
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Touch-friendly adjustments */
@media (pointer: coarse) {
    .music-gen-mode-btn,
    .vocal-pill,
    .download-option-btn,
    .ref-option,
    .prompt-attach-btn {
        min-height: 48px;
    }
    
    .music-gen-select {
        min-height: 48px;
    }
}

/* ============================================================================
   DASHBOARD STYLES
   ============================================================================ */

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}

.dashboard-title-section {
    flex: 1;
}

.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.dashboard-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

.dashboard-refresh-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dashboard-refresh-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.dashboard-refresh-btn svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

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

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--bg-card-premium);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-2xl);
    transition: all var(--transition-premium);
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--stat-accent, var(--accent-gradient));
    opacity: 0;
    transition: opacity var(--transition-premium);
}

.dashboard-stat-card:hover {
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.dashboard-stat-card:hover::before {
    opacity: 1;
}

.dashboard-stat-card:nth-child(1) { --stat-accent: linear-gradient(90deg, #6366f1, #8b5cf6); }
.dashboard-stat-card:nth-child(2) { --stat-accent: linear-gradient(90deg, #10b981, #059669); }
.dashboard-stat-card:nth-child(3) { --stat-accent: linear-gradient(90deg, #f59e0b, #d97706); }
.dashboard-stat-card:nth-child(4) { --stat-accent: linear-gradient(90deg, #ef4444, #dc2626); }

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    transition: all var(--transition-premium);
    position: relative;
    flex-shrink: 0;
}

.stat-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--stat-ring, var(--accent-gradient));
    opacity: 0;
    transition: opacity var(--transition-premium);
    z-index: -1;
}

.dashboard-stat-card:hover .stat-icon {
    transform: scale(1.08);
}

.dashboard-stat-card:hover .stat-icon::before {
    opacity: 0.3;
}

.stat-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.stat-icon-total {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.35));
    color: var(--accent-primary);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
    --stat-ring: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.stat-icon-completed {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
    color: var(--success);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
    --stat-ring: linear-gradient(135deg, #10b981, #059669);
}

.stat-icon-processing {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3));
    color: var(--warning);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.15);
    --stat-ring: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon-errors {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3));
    color: var(--error);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
    --stat-ring: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    font-feature-settings: 'tnum';
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dashboard-jobs-section {
    margin-bottom: 2rem;
}

.dashboard-jobs-header {
    margin-bottom: 1rem;
}

.dashboard-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-section-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.dashboard-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--text-muted);
}

.dashboard-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
}

.dashboard-empty svg {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--text-muted);
    opacity: 0.5;
}

.dashboard-empty h3 {
    font-size: 1.125rem;
    color: var(--text-primary);
    margin: 0;
}

.dashboard-empty p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.dashboard-start-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-top: 0.5rem;
}

.dashboard-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.dashboard-start-btn svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-job-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(99, 102, 241, 0.08);
    border-radius: var(--radius-xl);
    transition: all var(--transition-premium);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.dashboard-job-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--job-accent, var(--accent-gradient));
    opacity: 0;
    transition: opacity var(--transition-premium);
}

.dashboard-job-card:hover {
    border-color: rgba(99, 102, 241, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.dashboard-job-card:hover::before {
    opacity: 1;
}

.job-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--transition-premium);
}

.dashboard-job-card:hover .job-tool-icon {
    transform: scale(1.05);
}

.job-tool-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--accent-primary);
}

.job-tool-icon.tool-mastering {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    --job-accent: linear-gradient(180deg, #6366f1, #8b5cf6);
}

.job-tool-icon.tool-mastering svg {
    color: var(--accent-primary);
}

.job-tool-icon.tool-music-gen {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.15));
    --job-accent: linear-gradient(180deg, #a855f7, #8b5cf6);
}

.job-tool-icon.tool-music-gen svg {
    color: var(--accent-secondary);
}

.job-tool-icon.tool-audio-qc {
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
    --job-accent: linear-gradient(180deg, #10b981, #059669);
}

.job-tool-icon.tool-audio-qc svg {
    color: var(--success);
}

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

.job-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.job-tool-label {
    color: var(--accent-primary);
    font-weight: 500;
}

.job-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.job-status-badge.status-completed {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.job-status-badge.status-processing,
.job-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.job-status-badge.status-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.job-status-badge svg {
    width: 0.75rem;
    height: 0.75rem;
}

.job-time {
    font-size: 0.8125rem;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: right;
}

.dashboard-quick-access {
    margin-top: 2.5rem;
    padding: 1.75rem;
    background: var(--bg-card-premium);
    border: 1px solid var(--border-premium);
    border-radius: var(--radius-2xl);
}

.dashboard-quick-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}

.dashboard-quick-tool {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-premium);
    position: relative;
    overflow: hidden;
}

.dashboard-quick-tool::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
    opacity: 0;
    transition: opacity var(--transition-premium);
}

.dashboard-quick-tool:hover {
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(99, 102, 241, 0.15);
}

.dashboard-quick-tool:hover::before {
    opacity: 1;
}

.dashboard-quick-tool svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.dashboard-quick-tool span {
    position: relative;
    z-index: 1;
}

.dashboard-quick-tool::after {
    content: '\2192';
    position: absolute;
    right: 1.25rem;
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-8px);
    transition: all var(--transition-premium);
}

.dashboard-quick-tool:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 1024px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-quick-tools {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .dashboard-stat-card {
        padding: 1.25rem;
    }
    
    .stat-icon {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    .dashboard-quick-access {
        padding: 1.25rem;
    }
    
    .dashboard-quick-tools {
        grid-template-columns: 1fr;
    }
    
    .dashboard-quick-tool {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1.25rem 1rem;
    }
    
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dashboard-refresh-btn {
        align-self: flex-start;
    }
    
    .dashboard-title {
        font-size: 1.5rem;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .dashboard-stat-card {
        padding: 1rem;
    }
    
    .stat-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .stat-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .stat-value {
        font-size: 1.375rem;
    }
    
    .dashboard-job-card {
        flex-wrap: wrap;
        padding: 1rem;
    }
    
    .job-info {
        flex: 1 1 calc(100% - 4rem);
        order: 1;
    }
    
    .job-status-badge {
        order: 2;
    }
    
    .job-time {
        order: 3;
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        padding-left: 3.75rem;
    }
    
    .dashboard-quick-tools {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .dashboard-quick-tool {
        padding: 1rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .dashboard-quick-tool svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ============================================================================
   HOME PAGE V2 - ENHANCED HERO SECTION
   ============================================================================ */

.hero-section-v2 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 75vh;
    padding: 4rem 3rem;
    overflow: hidden;
}

.hero-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.hero-glow-1 {
    width: 500px;
    height: 500px;
    background: var(--accent-primary);
    top: -150px;
    left: -100px;
    animation: float-glow 8s ease-in-out infinite;
}

.hero-glow-2 {
    width: 400px;
    height: 400px;
    background: var(--accent-tertiary);
    bottom: -100px;
    right: -50px;
    animation: float-glow 10s ease-in-out infinite reverse;
}

@keyframes float-glow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
}

.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.hero-content-v2 {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15);
    transition: all var(--transition-premium);
}

.hero-badge:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
    transform: translateY(-1px);
}

.badge-icon {
    display: flex;
    align-items: center;
}

.badge-icon svg {
    width: 1rem;
    height: 1rem;
    fill: var(--accent-primary);
    stroke: var(--accent-primary);
}

.hero-title-v2 {
    display: flex;
    flex-direction: column;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 1.75rem;
    letter-spacing: -0.03em;
}

.hero-title-line {
    color: var(--text-primary);
}

.hero-title-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc-v2 {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 520px;
}

.hero-actions-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero-action-primary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-premium);
    box-shadow: 0 4px 24px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0);
    position: relative;
    overflow: hidden;
}

.hero-action-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-premium);
}

.hero-action-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 35px rgba(99, 102, 241, 0.5), 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.hero-action-primary:hover::before {
    opacity: 1;
}

.hero-action-primary:active {
    transform: translateY(-1px) scale(0.98);
}

.hero-action-primary .action-icon svg,
.hero-action-secondary .action-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hero-action-primary .action-arrow svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-normal);
}

.hero-action-primary:hover .action-arrow svg {
    transform: translateX(4px);
}

.hero-action-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-premium);
    backdrop-filter: blur(8px);
}

.hero-action-secondary:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hero-action-secondary:active {
    transform: translateY(-1px);
}

.hero-stats-v2 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.stat-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.hero-stat-divider {
    width: 1px;
    height: 2.5rem;
    background: var(--border-color);
}

.hero-visual-v2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Ultra-Premium Waveform Card */
.hero-visual-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-3xl);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 
        0 8px 40px rgba(139, 92, 246, 0.2),
        0 0 80px rgba(99, 102, 241, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hero-visual-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.4), transparent);
}

.hero-visual-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 
        0 12px 50px rgba(139, 92, 246, 0.3),
        0 0 100px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-6px);
}

.visual-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.visual-card-dots {
    display: flex;
    gap: 0.375rem;
}

.visual-card-dots span {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.visual-card-dots span:nth-child(1) { background: #ef4444; }
.visual-card-dots span:nth-child(2) { background: #f59e0b; }
.visual-card-dots span:nth-child(3) { background: #10b981; }

.visual-card-title {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.visual-waveform-container {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-xl);
    padding: 1.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.visual-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 80px;
}

.wave-bar {
    width: 6px;
    height: var(--h);
    background: var(--accent-gradient);
    border-radius: 3px;
    animation: wave-pulse 1.5s ease-in-out infinite;
    animation-delay: calc(var(--h) * 0.01s);
}

@keyframes wave-pulse {
    0%, 100% { opacity: 0.6; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.1); }
}

.visual-card-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.info-success {
    color: var(--success);
}

.floating-tool-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    animation: float-badge 4s ease-in-out infinite;
}

.floating-tool-badge svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-primary);
}

.floating-1 {
    top: 5%;
    right: 10%;
    animation-delay: 0s;
}

.floating-2 {
    bottom: 15%;
    left: 5%;
    animation-delay: 1s;
}

.floating-3 {
    top: 50%;
    right: -5%;
    animation-delay: 2s;
}

@keyframes float-badge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (max-width: 1024px) {
    .hero-section-v2 {
        grid-template-columns: 1fr;
        gap: 2rem;
        min-height: auto;
        padding: 2rem 1.5rem;
    }
    
    .hero-title-v2 {
        font-size: 2.5rem;
    }
    
    .hero-visual-v2 {
        order: -1;
    }
    
    .hero-visual-card {
        max-width: 100%;
    }
    
    .floating-tool-badge {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-section-v2 {
        padding: 1.5rem 1rem;
    }
    
    .hero-title-v2 {
        font-size: 2rem;
    }
    
    .hero-desc-v2 {
        font-size: 1rem;
    }
    
    .hero-actions-v2 {
        flex-direction: column;
    }
    
    .hero-action-primary,
    .hero-action-secondary {
        justify-content: center;
        width: 100%;
    }
    
    .hero-stats-v2 {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .hero-stat-divider {
        display: none;
    }
    
    .hero-stat {
        flex: 1;
        min-width: 80px;
        text-align: center;
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-lg);
    }
    
    .visual-waveform {
        height: 60px;
    }
    
    .wave-bar {
        width: 4px;
    }
}

/* ============================================================================
   MOBILE BOTTOM ACTION BAR - Premium Navigation
   ============================================================================ */

.mobile-action-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 30, 0.98) 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}

.mobile-action-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 480px;
    margin: 0 auto;
}

.mobile-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-premium);
    border-radius: var(--radius-lg);
    position: relative;
}

.mobile-action-item svg {
    width: 1.375rem;
    height: 1.375rem;
    transition: transform var(--transition-premium);
}

.mobile-action-item:hover,
.mobile-action-item:active {
    color: var(--accent-primary);
}

.mobile-action-item:active svg {
    transform: scale(0.95);
}

.mobile-action-item.active {
    color: var(--accent-primary);
}

.mobile-action-item.active::before {
    content: '';
    position: absolute;
    top: -0.625rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 0 0 3px 3px;
}

.mobile-action-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--accent-gradient);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition: all var(--transition-premium);
    margin: -1.5rem 0 0;
    position: relative;
}

.mobile-action-cta svg {
    width: 1.5rem;
    height: 1.5rem;
}

.mobile-action-cta:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .mobile-action-bar {
        display: block;
    }
    
    .main-content {
        padding-bottom: 5rem;
    }
    
    .quick-tools-grid {
        grid-template-columns: 1fr;
    }
    
    .usecase-cards {
        grid-template-columns: 1fr;
    }
    
    .workflow-steps {
        flex-direction: column;
    }
    
    .workflow-connector {
        display: none;
    }
    
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-title-v2 {
        font-size: 1.75rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* ============================================================================
   FINAL POLISH - UNIFIED DESIGN SYSTEM OVERRIDES
   ============================================================================ */

/* Ensure all cards have consistent styling */
.qc-card,
.result-card,
.metadata-card,
.settings-card,
.gen-card,
.tool-card,
.feature-card {
    border-radius: var(--radius-card);
    transition: all var(--transition-normal);
}

/* Ensure all buttons have consistent hover behavior */
button:not(.mobile-action-item):not(.mobile-action-cta):not(.nav-item) {
    transition: all var(--transition-normal);
}

/* Unified section spacing */
.page > .container,
.page > div:first-child {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-3xl);
}

/* Unified heading styles */
h1, h2, h3 {
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* Improve dark mode text contrast */
.text-secondary,
.subtitle,
.description {
    color: var(--text-secondary);
}

/* Ensure all input fields have consistent styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}

/* ============================================================================
   MOBILE POLISH - TIGHTENED RESPONSIVE STYLES
   ============================================================================ */

@media (max-width: 768px) {
    /* Reduce base padding on mobile */
    :root {
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.5rem;
        --spacing-2xl: 2rem;
        --spacing-section: 3rem;
    }
    
    /* Tighter card padding on mobile */
    .upload-card {
        padding: var(--spacing-xl) var(--spacing-lg);
        min-height: 160px;
    }
    
    /* Reduce section gaps */
    .quick-tools-section,
    .usecase-section,
    .testimonials-section {
        margin-bottom: var(--spacing-2xl);
    }
    
    /* Tighter modal padding */
    .language-modal-content,
    .modal-content {
        padding: var(--spacing-lg);
        margin: var(--spacing-md);
    }
    
    /* Reduce font sizes for mobile */
    .section-title {
        font-size: 1.5rem;
    }
    
    .qc-title,
    .dashboard-title,
    .page-title {
        font-size: 1.75rem;
    }
    
    /* Tighter card layout */
    .dashboard-stat-card {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }
    
    .stat-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    /* Better touch targets */
    .nav-item,
    .quick-tool-card,
    .dashboard-quick-tool {
        min-height: 48px;
    }
}

@media (max-width: 480px) {
    /* Even smaller text on very small screens */
    .hero-title,
    .hero-title-v2 {
        font-size: 1.5rem;
    }
    
    .hero-desc,
    .hero-desc-v2 {
        font-size: 0.9375rem;
    }
    
    /* Stack action buttons vertically */
    .hero-actions,
    .hero-actions-v2 {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .hero-action-primary,
    .hero-action-secondary {
        width: 100%;
        justify-content: center;
    }
    
    /* Testimonial cards */
    .testimonial-card {
        padding: var(--spacing-lg);
    }
    
    .testimonial-review {
        font-size: 0.875rem;
    }
    
    /* Reduce quick access grid gap */
    .dashboard-quick-tools {
        gap: var(--spacing-sm);
    }
    
    .dashboard-quick-tool {
        padding: var(--spacing-md);
        font-size: 0.875rem;
    }
}

/* ============================================
   MUSICGPT-STYLE HOME PAGE
   ============================================ */

.musicgpt-home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
}

.musicgpt-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px var(--spacing-xl) 60px;
    position: relative;
    min-height: 65vh;
}

.musicgpt-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.musicgpt-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.25;
}

.musicgpt-glow-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, #6366f1 0%, transparent 60%);
    top: -400px;
    left: 50%;
    transform: translateX(-50%);
}

.musicgpt-glow-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #8b5cf6 0%, transparent 60%);
    bottom: -100px;
    right: 5%;
    opacity: 0.15;
}

.musicgpt-grid-overlay {
    display: none;
}

.musicgpt-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    width: 100%;
    padding: 0 var(--spacing-md);
}

/* Hero Mode Tabs - Songs/Remixes/Instrumentals */
.hero-mode-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.hero-mode-tab {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid #333;
    border-radius: 24px;
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hero-mode-tab:hover {
    border-color: #555;
    color: #ccc;
}

.hero-mode-tab.active {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.musicgpt-title {
    font-size: 2.75rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: var(--spacing-xl);
    letter-spacing: -0.02em;
}

.hero-title-highlight {
    background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-glow {
    color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: none;
}

/* Prompt Box - MusicGPT Style */
.musicgpt-prompt-container {
    margin-bottom: var(--spacing-md);
}

.musicgpt-prompt-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    transition: all 0.2s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.musicgpt-prompt-box:focus-within {
    border-color: #3a3a3a;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Attach Button with Dropdown */
.attach-dropdown-container {
    position: relative;
    flex-shrink: 0;
}

.prompt-attach-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.prompt-attach-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

.prompt-attach-btn svg {
    width: 18px;
    height: 18px;
}

/* Attach Dropdown Menu */
.attach-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 8px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 200;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.attach-dropdown-container.open .attach-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.attach-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #aaa;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.attach-dropdown-item:hover {
    background: #2a2a2a;
    color: #fff;
}

.attach-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.musicgpt-prompt-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 1rem;
    padding: 12px 8px;
    min-width: 180px;
}

.musicgpt-prompt-input::placeholder {
    color: #666;
}

/* Mode Toggle Pills - MusicGPT Style */
.prompt-mode-toggles {
    display: flex;
    gap: 0;
    background: #2a2a2a;
    padding: 4px;
    border-radius: 24px;
    flex-shrink: 0;
}

.prompt-mode-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 20px;
    color: #888;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.prompt-mode-pill svg {
    width: 16px;
    height: 16px;
}

.prompt-mode-pill:hover {
    color: #bbb;
}

.prompt-mode-pill.active {
    background: #3a3a3a;
    color: #ffffff;
}

.prompt-submit-btn {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    color: #000000;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-submit-btn:hover {
    transform: scale(1.05);
    background: #f0f0f0;
}

.prompt-submit-btn svg {
    width: 20px;
    height: 20px;
    stroke: #000000;
}

/* Tools Dropdown - MusicGPT Style */
.musicgpt-tools-row {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.tools-dropdown-container {
    position: relative;
}

.tools-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #888;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tools-dropdown-btn:hover {
    color: #fff;
}

.tools-dropdown-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.tools-dropdown-container.open .tools-dropdown-btn svg {
    transform: rotate(180deg);
}

.tools-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    padding: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.tools-dropdown-container.open .tools-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tools-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #888;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.tools-dropdown-item:hover {
    background: #2a2a2a;
    color: #fff;
}

.tools-dropdown-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Tools dropdown inside prompt bar */
.prompt-tools {
    flex-shrink: 0;
}

.prompt-tools .tools-dropdown-btn {
    background: #2a2a2a;
    border-radius: 20px;
    padding: 8px 14px;
}

.prompt-tools .tools-dropdown-btn:hover {
    background: #3a3a3a;
}

/* Extended Tools Menu */
.tools-menu-extended {
    min-width: 280px;
    right: 0;
    left: auto;
    transform: none;
}

.tools-dropdown-container.open .tools-menu-extended {
    transform: translateY(0);
}

.tools-dropdown-item-extended {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #aaa;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.tools-dropdown-item-extended:hover {
    background: #2a2a2a;
}

.tools-dropdown-item-extended:hover .tool-item-title {
    color: #fff;
}

.tool-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    border-radius: 10px;
    flex-shrink: 0;
}

.tool-item-icon svg {
    width: 18px;
    height: 18px;
    stroke: #888;
}

.tools-dropdown-item-extended:hover .tool-item-icon svg {
    stroke: #fff;
}

.tool-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-item-title {
    font-weight: 500;
    color: #ddd;
    font-size: 0.875rem;
}

.tool-item-desc {
    font-size: 0.75rem;
    color: #666;
}

.tool-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.tool-badge-plus {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: #000;
}

.tool-badge-pro {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    color: #fff;
}

/* Tool Check Icon for active tool */
.tool-check-icon {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tool-check-icon svg {
    width: 18px;
    height: 18px;
    stroke: #a855f7;
}

.tools-dropdown-item-extended.active .tool-check-icon {
    display: flex;
}

.tools-dropdown-item-extended.active .tool-badge {
    display: none;
}

/* Lyrics Input Row */
.lyrics-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
}

.lyrics-input-row.hidden {
    display: none;
}

.lyrics-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #888;
    font-size: 0.9rem;
    outline: none;
    padding: 8px 0;
}

.lyrics-input::placeholder {
    color: #555;
}

.lyrics-cancel-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lyrics-cancel-btn:hover {
    color: #fff;
}

.lyrics-generate-btn {
    padding: 10px 20px;
    background: #2a2a2a;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lyrics-generate-btn:hover {
    background: #3a3a3a;
}

/* YouTube Input Row */
.youtube-input-row {
    margin-top: 12px;
}

.youtube-input-row.hidden {
    display: none;
}

.youtube-link-input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    padding: 14px 16px;
    outline: none;
    transition: border-color 0.2s ease;
}

.youtube-link-input::placeholder {
    color: #555;
}

.youtube-link-input:focus {
    border-color: #a855f7;
}

/* Quick Action Buttons */
.quick-action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 24px;
    color: #888;
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    border-color: #444;
    color: #fff;
    background: #1a1a1a;
}

.quick-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.quick-action-btn.active {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #fff;
}

.musicgpt-version {
    display: none;
}

/* Prompts Section - MusicGPT Style */
.musicgpt-prompts-section {
    padding: 40px 0 60px;
    background: #0a0a0a;
}

.prompts-section-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    color: #666;
    margin-bottom: var(--spacing-lg);
    text-transform: none;
    letter-spacing: 0;
}

.prompts-scroll-container {
    position: relative;
    padding: 0 60px;
    overflow: hidden;
}

.prompts-scroll-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 0;
}

.prompts-scroll-track::-webkit-scrollbar {
    display: none;
}

.prompt-card {
    flex-shrink: 0;
    width: 160px;
    background: #141414;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.prompt-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.prompt-card-image {
    height: 160px;
    background-size: cover;
    background-position: center;
}

.prompt-card-info {
    padding: 14px 12px;
    background: #141414;
}

.prompt-card-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.prompt-card-likes {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #666;
}

.prompt-card-likes svg {
    width: 12px;
    height: 12px;
    color: #888;
}

/* Scroll Buttons - MusicGPT Style */
.prompts-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 50%;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.prompts-scroll-btn:hover {
    background: #2a2a2a;
    color: #fff;
}

.prompts-scroll-btn svg {
    width: 20px;
    height: 20px;
}

.prompts-scroll-btn.scroll-left {
    left: 10px;
}

.prompts-scroll-btn.scroll-right {
    right: 10px;
}

/* Brand Marquee - MusicGPT Style */
.musicgpt-brand-marquee {
    padding: 40px 0;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    animation: marquee 40s linear infinite;
}

.marquee-content {
    display: flex;
    gap: 80px;
    padding: 0 40px;
    flex-shrink: 0;
}

.brand-logo {
    font-size: 0.9rem;
    font-weight: 500;
    color: #444;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    letter-spacing: 0.5px;
}

.brand-logo:hover {
    opacity: 1;
    color: #666;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* MusicGPT Footer */
.musicgpt-footer {
    padding: 30px;
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
}

.musicgpt-footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.musicgpt-footer .footer-copyright {
    color: #444;
    font-size: 0.8rem;
}

.musicgpt-footer .footer-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.musicgpt-footer .footer-link {
    color: #666;
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
}

.musicgpt-footer .footer-link:hover {
    color: #fff;
}

.musicgpt-footer .footer-dot {
    color: #333;
}

/* Responsive Styles for MusicGPT Home */
@media (max-width: 768px) {
    .musicgpt-hero {
        padding: 60px var(--spacing-md) 40px;
        min-height: 50vh;
    }
    
    .musicgpt-title {
        font-size: 1.75rem;
    }
    
    .musicgpt-prompt-box {
        flex-wrap: wrap;
        padding: 10px;
        gap: 8px;
        border-radius: 24px;
    }
    
    .prompt-attach-btn {
        order: 1;
        width: 36px;
        height: 36px;
    }
    
    .musicgpt-prompt-input {
        order: 2;
        flex: 1;
        min-width: 120px;
        padding: 8px 4px;
        font-size: 0.9rem;
    }
    
    .prompt-submit-btn {
        order: 3;
        width: 40px;
        height: 40px;
    }
    
    .prompt-mode-toggles {
        order: 4;
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    
    .prompt-mode-pill {
        padding: 8px 12px;
    }
    
    .prompt-mode-pill span {
        display: none;
    }
    
    .prompt-mode-pill svg {
        width: 18px;
        height: 18px;
    }
    
    .prompts-scroll-container {
        padding: 0 40px;
    }
    
    .prompt-card {
        width: 140px;
    }
    
    .prompt-card-image {
        height: 140px;
    }
    
    .prompts-scroll-container {
        padding: 0 var(--spacing-md);
    }
    
    .prompt-card {
        width: 120px;
    }
    
    .prompt-card-image {
        height: 80px;
    }
    
    .prompts-scroll-btn {
        width: 32px;
        height: 32px;
    }
    
    .prompts-scroll-btn svg {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .musicgpt-title {
        font-size: 1.5rem;
    }
    
    .musicgpt-prompt-input {
        font-size: 0.9375rem;
    }
    
    .prompt-card {
        width: 110px;
    }
    
    .prompt-card-image {
        height: 70px;
    }
    
    .prompt-card-info {
        padding: 8px;
    }
    
    .prompt-card-title {
        font-size: 0.8125rem;
    }
}

/* ============================================
   WAVEFORM VISUALIZER - Audio Playback
   ============================================ */

.result-waveform-visualizer {
    position: relative;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, rgba(168, 85, 247, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    cursor: pointer;
}

.waveform-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.waveform-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(168, 85, 247, 0.3) 0%, 
        rgba(139, 92, 246, 0.2) 100%);
    pointer-events: none;
    transition: width 0.05s linear;
}

/* Enhanced Audio Player Controls */
.result-player-enhanced {
    background: #1a1a1a;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

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

.player-play-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.player-play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.player-play-btn:active {
    transform: scale(0.98);
}

.player-play-btn svg {
    width: 20px;
    height: 20px;
}

.player-play-btn .play-icon {
    margin-left: 2px;
}

.player-play-btn .pause-icon.hidden,
.player-play-btn .play-icon.hidden {
    display: none;
}

.player-progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-time {
    font-size: 0.8rem;
    color: #888;
    font-family: 'SF Mono', 'Fira Code', monospace;
    min-width: 40px;
}

.player-progress-bar {
    flex: 1;
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.player-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a855f7 0%, #8b5cf6 100%);
    border-radius: 3px;
    transition: width 0.05s linear;
}

.player-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.player-progress-bar:hover .player-progress-handle {
    opacity: 1;
}

.player-volume {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: 50%;
}

.volume-btn:hover {
    color: #fff;
    background: #2a2a2a;
}

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

.volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #2a2a2a;
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #a855f7;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

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

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #a855f7;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.hidden-audio {
    display: none;
}

/* Waveform Animation States */
.waveform-canvas.playing {
    animation: waveformGlow 2s ease-in-out infinite;
}

@keyframes waveformGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.5));
    }
}

/* Responsive Player */
@media (max-width: 768px) {
    .result-waveform-visualizer {
        height: 80px;
    }
    
    .player-controls {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .player-play-btn {
        width: 42px;
        height: 42px;
    }
    
    .player-volume {
        width: 100%;
        justify-content: flex-end;
    }
    
    .volume-slider {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .result-waveform-visualizer {
        height: 60px;
        border-radius: 12px;
    }
    
    .result-player-enhanced {
        padding: 12px 16px;
        border-radius: 12px;
    }
    
    .player-progress-container {
        order: 2;
        width: 100%;
    }
    
    .player-volume {
        order: 3;
    }
}

/* ========================================
   ZULFIYAAN AI STUDIO BRANDING STYLES
   ======================================== */

/* Hero Header for Create Music Page */
.zulfiyaan-hero-header {
    position: relative;
    text-align: center;
    padding: 2rem 1.5rem 1rem;
    margin-bottom: 0;
}

.hero-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    background: radial-gradient(ellipse at center, 
        rgba(139, 92, 246, 0.25) 0%, 
        rgba(236, 72, 153, 0.15) 40%, 
        rgba(6, 182, 212, 0.1) 70%,
        transparent 100%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.zulfiyaan-hero-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0.5rem;
}

.hero-title-main {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.zulfiyaan-hero-tagline {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.02em;
}

/* Branded Result Placeholder Card */
.zulfiyaan-result-placeholder {
    position: relative;
    margin: 1.5rem;
    padding: 2rem;
    background: var(--bg-card-premium);
    border-radius: var(--radius-premium);
    border: 1px solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    text-align: center;
}

.zulfiyaan-result-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--radius-premium);
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.4) 0%, 
        rgba(236, 72, 153, 0.3) 50%, 
        rgba(6, 182, 212, 0.4) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.result-placeholder-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    background: radial-gradient(ellipse at center,
        rgba(139, 92, 246, 0.15) 0%,
        rgba(236, 72, 153, 0.1) 50%,
        transparent 100%);
    filter: blur(30px);
    pointer-events: none;
}

.result-placeholder-content {
    position: relative;
    z-index: 1;
}

.result-placeholder-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15));
    border-radius: 50%;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.result-placeholder-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-primary);
}

.result-placeholder-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.result-placeholder-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 400px;
    margin: 0 auto;
}

/* Enhanced Sidebar Section Styling */
.nav-section-title {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 0.75rem 1rem 0.5rem;
    display: block;
}

.nav-item {
    transition: all var(--transition-normal);
    border-radius: var(--radius-lg);
    margin: 2px 0.5rem;
    position: relative;
}

.nav-item:hover {
    transform: scale(1.02);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.25);
    box-shadow: 
        inset 0 0 20px rgba(139, 92, 246, 0.05),
        0 0 20px rgba(139, 92, 246, 0.08);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: linear-gradient(180deg, #8b5cf6, #ec4899);
    border-radius: 0 2px 2px 0;
}

/* Enhanced Mobile Bottom Nav */
.mobile-action-bar {
    background: rgba(10, 15, 31, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 1.5rem 1.5rem 0 0;
}

.mobile-action-item {
    transition: all var(--transition-normal);
}

.mobile-action-item:hover,
.mobile-action-item.active {
    color: var(--accent-primary);
}

.mobile-action-item.active {
    position: relative;
}

.mobile-action-item.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    border-radius: 2px;
}

.mobile-action-item.active svg {
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

/* Enhanced Brand Gradient for Sidebar Logo */
.brand-icon-glow-premium {
    background: radial-gradient(circle, 
        rgba(139, 92, 246, 0.3) 0%, 
        rgba(236, 72, 153, 0.2) 50%, 
        transparent 70%);
}

.brand-pulse-ring-premium {
    border-color: rgba(139, 92, 246, 0.3);
}

.brand-pulse-ring-premium.delay {
    border-color: rgba(236, 72, 153, 0.2);
}

/* Modal Micro-animations */
@keyframes modal-scale-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-container,
.profile-container,
.language-modal-container {
    animation: modal-scale-in 0.22s ease-out;
}

/* Tab Sliding Indicator Animation */
@keyframes tab-slide {
    from {
        opacity: 0.5;
        transform: scaleX(0.8);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Button Hover Effects */
.btn-primary:hover,
.gradient-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-glow-lg), var(--shadow-lg);
}

.btn-primary:active,
.gradient-button:active {
    transform: translateY(0) scale(0.98);
}

/* Tools Dropdown Enhanced */
.tools-dropdown-menu {
    animation: fade-slide-down 0.2s ease-out;
}

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

/* Responsive Hero Header */
@media (max-width: 768px) {
    .zulfiyaan-hero-header {
        padding: 1.5rem 1rem 0.75rem;
    }
    
    .hero-title-main {
        font-size: 1.5rem;
    }
    
    .zulfiyaan-hero-tagline {
        font-size: 0.75rem;
    }
    
    .zulfiyaan-result-placeholder {
        margin: 1rem;
        padding: 1.5rem;
    }
}

@media (min-width: 769px) {
    .hero-title-main {
        font-size: 2rem;
    }
    
    .zulfiyaan-hero-tagline {
        font-size: 0.9375rem;
    }
}

/* ========================================
   END ZULFIYAAN AI STUDIO BRANDING STYLES
   ======================================== */

/* ============================================================================
   GLOBAL RESPONSIVE RULES FOR ALL TOOL PAGES
   Consistent layout behavior across all tool pages
   Desktop: 2-column or 3-column layouts
   Mobile (<768px): 1-column stacked layout
   ============================================================================ */

/* Desktop: Ensure all main grids use proper 2-column layout */
@media (min-width: 769px) {
    .converter-main-grid,
    .copyright-main-grid,
    .copyright-check-main-grid,
    .caux-main-grid,
    .cover-art-main-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    /* Cards within grids: no fixed heights, allow auto height with overflow */
    .converter-upload-card,
    .converter-options-card,
    .copyright-upload-card,
    .copyright-result-card,
    .copyright-check-card,
    .caux-upload-card,
    .caux-result-card,
    .cover-art-upload-card,
    .cover-art-result-card,
    .stem-upload-card,
    .mastering-upload-card,
    .mediainfo-upload-card {
        height: auto;
        min-height: 300px;
        max-height: none;
        overflow-y: auto;
    }
}

/* Mobile: All tool page grids stack vertically */
@media (max-width: 768px) {
    /* All main grids: flex column stacked layout */
    .converter-main-grid,
    .copyright-main-grid,
    .copyright-check-main-grid,
    .caux-main-grid,
    .cover-art-main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
    }
    
    /* All tool containers: proper mobile padding */
    .converter-container,
    .copyright-container,
    .copyright-check-container,
    .caux-container,
    .cover-art-container,
    .stem-container,
    .mastering-container,
    .mediainfo-container,
    .bpm-container,
    .lyrics-container {
        padding: 1rem 16px 2rem;
    }
    
    /* All cards: full width, no fixed heights, proper padding */
    .converter-upload-card,
    .converter-options-card,
    .converter-results-card,
    .copyright-upload-card,
    .copyright-result-card,
    .copyright-check-card,
    .caux-upload-card,
    .caux-result-card,
    .cover-art-upload-card,
    .cover-art-result-card,
    .stem-upload-card,
    .mastering-upload-card,
    .mediainfo-upload-card,
    .mediainfo-results-container {
        width: 100%;
        min-height: auto;
        max-height: none;
        height: auto;
        padding: 16px;
        overflow-y: auto;
        box-sizing: border-box;
    }
    
    /* All upload areas: full width */
    .upload-section,
    .result-section,
    .options-section,
    [class*="-upload-section"],
    [class*="-result-section"],
    [class*="-options-section"] {
        width: 100%;
        order: unset;
    }
    
    /* Info grids: single column on mobile */
    .converter-info-grid,
    .copyright-info-grid,
    .copyright-check-info-grid,
    .caux-info-grid,
    .cover-art-info-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* All titles: responsive sizing */
    .converter-title,
    .copyright-title,
    .copyright-check-title,
    .caux-title,
    .cover-art-title,
    .stem-title,
    .mastering-title,
    .mediainfo-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    /* All subtitles: responsive sizing */
    .converter-subtitle,
    .copyright-subtitle,
    .copyright-check-subtitle,
    .caux-subtitle,
    .cover-art-subtitle,
    .stem-subtitle,
    .mastering-subtitle,
    .mediainfo-subtitle {
        font-size: 0.9375rem;
    }
}

/* Small mobile: Extra compact */
@media (max-width: 480px) {
    /* All tool containers: tighter padding */
    .converter-container,
    .copyright-container,
    .copyright-check-container,
    .caux-container,
    .cover-art-container,
    .stem-container,
    .mastering-container,
    .mediainfo-container,
    .bpm-container,
    .lyrics-container {
        padding: 0.75rem 12px 2rem;
    }
    
    /* All cards: smaller padding and border-radius */
    .converter-upload-card,
    .converter-options-card,
    .converter-results-card,
    .copyright-upload-card,
    .copyright-result-card,
    .copyright-check-card,
    .caux-upload-card,
    .caux-result-card,
    .cover-art-upload-card,
    .cover-art-result-card,
    .stem-upload-card,
    .mastering-upload-card,
    .mediainfo-upload-card {
        padding: 14px;
        border-radius: 16px;
    }
    
    /* All titles: even smaller */
    .converter-title,
    .copyright-title,
    .copyright-check-title,
    .caux-title,
    .cover-art-title,
    .stem-title,
    .mastering-title,
    .mediainfo-title {
        font-size: 1.5rem;
    }
    
    /* All subtitles: smaller */
    .converter-subtitle,
    .copyright-subtitle,
    .copyright-check-subtitle,
    .caux-subtitle,
    .cover-art-subtitle,
    .stem-subtitle,
    .mastering-subtitle,
    .mediainfo-subtitle {
        font-size: 0.875rem;
    }
    
    /* Upload icons: smaller */
    .converter-upload-icon,
    .copyright-upload-icon,
    .copyright-check-upload-icon,
    .caux-upload-icon,
    .cover-art-upload-icon,
    .stem-upload-icon,
    .mastering-upload-icon,
    .mediainfo-upload-icon {
        width: 3rem;
        height: 3rem;
    }
    
    /* Buttons: smaller padding */
    .converter-choose-btn,
    .copyright-choose-btn,
    .copyright-check-select-btn,
    .caux-select-btn,
    .cover-art-select-btn,
    .stem-select-btn,
    .mastering-select-btn,
    .mediainfo-choose-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
}

/* Prevent horizontal overflow on all tool pages */
.tool-page,
.tool-content,
[class*="-container"] {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all cards can scroll internally if content is long */
.app-card,
[class*="-card"] {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================================
   END GLOBAL RESPONSIVE RULES
   ============================================================================ */


/* ============================================================================
   MOBILE BOTTOM TAB BAR - RESPONSIVE NAVIGATION
   ============================================================================ */

/* Bottom Navigation - Mobile Only */
.bottom-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(155, 92, 255, 0.2);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4), 0 -1px 0 rgba(155, 92, 255, 0.15);
}

.bottom-tab-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 111, 216, 0.4) 25%,
        rgba(155, 92, 255, 0.5) 50%,
        rgba(70, 225, 255, 0.4) 75%,
        transparent 100%
    );
}

.bottom-tab-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 0 8px;
    max-width: 500px;
    margin: 0 auto;
}

.bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-width: 64px;
    border-radius: 12px;
}

.bottom-tab-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
    transition: all 0.2s ease;
}

.bottom-tab-item span {
    white-space: nowrap;
}

.bottom-tab-item:hover {
    color: rgba(255, 255, 255, 0.85);
}

.bottom-tab-item.active {
    color: var(--accent-primary);
}

.bottom-tab-item.active svg {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 8px rgba(155, 92, 255, 0.5));
}

.bottom-tab-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 10px rgba(155, 92, 255, 0.6);
}

/* Special CTA button in bottom nav */
.bottom-tab-item.cta-tab {
    background: linear-gradient(135deg, rgba(255, 111, 216, 0.15), rgba(155, 92, 255, 0.15));
    border: 1px solid rgba(155, 92, 255, 0.3);
    color: var(--accent-primary);
    padding: 10px 20px;
    border-radius: 16px;
}

.bottom-tab-item.cta-tab svg {
    color: var(--accent-primary);
}

.bottom-tab-item.cta-tab:hover {
    background: linear-gradient(135deg, rgba(255, 111, 216, 0.25), rgba(155, 92, 255, 0.25));
    border-color: rgba(155, 92, 255, 0.5);
}

/* ============================================================================
   RESPONSIVE LAYOUT FIXES - HEADER, SIDEBAR, CONTENT PADDING
   ============================================================================ */

/* Mobile: Show bottom nav, fix header, add padding */
@media (max-width: 767px) {
    /* Show bottom tab bar */
    .bottom-tab-bar {
        display: block;
    }
    
    /* Fixed header on mobile */
    .top-header {
        display: flex;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        z-index: 9998;
        background: rgba(10, 10, 26, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(155, 92, 255, 0.15);
        padding: 0 16px;
        margin: 0;
    }
    
    /* Main content padding to avoid overlap */
    .main-content {
        margin-left: 0;
        padding-top: 64px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0) + 16px) !important;
        min-height: 100vh;
    }
    
    /* All page containers need bottom padding */
    .page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Hero sections need top margin */
    .musicgpt-hero,
    .hero-section,
    .qc-hero,
    .converter-hero,
    .copyright-hero,
    .stem-hero,
    .mastering-hero,
    .mediainfo-hero,
    .bpm-hero,
    .lyrics-hero,
    .cover-art-hero,
    .tiktok-voice-hero,
    .pricing-hero,
    .about-hero,
    .terms-hero {
        padding-top: 16px;
    }
    
    /* Hide sidebar on mobile by default */
    .sidebar {
        transform: translateX(-100%);
        width: 85%;
        max-width: 320px;
        z-index: 99999;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    /* Sidebar overlay */
    .sidebar-overlay {
        z-index: 99998;
    }
    
    .sidebar-overlay.open {
        display: block;
        opacity: 1;
    }
    
    /* Sidebar close button */
    .sidebar-close,
    .sidebar-close-premium {
        display: flex !important;
    }
    
    /* Hide footer on mobile - use bottom nav instead */
    .footer {
        display: none;
    }
    
    /* Cards stack vertically */
    .converter-grid,
    .copyright-grid,
    .copyright-check-grid,
    .stem-grid,
    .mastering-grid,
    .cover-art-grid,
    .mediainfo-grid,
    .bpm-grid,
    .caux-grid,
    .lyrics-grid,
    .two-column-grid,
    .tool-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* How it works sections - single column */
    .how-it-works-grid,
    .features-grid,
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Quick presets - horizontal scroll */
    .quick-presets-row,
    .presets-row,
    .mood-chips,
    .genre-chips {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        gap: 8px;
    }
    
    .quick-presets-row > *,
    .presets-row > *,
    .mood-chips > *,
    .genre-chips > * {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* Container max-width and centering */
    .home-container,
    .qc-container,
    .converter-container,
    .copyright-container,
    .copyright-check-container,
    .stem-container,
    .mastering-container,
    .mediainfo-container,
    .bpm-container,
    .lyrics-container,
    .cover-art-container,
    .tiktok-voice-container,
    .pricing-container,
    .about-container,
    .terms-container,
    .profile-page-container,
    .dashboard-container,
    .music-gen-container,
    .caux-container {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Page titles smaller on mobile */
    .page-title,
    .qc-title,
    .converter-title,
    .copyright-title,
    .stem-title,
    .mastering-title,
    .bpm-title,
    .mediainfo-title,
    .lyrics-title,
    .cover-art-title,
    .tiktok-voice-title,
    .pricing-title,
    .about-title,
    .terms-title,
    .caux-title,
    .copyright-check-title {
        font-size: 1.5rem !important;
    }
    
    /* Cards - no fixed heights */
    .app-card,
    .tool-card,
    .upload-card,
    .result-card,
    .settings-card,
    .option-card {
        min-height: auto;
        height: auto;
        max-height: none;
    }
    
    /* MusicGPT hero adjustments */
    .musicgpt-hero-content {
        padding: 0 8px;
    }
    
    .musicgpt-title {
        font-size: 1.75rem !important;
    }
    
    .musicgpt-prompt-container {
        padding: 0 4px;
    }
    
    /* Mode tabs stack */
    .mode-tabs {
        flex-direction: column;
        gap: 8px;
    }
    
    .mode-tab {
        width: 100%;
        max-width: none;
    }
    
    /* Form controls full width */
    .form-group,
    .input-group,
    .select-group {
        width: 100%;
    }
    
    /* Buttons responsive */
    .primary-btn,
    .secondary-btn,
    .action-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Profile dropdown adjust */
    .profile-dropdown {
        right: 8px;
        left: 8px;
        width: auto;
    }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Show bottom nav on tablet too */
    .bottom-tab-bar {
        display: block;
    }
    
    .top-header {
        display: flex;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 68px;
        z-index: 9998;
    }
    
    .main-content {
        margin-left: 0;
        padding-top: 68px !important;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0) + 16px) !important;
    }
    
    .sidebar {
        transform: translateX(-100%);
        z-index: 99999;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    /* Two columns for grids on tablet */
    .converter-grid,
    .copyright-grid,
    .copyright-check-grid,
    .stem-grid,
    .mastering-grid,
    .cover-art-grid,
    .mediainfo-grid,
    .bpm-grid,
    .caux-grid,
    .lyrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Three columns for features */
    .how-it-works-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    .footer {
        display: none;
    }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    /* Hide bottom nav on desktop */
    .bottom-tab-bar {
        display: none !important;
    }
    
    /* Hide mobile header on desktop - sidebar visible */
    .top-header {
        display: none;
    }
    
    /* Sidebar always visible */
    .sidebar {
        transform: translateX(0);
        position: fixed;
    }
    
    /* Main content with sidebar margin */
    .main-content {
        margin-left: var(--sidebar-width);
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .page {
        padding-bottom: 2rem;
    }
    
    /* Show footer on desktop */
    .footer {
        display: block;
    }
    
    /* Container centering */
    .home-container,
    .qc-container,
    .converter-container,
    .copyright-container,
    .copyright-check-container,
    .stem-container,
    .mastering-container,
    .mediainfo-container,
    .bpm-container,
    .lyrics-container,
    .cover-art-container,
    .tiktok-voice-container,
    .pricing-container,
    .about-container,
    .terms-container,
    .profile-page-container,
    .dashboard-container,
    .music-gen-container,
    .caux-container {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    /* Two column grids */
    .converter-grid,
    .copyright-grid,
    .copyright-check-grid,
    .stem-grid,
    .mastering-grid,
    .cover-art-grid,
    .mediainfo-grid,
    .bpm-grid,
    .caux-grid,
    .lyrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* Three column features */
    .how-it-works-grid,
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Safe area insets for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-tab-bar {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    @media (max-width: 1023px) {
        .main-content,
        .page {
            padding-bottom: calc(72px + env(safe-area-inset-bottom) + 16px);
        }
    }
}

/* ============================================================================
   SIDEBAR DRAWER ANIMATIONS
   ============================================================================ */

@media (max-width: 1023px) {
    .sidebar {
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        visibility: hidden;
    }
    
    .sidebar.open {
        opacity: 1;
        visibility: visible;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5),
                    10px 0 30px rgba(155, 92, 255, 0.15);
    }
    
    .sidebar-overlay {
        transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        visibility: hidden;
    }
    
    .sidebar-overlay.open {
        visibility: visible;
    }
}

/* ============================================================================
   CARD OVERFLOW FIXES
   ============================================================================ */

/* Ensure no content clips on mobile */
.app-card,
.tool-card,
.upload-card,
.result-card,
.settings-card,
.glass-card,
.premium-card,
[class*="-upload-card"],
[class*="-result-card"],
[class*="-options-card"] {
    overflow: visible;
}

/* Cards with scrollable content */
.scrollable-card {
    max-height: 70vh;
    overflow-y: auto;
}

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
}

.main-content,
.page,
[class*="-container"] {
    overflow-x: hidden;
}

/* ============================================================================
   END RESPONSIVE NAVIGATION & LAYOUT
   ============================================================================ */