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

        :root {
            /* === EXISTING COLORS (Preserved) === */
            --police-red: #dc143c;
            --police-blue: #0047ab;
            --neon-green: #00ff00;
            --warning-yellow: #ffd700;
            --bg-dark: #0a0a0a;
            --bg-darker: #050505;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --border-color: rgba(255, 255, 255, 0.1);
            --youtube-red: #ff0000;
            --success-green: #00ff00;

            /* === ENHANCED COLOR SYSTEM === */
            --blue-deep: #021320;
            --blue-primary: #0047ab;
            --blue-accent: #00bfff;
            --blue-light: #4da6ff;

            --status-live: #00ff00;
            --status-offline: #e10600;
            --status-warning: #ffd700;

            --twitch-purple: #9147FF;
            --kick-green: #53FC18;

            --white: #FAFAFA;
            --white-muted: rgba(255, 255, 255, 0.85);
            --white-subtle: rgba(255, 255, 255, 0.65);
            --white-secondary: rgba(255, 255, 255, 0.7); /* WCAG AA compliant 4.8:1 */
            --black-overlay: rgba(0, 0, 0, 0.7);
            --black-card: rgba(0, 0, 0, 0.4);

            /* === SPACING (8pt grid) === */
            --space-1: 8px;
            --space-2: 16px;
            --space-3: 24px;
            --space-4: 32px;
            --space-5: 40px;
            --space-6: 48px;
            --space-8: 64px;

            /* === TYPOGRAPHY === */
            --font-primary: 'Orbitron', monospace;
            --font-secondary: 'Rajdhani', sans-serif;
            --font-mono: 'Share Tech Mono', monospace;

            --letter-spacing-tight: 0.5px;
            --letter-spacing-base: 1.5px;
            --letter-spacing-wide: 2px;

            /* === SHADOWS & ELEVATION === */
            /* Base shadow colors - single source of truth */
            --shadow-blue: rgba(0, 71, 171, 0.25);
            --shadow-blue-glow: rgba(0, 191, 255, 0.1);

            /* Shadow scale (0-5) for consistent elevation */
            --shadow-flat: none;
            --shadow-subtle: 0 2px 4px var(--shadow-blue);
            --shadow-sm: 0 2px 8px var(--shadow-blue), 0 0 20px var(--shadow-blue-glow);
            --shadow-static: 0 2px 8px var(--shadow-blue), 0 0 20px var(--shadow-blue-glow);
            --shadow-md: 0 4px 16px var(--shadow-blue), 0 0 30px var(--shadow-blue-glow);
            --shadow-lg: 0 8px 24px var(--shadow-blue), 0 0 40px var(--shadow-blue-glow);
            --shadow-raised: 0 12px 24px var(--shadow-blue), 0 0 40px var(--shadow-blue-glow);
            --shadow-xl: 0 12px 32px var(--shadow-blue), 0 0 50px var(--shadow-blue-glow);

            /* Contextual shadows for specific states */
            --shadow-live: 0 4px 16px rgba(48, 209, 88, 0.3), 0 0 32px rgba(48, 209, 88, 0.15);
            --shadow-emergency: 0 4px 16px rgba(220, 20, 60, 0.3), 0 0 32px rgba(220, 20, 60, 0.15);
            --shadow-warning: 0 4px 16px rgba(255, 185, 10, 0.3), 0 0 32px rgba(255, 185, 10, 0.15);

            /* === TRANSITIONS (Apple-inspired easing) === */
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

            --duration-fast: 150ms;
            --duration-base: 250ms;
            --duration-slow: 400ms;

            /* === BORDER RADIUS === */
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;

            /* === Z-INDEX SYSTEM === */
            --z-base: 1;
            --z-dropdown: 100;
            --z-sticky: 200;
            --z-modal: 300;
            --z-tooltip: 400;
        }

        body {
            background: var(--bg-dark);
            color: var(--text-primary);
            font-family: 'Rajdhani', sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;

            /* Enhanced font rendering */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* ============================================
           TYPOGRAPHY ENHANCEMENTS - Orbitron refinements
           ============================================ */

        /* Global Orbitron improvements (keeping the font, enhancing readability) */
        *[style*="Orbitron"],
        .platform-name,
        .dispatch-header {
            /* Improved letter spacing for better readability */
            letter-spacing: var(--letter-spacing-base) !important;

            /* Optical kerning for better character spacing */
            font-feature-settings: "kern" 1;
            font-kerning: normal;
        }

        /* Status indicators with Orbitron */
        .status-indicator,
        .live-indicator {
            letter-spacing: var(--letter-spacing-base);
        }

        /* Halloween/Fall Decorations - Removed animated leaves (too distracting) */
        /* Keeping only subtle static decorations on containers and headers */

        /* Responsive status bar styles */
        @media (max-width: 768px) {
            #bcscanner-status .status-platforms {
                margin-left: 8px !important;
                gap: 5px !important;
            }
            #bcscanner-status .platform-text {
                display: none !important;
            }
            #bcscanner-status .platform-icon {
                font-size: 1.4rem !important;
                margin: 0 3px !important;
            }
        }

        @media (min-width: 769px) {
            #bcscanner-status .status-label {
                display: inline-flex !important;
                font-size: 0.95rem !important;
            }
            #bcscanner-status .status-platforms {
                display: inline-flex !important;
                margin-left: 10px;
                font-size: 0.95rem !important;
            }
            #bcscanner-status .platform-icon {
                margin-right: 5px;
                font-size: 0.95rem !important;
            }
            #bcscanner-status .platform-text {
                font-size: 0.95rem !important;
            }
        }

        /* Kick Logos */
        .kick-logo-main {
            color: #53FC18 !important;
            font-family: 'Black Ops One', cursive;
            font-weight: 900;
            font-size: 3.5rem;
            background: linear-gradient(135deg, #53FC18 0%, #3FD814 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px rgba(83, 252, 24, 0.5);
        }
        
        .kick-logo-social {
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            font-weight: 900;
            color: #53FC18;
            transition: transform 0.3s ease;
        }
        
        .social-link.kick:hover .kick-logo-social {
            transform: scale(1.2);
        }

        /* YouTube Scanner Status Card - Consistent Red Theme */
        .status-card.scanner-status {
            border-color: var(--youtube-red);
            background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
            position: relative;
            overflow: hidden;
            text-decoration: none !important;
        }

        /* Remove ALL underlines and link styles */
        a.scanner-status,
        a.scanner-status:link,
        a.scanner-status:visited,
        a.scanner-status:hover,
        a.scanner-status:active {
            text-decoration: none !important;
            color: inherit !important;
        }

/* Stream Announcement Section */
.stream-announcement {
    padding: 8px 0;
    position: relative;
    overflow: hidden;
}



@keyframes announcement-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

.announcement-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 0 40px;
}

/* Jony Ive-inspired announcement wrapper design */
.announcement-wrapper {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(8, 8, 8, 0.88) 100%);
    border-radius: 16px;
    overflow: visible;
    position: relative;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
}

/* STATE 1: LIVE NOW - Enhanced pulsing green theme - Apple Quality */
.stream-announcement.has-stream[data-stream-id] .announcement-wrapper {
    border: 2px solid rgba(48, 209, 88, 0.8);
    box-shadow:
        0 0 35px rgba(48, 209, 88, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(48, 209, 88, 0.2) inset,
        0 1px 2px rgba(48, 209, 88, 0.3) inset;
    animation: live-pulse 3s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% {
        box-shadow:
            0 0 35px rgba(48, 209, 88, 0.45),
            0 8px 24px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(48, 209, 88, 0.2) inset,
            0 1px 2px rgba(48, 209, 88, 0.3) inset;
    }
    50% {
        box-shadow:
            0 0 50px rgba(48, 209, 88, 0.65),
            0 12px 32px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(48, 209, 88, 0.3) inset,
            0 1px 2px rgba(48, 209, 88, 0.4) inset;
    }
}

.stream-announcement.has-stream[data-stream-id] .announcement-wrapper:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
        0 0 55px rgba(48, 209, 88, 0.6),
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(48, 209, 88, 0.3) inset;
    border-color: rgba(48, 209, 88, 0.9);
}

.stream-announcement.has-stream[data-stream-id] .announcement-wrapper:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: var(--duration-fast);
}

/* STATE 2: SCHEDULED STREAM - Blue Border, Black Background - Apple Quality */
.stream-announcement.has-stream:not([data-stream-id]) .announcement-wrapper {
    border: 2px solid rgba(10, 132, 255, 0.7);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(5, 5, 5, 0.92) 100%);
    box-shadow:
        0 0 30px rgba(10, 132, 255, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(10, 132, 255, 0.15) inset,
        0 1px 2px rgba(10, 132, 255, 0.2) inset;
}

.stream-announcement.has-stream:not([data-stream-id]) .announcement-wrapper:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
        0 0 40px rgba(10, 132, 255, 0.35),
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(10, 132, 255, 0.25) inset;
    border-color: rgba(10, 132, 255, 0.9);
}

.stream-announcement.has-stream:not([data-stream-id]) .announcement-wrapper:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: var(--duration-fast);
}

/* STATE 3: NO STREAM TODAY - Warm gold-amber (harmonized, empathetic) */
.stream-announcement.no-stream-today .announcement-wrapper {
    border: 2px solid rgba(255, 185, 10, 0.4);
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(10, 10, 12, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stream-announcement.no-stream-today .announcement-wrapper:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 185, 10, 0.6);
}

.stream-announcement.no-stream-today .announcement-wrapper:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: var(--duration-fast);
}

/* STATE 4: NO STREAM SCHEDULED - Subdued muted state (lowest visual hierarchy) */
.stream-announcement.no-stream-scheduled .announcement-wrapper {
    border: 2px solid rgba(0, 71, 171, 0.2);
    background: rgba(0, 0, 0, 0.3);
    box-shadow:
        0 0 10px rgba(0, 71, 171, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

.stream-announcement.no-stream-scheduled .announcement-wrapper:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow:
        0 0 15px rgba(0, 71, 171, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 71, 171, 0.35);
    opacity: 1;
}

.stream-announcement.no-stream-scheduled .announcement-wrapper:active {
    transform: translate3d(0, -1px, 0);
    transition-duration: var(--duration-fast);
}

/* VOD title typography - distinguish from announcement */
.stream-announcement.no-stream-scheduled .metadata-title {
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

.announcement-content {
    display: flex;
    flex-direction: column; /* Stack vertically */
    align-items: center;
    gap: 20px;
    padding: 30px 25px 12px 25px; /* Increased top padding for badge clearance */
    position: relative;
    overflow: visible;
    border-radius: 13px;
}

.announcement-content.active {
    background: transparent;
    /* Border color handled by parent .announcement-wrapper state classes */
}

/* Platform Icons Display */
.stream-platforms-display {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    gap: 15px;
    margin: 0 auto; /* Center it */
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
}

.platforms-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65); /* Light gray - Apple design */
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px;
}

@keyframes subtle-glow {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 0.95; }
}

/* Reduce spacing between stream duration and platforms when live */
.stream-platforms-display.is-live {
    margin-top: -4px;
    padding-top: 8px;
}

.platform-icons-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.platform-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid transparent;
    min-width: 60px;
    transition: all 0.3s ease;
}

.platform-icon-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.platform-icon-wrapper i {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.platform-icon-wrapper span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

        
        
    .dispatch-header {
        font-size: 1.3rem;
    }
    
    .stream-title {
        font-size: 1.5rem;
    }




/* Kick Logo */
.kick-logo {
    font-family: 'Black Ops One', cursive;
    font-size: 1.5rem;
    font-weight: 900;
    color: #53FC18;
    background: linear-gradient(135deg, #53FC18 0%, #3FD814 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(83, 252, 24, 0.5);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.platform-icon-wrapper.kick {
    border-color: #53FC18;
    background: linear-gradient(135deg, rgba(83, 252, 24, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.platform-icon-wrapper.kick:hover {
    background: linear-gradient(135deg, rgba(83, 252, 24, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 4px 15px rgba(83, 252, 24, 0.4);
}

.platform-icon-wrapper.twitch {
    border-color: #9146ff;
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.platform-icon-wrapper.twitch i {
    color: #9146ff;
}

.platform-icon-wrapper.twitch:hover {
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 4px 15px rgba(145, 70, 255, 0.4);
}

.platform-icon-wrapper.youtube {
    border-color: #ff0000;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.platform-icon-wrapper.youtube i {
    color: #ff0000;
}

.platform-icon-wrapper.youtube:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

.platform-icon-wrapper.youtube span {
    color: #ff0000;
}

.platform-icon-wrapper.tiktok {
    border-color: #ff0050;
    background: linear-gradient(135deg, rgba(255, 0, 80, 0.15) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.platform-icon-wrapper.tiktok i {
    color: #ff0050;
}

.platform-icon-wrapper.tiktok:hover {
    background: linear-gradient(135deg, rgba(255, 0, 80, 0.25) 0%, rgba(0, 0, 0, 0.7) 100%);
    box-shadow: 0 4px 15px rgba(255, 0, 80, 0.4);
}

.platform-icon-wrapper.tiktok span {
    color: #ff0050;
}

.announcement-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
    position: relative;
    padding-left: 0;
    text-align: center;
}

.dispatch-badge {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.3) 0%, rgba(220, 20, 60, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--police-red);
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.4);
    position: relative;
    left: auto;
    margin-bottom: 12px;
}

.dispatch-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid var(--police-red);
    opacity: 0.5;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.03); opacity: 0.8; }
}

.dispatch-badge i {
    font-size: 1.5rem;
    color: var(--police-red);
    animation: radar-pulse 2s ease-in-out infinite;
}

@keyframes radar-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}

/* Enhanced VOD Section Styles */
.vod-showcase {
    background: rgba(20, 20, 22, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin: 24px auto;
    max-width: 1400px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 0 0 0.5px rgba(255, 255, 255, 0.03) inset;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vod-showcase::before {
    display: none; /* Remove yellow scan line for Apple aesthetic */
}

@keyframes vod-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

.vod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.vod-card {
    background: rgba(28, 28, 30, 0.72);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition:
        transform var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base) var(--ease-smooth),
        border-color var(--duration-base) var(--ease-smooth),
        background var(--duration-base) var(--ease-smooth);
    cursor: pointer;
    position: relative;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(255, 255, 255, 0.02) inset;
    transform: translate3d(0, 0, 0);
}

.vod-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 0 0 0.5px rgba(255, 255, 255, 0.05) inset;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(28, 28, 30, 0.85);
}

.vod-card:active {
    transform: translate3d(0, -2px, 0);
    transition-duration: var(--duration-fast);
}

.vod-card-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: 600;
}

.vod-card-header.current-playing {
    background: rgba(48, 209, 88, 0.08);
    border-bottom: 1px solid rgba(48, 209, 88, 0.3);
    box-shadow: inset 0 0 10px rgba(48, 209, 88, 0.05);
}

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

.vod-status-indicator.playing {
    color: #00ff00;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.vod-part-badge {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.vod-part-badge:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 1);
}

.vod-card-body {
    padding: 16px;
}

.vod-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.4;
}

.vod-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 14px;
    border-radius: 6px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}

.vod-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vod-meta-item i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.vod-meta-item span {
    font-weight: 400;
    letter-spacing: 0.2px;
}

.vod-action-button {
    width: 100%;
    padding: 12px 24px;
    background: rgba(10, 132, 255, 0.12);
    border: 1px solid rgba(10, 132, 255, 0.4);
    border-radius: 12px;
    color: #0A84FF;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 0.9375rem;
    text-transform: none;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    min-height: 44px;
}

.vod-action-button:hover {
    background: rgba(10, 132, 255, 0.2);
    border-color: rgba(10, 132, 255, 0.6);
    transform: translateY(-1px);
    text-decoration: none;
    color: #4DA3FF;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.2);
}

.vod-action-button:active {
    transform: translateY(0) scale(0.98);
    background: rgba(10, 132, 255, 0.15);
}

.vod-switch-button {
    width: 100%;
    margin-bottom: 5px;
}

.vod-external-link {
    display: inline-block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: center;
    font-weight: 500;
}

.vod-external-link:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.vod-external-link i {
    font-size: 0.75rem;
    margin-left: 4px;
}

.vod-current-indicator {
    padding: 10px 16px;
    background: transparent;
    border: 1.5px solid rgba(48, 209, 88, 0.6);
    border-radius: 10px;
    text-align: center;
    color: rgba(48, 209, 88, 1);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.vod-current-indicator:hover {
    border-color: rgba(48, 209, 88, 0.9);
    background: rgba(48, 209, 88, 0.05);
}

.vod-interruption-notice {
    background: rgba(30, 30, 32, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(255, 159, 10, 0.6);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vod-interruption-notice i {
    color: rgba(255, 159, 10, 0.8);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.vod-interruption-text {
    flex: 1;
    min-width: 0;
}

.vod-interruption-title {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

.vod-interruption-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

/* Stream Metadata Card (Apple-Level) */
.stream-metadata-card {
    background: rgba(28, 28, 30, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    margin: 24px auto;
    max-width: 800px;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.12),
        0 0 0 0.5px rgba(255, 255, 255, 0.02) inset;
}

.metadata-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    font-family: 'Orbitron', sans-serif;
}

.metadata-description {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin-bottom: 16px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Rajdhani', sans-serif;
}

.metadata-content {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.metadata-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-family: 'Rajdhani', sans-serif;
}

.metadata-item i {
    color: rgba(10, 132, 255, 0.7);
    width: 18px;
    text-align: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.metadata-item span {
    flex: 1;
    min-width: 0;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .stream-metadata-card {
        padding: 20px 16px;
        margin: 16px;
        border-radius: 14px;
    }

    .metadata-title {
        font-size: 1.25rem;
    }

    .metadata-description {
        font-size: 0.875rem;
        margin-bottom: 16px;
    }

    .metadata-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .metadata-item {
        font-size: 0.8125rem;
    }

    .vod-showcase {
        padding: 15px 12px;
        margin: 15px 5px;
        border-radius: 12px;
    }

    .vod-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .vod-card {
        border-radius: 8px;
    }

    .vod-card-header {
        padding: 8px 10px;
    }
    
    /* Bigger video embed on mobile */
    .latest-vod-display:not(.no-stream-vods) {
        padding: 20px 0 0 0 !important;
        margin: 10px 0 !important;
        overflow: visible !important;
    }

    /* No-stream-vods gets different treatment - no overflow */
    .latest-vod-display.no-stream-vods {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ensure all children use border-box and can't overflow */
    .latest-vod-display.no-stream-vods *,
    .latest-vod-display.no-stream-vods *::before,
    .latest-vod-display.no-stream-vods *::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Fix video container alignment on mobile */
    /* ONLY apply full-width to VOD embeds NOT in no-stream-vods section */
    .latest-vod-display:not(.no-stream-vods) .vod-embed-container {
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* For no-stream-vods, keep embed constrained within container */
    .latest-vod-display.no-stream-vods .vod-embed-container {
        margin: 0 !important;
        margin-bottom: 32px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #000 !important;
        width: 100% !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Keep proper 16:9 aspect ratio on mobile */
    .vod-aspect-wrapper {
        position: relative !important;
        padding-bottom: 56.25% !important; /* Maintain 16:9 ratio */
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Make video player properly positioned and sized */
    #vod-player {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        border-radius: 0 !important; /* Remove radius from iframe to prevent cutoff */
    }
    
    /* Ensure the blue border container doesn't cut off content */
    .latest-vod-display .vod-embed-container {
        box-sizing: border-box !important;
    }

    /* Add spacing to content that was inside latest-vod-display */
    /* ONLY for non-no-stream-vods sections */
    .latest-vod-display:not(.no-stream-vods) > *:not(.vod-embed-container) {
        padding: 0 16px !important;
    }

    /* Fix no-stream-vods section on mobile - restore proper padding */
    /* Made hyper-specific to override all other rules */
    .stream-announcement.no-stream-today .no-stream-announcement .latest-vod-display.no-stream-vods {
        padding: 24px 16px 24px 16px !important;
    }

    /* NO extra padding on children - they have inline styles already */
    /* Removed the child padding rule for no-stream-vods to prevent double padding */

    .vod-card-body {
        padding: 10px;
    }

    .vod-title {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .vod-meta {
        font-size: 0.9rem;
        gap: 15px;
        padding: 10px 12px;
    }

    .vod-action-button {
        padding: 8px;
        font-size: 0.9rem;
    }

    .vod-interruption-notice {
        padding: 8px 10px;
        gap: 8px;
    }

    .vod-interruption-title {
        font-size: 0.85rem;
    }

    .vod-interruption-desc {
        font-size: 0.75rem;
    }

    .vod-card:hover {
        transform: none;
    }

    .vod-card:active {
        transform: scale(0.98);
    }
}

.announcement-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    margin: 0 auto;
}

.dispatch-header {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    text-align: center;
}

.live-indicator {
    color: var(--neon-green);
    text-shadow: 0 0 15px var(--neon-green);
    animation: live-flash 1s ease-in-out infinite;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Pulsing dot before LIVE NOW text */
.live-indicator::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--status-live);
    border-radius: 50%;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
        box-shadow: 0 0 16px rgba(0, 255, 0, 0.9);
    }
}

/* Live platform indicators */
.live-platforms-indicators {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .live-platforms-indicators {
        display: flex !important;
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .dispatch-header {
        flex-direction: column;
        align-items: center;
    }
}

@keyframes live-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.status-indicator {
    color: #64b5f6; /* Bright cyan - Apple design */
    text-shadow:
        0 0 15px rgba(100, 181, 246, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: 700;
    letter-spacing: 2px;
}

.stream-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 100%;
}

.stream-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff; /* White - Maximum readability, Apple design */
    letter-spacing: 0.5px;
    font-family: 'Orbitron', monospace;
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    text-align: center;
    padding: 8px 20px;
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: 10px;
    position: relative;
    display: inline-block;
    min-width: 200px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    overflow: hidden;
}

.stream-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(10, 132, 255, 0.15),
        transparent);
    animation: title-scan 4s linear infinite;
}

@keyframes title-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

.stream-title:hover {
    background: rgba(10, 132, 255, 0.12);
    border-color: rgba(10, 132, 255, 0.5);
    transform: scale(1.02);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(10, 132, 255, 0.2);
}

.stream-time {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 3px auto;
    background: rgba(10, 132, 255, 0.08);
    padding: 6px 20px;
    border-radius: 25px;
    border: 1px solid rgba(10, 132, 255, 0.3);
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.15);
    width: fit-content;
}

.stream-time i {
    color: #64b5f6; /* Cyan - matches header */
    font-size: 1.2rem;
    text-shadow: 0 0 8px rgba(100, 181, 246, 0.4);
}

.live-viewer-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    color: var(--neon-green);
    margin: 12px auto 8px auto;
    background: rgba(0, 255, 0, 0.15);
    padding: 8px 24px;
    border-radius: 25px;
    border: 1px solid rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.25);
    width: fit-content;
    font-weight: 600;
    animation: subtle-pulse 2s ease-in-out infinite;
}

.live-viewer-count i {
    font-size: 1.3rem;
    filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.5));
}

.stream-duration {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 3px auto 3px auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
}

.stream-duration i {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.duration-value {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

@keyframes subtle-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

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

.time-value {
    color: #0a84ff; /* Bright blue - Apple design, matches border */
    font-weight: 800;
    font-size: 1.3rem;
    font-family: 'Orbitron', monospace;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(10, 132, 255, 0.5);
    animation: time-pulse 2s ease-in-out infinite;
}

@keyframes time-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.01); }
}

.stream-description {
    font-family: -apple-system, BlinkMacSystemFont, 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    letter-spacing: 0.2px;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 14px 18px 14px 16px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.12) 0%, rgba(10, 132, 255, 0.06) 100%);
    border: 1px solid rgba(10, 132, 255, 0.35);
    border-left: 3px solid rgba(10, 132, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stream-description:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(10, 132, 255, 0.2);
    border-left-color: rgba(10, 132, 255, 1);
}

/* ============================================
   LIVE STREAM STATE - Minimal Glass Design
   Apple-Level Premium (Option B)
   ============================================ */

/* Live Stream Title - Hero Typography, No Box */
.stream-announcement.has-stream[data-stream-id] .stream-title {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(48, 209, 88, 0.3) !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
}

/* Remove blue scanning animation for live streams */
.stream-announcement.has-stream[data-stream-id] .stream-title::before {
    display: none !important;
}

/* Live stream title hover - subtle green glow increase */
.stream-announcement.has-stream[data-stream-id] .stream-title:hover {
    background: transparent !important;
    transform: none !important;
    text-shadow: 0 0 25px rgba(48, 209, 88, 0.4) !important;
    box-shadow: none !important;
}

/* Live Stream Description - Minimal Glass, No Borders, Italic Context */
.stream-announcement.has-stream[data-stream-id] .stream-description {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Live description hover - subtle lift, brighter text */
.stream-announcement.has-stream[data-stream-id] .stream-description:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Time format toggle button styles */
#time-format-toggle {
    position: relative;
    overflow: hidden;
}

#time-format-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 71, 171, 0.3);
}

#time-format-toggle:active {
    transform: translateY(0);
}

#time-format-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

#time-format-toggle:hover::before {
    left: 100%;
}

/* Timezone display responsive styles */
.timezone-display {
    animation: fadeIn 0.6s ease-in;
}

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

.timezone-conversions {
    container-type: inline-size;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}

/* Ensure adequate touch targets */
.timezone-conversions > div {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: default;
    transition: background-color 0.2s ease;
}

.timezone-conversions > div:hover {
    background: rgba(255,255,255,0.1);
}

/* Desktop styles - 4 columns */
@media (min-width: 1024px) {
    .timezone-conversions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablet styles - 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .timezone-conversions {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile styles with improved readability - 2 columns */
@media (max-width: 767px) {
    .timezone-conversions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .timezone-conversions > div {
        font-size: 0.875rem !important; /* 14px minimum for readability */
        padding: 10px 6px !important;
    }
}

/* Very small mobile - 2 columns */
@media (max-width: 480px) {
    .timezone-conversions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .timezone-conversions > div {
        font-size: 0.875rem !important; /* 14px minimum for readability */
        padding: 10px 6px !important;
    }

    .timezone-display {
        padding: 12px !important;
    }

    .timezone-display .tz-flag {
        display: none; /* Hide flag emojis on small screens for consistency */
    }

    #live-central-time {
        font-size: 1.1rem !important;
    }

    /* Improve Texas map size on mobile */
    .timezone-display svg {
        width: 40px !important;
        height: 40px !important;
    }

    /* Mobile-optimized time format toggle */
    #time-format-toggle {
        font-size: 0.8rem !important;
        padding: 5px 10px !important;
    }

    #time-format-toggle i {
        font-size: 0.9rem;
    }

    .timezone-item .tz-time {
        font-size: 0.85rem !important;
    }
}

/* Landscape orientation support */
@media (max-height: 500px) and (orientation: landscape) {
    .timezone-display {
        padding: 10px !important;
    }

    .timezone-conversions > div {
        padding: 8px 6px;
        font-size: 0.85rem;
    }

    #live-central-time {
        font-size: 0.95rem !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timezone-display {
        border: 2px solid #fff !important;
    }

    .timezone-conversions > div {
        border: 1px solid rgba(255,255,255,0.5) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timezone-display,
    .timezone-display * {
        animation: none !important;
    }
}

/* Creator badge base styles - Always visible - Apple Quality */
.creator-badge {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.creator-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3) !important;
}

/* Desktop positioning for creator badge */
@media (min-width: 769px) {
    .creator-badge {
        position: absolute !important;
        top: 12px !important;
        right: 15px !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border: 1.5px solid rgba(10, 132, 255, 0.5) !important;
        border-radius: 20px !important;
        padding: 6px 14px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
    }
}

/* Creator badge responsive styles */
@media (max-width: 768px) {
    .creator-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 6px !important;
        order: 999 !important; /* Move to bottom */
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1.5px solid rgba(10, 132, 255, 0.5) !important;
        border-radius: 20px !important;
        padding: 6px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .announcement-content {
        display: flex !important;
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    .creator-badge {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
        flex-wrap: wrap !important;
        line-height: 1.2 !important;
    }
    
    .creator-badge span:first-child {
        font-size: 0.6rem !important;
        margin-right: 2px !important;
    }
}

.no-stream-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.2rem;
    color: #666;
    padding: 10px;
    font-weight: 500;
}

.no-stream-message i {
    font-size: 1.7rem;
    color: #555;
}

/* Scanner Alert Animation - Blue Pulse for Scheduled Streams */
@keyframes scanner-alert-blue {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(10, 132, 255, 0.15) inset,
            0 0 15px rgba(10, 132, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 30px rgba(10, 132, 255, 0.25) inset,
            0 0 25px rgba(10, 132, 255, 0.2);
    }
}

/* Blue pulse only for scheduled streams (not live) */
.stream-announcement.has-stream:not([data-stream-id]) .announcement-content.active {
    animation: scanner-alert-blue 4s ease-in-out infinite;
}

/* Modern News Ticker with Performance Optimizations */
.news-ticker-wrapper {
    background: #000; /* Simple black for mobile performance */
    border: none;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
    contain: layout style paint;
    /* Remove will-change to save memory on mobile */
}

/* Desktop only - add gradient and will-change */
@media (min-width: 768px) {
    .news-ticker-wrapper {
        background: linear-gradient(90deg, #0a0a0a 0%, #000000 50%, #0a0a0a 100%);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        will-change: contents;
    }
}



/* Ticker container defined below with all properties */

.ticker-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #0077ff;
    text-align: center;
    line-height: 1.2;
}

/* Remove the badge elements - not needed for pro style */
.ticker-badge {
    display: none;
}

/* Main ticker container - optimized */
.news-ticker {
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Modern gradient edges with blur effect - Optimized for readability */
.news-ticker::before,
.news-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px; /* Reduced default width */
    z-index: 50;
    pointer-events: none;
}

.news-ticker::before {
    left: 0;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.5) 60%, 
        transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.news-ticker::after {
    right: 0;
    background: linear-gradient(to left, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.5) 60%, 
        transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 60px; /* Reduced to not overlap timestamp */
}

/* Optimized ticker content with GPU acceleration */
.ticker-content {
    display: flex;
    gap: 0;
    animation: ticker-scroll var(--ticker-duration, 60s) linear infinite;
    white-space: nowrap;
    padding-left: 100%;
    padding-right: 120px; /* Space for timestamp on desktop only */
    /* Remove will-change on mobile to save memory */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Prevent text flickering */
    text-rendering: optimizeSpeed; /* Better performance on mobile */
    -webkit-font-smoothing: antialiased;
}

/* Desktop only - enable will-change */
@media (min-width: 768px) {
    .ticker-content {
        will-change: transform;
    }
}

/* Performance optimizations for low-end devices */
body.perf-low .ticker-content {
    transform: translateX(0) !important; /* Use 2D transform */
    will-change: auto !important; /* Disable will-change */
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    animation-timing-function: linear !important;
}

body.perf-low .news-ticker-wrapper {
    background: #000 !important; /* Simple solid color */
    box-shadow: none !important; /* Remove shadows */
    border: 1px solid #333 !important;
}

body.perf-low .ticker-item {
    transition: none !important; /* Remove transitions */
}

body.perf-low .ticker-item:hover {
    transform: none !important;
    text-shadow: none !important;
}

body.perf-low .ticker-icon {
    filter: none !important; /* Remove filter effects */
}

body.perf-low .news-ticker::before,
body.perf-low .news-ticker::after {
    display: none !important; /* Remove gradient overlays */
}

/* Minimal mode for accessibility */
body.perf-minimal .ticker-content {
    animation: none !important;
    padding-left: 20px !important;
    overflow-x: auto !important;
}

body.perf-minimal .news-ticker {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

body.perf-minimal .news-ticker:hover .ticker-content {
    animation-play-state: running !important; /* Don't pause on hover */
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .ticker-content {
        /* Don't override animation-duration - let admin settings control it */
        /* The duration is set by JavaScript from admin panel settings */
        /* Reduce gap for smaller screens */
        gap: 30px;
        padding-right: 20px;
    }

    /* Simplify ticker wrapper gradient on mobile */
    .news-ticker-wrapper {
        background: #000;
        border-top: 1px solid rgba(220, 20, 60, 0.5);
        border-bottom: 1px solid rgba(0, 71, 171, 0.5);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ticker-content {
        animation: none;
        padding-left: 0;
    }
}

@keyframes ticker-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Last updated timestamp */
.ticker-last-updated {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.ticker-last-updated i {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Modern ticker items with smooth transitions */
.ticker-item {
    display: inline-flex;
    align-items: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    padding: 0 25px;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.ticker-item:hover {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transform: translateY(-1px);
}

/* Separator bullets between items */
.ticker-item:not(:last-child)::after {
    content: '•';
    position: absolute;
    right: 0;
    color: #666;
    font-size: 0.6rem;
}

/* Category labels with icons */
.ticker-icon {
    font-size: 0.75rem;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    /* Mobile responsive adjustments */
}


/* Enhanced category styling with glow effects */
.ticker-item.weather .ticker-icon {
    color: #4a90e2;
    filter: drop-shadow(0 0 3px rgba(74, 144, 226, 0.6));
}

.ticker-item.traffic .ticker-icon {
    color: #e74c3c;
    filter: drop-shadow(0 0 3px rgba(231, 76, 60, 0.6));
}

.ticker-item.crime .ticker-icon {
    color: #e67e22;
    filter: drop-shadow(0 0 3px rgba(230, 126, 34, 0.6));
}

.ticker-item.alert {
    font-weight: 700;
}

.ticker-item.alert .ticker-icon {
    color: #f1c40f;
    animation: pulse-icon 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(241, 196, 15, 0.8));
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.ticker-item.news .ticker-icon {
    color: #95a5a6;
}

/* Category prefix styling */
.ticker-category {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 6px;
    opacity: 0.8;
}

.ticker-item.weather .ticker-category { color: #4a90e2; }
.ticker-item.traffic .ticker-category { color: #e74c3c; }
.ticker-item.crime .ticker-category { color: #e67e22; }
.ticker-item.alert .ticker-category { color: #f1c40f; }
.ticker-item.news .ticker-category { color: #95a5a6; }

/* Time stamps (optional) */
.ticker-time {
    font-size: 0.7rem;
    color: #666;
    margin-left: 8px;
    font-family: 'Share Tech Mono', monospace;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ticker-header {
        width: 90px;
    }
    
    .ticker-label {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    .news-ticker {
        height: 32px;
        margin-left: 0; /* Changed from 93px to 0 */
    }
    
    .ticker-item {
        font-size: 0.75rem;
        padding: 0 15px;
    }
    
    .ticker-category {
        font-size: 0.65rem;
    }
    
    .ticker-icon {
        font-size: 0.65rem;
    }
    
    /* Enhanced stream title on mobile */
    .stream-title {
        padding: 6px 14px;
        min-width: 140px;
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }
}

/* Ultra-wide screen optimization */
@media (min-width: 1920px) {
    /* Don't override - let admin settings control ticker speed */
    /* .ticker-content animation-duration is set by JavaScript */
}

/* Smooth pause on hover */
.news-ticker:hover .ticker-content {
    animation-play-state: paused;
    filter: brightness(1.1);
}

/* Loading state */
.ticker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    color: #666;
    font-size: 0.8rem;
    font-style: italic;
}

/* Emergency flash animation for critical alerts */
@keyframes emergency-flash {
    0%, 100% { background-color: #111; }
    50% { background-color: #330000; }
}

/* Emergency ticker item styling */
.ticker-item.emergency {
    color: #ff0000 !important;
    font-weight: 700;
}

.ticker-item.emergency .ticker-icon {
    color: #ff0000;
    animation: pulse-icon 1s ease-in-out infinite;
}

.ticker-item.emergency .ticker-category {
    color: #ff0000 !important;
    animation: pulse-icon 1s ease-in-out infinite;
}


.news-ticker.emergency-active {
    animation: emergency-flash 2s ease-in-out infinite;
}

        /* Scanner Hover Effects - RED Theme (Not Green) */
        .scanner-status:hover {
            box-shadow: 0 10px 30px rgba(255, 0, 0, 0.4) !important;
            background: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
            border-color: #ff3333 !important;
            transform: translateY(-5px);
        }

        /* Remove any purple text decorations */
.scanner-status * {
    text-decoration: none !important;
}

/* Allow status text colors to work */
.scanner-status .status-indicator span:last-child {
    /* Don't inherit color for status text */
}

        /* Scanner Badge */
        .scanner-badge {
            display: inline-block;
            width: 60px;
            height: 60px;
            background: rgba(255, 0, 0, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            border: 2px solid var(--youtube-red);
            position: relative;
        }

        .scanner-badge i {
            font-size: 2rem;
            color: var(--youtube-red) !important;
            animation: radio-pulse 2s ease-in-out infinite;
            filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5));
        }

        /* Platform Name - White, no underline */
        .scanner-status .platform-name {
            color: #ffffff !important;
            text-shadow: none !important;
            text-decoration: none !important;
        }

        /* Status Indicator Container */
        .scanner-status .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 20px;
            border-radius: 25px;
            background: rgba(0, 0, 0, 0.6);
            font-weight: 600;
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-decoration: none !important;
            transition: border-color 0.3s ease;
        }
        
        /* Green border only when YouTube is online */
        .scanner-status .status-indicator:has(.status-dot.online) {
            border-color: rgba(0, 255, 0, 0.3);
        }

        /* Viewer Count */
        .scanner-status .viewer-count {
            color: #ffffff !important;
            text-decoration: none !important;
        }

        .scanner-status .viewer-count i {
            color: #00ff00 !important;
            filter: drop-shadow(0 0 3px rgba(0, 255, 0, 0.5));
        }

        /* Scanner Frequency */
        .scanner-frequency {
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.85rem;
            color: var(--neon-green);
            text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
            margin-top: 10px;
            letter-spacing: 1px;
            background: rgba(255, 0, 0, 0.1);
            padding: 5px 15px;
            border-radius: 20px;
            display: inline-block;
            text-decoration: none !important;
        }

        /* Hover state for scanner badge */
        .scanner-status:hover .scanner-badge {
            background: rgba(255, 0, 0, 0.3);
            transform: scale(1.05);
            border-color: #ff3333;
        }

        /* Remove default link focus outline and replace with custom */
        .scanner-status:focus {
            outline: 2px solid var(--youtube-red);
            outline-offset: 3px;
            text-decoration: none !important;
        }

        /* Ensure no text decoration on any child elements */
        .scanner-status h1,
        .scanner-status h2,
        .scanner-status h3,
        .scanner-status h4,
        .scanner-status h5,
        .scanner-status h6,
        .scanner-status p,
        .scanner-status span,
        .scanner-status div {
            text-decoration: none !important;
        }

        /* Loading Screen */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(5, 5, 5, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s, visibility 0.5s;
        }

        .loader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-content {
            text-align: center;
            background: #111;
            border: 3px solid #333;
            border-radius: 15px;
            padding: 40px 60px;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
            position: relative;
            overflow: hidden;
        }

        .loader-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--police-red), transparent);
            animation: loader-scan 2s linear infinite;
        }

        .loader-content::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--police-blue), transparent);
            animation: loader-scan 2s linear infinite reverse;
        }

        @keyframes loader-scan {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .scanner-loader-display {
            background: #001a00;
            border: 2px solid #003300;
            border-radius: 8px;
            padding: 20px 30px;
            margin-bottom: 25px;
            position: relative;
            box-shadow: 
                inset 0 0 20px rgba(0, 0, 0, 0.8),
                0 0 30px rgba(0, 255, 0, 0.1);
            overflow: hidden;
        }
        
        .scanner-loader-display::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(0, 255, 0, 0.03) 2px,
                    rgba(0, 255, 0, 0.03) 4px
                );
            pointer-events: none;
            animation: scan-lines 8s linear infinite;
        }
        
        @keyframes scan-lines {
            0% { transform: translateY(0); }
            100% { transform: translateY(10px); }
        }

        .loader-indicator {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            top: 10px;
            z-index: 2;
            animation: blink-light 1s ease-in-out infinite;
        }
        
        .loader-indicator.red {
            left: 10px;
            background: var(--police-red);
            box-shadow: 0 0 10px var(--police-red);
        }
        
        .loader-indicator.blue {
            right: 10px;
            background: var(--police-blue);
            box-shadow: 0 0 10px var(--police-blue);
            animation-delay: 0.5s;
        }

        @keyframes blink-light {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        .frequency-loader {
            font-family: 'Share Tech Mono', monospace;
            font-size: 1.8rem;
            color: var(--neon-green);
            text-shadow: 0 0 10px var(--neon-green);
            letter-spacing: 3px;
            margin-bottom: 15px;
            animation: freq-flash 1s ease-in-out infinite;
        }

        @keyframes freq-flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        .radio-icon-loader {
            font-size: 3rem;
            color: var(--police-red);
            margin-bottom: 20px;
            animation: radio-pulse-loader 2s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(220, 20, 60, 0.5));
        }

        @keyframes radio-pulse-loader {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }

        .loader-visualizer {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 4px;
            height: 40px;
            margin: 20px 0;
        }

        .loader-bar {
            width: 6px;
            background: linear-gradient(to top, var(--neon-green) 0%, #00ff00aa 50%, #00ff0066 100%);
            border-radius: 3px 3px 0 0;
            box-shadow: 0 0 10px var(--neon-green);
            opacity: 0.85;
        }

        .loader-bar:nth-child(1) { animation: loader-wave 0.8s ease-in-out infinite; height: 20%; }
        .loader-bar:nth-child(2) { animation: loader-wave 0.8s ease-in-out 0.1s infinite; height: 40%; }
        .loader-bar:nth-child(3) { animation: loader-wave 0.8s ease-in-out 0.2s infinite; height: 60%; }
        .loader-bar:nth-child(4) { animation: loader-wave 0.8s ease-in-out 0.3s infinite; height: 80%; }
        .loader-bar:nth-child(5) { animation: loader-wave 0.8s ease-in-out 0.4s infinite; height: 100%; }
        .loader-bar:nth-child(6) { animation: loader-wave 0.8s ease-in-out 0.5s infinite; height: 85%; }
        .loader-bar:nth-child(7) { animation: loader-wave 0.8s ease-in-out 0.6s infinite; height: 65%; }
        .loader-bar:nth-child(8) { animation: loader-wave 0.8s ease-in-out 0.7s infinite; height: 45%; }

        @keyframes loader-wave {
            0%, 100% { 
                height: 20%;
                opacity: 0.3;
            }
            50% { 
                height: 100%;
                opacity: 1;
            }
        }

        .loader-text {
            font-family: 'Orbitron', monospace;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--text-primary);
            margin-top: 20px;
            opacity: 0;
            animation: loader-text-fade 2s ease-in-out infinite;
        }

        @keyframes loader-text-fade {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .scanner-status-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
            padding: 8px 20px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 20px;
            border: 1px solid rgba(0, 255, 0, 0.3);
        }

        .status-dot-loader {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--neon-green);
            box-shadow: 0 0 10px var(--neon-green);
            animation: pulse-loader 1s ease-in-out infinite;
        }

        @keyframes pulse-loader {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
        }

        .scanner-text-loader {
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.9rem;
            color: var(--neon-green);
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
            letter-spacing: 1px;
        }

        /* Header */
       .header {
    background: linear-gradient(to bottom, var(--bg-darker) 0%, transparent 100%);
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Add a subtle fade effect instead of hard border */
.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-dark) 100%);
    pointer-events: none;
}

        .header::before,
        .header::after {
            content: '';
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            opacity: 0.1;
        }

        .header::before {
            left: 0;
            background: linear-gradient(90deg, transparent, var(--police-red), transparent);
            animation: scan-left 4s linear infinite;
        }

        .header::after {
            right: 0;
            background: linear-gradient(90deg, transparent, var(--police-blue), transparent);
            animation: scan-right 4s linear infinite;
        }

        @keyframes scan-left {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        @keyframes scan-right {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .main-title {
            font-family: 'Black Ops One', cursive;
            font-size: clamp(3rem, 8vw, 5rem);
            text-transform: uppercase;
            letter-spacing: 8px;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
            display: inline-block;
        }

        
        /* Individual letter scanning effect with police lights */
        .main-title span {
            display: inline-block;
            color: var(--text-primary);
            position: relative;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }
        
        /* Alternating red/blue police light animation */
        .main-title span:nth-child(odd) { 
            animation: police-lights-red 2s linear infinite;
        }
        .main-title span:nth-child(even) { 
            animation: police-lights-blue 2s linear infinite;
        }
        
        /* Stagger the animation for wave effect */
        .main-title span:nth-child(1) { animation-delay: 0s; }
        .main-title span:nth-child(2) { animation-delay: 0.1s; }
        .main-title span:nth-child(3) { animation-delay: 0.2s; }
        .main-title span:nth-child(4) { animation-delay: 0.3s; }
        .main-title span:nth-child(5) { animation-delay: 0.4s; }
        .main-title span:nth-child(6) { animation-delay: 0.5s; }
        .main-title span:nth-child(7) { animation-delay: 0.6s; }
        .main-title span:nth-child(8) { animation-delay: 0.7s; }
        .main-title span:nth-child(9) { animation-delay: 0.8s; }
        .main-title span:nth-child(10) { animation-delay: 0.9s; }
        
        @keyframes police-lights-red {
            0%, 100% {
                color: var(--text-primary);
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
                filter: brightness(1);
            }
            25% {
                color: var(--text-primary);
                text-shadow: 0 0 15px rgba(220, 20, 60, 0.4),
                            0 0 25px rgba(220, 20, 60, 0.3),
                            0 0 35px rgba(220, 20, 60, 0.2);
                filter: brightness(1.1);
            }
        }
        
        @keyframes police-lights-blue {
            0%, 100% {
                color: var(--text-primary);
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
                filter: brightness(1);
            }
            75% {
                color: var(--text-primary);
                text-shadow: 0 0 15px rgba(0, 71, 171, 0.4),
                            0 0 25px rgba(0, 71, 171, 0.3),
                            0 0 35px rgba(0, 71, 171, 0.2);
                filter: brightness(1.1);
            }
        }
        
        /* Radio static flicker animation */
        @keyframes radio-static {
            0% {
                opacity: 1;
                filter: brightness(1) contrast(1);
            }
            10% {
                opacity: 0.97;
                filter: brightness(1.1) contrast(1.05);
            }
            20% {
                opacity: 1;
                filter: brightness(0.95) contrast(1);
            }
            30% {
                opacity: 0.98;
                filter: brightness(1.05) contrast(0.98);
            }
            40% {
                opacity: 1;
                filter: brightness(1) contrast(1);
            }
            50% {
                opacity: 0.96;
                filter: brightness(0.98) contrast(1.02);
            }
            60% {
                opacity: 1;
                filter: brightness(1.02) contrast(1);
            }
            70% {
                opacity: 0.98;
                filter: brightness(0.97) contrast(1.01);
            }
            80% {
                opacity: 1;
                filter: brightness(1.01) contrast(0.99);
            }
            90% {
                opacity: 0.99;
                filter: brightness(0.99) contrast(1);
            }
            100% {
                opacity: 1;
                filter: brightness(1) contrast(1);
            }
        }
        
        /* Scan lines animation */
        @keyframes scan-lines {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(10px);
            }
        }
        
        

        .tagline {
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            color: var(--white-muted);
            letter-spacing: var(--letter-spacing-wide);
            text-transform: uppercase;
            position: relative;
            z-index: 2;
            font-family: var(--font-secondary);
            font-weight: 600;
            margin-top: var(--space-1);
        }
        
        /* Scanner frequency display - removed */
        .scanner-frequency {
            display: none;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 5px;
            animation: freq-flicker 0.1s infinite;
        }
        
        .freq-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .freq-number {
            font-weight: bold;
            text-shadow: 0 0 10px var(--neon-green);
        }
        
        .freq-unit {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* Scanner indicators */
        .scanner-indicators {
            position: absolute;
            top: 15px;
            right: 20px;
            display: flex;
            gap: 15px;
        }
        
        .indicator {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .indicator.active {
            color: var(--neon-green);
            border-color: var(--neon-green);
            box-shadow: 0 0 15px var(--neon-green);
            animation: indicator-pulse 1s ease-in-out infinite;
        }
        
        .indicator.scanning {
            color: var(--warning-yellow);
            border-color: var(--warning-yellow);
            animation: scanning-rotate 2s linear infinite;
        }
        
        .indicator.online {
            color: var(--police-blue);
            border-color: var(--police-blue);
            animation: signal-bars 1.5s ease-in-out infinite;
        }
        
        @keyframes freq-flicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.95; }
        }
        
        @keyframes indicator-pulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
        }
        
        @keyframes scanning-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes signal-bars {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        /* Main Container */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px 20px 40px;
            position: relative;
        }


        /* Police Light Bar */
        .police-light-bar {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            position: relative;
        }

        .emergency-light {
            width: 60px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .emergency-light:hover {
            transform: scale(1.1);
        }

        .emergency-light.red {
            background: var(--police-red);
            box-shadow: 0 0 20px var(--police-red);
            animation: flash-red 1s ease-in-out infinite;
        }

        .emergency-light.blue {
            background: var(--police-blue);
            box-shadow: 0 0 20px var(--police-blue);
            animation: flash-blue 1s ease-in-out infinite;
            animation-delay: 0.5s;
        }

        @keyframes flash-red {
            0%, 100% { opacity: 0.3; box-shadow: 0 0 10px var(--police-red); }
            50% { opacity: 1; box-shadow: 0 0 40px var(--police-red), 0 0 60px var(--police-red); }
        }

        @keyframes flash-blue {
            0%, 100% { opacity: 0.3; box-shadow: 0 0 10px var(--police-blue); }
            50% { opacity: 1; box-shadow: 0 0 40px var(--police-blue), 0 0 60px var(--police-blue); }
        }

        /* Dashboard Grid */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin: 20px 0 40px;
        }

        /* News Ticker Styles - moved above for consolidation */

        .news-ticker-wrapper::before,
        .news-ticker-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100px;
            z-index: 10;
            pointer-events: none;
        }

        .news-ticker-wrapper::before {
            left: 0;
            background: linear-gradient(to right, rgba(0, 0, 0, 0.95), transparent);
        }

        .news-ticker-wrapper::after {
            right: 0;
            background: linear-gradient(to left, rgba(0, 0, 0, 0.95), transparent);
        }

        .ticker-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 5px 0;
            background: rgba(0, 71, 171, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .ticker-badge {
            width: 25px;
            height: 25px;
            background: linear-gradient(135deg, rgba(220, 20, 60, 0.3) 0%, rgba(220, 20, 60, 0.1) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--police-red);
            animation: badge-pulse 2s ease-in-out infinite;
        }

        .ticker-badge i {
            font-size: 0.8rem;
            color: var(--police-red);
        }

        .ticker-badge:nth-child(3) {
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 100%);
            border-color: var(--warning-yellow);
            animation-delay: 1s;
        }

        .ticker-badge:nth-child(3) i {
            color: var(--warning-yellow);
        }

        .ticker-label {
            font-family: 'Orbitron', monospace;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

       /* Ticker styles consolidated - removed duplicate */

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Different styles for different news types */
.ticker-item.weather {
    color: #ffd700;
}

.ticker-item.traffic {
    color: #ff6b6b;
}

.ticker-item.crime {
    color: #ff9999;
}

.ticker-item.alert {
    color: var(--warning-yellow);
    text-transform: uppercase;
}

.ticker-item.news {
    color: var(--text-primary);
}
        /* Pause on hover */
        .news-ticker:hover .ticker-content {
            animation-play-state: paused;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header {
                padding: 40px 20px 20px;
            }

            .main-title {
                font-size: 2.5rem;
                letter-spacing: 4px;
            }

            .scanner-frequency {
                display: none;
            }
            
            .scanner-indicators {
                position: static;
                margin-top: 10px;
                justify-content: center;
            }
            
            .indicator {
                width: 25px;
                height: 25px;
                font-size: 0.8rem;
            }
            
            /* Add more space between icons and Brazoria County text on mobile */
            .header-location {
                margin-top: 20px !important; /* Increased from 2px to 20px for mobile */
            }
            
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
            
            .social-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .weather-main {
                flex-direction: column;
                text-align: center;
            }
            
            .police-light-bar {
                flex-wrap: wrap;
            }
            
            .announcement-container {
                padding: 0 15px;
            }

            /* Prevent overflow on announcement wrapper */
            .stream-announcement.no-stream-today .announcement-wrapper {
                overflow: hidden !important;
                max-width: 100% !important;
            }
            
            .announcement-content {
                flex-direction: column;
                padding: 30px 15px 15px 15px; /* Increased top padding for badge clearance */
                gap: 12px;
                justify-content: center;
                overflow: visible; /* Allow badge to display properly - Apple quality */
                border-radius: 13px;
            }

            /* Ensure no-stream-announcement keeps its padding */
            .announcement-content.no-stream-announcement {
                padding: 30px 15px 15px 15px !important;
                overflow: hidden !important;
            }
            
            .announcement-main {
                flex-direction: column;
                text-align: center;
                gap: 12px;
                margin-left: 0;
                padding-left: 0;
            }
            
            .dispatch-badge {
                position: relative;
                left: auto;
                width: 44px;
                height: 44px;
                margin: 20px auto 16px; /* Apple quality: proper breathing room */
            }
            
            .dispatch-badge i {
                font-size: 1.5rem;
            }
            
            .stream-time {
                justify-content: center;
                flex-wrap: wrap;
                padding: 5px 12px;
            }
            
            .live-viewer-count {
                justify-content: center;
                flex-wrap: wrap;
                padding: 6px 16px;
                font-size: 1.1rem;
                margin: 8px auto 6px auto;
            }
            
            .stream-duration {
                justify-content: center;
                flex-wrap: wrap;
                padding: 4px 12px;
                font-size: 0.95rem;
            }
            
            .time-value {
                font-size: 1.15rem;
            }
            
            .time-label {
                font-size: 0.95rem;
            }
            
            .announcement-text {
                margin: 0;
            }
            
            .stream-platforms-display {
    flex-direction: row; /* Keep horizontal on mobile - Apple quality */
    flex-wrap: nowrap;
    width: auto;
    margin: 0 auto;
    padding: 8px 12px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stream-platforms-display::-webkit-scrollbar {
    display: none;
}

.platforms-label {
    margin-right: 0;
    margin-bottom: 5px;
}

.platform-icons-row {
    gap: 8px;
}
            
            .platform-icons-row {
                justify-content: center;
                width: 100%;
            }
            
            .platform-icon-wrapper {
                padding: 4px 7px;
                min-width: 55px;
            }

            .platform-icon-wrapper i,
            .kick-logo {
                font-size: 1.3rem;
            }

            .kick-logo {
                width: 26px;
                height: 26px;
            }

            .platform-icon-wrapper span {
                font-size: 0.7rem;
            }
            
            .platform-icon-wrapper.youtube {
                padding: 4px 7px;
                min-width: 55px;
            }
            
            .platform-icon-wrapper.youtube i {
                font-size: 1.3rem;
            }
            
            .platform-icon-wrapper.youtube span {
                font-size: 0.7rem;
            }
            
            .dispatch-header {
                font-size: 1.05rem;
            }
            
            .stream-title {
                font-size: 1.25rem;
            }
            
            .platforms-label {
                font-size: 0.85rem;
            }
            
            .platform-icon-wrapper {
                min-width: 50px !important;
                padding: 4px 6px !important;
            }

            /* Hide redundant scanner online status on mobile */
            .scanner-controls .scanner-live-status {
                display: none;
            }

            /* Mobile ticker responsive */
            .ticker-label {
                font-size: 0.75rem;
                letter-spacing: 1px;
            }
            
            .ticker-badge {
                width: 20px;
                height: 20px;
            }
            
            .ticker-badge i {
                font-size: 0.7rem;
            }
            
            .news-ticker {
                height: 35px;
            }
            
            .ticker-item {
                font-size: 0.9rem;
                padding: 0 15px;
            }
            
            .ticker-content {
                gap: 60px;
                /* Use CSS variable for consistent timing */
            }
            
            .ticker-last-updated {
                display: none !important; /* Hide timestamp on mobile */
            }
            
            /* Reduce gradient effects on mobile for better visibility */
            .news-ticker::before,
            .news-ticker::after {
                width: 30px; /* Reduced from 60-100px */
                opacity: 0.7; /* Make gradients less opaque */
            }
            
            .news-ticker::before {
                background: linear-gradient(to right, 
                    rgba(0, 0, 0, 0.8) 0%, 
                    rgba(0, 0, 0, 0.4) 50%, 
                    transparent 100%);
            }
            
            .news-ticker::after {
                background: linear-gradient(to left, 
                    rgba(0, 0, 0, 0.8) 0%, 
                    rgba(0, 0, 0, 0.4) 50%, 
                    transparent 100%);
                width: 80px; /* Slightly wider to accommodate timestamp */
            }
            
            /* Reduce padding since timestamp is hidden */
            .ticker-content {
                padding-right: 40px; /* Less padding needed without timestamp */
            }
        }
        
        /* Uniform Status Card Styles - Enhanced with GPU acceleration */
        .status-card {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            position: relative;
            overflow: hidden; /* Keep hidden for clean card edges */
            min-height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;

            /* Enhanced transitions with Apple-inspired easing */
            transition:
                transform var(--duration-slow) var(--ease-out-expo),
                box-shadow var(--duration-slow) var(--ease-out-expo),
                border-color var(--duration-base) var(--ease-smooth);

            /* GPU acceleration for smooth 60fps animations */
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-font-smoothing: subpixel-antialiased;
            will-change: transform, box-shadow;

            /* Subtle static glow (YOUR signature effect!) */
            box-shadow: var(--shadow-static);
        }

        /* Enhanced hover state - Signature lift effect */
        .status-card:hover {
            /* Smooth 8px lift with GPU acceleration */
            transform: translate3d(0, -8px, 0);

            /* Enhanced glow when raised */
            box-shadow: var(--shadow-raised);

            /* Brighter border on hover */
            border-color: rgba(0, 191, 255, 0.4);
        }

        /* Active state for touch feedback */
        .status-card:active {
            transform: translate3d(0, -4px, 0);
            transition-duration: var(--duration-fast);
        }

        /* Reduced motion support for accessibility */
        @media (prefers-reduced-motion: reduce) {
            .status-card {
                transition: none;
                animation: none;
                will-change: auto;
            }

            .status-card:hover {
                transform: none;
                border-color: rgba(0, 191, 255, 0.5);
            }
        }

        .status-card.is-rate-limited {
            border-color: #ffd700 !important;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.2);
        }

        .status-card-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        /* Uniform Platform Icon */
        .platform-icon {
            font-size: 3.5rem;
            margin: 0 0 10px 0;
            display: block;
        }

        /* Uniform Platform Name */
        .platform-name {
            font-family: 'Orbitron', monospace;
            font-size: 1.8rem;
            font-weight: 700;
            color: #ffffff !important;
            margin: 0 0 20px 0;
            text-decoration: none !important;
        }

        /* Uniform Status Indicator with green LIVE NOW text */
        .status-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 8px 20px;
            border-radius: 25px;
            background: rgba(0, 0, 0, 0.5);
            font-weight: 600;
            margin: 0 0 10px 0;
            min-width: 140px;
        }

        /* Uniform Viewer Count */
        .viewer-count {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1.2rem;
            font-weight: 700;
            font-family: 'Share Tech Mono', monospace;
            color: var(--text-primary);
            min-height: 30px;
        }

        /* Platform-specific icon colors */
        .status-card.scanner-status .platform-icon {
            color: var(--youtube-red) !important;
        }

        .status-card.kick .platform-icon.kick-logo-main {
            color: #53FC18 !important;
            background: linear-gradient(135deg, #53FC18 0%, #3FD814 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px rgba(83, 252, 24, 0.5);
        }

        .status-card.twitch .platform-icon {
            color: #9146ff !important;
        }
        
        .status-card.youtube .platform-icon {
            color: var(--youtube-red) !important;
        }

        /* Border colors remain platform-specific */
        .status-card.scanner-status {
            border-color: var(--youtube-red);
        }

        .status-card.kick {
            border-color: #53FC18;
        }

        .status-card.twitch {
            border-color: #9146ff;
        }
        
        .status-card.youtube {
            border-color: var(--youtube-red);
        }

        /* Hover effects remain platform-specific */
        .status-card.scanner-status:hover {
            box-shadow: 0 10px 30px rgba(255, 0, 0, 0.4);
            background: linear-gradient(135deg, rgba(255, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
        }

        .status-card.kick:hover {
            box-shadow: 0 10px 30px rgba(83, 252, 24, 0.3);
            background: rgba(83, 252, 24, 0.05);
        }

        .status-card.twitch:hover {
            box-shadow: 0 10px 30px rgba(145, 70, 255, 0.3);
            background: rgba(145, 70, 255, 0.05);
        }
        
        .status-card.youtube:hover {
            box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
            background: rgba(255, 0, 0, 0.05);
        }
        
        /* Fix last updated colors for Kick, Twitch and YouTube */
        .status-card.kick:hover .last-updated i,
        .status-card.twitch:hover .last-updated i,
        .status-card.youtube:hover .last-updated i {
            color: #888 !important;
        }

        /* Status dots - red when offline, green when online */
        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        .status-dot.online {
            background: var(--neon-green) !important;
            box-shadow: 0 0 10px var(--neon-green) !important;
        }

        .status-dot.offline {
            background: #ff0000 !important;
            box-shadow: 0 0 10px #ff0000 !important;
        }

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

        /* Ensure viewer count icon is always green */
        .viewer-count i {
            color: #00ff00 !important;
        }
        
        /* Last Updated Styles */
        .last-updated {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            color: #666;
            margin-top: 10px;
            font-family: 'Share Tech Mono', monospace;
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        
        .last-updated:hover {
            opacity: 1;
            color: #888;
        }
        
        .last-updated i {
            font-size: 0.7rem;
            margin-right: 4px;
            animation: rotate-icon 2s linear infinite paused;
            color: #666;
        }
        
        .status-card:hover .last-updated i {
            animation-play-state: running;
            color: #888;
        }
        
        @keyframes rotate-icon {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        #youtube-last-update,
        #kick-last-update,
        #twitch-last-update {
            color: #888;
            letter-spacing: 0.5px;
        }
        
        /* Weather Alerts Styles */
        .weather-alerts {
            margin: 15px 0;
            padding: 12px;
            background: rgba(220, 20, 60, 0.15);
            border: 2px solid var(--police-red);
            border-radius: 10px;
            animation: alert-pulse 2s ease-in-out infinite;
        }

        @keyframes alert-pulse {
            0%, 100% { 
                border-color: var(--police-red);
                box-shadow: 0 0 10px rgba(220, 20, 60, 0.3);
            }
            50% { 
                border-color: #ff3333;
                box-shadow: 0 0 20px rgba(220, 20, 60, 0.5);
            }
        }

        .weather-alert-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            font-weight: 700;
            color: var(--police-red);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .weather-alert-header i {
            font-size: 1.3rem;
            animation: warning-flash 1s ease-in-out infinite;
        }

        @keyframes warning-flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .weather-alert-item {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .weather-alert-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .weather-alert-title {
            font-weight: 600;
            color: var(--warning-yellow);
            margin-bottom: 5px;
        }

        .weather-alert-description {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        
        .weather-all-clear {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px 18px;
            background: linear-gradient(135deg, rgba(0, 255, 0, 0.08) 0%, rgba(0, 255, 0, 0.03) 100%);
            border: 1px solid rgba(0, 255, 0, 0.25);
            border-radius: 10px;
            color: #90ee90;
            font-weight: 600;
            margin: 15px 0;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Rajdhani', sans-serif;
        }
        
        .weather-all-clear i {
            font-size: 1.2rem;
            color: #90ee90;
        }

        /* Simple Text Forecast Styles */
        .text-forecast {
            margin: 20px 0;
            background: rgba(0, 71, 171, 0.05);
            border-radius: 10px;
            padding: 20px;
            border: 1px solid rgba(0, 71, 171, 0.2);
        }

        .forecast-label {
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            color: var(--police-blue);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .forecast-label i {
            color: var(--warning-yellow);
            font-size: 1.1rem;
        }

        .forecast-text-items {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .forecast-text-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            padding: 6px 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .forecast-text-item:nth-child(even) {
            background: rgba(0, 71, 171, 0.08);
        }

        .forecast-text-item:hover {
            background: rgba(0, 71, 171, 0.15);
            transform: translateX(5px);
            border-color: rgba(0, 71, 171, 0.3);
        }

        .forecast-hour {
            font-family: 'Share Tech Mono', monospace;
            color: var(--neon-green);
            min-width: 55px;
            font-weight: 600;
            text-align: left;
        }

        .mini-weather-icon {
            width: 25px;
            height: 25px;
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
        }

        .forecast-temp {
            font-family: 'Orbitron', monospace;
            color: var(--text-primary);
            font-weight: 700;
            min-width: 50px;
            text-align: right;
            font-size: 1rem;
        }

        .forecast-condition {
            color: #e0e0e0;
            font-size: 0.9rem;
            text-transform: capitalize;
            flex: 1;
            text-align: left;
            font-weight: 400;
        }

        /* Mobile adjustments - UPDATED WITH LOADER FIXES */
        @media (max-width: 768px) {
            .status-card {
                min-height: 240px;
                padding: 20px;
            }
            
            .platform-icon {
                font-size: 3rem;
            }
            
            .platform-name {
                font-size: 1.5rem;
            }
            
            .platform-subtitle {
                font-size: 0.8rem;
            }
            
            .text-forecast {
                padding: 12px;
                margin: 15px 0;
            }
            
            .forecast-text-item {
                font-size: 0.85rem;
                padding: 5px 8px;
                gap: 8px;
            }
            
            .mini-weather-icon {
                width: 20px;
                height: 20px;
            }
            
            .forecast-hour {
                min-width: 45px;
                font-size: 0.85rem;
            }
            
            .forecast-temp {
                min-width: 45px;
                font-size: 0.95rem;
            }
            
            .forecast-condition {
                font-size: 0.8rem;
            }
            
            .weather-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }

            .weather-location {
                text-align: center;
                justify-content: center;
            }

            .weather-time {
                text-align: center;
            }

            .time-zone {
                justify-content: center !important;
                margin-top: 5px;
            }

            .time-display {
                font-size: 1.2rem;
            }

            .time-format-toggle-btn {
                padding: 2px 8px !important;
                font-size: 0.65rem !important;
                min-width: 42px !important;
            }

            .weather-alerts {
                padding: 10px;
            }

            .weather-alert-header {
                font-size: 1rem;
            }

            .weather-alert-description {
                font-size: 0.85rem;
            }
            
            .weather-all-clear {
                padding: 8px 15px;
                font-size: 0.9rem;
            }
            
            /* MOBILE LOADER ADJUSTMENTS */
            .loader-content {
                padding: 30px 40px;
                margin: 20px;
            }
            
            .frequency-loader {
                font-size: 1.4rem;
            }
            
            .radio-icon-loader {
                font-size: 2.5rem;
            }
            
            .loader-visualizer {
                height: 35px;
            }
            
            .loader-text {
                font-size: 1rem;
            }
            
            /* Ensure scanner loader display has proper positioning context */
            .scanner-loader-display {
                position: relative;
                overflow: hidden;
                min-height: 120px;
            }
        }

        /* Extra small screens (phones in portrait) */
        @media (max-width: 480px) {
            .loader-content {
                padding: 25px 30px;
                margin: 15px;
            }
            
            .scanner-loader-display {
                padding: 15px 25px;
                min-height: 110px;
            }
            
            /* Remove gradient effects on very small screens */
            .news-ticker::before,
            .news-ticker::after {
                display: none; /* Completely remove gradients on small screens */
            }
            
            /* Reduce ticker height on small screens */
            .news-ticker {
                height: 32px;
            }
            
            /* Smaller text and better spacing */
            .ticker-item {
                font-size: 0.85rem;
                padding: 0 10px;
            }
            
            /* Reduce content padding since no gradients and no timestamp */
            .ticker-content {
                padding-right: 10px; /* Minimal padding without timestamp */
                gap: 40px;
            }
        }

        /* Smooth loading animation */
        @keyframes forecast-slide-in {
            from {
                opacity: 0;
                transform: translateX(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .forecast-text-item {
            animation: forecast-slide-in 0.3s ease forwards;
        }

        .forecast-text-item:nth-child(1) { animation-delay: 0.1s; }
        .forecast-text-item:nth-child(2) { animation-delay: 0.2s; }
        .forecast-text-item:nth-child(3) { animation-delay: 0.3s; }
        .forecast-text-item:nth-child(4) { animation-delay: 0.4s; }

        /* Weather Card */
        .weather-card {
            background: linear-gradient(135deg, rgba(0, 71, 171, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
            border: 2px solid var(--police-blue);
            border-radius: 15px;
            padding: 30px;
            position: relative;
            overflow: hidden; /* Keep hidden to clip ::before spinning decoration */
            box-shadow: var(--shadow-subtle);
            transition:
                transform var(--duration-slow) var(--ease-out-expo),
                box-shadow var(--duration-slow) var(--ease-out-expo);
            transform: translate3d(0, 0, 0);
        }

        .weather-card:hover {
            transform: translate3d(0, -5px, 0);
            box-shadow: var(--shadow-lg);
        }

        .weather-card:active {
            transform: translate3d(0, -2px, 0);
            box-shadow: var(--shadow-md);
            transition-duration: var(--duration-fast);
        }

        .weather-card::before {
            /* Rotating animation removed - too distracting */
            display: none;
        }

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

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

        .weather-location {
            font-family: 'Orbitron', monospace;
            font-size: 1.8rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .weather-location i {
            color: var(--police-red);
        }

        .weather-time {
            text-align: right;
        }

        .time-display {
            font-family: 'Share Tech Mono', monospace;
            font-size: 1.4rem;
            color: var(--neon-green);
            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
        }

        .time-zone {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-top: 5px;
        }

        .weather-main {
            display: flex;
            align-items: center;
            gap: 20px;
            margin: 20px 0;
        }

        .weather-icon {
            width: 100px;
            height: 100px;
            position: relative;
        }

        .weather-icon img {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
        }

        .weather-data {
            flex: 1;
        }

        .temperature {
            font-size: 3.5rem;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            color: var(--text-primary);
            line-height: 1;
        }

        .weather-description {
            font-size: 1.3rem;
            color: var(--text-secondary);
            text-transform: capitalize;
            margin: 10px 0;
        }

        .weather-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid var(--border-color);
        }

        .weather-detail {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
        }

        .weather-detail i {
            color: var(--police-blue);
            width: 20px;
            text-align: center;
        }

        /* Visibility spans both columns and centers */
        .weather-detail-visibility {
            grid-column: 1 / -1;
            justify-self: center;
        }

        /* Weather refresh animation */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Scanner Section with Realistic Radio Display */
        .scanner-section {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
            border: 2px solid var(--police-red);
            border-radius: 20px;
            padding: 0;
            margin: 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(220, 20, 60, 0.15), 0 0 20px rgba(220, 20, 60, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transform: translate3d(0, 0, 0);
        }

        .scanner-section:hover {
            box-shadow: 0 10px 30px rgba(220, 20, 60, 0.4), 0 0 40px rgba(220, 20, 60, 0.2);
            border-color: #ff3333;
            transform: translateY(-2px);
        }

        .scanner-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 30px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .scanner-header:hover {
            background: rgba(220, 20, 60, 0.05);
        }

        .scanner-left {
            display: flex;
            align-items: center;
            gap: 20px;
            flex: 1;
        }

        .scanner-icon {
            font-size: 2.5rem;
            color: var(--police-red);
            animation: radio-pulse 2s ease-in-out infinite;
        }

        @keyframes radio-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }

        .scanner-title-group {
            flex: 1;
        }

        .scanner-title {
            font-family: 'Orbitron', monospace;
            font-size: 2rem;
            margin-bottom: 5px;
        }

        .scanner-status-live {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .scanner-status-live .status-dot {
            width: 10px;
            height: 10px;
            background: var(--neon-green) !important;
            border-radius: 50%;
            box-shadow: 0 0 10px var(--neon-green) !important;
            animation: pulse 2s ease-in-out infinite;
        }

        .scanner-toggle-button {
            display: flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(220, 20, 60, 0.3) 0%, rgba(220, 20, 60, 0.2) 100%);
            border: 2px solid var(--police-red);
            color: var(--text-primary);
            padding: 10px 20px;
            border-radius: 25px;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .scanner-toggle-button:hover {
            background: linear-gradient(135deg, rgba(220, 20, 60, 0.5) 0%, rgba(220, 20, 60, 0.3) 100%);
            box-shadow: 0 0 15px rgba(220, 20, 60, 0.5);
        }

      .scanner-toggle-button i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Only rotate the chevron in the header button */
.scanner-section.expanded .scanner-header .scanner-toggle-button i {
    transform: rotate(180deg);
}

/* Make sure the external link icon in scanner-controls never rotates */
.scanner-controls .scanner-toggle-button i {
    transform: none !important;
}

        /* Scanner Content (Collapsible) */
        .scanner-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
            padding: 0 30px;
        }

        .scanner-section.expanded .scanner-content {
            max-height: 600px;
            padding: 0 30px 30px;
        }

        /* Scanner Embed Container */
        .scanner-embed-container {
            background: #000;
            border: 3px solid #333;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 0;
            position: relative;
        }

        .scanner-embed {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
        }

        .scanner-embed iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Scanner Controls */
        .scanner-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }

        .scanner-live-status {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            border: 1px solid rgba(0, 255, 0, 0.3) !important;
        }

        .scanner-live-icon {
            font-size: 1.2rem;
            animation: pulse 2s ease-in-out infinite;
            color: var(--neon-green) !important;
        }

        .scanner-live-text {
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Realistic Scanner Display - Hidden on all devices */
        .scanner-display {
            display: none;
        }

        .scanner-screen {
            background: #001a00;
            border: 2px solid #003300;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 15px;
            font-family: 'Share Tech Mono', monospace;
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green);
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .frequency-display {
            font-size: 1.5rem;
            letter-spacing: 2px;
            animation: freq-blink 2s ease-in-out infinite;
        }

        .scanner-frequency-info {
            font-size: 1rem;
            color: var(--neon-green);
            text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
            letter-spacing: 1px;
            font-family: 'Share Tech Mono', monospace;
        }

        @keyframes freq-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Radio Scanner Bars */
        .radio-visualizer {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 50px;
            justify-content: center;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }

        .radio-bar {
            width: 6px;
            background: linear-gradient(to top, var(--neon-green) 0%, #00ff00aa 50%, #00ff0066 100%);
            border-radius: 3px 3px 0 0;
            position: relative;
            box-shadow: 0 0 10px var(--neon-green);
            animation-play-state: running !important;
            opacity: 1 !important;
        }

        .radio-bar:nth-child(1) { animation: radio-wave 1.2s ease-in-out infinite; height: 20%; }
        .radio-bar:nth-child(2) { animation: radio-wave 1.2s ease-in-out 0.1s infinite; height: 40%; }
        .radio-bar:nth-child(3) { animation: radio-wave 1.2s ease-in-out 0.2s infinite; height: 60%; }
        .radio-bar:nth-child(4) { animation: radio-wave 1.2s ease-in-out 0.3s infinite; height: 80%; }
        .radio-bar:nth-child(5) { animation: radio-wave 1.2s ease-in-out 0.4s infinite; height: 100%; }
        .radio-bar:nth-child(6) { animation: radio-wave 1.2s ease-in-out 0.5s infinite; height: 85%; }
        .radio-bar:nth-child(7) { animation: radio-wave 1.2s ease-in-out 0.6s infinite; height: 65%; }
        .radio-bar:nth-child(8) { animation: radio-wave 1.2s ease-in-out 0.7s infinite; height: 45%; }
        .radio-bar:nth-child(9) { animation: radio-wave 1.2s ease-in-out 0.8s infinite; height: 25%; }
        .radio-bar:nth-child(10) { animation: radio-wave 1.2s ease-in-out 0.9s infinite; height: 35%; }

        @keyframes radio-wave {
            0%, 100% { 
                height: 20%;
                opacity: 0.3;
            }
            50% { 
                height: 100%;
                opacity: 1;
            }
        }

        /* Responsive video sizing */
        @media (max-width: 768px) {
            .scanner-header {
                flex-direction: column;
                gap: 15px;
                padding: 20px;
            }
            
            .scanner-left {
                width: 100%;
                justify-content: center;
            }
            
            .scanner-toggle-button {
                width: 100%;
                justify-content: center;
            }
            
            .scanner-controls {
                flex-direction: column;
                gap: 10px;
            }
            
            .scanner-section.expanded .scanner-content {
                max-height: 1000px;
            }
        }

        /* Social Section Base Styles */
        .social-section {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 40px 20px;
            margin: 40px 0;
        }

        .social-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .social-title {
            font-family: 'Orbitron', monospace;
            font-size: 2.5rem;
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Base Social Link Styles */
        .social-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 25px;
            border-radius: 15px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }

        .social-link i,
        .social-link .kick-logo-social {
            font-size: 2.5rem;
            transition: transform 0.3s ease;
        }

        .social-link span {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Rajdhani', sans-serif;
        }

        .social-link:hover i,
        .social-link:hover .kick-logo-social {
            transform: scale(1.2);
        }

        /* Platform-Specific Styles */

        /* Kick */
        .social-link.kick {
            background: rgba(0, 0, 0, 0.85);
            color: #00ff00;
            border-color: #00ff00;
        }

        .social-link.kick:hover {
            background: rgba(0, 255, 0, 0.1);
            color: #00ff00;
            box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
            border-color: #00ff00;
        }

        /* Twitch */
        .social-link.twitch {
            background: rgba(0, 0, 0, 0.85);
            color: #9146ff;
            border-color: #9146ff;
        }

        .social-link.twitch:hover {
            background: rgba(145, 70, 255, 0.1);
            color: #9146ff;
            box-shadow: 0 0 30px rgba(145, 70, 255, 0.5);
            border-color: #9146ff;
        }

        /* TikTok */
        .social-link.tiktok {
            background: rgba(0, 0, 0, 0.85);
            color: #ff0050;
            border-color: #ff0050;
        }

        .social-link.tiktok:hover {
            background: rgba(255, 0, 80, 0.1);
            color: #ff0050;
            box-shadow: 0 0 30px rgba(255, 0, 80, 0.5);
            border-color: #ff0050;
        }

        /* X/Twitter */
        .social-link.twitter {
            background: rgba(0, 0, 0, 0.85);
            color: #0077ff;
            border-color: #666;
        }

        .social-link.twitter:hover {
            background: rgba(255, 255, 255, 0.05);
            color: #0077ff;
            border-color: #fff;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
        }

        /* Facebook */
        .social-link.facebook {
            background: rgba(0, 0, 0, 0.85);
            color: #1877f2;
            border-color: #1877f2;
        }

        .social-link.facebook:hover {
            background: rgba(24, 119, 242, 0.1);
            color: #1877f2;
            box-shadow: 0 0 30px rgba(24, 119, 242, 0.5);
            border-color: #1877f2;
        }

        /* YouTube */
        .social-link.youtube {
            background: rgba(0, 0, 0, 0.85);
            color: #ff0000;
            border-color: #ff0000;
        }

        .social-link.youtube:hover {
            background: rgba(255, 0, 0, 0.1);
            color: #ff0000;
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
            border-color: #ff0000;
        }

        .social-icon {
            width: 2.5rem;
            height: 2.5rem;
            fill: currentColor;
            transition: transform 0.3s ease;
        }

        .social-link:hover .social-icon {
            transform: scale(1.2);
        }

        /* Hide fallback text unless icon fails to load */
        .social-link i:empty + .icon-fallback,
        .social-link .kick-logo-social:empty + .icon-fallback {
            display: inline-block !important;
            font-size: 2rem;
            font-weight: bold;
        }

        /* Discord */
        .social-link.discord {
            background: rgba(0, 0, 0, 0.85);
            color: #5865f2;
            border-color: #5865f2;
        }

        .social-link.discord:hover {
            background: rgba(88, 101, 242, 0.1);
            color: #5865f2;
            box-shadow: 0 0 30px rgba(88, 101, 242, 0.5);
            border-color: #5865f2;
        }

        /* Scanner Feed */
        .social-link.scanner-feed {
            background: rgba(0, 0, 0, 0.85);
            color: #ff9900;
            border-color: #ff9900;
        }

        .social-link.scanner-feed:hover {
            background: rgba(255, 153, 0, 0.1);
            color: #ff9900;
            box-shadow: 0 0 30px rgba(255, 153, 0, 0.5);
            border-color: #ff9900;
        }

        .live-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--neon-green);
            color: #000;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 700;
            animation: pulse 2s ease-in-out infinite;
        }

        /* Hover Effect Animation */
        .social-link::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .social-link:hover::before {
            width: 300px;
            height: 300px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .social-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
            
            .social-link {
                padding: 20px;
            }
            
            .social-link i,
            .social-link .kick-logo-social {
                font-size: 2rem;
            }
            
            .social-link span {
                font-size: 0.9rem;
            }
        }

        /* Add pulsing animation for live platforms */
        @keyframes live-pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
            }
            50% {
                box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
            }
        }

        /* Add this class to any platform that's currently live */
        .social-link.is-live {
            animation: live-pulse 2s infinite;
        }

        /* YouTube Section */
        .youtube-section {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 15px;
            padding: 30px;
            margin: 40px 0;
        }

        .youtube-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .youtube-title {
            font-family: 'Orbitron', monospace;
            font-size: 2.5rem;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .youtube-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 10px;
            border: 3px solid var(--police-red);
            box-shadow: 0 0 30px rgba(220, 20, 60, 0.3);
        }

        .youtube-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 7px;
        }

        /* Adjust grid for 4 items */
        @media (min-width: 1200px) {
            .dashboard-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .weather-card {
                grid-column: span 1;
            }
        }

        @media (min-width: 769px) and (max-width: 1199px) {
            .dashboard-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Focus States */
        a:focus,
        button:focus {
            outline: 2px solid var(--police-blue);
            outline-offset: 2px;
        }

        /* Mouse Interaction Effects */
        .interactive-element {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .interactive-element:hover {
            transform: scale(1.05);
        }

        /* Focus States */
        a:focus,
        button:focus {
            outline: 2px solid var(--police-blue);
            outline-offset: 2px;
        }

        /* Mouse Interaction Effects */
        .interactive-element {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .interactive-element:hover {
            transform: scale(1.05);
        }
        
   /* Fix link styling for platform icons */
.platform-icons-row a {
    text-decoration: none !important;
    color: inherit !important;
}

.platform-icons-row a:hover {
    text-decoration: none !important;
}

/* Ensure Kick logo maintains its color */
.platform-icon-wrapper.kick .kick-logo,
.platform-icons-row a .platform-icon-wrapper.kick .kick-logo {
    font-family: 'Black Ops One', cursive;
    font-size: 1.5rem;
    font-weight: 900;
    color: #53FC18 !important;
    background: linear-gradient(135deg, #53FC18 0%, #3FD814 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(83, 252, 24, 0.5);
}

/* Ensure all platform text maintains proper colors */
.platform-icons-row a .platform-icon-wrapper span {
    color: inherit !important;
}     
        
        

/* No Stream Today Announcement Styling */
.no-stream-announcement {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(20, 15, 5, 0.98) 100%) !important;
}

/* Removed duplicate announcement wrapper rules - defined earlier with proper specificity */

.no-stream-badge {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(255, 185, 10, 0.25) 0%, rgba(255, 185, 10, 0.1) 100%) !important;
    border-color: rgba(255, 185, 10, 0.6) !important;
    box-shadow: 0 0 24px rgba(255, 185, 10, 0.4) !important;
    animation: amber-glow-pulse 3s ease-in-out infinite !important;
}

.no-stream-badge::before {
    border-color: rgba(255, 185, 10, 0.6) !important;
}

.no-stream-badge i {
    color: rgba(255, 185, 10, 0.9) !important;
    animation: radar-pulse 2s ease-in-out infinite !important;
}

@keyframes amber-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 24px rgba(255, 185, 10, 0.3);
    }
    50% {
        box-shadow: 0 0 32px rgba(255, 185, 10, 0.5);
    }
}

.no-stream-indicator {
    display: inline-block;
    background: rgba(255, 185, 10, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: rgba(255, 185, 10, 1) !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255, 185, 10, 0.4) !important;
    text-shadow: 0 0 12px rgba(255, 185, 10, 0.4) !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    box-shadow:
        0 4px 16px rgba(255, 185, 10, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 20px rgba(255, 185, 10, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.no-stream-indicator:hover {
    background: rgba(255, 185, 10, 0.18) !important;
    border-color: rgba(255, 185, 10, 0.6) !important;
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px rgba(255, 185, 10, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 20px rgba(255, 185, 10, 0.08) !important;
}

.no-stream-reason {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

/* Override blue .stream-title styling for no-stream context */
.stream-announcement.no-stream-today .stream-title {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 24px !important;
    font-size: 1.05rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove blue scanning animation */
.stream-announcement.no-stream-today .stream-title::before {
    display: none !important;
}

/* Neutral hover state (no blue, no amber) */
.stream-announcement.no-stream-today .stream-title:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.01) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Enhanced message box with glassmorphism */
.no-stream-announcement .no-stream-message {
    margin-top: 20px !important;
    padding: 18px 24px !important;
    background: rgba(28, 28, 30, 0.75) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(255, 185, 10, 0.25) !important;
    border-left: 3px solid rgba(255, 185, 10, 0.7) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.no-stream-announcement .no-stream-message:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 185, 10, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-left-color: rgba(255, 185, 10, 0.9) !important;
}

/* Regular no-stream-message (when showing last VOD) should have no special styling */
.announcement-content:not(.no-stream-announcement) .no-stream-message {
    background: transparent !important;
    border: none !important;
    padding: 20px !important;
}

/* No Stream VODs Section - Harmonized gold-amber theme */
.no-stream-vods {
    margin-top: 32px !important;
    padding: 24px !important;
    background: linear-gradient(135deg,
        rgba(255, 185, 10, 0.08) 0%,
        rgba(28, 28, 30, 0.85) 100%) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(255, 185, 10, 0.2) !important;
    border-top: 1.5px solid rgba(255, 185, 10, 0.3) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(255, 185, 10, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Elegant shine animation - gold-amber theme */
.no-stream-vods::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 185, 10, 0.4) 50%,
        transparent 100%);
    animation: vod-shine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes vod-shine {
    0% { left: -150%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

/* ============================================
   NO STREAM VODs SECTION - Complete Theme Override
   Replace all inline purple styles with gold-amber
   ============================================ */

/* "Watch Latest VOD" Header Container */
.no-stream-vods > div[style*="text-align: center"] {
    padding: 14px 16px !important;
    background: linear-gradient(135deg,
        rgba(255, 185, 10, 0.12) 0%,
        rgba(255, 185, 10, 0.04) 100%) !important;
    border: 1px solid rgba(255, 185, 10, 0.2) !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
}

.no-stream-vods h3 {
    color: rgba(255, 185, 10, 0.95) !important;
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.no-stream-vods h3 i {
    color: rgba(255, 185, 10, 0.9) !important;
    filter: drop-shadow(0 0 8px rgba(255, 185, 10, 0.4)) !important;
    margin-right: 8px !important;
}

.no-stream-vods p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
}

/* VOD Info Container - Fix cramped spacing (overrides mobile .latest-vod-display padding) */
.no-stream-vods > div[style*="background: linear-gradient"][style*="padding: 14px"] {
    padding: 20px 16px !important;
}

/* Also fix waiting section VOD container */
.latest-vod-display:not(.no-stream-vods) > div[style*="background: rgba(0, 0, 0"][style*="padding: 12px"] {
    padding: 18px 14px !important;
}

/* VOD Link Cards - Complete gold-amber override */
.no-stream-vods a[href*="twitch.tv"] {
    padding: 14px 18px !important;
    gap: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 185, 10, 0.08) !important;
    border: 1px solid rgba(255, 185, 10, 0.25) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.no-stream-vods a[href*="twitch.tv"]:hover {
    background: rgba(255, 185, 10, 0.15) !important;
    border-color: rgba(255, 185, 10, 0.4) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(255, 185, 10, 0.15);
}

/* Left content section spacing */
.no-stream-vods a[href*="twitch.tv"] > div:first-child {
    flex: 1;
    min-width: 0;
    padding-right: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* "Watch" button text - gold-amber */
.no-stream-vods a[href*="twitch.tv"] > span:last-child {
    color: rgba(255, 185, 10, 0.95) !important;
    font-weight: 600 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* VOD Part Button Spacing Improvements */
.vod-part-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px !important;
    line-height: 1.4;
}

.vod-part-button span {
    display: inline-block;
    margin-left: 6px;
}

.severity-indicator:empty {
    display: none !important;
}

/* ============================================
   COVERAGE MAP SECTION - Apple Quality Polish
   ============================================ */

/* Toggle button vertical alignment fix - desktop only */
@media (min-width: 769px) {
    .map-toggle-button {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(0, 119, 255, 0.12) !important;
        border: 1.5px solid rgba(0, 119, 255, 0.35) !important;
        border-radius: 10px !important;
    }

    .map-toggle-button:hover {
        background: rgba(0, 119, 255, 0.2) !important;
        border-color: rgba(0, 119, 255, 0.5) !important;
        transform: translateY(-50%) scale(1.05) !important;
    }

    .map-toggle-button:active {
        transform: translateY(-50%) scale(0.95) !important;
    }
}

/* Map actions container - prevent button cutoff */
.map-actions {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    gap: 14px !important;
}

/* Enhanced button sizing (Apple 44px minimum touch target) */
.map-actions a {
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
    min-height: 44px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Map footer spacing */
.map-footer {
    margin-top: 18px !important;
    margin-bottom: 6px !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .coverage-map-container {
        padding: 30px 20px 30px 20px !important; /* Keep original 30px top to prevent cutoff */
    }

    .map-toggle-button {
        width: 36px !important;
        height: 36px !important;
        /* Don't use transform on mobile - let it sit naturally at top */
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    .map-toggle-button:hover,
    .map-toggle-button:active {
        transform: none !important; /* No transform on mobile to prevent overlap */
    }

    .map-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .map-actions a {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
    }

    .map-header {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    .coverage-map-container {
        padding: 30px 16px 26px 16px !important; /* Keep 30px top */
    }

    .map-toggle-button {
        width: 32px !important;
        height: 32px !important;
        top: 0 !important;
        transform: none !important;
    }
}

/* ============================================
   TRUNKIE CHAT AFTER HOURS - Apple Quality Polish
   ============================================ */

/* Container refinements */
.after-hours-container {
    padding: 36px 32px 40px !important;
    border: 2px solid rgba(255, 185, 10, 0.35) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    /* Keep original inline background - don't override */
}

/* Badge container refinements */
.after-hours-container > div > div > div[style*="border-radius: 30px"] {
    padding: 10px 24px !important;
    gap: 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 185, 10, 0.12) !important;
    border: 1.5px solid rgba(255, 185, 10, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    margin-bottom: 20px !important;
}

/* COMING SOON badge */
.after-hours-container span[style*="Coming Soon"] {
    font-size: 10px !important;
    padding: 3px 12px !important;
    letter-spacing: 1.2px !important;
    background: rgba(255, 185, 10, 1) !important;
    box-shadow: 0 0 12px rgba(255, 185, 10, 0.4);
}

/* EXCLUSIVE ACCESS text */
.after-hours-container span[style*="Exclusive Access"] {
    color: rgba(255, 185, 10, 0.9) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Typography hierarchy */
.after-hours-container h2 {
    margin-bottom: 8px !important;
}

/* AFTER HOURS subtitle spacing */
.after-hours-container h2 > span {
    margin-top: 8px !important;
    display: block !important;
}

/* Tagline spacing */
.after-hours-container > div > div > p {
    margin-top: 12px !important;
    line-height: 1.5 !important;
}

/* Feature cards - unified gold theme */
.feature-card {
    padding: 24px 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
}

.feature-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 185, 10, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 24px rgba(255, 185, 10, 0.15) !important;
}

/* Unified icon backgrounds - warm gold theme for all */
.feature-card > div[style*="width: 60px"] {
    background: linear-gradient(135deg,
        rgba(255, 185, 10, 0.2) 0%,
        rgba(255, 185, 10, 0.1) 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(255, 185, 10, 0.15) !important;
}

/* Feature card titles */
.feature-card h3 {
    font-size: 17px !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.5px !important;
}

/* Feature card descriptions */
.feature-card p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .trunkie-after-hours-teaser {
        padding: 0 16px !important;
    }

    .after-hours-container {
        padding: 28px 24px 32px !important;
    }

    .feature-card {
        padding: 20px 18px !important;
    }

    .after-hours-container h2 {
        font-size: clamp(24px, 5vw, 32px) !important;
    }

    .after-hours-container > div > div > div[style*="border-radius"] {
        padding: 8px 18px !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .after-hours-container {
        padding: 24px 20px 28px !important;
    }

    .feature-card > div[style*="60px"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 24px !important;
    }
}

/* Updated CSS for the activity status indicators */

.launcher-stats {
    display: flex;
    align-items: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: var(--text-secondary);
}

.online-count-display,
.no-activity-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.online-count-display i {
    animation: pulse 2s ease-in-out infinite;
}

.no-activity-display i {
    opacity: 0.5;
}

/* Make the text more prominent when there's activity */
.online-count-display span {
    color: var(--text-primary);
    font-weight: 600;
}

.no-activity-display span {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Mobile responsive - center the status */
@media (max-width: 768px) {
    .launcher-stats {
        justify-content: center;
        font-size: 0.95rem;
    }
}

/* Platform display */
.stream-platforms-display {
    position: relative !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px !important;
    margin: 12px auto 0 !important;
    padding: 6px 12px !important;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.platforms-label {
    font-size: 0.8rem !important;
}

.platform-icons-row {
    gap: 6px !important;
}

.platform-icon-wrapper {
    padding: 4px 8px !important;
    min-width: 55px !important;
}

/* Remove ticker links underline */
.ticker-item.ticker-link {
    text-decoration: none !important;
}

/* Optional: Add underline only on hover */
.ticker-item.ticker-link:hover {
    text-decoration: underline;
}

/* Weather Card Expandable Styles */
.weather-content-wrapper {
    min-height: 150px; /* Ensures consistent card height */
}

.weather-more-toggle {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.more-options-btn {
    width: 100%;
    background: rgba(0, 71, 171, 0.1);
    border: 1px solid rgba(0, 71, 171, 0.2);
    color: var(--text-secondary);
    padding: 10px 15px;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.more-options-btn:hover {
    background: rgba(0, 71, 171, 0.2);
    border-color: var(--police-blue);
    color: var(--text-primary);
}

.more-chevron {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.weather-expandable {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 15px;
}

.weather-expandable.expanded {
    max-height: 100px;
}

.weather-card.expanded .more-chevron {
    transform: rotate(180deg);
}

/* Driving Intelligence Styles */
.driving-intel-trigger {
    animation: slideIn 0.3s ease;
}

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

.intel-button {
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.15) 0%, rgba(0, 119, 255, 0.05) 100%);
    border: 1px solid rgba(0, 119, 255, 0.3);
    color: #0077ff;
    padding: 12px 20px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.intel-button:hover {
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.25) 0%, rgba(0, 119, 255, 0.1) 100%);
    border-color: #0077ff;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 119, 255, 0.3);
}

.intel-chevron {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.intel-button:hover .intel-chevron {
    transform: translateX(3px);
}

/* Driving Intelligence Pop-in Card - Compact Message Style */
.driving-intel-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.98) 0%, rgba(10, 10, 10, 0.95) 100%);
    border: 2px solid #0077ff;
    border-radius: 15px;
    box-shadow: 0 20px 60px rgba(0, 119, 255, 0.4), 0 0 100px rgba(0, 0, 0, 0.8);
    z-index: 10001; /* Above mobile nav (9999) and everything else */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.driving-intel-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Popup Header */
.intel-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: rgba(0, 119, 255, 0.1);
    border-bottom: 1px solid rgba(0, 119, 255, 0.3);
}

.intel-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.intel-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.powered-by-openai {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.15), rgba(0, 119, 255, 0.05));
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    color: #0099ff;
    font-weight: 500;
    border: 1px solid rgba(0, 119, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.powered-by-openai svg {
    opacity: 0.9;
}

.intel-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.intel-close-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
}

/* Popup Content - Optimized for Readability */
.intel-popup-content {
    padding: 0;
    overflow-y: auto;
    max-height: calc(85vh - 85px);
    position: relative;
    /* Custom scrollbar for better aesthetics */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 119, 255, 0.3) rgba(255, 255, 255, 0.05);
}

/* Loading State */
.intel-loading {
    text-align: center;
    padding: 20px 20px 30px 20px; /* Reduced top padding to minimize gap */
}

.loading-spinner {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

.loading-spinner i {
    font-size: 3rem;
    color: #0077ff;
    filter: drop-shadow(0 0 15px rgba(0, 119, 255, 0.6));
}

.intel-loading p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

/* Content Styles */
.intel-timestamp {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.intel-timestamp i {
    color: #0077ff;
    font-size: 1.1rem;
}

.intel-sections {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Reduced gap */
    margin-bottom: 25px;
}

.intel-section {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.2s ease;
    /* Collapsed by default */
    cursor: pointer;
    position: relative;
}

.intel-section:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.intel-section h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intel-section h3 i {
    font-size: 1.15rem;
}

/* Expand/collapse chevron */
.intel-section h3::after {
    content: '\f078'; /* chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.intel-section.expanded h3::after {
    transform: rotate(180deg);
}

/* Section summary - shows when collapsed */
.intel-summary {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 8px;
    font-style: italic;
    display: block;
    transition: opacity 0.3s ease;
}

.intel-section.expanded .intel-summary {
    display: none;
}

/* Section-specific icon colors */
.intel-section:nth-child(1) h3 i { color: #00bfff; }
.intel-section:nth-child(2) h3 i { color: #ffa500; }
.intel-section:nth-child(3) h3 i { color: var(--police-red); }
.intel-section:nth-child(4) h3 i { color: var(--neon-green); }
.intel-section:nth-child(5) h3 i { color: var(--warning-yellow); }

.intel-data {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-top: 12px;
    /* Improved readability with better spacing */
    letter-spacing: 0.3px;
    /* Show summary by default */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.intel-section.expanded .intel-data {
    max-height: none;  /* Remove height limit to prevent overflow */
    overflow: visible; /* Show all content */
    animation: fadeInContent 0.3s ease-out;
}

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

.intel-data ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.intel-data li {
    position: relative;
    padding: 15px 20px 15px 35px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    /* Better readability */
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid transparent;
    /* Improved text wrapping for long items from Grok */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

.intel-data li:before {
    content: '▸';
    position: absolute;
    left: 12px;
    color: #0077ff;
    font-weight: bold;
    font-size: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
}

.intel-data li:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #0077ff;
    transform: translateX(3px);
}

/* Strong text in conditions */
.intel-data li strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 5px;
}

/* Highlighting */
.intel-data .highlight {
    color: var(--text-primary);
    font-weight: 600;
    background: rgba(0, 119, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.98rem;
}

.intel-data .warning {
    color: var(--warning-yellow);
    font-weight: 600;
    text-shadow: 0 0 3px rgba(255, 215, 0, 0.3);
}

.intel-data .alert {
    color: var(--police-red);
    font-weight: 600;
    text-shadow: 0 0 3px rgba(220, 20, 60, 0.3);
}

.intel-data .success {
    color: var(--neon-green);
    font-weight: 600;
    text-shadow: 0 0 3px rgba(0, 255, 0, 0.3);
}

/* Refresh Button */
.intel-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.2) 0%, rgba(0, 119, 255, 0.1) 100%);
    border: 1px solid #0077ff;
    border-radius: 25px;
    color: #0077ff;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.intel-refresh-btn:hover {
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.3) 0%, rgba(0, 119, 255, 0.2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 119, 255, 0.4);
}

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

/* Warning Banner */
.intel-warning-banner {
    background-color: #FFC107;
    color: #212529;
    padding: 12px 20px;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.intel-warning-banner i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Unverified Label */
.unverified-label {
    display: inline-block;
    background-color: rgba(255, 193, 7, 0.2);
    color: #FFC107;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 6px;
    border: 1px solid rgba(255, 193, 7, 0.3);
    cursor: help;
}

/* Error State */
.intel-error {
    text-align: center;
    padding: 60px 20px;
}

.intel-error i {
    font-size: 3rem;
    color: var(--police-red);
    margin-bottom: 20px;
    display: block;
}

.intel-error p {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.error-detail {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.intel-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.2) 0%, rgba(220, 20, 60, 0.1) 100%);
    border: 1px solid var(--police-red);
    border-radius: 25px;
    color: var(--police-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.intel-retry-btn:hover {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.3) 0%, rgba(220, 20, 60, 0.2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(220, 20, 60, 0.4);
}

/* Overlay */
.intel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.intel-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Visual indicator for scrollable content */
.intel-popup-content {
    position: relative;
}

.intel-popup-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.intel-popup-content.has-scroll::after {
    opacity: 1;
}

/* Improved scrollbar styling */
.intel-popup-content::-webkit-scrollbar {
    width: 8px;
}

.intel-popup-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.intel-popup-content::-webkit-scrollbar-thumb {
    background: rgba(0, 119, 255, 0.3);
    border-radius: 4px;
}

.intel-popup-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 119, 255, 0.5);
}

/* Empty state styling */
.intel-data p {
    font-style: italic;
    opacity: 0.7;
    text-align: center;
    padding: 10px;
}

/* Section-specific styling for better readability */
#intel-conditions li {
    border-left-color: #00bfff;
}

#intel-conditions li:hover {
    background: rgba(0, 191, 255, 0.05);
}

#intel-safety li {
    border-left-color: #ffa500;
}

#intel-safety li:hover {
    background: rgba(255, 165, 0, 0.05);
}

#intel-incidents li {
    border-left-color: var(--police-red);
}

#intel-incidents li:hover {
    background: rgba(220, 20, 60, 0.05);
}

#intel-scanner li {
    border-left-color: #9146ff;
}

#intel-scanner li:hover {
    background: rgba(145, 70, 255, 0.05);
}

#intel-tips li {
    border-left-color: #00ff7f;
}

#intel-tips li:hover {
    background: rgba(0, 255, 127, 0.05);
}

/* Icon spacing in list items */
.intel-data li > span:first-child {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* Handle very long items with expandable text */
.intel-data li.long-item {
    cursor: pointer;
    position: relative;
}

.intel-data li.long-item::after {
    content: '... Show more';
    color: #0077ff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
}

.intel-data li.long-item.expanded::after {
    content: ' Show less';
}

.intel-data li.truncated {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.intel-data li.truncated::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    pointer-events: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .weather-content-wrapper {
        min-height: 120px;
    }
    
    .more-options-btn {
        font-size: 0.85rem;
        padding: 8px 12px;
    }
    
    .driving-intel-popup {
    width: 95%;
    max-width: none;
    max-height: 95vh;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    }
    
    .driving-intel-popup.active {
    transform: translate(-50%, -50%) scale(1);
    }
    
    .intel-popup-header {
        padding: 18px 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .intel-header-left {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    
    .powered-by-openai {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
    
    .powered-by-openai svg {
        width: 12px;
        height: 12px;
    }
    
    .intel-close-btn {
        width: 36px;
        height: 36px;
    }
    
    .intel-popup-content {
        padding: 0;
        max-height: calc(100vh - 75px);
    }
    
    .intel-warning-banner {
        margin: 0;
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    .intel-content-wrapper {
        padding: 20px;
    }
    
    .intel-timestamp {
        font-size: 0.9rem;
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .intel-sections {
        gap: 18px;
    }
    
    .intel-section {
        padding: 18px;
        border-radius: 10px;
    }
    
    .intel-section h3 {
        font-size: 1.1rem;
        gap: 10px;
        margin-bottom: 12px;
    }
    
    .intel-section h3 i {
        font-size: 1rem;
    }
    
    .intel-data {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .intel-data li {
        padding: 12px 15px 12px 30px;
        margin-bottom: 10px;
        font-size: 0.95rem;
    }
    
    .intel-data li:before {
        font-size: 1rem;
        left: 10px;
    }
    
    .intel-data li:hover {
        transform: translateX(2px);
    }
    
    .intel-refresh-btn,
    .intel-retry-btn {
        font-size: 0.95rem;
        padding: 10px 24px;
    }
    
    /* Better touch targets */
    .intel-close-btn,
    .intel-refresh-btn,
    .intel-retry-btn {
        min-height: 44px;
    }
}
/* Quick summary view */
.intel-quick-view {
    background: rgba(0, 119, 255, 0.1);
    border: 1px solid rgba(0, 119, 255, 0.3);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.intel-quick-view i {
    font-size: 2rem;
    color: #0077ff;
}

.intel-quick-summary {
    flex: 1;
}

.intel-quick-summary h4 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.intel-quick-summary p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
}
       
       
     /* Driving Intelligence Section Styles */
.driving-intel-section {
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.08) 0%, rgba(0, 0, 0, 0.95) 100%);
    border: 2px solid rgba(0, 119, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 119, 255, 0.2);
    backdrop-filter: blur(10px);
    transition:
        transform var(--duration-base) var(--ease-smooth),
        box-shadow var(--duration-base) var(--ease-smooth),
        border-color var(--duration-base) var(--ease-smooth);
    transform: translate3d(0, 0, 0);
}

.driving-intel-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
}

.driving-intel-section:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 30px rgba(0, 191, 255, 0.4);
    border-color: #0099ff;
}

/* Animated background effect */
.driving-intel-section::before {
    /* Rotating animation removed - too distracting */
    display: none;
}

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

/* Header */
.intel-main-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}


.intel-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(0, 119, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0077ff;
    position: relative;
}

.intel-icon-wrapper i {
    font-size: 2rem;
    color: #0077ff;
    filter: drop-shadow(0 0 5px rgba(0, 119, 255, 0.5));
}

.intel-icon-wrapper::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid #0077ff;
    opacity: 0.3;
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.05); opacity: 0.6; }
}

.intel-title-wrapper {
    flex: 1;
}

.intel-main-title {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.intel-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.8;
}

/* Status indicator */
.intel-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.intel-status-dot {
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-green);
    animation: status-pulse 2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

.intel-status-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--neon-green);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Content wrapper */
.intel-content-wrapper {
    position: relative;
    z-index: 1;
}

.intel-description {
    margin-bottom: 25px;
}

.intel-description p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Access button */
.intel-access-btn {
    width: 100%;
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.2) 0%, rgba(0, 119, 255, 0.1) 100%);
    border: 2px solid #0077ff;
    color: var(--text-primary);
    padding: 15px 30px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.intel-access-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 119, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.intel-access-btn:hover::before {
    width: 300%;
    height: 300%;
}

.intel-access-btn:hover {
    background: linear-gradient(135deg, rgba(0, 119, 255, 0.3) 0%, rgba(0, 119, 255, 0.2) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 119, 255, 0.4);
    border-color: #0099ff;
}

.intel-access-btn i:first-child {
    font-size: 1.3rem;
}

.intel-access-btn i:last-child {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.intel-access-btn:hover i:last-child {
    transform: translateX(5px);
}

/* Footer */
.intel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.intel-powered-by {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

.intel-powered-by svg {
    color: #0077ff;
}

.intel-timestamp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.intel-timestamp i {
    color: var(--neon-green);
    font-size: 0.9rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .driving-intel-section {
        padding: 20px;
        margin: 30px 0;
    }
    
    .intel-main-header {
        flex-wrap: wrap;
        text-align: center;
    }
    
    .intel-icon-wrapper {
        width: 50px;
        height: 50px;
        margin: 0 auto 15px;
    }
    
    .intel-icon-wrapper i {
        font-size: 1.5rem;
    }
    
    .intel-title-wrapper {
        width: 100%;
        text-align: center;
    }
    
    .intel-main-title {
        font-size: 1.5rem;
    }
    
    .intel-status {
        margin: 15px auto 0;
        width: fit-content;
    }
    
    .intel-description p {
        font-size: 1rem;
        text-align: center;
    }
    
    .intel-access-btn {
        font-size: 1rem;
        padding: 12px 20px;
    }
    
    .intel-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Overlay for popup */
.intel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.intel-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Enhanced Loading Screen with Progress Bar - More Compact */
.intel-loading-content {
    padding: 25px;
    max-width: 100%;
    margin: 0 auto;
}

/* Scrollable content wrapper */
.intel-content-wrapper {
    padding: 25px;
}

/* OpenAI Text Branding Style - Subtle */
.model-badge, .openai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
}

.openai-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    color: #888;
    font-size: 12px;
    letter-spacing: -0.2px;
}

.model-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    color: #666;
    font-size: 12px;
    letter-spacing: -0.2px;
}

.powered-by-subtle {
    color: #0099ff;
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.loading-header {
    text-align: center;
    margin-bottom: 30px;
}

.loading-header h3 {
    font-size: 1.8rem;
    color: var(--neon-blue);
    margin-bottom: 8px;
    font-family: 'Orbitron', monospace;
}

.loading-subtitle {
    color: #888;
    font-size: 1rem;
}

/* Progress Bar Container */
.progress-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 191, 255, 0.2);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
    border-radius: 10px;
    transition: width 0.5s ease;
    width: 0%;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.progress-percentage {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--neon-green);
    min-width: 50px;
    text-align: right;
}

/* Current Step Display */
.current-step-display {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 191, 255, 0.2);
    border-radius: 12px;
    margin: 25px 0;
}

.step-icon-large {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 191, 255, 0.15);
    border-radius: 50%;
    color: var(--neon-blue);
    font-size: 1.8rem;
    animation: pulse 1.5s ease-in-out infinite;
}

.step-info {
    flex: 1;
}

.step-title-large {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--neon-blue);
    margin-bottom: 5px;
}

.step-desc-large {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Step Indicators */
.step-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #0077ff;
    transition: all 0.3s ease;
    cursor: default;
}

.step-dot.active {
    background: var(--neon-blue);
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
    transform: scale(1.2);
}

.step-dot.completed {
    background: var(--neon-green);
    border-color: var(--neon-green);
}

.loading-note {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 20px;
}

.loading-note i {
    color: var(--neon-blue);
    margin-right: 8px;
}

/* Model Banner in Results */
.intel-model-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    background: transparent;
    border-bottom: 1px solid rgba(0, 119, 255, 0.1);
    margin-bottom: 15px;
}

.model-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.model-desc {
    color: #888;
    font-size: 0.85rem;
}

.analysis-complete {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--neon-green);
    font-size: 0.9rem;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}
        
    /* Stream Highlights Section */
    .stream-highlights-section {
        margin-top: 15px;
        padding: 8px 0;
        position: relative;
        overflow: hidden;
    }

    .highlights-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px 0 40px;
    }

    .highlights-wrapper {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.9) 100%);
        border-radius: 15px;
        border: 2px solid var(--warning-yellow);
        overflow: hidden;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
        position: relative;
        padding: 25px;
        transition: all 0.3s ease;
    }

    .highlights-wrapper:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
        border-color: #FFE44D;
    }

    .highlights-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            var(--warning-yellow) 20%, 
            var(--warning-yellow) 80%, 
            transparent 100%);
        animation: highlight-scan 3s ease-in-out infinite;
    }

    @keyframes highlight-scan {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 1; }
    }

    .highlights-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 25px;
        flex-wrap: wrap;
        position: relative;
    }

    .highlights-badge {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--warning-yellow);
        flex-shrink: 0;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
        position: relative;
    }

    .highlights-badge::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 50%;
        border: 2px solid var(--warning-yellow);
        opacity: 0.5;
        animation: badge-pulse 2s ease-in-out infinite;
    }

    .highlights-badge i {
        font-size: 1.3rem;
        color: var(--warning-yellow);
        animation: radar-pulse 2s ease-in-out infinite;
    }

    .highlights-title {
        flex: 1;
    }

    .highlights-title h3 {
        margin: 0;
        color: var(--warning-yellow);
        font-size: 1.3rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
        font-family: 'Orbitron', sans-serif;
    }

    .stream-highlights-section .stream-info {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.95rem;
        margin-top: 5px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* VOD link button removed - VOD is displayed above with embedded player */

    .highlights-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .highlight-item {
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 3px solid var(--warning-yellow);
        padding: 15px;
        border-radius: 8px;
        display: flex;
        gap: 15px;
        align-items: start;
        transition: all 0.3s ease;
        position: relative;
    }

    .highlight-item:hover {
        background: rgba(0, 0, 0, 0.8);
        border-color: rgba(255, 255, 255, 0.2);
        border-left-color: rgba(255, 215, 0, 0.8);
        transform: translateX(4px);
        box-shadow: -4px 0 20px rgba(255, 215, 0, 0.15);
    }

    .highlight-item:hover .highlight-description {
        background: rgba(255, 255, 255, 0.08);
    }

    .highlight-embed-wrapper {
        position: relative;
        flex-shrink: 0;
        width: 320px;
        height: 180px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid rgba(255, 215, 0, 0.3);
        transition: all 0.3s ease;
    }

    .highlight-embed-wrapper:hover {
        border-color: var(--warning-yellow);
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }

    .highlight-embed {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: all; /* Always allow interaction with Twitch player */
        z-index: 1;
    }

    /* Removed custom play overlay - using Twitch's native controls */

    .highlight-external-link {
        position: absolute;
        top: 10px;
        right: 10px;
        color: rgba(255, 255, 255, 0.7);
        background: rgba(0, 0, 0, 0.7);
        padding: 8px;
        border-radius: 4px;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .highlight-external-link:hover {
        color: var(--warning-yellow);
        background: rgba(0, 0, 0, 0.9);
    }

    .highlight-main {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .highlight-item:hover {
        background: rgba(0, 0, 0, 0.8);
        border-color: rgba(255, 215, 0, 0.2);
        transform: translateX(5px);
        box-shadow: 0 2px 10px rgba(255, 215, 0, 0.1);
    }

    .highlight-timestamp {
        background: rgba(255, 215, 0, 0.1);
        color: var(--warning-yellow);
        padding: 8px 14px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
        transition: all 0.2s ease;
        border: 1px solid rgba(255, 215, 0, 0.2);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Orbitron', monospace;
    }

    .highlight-timestamp:hover {
        background: rgba(255, 215, 0, 0.15);
        border-color: var(--warning-yellow);
        transform: translateX(2px);
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    }

    .highlight-timestamp i {
        font-size: 1rem;
    }

    .highlight-content {
        flex: 1;
    }

    .highlight-content .highlight-title {
        color: #fff;
        font-weight: 700;
        margin-bottom: 6px;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .highlight-content .highlight-description {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.9rem;
        line-height: 1.6;
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 12px;
        border-radius: 6px;
        margin-top: 8px;
    }

    @media (max-width: 768px) {
        .highlights-container {
            padding: 0 15px;
        }
        
        .highlights-wrapper {
            padding: 20px 15px;
        }
        
        .highlights-header {
            gap: 12px;
        }
        
        .highlights-badge {
            margin: 0 auto 10px;
        }
        
        .highlights-title {
            text-align: center;
            width: 100%;
        }
        
        .highlight-item {
            flex-direction: column;
            gap: 10px;
        }

        .highlight-embed-wrapper {
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;
        }

        .highlight-embed {
            width: 100%;
            height: 100%;
        }

        .highlight-external-link {
            display: none; /* Hide on mobile since we'll open in app */
        }

        .highlight-main {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }

        .highlight-timestamp {
            align-self: flex-start;
        }
    }

    /* ============================================
       ACCESSIBILITY & RESPONSIVE ENHANCEMENTS
       Apple-caliber polish for all devices
       ============================================ */

    /* Touch-friendly interactive elements (Apple HIG 44x44px minimum) */
    button,
    a[role="button"],
    .interactive-element,
    .vod-part-button {
        min-height: 44px;
        min-width: 44px;
        -webkit-tap-highlight-color: rgba(0, 191, 255, 0.2);
    }

    /* Touch-specific active state for tactile feedback */
    @media (hover: none) and (pointer: coarse) {
        button:active,
        .status-card:active,
        .vod-part-button:active {
            transform: scale(0.98);
            transition: transform 100ms var(--ease-smooth);
        }

        /* Reduce lift effect on mobile (feels better) */
        .status-card:hover {
            transform: translate3d(0, -4px, 0);
        }
    }

    /* Keyboard focus indicators (WCAG 2.1 AA compliant) */
    *:focus {
        outline: none;
    }

    *:focus-visible {
        outline: 2px solid var(--blue-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

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

        /* Keep functional animations disabled */
        .status-card,
        .announcement-wrapper,
        .live-indicator,
        .status-dot {
            animation: none !important;
        }
    }

    /* Mobile optimization (< 640px) */
    @media (max-width: 640px) {
        /* Larger touch targets */
        .vod-part-button {
            padding: var(--space-3) var(--space-4);
            font-size: 0.95rem;
        }

        /* Keep platform icons horizontal on mobile - Apple quality */
        .platform-icons-row {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            justify-content: center;
            padding: 0 4px; /* Subtle padding for scroll area */
        }

        .platform-icons-row::-webkit-scrollbar {
            display: none;
        }

        .platform-icon-wrapper {
            flex-shrink: 0;
            min-width: 75px;
            justify-content: center;
        }

        /* Reduce badge sizes on mobile */
        .dispatch-badge,
        .no-stream-badge {
            width: 48px;
            height: 48px;
            padding: var(--space-2);
        }

        .dispatch-badge i,
        .no-stream-badge i {
            font-size: 1.3rem;
        }

        /* Mobile optimizations for no-stream-today announcement */
        .no-stream-indicator {
            font-size: 0.85rem !important;
            padding: 10px 18px !important;
            letter-spacing: 1.5px !important;
        }

        .stream-announcement.no-stream-today .stream-title {
            font-size: 0.95rem !important;
            padding: 8px 18px !important;
        }

        .no-stream-announcement .no-stream-message {
            padding: 14px 18px !important;
            font-size: 0.9rem !important;
        }

        .no-stream-vods {
            margin-top: 24px !important;
            padding: 18px !important;
            border-radius: 12px !important;
        }

        /* Override for no-stream-vods container - restore horizontal padding */
        .stream-announcement.no-stream-today .no-stream-announcement .latest-vod-display.no-stream-vods {
            padding: 24px 16px 24px 16px !important;
        }

        /* Mobile glassmorphism optimization */
        .stream-announcement.no-stream-today .announcement-wrapper {
            backdrop-filter: blur(15px) saturate(130%) !important;
            -webkit-backdrop-filter: blur(15px) saturate(130%) !important;
        }

        .no-stream-indicator,
        .no-stream-announcement .no-stream-message,
        .no-stream-vods {
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }

        /* Mobile spacing for VOD info container - fixed to match actual inline styles */
        .no-stream-vods > div[style*="background: linear-gradient"] {
            padding: 16px 16px !important;
        }

        .latest-vod-display:not(.no-stream-vods) > div[style*="background: rgba(0, 0, 0"] {
            padding: 16px 12px !important;
        }

        /* Mobile spacing for VOD watch links */
        .no-stream-vods a[href*="twitch.tv"] {
            padding: 10px 12px !important;
            gap: 12px !important;
            font-size: 0.85rem;
        }

        .no-stream-vods a[href*="twitch.tv"] > div:first-child {
            padding-right: 8px;
        }
    }

/* ============================================
   APPLE-LEVEL COMPREHENSIVE POLISH
   Systematic refinements for premium quality
   ============================================ */

/* === PHASE 1: ACCESSIBILITY (WCAG 2.1 AA Compliance) === */

/* Color contrast fixes - ensure 4.5:1 minimum */
.tagline,
.header-location,
.time-zone,
.weather-alert-description,
.vod-meta,
.metadata-description,
p[style*="rgba(255, 255, 255, 0.5)"],
p[style*="rgba(255, 255, 255, 0.6)"] {
    color: var(--white-secondary) !important;
}

/* Enhanced focus states - color-matched to context */
.status-card:focus-visible {
    outline: 3px solid var(--blue-accent);
    outline-offset: 3px;
}

.status-card.kick:focus-visible {
    outline-color: var(--kick-green);
}

.status-card.twitch:focus-visible {
    outline-color: var(--twitch-purple);
}

.status-card.youtube:focus-visible,
.status-card.scanner-status:focus-visible {
    outline-color: var(--youtube-red);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--blue-accent);
    outline-offset: 2px;
}

.stream-announcement:focus-visible {
    outline: 3px solid rgba(255, 185, 10, 0.8);
    outline-offset: 3px;
}

/* === PHASE 2: TYPOGRAPHY REFINEMENTS === */

/* Line-height system for readability */
body,
p,
.stream-description,
.metadata-description,
.vod-interruption-desc,
.intel-data {
    line-height: 1.5;
}

h1, h2, h3, h4,
.main-title,
.dispatch-header,
.platform-name {
    line-height: 1.3;
}

code, pre,
.time-display,
.duration-value {
    line-height: 1.4;
}

/* Fluid typography scaling */
.main-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
}

.dispatch-header {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
}

.stream-title {
    font-size: clamp(1.1rem, 2vw, 1.2rem);
}

/* === PHASE 3: 8PT GRID SPACING SYSTEM === */

/* Dashboard grid standardization */
.dashboard-grid {
    gap: var(--space-4) !important; /* 32px instead of 30px */
    margin: var(--space-3) 0 var(--space-5) !important; /* 24px 0 40px */
}

/* Container padding standardization */
.container {
    padding: var(--space-3) var(--space-3) var(--space-5) !important; /* 24px 24px 40px */
}

/* Card padding standardization */
.status-card,
.weather-card {
    padding: var(--space-4) !important; /* 32px instead of 30px */
}

/* Stream announcement padding */
.announcement-container {
    padding: 0 var(--space-3) !important; /* 0 24px */
}

/* === PHASE 4: MICRO-INTERACTIONS === */

/* Reduced hover lifts for premium feel */
.status-card:hover {
    transform: translate3d(0, -4px, 0) !important; /* Was -8px */
}

.weather-card:hover {
    transform: translate3d(0, -3px, 0) !important; /* Was -5px */
}

.vod-card:hover {
    transform: translate3d(0, -2px, 0) !important;
}

/* Note: .announcement-wrapper hover handled by state-specific selectors above */

/* Standardized transition timing */
.status-card,
.weather-card,
.vod-card,
.social-link,
button {
    transition: all var(--duration-base) var(--ease-smooth) !important;
}

/* Active states for tactile feedback */
.status-card:active,
.weather-card:active,
.social-link:active,
button:active,
a[role="button"]:active {
    transform: scale(0.97) !important;
    transition-duration: var(--duration-fast) !important;
}

/* === PHASE 5: GLASSMORPHISM OPTIMIZATION === */

/* Note: .announcement-wrapper backdrop-filter handled by state-specific selectors */

.status-card,
.weather-card {
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Inset highlights for 3D glass depth */
.status-card,
.weather-card,
.vod-card,
.feature-card {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 71, 171, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.status-card:hover,
.weather-card:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 191, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* === PHASE 6: COLOR HARMONY === */

/* Reduced saturation on non-active backgrounds */
.status-card {
    background: rgba(0, 0, 0, 0.75) !important; /* Slightly more opaque */
}

/* Subtle status dot glow */
.status-dot.offline {
    box-shadow: 0 0 6px rgba(225, 6, 0, 0.6) !important; /* Was 10px, too bright */
}

.status-dot.online {
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.7) !important;
}

/* === PHASE 7: BORDER WEIGHT HIERARCHY === */

/* Primary/Active containers */
.stream-announcement.has-stream .announcement-wrapper,
.stream-announcement.no-stream-today .announcement-wrapper {
    border-width: 2px !important;
}

/* Secondary containers */
.status-card,
.weather-card,
.vod-card {
    border-width: 1.5px !important;
}

/* Dividers and subtle borders */
.ticker-header,
.vod-meta {
    border-width: 1px !important;
}

/* === PHASE 8: RESPONSIVE TABLET OPTIMIZATION === */

/* 2-column tablet layout (600-900px) */
@media (min-width: 600px) and (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }
}

/* === PHASE 9: PERFORMANCE OPTIMIZATIONS === */

/* GPU acceleration for smooth animations */
.status-card,
.weather-card,
.vod-card,
.social-link {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Remove will-change after hover (memory optimization) */
.status-card:not(:hover),
.weather-card:not(:hover) {
    will-change: auto;
}

/* Note: .announcement-wrapper transform handled by state-specific selectors */

/* === PHASE 10: ENHANCED TOUCH TARGETS (Mobile) === */

@media (max-width: 768px) {
    /* Ensure 44px minimum touch targets */
    button,
    a[role="button"],
    .social-link,
    .platform-icon-wrapper,
    .map-toggle-button,
    .vod-part-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Larger interactive areas */
    .status-indicator,
    .live-viewer-count,
    .stream-time {
        padding: var(--space-2) var(--space-3) !important;
        min-height: 44px;
    }
}

/* === PHASE 11: HORIZONTAL SCROLL PREVENTION === */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Allow fixed modals to display properly */
html:has(.driving-intel-popup.active) {
    overflow: hidden; /* Prevent background scroll when modal open */
}

.container,
.news-ticker-wrapper,
.stream-announcement {
    max-width: 100%;
    overflow-x: hidden;
}

/* Dashboard grid needs visible overflow for card shadows/hover effects */
.dashboard-grid {
    max-width: 100%;
    overflow: visible;
}

/* Coverage map needs visible overflow for shadows/effects */
.coverage-map-section {
    max-width: 100%;
    overflow: visible;
}

.coverage-map-container {
    overflow: visible !important;
}

/* Trunkie section uses overflow: hidden for natural tape clipping */
.trunkie-after-hours-teaser {
    max-width: 100%;
    overflow: visible;
}

/* === PHASE 12: CONTAINER MAX-WIDTH STANDARDIZATION === */

/* Content containers */
.coverage-map-section,
.trunkie-after-hours-teaser,
.stream-highlights-section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Full-bleed containers */
.container,
.announcement-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* === PHASE 13: REDUCED MOTION ENHANCEMENTS === */

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

    /* Keep transforms but remove animation */
    .status-card:hover,
    .weather-card:hover,
    .announcement-wrapper:hover {
        animation: none !important;
        transform: none !important;
    }
}

/* === PHASE 14: IMPROVED VISUAL HIERARCHY === */

/* Clear z-index hierarchy */
.news-ticker-wrapper {
    z-index: var(--z-sticky);
}

/* Note: .driving-intel-popup keeps its original z-index: 1000 (don't override - needs to be above mobile nav 9999) */

.banner-dismiss-btn,
.map-toggle-button {
    z-index: var(--z-dropdown);
}

/* === PHASE 15: MOBILE TYPOGRAPHY SCALING === */

@media (max-width: 768px) {
    /* Smoother type scale on mobile */
    h1, .main-title {
        font-size: clamp(2rem, 7vw, 2.5rem) !important;
    }

    h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
    }

    h3 {
        font-size: clamp(1.1rem, 4vw, 1.3rem) !important;
    }

    p, .stream-description {
        font-size: clamp(0.9rem, 3vw, 1rem) !important;
    }
}

/* === PHASE 16: FOOTER SPACING (8PT GRID) === */

footer {
    padding: var(--space-4) var(--space-3) !important; /* 32px 24px */
}

/* === PHASE 17: SOCIAL GRID ICON CONSISTENCY === */

.social-link i,
.social-link .kick-logo-social {
    font-size: 2rem !important;
}

.social-grid {
    gap: var(--space-2) !important; /* 16px standardized */
}

/* === PHASE 18: PLATFORM CARD HOVER REFINEMENTS === */

.status-card.scanner-status:hover,
.status-card.kick:hover,
.status-card.twitch:hover,
.status-card.youtube:hover {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 0 30px currentColor,
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* === PHASE 19: IMPROVED SPACING RHYTHM === */

/* Stream details gap */
.stream-details {
    gap: var(--space-1) !important; /* 8px */
}

/* Announcement content gap */
.announcement-content {
    gap: var(--space-3) !important; /* 24px */
    padding: var(--space-4) var(--space-3) var(--space-2) !important; /* 32px 24px 16px */
}

/* VOD grid gap */
.vod-grid {
    gap: var(--space-2) !important; /* 16px */
    margin-top: var(--space-3) !important; /* 24px */
}

/* === PHASE 20: ENHANCED SHADOW LAYERING === */

/* Consistent 3-layer shadow system for announcement wrappers only */
.stream-announcement .announcement-wrapper {
    /* Shadow already defined in state-specific rules - don't override */
}

/* === PHASE 21: MOBILE PERFORMANCE OPTIMIZATION === */

@media (max-width: 768px) {
    /* Reduce blur for mobile performance */
    .status-card,
    .weather-card,
    .feature-card {
        backdrop-filter: blur(8px) saturate(110%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    }

    /* Simpler hover on mobile (less GPU intensive) */
    .status-card:hover,
    .weather-card:hover {
        transform: translate3d(0, -2px, 0) !important;
    }
}

/* === PHASE 22: BUTTON ENHANCEMENT === */

/* Map action buttons - better sizing */
.map-actions a {
    padding: var(--space-2) var(--space-3) !important; /* 16px 24px */
    gap: var(--space-1) !important;
    border-radius: var(--radius-md) !important;
}

/* === PHASE 23: CARD CONSISTENCY === */

/* Unified card border-radius */
.status-card,
.weather-card,
.vod-card,
.feature-card,
.announcement-wrapper {
    border-radius: var(--radius-xl) !important; /* 16px */
}

.vod-card,
.metadata-card,
.stream-metadata-card {
    border-radius: var(--radius-lg) !important; /* 12px */
}

/* === PHASE 24: IMPROVED HOVER STATES === */

/* Platform-specific glow on hover (refined) */
.status-card.scanner-status:hover {
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.status-card.kick:hover {
    box-shadow: 0 6px 20px rgba(83, 252, 24, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.status-card.twitch:hover {
    box-shadow: 0 6px 20px rgba(145, 70, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.status-card.youtube:hover {
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* === PHASE 25: SMALL SCREEN OPTIMIZATION === */

@media (max-width: 480px) {
    /* Extra tight spacing for small screens */
    .container {
        padding: var(--space-2) var(--space-2) var(--space-4) !important;
    }

    .dashboard-grid {
        gap: var(--space-2) !important;
    }

    .status-card,
    .weather-card {
        padding: var(--space-3) !important;
    }
}

/* === PHASE 26: INTERACTION POLISH === */

/* Smooth scale transitions */
button:hover,
.social-link:hover {
    transform: scale(1.05) translate3d(0, 0, 0);
}

button:active,
.social-link:active {
    transform: scale(0.95) translate3d(0, 0, 0);
}

/* === PHASE 27: LOADING STATE POLISH === */

/* Note: Loading animations handled by individual components - removed generic rule that broke existing animations */

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

/* === PHASE 28: FINAL TOUCH - UNIFORM POLISH === */

/* Ensure all interactive elements have cursor pointer */
.interactive-element,
.status-card,
.weather-card,
.social-link,
.vod-card,
.map-toggle-button,
.banner-dismiss-btn {
    cursor: pointer !important;
}

/* Smooth scroll behavior (respects reduced motion) */
html {
    scroll-behavior: smooth;
}

/* Print optimization */
@media print {
    .news-ticker-wrapper,
    .driving-intel-popup,
    .banner-dismiss-btn,
    .map-toggle-button,
    footer {
        display: none !important;
    }
}

/* VOD Section - Apple-Level Refinements */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .vod-part-button,
    .no-stream-vods a,
    .vod-embed-container,
    .latest-vod-display * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .vod-part-button:hover,
    .no-stream-vods a:hover {
        transform: none !important;
    }

    .no-stream-vods::before {
        animation: none !important;
    }
}

/* Enhanced Focus States for Accessibility */
.vod-part-button:focus-visible {
    outline: 2px solid rgba(145, 70, 255, 0.8) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 4px rgba(145, 70, 255, 0.3) !important;
}

.latest-vod-display a:focus-visible {
    outline: 2px solid rgba(145, 70, 255, 0.8) !important;
    outline-offset: 4px !important;
}

/* Backdrop Blur Fallback */
@supports not (backdrop-filter: blur(20px)) {
    .latest-vod-display > div:first-child {
        background: rgba(10, 5, 20, 0.9) !important;
    }

    .vod-part-button,
    .no-stream-vods {
        background: rgba(0, 0, 0, 0.85) !important;
    }
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Screen Reader Only Text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .vod-part-button {
        border-width: 2px !important;
    }

    .latest-vod-display a {
        border-width: 2px !important;
    }
}

/* End of Apple-Level Polish */