:root, [data-bs-theme="light"] {
    --wx-accent: #0d6efd;
    --wx-warm: #e8590c;
    --wx-cold: #1c7ed6;
    --wx-feels: #adb5bd;
    --wx-precip: rgba(28, 126, 214, .55);
    --wx-grid: rgba(0, 0, 0, .06);
    --wx-surface: #ffffff;
    --wx-page: #f3f6fa;
    --wx-nav: linear-gradient(90deg, #0b3d91, #1971c2);
    --wx-weekend: #fff4e6;
}

[data-bs-theme="dark"] {
    --wx-accent: #74c0fc;
    --wx-warm: #ff922b;
    --wx-cold: #74c0fc;
    --wx-feels: #868e96;
    --wx-precip: rgba(116, 192, 252, .5);
    --wx-grid: rgba(255, 255, 255, .08);
    --wx-surface: #1b1f24;
    --wx-page: #121417;
    --wx-nav: linear-gradient(90deg, #0b1f3a, #123a6b);
    --wx-weekend: #2b2116;
}

body { background: var(--wx-page); }
.card { background: var(--wx-surface); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }

.site-nav { background: var(--wx-nav); }
.site-nav .navbar-brand, .site-nav .nav-link { color: #fff; }
.site-nav .nav-link:hover { color: #cfe8ff; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); filter: invert(1); }
.site-nav .btn-outline-secondary { color: #fff; border-color: rgba(255, 255, 255, .4); }
.text-accent { color: #ffd43b; }
.search-form { min-width: 260px; }
.autocomplete-list { z-index: 1050; top: 100%; max-height: 360px; overflow: auto; }

.site-footer { background: var(--wx-surface); border-top: 1px solid var(--bs-border-color); }

.text-warm { color: var(--wx-warm); }
.text-cold { color: var(--wx-cold); }
.text-precip { color: var(--wx-cold); }

.wx-icon { display: inline-block; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.wx-sm { font-size: 1.15rem; }
.wx-md { font-size: 1.6rem; }
.wx-lg { font-size: 2.2rem; }
.wx-xl { font-size: 4rem; }

.now-temp { font-size: 3.4rem; font-weight: 700; line-height: 1; }
.now-details dt { font-weight: 400; color: var(--bs-secondary-color); }
.now-details dd { font-weight: 600; }

.hour-cell { min-width: 64px; padding: .5rem .25rem; border-radius: .5rem; background: var(--wx-page); }
.hour-now { box-shadow: inset 0 0 0 1px var(--wx-accent); }
.wind-arrow { display: inline-block; transform: rotate(var(--deg)); color: var(--bs-secondary-color); }

.chart-wrap { position: relative; height: 260px; }

.period-tabs .nav-link { color: var(--bs-body-color); }
.period-tabs .nav-link.active { background: var(--wx-accent); color: #fff; }
[data-bs-theme="dark"] .period-tabs .nav-link.active { color: #000; }

.day-card { color: var(--bs-body-color); transition: transform .12s; }
.day-card:hover, .city-card:hover { transform: translateY(-2px); }
.day-card.weekend { background: var(--wx-weekend); }
.city-card { color: var(--bs-body-color); transition: transform .12s; }

.stat { text-align: center; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); display: block; }
.stat-value { font-size: 1.5rem; font-weight: 700; }

.hourly-table .day-row th { background: var(--wx-page); }
.table { --bs-table-bg: transparent; }

/* Bootstrap stops at row-cols-6; the week needs 7 columns. */
@media (min-width: 992px) {
    .row-cols-lg-7 > * { flex: 0 0 auto; width: calc(100% / 7); }
}

/* Daily max/min SVG chart */
:root, [data-bs-theme="light"] { --wx-weekend-col: rgba(25, 113, 194, .07); --wx-max: #e03131; --wx-min: #1c3fd6; }
[data-bs-theme="dark"] { --wx-weekend-col: rgba(116, 192, 252, .08); --wx-max: #ff6b6b; --wx-min: #74a7fc; }
.wx-daily-svg { display: block; width: 100%; max-width: 760px; margin: 0 auto; height: auto; font-family: inherit; }
.wx-daily-svg .dc-weekend { fill: var(--wx-weekend-col); }
.wx-daily-svg .dc-day { fill: var(--bs-body-color); font-size: 17px; font-weight: 600; }
.wx-daily-svg .dc-day-weekend { fill: var(--wx-max); }
.wx-daily-svg .dc-date { fill: var(--bs-secondary-color); font-size: 13px; }
.wx-daily-svg .dc-line { fill: none; stroke: var(--bs-secondary-color); stroke-opacity: .45; stroke-width: 1.5; }
.wx-daily-svg .dc-dot-max { fill: var(--wx-max); }
.wx-daily-svg .dc-dot-min { fill: var(--wx-min); }
.wx-daily-svg .dc-val { font-size: 20px; font-weight: 500; }
.wx-daily-svg .dc-max { fill: var(--wx-max); }
.wx-daily-svg .dc-min { fill: var(--wx-min); }
.wx-daily-svg .dc-strip { fill: var(--bs-secondary-bg); fill-opacity: .9; }
[data-bs-theme="dark"] .wx-daily-svg .dc-strip { fill-opacity: .55; }
.wx-daily-svg .dc-precip { font-size: 17px; }
.dc-key { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: middle; }
.dc-key-max { background: var(--wx-max); }
.dc-key-min { background: var(--wx-min); }
.dc-sun-scale { display: inline-flex; gap: 1.2rem; padding: .1rem .5rem; border-radius: .25rem; font-size: .75rem; color: #343a40;
    background: linear-gradient(90deg, rgb(255, 212, 59), rgb(173, 181, 189)); }

/* Analytics consent banner */
.consent-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 760px; margin: 0 auto; background: var(--wx-surface); }