/* =========================================
   CG HUNTER THEME: MG MOTION CAPSULE (V3.9 - LEFT ALIGN & INTERACTION FIX)
   ========================================= */

:root {
    /* MG Palette: High Saturation, Pop Colors */
    --bg-body: #f4f7f6 !important; /* Clean Motion Grey */
    --bg-card: #ffffff !important;
    --text-main: #2d3436 !important;
    --text-secondary: #636e72 !important;
    
    /* Pop Colors */
    --pop-purple: #6c5ce7 !important;
    --pop-pink: #fd79a8 !important;
    --pop-yellow: #ffeaa7 !important;
    --pop-green: #00b894 !important;
    --pop-blue: #0984e3 !important;
    
    /* Gradients */
    --grad-primary: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%) !important;
    --grad-hot: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%) !important;
    --grad-fresh: linear-gradient(135deg, #55efc4 0%, #00b894 100%) !important;
    
    /* UI Physics */
    --radius-pill: 50px !important;
    --radius-card: 24px !important;
    --shadow-float: 0 10px 30px rgba(108, 92, 231, 0.15) !important;
    --shadow-inner: inset 0 2px 5px rgba(0,0,0,0.03) !important;
    --glass: blur(20px) saturate(180%);
}

[data-theme="dark"] {
    --bg-body: #1e1e2e !important; /* Deep Space */
    --bg-card: #2d3436 !important;
    --text-main: #dfe6e9 !important;
    --text-secondary: #b2bec3 !important;
    --shadow-float: 0 10px 30px rgba(0,0,0,0.4) !important;
}

body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
}

/* =========================================
   1. HEADER & SEARCH (Liquid Glass)
   ========================================= */

.top-header {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: var(--glass) !important;
    -webkit-backdrop-filter: var(--glass) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important;
    height: 80px !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.02) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    
    /* LAYOUT FIX: Left Align Everything */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Start from left */
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .top-header {
    background: rgba(30, 30, 46, 0.6) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* HEADER SLOGAN STYLING */
.header-slogan {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-left: 20px !important;
    border-left: 3px solid var(--pop-purple) !important;
    padding-left: 15px !important;
    height: 40px !important;
    
    /* SPACER: Push the rest a bit, but not too far */
    margin-right: 60px !important; 
    flex-shrink: 0 !important; /* Don't shrink */
}

.slogan-main {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: var(--text-main) !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

.slogan-sub {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-left: 15px !important;
    padding-left: 15px !important;
    border-left: 1px solid rgba(0,0,0,0.1) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.slogan-divider {
    display: none !important;
}

/* Header Right Area - MOVED LEFT (Next to Slogan) */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    height: 100% !important;
    /* No margin-left: auto, so it sits next to slogan */
}

/* Search Bar: Liquid Capsule */
.search-container input {
    background: rgba(255,255,255,0.5) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-pill) !important;
    padding: 12px 24px 12px 50px !important;
    box-shadow: var(--shadow-inner) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    width: 260px !important;
}

.search-container input:focus {
    background: #fff !important;
    width: 320px !important;
    border-color: var(--pop-purple) !important;
    box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15), 0 10px 20px rgba(108, 92, 231, 0.1) !important;
}

/* =========================================
   2. AUTH & BUTTONS (Jelly Capsules)
   ========================================= */

#navAuth {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    background: rgba(255,255,255,0.5) !important;
    padding: 6px 8px 6px 20px !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    
    /* VISIBILITY FIX */
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 100px !important; /* Ensure it has width */
    z-index: 1001 !important;
}

[data-theme="dark"] #navAuth {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

.user-welcome {
    font-weight: 700 !important;
    background: var(--grad-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    display: inline-block !important; /* Ensure rendering */
}

.nav-auth-btn {
    background: var(--bg-body) !important;
    color: var(--text-secondary) !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    white-space: nowrap !important;
}

.nav-auth-btn:hover {
    background: var(--pop-pink) !important;
    color: #fff !important;
    transform: scale(1.05) rotate(2deg) !important;
    box-shadow: 0 5px 15px rgba(253, 121, 168, 0.4) !important;
}

/* =========================================
   3. PAGINATION (Floating Bubbles)
   ========================================= */

.pagination {
    gap: 8px !important;
    padding: 40px 0 !important;
    align-items: center !important;
}

.page-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

.page-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.1) !important;
    color: var(--pop-purple) !important;
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.15) !important;
}

.page-btn.active {
    background: var(--grad-primary) !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(108, 92, 231, 0.4) !important;
    transform: scale(1.15) !important;
}

.prev-btn, .next-btn {
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.2rem !important;
}

.pagination-jump {
    background: var(--bg-card) !important;
    padding: 4px !important;
    border-radius: var(--radius-pill) !important;
    display: flex !important;
    align-items: center !important;
    margin-left: 15px !important;
    box-shadow: var(--shadow-inner) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.pagination-jump input {
    width: 50px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    outline: none !important;
}

.pagination-jump button {
    background: var(--pop-purple) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 6px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.pagination-jump button:hover {
    transform: scale(1.05) !important;
}

/* =========================================
   4. CARDS (MG Pop Style)
   ========================================= */

.card {
    border-radius: var(--radius-card) !important;
    border: none !important;
    background: var(--bg-card) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03) !important;
    overflow: visible !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
}

.card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: var(--shadow-float) !important;
    z-index: 10 !important;
}

.card-img {
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    overflow: hidden !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    margin: 0 !important;
}

.card-img img {
    object-fit: cover !important;
    aspect-ratio: 4/3 !important;
    width: 100% !important;
    display: block !important;
}

.card-cat {
    background: rgba(108, 92, 231, 0.1) !important;
    color: var(--pop-purple) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.card-fav-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.card-fav-btn:hover {
    transform: scale(1.2) !important;
}

.card-fav-btn.active {
    background: var(--pop-pink) !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(253, 121, 168, 0.5) !important;
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* =========================================
   5. HERO & BUTTONS (Liquid Gradients)
   ========================================= */

#hero-section {
    position: relative !important;
    /* SCROLL FIX: Force exact viewport height */
    height: 100vh !important; 
    min-height: unset !important;
    overflow: hidden !important; /* No scrollbars */
    box-sizing: border-box !important; /* Include padding in height */
    
    padding: 80px 0 0 0 !important; /* Top padding for header, NO bottom padding */
    
    /* FLEX LAYOUT FIX FOR FOOTER */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Push footer to bottom */
    align-items: center !important;
    
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    text-align: center !important;
    background: radial-gradient(circle at 20% 20%, rgba(108, 92, 231, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(253, 121, 168, 0.05) 0%, transparent 40%) !important;
}

.hero-content {
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important; /* Ensure centering */
    flex-grow: 1 !important; /* Take available space */
    justify-content: center !important; /* Center vertically in available space */
}

/* TYPOGRAPHY OVERHAUL */
.hero-title {
    font-size: 2.5rem !important; /* Smaller top line */
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    line-height: 1.2 !important;
    margin-bottom: 30px !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
}

.highlight-text {
    display: block !important; /* Force new line */
    font-size: 6rem !important; /* Massive bottom line */
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    margin-top: 10px !important;
    
    background: var(--grad-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    position: relative;
    z-index: 1;
    
    /* Add a subtle drop shadow to text */
    filter: drop-shadow(0 10px 20px rgba(108, 92, 231, 0.2));
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) skewX(-10deg);
    width: 110%;
    height: 20px;
    background: rgba(108, 92, 231, 0.1);
    z-index: -1;
    border-radius: 10px;
}

.guide-entry-btn {
    background: var(--grad-primary) !important;
    border-radius: var(--radius-pill) !important;
    padding: 16px 40px !important;
    font-size: 1.1rem !important;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 10px !important;
}

.guide-entry-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s;
}

.guide-entry-btn:hover::before {
    left: 100%;
}

/* FOOTER FIX: Relative positioning in flex container */
.hero-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    text-align: center !important;
    padding: 20px 0 !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    margin-top: auto !important; /* Push to bottom if flex space allows */
}

/* =========================================
   6. TICKET & MODAL (LUMINOUS GLASS)
   ========================================= */

/* OVERRIDE GLOBAL OVERLAY TO BE LIGHT */
.modal-wrap {
    background-color: rgba(244, 247, 246, 0.6) !important; /* Light Gray Overlay */
    backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] .modal-wrap {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.modal-box {
    border-radius: 32px !important;
    background: rgba(255,255,255,0.95) !important; /* Brighter */
    backdrop-filter: blur(30px) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.15) !important; /* Softer Shadow */
}

[data-theme="dark"] .modal-box {
    background: rgba(30, 30, 46, 0.9) !important;
}

/* MODAL IMAGE AREA - The Container with Blurred Background */
.modal-image-area {
    position: relative !important;
    overflow: hidden !important; /* Clip the blur */
    border-radius: 32px 0 0 32px !important; /* Match modal radius */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f2f5 !important; /* Fallback */
    min-height: 450px !important; /* Ensure tall enough canvas */
    padding: 0 !important; /* No padding, let flex center */
}

/* The Blurred Background (formerly glow) */
/* This element is populated with the image URL by JS */
.modal-img-glow {
    display: block !important;
    position: absolute !important;
    top: -20% !important; left: -20% !important;
    width: 140% !important; height: 140% !important; /* Oversize to hide blur edges */
    background-size: cover !important;
    background-position: center !important;
    
    /* BLUR UPDATE: High blur + Saturation for Monochrome Wash */
    filter: blur(80px) saturate(2) brightness(1.1) !important;
    
    z-index: 1 !important;
    opacity: 0.9 !important;
}

/* The Floating Image - TIGHT FIT & LUMINOUS GLASS */
#m-img {
    position: relative !important;
    z-index: 10 !important;
    
    /* CRITICAL: Auto width/height to hug content */
    width: auto !important;
    height: auto !important;
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important;
    
    /* The Suspension - Glassy & Luminous */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* Subtle rim */
    border-radius: 20px !important; /* Smoother corners */
    
    /* Multi-layer Shadow for "Airy" Suspension */
    box-shadow: 
        /* 1. Deep Ambient Shadow (The Lift) */
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        /* 2. Soft Glow around edges */
        0 0 20px rgba(255, 255, 255, 0.15),
        /* 3. Inner Top Highlight (Glass reflection) */
        inset 0 1px 0 rgba(255, 255, 255, 0.4)
        !important;
    
    transform: translateY(0) !important; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#m-img:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow: 
        0 35px 70px -12px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5)
        !important;
}

/* TICKET INTERACTION FIX */
.ticket-card {
    background: var(--bg-body) !important;
    border: 2px dashed rgba(0,0,0,0.1) !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.ticket-card.active {
    background: #fff !important;
    border-style: solid !important;
    border-color: var(--pop-purple) !important;
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.2) !important;
    transform: scale(1.02) !important;
}

.ticket-header {
    cursor: pointer !important; /* Ensure clickable */
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* FIX: Override max-height constraint so JS can animate height */
.ticket-body {
    max-height: none !important; 
    overflow: hidden !important;
    transition: height 0.3s ease !important;
}

.ticket-icon-box {
    background: var(--grad-primary) !important;
    border-radius: 16px !important;
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3) !important;
}

.qr-panel {
    background: linear-gradient(180deg, #fff 0%, var(--bg-body) 100%) !important;
    padding: 40px !important;
}

.qr-code-img {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 4px solid #fff !important;
}

/* =========================================
   7. SIDEBAR (Floating Menu)
   ========================================= */

.sidebar {
    background: var(--bg-card) !important;
    border: none !important;
}

.menu-item {
    margin: 5px 15px !important;
    border-radius: 12px !important;
    border: none !important;
    transition: all 0.3s !important;
}

.menu-item:hover {
    background: rgba(108, 92, 231, 0.05) !important;
    transform: translateX(5px) !important;
}

.menu-item.active {
    background: var(--grad-primary) !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3) !important;
    transform: translateX(5px) scale(1.02) !important;
}

.menu-item.active i {
    color: #fff !important;
}

/* =========================================
   8. MAIN CONTAINER ADJUSTMENTS
   ========================================= */
.main-container {
    /* Fix for "Too much blank space at top" */
    /* Header is 80px. We want minimal gap. */
    padding-top: 85px !important; 
    margin-top: 0 !important;
    min-height: 100vh !important;
}

/* Back button positioning */
#back-home-guide {
    margin-bottom: 10px !important;
    padding-left: 10px !important;
}


/* =========================================
   10. QR CODE & TICKET FIXES (V3.11)
   ========================================= */

/* Ensure ticket is closed by default */
.ticket-body {
    height: 0 !important; /* Start closed */
    max-height: none !important; /* Allow growth when height is set */
    overflow: hidden !important;
    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Hide the old raw ID display if we are using the new layout */
#wechat-id-display {
    display: none !important;
}

/* New QR Info Box Styling */
.qr-info-box {
    text-align: center !important;
    margin-top: 20px !important;
    padding: 0 10px !important;
}

.qr-text-primary {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    margin-bottom: 5px !important;
}

.qr-wechat-id {
    font-family: 'Consolas', monospace !important;
    background: rgba(108, 92, 231, 0.1) !important;
    color: var(--pop-purple) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    user-select: all !important; /* Easy copy */
}

.qr-text-sub {
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    opacity: 0.8 !important;
    margin-bottom: 15px !important;
}

.qr-divider {
    height: 1px !important;
    background: rgba(0,0,0,0.05) !important;
    margin: 15px auto !important;
    width: 80% !important;
}

.qr-text-desc {
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    margin: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   11. MOBILE RESPONSIVENESS (V3.12)
   ========================================= */

@media (max-width: 768px) {
    /* Header Adjustments */
    .top-header {
        padding: 0 15px !important;
        height: 60px !important;
        justify-content: space-between !important; /* Revert to space-between for mobile */
    }
    
    .header-slogan {
        display: none !important; /* Hide slogan on mobile */
    }
    
    .header-right {
        gap: 10px !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
    
    .search-container input {
        width: 140px !important; /* Smaller search */
        padding: 8px 15px 8px 35px !important;
    }
    .search-container input:focus {
        width: 180px !important;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 1.5rem !important;
    }
    .highlight-text {
        font-size: 3rem !important;
    }
    
    /* Modal Mobile Layout */
    .modal-box {
        flex-direction: column !important;
        width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .modal-image-area {
        width: 100% !important;
        min-height: 250px !important;
        border-radius: 32px 32px 0 0 !important;
    }
    
    .modal-content-area {
        width: 100% !important;
        padding: 20px !important;
    }
    
    .modal-sidebar {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,0.05) !important;
        padding-top: 20px !important;
        margin-top: 20px !important;
    }
    
    /* Grid Adjustments */
    .grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
    }
    
    .main-container {
        padding-top: 80px !important;
    }
}

/* =========================================
   12. FONT & DARK MODE OPTIMIZATIONS (V3.13)
   ========================================= */

/* 1. Font Optimization */
body {
    /* More robust font stack: System fonts first, then web fonts */
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 2. Dark Mode Ticket Fixes */
[data-theme="dark"] .ticket-card.active {
    background: #2d3436 !important; /* Dark background for active ticket */
    border-color: var(--pop-purple) !important;
}

[data-theme="dark"] .qr-panel {
    /* Dark gradient: Dark Grey to Deep Space */
    background: linear-gradient(180deg, #2d3436 0%, #1e1e2e 100%) !important;
}

[data-theme="dark"] .qr-code-img {
    border-color: rgba(255,255,255,0.1) !important; /* Dim border for QR code */
    opacity: 0.9 !important; /* Slightly dim the QR code itself to reduce glare */
}

[data-theme="dark"] .ticket-header:hover {
    background: rgba(255,255,255,0.05) !important; /* Subtle hover effect */
}

/* =========================================
   13. CARD TITLE & FONT WEIGHT FIXES (V3.14)
   ========================================= */

/* Fix Card Title Overflow & Weight */
.card-title {
    font-weight: 700 !important; /* Make it thick as requested */
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    margin: 8px 0 !important;
    
    /* Multi-line truncation */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Limit to 2 lines */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    /* Ensure it doesn't break layout */
    height: 2.8em !important; /* Fixed height for alignment (2 lines * 1.4) */
}

/* Global Font Weight Bump */
body {
    font-weight: 500 !important; /* Slightly thicker base text */
}

h1, h2, h3, h4, h5, h6, .hero-title, .highlight-text {
    font-weight: 800 !important; /* Extra bold headers */
}

/* Dark Mode Text Contrast Boost */
[data-theme="dark"] .card-title {
    color: #fff !important; /* Pure white for better contrast */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; /* Subtle shadow to pop */
}

[data-theme="dark"] body {
    color: #e0e0e0 !important; /* Lighter grey for body text */
}

/* =========================================
   14. CARD LAYOUT & TITLE FIXES (V3.15)
   ========================================= */

/* 1. Title: Remove Truncation & Fix Overflow */
.card-title {
    /* Remove the previous truncation limits */
    height: auto !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    white-space: normal !important;
    
    /* Fix "Text went out" - Ensure wrapping */
    word-wrap: break-word !important;
    word-break: break-word !important;
    
    /* "Move right a bit" - Add slight padding/margin */
    margin-left: 4px !important;
    margin-right: 4px !important;
}

/* 2. Date: Remove Gap */
.card-date {
    /* Remove "margin-top: auto" which pushed it to bottom */
    margin-top: 12px !important; 
    
    /* Align with the moved title */
    margin-left: 4px !important;
    
    /* Ensure it's visible */
    display: block !important;
}

/* 3. Card Content: Adjust Padding */
.card-content {
    /* Increase padding slightly to prevent edge touching */
    padding: 20px !important;
    
    /* Let height adapt naturally */
    justify-content: flex-start !important;
}

/* =========================================
   15. CARD DATE & PADDING FIXES (V3.16)
   ========================================= */

/* 1. Fix Card Info Padding */
/* Previously targeted .card-content which was wrong */
.card-info {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

/* 2. Fix Date Position */
/* Now targeting the new .card-date class added in JS */
.card-date {
    font-size: 0.8rem !important;
    color: #999 !important;
    font-weight: 500 !important;
    
    /* Position Fixes */
    margin-top: 12px !important;
    margin-left: 4px !important;
    display: block !important;
    
    /* Ensure it doesn't overflow */
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* =========================================
   16. FINAL AESTHETIC FIXES (V3.17)
   ========================================= */

/* 1. BIGGER COVER IMAGES (4:3 Aspect Ratio) */
.card-img {
    aspect-ratio: 4/3 !important; /* Taller, bigger images */
    height: auto !important;
    min-height: 180px !important; /* Ensure substantial size */
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

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

/* 2. COMPACT CARD INFO & WHITESPACE FIX */
.card-info {
    padding: 16px !important; /* Balanced padding */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* Tighter spacing */
    justify-content: flex-start !important;
    background: var(--bg-card) !important;
}

/* 3. CARD HEIGHT & LAYOUT */
/* Use align-self: start to prevent cards from stretching and creating ugly whitespace */
.card {
    height: auto !important; 
    align-self: start !important; /* This makes cards hug their content */
    display: flex !important;
    flex-direction: column !important;
}

/* 4. TYPOGRAPHY TWEAKS */
.card-title {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.card-date {
    margin-top: 4px !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
}

/* =========================================
   17. REVERT & FIX LAYOUT (V3.18)
   ========================================= */

/* 1. Restore 16:9 Images (Full Visibility) */
.card-img {
    aspect-ratio: 16/9 !important;
    min-height: unset !important;
    height: auto !important;
    border-bottom: none !important;
}

/* 2. Restore Equal Height Cards (Neat Grid) */
.card {
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 3. Optimize Spacing (Compact but Safe) */
.card-info {
    padding: 15px !important; /* Standard padding to prevent overflow */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Content at top */
    gap: 6px !important; /* Consistent small gap between Title and Date */
    background: var(--bg-card) !important;
    flex-grow: 1 !important; /* Ensure it fills the card */
}

/* 4. Title & Date Alignment */
.card-title {
    margin: 0 !important; /* Remove extra margins, let gap handle it */
    line-height: 1.4 !important;
    font-size: 1.05rem !important;
}

.card-date {
    margin: 0 !important; /* Reset margins */
    font-size: 0.85rem !important;
    color: #999 !important;
    
    /* Safety against overflow */
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

/* =========================================
   18. FINAL FIX: AUTO HEIGHT & IMAGE RESET (V3.19)
   ========================================= */

/* 1. Remove Fixed Height (Kills White Space) */
.card {
    height: auto !important; /* Let content dictate height */
    align-self: start !important; /* Prevent stretching in grid */
    min-height: unset !important;
}

/* 2. Reset Image to Standard 16:9 */
.card-img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    border-bottom: none !important;
}

.card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; /* Focus on top (heads) */
}

/* 3. Compact Info Area */
.card-info {
    padding: 12px 15px !important; /* Slightly tighter vertical padding */
    flex-grow: 0 !important; /* Do not stretch */
    gap: 5px !important;
}

/* 4. Date & Title */
.card-title {
    margin: 0 !important;
    line-height: 1.4 !important;
}

.card-date {
    margin-top: 4px !important;
    display: block !important;
}

/* =========================================
   19. LUMINOUS FLOW: GLOBAL ATMOSPHERE (V4.0)
   ========================================= */

/* 1. Global Background & Noise Texture */
body {
    /* Base Gradient: Aurora Light */
    background: 
        radial-gradient(circle at 0% 0%, rgba(108, 92, 231, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(253, 121, 168, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0, 184, 148, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(9, 132, 227, 0.05) 0%, transparent 50%),
        #f8f9fa !important; /* Fallback light grey */
        
    background-attachment: fixed !important; /* Parallax feel */
    position: relative !important;
}

/* Noise Overlay for Texture */
body::before {
    content: "";
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 0.4 !important;
}

/* 2. Dark Mode: Deep Sea Glow */
[data-theme="dark"] body {
    /* Deep Space Base */
    background: 
        radial-gradient(circle at 20% 20%, rgba(108, 92, 231, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(253, 121, 168, 0.1) 0%, transparent 40%),
        #0f0f12 !important; /* Deepest dark blue-grey */
}

[data-theme="dark"] body::before {
    opacity: 0.05 !important; /* Subtler noise in dark mode */
}

/* 3. Mobile Optimization for Background */
@media (max-width: 768px) {
    body {
        /* Simplify gradient for performance on mobile */
        background: 
            radial-gradient(circle at 0% 0%, rgba(108, 92, 231, 0.1) 0%, transparent 60%),
            #f8f9fa !important;
        background-attachment: scroll !important; /* Fix mobile scroll jitter */
    }
    
    [data-theme="dark"] body {
        background: 
            radial-gradient(circle at 50% 0%, rgba(108, 92, 231, 0.2) 0%, transparent 70%),
            #0f0f12 !important;
    }
}

/* =========================================
   20. LUMINOUS FLOW: CARD EVOLUTION (V4.1)
   ========================================= */

/* 1. Glassmorphism Base */
.card {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px -1px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important; /* Inner glow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Dark Mode Glass */
[data-theme="dark"] .card {
    background: rgba(30, 30, 46, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Spotlight Effect (Mouse Tracking) */
/* This relies on JS setting --mouse-x and --mouse-y */
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.4), 
        transparent 40%
    );
    opacity: 0;
    z-index: 2;
    transition: opacity 0.5s;
    pointer-events: none;
}

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

[data-theme="dark"] .card::before {
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.06), 
        transparent 40%
    );
}

/* 3. 3D Parallax Tilt */
/* This relies on JS setting --rotate-x and --rotate-y */
.card:hover {
    transform: 
        perspective(1000px) 
        rotateX(var(--rotate-x, 0deg)) 
        rotateY(var(--rotate-y, 0deg)) 
        scale(1.02) 
        translateY(-5px) !important;
    box-shadow: 
        0 20px 40px -5px rgba(0, 0, 0, 0.1),
        0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
    z-index: 10 !important;
}

[data-theme="dark"] .card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 4. Image Hover Zoom */
.card-img img {
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.card:hover .card-img img {
    transform: scale(1.1) !important;
}

/* 5. Mobile Optimization for Cards */
@media (max-width: 768px) {
    .card {
        /* Disable heavy effects on mobile */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #fff !important;
        transform: none !important; /* No tilt */
    }
    
    [data-theme="dark"] .card {
        background: #1e1e2e !important;
    }
    
    .card:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    
    .card::before {
        display: none !important; /* No spotlight on touch */
    }
}

/* =========================================
   21. LUMINOUS FLOW: NAV & HERO (V4.2)
   ========================================= */

/* 1. Glassmorphic Header */
.top-header {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    height: 70px !important; /* Taller header */
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

[data-theme="dark"] .top-header {
    background: rgba(20, 20, 30, 0.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 2. Glassmorphic Sidebar */
.sidebar {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="dark"] .sidebar {
    background: rgba(20, 20, 30, 0.6) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Sidebar Menu Items */
.menu-item {
    border-radius: 12px !important;
    margin: 4px 10px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    transform: translateX(5px) !important;
}

.menu-item.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4) !important;
}

[data-theme="dark"] .menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 3. Hero Typography & Search */
.hero-title {
    font-size: 4rem !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, var(--text-main) 30%, var(--primary-color)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.highlight-text {
    background: linear-gradient(120deg, #00f260, #0575e6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    position: relative !important;
}

/* Hero Search Box Modernization */
.hero-search-box {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    padding: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    max-width: 600px !important;
    margin: 40px auto 0 !important;
}

[data-theme="dark"] .hero-search-box {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.hero-input-wrapper input {
    background: transparent !important;
    border: none !important;
    color: var(--text-main) !important;
    font-size: 1.1rem !important;
}

#hero-search-btn {
    border-radius: 12px !important;
    background: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3) !important;
    transition: transform 0.2s !important;
}

#hero-search-btn:hover {
    transform: scale(1.05) !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .top-header {
        height: 60px !important;
    }
    
    .sidebar {
        /* Sidebar on mobile is usually hidden/overlay, keep glass effect */
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    [data-theme="dark"] .sidebar {
        background: rgba(20, 20, 30, 0.95) !important;
    }
}

/* =========================================
   22. LAYOUT FIXES (CRITICAL)
   ========================================= */

/* 1. Restore Sidebar Z-Index Dominance */
.sidebar {
    z-index: 1100 !important; /* Must be higher than header (1000) */
}

/* 2. Fix Desktop Header Positioning */
@media (min-width: 1025px) {
    .top-header {
        position: fixed !important; /* Revert sticky to fixed */
        left: 260px !important;
        width: calc(100% - 260px) !important;
        top: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Ensure main content is pushed down */
    .main-container {
        padding-top: 90px !important;
    }
}

/* 3. Mobile Header Fix */
@media (max-width: 1024px) {
    .top-header {
        position: fixed !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    .sidebar {
        z-index: 2000 !important; /* Even higher on mobile to overlay header */
    }
}

/* =========================================
   23. INTERACTION & FEEDBACK UPGRADE (V5.0)
   ========================================= */

/* 1. Global Minimal Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 2. Heartbeat Animation */
@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

.card-fav-btn.active i {
    animation: heartBeat 1.3s ease-in-out;
    color: #ff7675;
}

/* Particle explosion effect (Ripple) */
.card-fav-btn.active::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    background: rgba(255, 118, 117, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    to {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* 3. Glassmorphic Toast Notification */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: auto;
    min-width: 200px;
    justify-content: center;
}

[data-theme="dark"] .toast {
    background: rgba(30, 30, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.toast.success i { color: #00b894; }
.toast.error i { color: #ff7675; }
.toast.info i { color: #0984e3; }

@keyframes toastSlideIn {
    from { transform: translateY(-100%) scale(0.8); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes toastFadeOut {
    to { transform: translateY(-20px); opacity: 0; }
}

/* =========================================
   24. FINAL POLISH: ETHER FIELD & SILKY REVEAL (V6.0)
   ========================================= */

/* 1. Ether Field (Global Mouse Interaction) */
#ether-field {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1; /* Behind everything */
    opacity: 1;
    transition: opacity 0.5s;
    /* Light Mode: Fresh, subtle gradient mix */
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(108, 92, 231, 0.08), 
        rgba(0, 184, 148, 0.05) 40%,
        transparent 70%
    );
}

[data-theme="dark"] #ether-field {
    /* Dark Mode: Deep cosmic glow */
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(108, 92, 231, 0.15), 
        rgba(225, 112, 85, 0.05) 40%,
        transparent 70%
    );
}

/* 2. Silky Reveal (Image Loading) */
.card-img img {
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.08);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                filter 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) !important;
    will-change: opacity, filter, transform;
}

.card-img img.loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* 3. Liquid Skeleton (Shimmer Effect) */
.skeleton {
    background: #f1f2f6 !important; /* Light mode base */
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .skeleton {
    background: #2d3436 !important; /* Dark mode base */
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.5) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

[data-theme="dark"] .skeleton::after {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0)
    );
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* 4. Light Mode Refinements */
/* Make cards pop more in light mode */
body:not([data-theme="dark"]) .card {
    box-shadow: 
        0 10px 20px -5px rgba(0, 0, 0, 0.04),
        0 4px 6px -2px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.85) !important;
}

body:not([data-theme="dark"]) .card:hover {
    box-shadow: 
        0 20px 40px -5px rgba(108, 92, 231, 0.15),
        0 10px 20px -5px rgba(0, 0, 0, 0.04) !important;
}
/* --- Utility: Back to Top (Magnetic Glass) --- */
#backToTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    opacity: 0; 
    transform: translateY(20px);
    pointer-events: none;
}

#backToTop.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

#backToTop:hover {
    background: #fff;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 15px 45px 0 rgba(108, 92, 231, 0.25);
    border-color: var(--pop-purple);
}

#backToTop i {
    color: var(--text-main);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

#backToTop:hover i {
    transform: translateY(-3px);
    color: var(--pop-purple);
}

/* --- Utility: Loader Cube (Ether Spin) --- */
#loading-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-body);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-cube {
    width: 60px;
    height: 60px;
    background: var(--grad-primary);
    border-radius: 12px;
    animation: etherSpin 1.5s infinite ease-in-out;
    box-shadow: 0 0 30px rgba(108, 92, 231, 0.4);
}

@keyframes etherSpin {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        border-radius: 50%;
        background: var(--grad-hot);
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        border-radius: 12px;
        background: var(--grad-primary);
    }
}
/* --- Utility: Theme Toggle (Header) --- */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-main);
    margin-left: 15px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 0 15px rgba(255, 234, 167, 0.4);
}

[data-theme="dark"] .theme-toggle:hover {
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.4);
}

.theme-toggle i {
    font-size: 1.1rem;
}
/* =========================================
   25. FIXES: SIDEBAR & SEARCH (V6.1)
   ========================================= */

/* 1. Fix Sidebar Active State (Light Mode Visibility) */
/* Use the defined --grad-primary instead of potentially missing variables */
.menu-item.active {
    background: var(--grad-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4) !important; /* Fixed shadow color */
}

/* Ensure icon is also white */
.menu-item.active i {
    color: #fff !important;
}

/* 2. Fix Search Input (Dark Mode Visibility) */
[data-theme="dark"] .hero-input-wrapper input {
    color: #fff !important; /* Pure white text */
}

/* Fix Placeholder in Dark Mode */
[data-theme="dark"] .hero-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important; /* Brighter placeholder */
    opacity: 1 !important; /* Force opacity */
}

/* Fix Search Icon in Dark Mode */
[data-theme="dark"] .hero-search-icon {
    color: rgba(255, 255, 255, 0.7) !important;
}
/* =========================================
   26. FIXES: DARK MODE SEARCH BOX (V6.2)
   ========================================= */

/* Better Color Coordination for Dark Mode Search */
[data-theme="dark"] .hero-search-box {
    /* Replace flat black with Deep Cosmic Glass */
    background: rgba(30, 30, 50, 0.4) !important; 
    
    /* Enhanced Blur */
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    
    /* Subtle Purple/Blue Border to match theme */
    border: 1px solid rgba(108, 92, 231, 0.3) !important;
    
    /* Deep Shadow + Inner Glow */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    
    transition: all 0.3s ease !important;
}

/* Hover Effect */
[data-theme="dark"] .hero-search-box:hover {
    background: rgba(40, 40, 60, 0.6) !important;
    border-color: rgba(108, 92, 231, 0.6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(108, 92, 231, 0.15) !important;
    transform: translateY(-2px);
}

/* Input Text Color Adjustment (Reinforce) */
[data-theme="dark"] .hero-input-wrapper input {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(108, 92, 231, 0.3); /* Subtle text glow */
}
/* =========================================
   27. FIXES: HEADER SEARCH DARK MODE (V6.3)
   ========================================= */

/* Dark Mode Header Search Input */
[data-theme="dark"] .search-container input {
    /* Deep Blue/Purple Glass Background */
    background: rgba(30, 30, 50, 0.6) !important; 
    
    /* Subtle Purple Border */
    border: 1px solid rgba(108, 92, 231, 0.3) !important; 
    
    /* White Text */
    color: #ffffff !important; 
    
    /* Inner Shadow for depth */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* Placeholder Text */
[data-theme="dark"] .search-container input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Focus State */
[data-theme="dark"] .search-container input:focus {
    background: rgba(40, 40, 60, 0.9) !important;
    border-color: var(--pop-purple) !important;
    box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.25) !important;
}

/* Search Icon */
[data-theme="dark"] .search-container i {
    color: rgba(255, 255, 255, 0.8) !important;
    z-index: 2; /* Ensure it's above input background if needed */
}
/* =========================================
   28. BRAND UPGRADE: LIQUID GRADIENT LOGO (V7.0)
   ========================================= */

/* 1. Liquid Gradient Text for Sidebar Logo */
.sidebar-logo {
    font-family: 'Noto Sans SC', sans-serif !important;
    font-weight: 900 !important; /* Extra Bold */
    font-size: 1.8rem !important;
    letter-spacing: 1px !important;
    
    /* Liquid Gradient Background */
    background: linear-gradient(
        135deg, 
        #6c5ce7 0%, 
        #a29bfe 25%, 
        #fd79a8 50%, 
        #0984e3 75%, 
        #6c5ce7 100%
    ) !important;
    background-size: 200% auto !important;
    
    /* Clip Background to Text */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* Subtle Animation */
    animation: liquidFlow 5s linear infinite !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 80px !important; /* Slightly taller for presence */
    cursor: pointer !important;
    transition: transform 0.3s ease !important;
}

.sidebar-logo:hover {
    transform: scale(1.05) !important;
}

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

/* 2. Footer Cleanup (Hide Redundant Footers) */
/* Hide Hero Footer */
.hero-footer {
    display: none !important;
}

/* Hide Main Grid Footer (Keep Sidebar Footer only) */
.main-container .site-footer {
    display: none !important;
}

/* Ensure Sidebar Footer is visible and styled */
.sidebar-footer {
    display: block !important;
    padding: 20px !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    margin-top: auto !important; /* Push to bottom */
}

[data-theme="dark"] .sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* =========================================
   29. HERO LAYOUT & SPACING FIX (V7.1)
   ========================================= */

/* 1. Fix Tag Spacing */
.hero-tags {
    margin-top: 35px !important; /* Increase space from search box */
    margin-bottom: 10px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.hero-tag {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.hero-tag:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3) !important;
}

[data-theme="dark"] .hero-tag {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 2. Fix Visual Centering (Desktop Only) */
@media (min-width: 1025px) {
    #hero-section {
        /* Add padding-right equal to sidebar width (260px) to center content in viewport */
        padding-right: 260px !important;
    }
}

/* 3. Mobile Safety */
@media (max-width: 1024px) {
    #hero-section {
        padding-right: 0 !important;
    }
    
    .hero-tags {
        margin-top: 25px !important;
    }
}

/* =========================================
   30. FINAL POLISH: HEADER & SIDEBAR (V7.2)
   ========================================= */

/* 1. Fix Sidebar Jitter (Stability) */
.sidebar-logo:hover {
    transform: none !important; /* Remove scale effect to prevent layout shift */
    /* Keep the color animation, just stop the movement */
}

/* 2. Top Header Layout Optimization */
.top-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 40px !important; /* More breathing room */
}

/* 3. Slogan Styling (Left Side) */
.header-slogan {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    color: var(--text-main) !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
}

.slogan-main {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

.slogan-divider {
    width: 2px !important;
    height: 18px !important;
    background: var(--primary-color) !important;
    opacity: 0.6 !important;
}

.slogan-sub {
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    opacity: 0.7 !important;
    white-space: nowrap !important;
}

[data-theme="dark"] .header-slogan {
    color: #fff !important;
}

/* 4. Header Right Section (Search + Auth) */
/* Use Grid to distribute space intelligently */
.header-right {
    flex-grow: 1 !important;
    display: grid !important;
    /* Search takes remaining space, Theme & Auth take auto width */
    grid-template-columns: 1fr auto auto !important; 
    gap: 25px !important;
    align-items: center !important;
    margin-left: 60px !important; /* Distance from slogan */
}

/* 5. Search Container Expansion */
.search-container {
    width: 100% !important;
    max-width: 600px !important; /* Limit max width for aesthetics */
    justify-self: start !important; /* Align to left of its grid cell */
}

.search-container input {
    width: 100% !important; /* Fill the container */
    min-width: 300px !important;
    transition: all 0.3s ease !important;
}

.search-container input:focus {
    box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15) !important;
}

/* 6. Mobile Adaptation */
@media (max-width: 1024px) {
    .top-header {
        padding: 0 20px !important;
    }
    
    .header-slogan {
        display: none !important; /* Hide slogan on mobile to save space */
    }
    
    .header-right {
        margin-left: 0 !important;
        grid-template-columns: 1fr auto !important; /* Search + Theme (Auth usually in menu) */
        gap: 10px !important;
    }
    
    .search-container {
        max-width: none !important;
    }
    
    .search-container input {
        min-width: unset !important;
    }
}

/* =========================================
   31. MOBILE OPTIMIZATION OVERHAUL (V8.0)
   ========================================= */

/* 1. Mobile Header Cleanup */
@media (max-width: 1024px) {
    /* Hide Desktop Auth in Header to prevent overlap */
    #navAuth {
        display: none !important;
    }
    
    /* Adjust Header Padding */
    .top-header {
        padding: 0 15px !important;
        height: 60px !important;
    }
    
    /* Search Bar Optimization */
    .header-right {
        gap: 10px !important;
        width: 100% !important;
    }
    
    .search-container {
        width: 100% !important;
    }
    
    .search-container input {
        min-width: unset !important;
        width: 100% !important;
        font-size: 0.9rem !important;
    }
}

/* 2. Hero Section Mobile Fixes */
@media (max-width: 768px) {
    /* Fix Title Size */
    .hero-title {
        font-size: 2.2rem !important;
        margin-bottom: 15px !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        padding: 0 20px !important;
    }
    
    /* Fix Hero Buttons Layout */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        padding: 0 30px !important;
        margin-top: 30px !important;
    }
    
    .guide-entry-btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 0 !important; /* Reset margins */
    }
    
    /* Fix Tags Wrapping */
    .hero-tags {
        padding: 0 10px !important;
        gap: 10px !important;
    }
}

/* 3. Sidebar Mobile Login Button */
.mobile-auth-btn {
    display: none !important;
}

@media (max-width: 1024px) {
    .mobile-auth-btn {
        display: flex !important;
        margin-top: 20px !important;
        background: var(--primary-color) !important;
        color: #fff !important;
        justify-content: center !important;
    }
    
    .mobile-auth-btn i {
        color: #fff !important;
    }
}

/* 4. Back to Top Button Mobile Fix */
@media (max-width: 768px) {
    #backToTop {
        bottom: 20px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
        /* Ensure solid background to prevent weird blending */
        background: #fff !important; 
        backdrop-filter: none !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }
    
    [data-theme="dark"] #backToTop {
        background: #2d3436 !important;
    }
}

/* 5. Disable Heavy Effects on Mobile */
@media (max-width: 1024px) {
    #ether-field {
        display: none !important;
    }
    
    .card::before {
        display: none !important; /* No spotlight */
    }
    
    .card {
        transform: none !important; /* No tilt */
        transition: none !important;
    }
}

/* 6. Extract Button Style (Class-based) */
.extract-btn {
    background: linear-gradient(45deg, #00ff41, #008f11) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.4) !important;
}

.extract-btn:hover {
    box-shadow: 0 0 25px rgba(0, 255, 65, 0.6) !important;
}