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

        /* ── NAV ── */
        .site-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            height: 50px;
            background: #0d0f14;
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 6px;
            z-index: 2000;
            border-bottom: 1px solid #1a1e26;
        }

        .nav-logo {
            font-size: 1rem;
            font-weight: 800;
            color: white;
            letter-spacing: 0.5px;
            margin-right: 16px;
        }

        .nav-tab {
            padding: 7px 18px;
            border-radius: 6px;
            color: #ffffff;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            background: transparent;
            border: none;
            transition: all 0.18s;
            font-family: inherit;
            letter-spacing: 0.02em;
        }
        .nav-tab:hover { color: white; background: rgba(255,255,255,0.1); }
        .nav-tab.active { color: white; background: rgba(255,255,255,0.16); }


        body {
            background-color: #1a1e24;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding-top: 50px;
        }

        /* ═══════════════════════════════════════════
           HOME PAGE
        ═══════════════════════════════════════════ */
        #page-home { display: block; color: #1a2c3a; }

        /* ── HEADER ── */
        #page-home header {
            text-align: center;
            padding: 52px 20px 40px;
            background: #0d0f14;
            border-bottom: 1px solid #1a1e26;
        }

        #page-home header h1 {
            font-size: 3.8rem;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: -1.5px;
            margin-bottom: 10px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        #page-home header p {
            font-size: 1.05rem;
            color: rgba(255,255,255,0.85);
            margin-bottom: 28px;
        }

        .header-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

        .btn-yt {
            background: #FF0000; color: white; text-decoration: none;
            padding: 12px 26px; border-radius: 8px; font-size: 0.95rem; font-weight: 700;
            display: inline-flex; align-items: center; gap: 8px;
            transition: background 0.2s; box-shadow: 0 2px 10px rgba(255,0,0,0.4);
        }
        .btn-yt:hover { background: #cc0000; }

        .btn-discord {
            background: #5865F2; color: white; text-decoration: none;
            padding: 12px 26px; border-radius: 8px; font-size: 0.95rem; font-weight: 700;
            display: inline-flex; align-items: center; gap: 8px;
            transition: background 0.2s; box-shadow: 0 2px 10px rgba(88,101,242,0.4);
        }
        .btn-discord:hover { background: #4752c4; }

        /* ── MAIN CONTENT ── */
        #page-home main {
            max-width: 960px;
            margin: 0 auto;
            padding: 32px 20px 56px;
        }

        .section-label {
            font-size: 1.2rem; font-weight: 800; margin-bottom: 12px;
            color: #ffffff; letter-spacing: 0.01em;
        }

        /* ── CURRENT WEATHER ── */
        .weather-card {
            background: #242830; border: 1px solid #2e3440;
            border-radius: 18px; padding: 22px 24px; margin-bottom: 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }

        .wx-location {
            display: flex; align-items: center; gap: 7px;
            font-size: 1rem; font-weight: 700; margin-bottom: 18px; color: #e8ecf4;
        }

        .wx-body { display: flex; align-items: stretch; }

        .wx-left {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; min-width: 130px;
            padding-right: 24px; border-right: 1px solid #2e3440; gap: 6px;
        }

        .wx-icon { font-size: 3.6rem; line-height: 1; }
        .wx-temp { font-size: 3rem; font-weight: 800; color: #e8ecf4; line-height: 1; }
        .wx-cond { font-size: 0.78rem; color: #ffffff; text-align: center; margin-top: 2px; }

        .wx-stats {
            flex: 1;
            display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);
        }

        .wx-stat {
            padding: 12px 18px;
            border-bottom: 1px solid #2e3440;
            border-right: 1px solid #2e3440;
        }
        .wx-stat:nth-child(3), .wx-stat:nth-child(6) { border-right: none; }
        .wx-stat:nth-child(4), .wx-stat:nth-child(5), .wx-stat:nth-child(6) { border-bottom: none; }

        .stat-lbl {
            font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em;
            color: #ffffff; margin-bottom: 5px;
        }
        .stat-val { font-size: 1rem; font-weight: 700; color: #e8ecf4; }

        /* ── HOURLY ── */
        .hourly-card {
            background: #242830; border: 1px solid #2e3440;
            border-radius: 18px; padding: 18px 20px; margin-bottom: 28px;
            overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }

        .hourly-scroll {
            display: flex; overflow-x: auto; gap: 0; padding-bottom: 4px;
            scrollbar-width: thin; scrollbar-color: #3a4050 transparent;
        }
        .hourly-scroll::-webkit-scrollbar { height: 4px; }
        .hourly-scroll::-webkit-scrollbar-thumb { background: #3a4050; border-radius: 4px; }

        .hourly-item {
            display: flex; flex-direction: column; align-items: center;
            min-width: 56px; padding: 6px 4px;
            border-right: 1px solid #2e3440; gap: 3px; flex-shrink: 0;
        }
        .hourly-item:last-child { border-right: none; }

        .h-time { font-size: 0.58rem; color: #ffffff; font-weight: 600; text-align: center; }
        .h-icon { font-size: 1.15rem; line-height: 1.2; }
        .h-temp { font-size: 0.8rem; font-weight: 700; color: #ffffff; }
        .h-wind { font-size: 0.56rem; color: #ffffff; text-align: center; line-height: 1.3; }

        /* ── VIDEOS ── */
        .videos-section { margin-bottom: 36px; }

        .video-grid {
            display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
        }

        .video-card {
            background: #242830; border: 1px solid #2e3440;
            border-radius: 12px; overflow: hidden; cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            text-decoration: none; display: block; color: inherit;
            will-change: transform, box-shadow;
        }
        .video-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

        .video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #2e3440; }

        .video-info { padding: 10px 12px 13px; }

        .video-title {
            font-size: 0.8rem; font-weight: 600; line-height: 1.35;
            margin-bottom: 6px; color: #e8ecf4;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .video-meta { font-size: 0.7rem; color: #7a8099; }

        /* ── FOOTER ── */
        #page-home footer, .page-footer {
            background: #0d0f14; border-top: 1px solid #1a1e26;
            padding: 40px 20px 24px; text-align: center;
        }

        .footer-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; color: #e8ecf4; }

        .social-buttons {
            display: flex; justify-content: center; gap: 12px;
            flex-wrap: wrap; margin-bottom: 32px;
        }

        .btn-social {
            background: #1e2530; border: 1px solid #2e3440;
            color: #e8ecf4; text-decoration: none;
            padding: 10px 20px; border-radius: 8px;
            font-size: 0.88rem; font-weight: 600;
            display: inline-flex; align-items: center; gap: 8px;
            transition: background 0.2s;
        }
        .btn-social:hover { background: #2a3340; }

        .copyright { font-size: 0.77rem; color: #5a6680; margin-top: 8px; }

        /* ── HAMBURGER (hidden on desktop) ── */
        .nav-hamburger {
            display: none;
            margin-left: auto;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 6px 8px;
            flex-direction: column;
            gap: 5px;
        }
        .nav-hamburger span {
            display: block;
            width: 22px; height: 2px;
            background: #fff;
            border-radius: 2px;
            transition: all 0.2s;
        }

        /* ── MOBILE DROPDOWN MENU ── */
        .nav-mobile-menu {
            display: none;
            position: fixed;
            top: 50px; left: 0; right: 0;
            background: #0d0f14;
            border-bottom: 1px solid #1a1e26;
            z-index: 1998;
            flex-direction: column;
            padding: 8px 0 12px;
        }
        .nav-mobile-menu.open { display: flex; }
        .nav-mobile-menu .nav-tab {
            width: 100%;
            text-align: left;
            padding: 12px 20px;
            border-radius: 0;
            font-size: 0.95rem;
            border-bottom: 1px solid #1a1e2640;
        }

        /* ── SUPPORT SECTION ── */
        .support-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid #1a1e26; }
        .btn-support {
            display: inline-block;
            background: #00d632;
            color: #000;
            text-decoration: none;
            padding: 12px 28px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 700;
            transition: background 0.18s, transform 0.15s;
            will-change: transform, background;
        }
        .btn-support:hover { background: #00b829; transform: translateY(-1px); }

        @media (max-width: 680px) {

            /* ── NAV ── */
            .site-nav { padding: 0 16px; }
            .nav-logo { font-size: 0.9rem; }
            .nav-tab { display: none; }
            .nav-mobile-menu .nav-tab { display: block; }
            .nav-hamburger { display: flex; }

            /* ── HOME HEADER ── */
            #page-home header { padding: 32px 16px 28px; }
            #page-home header h1 { font-size: 2.4rem; letter-spacing: -1px; }
            #page-home header p { font-size: 0.9rem; }
            #page-home main { padding: 20px 14px 40px; }

            /* ── WEATHER CARD ── */
            .weather-card { padding: 16px 14px; }
            .wx-body { flex-direction: column; gap: 0; }
            .wx-left {
                flex-direction: row; min-width: unset; width: 100%;
                padding-right: 0; padding-bottom: 14px;
                border-right: none; border-bottom: 1px solid #2e3440;
                justify-content: center; gap: 16px; margin-bottom: 0;
            }
            .wx-icon { font-size: 2.8rem; }
            .wx-temp { font-size: 2.4rem; }

            /* ── STATS GRID (2-col on mobile, fix border rules) ── */
            .wx-stats { grid-template-columns: repeat(2,1fr); grid-template-rows: unset; }
            .wx-stat { padding: 10px 12px; }
            /* reset desktop 3-col borders */
            .wx-stat:nth-child(3), .wx-stat:nth-child(6) { border-right: 1px solid #2e3440; }
            .wx-stat:nth-child(4), .wx-stat:nth-child(5), .wx-stat:nth-child(6) { border-bottom: 1px solid #2e3440; }
            /* apply 2-col borders */
            .wx-stat:nth-child(2n) { border-right: none; }
            .wx-stat:nth-last-child(-n+2):nth-child(odd),
            .wx-stat:nth-last-child(1) { border-bottom: none; }

            /* ── VIDEOS ── */
            .video-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

            /* ── SEVERE WEATHER ── */
            #page-severe { padding: 10px; }
            .sw-header-title { font-size: 17px; letter-spacing: 1px; }
            .map-container { height: 60vw; min-height: 280px; max-height: 480px; }
            .map-overlay-header { height: auto; min-height: 40px; padding: 8px 12px; }
            .dynamic-title { font-size: 14px; letter-spacing: 0.5px; line-height: 1.3; }
            .map-brand-header { display: none; }
            .map-legend {
                bottom: 0px; left: auto; right: 0px; padding: 2px 3px;
                min-width: unset; max-width: 58px; font-size: 5.5px; border-radius: 4px 0 0 0;
            }
            .legend-item { font-size: 5.5px; gap: 2px; margin-bottom: 0px; line-height: 1.4; }
            .legend-swatch { width: 7px; height: 5px; border-width: 1px; }
            .cig1-swatch, .cig2-swatch, .cig3-swatch { width: 7px; height: 5px; border-width: 1px; }
            .day-tab, .type-tab { padding: 5px 10px; font-size: 11px; }
            .map-city-search { padding: 2px 10px 4px; }
            .discussion-panel { margin: 10px 10px 4px; padding: 12px 14px; }

            /* ── YOUR WEATHER ── */
            .yw-container { padding: 18px 14px 0; }
            .yw-search-row { flex-wrap: wrap; gap: 8px; }
            .yw-search-row input { min-width: 0; }
            .yw-search-row button { flex: 1; font-size: 0.82rem; padding: 10px 10px; }
            .yw-extra-grid { grid-template-columns: repeat(2,1fr); }
            .yw-extra-stat:nth-child(2n) { border-right: none; }

            /* ── REPORT ── */
            .location-row { flex-wrap: wrap; }
            .location-display { width: 100%; }
            .btn-get-location { flex: 1; }

            /* ── FOOTER ── */
            .social-buttons { gap: 8px; }
            .btn-social { padding: 9px 14px; font-size: 0.82rem; }
        }

        /* ═══════════════════════════════════════════
           SEVERE WEATHER PAGE
        ═══════════════════════════════════════════ */
        #page-severe {
            display: none;
            background: #0d0f14;
            color: #e8ecf4;
            font-family: 'Barlow', sans-serif;
            padding: 14px;
            min-height: calc(100vh - 50px);
            display: none;
            flex-direction: column;
            align-items: center;
        }
        #page-severe.active { display: flex; }

        #page-severe :root {
            --bg:#0d0f14; --surface:#151820; --border:#2a2f3e;
            --text:#e8ecf4; --text-muted:#7a8099; --accent:#4a9eff;
        }

        .sw-container { width: 100%; max-width: 1200px; contain: layout style; }

        .sw-header-title {
            font-family: 'Barlow Condensed'; font-size: 22px;
            font-weight: 800; letter-spacing: 2px; margin-bottom: 6px;
            text-transform: uppercase; color: #e8ecf4;
        }

        .day-tabs, .type-tabs {
            display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap;
        }

        .day-tab, .type-tab {
            padding: 7px 15px; border-radius: 4px;
            font-family: 'Barlow Condensed'; font-size: 13px; font-weight: 700;
            cursor: pointer; border: 1px solid #2a2f3e;
            background: #151820; color: #7a8099; text-transform: uppercase;
        }

        .day-tab.active { background: #4a9eff; color: #fff; border-color: #4a9eff; }
        .type-tab.active { background: #e63950; color: #fff; border-color: #e63950; }
        .overview-tab.active { background: #222; color: #fff; border-color: #555; }

        .map-panel {
            background: #151820; border: 1px solid #2a2f3e;
            border-radius: 12px; overflow: hidden; width: 100%;
        }

        .map-container { position: relative; width: 100%; height: 720px; }

        #map { width: 100%; height: 100%; }

        .map-overlay-header {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 60px;
            background: rgba(0,0,0,0.9); z-index: 10;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 25px; border-bottom: 1px solid #2a2f3e;
            pointer-events: none;
        }

        .dynamic-title {
            font-family: 'Barlow Condensed'; font-weight: 800;
            font-size: 28px; color: white; letter-spacing: 1px; text-transform: uppercase;
        }

        .map-brand-header {
            font-family: 'Barlow Condensed'; font-weight: 800;
            font-size: 24px; color: white; letter-spacing: 2px;
        }

        .map-legend {
            position: absolute; bottom: 30px; right: 30px;
            background: rgba(0,0,0,0.85); padding: 15px;
            border-radius: 8px; border: 1px solid #2a2f3e; min-width: 210px;
        }

        .map-legend-toggle {
            display: none;
        }

        .legend-item {
            display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
            font-family: 'Barlow Condensed'; font-weight: 700; font-size: 14px; color: #e8ecf4;
        }

        .legend-swatch {
            width: 22px; height: 14px; border-radius: 2px;
            border-width: 2px; border-style: solid; flex-shrink: 0;
        }

        .cig1-swatch {
            width: 22px; height: 14px; border-radius: 2px; border: 2px solid #888; flex-shrink: 0;
            background: repeating-linear-gradient(-45deg,rgba(0,0,0,0.7) 0px,rgba(0,0,0,0.7) 1px,transparent 1px,transparent 8px);
        }
        .cig2-swatch {
            width: 22px; height: 14px; border-radius: 2px; border: 2px solid #888; flex-shrink: 0;
            background: repeating-linear-gradient(-45deg,rgba(0,0,0,0.75) 0px,rgba(0,0,0,0.75) 2px,transparent 2px,transparent 5px);
        }
        .cig3-swatch {
            width: 22px; height: 14px; border-radius: 2px; border: 2px solid #888; flex-shrink: 0;
            background: repeating-linear-gradient(-45deg,rgba(0,0,0,0.75) 0px,rgba(0,0,0,0.75) 2px,transparent 2px,transparent 5px),
                        repeating-linear-gradient(45deg,rgba(0,0,0,0.75) 0px,rgba(0,0,0,0.75) 2px,transparent 2px,transparent 5px);
        }

        .download-section { width: 100%; display: flex; justify-content: center; padding: 30px 0; }

        /* ── SPC REPORTS ── */
        .reports-panel {
            background: #151820; border: 1px solid #2a2f3e;
            border-radius: 12px; padding: 18px 20px; margin-bottom: 24px; width: 100%;
        }
        .reports-header {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
        }
        .reports-title {
            font-family: 'Barlow Condensed'; font-size: 16px; font-weight: 800;
            letter-spacing: 1.5px; text-transform: uppercase; color: #e8ecf4;
        }
        .reports-counts {
            display: flex; gap: 10px; flex-wrap: wrap;
        }
        .reports-count-badge {
            display: flex; align-items: center; gap: 6px;
            background: #1e2530; border: 1px solid #2a2f3e;
            border-radius: 6px; padding: 5px 12px;
            font-family: 'Barlow Condensed'; font-size: 14px; font-weight: 700;
        }
        .reports-count-badge .badge-num { font-size: 18px; font-weight: 800; }
        .badge-torn { color: #ff4444; }
        .badge-wind { color: #4a9eff; }
        .badge-hail { color: #44cc88; }
        .reports-type-tabs {
            display: flex; gap: 6px; margin-bottom: 12px;
        }
        .reports-type-tab {
            padding: 5px 14px; border-radius: 4px; font-family: 'Barlow Condensed';
            font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid #2a2f3e;
            background: #1e2530; color: #7a8099; text-transform: uppercase; transition: all 0.15s;
        }
        .reports-type-tab.active-torn { background: #ff4444; color: #fff; border-color: #ff4444; }
        .reports-type-tab.active-wind { background: #4a9eff; color: #fff; border-color: #4a9eff; }
        .reports-type-tab.active-hail { background: #44cc88; color: #111; border-color: #44cc88; }
        .reports-list {
            max-height: 260px; overflow-y: auto;
            scrollbar-width: thin; scrollbar-color: #3a4050 transparent;
        }
        .reports-list::-webkit-scrollbar { width: 4px; }
        .reports-list::-webkit-scrollbar-thumb { background: #3a4050; border-radius: 4px; }
        .report-item {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 9px 0; border-bottom: 1px solid #1e2530; font-size: 0.83rem;
        }
        .report-item:last-child { border-bottom: none; }
        .report-time { color: #7a8099; font-size: 0.75rem; min-width: 40px; padding-top: 1px; }
        .report-mag { font-weight: 800; min-width: 38px; font-family: 'Barlow Condensed'; font-size: 15px; }
        .report-loc { color: #e8ecf4; flex: 1; line-height: 1.4; }
        .report-state { color: #7a8099; font-size: 0.75rem; }
        .reports-empty { color: #7a8099; font-size: 0.85rem; padding: 18px 0; text-align: center; }
        .reports-link { margin-top: 10px; text-align: right; }
        .reports-link a { color: #4a9eff; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
        .reports-link a:hover { text-decoration: underline; }

        .download-btn {
            padding: 12px 30px; background: #333; color: white;
            border: 1px solid #2a2f3e; border-radius: 6px;
            font-family: 'Barlow Condensed'; font-weight: 700;
            text-transform: uppercase; cursor: pointer; letter-spacing: 1px; transition: all 0.2s;
        }
        .download-btn:hover { background: #4a9eff; border-color: #4a9eff; }

        .mapboxgl-ctrl-logo { display: none !important; }
        .mapboxgl-ctrl-attrib { display: none !important; }
        .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-bottom-left { display: none !important; }

        /* ── MAP CITY SEARCH ── */
        .map-city-search {
            display: flex; gap: 8px; padding: 2px 20px 4px; margin-top: -4px; background: #0d0f14;
        }

        /* ── SPC DISCUSSION ── */
        .discussion-panel {
            background: #242830; border: 1px solid #2e3440; border-radius: 12px;
            margin: 14px 20px 4px; padding: 16px 20px;
        }
        .discussion-title {
            font-family: 'Barlow Condensed', sans-serif; font-size: 13px;
            font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,0.5);
            text-transform: uppercase; margin-bottom: 10px;
        }
        .discussion-body {
            font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.6;
        }
        .map-city-search input {
            flex: 1; background: #1e2530; border: 1px solid #2e3440;
            color: #fff; padding: 9px 14px; border-radius: 8px;
            font-size: 0.9rem; font-family: inherit; outline: none;
        }
        .map-city-search input::placeholder { color: #6a8090; }
        .map-city-search button {
            background: #3a7bd5; border: none; color: #fff;
            padding: 9px 18px; border-radius: 8px; font-size: 0.88rem;
            font-weight: 700; cursor: pointer; font-family: inherit;
            transition: background 0.2s;
        }
        .map-city-search button:hover { background: #4a9eff; }

        /* ══ YOUR WEATHER PAGE ══ */
        #page-yourweather { display: none; flex-direction: column; min-height: calc(100vh - 50px); background: #1a1e24; }
        .yw-container { max-width: 860px; margin: 0 auto; padding: 32px 20px 0; width: 100%; contain: layout style; }

        .yw-search-row {
            display: flex; gap: 10px; margin-bottom: 28px;
        }
        .yw-search-row input {
            flex: 1; background: #242830; border: 1px solid #2e3440;
            color: #fff; padding: 11px 16px; border-radius: 8px;
            font-size: 0.95rem; font-family: inherit; outline: none;
        }
        .yw-search-row input::placeholder { color: #6a8090; }
        .yw-search-row button {
            background: #3a7bd5; border: none; color: #fff;
            padding: 11px 22px; border-radius: 8px; font-weight: 700;
            font-size: 0.9rem; cursor: pointer; font-family: inherit;
            transition: background 0.2s; white-space: nowrap;
        }
        .yw-search-row button:hover { background: #4a9eff; }

        /* risk banner */
        .risk-banner {
            border-radius: 10px; padding: 14px 18px;
            margin-bottom: 20px; display: flex;
            align-items: center; justify-content: space-between;
            gap: 14px; flex-wrap: wrap;
        }
        .risk-banner.none  { background: #1e2a1e; border: 1px solid #2e4a2e; }
        .risk-banner.risk  { background: #2a1e10; border: 1px solid #c0531a; }
        .risk-label { font-size: 0.95rem; font-weight: 700; color: #e8ecf4; }
        .risk-sub   { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
        .btn-outlook {
            background: #c0531a; color: #fff; border: none; border-radius: 7px;
            padding: 9px 18px; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; font-family: inherit; transition: background 0.2s; white-space: nowrap;
        }
        .btn-outlook:hover { background: #e06020; }

        /* alerts */
        .alerts-box { margin-bottom: 20px; }
        .alert-item {
            background: #2a1a1a; border: 1px solid #8b2020;
            border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
        }
        .alert-item.advisory { background: #1a1e2a; border-color: #3a5a9a; }
        .alert-item.watch    { background: #2a2010; border-color: #9a7010; }
        .alert-title { font-size: 0.9rem; font-weight: 700; color: #ff7070; margin-bottom: 3px; }
        .alert-item.advisory .alert-title { color: #7ab0ff; }
        .alert-item.watch    .alert-title { color: #ffc040; }
        .alert-desc { font-size: 0.78rem; color: rgba(255,255,255,0.6); }
        .no-alerts  { color: #4a8050; font-size: 0.88rem; padding: 10px 0; }

        /* daily forecast */
        .daily-card {
            background: #242830; border: 1px solid #2e3440;
            border-radius: 14px; overflow: hidden; margin-bottom: 20px;
        }
        .daily-item {
            border-bottom: 1px solid #1a1e26;
        }
        .daily-item:last-child { border-bottom: none; }
        .daily-summary {
            display: flex; align-items: center; gap: 14px;
            padding: 12px 18px; cursor: pointer; list-style: none;
        }
        .daily-summary::-webkit-details-marker { display: none; }
        .daily-day  { width: 90px; font-size: 0.88rem; font-weight: 700; color: #e8ecf4; }
        .daily-icon { font-size: 1.4rem; width: 32px; text-align: center; }
        .daily-desc { flex: 1; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
        .daily-temps { font-size: 0.88rem; font-weight: 700; color: #e8ecf4; white-space: nowrap; }
        .daily-low  { color: rgba(255,255,255,0.45); margin-left: 6px; }
        .daily-pop  { font-size: 0.78rem; color: #7ab0ff; margin-left: 10px; }
        .daily-toggle {
            color: #7ab0ff; font-size: 0.72rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
        }
        .daily-item[open] .daily-toggle { color: #b8d4ff; }
        .daily-ai-panel {
            padding: 0 18px 16px 154px; color: rgba(255,255,255,0.72);
        }
        .daily-ai-title {
            font-size: 0.74rem; font-weight: 800; color: #fff;
            text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
        }
        .daily-ai-panel p {
            font-size: 0.84rem; line-height: 1.5; margin: 0 0 12px;
        }
        .daily-ai-grid {
            display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
        }
        .daily-ai-grid div {
            background: #1f242c; border: 1px solid #2e3440; border-radius: 8px;
            padding: 9px 10px; min-width: 0;
        }
        .daily-ai-grid span {
            display: block; color: rgba(255,255,255,0.45); font-size: 0.68rem; margin-bottom: 3px;
        }
        .daily-ai-grid strong {
            color: #e8ecf4; font-size: 0.82rem;
        }
        .daily-periods {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px;
        }
        .daily-period-card {
            background: #1f242c; border: 1px solid #2e3440; border-radius: 10px;
            padding: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
        }
        .daily-period-card.night {
            background: #1b2028;
        }
        .daily-period-title {
            grid-column: 1 / -1; color: #fff; font-size: 0.78rem; font-weight: 900;
            text-transform: uppercase; letter-spacing: 0.5px;
        }
        .daily-period-card span {
            display: block; color: rgba(255,255,255,0.46); font-size: 0.68rem; margin-bottom: 3px;
        }
        .daily-period-card strong {
            color: #e8ecf4; font-size: 0.82rem;
        }

        .yw-extra-card, .yw-radar-card {
            background: #242830; border: 1px solid #2e3440;
            border-radius: 14px; padding: 18px 20px; margin-bottom: 20px;
        }
        .yw-extra-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
            border: 1px solid #2e3440; border-radius: 12px; overflow: hidden;
        }
        .yw-extra-stat {
            padding: 14px 16px; background: #1f242c; border-right: 1px solid #2e3440;
        }
        .yw-extra-stat:last-child { border-right: none; }
        .yw-extra-note {
            font-size: 0.76rem; color: rgba(255,255,255,0.5); margin-top: 10px;
        }
        .yw-radar-meta {
            font-size: 0.82rem; color: rgba(255,255,255,0.65); margin-bottom: 12px;
        }
        .yw-radar-grid {
            display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
        }
        .yw-radar-product {
            min-width: 0;
        }
        .yw-radar-product-title {
            font-size: 0.78rem; color: rgba(255,255,255,0.86); font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px;
        }
        .yw-radar-image {
            width: 100%; min-height: 240px; max-height: 520px; object-fit: contain;
            border: 0; border-radius: 12px; background: #111; display: block;
        }
        .yw-radar-fallback { margin-top: 10px; }
        .yw-radar-fallback a {
            color: #7ab0ff; text-decoration: none; font-size: 0.84rem; font-weight: 700;
        }
        .yw-radar-fallback a:hover { text-decoration: underline; }


        /* ══ COMING SOON PAGES ══ */
        #page-weekly, #page-tropical, #page-winter {
            display: none; flex-direction: column; align-items: center; justify-content: center;
            min-height: calc(100vh - 50px); background: #1a1e24;
        }
        #page-tropical {
            justify-content: flex-start; align-items: stretch;
        }
        .tropical-container {
            width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 20px 0;
        }
        .tropical-container .coming-soon-emoji { display: none; }
        .tropical-header {
            display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px;
        }
        .tropical-title {
            font-size: 1.65rem; font-weight: 900; color: #fff; letter-spacing: 0;
        }
        .tropical-source-link {
            color: #7ab0ff; text-decoration: none; font-size: 0.84rem; font-weight: 800;
            border: 1px solid #2e3440; border-radius: 8px; padding: 9px 12px; background: #242830;
        }
        .tropical-map-card {
            position: relative; height: min(68vh, 680px); min-height: 430px; overflow: hidden;
            background: #111720; border: 1px solid #2a2f3e; border-radius: 12px;
        }
        #tropical-map {
            position: absolute; inset: 0;
        }
        .tropical-map-header {
            position: absolute; top: 0; left: 0; right: 0; z-index: 3;
            height: 58px; display: flex; align-items: center; justify-content: space-between;
            padding: 0 20px; background: rgba(13,17,23,0.84); border-bottom: 1px solid #2a2f3e;
            pointer-events: none;
        }
        .tropical-legend {
            position: absolute; right: 18px; bottom: 18px; z-index: 3;
            background: rgba(0,0,0,0.84); border: 1px solid #2a2f3e; border-radius: 8px;
            padding: 12px 14px; min-width: 190px;
        }
        .tropical-legend-title {
            font-family: 'Barlow Condensed'; font-weight: 800; color: #7a8099;
            font-size: 12px; margin-bottom: 8px; text-transform: uppercase;
        }
        .nhc-low { background: #f5d000; border-color: #f5d000; }
        .nhc-med { background: #e89600; border-color: #e89600; }
        .nhc-high { background: #e60000; border-color: #e60000; }
        .nhc-cone { background: rgba(255,255,255,0.35); border-color: #ffffff; }
        .tropical-status {
            margin: 12px 0; color: rgba(255,255,255,0.62); font-size: 0.86rem;
        }
        .tropical-list {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 20px;
        }
        .tropical-item {
            background: #242830; border: 1px solid #2e3440; border-radius: 10px; padding: 12px 14px;
        }
        .tropical-item-title {
            color: #fff; font-size: 0.9rem; font-weight: 900; margin-bottom: 5px;
        }
        .tropical-item-meta {
            color: rgba(255,255,255,0.62); font-size: 0.78rem; line-height: 1.45;
        }
        .coming-soon-wrap { text-align: center; padding: 40px 20px; }
        .coming-soon-emoji { font-size: 4rem; margin-bottom: 20px; }
        .coming-soon-title { font-size: 2.4rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-bottom: 12px; }
        .coming-soon-sub { font-size: 1rem; color: rgba(255,255,255,0.45); }

        /* ══ SUBMIT A REPORT PAGE ══ */
        #page-report { display: none; flex-direction: column; min-height: calc(100vh - 50px); background: #1a1e24; }
        .report-container { max-width: 700px; margin: 0 auto; padding: 32px 20px 0; width: 100%; contain: layout style; }
        .report-title { font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; margin-bottom: 28px; }

        .report-section { margin-bottom: 20px; }
        .report-label { font-size: 0.9rem; font-weight: 700; color: #e8ecf4; margin-bottom: 8px; display: block; }
        .report-optional { color: rgba(255,255,255,0.4); font-weight: 400; font-size: 0.82rem; }
        .report-required { color: #e05050; }

        .file-drop-zone {
            border: 2px dashed #2e3440; border-radius: 12px; background: #242830;
            padding: 36px 20px; text-align: center; cursor: pointer;
            transition: border-color 0.2s, background 0.2s; position: relative;
        }
        .file-drop-zone:hover, .file-drop-zone.dragover { border-color: #3a7bd5; background: #1e2530; }
        .file-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
        .file-drop-hint { color: rgba(255,255,255,0.4); font-size: 0.88rem; margin-top: 6px; }
        .file-drop-icon { font-size: 2rem; margin-bottom: 6px; }
        .file-name-display { margin-top: 10px; font-size: 0.83rem; color: #7ab0ff; }

        .report-textarea {
            width: 100%; background: #242830; border: 1px solid #2e3440; border-radius: 10px;
            color: #e8ecf4; padding: 12px 14px; font-size: 0.9rem; font-family: inherit;
            resize: vertical; min-height: 100px; outline: none; transition: border-color 0.2s;
        }
        .report-textarea:focus { border-color: #3a7bd5; }

        .location-row { display: flex; gap: 10px; }
        .location-display {
            flex: 1; background: #242830; border: 1px solid #2e3440; border-radius: 10px;
            color: #e8ecf4; padding: 11px 14px; font-size: 0.88rem; font-family: inherit; outline: none;
        }
        .btn-get-location {
            background: #2e3e50; border: 1px solid #2e3440; color: #e8ecf4;
            padding: 11px 18px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
            cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s;
        }
        .btn-get-location:hover { background: #3a5070; }
        .location-ok { color: #4a8050; font-size: 0.78rem; margin-top: 6px; }

        .tos-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        .tos-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3a7bd5; cursor: pointer; flex-shrink: 0; }
        .tos-row label { font-size: 0.88rem; color: rgba(255,255,255,0.7); cursor: pointer; }
        .tos-link { color: #4a9eff; text-decoration: underline; cursor: pointer; background: none; border: none; font-size: inherit; font-family: inherit; padding: 0; }

        .btn-submit-report {
            width: 100%; background: #3a7bd5; border: none; color: #fff;
            padding: 14px; border-radius: 10px; font-size: 1rem; font-weight: 800;
            cursor: pointer; font-family: inherit; transition: background 0.2s; letter-spacing: 0.02em;
        }
        .btn-submit-report:hover:not(:disabled) { background: #4a9eff; }
        .btn-submit-report:disabled { background: #2a3040; color: rgba(255,255,255,0.3); cursor: not-allowed; }

        .report-success {
            background: #1e2a1e; border: 1px solid #3a6a3a; border-radius: 12px;
            padding: 24px; text-align: center; color: #6aaa6a; font-size: 1rem; font-weight: 700;
            margin-bottom: 20px;
        }
        .report-error { color: #e05050; font-size: 0.83rem; margin-top: 8px; }

        /* TOS MODAL */
        .tos-overlay {
            display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75);
            z-index: 9999; align-items: center; justify-content: center; padding: 20px;
        }
        .tos-overlay.open { display: flex; }
        .tos-modal {
            background: #242830; border: 1px solid #2e3440; border-radius: 14px;
            max-width: 540px; width: 100%; padding: 28px; position: relative; max-height: 80vh; overflow-y: auto;
        }
        .tos-modal h3 { font-size: 1.2rem; font-weight: 800; color: #fff; margin-bottom: 14px; }
        .tos-modal p  { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 12px; }
        .tos-close {
            position: absolute; top: 14px; right: 16px; background: none; border: none;
            color: rgba(255,255,255,0.5); font-size: 1.3rem; cursor: pointer;
        }
        .tos-close:hover { color: #fff; }

        @media (max-width: 680px) {
            .map-legend-toggle {
                display: inline-flex; align-items: center; justify-content: center;
                position: absolute; right: 10px; bottom: 10px; z-index: 5;
                min-width: 46px; min-height: 34px; padding: 0 12px;
                border: 1px solid rgba(255,255,255,0.22); border-radius: 8px;
                background: rgba(0,0,0,0.82); color: #fff;
                font-family: 'Barlow Condensed'; font-size: 15px; font-weight: 800;
                text-transform: uppercase; letter-spacing: 0.6px; cursor: pointer;
            }
            .map-legend {
                display: none; left: auto; right: 10px; bottom: 52px; z-index: 5;
                min-width: 168px; max-width: min(78vw, 240px); max-height: 62%;
                overflow-y: auto; padding: 10px 12px; border-radius: 8px;
                background: rgba(0,0,0,0.9);
            }
            .map-legend.open {
                display: block;
            }
            .legend-item {
                font-size: 12px; gap: 7px; margin-bottom: 4px; line-height: 1.25;
            }
            .legend-swatch, .cig1-swatch, .cig2-swatch, .cig3-swatch {
                width: 16px; height: 11px; border-width: 1px;
            }
            .yw-radar-grid {
                grid-template-columns: 1fr; gap: 18px;
            }
            .yw-radar-image {
                min-height: 220px; max-height: 420px;
            }
            .daily-summary {
                display: grid; grid-template-columns: 68px 28px 1fr; gap: 8px 10px;
                padding: 12px 14px;
            }
            .daily-day { width: auto; }
            .daily-desc { min-width: 0; }
            .daily-temps {
                grid-column: 1 / 4; display: flex; align-items: center; gap: 8px;
            }
            .daily-low, .daily-pop { margin-left: 0; }
            .daily-toggle {
                grid-column: 1 / 4;
            }
            .daily-ai-panel {
                padding: 0 14px 14px;
            }
            .daily-ai-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            .daily-periods {
                grid-template-columns: 1fr;
            }
            .tropical-container { padding: 18px 12px 0; }
            .tropical-header { align-items: flex-start; flex-direction: column; }
            .tropical-title { font-size: 1.25rem; }
            .tropical-map-card { height: 70vh; min-height: 430px; }
            .tropical-map-header { height: auto; min-height: 44px; padding: 8px 12px; }
            .tropical-legend {
                right: 10px; bottom: 10px; min-width: 150px; padding: 9px 10px;
            }
            .tropical-legend .legend-item { font-size: 11px; gap: 7px; }
        }