:root {
    --wx-bg: #eef2f8;
    --wx-surface: #ffffff;
    --wx-surface-2: #f3f6fb;
    --wx-border: rgba(15, 23, 42, 0.08);
    --wx-text: #0f172a;
    --wx-muted: #64748b;
    --wx-brand: #0c6efc;
    --wx-nav: #0c6efc;
    --wx-active: #0c6efc;
    --wx-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 20px rgba(15, 23, 42, 0.06);
    --wx-radius: 1.1rem;
    --wx-bottom-nav: 62px;
    --wx-rain: #2f6fe4;
    --wx-wind: #0d9488;
    --wx-humidity: #0891b2;
    --wx-aqi: #7c3aed;
    --wx-uv: #ea8a00;
    --wx-lightning: #d4a106;
    --wx-temp: #e5484d;
    --wx-forecast: #0c6efc;
    --wx-radar: #0d9488;
    --wx-graphs: #6366f1;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-bs-theme="dark"] {
    --wx-bg: #0b1120;
    --wx-surface: #131c2e;
    --wx-surface-2: #1a2539;
    --wx-border: rgba(255, 255, 255, 0.07);
    --wx-text: #e2e8f0;
    --wx-muted: #94a3b8;
    --wx-nav: #0d1628;
    --wx-active: #6ea8fe;
    --wx-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.25);
    --wx-rain: #6ea0ff;
    --wx-wind: #2dd4bf;
    --wx-humidity: #22d3ee;
    --wx-aqi: #a78bfa;
    --wx-uv: #fbbf24;
    --wx-lightning: #facc15;
    --wx-temp: #ff6b6f;
    --wx-forecast: #6ea8fe;
    --wx-radar: #2dd4bf;
    --wx-graphs: #a5b4fc;
}

html {
    overflow-y: scroll;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--wx-bg);
    color: var(--wx-text);
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--wx-bottom-nav) + env(safe-area-inset-bottom));
}

a:hover {
    text-decoration: none;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--wx-surface);
}

.site-header {
    padding-top: env(safe-area-inset-top);
    background: var(--wx-nav);
}

.site-nav {
    background: var(--wx-nav);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.12);
}

.brand-logo {
    height: 36px;
    width: auto;
    cursor: pointer;
}

.site-nav .navbar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 0;
}

.site-nav .nav-link {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    padding: 0.45rem 0.85rem !important;
    border-radius: 0.65rem;
    transition: background-color 0.2s, color 0.2s;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.site-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.site-nav .dropdown-menu {
    border: 1px solid var(--wx-border);
    border-radius: 0.8rem;
    box-shadow: var(--wx-shadow);
    padding: 0.35rem;
}

.site-nav .dropdown-item {
    border-radius: 0.5rem;
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 0.8rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transition: background-color 0.2s;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    background: rgba(255, 255, 255, 0.24);
}

html[data-bs-theme="light"] .icon-when-dark,
html[data-bs-theme="dark"] .icon-when-light {
    display: none;
}

.now {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1.25rem;
}

.tile {
    --accent: var(--wx-brand);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.95rem 1rem 1rem;
    color: var(--wx-text);
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
    text-decoration: none;
}

[data-accent] { --accent: var(--wx-brand); }
[data-accent="rain"] { --accent: var(--wx-rain); }
[data-accent="wind"] { --accent: var(--wx-wind); }
[data-accent="humidity"] { --accent: var(--wx-humidity); }
[data-accent="aqi"] { --accent: var(--wx-aqi); }
[data-accent="uv"] { --accent: var(--wx-uv); }
[data-accent="lightning"] { --accent: var(--wx-lightning); }
[data-accent="temp"] { --accent: var(--wx-temp); }
[data-accent="forecast"] { --accent: var(--wx-forecast); }
[data-accent="radar"] { --accent: var(--wx-radar); }
[data-accent="graphs"] { --accent: var(--wx-graphs); }

.tile-link {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tile-link:hover,
.tile-link:focus-visible {
    color: var(--wx-text);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.tile-link:active {
    transform: scale(0.98);
}

.tile-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
    min-width: 0;
}

.tile-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.65rem;
    font-size: 0.95rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.tile-label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-go {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--wx-muted);
    opacity: 0.7;
}

.dir-pill {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.dir-pill:empty {
    display: none;
}

.tile-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.unit {
    margin-left: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--wx-muted);
}

.tile-sub {
    font-size: 0.83rem;
    color: var(--wx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-badge {
    margin-top: auto;
    padding-top: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.tile-badge:empty {
    display: none;
}

.tile-badge .badge {
    font-weight: 600;
    padding: 0.4em 0.7em;
    border-radius: 0.5rem;
    white-space: normal;
    text-align: left;
}

.tile-hero {
    --sky: linear-gradient(160deg, #1a73e8 0%, #4a9cff 55%, #8cc4ff 100%);
    grid-column: 1 / -1;
    padding: 1.1rem 1.25rem 1.2rem;
    color: #fff;
    background: var(--sky);
    border: 0;
    overflow: hidden;
    isolation: isolate;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tile-hero > :not(.sky) {
    position: relative;
    z-index: 1;
}

.tile-hero[data-scene="partly-day"] { --sky: linear-gradient(160deg, #2f74d0 0%, #6a9fdc 60%, #a8c5e6 100%); }
.tile-hero[data-scene="cloudy-day"] { --sky: linear-gradient(160deg, #56697f 0%, #7a8ba1 60%, #9eacbe 100%); }
.tile-hero[data-scene="rain-day"] { --sky: linear-gradient(160deg, #37465a 0%, #4f6076 60%, #6b7c92 100%); }
.tile-hero[data-scene="storm-day"] { --sky: linear-gradient(160deg, #1c2030 0%, #342d4b 55%, #4b4466 100%); }
.tile-hero[data-scene="fog-day"] { --sky: linear-gradient(160deg, #6f7a89 0%, #939dab 60%, #b3bbc6 100%); }
.tile-hero[data-scene="dawn"] { --sky: linear-gradient(165deg, #2e3a86 0%, #9a5a9e 45%, #f08a6c 80%, #ffc27a 100%); }
.tile-hero[data-scene="dusk"] { --sky: linear-gradient(165deg, #1e2461 0%, #7b3f8c 45%, #e0685e 80%, #f9a65a 100%); }
.tile-hero[data-scene="clear-night"] { --sky: linear-gradient(160deg, #040a1c 0%, #0d1b44 55%, #1c2f66 100%); }
.tile-hero[data-scene="partly-night"] { --sky: linear-gradient(160deg, #080f24 0%, #16244a 55%, #2a3a63 100%); }
.tile-hero[data-scene="cloudy-night"] { --sky: linear-gradient(160deg, #111827 0%, #1f2a40 60%, #2e3a52 100%); }
.tile-hero[data-scene="rain-night"] { --sky: linear-gradient(160deg, #0c1220 0%, #1c283c 60%, #2a3850 100%); }
.tile-hero[data-scene="storm-night"] { --sky: linear-gradient(160deg, #07080f 0%, #1c1830 55%, #2d2546 100%); }
.tile-hero[data-scene="fog-night"] { --sky: linear-gradient(160deg, #181e2b 0%, #2e3646 60%, #434c5e 100%); }

.sky,
.sky > span {
    position: absolute;
    pointer-events: none;
}

.sky {
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.sky > span {
    display: none;
}

.sky-sun {
    top: -3.5rem;
    right: -3.5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7d1 0 18%, rgba(255, 221, 120, 0.75) 32%, rgba(255, 214, 102, 0.25) 52%, rgba(255, 214, 102, 0) 70%);
    animation: sun-breathe 8s ease-in-out infinite;
}

.tile-hero[data-scene="partly-day"] .sky-sun {
    opacity: 0.8;
}

.tile-hero[data-scene="dawn"] .sky-sun,
.tile-hero[data-scene="dusk"] .sky-sun {
    top: auto;
    bottom: -7.5rem;
    right: 12%;
    width: 15rem;
    height: 15rem;
    background: radial-gradient(circle, #fff1c4 0 16%, rgba(255, 176, 102, 0.8) 30%, rgba(255, 140, 90, 0.3) 50%, rgba(255, 140, 90, 0) 70%);
}

.sky-moon {
    top: 3.4rem;
    right: 1.75rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    box-shadow: inset -0.95rem 0.35rem 0 0 #f4f1dc;
    transform: rotate(-20deg);
    filter: drop-shadow(0 0 0.6rem rgba(244, 241, 220, 0.45));
}

.tile-hero[data-moon-img] .sky-moon {
    top: 2.9rem;
    right: 1.4rem;
    width: 4.2rem;
    height: 4.2rem;
    box-shadow: none;
    transform: none;
    background: var(--moon-img) center / contain no-repeat;
    mix-blend-mode: screen;
}

.tile-hero[data-moon-img][data-scene="partly-night"] .sky-moon {
    opacity: 0.85;
}

.sky-stars {
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 8% 22%, #fff, transparent),
        radial-gradient(1px 1px at 18% 68%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 29% 12%, #fff, transparent),
        radial-gradient(1px 1px at 38% 48%, #fff, transparent),
        radial-gradient(1px 1px at 47% 82%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 55% 28%, #fff, transparent),
        radial-gradient(1px 1px at 63% 60%, #fff, transparent),
        radial-gradient(1px 1px at 71% 9%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 74%, #fff, transparent),
        radial-gradient(1px 1px at 91% 40%, #fff, transparent),
        radial-gradient(1px 1px at 96% 88%, #fff, transparent),
        radial-gradient(1px 1px at 4% 90%, #fff, transparent);
    opacity: 0.85;
    animation: twinkle 5s ease-in-out infinite alternate;
}

.tile-hero[data-scene="partly-night"] .sky-stars {
    opacity: 0.45;
}

.sky-cloud {
    width: 8rem;
    height: 2.4rem;
    border-radius: 2rem;
    background: #fff;
    opacity: 0.5;
    animation: cloud-drift 60s linear infinite alternate;
}

.sky-cloud::before,
.sky-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.sky-cloud::before {
    width: 3.4rem;
    height: 3.4rem;
    top: -1.7rem;
    left: 1.3rem;
}

.sky-cloud::after {
    width: 2.6rem;
    height: 2.6rem;
    top: -1.1rem;
    left: 3.8rem;
}

.sky-cloud-1 {
    top: 2.6rem;
    right: 0.5rem;
}

.sky-cloud-2 {
    top: 7.6rem;
    right: 1.5rem;
    transform: scale(0.75);
    opacity: 0.35;
    animation-duration: 80s;
}

.sky-cloud-3 {
    top: 1.2rem;
    right: 11rem;
    transform: scale(0.55);
    opacity: 0.25;
    animation-duration: 95s;
}

.tile-hero[data-weather="cloudy"] .sky-cloud,
.tile-hero[data-weather="rain"] .sky-cloud {
    background: #dfe6ef;
}

.tile-hero[data-weather="storm"] .sky-cloud {
    background: #8e97ab;
}

.tile-hero[data-scene$="-night"] .sky-cloud {
    background: #9aa7c0;
    opacity: 0.22;
}

.sky-veil {
    inset: 0;
    background: linear-gradient(180deg, rgba(210, 218, 230, 0.2) 0%, rgba(210, 218, 230, 0.04) 70%);
}

.tile-hero[data-scene$="-night"] .sky-veil {
    background: linear-gradient(180deg, rgba(120, 132, 160, 0.18) 0%, rgba(120, 132, 160, 0.03) 70%);
}

.sky-fog {
    inset: 20% -10% 0;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, 0.16) 14px 28px);
    filter: blur(5px);
    animation: fog-drift 18s ease-in-out infinite alternate;
}

.sky-rain {
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60'%3E%3Cg stroke='%23fff' stroke-opacity='.4' stroke-width='1.2' stroke-linecap='round'%3E%3Cline x1='6' y1='0' x2='3' y2='12'/%3E%3Cline x1='26' y1='22' x2='23' y2='34'/%3E%3Cline x1='16' y1='42' x2='13' y2='54'/%3E%3Cline x1='37' y1='8' x2='34' y2='20'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 60px;
    animation: rain-fall 0.6s linear infinite;
}

.sky-rain-back {
    opacity: 0.45;
    background-size: 26px 40px;
    animation-duration: 0.9s;
}

.tile-hero[data-heavy] .sky-rain {
    background-size: 26px 40px;
    animation-duration: 0.4s;
}

.tile-hero[data-heavy] .sky-rain-back {
    background-size: 18px 28px;
    opacity: 0.6;
    animation-duration: 0.55s;
}

.sky-flash {
    inset: 0;
}

.sky-flash::before,
.sky-flash::after {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Cpath d='M15 0 3 27h8L6 48l16-29h-8l6-19z' fill='%23fff7cc'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 236, 150, 0.9)) drop-shadow(0 0 12px rgba(160, 190, 255, 0.6));
    opacity: 0;
    animation: bolt 7s infinite;
}

.sky-flash::before {
    top: 4.8rem;
    right: 3.9rem;
    width: 1.3rem;
    height: 2.5rem;
}

.sky-flash::after {
    top: 2.9rem;
    right: 14.6rem;
    width: 0.8rem;
    height: 1.6rem;
    animation-duration: 11s;
    animation-delay: 3.5s;
}

@media (max-width: 575.98px) {
    .sky-flash::after {
        display: none;
    }
}

.sky .sky-photo {
    display: block;
    inset: 0;
    background: center 80% / cover no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.sky-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 12, 26, 0.55) 0%, rgba(6, 12, 26, 0.15) 55%, rgba(6, 12, 26, 0) 100%),
        linear-gradient(180deg, rgba(6, 12, 26, 0.35) 0%, rgba(6, 12, 26, 0) 30%, rgba(6, 12, 26, 0) 60%, rgba(6, 12, 26, 0.55) 100%);
}

.sky-photo-time {
    right: 0.9rem;
    bottom: 0.75rem;
    z-index: 1;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(6, 12, 26, 0.35);
}

.tile-hero[data-camera] .sky-photo {
    opacity: 1;
}

.tile-hero[data-camera] .sky-photo-time {
    display: inline-flex;
}

.sky-photo-time i {
    font-size: 0.65rem;
    opacity: 0.85;
}

.live-source {
    display: none;
}

.tile-hero .live-source {
    display: inline;
    opacity: 0.75;
}

.tile-hero .live-source::after {
    content: "·";
    margin-left: 0.4rem;
}

.tile-hero[data-camera] .sky > span:not(.sky-photo):not(.sky-photo-time):not(.sky-moon),
.tile-hero[data-camera]:not([data-moon-img]) .sky-moon,
.tile-hero[data-camera]:not([data-scene$="-night"]) .sky-moon {
    display: none !important;
}

.tile-hero[data-camera][data-moon-img][data-scene$="-night"] .sky-moon {
    display: block !important;
    opacity: 1;
}

.tile-hero[data-camera][data-moon-img][data-clouds="3"] .sky-moon,
.tile-hero[data-camera][data-moon-img][data-clouds="4"] .sky-moon {
    opacity: 0.75;
}

.tile-hero[data-camera] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.tile-hero[data-scene="clear-day"] .sky-sun,
.tile-hero[data-scene="partly-day"] .sky-sun,
.tile-hero[data-scene="dawn"] .sky-sun,
.tile-hero[data-scene="dusk"] .sky-sun,
.tile-hero[data-scene="clear-night"] .sky-moon,
.tile-hero[data-scene="partly-night"] .sky-moon,
.tile-hero[data-scene="clear-night"] .sky-stars,
.tile-hero[data-scene="partly-night"] .sky-stars,
.tile-hero[data-clouds="1"] .sky-cloud-3,
.tile-hero[data-clouds="2"] .sky-cloud-1,
.tile-hero[data-clouds="2"] .sky-cloud-3,
.tile-hero[data-clouds="3"] .sky-cloud,
.tile-hero[data-clouds="4"] .sky-cloud,
.tile-hero[data-clouds="4"] .sky-veil,
.tile-hero[data-weather="fog"] .sky-fog,
.tile-hero[data-raining] .sky-rain,
.tile-hero[data-weather="storm"] .sky-flash {
    display: block;
}

.tile-hero[data-clouds="1"] .sky-cloud-3 {
    top: 5.2rem;
    right: 2.5rem;
    opacity: 0.45;
}

.tile-hero[data-clouds="3"] .sky-sun {
    opacity: 0.55;
}

.tile-hero[data-clouds="3"] .sky-moon {
    opacity: 0.6;
}

.tile-hero[data-clouds="3"] .sky-stars {
    opacity: 0.25;
}

.tile-hero[data-clouds="4"] .sky-sun,
.tile-hero[data-clouds="4"] .sky-moon,
.tile-hero[data-clouds="4"] .sky-stars {
    display: none;
}

@keyframes sun-breathe {
    50% { transform: scale(1.06); }
}

@keyframes twinkle {
    from { opacity: 0.5; }
    to { opacity: 0.95; }
}

@keyframes cloud-drift {
    from { translate: 0 0; }
    to { translate: -2.5rem 0; }
}

@keyframes fog-drift {
    to { translate: 1.5rem 0.5rem; }
}

@keyframes rain-fall {
    to { background-position: -10px 60px; }
}

@keyframes bolt {
    0%, 88%, 94%, 100% { opacity: 0; }
    88.6% { opacity: 1; }
    89.6% { opacity: 0.15; }
    90.8% { opacity: 0.85; }
}

.hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.hero-label {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

.hero-value {
    margin-top: 0.35rem;
    font-size: clamp(3.4rem, 15vw, 5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.hero-unit {
    margin-left: 0.1rem;
    font-size: 0.42em;
    font-weight: 500;
    vertical-align: 0.95em;
    letter-spacing: 0;
    opacity: 0.9;
}

.hero-sub {
    margin-top: 0.35rem;
    font-size: 1rem;
    opacity: 0.9;
}

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.hero-pills:not(:has(.hero-pill:not([hidden]))) {
    display: none;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(8, 20, 45, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hero-trend[data-direction="up"] i {
    color: #ffb4a8;
}

.hero-trend[data-direction="down"] i {
    color: #a8d4ff;
}

.tile-hero .tile-badge {
    margin-top: 0;
    padding-top: 0.75rem;
}

.tile-badge .badge,
.tile-badge .badge * {
    text-shadow: none !important;
    letter-spacing: 0.01em;
}

.tile-badge .badge-on-light,
.tile-badge .badge-on-light * {
    color: #1a1a1a !important;
}

.tile-badge .badge-on-dark,
.tile-badge .badge-on-dark * {
    color: #fff !important;
}

.tile-hero .badge {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.tile-hero .live {
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    background: rgba(8, 20, 45, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-weight: 500;
}

.live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: live-pulse 2s infinite;
}

.live.is-stale .live-dot {
    background: #fbbf24;
    animation: none;
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    70% { box-shadow: 0 0 0 0.45rem rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.uv-meter {
    position: relative;
    height: 0.4rem;
    margin: 0.6rem 0 0.2rem;
    border-radius: 1rem;
    background: linear-gradient(90deg, #299501 0 18%, #f7e401 18% 39%, #f95901 39% 54%, #d90011 54% 75%, #6c49cb 75% 100%);
}

.uv-marker {
    position: absolute;
    top: 50%;
    left: var(--pos, 0%);
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--wx-surface);
    border: 2px solid var(--wx-text);
    transform: translate(-50%, -50%);
    transition: left 0.6s ease;
}

.details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
}

.detail {
    padding: 0.75rem 0.6rem;
    text-align: center;
    min-width: 0;
}

.detail + .detail {
    border-left: 1px solid var(--wx-border);
}

.detail dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail dt i {
    margin-right: 0.2rem;
    opacity: 0.8;
}

.detail dd {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.now-strip {
    display: none;
    grid-column: 1 / -1;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0.7rem 1rem;
    color: var(--wx-text);
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
    text-decoration: none;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.now-strip:hover {
    color: var(--wx-text);
}

.strip-temp i {
    margin-right: 0.2rem;
    font-size: 1rem;
    color: var(--wx-brand);
}

html[data-bs-theme="dark"] .strip-temp i {
    color: var(--wx-active);
}

.strip-temp {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.strip-item {
    color: var(--wx-muted);
    white-space: nowrap;
}

.strip-item i {
    margin-right: 0.15rem;
    color: var(--wx-brand);
}

html[data-bs-theme="dark"] .strip-item i {
    color: var(--wx-active);
}

.strip-live {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--wx-muted);
}

.now.compact > :not(.now-strip) {
    display: none;
}

.now.compact > .now-strip {
    display: flex;
}

.page-content {
    min-height: 8rem;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.panel,
.page-content > .card,
.page-content .card.shadow-sm {
    min-width: 0;
    margin: 0 !important;
    color: var(--wx-text);
    background: var(--wx-surface) !important;
    border: 1px solid var(--wx-border) !important;
    border-radius: var(--wx-radius) !important;
    box-shadow: var(--wx-shadow) !important;
    overflow: hidden;
}

.page-content .card-header {
    padding: 1rem 1.25rem 0.25rem;
    background: transparent !important;
    border: 0;
}

.page-content .card-header h5 {
    font-weight: 700;
}

.page-content .card-body {
    padding: 1rem 1.25rem 1.25rem;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem 0.35rem;
}

.panel-head > div {
    flex: 1;
    min-width: 0;
}

.panel-head-split {
    flex-wrap: wrap;
}

.panel-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    font-size: 1.1rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.panel-sub {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--wx-muted);
}

.panel-sub a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.panel-body {
    padding: 0.85rem 1.25rem 1.25rem;
}

.day-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.day-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 0;
}

.day-row + .day-row {
    border-top: 1px solid var(--wx-border);
}

.day-row:first-child {
    padding-top: 0.25rem;
}

.day-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.day-body {
    min-width: 0;
}

.day-name {
    margin: 0.15rem 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
}

.day-text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--wx-muted);
}

.scale {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scale-row {
    display: flex;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: var(--wx-surface-2);
    border: 1px solid transparent;
    border-left: 5px solid var(--level);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.scale-row.is-current {
    border-color: var(--level);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--level) 22%, transparent);
}

.scale-range {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: 4.25rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--level-text);
    background: var(--level);
}

.scale-body {
    min-width: 0;
    font-size: 0.9rem;
}

.scale-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.1rem 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
}

.scale-now {
    display: none;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--level-text);
    background: var(--level);
}

.scale-row.is-current .scale-now {
    display: inline-block;
}

.scale-body p {
    margin: 0 0 0.4rem;
    color: var(--wx-muted);
}

.scale-body ul {
    margin: 0;
    padding-left: 1.1rem;
}

.scale-body li + li {
    margin-top: 0.2rem;
}

.scale-body .scale-tip {
    margin: 0;
    color: var(--wx-text);
}

.scale-tip i {
    margin-right: 0.2rem;
    color: var(--wx-muted);
}

.callout-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.callout-title {
    flex: 1;
    font-weight: 600;
}

.callout-chevron {
    color: var(--wx-muted);
    transition: transform 0.25s;
}

.callout-toggle[aria-expanded="true"] .callout-chevron {
    transform: rotate(180deg);
}

.callout .panel-body p {
    color: var(--wx-muted);
}

.date-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.45rem 0.8rem;
    border-radius: 0.75rem;
    border: 1px solid var(--wx-border);
    background: var(--wx-surface-2);
    color: var(--wx-muted);
    cursor: pointer;
}

.date-field input {
    width: 7.5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wx-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.day-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .day-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.day-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 0.9rem;
    background: var(--wx-surface-2);
    border: 1px solid var(--wx-border);
}

.day-stat-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}

.day-stat-head .tile-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.85rem;
}

.day-stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.day-stat-value .nowrap,
.day-stat-value .unit {
    white-space: nowrap;
}

.day-stat-sub {
    font-size: 0.82rem;
    color: var(--wx-muted);
}

.day-stat-wide {
    grid-column: span 2;
}

.day-stat-note {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--wx-muted);
    white-space: nowrap;
}

.pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pair-item {
    min-width: 0;
}

.pair-item + .pair-item {
    padding-left: 1rem;
    border-left: 1px solid var(--wx-border);
}

.pair-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pair-up {
    color: var(--wx-temp);
}

.pair-down {
    color: var(--wx-rain);
}

.day-stat.is-loading {
    gap: 0.55rem;
}

.skeleton {
    display: block;
    width: 55%;
    height: 0.75rem;
    border-radius: 0.4rem;
    background: linear-gradient(90deg, var(--wx-border) 0%, color-mix(in srgb, var(--wx-border) 40%, transparent) 50%, var(--wx-border) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
}

.skeleton-lg {
    width: 70%;
    height: 1.4rem;
}

@keyframes skeleton {
    to { background-position: -200% 0; }
}

@media (max-width: 575.98px) {
    .day-stats {
        gap: 0.6rem;
    }

    .day-stat {
        padding: 0.75rem 0.8rem 0.85rem;
    }

    .day-stat-value {
        font-size: 1.2rem;
    }

    .day-stat-sub {
        font-size: 0.76rem;
    }
}

.chart-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.chart-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

.section-title {
    margin: 1.4rem 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wx-muted);
}

.panel-body > .section-title:first-of-type {
    margin-top: 0.25rem;
}

.date-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.date-field select {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wx-text);
    font-weight: 600;
    cursor: pointer;
}

.date-field select option {
    color: #0f172a;
}

.delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin: 0.3rem 0 0.2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wx-muted);
    background: color-mix(in srgb, var(--wx-muted) 14%, transparent);
}

.delta[data-tone="warm"] {
    color: var(--wx-temp);
    background: color-mix(in srgb, var(--wx-temp) 14%, transparent);
}

.delta[data-tone="cool"],
.delta[data-tone="wet"] {
    color: var(--wx-rain);
    background: color-mix(in srgb, var(--wx-rain) 14%, transparent);
}

.delta[data-tone="dry"] {
    color: var(--wx-uv);
    background: color-mix(in srgb, var(--wx-uv) 14%, transparent);
}

.year-table-wrap {
    overflow-x: auto;
    margin: 0 -0.25rem;
}

.year-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.year-table th,
.year-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--wx-border);
}

.year-table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wx-muted);
}

.year-table tbody th {
    font-weight: 700;
}

.year-table tbody tr:last-child th,
.year-table tbody tr:last-child td {
    border-bottom: 0;
}

.year-table tr.is-current th,
.year-table tr.is-current td {
    background: color-mix(in srgb, var(--wx-brand) 10%, transparent);
}

.year-table tr.is-current th {
    border-radius: 0.6rem 0 0 0.6rem;
}

.year-table tr.is-current td:last-child {
    border-radius: 0 0.6rem 0.6rem 0;
}

.year-tag {
    margin-left: 0.3rem;
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: var(--wx-brand);
}

.year-diff {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.year-diff[data-tone="warm"] {
    color: var(--wx-temp);
}

.year-diff[data-tone="cool"] {
    color: var(--wx-rain);
}

.records {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.record-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.record-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--wx-surface-2);
}

.record-list .tile-icon {
    grid-row: span 2;
}

.record-label {
    font-size: 0.85rem;
    color: var(--wx-muted);
}

.record-list strong {
    grid-row: span 2;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.record-date {
    font-size: 0.8rem;
    font-weight: 600;
}

.mt-0 {
    margin-top: 0 !important;
}

[data-accent="shots"] { --accent: #8b5cf6; }

.shot-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.shot-card {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--wx-border);
    border-radius: 0.9rem;
    background: var(--wx-surface-2);
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shot-card:hover,
.shot-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.3);
}

.shot-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.shot-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1.6rem 0.8rem 0.6rem;
    text-align: left;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 12, 26, 0) 0%, rgba(6, 12, 26, 0.8) 100%);
}

.shot-info strong {
    font-size: 0.92rem;
    line-height: 1.25;
}

.shot-info small {
    font-size: 0.74rem;
    opacity: 0.85;
}

.shot-month:first-child .section-title {
    margin-top: 0.25rem;
}

.shot-more {
    display: flex;
    justify-content: center;
}

.shot-more .btn {
    margin-top: 1.25rem;
}

.shot-more-count {
    margin-left: 0.35rem;
    font-size: 0.8rem;
    opacity: 0.7;
}

.shot-empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--wx-muted);
}

.shot-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    color: #e2e8f0;
    background: #0b1120;
}

.shot-stage {
    position: relative;
    display: grid;
    place-items: center;
    background: #000;
}

.shot-stage img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
}

.shot-button {
    position: absolute;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(8, 14, 28, 0.6);
}

.shot-nav {
    top: 50%;
    transform: translateY(-50%);
}

.shot-nav:disabled {
    opacity: 0.25;
}

.shot-prev { left: 0.6rem; }
.shot-next { right: 0.6rem; }

.shot-close {
    top: 0.6rem;
    right: 0.6rem;
    font-size: 1.1rem;
}

.shot-details {
    padding: 0.9rem 1.1rem 1.1rem;
}

.shot-title {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.shot-date {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.shot-caption {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
}

@media (max-width: 575.98px) {
    .shot-close {
        top: auto;
        bottom: 0.45rem;
        background: rgba(255, 255, 255, 0.1);
    }

    .shot-details {
        min-height: 3.5rem;
        padding-right: 3.8rem;
    }
}

.chart-container[hidden] {
    display: none;
}

.chart-container {
    min-width: 0;
    padding: 0.75rem 0.5rem 0.25rem;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow);
}

.chart-container:empty {
    min-height: 16rem;
}

.chart-grid-wide .chart-container:empty {
    min-height: 19rem;
}

.stat-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.5rem;
    border-radius: 0.9rem;
    text-align: center;
    background: var(--wx-surface-2);
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wx-muted);
}

.stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.radar-viewport {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.9rem;
    background: #1b2233;
}

.radar-viewport .animator-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    overflow: hidden;
    cursor: crosshair;
    transform-origin: 0 0;
    will-change: transform;
}

.radar-viewport {
    touch-action: pan-y;
    user-select: none;
}

.radar-viewport.is-zoomed {
    touch-action: none;
}

.radar-viewport.is-zoomed .animator-map {
    cursor: grab;
}

.radar-viewport.is-panning .animator-map {
    cursor: grabbing;
}

.radar-viewport .animator-map .zoomnav,
.radar-viewport .animator-map .animator-nav {
    display: none !important;
}

.radar-zoom {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.radar-zoom-btn {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.7rem;
    color: #fff;
    background: rgba(8, 14, 28, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.radar-zoom-btn:hover:not(:disabled) {
    background: var(--accent, var(--wx-brand));
}

.radar-zoom-btn:disabled {
    opacity: 0.4;
}

.radar-zoom-btn[hidden] {
    display: none;
}

.animator-map .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animator-map .trackerbug {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: red;
}

.animator-map .position,
.animator-map .message {
    position: absolute;
    z-index: 1;
    padding: 0.2em 0.8em;
    color: #fff;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.65);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.animator-map .position {
    bottom: 0;
    left: 5px;
    border-radius: 5px 5px 0 0;
}

.animator-map .message {
    top: 5px;
    left: 5px;
    padding: 0.4em 0.8em;
    border-radius: 5px;
    font-size: 0.95em;
    font-weight: 600;
}

.animator-map .message.error {
    color: #ff8a8a;
}

.animator-map.loading .tracker {
    background: transparent url("//resources.weatherzone.com.au/wz/images/widgets/animator_loading.gif") no-repeat center;
}

.animator-map .zoomnav {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    padding: 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.65);
}

.animator-map .zoomnav button {
    width: 17px;
    height: 17px;
    margin: 0;
    border: 0;
    cursor: pointer;
}

.animator-map .zoomnav button.zoomin {
    background: transparent url("//resources.weatherzone.com.au/wz/images/widgets/anim_zoomin_inverse.gif") no-repeat center !important;
}

.animator-map .zoomnav button.zoomin.disabled {
    background: transparent url("//resources.weatherzone.com.au/wz/images/widgets/anim_zoomin_disabled.gif") no-repeat center !important;
    cursor: default;
}

.animator-map .zoomnav button.zoomout {
    background: transparent url("//resources.weatherzone.com.au/wz/images/widgets/anim_zoomout_inverse.gif") no-repeat center !important;
}

.animator-map .zoomnav button.zoomout.disabled {
    background: transparent url("//resources.weatherzone.com.au/wz/images/widgets/anim_zoomout_disabled.gif") no-repeat center !important;
    cursor: default;
}

.animator-map .animator-nav {
    z-index: 2;
}

.animator-map .animator-nav a {
    position: absolute;
    display: block;
    border: 1px dashed silver;
    text-indent: -9999px;
}

.animator-map .animator-nav a:hover {
    border: 1px solid silver;
    background: rgba(255, 255, 255, 0.5);
}

.radar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--wx-muted);
}

.radar-legend img {
    max-width: 55%;
    height: 12px;
    border-radius: 3px;
}

.radar-controls {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
    text-align: center;
}

.radar-time {
    font-size: 0.9rem;
    color: var(--wx-muted);
}

.radar-time .master {
    font-weight: 700;
    color: var(--wx-text);
}

.radar-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.radar-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--wx-border);
    border-radius: 50%;
    color: var(--wx-text);
    background: var(--wx-surface-2) !important;
    box-shadow: none !important;
    transition: background-color 0.2s, color 0.2s;
}

.radar-btn:hover {
    color: var(--accent);
}

.radar-btn.radar-play {
    width: 3.25rem;
    height: 3.25rem;
    color: #fff;
    border: 0;
    background: var(--accent) !important;
}

.radar-btn.swinging,
.radar-btn.looping {
    color: var(--accent);
}

.radar-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    max-width: 30rem;
    width: 100%;
    margin: 0 auto;
}

.radar-options label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    color: var(--wx-muted);
}

.radar-options select {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.radar-layers {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.radar-layers li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    background: var(--wx-surface-2);
}

.radar-layers input {
    accent-color: var(--accent);
}

.radar-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.78rem;
}

.radar-credit a {
    color: var(--wx-muted);
}

.page-loading {
    display: grid;
    place-items: center;
    padding: 3rem 0;
    color: var(--wx-muted);
}

.page-error {
    padding: 1.5rem;
    text-align: center;
    background: var(--wx-surface);
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
}

.site-footer {
    padding: 1rem 0 1.25rem;
    text-align: center;
    color: var(--wx-muted);
}

.site-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--wx-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--wx-border);
}

.bottom-nav a,
.bottom-nav button {
    height: var(--wx-bottom-nav);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wx-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav i {
    font-size: 1.15rem;
}

.bottom-nav .active {
    color: var(--wx-active);
}

.more-menu {
    height: auto !important;
    max-height: 80vh;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    padding-bottom: env(safe-area-inset-bottom);
}

.more-menu .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 0.25rem;
    background: transparent;
    font-weight: 500;
}

.more-menu .list-group-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--wx-muted);
}

.more-menu .list-group-item.active {
    color: var(--wx-active);
    border-color: var(--bs-list-group-border-color);
}

.more-menu .list-group-item.active i {
    color: inherit;
}

.settings-heading {
    margin: 1.5rem 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wx-muted);
}

.settings-heading:first-child {
    margin-top: 0;
}

.modal-content {
    border-radius: var(--wx-radius);
}

.back-to-top {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--wx-bottom-nav) + env(safe-area-inset-bottom) + 0.9rem);
    z-index: 1020;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--wx-brand);
    box-shadow: 0 6px 16px rgba(12, 110, 252, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.install-prompt {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(var(--wx-bottom-nav) + env(safe-area-inset-bottom) + 0.75rem);
    z-index: 1040;
    max-width: 26rem;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius);
    color: var(--wx-text);
    background: var(--wx-surface);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.28);
    animation: install-in 0.35s ease-out;
}

.install-prompt[hidden] {
    display: none;
}

.install-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.8rem;
    align-items: start;
}

.install-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.7rem;
}

.install-title {
    margin: 0 0 0.15rem;
    font-size: 0.98rem;
    font-weight: 700;
}

.install-message {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wx-muted);
}

.install-steps {
    margin: 0.9rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.9;
}

.install-steps i {
    color: var(--wx-brand);
}

.install-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

@keyframes install-in {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 992px) {
    .install-prompt {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        width: 24rem;
    }
}

@media (min-width: 768px) {
    .now {
        gap: 1rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tile {
        padding: 1.1rem 1.2rem 1.2rem;
    }

    .tile-value {
        font-size: 1.9rem;
    }

    .detail dd {
        font-size: 1.05rem;
    }
}

@media (min-width: 992px) {
    body {
        padding-bottom: 0;
    }

    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .now {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tile-hero {
        grid-column: span 2;
        grid-row: span 2;
    }

    .hero-value {
        margin-top: auto;
    }

    .details {
        grid-column: span 2;
    }

    .detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .detail dt {
        white-space: normal;
    }
}

@media (min-width: 1200px) {
    .now {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tile-hero {
        grid-column: span 2;
        grid-row: span 2;
        padding: 1.5rem 1.6rem;
    }

    .hero-value {
        margin-top: auto;
        font-size: 6rem;
    }

    .tile-hero .tile-badge {
        padding-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .tile-label {
        font-size: 0.7rem;
        letter-spacing: 0.03em;
    }

    .tile-head {
        gap: 0.45rem;
    }

    .detail dt {
        white-space: normal;
    }
}

@media (max-width: 374.98px) {
    .now {
        gap: 0.6rem;
    }

    .tile {
        padding: 0.8rem 0.8rem 0.9rem;
    }

    .tile-value {
        font-size: 1.4rem;
    }

    .tile-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.modal-open[style] {
    padding-right: 0 !important;
}

.grecaptcha-badge {
    display: none;
}

.placeholder {
    display: block;
    height: 1rem;
    visibility: hidden;
}

.forecast-icon {
    display: inline-block;
    max-width: 80px;
    max-height: 80px;
    margin-right: 1rem;
    line-height: 1;
    vertical-align: middle;
}

.forecast-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.forecast-icon.fas {
    font-size: 80px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.forecast-icon img,
.moon-icon {
    display: block;
    width: 80px;
    height: auto;
    object-fit: contain;
}

.forecast-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.row .forecast-icon {
    display: flex;
    align-items: center;
}

.row .forecast-icon + .forecast-text,
.row .forecast-text + .forecast-icon {
    margin-left: 1rem;
}

.fc-summary { font-size: 1rem; }
.fc-period { display: flex; align-items: flex-start; gap: 1.25rem; }
.fc-period + .fc-period { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--wx-border); }
.fc-icon { flex: 0 0 80px; width: 80px; display: flex; justify-content: center; }
.fc-icon .forecast-icon { margin: 0; max-width: 100%; max-height: none; }
.fc-icon .forecast-icon.fas { font-size: 64px; }
.fc-icon svg, .fc-icon img { width: 80px !important; height: auto; }
.fc-body { flex: 1 1 auto; min-width: 0; }
.fc-body h3 { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 700; }
.fc-body p { margin: 0; }
.fc-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem; font-size: 0.85rem; }
.fc-stat { padding: 0.2rem 0.6rem; border-radius: 1rem; background: var(--wx-surface-2); }
.fc-body p { color: var(--wx-muted); }
.fc-stat { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.fc-stat i { width: 1.1em; text-align: center; }

@media (max-width: 575.98px) {
    .fc-period { gap: 0.85rem; }
    .stat-value { font-size: 1.5rem; }
    .scale-row { flex-direction: column; gap: 0.5rem; }
    .date-field { margin-left: 0; flex-basis: 100%; }
    .date-field input { flex: 1; }
    .fc-icon { flex-basis: 48px; width: 48px; }
    .fc-icon svg, .fc-icon img { width: 48px !important; }
    .fc-icon .forecast-icon.fas { font-size: 40px; }
    .fc-body h3 { font-size: 1.1rem; }
}

.vertical-text {
    float: left;
    height: 100%;
    margin-top: 60px;
    background-color: red;
    transform: rotate(270deg);
    transform-origin: left;
}

.tooltip_templates,
#ccblocks {
    display: none;
}

.blocks {
    display: block;
    margin-top: 10px;
    text-align: center;
}

.font-13 {
    font-size: 13px !important;
}

.cent,
table th {
    text-align: center;
}

.left {
    text-align: left;
}

p.left {
    margin-top: 3px;
    margin-bottom: 13px;
}

.colma {
    padding-right: 15px;
    padding-left: 15px;
}

.card-box {
    padding: 20px;
    background-color: #000;
}

.profile-user-box {
    position: relative;
}

.curValueCirc {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    line-height: 155px;
    text-align: center;
    font-size: 3rem;
    color: #000;
}

.gauge2s {
    font-size: 16px;
    color: #fff;
    text-shadow: 0 1px #000;
}

.cardgauges {
    opacity: 0.8;
}

.cardcc {
    width: 20.5rem;
    height: 25rem;
}

.uvtext,
.aqitext {
    padding: 4px 8px;
    color: #fff;
    text-shadow: 0 1px #000;
    background: rgba(0, 0, 0, 0.5);
}

.uv1 { background-color: #299501; color: #fff !important; text-shadow: 0 2px #000; }
.uv2 { background-color: #f7e401; color: #000 !important; }
.uv3 { background-color: #f95901; color: #fff !important; text-shadow: 0 1px #000; }
.uv4 { background-color: #d90011; color: #fff !important; text-shadow: 0 2px #000; }
.uv5 { background-color: #6c49cb; color: #fff !important; text-shadow: 0 2px #000; }

.aqi0 { background-color: #fff; color: #000 !important; text-shadow: 0 2px #fff; }
.aqi1 { background-color: #01e400; color: #fff !important; text-shadow: 0 2px #000; }
.aqi2 { background-color: #fffa00; color: #000 !important; }
.aqi3 { background-color: #ff7e00; color: #fff !important; text-shadow: 0 2px #000; }
.aqi4 { background-color: #fe0000; color: #fff !important; text-shadow: 0 2px #000; }
.aqi5 { background-color: #8e3f98; color: #fff !important; text-shadow: 0 2px #000; }
.aqi6 { background-color: #7e0123; color: #fff !important; text-shadow: 0 2px #000; }
.aqi7 { background-color: #000; color: #fff !important; text-shadow: 0 2px #000; }