/* ================================
   DARK-MODE.CSS - Separate Dark Mode Styles
   ================================ */

/* ================================
   DARK MODE VARIABLES
   ================================ */
[data-theme="dark"] {
    /* Primary gradient - dark grey with purple accent */
    --primary-gradient: 
        radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #1a1d24 0%, #2d3039 100%);
    
    /* Home page background - dark grey with subtle purple */
    --bg-home-page:
        radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(167, 139, 250, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #2a2d35 0%, #1f2229 100%);
    
    /* Color gradients - keep vibrant but darker base */
    --purple-gradient: 
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);

    --orange-gradient: 
        radial-gradient(circle at 25% 75%, rgba(249, 115, 22, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(234, 88, 12, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);

    --green-gradient: 
        radial-gradient(circle at 25% 75%, rgba(16, 185, 129, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(5, 150, 105, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);

    --pink-gradient: 
        radial-gradient(circle at 25% 75%, rgba(236, 72, 153, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(219, 39, 119, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);

    --blue-gradient: 
        radial-gradient(circle at 25% 75%, rgba(59, 130, 246, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 75% 25%, rgba(37, 99, 235, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);

    --yellow-gradient:
        radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.5) 0%, transparent 50%),
        rgba(10, 10, 12, 0.95);
    
    /* Background colors - true black for cards */
    --bg-white: rgba(10, 10, 12, 0.98);
    --bg-home: #1f2229;
    --bg-card-home: linear-gradient(180deg, rgba(10, 10, 12, 0.98) 0%, rgba(15, 15, 18, 0.98) 100%);
    --bg-recent-finds: linear-gradient(135deg, rgba(10, 10, 12, 0.98) 0%, rgba(15, 15, 18, 0.98) 100%);
    --bg-section: rgba(15, 15, 18, 0.9);
    --bg-modal: rgba(0, 0, 0, 0.9);
    --bg-overlay: rgba(0, 0, 0, 0.95);
    --bg-onboarding: rgba(0, 0, 0, 0.95);
    --bg-purple: rgba(139, 92, 246, 0.12);
    --bg-orange: rgba(249, 115, 22, 0.12);
    --bg-glass: rgba(255, 255, 255, 0.03);
    
    /* Text colors - white for contrast on black */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-white: rgba(255, 255, 255, 0.95);
    --text-purple: rgba(189, 165, 255, 1);
    
    /* Borders & dividers */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-purple: rgba(139, 92, 246, 0.5);
    --border-orange: rgba(249, 115, 22, 0.5);
    --border-recent-finds: rgba(139, 92, 246, 0.15);
    --border-status-currently: rgba(249, 115, 22, 0.5);
    --divider-color: rgba(255, 255, 255, 0.1);
    --hover-subtle: rgba(139, 92, 246, 0.1);
    --modal-line: rgba(255, 255, 255, 0.1);
    
    /* Status backgrounds */
    --status-always-tap-cask-bg: rgba(255, 215, 0, 0.15);
    --status-always-bottle-can-bg: rgba(0, 245, 0, 0.15);
    --status-currently-bg: rgba(249, 115, 22, 0.8);
    --status-not-currently-bg: rgba(239, 68, 68, 0.15);
    --status-unknown-bg: rgba(156, 163, 175, 0.15);
    
    /* Shadows - subtle for dark mode */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.8);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.7);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.9);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 1);
    --shadow-hero-title: 0 2px 4px rgba(0, 0, 0, 0.9);
    --shadow-card-home: 0 4px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-purple: rgba(139, 92, 246, 0.2);
    --shadow-recent-finds: 0 4px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
    
    /* Modal specific */
    --modal-backdrop: rgba(0, 0, 0, 0.95);
}

/* ================================
   DARK MODE COMPONENT OVERRIDES
   ================================ */

/* Body and main containers */
[data-theme="dark"] body {
    background: var(--bg-home-page);
}

[data-theme="dark"] #homeOverlay,
[data-theme="dark"] #homeOverlay.home-page {
    background: var(--bg-home-page) !important;
}

/* ================================
   FEATURED CARDS - BLACK WITH WHITE TEXT
   ================================ */
[data-theme="dark"] #homeOverlay .slide {
    background: rgba(10, 10, 12, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #homeOverlay .slider-nav {
    background: rgba(10, 10, 12, 1) !important;
    color: white !important;
}

[data-theme="dark"] #homeOverlay .slide-body {
    background: rgba(10, 10, 12, 1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #homeOverlay .slide-badge {
    background: rgba(139, 92, 246, 0.2);
    color: rgba(189, 165, 255, 1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] #homeOverlay .venue-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #homeOverlay .venue-meta span {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] #homeOverlay .venue-description {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] #homeOverlay .venue-features {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #homeOverlay .feature-item {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Featured slider gradients - keep vibrant */
[data-theme="dark"] #homeOverlay .slide-venue .slide-image {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.9) 0%, rgba(255, 99, 71, 0.9) 100%);
}

[data-theme="dark"] #homeOverlay .slide-beer .slide-image {
    background: linear-gradient(135deg, rgba(17, 153, 142, 0.9) 0%, rgba(56, 239, 125, 0.9) 100%);
}

[data-theme="dark"] #homeOverlay .slide-blog .slide-image {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.9) 0%, rgba(245, 87, 108, 0.9) 100%);
}

/* ================================
   ACTION BUTTONS - PROPER DARK MODE
   ================================ */
[data-theme="dark"] .action-btn {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .action-btn:hover {
    background: rgba(20, 20, 24, 1) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] .action-btn.add {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .action-btn.find {
    background: var(--primary-gradient) !important;
    border: none !important;
    color: white !important;
}

[data-theme="dark"] .action-btn.shop {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .action-btn.shop:hover {
    background: rgba(20, 20, 24, 1) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
}

/* ================================
   CATEGORY CARDS - BLACK WITH WHITE TEXT
   ================================ */
[data-theme="dark"] .category-card {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .category-card:hover {
    background: rgba(20, 20, 24, 1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .category-icon {
    background: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .category-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ================================
   STATS TICKER
   ================================ */
[data-theme="dark"] #homeOverlay .stats-ticker {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] #homeOverlay .stat-item {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] #homeOverlay .stat-item strong {
    color: rgba(189, 165, 255, 1);
}

[data-theme="dark"] #homeOverlay .stats-dropdown {
    background: rgba(10, 10, 12, 0.98);
    border-color: rgba(139, 92, 246, 0.2);
}

/* ================================
   NAVIGATION
   ================================ */
[data-theme="dark"] .app-header {
    background: rgba(10, 10, 12, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bottom-nav {
    background: rgba(10, 10, 12, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .nav-item {
    color: white;
}

[data-theme="dark"] .nav-item.active {
    color: rgba(189, 165, 255, 1);
}

[data-theme="dark"] .nav-btn {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ================================
   FORMS AND INPUTS
   ================================ */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: rgba(10, 10, 12, 0.8);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(10, 10, 12, 1);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* ================================
   BUTTONS
   ================================ */
[data-theme="dark"] .btn {
    background: rgba(10, 10, 12, 0.9);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn:hover {
    background: rgba(20, 20, 24, 1);
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .btn-primary {
    background: var(--primary-gradient-simple);
    border: none;
    color: white;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .btn-venue,
[data-theme="dark"] #homeOverlay .btn-venue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: white !important;
}

[data-theme="dark"] .btn-venue:hover,
[data-theme="dark"] #homeOverlay .btn-venue:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    transform: translateY(-2px);
}

/* ================================
   CARDS
   ================================ */
[data-theme="dark"] .card {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .venue-card {
    background: rgba(10, 10, 12, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .recent-find-card {
    background: rgba(10, 10, 12, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================
   MODALS
   ================================ */
[data-theme="dark"] .modal-content {
    background: rgba(10, 10, 12, 0.98);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================
   TOASTS
   ================================ */
[data-theme="dark"] .toast {
    background: rgba(10, 10, 12, 0.98);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ================================
   SEARCH
   ================================ */
[data-theme="dark"] .search-container {
    background: rgba(10, 10, 12, 0.95);
}

[data-theme="dark"] .search-input {
    background: rgba(20, 20, 24, 0.9);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-input:focus {
    border-color: rgba(139, 92, 246, 0.5);
}

/* ================================
   TOGGLE SWITCH
   ================================ */
[data-theme="dark"] .toggle-container {
    background: rgba(10, 10, 12, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .toggle-thumb {
    background: var(--primary-gradient-simple);
}

[data-theme="dark"] .toggle-option {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .toggle-option.active {
    color: white;
}

/* ================================
   OVERLAYS
   ================================ */
[data-theme="dark"] .overlay {
    background: var(--bg-home-page);
}

/* ================================
   SECTION HEADERS
   ================================ */
[data-theme="dark"] .section-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .section-header::after {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ================================
   FEATURED DOTS INDICATOR
   ================================ */
[data-theme="dark"] #homeOverlay .dot {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] #homeOverlay .dot.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ================================
   SMOOTH TRANSITIONS
   ================================ */
[data-theme="dark"] * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ================================
   DARK MODE OVERLAYS ADDITIONS
   Add this to the end of your dark-mode.css file
   ================================ */

/* ================================
   LATEST DISCOVERY SECTION - HOME PAGE
   ================================ */
[data-theme="dark"] .latest-discovery,
[data-theme="dark"] .latest-discovery-section,
[data-theme="dark"] .discovery-wrapper {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .latest-discovery h3,
[data-theme="dark"] .latest-discovery-title,
[data-theme="dark"] .discovery-header {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .discovery-card,
[data-theme="dark"] .latest-discovery .card,
[data-theme="dark"] .discovery-content {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .brewery-name,
[data-theme="dark"] .discovery-brewery {
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .beer-name,
[data-theme="dark"] .discovery-beer {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .discovery-meta,
[data-theme="dark"] .discovery-location,
[data-theme="dark"] .discovery-time {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Discovery Buttons */
[data-theme="dark"] .view-venue-btn,
[data-theme="dark"] .discovery-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: white !important;
}

[data-theme="dark"] .view-venue-btn:hover,
[data-theme="dark"] .discovery-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .view-all-link,
[data-theme="dark"] .view-all-discoveries {
    color: rgba(189, 165, 255, 1) !important;
}

/* Star rating button */
[data-theme="dark"] .star-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(251, 191, 36, 1) !important;
}

[data-theme="dark"] .star-btn:hover {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

/* ================================
   SEARCH OVERLAY
   ================================ */
[data-theme="dark"] #searchOverlay {
    background: var(--bg-home-page) !important;
}

[data-theme="dark"] #searchOverlay .search-container {
    background: var(--bg-home-page) !important;
}

[data-theme="dark"] #searchOverlay .search-header-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #searchOverlay .search-option {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #searchOverlay .search-option:hover {
    background: rgba(20, 20, 24, 1) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2) !important;
}

/* Search option specific hovers */
[data-theme="dark"] #searchOverlay .search-option.location:hover {
    border-color: rgba(16, 185, 129, 0.5) !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] #searchOverlay .search-option.name:hover {
    border-color: rgba(59, 130, 246, 0.5) !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] #searchOverlay .search-option.area:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] #searchOverlay .search-option.beer:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background: rgba(245, 158, 11, 0.1) !important;
}

[data-theme="dark"] #searchOverlay .search-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #searchOverlay .search-description {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Search form inputs */
[data-theme="dark"] .search-modal .form-input,
[data-theme="dark"] .search-modal .form-select {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .search-modal .form-input:focus,
[data-theme="dark"] .search-modal .form-select:focus {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

[data-theme="dark"] .search-modal .form-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Country dropdown */
[data-theme="dark"] .country-dropdown {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .country-region {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .country-option {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .country-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ================================
   COMMUNITY HUB OVERLAY
   ================================ */
[data-theme="dark"] #communityHubOverlay {
    background: var(--bg-home-page) !important;
}

[data-theme="dark"] #communityHubOverlay .community-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] #communityHubOverlay .user-stats {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
}

[data-theme="dark"] #communityHubOverlay .level-progress {
    background: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #communityHubOverlay .level-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%) !important;
}

/* Section tabs */
[data-theme="dark"] #communityHubOverlay .section-tabs {
    background: rgba(10, 10, 12, 0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] #communityHubOverlay .tab {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] #communityHubOverlay .tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] #communityHubOverlay .tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

/* Impact cards */
[data-theme="dark"] #communityHubOverlay .impact-card {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .impact-card:hover {
    background: rgba(20, 20, 24, 1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #communityHubOverlay .impact-number {
    background: linear-gradient(135deg, rgba(189, 165, 255, 1) 0%, rgba(167, 139, 250, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] #communityHubOverlay .impact-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Leaderboard */
[data-theme="dark"] #communityHubOverlay .leaderboard-section {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #communityHubOverlay .leaderboard-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .leader-row {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .leader-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #communityHubOverlay .leader-row.you {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}

[data-theme="dark"] #communityHubOverlay .rank {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .rank.gold,
[data-theme="dark"] #communityHubOverlay .rank.silver,
[data-theme="dark"] #communityHubOverlay .rank.bronze {
    color: white !important;
}

[data-theme="dark"] #communityHubOverlay .leader-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .leader-stats {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] #communityHubOverlay .leader-points {
    color: rgba(189, 165, 255, 1) !important;
}

/* Badges */
[data-theme="dark"] #communityHubOverlay .badge-card {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #communityHubOverlay .badge-card.earned {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%) !important;
    border: 2px solid rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] #communityHubOverlay .badge-card.locked {
    background: rgba(10, 10, 12, 0.5) !important;
    opacity: 0.4;
}

[data-theme="dark"] #communityHubOverlay .badge-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .badge-description {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Achievement popup */
[data-theme="dark"] #communityHubOverlay .achievement-popup {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .achievement-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #communityHubOverlay .achievement-desc {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ================================
   TRENDING SECTION
   ================================ */
[data-theme="dark"] .trending-section,
[data-theme="dark"] .trending-wrapper {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .trending-header,
[data-theme="dark"] .trending-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .trending-item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

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

[data-theme="dark"] .trending-rank {
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .trending-content strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .trending-content small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ================================
   DARK MODE - RECENT FINDS & DISCOVERIES
   Add this to the end of your dark-mode.css file
   ================================ */

/* ================================
   RECENT FINDS SECTION - HOME PAGE
   ================================ */
[data-theme="dark"] .home-page .recent-finds-section {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .home-page .recent-finds-section::before {
    opacity: 0.02;
}

[data-theme="dark"] .home-page .recent-finds-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .home-page .recent-finds-icon {
    background: linear-gradient(135deg, rgba(189, 165, 255, 1) 0%, rgba(167, 139, 250, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Recent Find Items */
[data-theme="dark"] .home-page .recent-find-item {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .home-page .recent-find-item:hover {
    background: rgba(20, 20, 24, 1) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .home-page .recent-find-user {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .home-page .recent-find-time {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .home-page .recent-find-beer {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .home-page .recent-find-beer strong {
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .home-page .recent-find-venue {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .home-page .recent-find-location {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Recent Find Actions */
[data-theme="dark"] .home-page .recent-find-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .home-page .recent-find-actions .btn-outline {
    background: rgba(139, 92, 246, 0.1) !important;
    color: rgba(189, 165, 255, 1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .home-page .recent-find-actions .btn-outline:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] .home-page .recent-find-actions .btn-text {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .home-page .recent-find-actions .btn-text:hover {
    color: rgba(189, 165, 255, 1) !important;
}

/* States */
[data-theme="dark"] .home-page .recent-finds-loading {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .home-page .recent-finds-error {
    color: #ff6b6b !important;
}

[data-theme="dark"] .home-page .recent-finds-empty {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ================================
   DISCOVERIES OVERLAY
   ================================ */
[data-theme="dark"] #discoveriesOverlay {
    background: var(--bg-home-page) !important;
}

[data-theme="dark"] #discoveriesOverlay .info-header {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.8) 0%, rgba(219, 39, 119, 0.8) 100%) !important;
}

[data-theme="dark"] #discoveriesOverlay .info-title {
    color: white !important;
}

/* Stats Bar */
[data-theme="dark"] #discoveriesOverlay .discoveries-stats-bar {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #discoveriesOverlay .stat-value {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #discoveriesOverlay .stat-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Filter Chips */
[data-theme="dark"] #discoveriesOverlay .filter-chip {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] #discoveriesOverlay .filter-chip:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #discoveriesOverlay .filter-chip.active {
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Discovery Items */
[data-theme="dark"] #discoveriesOverlay .discovery-item {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-item:hover {
    background: rgba(20, 20, 24, 1) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-header {
    border-bottom: none !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-user {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-time {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-beer {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-beer strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-venue {
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-venue small {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Discovery Actions */
[data-theme="dark"] #discoveriesOverlay .discovery-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-actions .btn-outline {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-actions .btn-outline:hover {
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-actions .btn-text {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] #discoveriesOverlay .discovery-actions .btn-text:hover {
    color: rgba(189, 165, 255, 1) !important;
}

/* Empty State */
[data-theme="dark"] #discoveriesOverlay .discoveries-empty {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] #discoveriesOverlay .discoveries-empty h3 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Discoveries List Container */
[data-theme="dark"] #discoveriesOverlay .discoveries-list {
    background: transparent !important;
}

/* ================================
   ACTION CARDS - ADD FIND
   ================================ */
[data-theme="dark"] .home-page .action-card[data-action="add-find"] {
    background: rgba(10, 10, 12, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .home-page .action-card[data-action="add-find"]:hover {
    background: rgba(249, 115, 22, 0.1) !important;
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2) !important;
}

[data-theme="dark"] .location-confirm-modal {
    background: rgba(0, 0, 0, 0.95) !important;
}

[data-theme="dark"] .location-confirm-modal .modal-content {
    background: var(--dark-bg-section) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ================================
   DARK MODE - RESULTS OVERLAY (SOFTER VERSION)
   Add this to your dark-mode.css file
   ================================ */

/* ================================
   RESULTS OVERLAY - SOFTER GREY THEME
   ================================ */
[data-theme="dark"] .results-overlay {
    background: var(--bg-home-page) !important;
}

[data-theme="dark"] .results-container {
    background: linear-gradient(135deg, 
        rgba(55, 60, 72, 0.95) 0%, 
        rgba(42, 46, 56, 0.95) 100%) !important;
}

/* Results Header - Darker grey, not black */
[data-theme="dark"] .results-header {
    background: rgba(42, 46, 56, 0.98) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

[data-theme="dark"] .results-title {
    color: rgba(189, 165, 255, 1) !important;
    -webkit-text-fill-color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .results-map-toggle,
[data-theme="dark"] .add-venue-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .results-map-toggle:hover,
[data-theme="dark"] .add-venue-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
    transform: scale(1.05);
}

/* Results Content - Soft dark grey */
[data-theme="dark"] .results-content {
    background: linear-gradient(180deg, 
        rgba(42, 46, 56, 0.98) 0%, 
        rgba(35, 39, 48, 0.98) 100%) !important;
}

/* Result Items - Dark grey cards, not black */
[data-theme="dark"] .result-item {
    background: black !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .result-item:hover {
    background: rgba(55, 60, 72, 1) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    transform: translateY(-2px);
}

/* Text colors - Softer whites */
[data-theme="dark"] .result-title {
    color: rgba(245, 247, 250, 1) !important;
}

[data-theme="dark"] .result-distance {
    color: rgba(167, 139, 250, 1) !important;
}

[data-theme="dark"] .result-location {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .result-address {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .result-postcode {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .result-authority {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Loading states */
[data-theme="dark"] .results-loading {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] .loading-spinner {
    border-color: rgba(139, 92, 246, 0.2) !important;
    border-top-color: rgba(167, 139, 250, 1) !important;
}

[data-theme="dark"] .loading-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* No results */
[data-theme="dark"] .no-results-found {
    background: transparent !important;
}

[data-theme="dark"] .no-results-icon {
    opacity: 0.3;
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .no-results-title {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .no-results-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Pagination - Softer grey */
[data-theme="dark"] #resultsOverlay .pagination-container {
    background: rgba(42, 46, 56, 0.98) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #resultsOverlay .pagination-info {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] #resultsOverlay .page-number {
    background: rgba(55, 60, 72, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] #resultsOverlay .page-number:hover:not(.active) {
    background: rgba(65, 70, 82, 1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #resultsOverlay .page-number.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* Country Badge */
[data-theme="dark"] .country-badge {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Action buttons */
[data-theme="dark"] .result-actions .btn {
    background: rgba(139, 92, 246, 0.15) !important;
    color: rgba(189, 165, 255, 1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .result-actions .btn:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    transform: translateY(-1px);
}

/* GF Status indicators - if any */
[data-theme="dark"] .gf-indicator {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .gf-indicator.unknown {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.8) 0%, rgba(107, 114, 128, 0.8) 100%) !important;
}

/* ================================
   VENUE STATUS COLORS
   ================================ */
[data-theme="dark"] .gf-status {
    background: rgba(55, 60, 72, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .gf-status.has-gf {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .gf-status.currently {
    background: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="dark"] .gf-status.unknown {
    background: rgba(156, 163, 175, 0.1) !important;
    border-color: rgba(156, 163, 175, 0.3) !important;
}

[data-theme="dark"] .gf-status-title {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .gf-status-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* GF format tags */
[data-theme="dark"] .gf-format-tag {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%) !important;
    color: white !important;
}

/* ================================
   DARK MODE - VENUE DETAILS (CONSISTENT GREY THEME)
   Add this to your dark-mode.css file
   ================================ */

/* ================================
   CONSISTENT BACKGROUND - Use this EVERYWHERE in dark mode
   ================================ */
[data-theme="dark"] {
    /* MAIN APP BACKGROUND - Use this for all overlays */
    --dark-bg-primary: linear-gradient(180deg, #2a2d35 0%, #1f2229 100%);
    
    /* CARD BACKGROUND - Use this for all cards/modals */
    --dark-bg-card: rgba(48, 53, 64, 0.95);
    
    /* ELEVATED CARD - For nested cards or emphasis */
    --dark-bg-elevated: rgba(55, 60, 72, 0.95);
    
    /* SECTION BACKGROUND - For sections within cards */
    --dark-bg-section: rgba(42, 46, 56, 0.98);
}

/* ================================
   VENUE DETAILS OVERLAY
   ================================ */
[data-theme="dark"] #venueDetailsOverlay {
    background: var(--dark-bg-primary) !important;
}

[data-theme="dark"] .venue-details-container {
    background: transparent !important;
}

[data-theme="dark"] .venue-details-card {
    background: var(--dark-bg-section) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .venue-details-content {
    background: transparent !important;
}

/* Venue Header */
[data-theme="dark"] .venue-title {
    background: linear-gradient(135deg, rgba(189, 165, 255, 1) 0%, rgba(167, 139, 250, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .venue-address {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .venue-location {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Status Card - Make it grey, not purple */
[data-theme="dark"] #venueDetailsOverlay .status-card {
    background: black !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] #venueDetailsOverlay .status-card::before {
    opacity: 0.05;
}

[data-theme="dark"] #venueDetailsOverlay .status-question {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #venueDetailsOverlay .current-status .status-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] #venueDetailsOverlay .current-status .status-meta {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Status Action Buttons */
[data-theme="dark"] #venueDetailsOverlay .status-actions .btn-outline {
    background: rgba(139, 92, 246, 0.15) !important;
    color: rgba(189, 165, 255, 1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] #venueDetailsOverlay .status-actions .btn-confirm {
    background: rgba(16, 185, 129, 0.15) !important;
    color: rgba(52, 211, 153, 1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] #venueDetailsOverlay .status-actions .btn-outline:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] #venueDetailsOverlay .status-confirmation {
    background: rgba(107, 114, 128, 0.9) !important;
}

/* Beer Section - Orange tinted grey */
[data-theme="dark"] .beer-section {
    background: black !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-left: 4px solid rgba(249, 115, 22, 0.5) !important;
}

[data-theme="dark"] .beer-section::before {
    opacity: 0.05;
}

[data-theme="dark"] .beer-section-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .beer-status {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .beer-status strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .beer-status em {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] #venueDetailsOverlay .btn-primary {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(234, 88, 12, 0.9) 100%) !important;
    color: white !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

/* Venue Action Grid */
[data-theme="dark"] .venue-action-grid {
    background: var(--dark-bg-section) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .venue-action-grid .btn {
    background: var(--dark-bg-elevated) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .venue-action-grid .btn:hover {
    background: rgba(65, 70, 82, 1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .venue-action-grid .btn-external {
    background: rgba(59, 130, 246, 0.15) !important;
    color: rgba(147, 197, 253, 1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ================================
   BEER LIST MODAL - DARK MODE
   ================================ */
[data-theme="dark"] .beer-list-modal .modal-content {
    background: var(--dark-bg-section) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .beer-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.8) 0%, rgba(234, 88, 12, 0.8) 100%) !important;
}

[data-theme="dark"] .beer-list-content {
    background: transparent !important;
}

/* Beer Cards - Grey with orange accent */
[data-theme="dark"] .beer-card {
    background: var(--dark-bg-card) !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

[data-theme="dark"] .beer-card:hover {
    background: var(--dark-bg-elevated) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="dark"] .beer-name {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .brewery-tag {
    background: rgba(139, 92, 246, 0.15) !important;
    color: rgba(189, 165, 255, 1) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .brewery-name {
    color: rgba(189, 165, 255, 1) !important;
}

/* Beer badges in dark mode */
[data-theme="dark"] .badge-tap {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .badge-bottle {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .badge-style {
    background: rgba(139, 92, 246, 0.15) !important;
    color: rgba(189, 165, 255, 1) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .badge-verified {
    background: rgba(16, 185, 129, 0.15) !important;
    color: rgba(52, 211, 153, 1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .badge-unverified {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(248, 113, 113, 1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Beer details */
[data-theme="dark"] .beer-card-details {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Three dots menu */
[data-theme="dark"] .btn-more {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-more:hover {
    background: rgba(249, 115, 22, 0.2) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

[data-theme="dark"] .btn-more span {
    background: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .btn-more:hover span {
    background: white !important;
}

/* Dropdown menu */
[data-theme="dark"] .beer-dropdown-menu {
    background: var(--dark-bg-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .beer-dropdown-menu button {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .beer-dropdown-menu button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
}

[data-theme="dark"] .beer-dropdown-menu button.danger {
    color: rgba(248, 113, 113, 1) !important;
}

[data-theme="dark"] .beer-dropdown-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Empty state */
[data-theme="dark"] .beer-list-empty h4 {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .beer-list-empty p {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .empty-question {
    color: rgba(249, 115, 22, 1) !important;
}

/* Scrollbar */
[data-theme="dark"] .beer-list-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .beer-list-content::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.3) !important;
}

[data-theme="dark"] .beer-list-content::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.5) !important;
}

/* ================================
   VENUE ADDED MODAL
   ================================ */
[data-theme="dark"] .venue-added-modal .modal-content {
    background: var(--dark-bg-section) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .venue-added-modal .gradient-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] .venue-added-modal .modal-body {
    background: transparent !important;
}

[data-theme="dark"] .success-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .success-points {
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .venue-actions-prompt {
    background: var(--dark-bg-card) !important;
}

[data-theme="dark"] .prompt-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .btn-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: rgba(52, 211, 153, 1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .btn-success:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .btn-subtle {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-subtle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ================================
   DARK MODE - TOAST NOTIFICATIONS
   Add this to your dark-mode.css file
   ================================ */

/* Toast Container */
[data-theme="dark"] .toast-container {
    /* Container usually doesn't need changes, but just in case */
}

/* Toast Items - Grey background with white text */
[data-theme="dark"] .toast {
    background: rgba(48, 53, 64, 0.98) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Toast Content */
[data-theme="dark"] .toast-content {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .toast-message {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Close Button */
[data-theme="dark"] .toast-close {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: none !important;
}

[data-theme="dark"] .toast-close:hover {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Toast Types - Keep colored accents but with dark background */
[data-theme="dark"] .toast-success {
    background: rgba(48, 53, 64, 0.98) !important;
    border-left: 4px solid rgba(16, 185, 129, 0.8) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-left-width: 4px !important;
}

[data-theme="dark"] .toast-error {
    background: rgba(48, 53, 64, 0.98) !important;
    border-left: 4px solid rgba(239, 68, 68, 0.8) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left-width: 4px !important;
}

[data-theme="dark"] .toast-warning {
    background: rgba(48, 53, 64, 0.98) !important;
    border-left: 4px solid rgba(245, 158, 11, 0.8) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    border-left-width: 4px !important;
}

[data-theme="dark"] .toast-info {
    background: rgba(48, 53, 64, 0.98) !important;
    border-left: 4px solid rgba(59, 130, 246, 0.8) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-left-width: 4px !important;
}

/* Toast Icons - Keep them bright */
[data-theme="dark"] .toast-icon {
    /* Icons usually look fine as emojis, but adjust if needed */
}

/* Animation adjustments if needed */
[data-theme="dark"] .toast.show {
    /* Animations usually don't need changes */
}

[data-theme="dark"] .toast.hide {
    /* Animations usually don't need changes */
}

/* Loading toast if you have one */
[data-theme="dark"] .toast-loading {
    background: rgba(48, 53, 64, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .toast-loading .toast-message {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Progress bar if your toasts have them */
[data-theme="dark"] .toast-progress {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .toast-progress-bar {
    background: rgba(139, 92, 246, 0.5) !important;
}

/* ================================
   DARK MODE - ADD CONTENT & SHOP
   Add this to your dark-mode.css file
   ================================ */

/* ================================
   ADD CONTENT MODALS
   ================================ */

/* Add Content Modal Container */
[data-theme="dark"] #addContentModal .modal-card,
[data-theme="dark"] #addVenueSelectionModal .modal-card,
[data-theme="dark"] #addBeerLocationModal .modal-card,
[data-theme="dark"] #addBeerVenueSearchModal .modal-card,
[data-theme="dark"] #addBeerBreweryModal .modal-card,
[data-theme="dark"] #addBreweryModal .modal-card,
[data-theme="dark"] #addBreweryBeersModal .modal-card {
    background: rgba(42, 46, 56, 0.98) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Modal Headers */
[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .modal-title {
    color: white !important;
}

[data-theme="dark"] .modal-close-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] .modal-close-btn:hover {
    color: white !important;
}

/* Add Option Cards */
[data-theme="dark"] .add-option-card {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .add-option-card:hover {
    background: rgba(55, 60, 72, 1) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] .add-option-icon {
    background: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="dark"] .add-option-content h3 {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .add-option-content p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .add-option-arrow {
    color: rgba(189, 165, 255, 1) !important;
}

/* Question Prompts */
[data-theme="dark"] .question-prompt p,
[data-theme="dark"] .venue-search-prompt p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Divider Text */
[data-theme="dark"] .divider-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .divider-text::before,
[data-theme="dark"] .divider-text::after {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Form Inputs */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="url"] {
    background: rgba(48, 53, 64, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-control:focus {
    border-color: rgba(139, 92, 246, 0.5) !important;
    background: rgba(48, 53, 64, 1) !important;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .form-group label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Buttons in Add Content */
[data-theme="dark"] .add-modal .btn,
[data-theme="dark"] .modal .btn {
    /* Primary buttons keep their gradient */
}

[data-theme="dark"] .modal .btn-outline {
    background: transparent !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    color: rgba(189, 165, 255, 1) !important;
}

[data-theme="dark"] .modal .btn-outline:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.7) !important;
}

[data-theme="dark"] .modal .btn-secondary {
    background: rgba(55, 60, 72, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Beer Input View */
[data-theme="dark"] .beer-input-view {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .added-beers-list {
    background: rgba(48, 53, 64, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ================================
   SHOP OVERLAY
   ================================ */

[data-theme="dark"] #shopOverlay {
    background: var(--dark-bg-primary, linear-gradient(180deg, #2a2d35 0%, #1f2229 100%)) !important;
}

/* Shop Header */
[data-theme="dark"] .shop-header {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .shop-header h1,
[data-theme="dark"] .shop-header p {
    color: white !important;
}

/* Shop Categories */
[data-theme="dark"] .shop-category {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .shop-category:hover {
    background: rgba(55, 60, 72, 1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .shop-category-title {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .shop-category-desc {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Featured Product */
[data-theme="dark"] .featured-product {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

[data-theme="dark"] .product-badge {
    background: rgba(251, 191, 36, 0.9) !important;
    color: white !important;
}

/* Popular Section */
[data-theme="dark"] .popular-section {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .shop-item {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .shop-item:hover {
    background: rgba(55, 60, 72, 1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* Shop Sections */
[data-theme="dark"] .shop-categories {
    background: transparent !important;
}

/* Shop Navigation or Back Button if exists */
[data-theme="dark"] .shop-nav {
    background: rgba(42, 46, 56, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ================================
   MODAL BACKDROP
   ================================ */
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="dark"] .modal-container {
    /* Container usually doesn't need changes */
}

/* Modal Back Button if visible */
[data-theme="dark"] .modal-back {
    color: white !important;
}

/* ================================
   DARK MODE - ONBOARDING FLOWS
   Add this to your dark-mode.css file
   ================================ */

/* ================================
   AGE GATE MODAL
   ================================ */
[data-theme="dark"] #ageGateModal .modal-container,
[data-theme="dark"] #ageGateModal .age-gate-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] #ageGateModal .age-gate-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] #ageGateModal .age-gate-body {
    background: transparent !important;
}

[data-theme="dark"] #ageGateModal .age-gate-message h2 {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #ageGateModal .age-gate-message p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] #ageGateModal .age-question {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] #ageGateModal .age-gate-legal {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ================================
   COOKIE CONSENT MODAL
   ================================ */
[data-theme="dark"] #cookieModal .modal-container,
[data-theme="dark"] .cookie-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] .cookie-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.8) 0%, rgba(217, 119, 6, 0.8) 100%) !important;
}

[data-theme="dark"] .cookie-body {
    background: transparent !important;
}

[data-theme="dark"] .cookie-message p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .cookie-type {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cookie-type:hover {
    background: rgba(55, 60, 72, 1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .cookie-info h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .cookie-info p {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .cookie-badge {
    /* Keep colorful badges */
}

[data-theme="dark"] .cookie-examples small {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .cookie-privacy {
    background: rgba(48, 53, 64, 0.5) !important;
}

[data-theme="dark"] .cookie-privacy p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .cookie-privacy a {
    color: rgba(245, 158, 11, 1) !important;
}

/* Cookie Toggle in Dark Mode */
[data-theme="dark"] #cookieModal .toggle-slider {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(254, 215, 170, 0.3) !important;
}

[data-theme="dark"] #cookieModal .cookie-toggle input:checked + .toggle-slider {
    background-color: rgba(249, 115, 22, 0.8) !important;
    border-color: rgba(234, 88, 12, 0.8) !important;
}

[data-theme="dark"] .cookie-actions .btn-secondary {
    background: rgba(55, 60, 72, 0.9) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cookie-actions .btn-ghost {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ================================
   NICKNAME MODAL
   ================================ */
[data-theme="dark"] #nicknameModal .modal-container,
[data-theme="dark"] .nickname-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] .nickname-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] .nickname-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .nickname-input {
    background: rgba(48, 53, 64, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .nickname-input:focus {
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] .suggestions-section p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .chip {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .chip:hover {
    background: rgba(139, 92, 246, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .avatar-section p {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .avatar-option {
    background: rgba(48, 53, 64, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .avatar-option:hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
}

[data-theme="dark"] .avatar-option.active {
    border-color: rgba(139, 92, 246, 0.7) !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(109, 40, 217, 0.2) 100%) !important;
}

[data-theme="dark"] .privacy-section {
    background: rgba(48, 53, 64, 0.5) !important;
}

[data-theme="dark"] .privacy-item {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .nickname-actions {
    background: rgba(48, 53, 64, 0.5) !important;
}

/* ================================
   PASSCODE MODAL
   ================================ */
[data-theme="dark"] #passcodeModal .modal-container,
[data-theme="dark"] .passcode-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] .passcode-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%) !important;
}

[data-theme="dark"] .passcode-body {
    background: transparent !important;
}

[data-theme="dark"] .passcode-section h3 {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .passcode-display {
    background: linear-gradient(135deg, rgba(55, 60, 72, 0.95) 0%, rgba(65, 70, 82, 0.95) 100%) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] #passcodeValue {
    color: white !important;
}

[data-theme="dark"] .passcode-display .btn-sm {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .passcode-display .btn-sm:hover {
    background: rgba(16, 185, 129, 0.8) !important;
    border-color: rgba(16, 185, 129, 0.8) !important;
    color: white !important;
}

[data-theme="dark"] .passcode-warning {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.3) 0%, rgba(146, 64, 14, 0.3) 100%) !important;
    border-color: rgba(180, 83, 9, 0.5) !important;
}

[data-theme="dark"] .passcode-warning p {
    color: rgba(254, 243, 199, 0.9) !important;
}

[data-theme="dark"] .passcode-actions .btn-secondary {
    background: rgba(55, 60, 72, 0.9) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .passcode-confirm {
    background: rgba(55, 60, 72, 0.5) !important;
}

[data-theme="dark"] .passcode-confirm .checkbox-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .passcode-confirm input[type="checkbox"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .passcode-confirm input[type="checkbox"]:checked {
    background: rgba(16, 185, 129, 0.8) !important;
    border-color: rgba(16, 185, 129, 0.8) !important;
}

/* ================================
   SIGN IN MODAL
   ================================ */
[data-theme="dark"] #signInModal .modal-container,
[data-theme="dark"] .signin-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] .signin-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] .signin-header h2 #signInNicknameDisplay {
    color: rgba(251, 191, 36, 1) !important;
}

[data-theme="dark"] .signin-body {
    background: transparent !important;
}

[data-theme="dark"] .signin-form label {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .signin-input {
    background: rgba(48, 53, 64, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] .signin-input:focus {
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] .passcode-format-hint {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-theme="dark"] .input-hint {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .signin-error-box {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.1) 0%, rgba(254, 226, 226, 0.1) 100%) !important;
    border: 1px solid rgba(254, 202, 202, 0.3) !important;
}

[data-theme="dark"] .signin-error-box .error-text {
    color: rgba(248, 113, 113, 1) !important;
}

[data-theme="dark"] .signin-help {
    background: linear-gradient(135deg, rgba(48, 53, 64, 0.5) 0%, rgba(55, 60, 72, 0.5) 100%) !important;
}

[data-theme="dark"] .help-content p {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] .help-content small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ================================
   WELCOME MODAL
   ================================ */
[data-theme="dark"] #welcomeModal .modal-container,
[data-theme="dark"] #welcomeModal .welcome-container {
    background: rgba(42, 46, 56, 0.98) !important;
}

[data-theme="dark"] #welcomeModal .welcome-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
}

[data-theme="dark"] #welcomeModal .welcome-body {
    background: transparent !important;
}

[data-theme="dark"] #welcomeModal .founder-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(109, 40, 217, 0.1) 100%) !important;
}

[data-theme="dark"] #welcomeModal .founder-greeting {
    color: rgba(255, 255, 255, 0.95) !important;
}

[data-theme="dark"] #welcomeModal .founder-message p {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] #welcomeModal .stat-item {
    background: rgba(48, 53, 64, 0.5) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] #welcomeModal .stat-featured {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
    color: white !important;
}

[data-theme="dark"] #welcomeModal .stat-number {
    color: inherit !important;
}

[data-theme="dark"] #welcomeModal .stat-label {
    opacity: 0.8 !important;
}

[data-theme="dark"] #welcomeModal .feature-item {
    background: rgba(48, 53, 64, 0.5) !important;
}

[data-theme="dark"] #welcomeModal .feature-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ================================
   COMMON ONBOARDING ELEMENTS
   ================================ */

/* All buttons in onboarding */
[data-theme="dark"] .age-gate-buttons .btn,
[data-theme="dark"] .cookie-actions .btn,
[data-theme="dark"] .nickname-actions .btn,
[data-theme="dark"] .signin-actions .btn,
[data-theme="dark"] #welcomeModal .btn {
    /* Primary buttons keep their gradients but may need adjustment */
}

[data-theme="dark"] .btn-secondary {
    background: rgba(55, 60, 72, 0.9) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(65, 70, 82, 1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Modal containers general */
[data-theme="dark"] .modal-container {
    /* Most are handled individually above */
}

/* Links in onboarding */
[data-theme="dark"] .onboarding-link,
[data-theme="dark"] a {
    color: rgba(167, 139, 250, 1) !important;
}

[data-theme="dark"] a:hover {
    color: rgba(189, 165, 255, 1) !important;
}