/* /Components/Layout/CookieBanner.razor.rz.scp.css */
.cookie-banner-shell[b-w37er2nzy3] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 980;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cookie-banner-card[b-w37er2nzy3] {
    width: min(100%, 58rem);
    padding: 1rem 1.05rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.4rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    pointer-events: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 251, 255, 0.84)),
        rgba(255, 255, 255, 0.86);
    box-shadow: 0 1.35rem 3rem rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(18px) saturate(1.06);
}

.cookie-banner-mark[b-w37er2nzy3] {
    width: 3.1rem;
    height: 3.1rem;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 1rem;
    display: inline-grid;
    place-items: center;
    color: #c67a09;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 248, 235, 0.9)),
        rgba(255, 247, 234, 0.92);
    box-shadow: inset 0 0 0 0.28rem rgba(255, 255, 255, 0.58);
}

.cookie-banner-mark svg[b-w37er2nzy3] {
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.cookie-banner-copy[b-w37er2nzy3] {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.cookie-banner-copy h2[b-w37er2nzy3] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    font-weight: 760;
    line-height: 1.1;
}

.cookie-banner-copy p:last-child[b-w37er2nzy3] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.52;
}

.cookie-banner-actions[b-w37er2nzy3] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cookie-banner-button[b-w37er2nzy3] {
    min-height: 2.65rem;
    padding: 0 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    font-weight: 720;
    box-shadow: 0 0.7rem 1.6rem rgba(15, 23, 42, 0.08);
}

.cookie-banner-button.primary[b-w37er2nzy3] {
    border-color: rgba(37, 99, 235, 0.22);
    color: #ffffff;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.cookie-banner-button.secondary[b-w37er2nzy3] {
    background: rgba(255, 255, 255, 0.72);
}

.cookie-banner-button:hover[b-w37er2nzy3] {
    transform: translateY(-1px);
}

@media (max-width: 900px) {
    .cookie-banner-card[b-w37er2nzy3] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cookie-banner-actions[b-w37er2nzy3] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .cookie-banner-shell[b-w37er2nzy3] {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
    }

    .cookie-banner-card[b-w37er2nzy3] {
        padding: 0.9rem;
        border-radius: 1.15rem;
        gap: 0.8rem;
    }

    .cookie-banner-mark[b-w37er2nzy3] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .cookie-banner-actions[b-w37er2nzy3] {
        width: 100%;
    }

    .cookie-banner-button[b-w37er2nzy3] {
        flex: 1 1 0;
        min-width: 0;
    }
}

:root[data-theme="dark"] .cookie-banner-card[b-w37er2nzy3] {
    border-color: rgba(148, 163, 184, 0.14);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(19, 34, 56, 0.88)),
        rgba(15, 23, 42, 0.9);
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .cookie-banner-mark[b-w37er2nzy3] {
    border-color: rgba(245, 158, 11, 0.18);
    color: #f5b74b;
    background:
        radial-gradient(circle at 30% 30%, rgba(55, 65, 81, 0.55), rgba(38, 48, 66, 0.9)),
        rgba(31, 41, 55, 0.92);
    box-shadow: inset 0 0 0 0.24rem rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .cookie-banner-button[b-w37er2nzy3] {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.74);
    box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.24);
}

:root[data-theme="dark"] .cookie-banner-button.primary[b-w37er2nzy3] {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-4rzzyhq2g9] {
    min-height: var(--page-vh);
}

#blazor-error-ui[b-4rzzyhq2g9] {
    color-scheme: light dark;
    color: var(--text-primary);
    background: var(--warning-soft);
    bottom: 0;
    border-top: 1px solid var(--border-soft);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 3.5rem 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4rzzyhq2g9] {
        cursor: pointer;
        position: absolute;
        right: 0.9rem;
        top: 0.6rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4pji6l3vh5],
.components-reconnect-repeated-attempt-visible[b-4pji6l3vh5],
.components-reconnect-failed-visible[b-4pji6l3vh5],
.components-pause-visible[b-4pji6l3vh5],
.components-resume-failed-visible[b-4pji6l3vh5],
.components-rejoining-animation[b-4pji6l3vh5] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-retrying[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-failed[b-4pji6l3vh5],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4pji6l3vh5] {
    display: block;
}


#components-reconnect-modal[b-4pji6l3vh5] {
    color-scheme: light dark;
    color: var(--text-primary);
    background-color: var(--bg-surface-strong);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.5rem;
    font-family: var(--font-ui);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-4pji6l3vh5 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-4pji6l3vh5 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4pji6l3vh5 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-4pji6l3vh5]::backdrop {
    background-color: rgba(3, 7, 18, 0.55);
    animation: components-reconnect-modal-fadeInOpacity-b-4pji6l3vh5 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-4pji6l3vh5 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-4pji6l3vh5 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4pji6l3vh5 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4pji6l3vh5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4pji6l3vh5] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-4pji6l3vh5] {
    border: 1px solid transparent;
    background-color: var(--accent);
    color: var(--accent-contrast);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4pji6l3vh5] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-4pji6l3vh5] {
        background-color: var(--accent);
    }

.components-rejoining-animation[b-4pji6l3vh5] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-4pji6l3vh5] {
        position: absolute;
        border: 3px solid var(--accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4pji6l3vh5 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4pji6l3vh5] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-4pji6l3vh5 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-vtuv9to52h] {
    width: 100%;
    color: var(--footer-text);
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
}

.site-footer-inner[b-vtuv9to52h] {
    width: min(100% - 2 * var(--edge-x), 1440px);
    margin: 0 auto;
}

.site-footer-grid[b-vtuv9to52h] {
    display: grid;
    grid-template-columns: minmax(15rem, 1.45fr) repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0;
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.75rem, 5vw, 4.75rem);
}

.site-footer-brand[b-vtuv9to52h],
.site-footer-group[b-vtuv9to52h] {
    min-width: 0;
}

.site-footer-brand[b-vtuv9to52h] {
    padding-right: clamp(2rem, 4vw, 5rem);
}

.site-footer-brand-link[b-vtuv9to52h] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--footer-text);
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.site-footer-brand-link:hover[b-vtuv9to52h] {
    color: var(--footer-link-hover);
}

.site-footer-brand-mark[b-vtuv9to52h] {
    width: 2.6rem;
    height: 1.7rem;
    flex: 0 0 auto;
    color: var(--footer-link-hover);
}

.site-footer-brand-mark svg[b-vtuv9to52h] {
    width: 100%;
    height: 100%;
}

.site-footer-brand p[b-vtuv9to52h] {
    max-width: 19rem;
    margin-top: 1.65rem;
    color: var(--footer-muted);
    font-size: var(--type-body);
    line-height: 1.75;
}

.site-footer-group[b-vtuv9to52h] {
    padding: 0 clamp(1.25rem, 2.2vw, 2.7rem);
    border-left: 1px solid var(--footer-border);
}

.site-footer-group h2[b-vtuv9to52h] {
    color: var(--footer-heading);
    font-size: 0.8rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-footer-group ul[b-vtuv9to52h] {
    display: grid;
    gap: 0.82rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.site-footer-link[b-vtuv9to52h] {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    color: var(--footer-text);
    font-size: var(--type-small);
    line-height: 1.4;
    transition: color 160ms ease, transform 160ms ease;
}

.site-footer-link:hover[b-vtuv9to52h],
.site-footer-link.active[b-vtuv9to52h] {
    color: var(--footer-link-hover);
    transform: translateX(2px);
}

.site-footer-bottom[b-vtuv9to52h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0 1.5rem;
    border-top: 1px solid var(--footer-border);
    color: var(--footer-muted);
    font-size: var(--type-small);
    line-height: 1.5;
}

.site-footer-timezone-note[b-vtuv9to52h] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-align: right;
}

.site-footer-timezone-note svg[b-vtuv9to52h] {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

@media (max-width: 980px) {
    .site-footer-grid[b-vtuv9to52h] {
        grid-template-columns: minmax(14rem, 1.35fr) repeat(2, minmax(10rem, 1fr));
        row-gap: 2.8rem;
    }

    .site-footer-brand[b-vtuv9to52h] {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .site-footer-brand p[b-vtuv9to52h] {
        max-width: 30rem;
    }

    .site-footer-group:first-of-type[b-vtuv9to52h] {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .site-footer-grid[b-vtuv9to52h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 2.75rem;
        padding-bottom: 2.7rem;
    }

    .site-footer-brand[b-vtuv9to52h] {
        grid-column: 1 / -1;
    }

    .site-footer-group[b-vtuv9to52h] {
        padding: 0;
        border-left: 0;
    }

    .site-footer-group:nth-of-type(odd)[b-vtuv9to52h] {
        padding-right: 0.8rem;
    }

    .site-footer-group:nth-of-type(even)[b-vtuv9to52h] {
        padding-left: 0.8rem;
    }

    .site-footer-bottom[b-vtuv9to52h] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-footer-timezone-note[b-vtuv9to52h] {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .site-footer-grid[b-vtuv9to52h] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2.25rem;
    }

    .site-footer-group:nth-of-type(odd)[b-vtuv9to52h],
    .site-footer-group:nth-of-type(even)[b-vtuv9to52h] {
        padding: 0;
    }
}
/* /Components/Markets/ExchangeLogo.razor.rz.scp.css */
.market-logo[b-t73xffwlmp] {
    --logo-color: #65b8ff;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    aspect-ratio: 1;
    color: #ffffff;
    overflow: hidden;
    flex: 0 0 auto;
}

.market-logo-event[b-t73xffwlmp] {
    width: 2.2rem;
}

.market-logo-small[b-t73xffwlmp] {
    width: 1.9rem;
}

.market-logo-detail[b-t73xffwlmp] {
    width: clamp(6.5rem, 13vw, 10rem);
    min-height: clamp(3.5rem, 7vw, 5.25rem);
    aspect-ratio: auto;
    justify-items: start;
}

.market-logo-detail > span:not(.logo-image-shell)[b-t73xffwlmp] {
    transform: scale(1.6);
    transform-origin: left center;
}

.logo-image-shell[b-t73xffwlmp] {
    display: inline-grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.logo-image-shell-detail[b-t73xffwlmp] {
    justify-items: start;
}

.logo-image[b-t73xffwlmp] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-bars[b-t73xffwlmp] {
    width: 2.15rem;
    height: 1.55rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.13rem;
    align-items: stretch;
}

.logo-bars i[b-t73xffwlmp] {
    background: linear-gradient(180deg, #e7fbff, #5edcff 52%, #2f80ed);
}

.logo-nasdaq[b-t73xffwlmp] {
    position: relative;
    width: 2.4rem;
    height: 1.7rem;
}

.logo-nasdaq i[b-t73xffwlmp] {
    position: absolute;
    inset-block: 0;
    width: 0.62rem;
    border-radius: 0.08rem;
    background: linear-gradient(180deg, #7ee7ff, #1f9fd2);
    transform: skewX(-18deg);
}

.logo-nasdaq i:first-child[b-t73xffwlmp] {
    left: 0.3rem;
    height: 75%;
    top: 25%;
}

.logo-nasdaq i:last-child[b-t73xffwlmp] {
    right: 0.34rem;
}

.logo-nasdaq[b-t73xffwlmp]::after {
    position: absolute;
    left: 0.77rem;
    top: 0.58rem;
    width: 1.05rem;
    height: 0.45rem;
    content: "";
    background: #3fb7df;
    transform: skewX(-18deg);
}

.logo-crest[b-t73xffwlmp] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 2rem;
    line-height: 1;
}

.logo-pixels[b-t73xffwlmp] {
    width: 2.2rem;
    height: 2.1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.05rem;
    transform: rotate(45deg);
}

.logo-pixels i[b-t73xffwlmp] {
    background: linear-gradient(135deg, #88f6c8, #3bbd89);
}

.logo-pixels i:nth-child(3n)[b-t73xffwlmp] {
    background: #7ac7ff;
}

.logo-line[b-t73xffwlmp] {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
}

.logo-line i[b-t73xffwlmp] {
    position: absolute;
    width: 0.86rem;
    height: 0.16rem;
    border-radius: 999px;
    background: #ffffff;
    transform: rotate(-20deg);
}

.logo-line i:nth-child(1)[b-t73xffwlmp] {
    left: 0.1rem;
    top: 0.9rem;
}

.logo-line i:nth-child(2)[b-t73xffwlmp] {
    left: 0.82rem;
    top: 0.65rem;
}

.logo-line i:nth-child(3)[b-t73xffwlmp] {
    left: 1.55rem;
    top: 0.35rem;
}

.logo-six[b-t73xffwlmp] {
    color: #ff4238;
    font-size: 1.35rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0;
}

.logo-jpx[b-t73xffwlmp] {
    display: grid;
    grid-template-columns: repeat(3, 0.32rem);
    gap: 0.14rem;
    justify-content: center;
}

.logo-jpx i[b-t73xffwlmp] {
    height: 1.55rem;
    background: linear-gradient(180deg, #ff443d, #b91521);
    transform: skewY(-12deg);
}

.logo-jpx b[b-t73xffwlmp] {
    grid-column: 1 / -1;
    color: #ffffff;
    font-size: 0.52rem;
    line-height: 1;
}

.logo-shanghai[b-t73xffwlmp] {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #d92c28, #8d1414);
}

.logo-shanghai i[b-t73xffwlmp],
.logo-shanghai[b-t73xffwlmp]::before,
.logo-shanghai[b-t73xffwlmp]::after {
    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    height: 0.16rem;
    border-radius: 999px;
    content: "";
    background: #ffffff;
}

.logo-shanghai i[b-t73xffwlmp] {
    top: 0.64rem;
}

.logo-shanghai[b-t73xffwlmp]::before {
    top: 1.02rem;
}

.logo-shanghai[b-t73xffwlmp]::after {
    top: 1.4rem;
}

.logo-shenzhen[b-t73xffwlmp] {
    position: relative;
    width: 2.2rem;
    height: 2.2rem;
}

.logo-shenzhen i[b-t73xffwlmp] {
    position: absolute;
    inset-block: 0.12rem;
    width: 0.9rem;
    border-radius: 0.18rem;
    background: linear-gradient(135deg, #77f0ff, #2878c8);
    transform: skewY(-24deg);
}

.logo-shenzhen i:first-child[b-t73xffwlmp] {
    left: 0.2rem;
}

.logo-shenzhen i:last-child[b-t73xffwlmp] {
    right: 0.2rem;
    opacity: 0.7;
}

.logo-hkex[b-t73xffwlmp] {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0;
}

.logo-hkex span[b-t73xffwlmp] {
    color: #ff4c55;
}

.logo-nse[b-t73xffwlmp] {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.06rem;
}

.logo-nse i[b-t73xffwlmp] {
    width: 1.65rem;
    aspect-ratio: 1;
    background: conic-gradient(#f7b733, #f65338, #7b55d9, #3fb6ff, #f7b733);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.logo-nse b[b-t73xffwlmp] {
    color: #9b5ce5;
    font-size: 0.58rem;
    line-height: 1;
}

.logo-asx[b-t73xffwlmp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 2.15rem;
    padding: 0 0.55rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #00529b, #002642);
    box-shadow: 0 2px 8px rgba(0, 82, 155, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.logo-asx i[b-t73xffwlmp] {
    width: 0.32rem;
    height: 1.15rem;
    background: linear-gradient(180deg, #00c6ff, #0072ff);
    border-radius: 2px;
    transform: skewX(-16deg);
}

.logo-asx b[b-t73xffwlmp] {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    font-family: inherit;
    line-height: 1;
}

.logo-overlap[b-t73xffwlmp] {
    position: relative;
    width: 2rem;
    height: 1.1rem;
}

.logo-overlap i[b-t73xffwlmp] {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}

.logo-overlap i:first-child[b-t73xffwlmp] {
    left: 0;
}

.logo-overlap i:last-child[b-t73xffwlmp] {
    right: 0;
}

.logo-text[b-t73xffwlmp] {
    display: grid;
    place-items: center;
    width: 2.15rem;
    aspect-ratio: 1;
    border-radius: 0.55rem;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(47, 128, 237, 0.9), rgba(58, 200, 106, 0.72));
    font-size: 0.8rem;
    font-weight: 900;
}

.market-logo-event .logo-text[b-t73xffwlmp],
.market-logo-small .logo-text[b-t73xffwlmp] {
    width: 1.9rem;
    font-size: 0.62rem;
}
/* /Components/Markets/ExchangeStatusCard.razor.rz.scp.css */
.exchange-card[b-49skwekf1o] {
    --status-color: #64748b;
    --market-region: #64748b;
    position: relative;
    min-width: 0;
    min-height: clamp(6.7rem, 13vh, 8rem);
    padding: clamp(0.75rem, 0.9vw, 1rem);
    border: 1px solid rgba(132, 153, 181, 0.18);
    border-radius: 0.55rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0.4rem, 1fr) auto;
    grid-template-areas:
        "logo title flag"
        "logo meta favorite"
        "spacer spacer spacer"
        "status status time";
    gap: 0.28rem 0.72rem;
    color: var(--text-primary);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-strong) 96%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent)),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--market-region) 18%, transparent), transparent 42%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.exchange-card[b-49skwekf1o]  .market-logo {
    grid-area: logo;
    align-self: start;
}

.exchange-title[b-49skwekf1o] {
    grid-area: title;
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.exchange-title a[b-49skwekf1o] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(0.78rem, 0.86vw, 0.92rem);
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    text-decoration: none;
    text-overflow: ellipsis;
}

.exchange-title span[b-49skwekf1o],
.exchange-meta[b-49skwekf1o] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: clamp(0.68rem, 0.72vw, 0.78rem);
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.exchange-flag[b-49skwekf1o] {
    grid-area: flag;
    align-self: start;
    justify-self: end;
    font-size: 1rem;
    line-height: 1;
}

.exchange-meta[b-49skwekf1o] {
    grid-area: meta;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.exchange-meta i[b-49skwekf1o] {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: var(--market-region);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--market-region) 14%, transparent);
}

.favorite-button[b-49skwekf1o] {
    grid-area: favorite;
    align-self: center;
    justify-self: end;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
}

.exchange-card:hover .favorite-button[b-49skwekf1o],
.favorite-button:focus-visible[b-49skwekf1o],
.favorite-button.active[b-49skwekf1o] {
    opacity: 1;
}

.favorite-button.active[b-49skwekf1o] {
    color: #ffb232;
}

.exchange-status[b-49skwekf1o] {
    grid-area: status;
    min-width: 0;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.exchange-status strong[b-49skwekf1o] {
    min-width: 4.1rem;
    padding: 0.4rem 0.62rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--status-color);
    background: color-mix(in srgb, var(--status-color) 16%, var(--bg-surface-muted));
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.exchange-status span[b-49skwekf1o] {
    color: var(--status-color);
    font-size: 0.7rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

time[b-49skwekf1o] {
    grid-area: time;
    align-self: end;
    justify-self: end;
    color: var(--text-primary);
    font-size: clamp(0.78rem, 0.82vw, 0.9rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

time small[b-49skwekf1o] {
    color: var(--text-muted);
    font-size: 0.68em;
    font-weight: 500;
}

.status-open[b-49skwekf1o] {
    --status-color: var(--success);
}

.status-openingsoon[b-49skwekf1o] {
    --status-color: var(--warning);
}

.status-closingsoon[b-49skwekf1o] {
    --status-color: var(--danger);
}

.status-lunchbreak[b-49skwekf1o],
.status-holiday[b-49skwekf1o] {
    --status-color: #9b5ce5;
}

.status-closed[b-49skwekf1o],
.status-weekend[b-49skwekf1o] {
    --status-color: #ff5b57;
}

.region-americas[b-49skwekf1o] {
    --market-region: var(--market-americas, #3bc86a);
}

.region-europe[b-49skwekf1o] {
    --market-region: var(--market-europe, #2f80ed);
}

.region-asia[b-49skwekf1o] {
    --market-region: var(--market-asia, #9b5ce5);
}

.region-oceania[b-49skwekf1o] {
    --market-region: var(--market-oceania, #f59e19);
}

.region-middleeast[b-49skwekf1o] {
    --market-region: #667085;
}

.region-africa[b-49skwekf1o] {
    --market-region: #eab308;
}

.list-view[b-49skwekf1o] {
    min-height: 4.2rem;
    grid-template-columns: auto minmax(12rem, 1.2fr) minmax(7rem, 0.6fr) minmax(7rem, 0.5fr) auto auto;
    grid-template-rows: auto;
    grid-template-areas: "logo title meta status time flag";
    align-items: center;
}

.list-view .favorite-button[b-49skwekf1o] {
    position: absolute;
    top: 50%;
    right: 2.1rem;
    transform: translateY(-50%);
}

.list-view .exchange-status[b-49skwekf1o],
.list-view time[b-49skwekf1o] {
    align-self: center;
}

a:focus-visible[b-49skwekf1o],
button:focus-visible[b-49skwekf1o] {
    outline: 3px solid rgba(47, 128, 237, 0.38);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .list-view[b-49skwekf1o] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto minmax(0.4rem, 1fr) auto;
        grid-template-areas:
            "logo title flag"
            "logo meta favorite"
            "spacer spacer spacer"
            "status status time";
    }

    .list-view .favorite-button[b-49skwekf1o] {
        position: static;
        transform: none;
    }
}
/* /Components/Markets/GlobalMarketTimeline.razor.rz.scp.css */
.region-status-row[b-6apcdd0a2n] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(9.75rem, 15.5vw, 12.6rem), 1fr));
    gap: clamp(0.42rem, 0.55vw, 0.62rem);
}

.region-status-card[b-6apcdd0a2n] {
    --region-color: var(--market-middle-east, #667085);
    --region-card-border: rgba(132, 153, 181, 0.18);
    --region-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --region-icon-color: var(--region-color);
    --region-icon-border: color-mix(in srgb, var(--region-color) 58%, rgba(132, 153, 181, 0.22));
    --region-icon-bg: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    --region-icon-glow: color-mix(in srgb, var(--region-color) 13%, transparent);

    position: relative;
    min-width: 0;
    min-height: clamp(4.35rem, 8svh, 5rem);
    padding: clamp(0.48rem, 0.58vw, 0.62rem);
    border: 1px solid var(--region-card-border);
    border-radius: 0.55rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.38rem, 0.5vw, 0.58rem);
    color: var(--text-primary);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-strong) 96%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent)),
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--region-color) 16%, transparent), transparent 42%);
    box-shadow: var(--region-card-shadow);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.region-status-card[b-6apcdd0a2n]::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background:
        radial-gradient(circle at 82% 48%, color-mix(in srgb, var(--region-color) 11%, transparent), transparent 42%),
        linear-gradient(90deg, color-mix(in srgb, var(--region-color) 5%, transparent), transparent 44%);
    opacity: 0.72;
}

.region-status-card:hover[b-6apcdd0a2n],
.region-status-card:focus-within[b-6apcdd0a2n] {
    border-color: color-mix(in srgb, var(--region-color) 40%, rgba(132, 153, 181, 0.24));
    box-shadow:
        var(--region-card-shadow),
        0 0.8rem 1.8rem color-mix(in srgb, var(--region-color) 10%, transparent);
    transform: translateY(-1px);
}

.region-status-copy[b-6apcdd0a2n],
.region-art[b-6apcdd0a2n] {
    position: relative;
    z-index: 1;
}

.region-status-copy[b-6apcdd0a2n] {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.12rem;
}

.region-title-row[b-6apcdd0a2n] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.34rem;
}

.region-title-row h2[b-6apcdd0a2n] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(0.76rem, 0.74vw, 0.84rem);
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.region-dot[b-6apcdd0a2n] {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--region-color);
    box-shadow:
        0 0 0 0.22rem color-mix(in srgb, var(--region-color) 15%, transparent),
        0 0 1rem color-mix(in srgb, var(--region-color) 28%, transparent);
}

.region-state[b-6apcdd0a2n] {
    margin-top: 0.04rem;
    color: var(--region-color);
    font-size: clamp(0.62rem, 0.62vw, 0.68rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0;
}

.region-hours[b-6apcdd0a2n] {
    color: var(--text-secondary);
    font-size: clamp(0.66rem, 0.66vw, 0.73rem);
    font-weight: 600;
    line-height: 1.18;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}

.region-city[b-6apcdd0a2n] {
    overflow: hidden;
    color: var(--text-muted);
    font-size: clamp(0.62rem, 0.62vw, 0.68rem);
    font-weight: 500;
    line-height: 1.18;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.region-art[b-6apcdd0a2n] {
    width: clamp(2.35rem, 2.9vw, 2.75rem);
    height: clamp(2.35rem, 2.9vw, 2.75rem);
    border: 1px solid var(--region-icon-border);
    border-radius: 0.95rem;
    display: grid;
    place-items: center;
    justify-self: end;
    color: var(--region-icon-color);
    background:
        radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.28), transparent 24%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--region-color) 15%, transparent), transparent 64%),
        var(--region-icon-bg);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--region-color) 10%, transparent),
        0 0 1.25rem var(--region-icon-glow);
}

.region-art[b-6apcdd0a2n]  svg {
    width: 58%;
    height: 58%;
    display: block;
    overflow: visible;
    color: inherit;
}

.region-art[b-6apcdd0a2n]  path,
.region-art[b-6apcdd0a2n]  circle,
.region-art[b-6apcdd0a2n]  line,
.region-art[b-6apcdd0a2n]  polyline,
.region-art[b-6apcdd0a2n]  polygon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    opacity: 0.92;
}

.region-art[b-6apcdd0a2n]  .icon-fill {
    fill: currentColor;
    stroke: none;
    opacity: 0.13;
}

.region-art[b-6apcdd0a2n]  .icon-dot {
    fill: currentColor;
    stroke: color-mix(in srgb, var(--bg-surface-strong) 82%, transparent);
    stroke-width: 1.5;
    opacity: 0.95;
}

.region-art[b-6apcdd0a2n]  .icon-soft {
    opacity: 0.48;
}

.region-status-card.is-open .region-state[b-6apcdd0a2n] {
    color: var(--region-color);
}

.region-status-card.is-opening-soon .region-state[b-6apcdd0a2n] {
    color: color-mix(in srgb, var(--region-color) 72%, #f7c95b 28%);
}

.region-status-card.is-closed .region-state[b-6apcdd0a2n],
.region-status-card.is-closed .region-hours[b-6apcdd0a2n],
.region-status-card.is-closed .region-city[b-6apcdd0a2n] {
    color: color-mix(in srgb, var(--text-secondary) 84%, var(--region-color) 16%);
}

.region-status-card.is-closed .region-art[b-6apcdd0a2n] {
    --region-icon-color: color-mix(in srgb, var(--text-secondary) 74%, var(--region-color) 26%);
    --region-icon-border: color-mix(in srgb, var(--text-secondary) 18%, var(--region-color) 22%);
    --region-icon-bg: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
    --region-icon-glow: rgba(15, 23, 42, 0.1);

    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--region-color) 7%, transparent), transparent 64%),
        var(--region-icon-bg);
}

.region-americas[b-6apcdd0a2n] {
    --region-color: var(--market-americas, #3bc86a);
}

.region-europe[b-6apcdd0a2n] {
    --region-color: var(--market-europe, #2f80ed);
}

.region-asia[b-6apcdd0a2n] {
    --region-color: var(--market-asia, #9b5ce5);
}

.region-oceania[b-6apcdd0a2n] {
    --region-color: var(--market-oceania, #f59e19);
}

.region-middle-east[b-6apcdd0a2n] {
    --region-color: var(--market-middle-east, #667085);
}

@media (max-width: 1180px) {
    .region-status-row[b-6apcdd0a2n] {
        grid-template-columns: repeat(auto-fit, minmax(clamp(9.8rem, 27vw, 12.8rem), 1fr));
    }
}

@media (max-width: 760px) {
    .region-status-row[b-6apcdd0a2n] {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(11.6rem, 58vw);
        grid-template-columns: none;
        gap: 0.45rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 0.1rem;
    }

    .region-status-row[b-6apcdd0a2n]::-webkit-scrollbar {
        display: none;
    }

    .region-status-card[b-6apcdd0a2n] {
        scroll-snap-align: start;
        min-height: 4.45rem;
    }

    .region-art[b-6apcdd0a2n] {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 420px) {
    .region-status-row[b-6apcdd0a2n] {
        grid-auto-columns: minmax(11.2rem, 72vw);
    }

    .region-status-card[b-6apcdd0a2n] {
        padding: 0.5rem;
    }

    .region-title-row h2[b-6apcdd0a2n] {
        font-size: 0.82rem;
    }

    .region-art[b-6apcdd0a2n] {
        width: 2.3rem;
        height: 2.3rem;
    }
}

:root[data-theme="dark"] .region-status-card[b-6apcdd0a2n] {
    --region-card-border: rgba(132, 153, 181, 0.2);
    --region-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0.7rem 1.6rem rgba(0, 0, 0, 0.14);
    --region-icon-border: color-mix(in srgb, var(--region-color) 62%, rgba(196, 211, 232, 0.2));
    --region-icon-bg: color-mix(in srgb, var(--bg-surface-muted) 82%, rgba(255, 255, 255, 0.04));
    --region-icon-glow: color-mix(in srgb, var(--region-color) 18%, rgba(0, 0, 0, 0.16));
}

:root[data-theme="dark"] .region-art[b-6apcdd0a2n]  path,
:root[data-theme="dark"] .region-art[b-6apcdd0a2n]  circle,
:root[data-theme="dark"] .region-art[b-6apcdd0a2n]  line,
:root[data-theme="dark"] .region-art[b-6apcdd0a2n]  polyline,
:root[data-theme="dark"] .region-art[b-6apcdd0a2n]  polygon {
    opacity: 1;
}

:root[data-theme="dark"] .region-status-card.is-closed .region-art[b-6apcdd0a2n] {
    --region-icon-color: color-mix(in srgb, var(--text-secondary) 66%, var(--region-color) 34%);
    --region-icon-border: color-mix(in srgb, var(--text-secondary) 26%, var(--region-color) 22%);
    --region-icon-glow: rgba(0, 0, 0, 0.18);
}
/* /Components/Markets/UpcomingMarketEventsPanel.razor.rz.scp.css */
.upcoming-panel[b-8jquaef7dy] {
    min-width: 0;
    border: 1px solid rgba(132, 153, 181, 0.18);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-strong) 96%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

header[b-8jquaef7dy] {
    min-height: 3.05rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(132, 153, 181, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

h2[b-8jquaef7dy] {
    margin: 0;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0;
}

.upcoming-title-group[b-8jquaef7dy] {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.upcoming-title-group small[b-8jquaef7dy] {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-alarm-note[b-8jquaef7dy] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

svg[b-8jquaef7dy] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.upcoming-list[b-8jquaef7dy] {
    display: grid;
    padding: 0.48rem 0.8rem;
}

.upcoming-row[b-8jquaef7dy] {
    --event-color: #2f80ed;
    min-width: 0;
    min-height: clamp(3.65rem, 6.6vh, 4.2rem);
    padding: 0.45rem 0.2rem;
    border-bottom: 1px solid rgba(132, 153, 181, 0.14);
    display: grid;
    grid-template-columns: auto minmax(9rem, 1.25fr) minmax(8rem, 0.8fr) minmax(3.4rem, auto) auto;
    align-items: center;
    gap: clamp(0.55rem, 1vw, 1.1rem);
}

.upcoming-row:last-child[b-8jquaef7dy] {
    border-bottom: 0;
}

.upcoming-row[b-8jquaef7dy]  .market-logo {
    justify-self: center;
}

.opening[b-8jquaef7dy] {
    --event-color: var(--success);
}

.closing[b-8jquaef7dy] {
    --event-color: var(--danger);
}

.overlap-start[b-8jquaef7dy] {
    --event-color: var(--accent);
}

.overlap-end[b-8jquaef7dy] {
    --event-color: var(--market-asia, #9b5ce5);
}

.event-identity[b-8jquaef7dy],
.event-when[b-8jquaef7dy] {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.event-exchange-link[b-8jquaef7dy] {
    border-radius: 0.3rem;
    color: inherit;
    text-decoration: none;
}

.event-exchange-link:hover strong[b-8jquaef7dy] {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.event-exchange-link:focus-visible[b-8jquaef7dy] {
    outline: 3px solid rgba(47, 128, 237, 0.38);
    outline-offset: 3px;
}

.event-identity strong[b-8jquaef7dy] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(0.78rem, 0.85vw, 0.9rem);
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-identity span[b-8jquaef7dy],
.event-when small[b-8jquaef7dy] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-when span[b-8jquaef7dy] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--event-color);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
}

.event-when i[b-8jquaef7dy] {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    background: var(--event-color);
}

.event-countdown[b-8jquaef7dy] {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.alert-button[b-8jquaef7dy] {
    min-width: 6.4rem;
    min-height: 2.35rem;
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 0.52rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface-muted) 92%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.alert-button.set[b-8jquaef7dy] {
    border-color: rgba(59, 200, 106, 0.42);
    color: var(--success);
    background: rgba(59, 200, 106, 0.12);
}

.event-empty[b-8jquaef7dy] {
    margin: 0;
    padding: 1.2rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
}

button:focus-visible[b-8jquaef7dy] {
    outline: 3px solid rgba(47, 128, 237, 0.38);
    outline-offset: 2px;
}

@media (max-width: 620px) {
    header[b-8jquaef7dy] {
        align-items: flex-start;
        min-height: 0;
        padding: 0.85rem;
        flex-direction: column;
    }

    .market-alarm-note[b-8jquaef7dy] {
        justify-content: flex-start;
        white-space: normal;
    }

    .upcoming-row[b-8jquaef7dy] {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "logo identity countdown"
            "logo when alert";
        min-height: 5.25rem;
    }

    .upcoming-row[b-8jquaef7dy]  .market-logo {
        grid-area: logo;
    }

    .event-identity[b-8jquaef7dy] {
        grid-area: identity;
    }

    .event-when[b-8jquaef7dy] {
        grid-area: when;
    }

    .event-countdown[b-8jquaef7dy] {
        grid-area: countdown;
    }

    .alert-button[b-8jquaef7dy] {
        grid-area: alert;
        min-width: 5.8rem;
        min-height: 2.45rem;
    }
}
/* /Components/Markets/WorldExchangeMap.razor.rz.scp.css */
.market-map-card[b-x0c84s70k8] {
    min-width: 0;
    height: 100%;
    min-height: clamp(20rem, 35vh, 26rem);
    border: 1px solid var(--market-map-card-border, rgba(132, 153, 181, 0.18));
    border-radius: 0.85rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-strong) 96%, transparent), color-mix(in srgb, var(--bg-surface) 94%, transparent));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.map-stage[b-x0c84s70k8] {
    position: relative;
    min-height: inherit;
    height: 100%;
    overflow: hidden;
    background: var(--market-map-stage-bg);
    box-shadow: inset 0 0 0 1px var(--market-map-stage-border, rgba(132, 153, 181, 0.05));
    isolation: isolate;
    touch-action: none;
}

.map-stage[b-x0c84s70k8]::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: var(--market-map-grid-opacity, 0.3);
    background-image:
        radial-gradient(circle, var(--market-map-grid-dot) 0.65px, transparent 0.85px),
        linear-gradient(90deg, var(--market-map-grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--market-map-grid-line) 1px, transparent 1px);
    background-size: 6px 6px, 80px 80px, 80px 80px;
}

.map-stage[b-x0c84s70k8]::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--market-map-edge-fade), transparent 16%, transparent 84%, var(--market-map-edge-fade)),
        linear-gradient(180deg, color-mix(in srgb, var(--market-map-edge-fade) 78%, transparent), transparent 20%, transparent 76%, var(--market-map-edge-fade));
}

.world-map-art[b-x0c84s70k8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.96;
    cursor: grab;
    filter: var(--market-map-art-shadow, drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18)));
}

.map-loading-panel[b-x0c84s70k8] {
    position: absolute;
    inset: 0;
    z-index: 7;
    padding: 1rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.75rem;
    color: var(--market-map-control-text);
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--market-map-control-bg) 70%, transparent), transparent 14rem),
        linear-gradient(180deg, color-mix(in srgb, var(--market-map-edge-fade) 42%, transparent), transparent 74%);
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}

.map-loading-spinner[b-x0c84s70k8] {
    width: 2.35rem;
    height: 2.35rem;
    border: 3px solid color-mix(in srgb, var(--market-map-control-text) 18%, transparent);
    border-top-color: var(--accent, #2f80ed);
    border-radius: 50%;
    animation: map-loading-spin-b-x0c84s70k8 780ms linear infinite;
}

.map-loading-copy[b-x0c84s70k8] {
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
}

.map-stage[data-map-state="ready"] .map-loading-panel[b-x0c84s70k8] {
    opacity: 0;
    visibility: hidden;
}

.map-stage[data-map-state="error"] .map-loading-spinner[b-x0c84s70k8] {
    display: none;
}

.map-stage[data-dragging="true"] .world-map-art[b-x0c84s70k8] {
    cursor: grabbing;
}

.map-stage[b-x0c84s70k8]  .map-graticule {
    fill: none;
    stroke: var(--market-map-graticule, rgba(127, 150, 184, 0.12));
    stroke-width: 0.9;
    vector-effect: non-scaling-stroke;
}

.map-stage[b-x0c84s70k8]  .map-land {
    fill: var(--market-map-land);
    stroke: var(--market-map-land-stroke);
    stroke-width: 0.9;
    filter: var(--market-map-land-shadow, drop-shadow(0 18px 32px rgba(0, 0, 0, 0.2)));
    vector-effect: non-scaling-stroke;
}

.map-stage[b-x0c84s70k8]  .map-borders {
    fill: none;
    stroke: var(--market-map-border-stroke);
    stroke-width: 0.7;
    vector-effect: non-scaling-stroke;
}

.map-stage[b-x0c84s70k8]  .map-route-line {
    fill: none;
    stroke: var(--market-map-route);
    stroke-width: 1.5;
    stroke-dasharray: 3.5 6.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.map-controls[b-x0c84s70k8] {
    position: absolute;
    z-index: 8;
    left: 1.15rem;
    bottom: 1.25rem;
    width: 2.65rem;
    border: 1px solid var(--market-map-control-border, rgba(132, 153, 181, 0.22));
    border-radius: 0.55rem;
    display: grid;
    overflow: hidden;
    background: var(--market-map-control-bg);
    box-shadow: var(--market-map-control-shadow, 0 0.9rem 2rem rgba(0, 0, 0, 0.22));
}

.map-controls button[b-x0c84s70k8] {
    width: 100%;
    height: 2.35rem;
    border: 0;
    border-bottom: 1px solid rgba(132, 153, 181, 0.16);
    display: grid;
    place-items: center;
    color: var(--market-map-control-text);
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    transition: background 140ms ease, color 140ms ease;
}

.map-controls button:hover[b-x0c84s70k8],
.map-controls button:focus-visible[b-x0c84s70k8] {
    color: var(--market-map-control-hover-text, #ffffff);
    background: var(--market-map-control-hover-bg, rgba(47, 128, 237, 0.16));
}

.map-controls button:last-child[b-x0c84s70k8] {
    border-bottom: 0;
}

.map-controls svg[b-x0c84s70k8] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.map-stage[b-x0c84s70k8]  .map-node {
    cursor: pointer;
    transition: opacity 140ms ease;
}

.map-stage[b-x0c84s70k8]  .map-node:focus-visible {
    outline: none;
}

.map-stage[b-x0c84s70k8]  .map-dot-halo,
.map-stage[b-x0c84s70k8]  .map-marker-halo {
    fill: color-mix(in srgb, var(--marker-color) 22%, transparent);
}

.map-stage[b-x0c84s70k8]  .map-dot-core,
.map-stage[b-x0c84s70k8]  .map-marker-core {
    fill: var(--marker-color);
    stroke: var(--market-map-marker-stroke, rgba(255, 255, 255, 0.9));
    stroke-width: 1.4;
}

.map-stage[b-x0c84s70k8]  .map-marker-pill {
    fill: var(--market-map-pill-bg);
    stroke: color-mix(in srgb, var(--marker-color) 48%, rgba(132, 153, 181, 0.28));
    stroke-width: 1;
    filter: var(--market-map-pill-shadow, drop-shadow(0 0.55rem 1rem rgba(0, 0, 0, 0.22)));
}

.map-stage[b-x0c84s70k8]  .map-marker-text {
    fill: var(--market-map-pill-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-rendering: geometricPrecision;
    pointer-events: none;
}

.map-stage[b-x0c84s70k8]  .map-dot,
.map-stage[b-x0c84s70k8]  .map-marker {
    --marker-color: #64748b;
    transform-box: fill-box;
    transform-origin: center;
}

.map-stage[b-x0c84s70k8]  .map-dot:hover,
.map-stage[b-x0c84s70k8]  .map-dot:focus-visible,
.map-stage[b-x0c84s70k8]  .map-marker:hover,
.map-stage[b-x0c84s70k8]  .map-marker:focus-visible,
.map-stage[b-x0c84s70k8]  .map-dot.is-selected,
.map-stage[b-x0c84s70k8]  .map-marker.is-selected {
    opacity: 1;
}

.map-stage[b-x0c84s70k8]  .map-dot:hover .map-dot-core,
.map-stage[b-x0c84s70k8]  .map-dot:focus-visible .map-dot-core,
.map-stage[b-x0c84s70k8]  .map-dot.is-selected .map-dot-core,
.map-stage[b-x0c84s70k8]  .map-marker:hover .map-marker-core,
.map-stage[b-x0c84s70k8]  .map-marker:focus-visible .map-marker-core,
.map-stage[b-x0c84s70k8]  .map-marker.is-selected .map-marker-core {
    stroke-width: 2.2;
}

.map-stage[b-x0c84s70k8]  .map-dot.is-selected .map-dot-halo,
.map-stage[b-x0c84s70k8]  .map-marker.is-selected .map-marker-halo {
    fill: color-mix(in srgb, var(--marker-color) 38%, transparent);
}

.map-stage[b-x0c84s70k8]  .map-marker.is-selected .map-marker-pill {
    stroke-width: 1.5;
    stroke: color-mix(in srgb, var(--marker-color) 76%, rgba(255, 255, 255, 0.35));
}

.map-tooltip-panel[b-x0c84s70k8] {
    position: absolute;
    z-index: 9;
    min-width: 12rem;
    max-width: min(16rem, calc(100vw - 2rem));
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--market-tooltip-border);
    border-radius: 0.65rem;
    color: var(--market-tooltip-text);
    background: var(--market-tooltip-bg);
    box-shadow: var(--shadow-card);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 0.85rem)) scale(0.98);
    transition: opacity 120ms ease, transform 120ms ease;
}

.map-tooltip-panel[data-visible="true"][b-x0c84s70k8] {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 0.95rem)) scale(1);
}

.map-tooltip-panel b[b-x0c84s70k8],
.map-tooltip-panel em[b-x0c84s70k8],
.map-tooltip-panel small[b-x0c84s70k8] {
    display: block;
}

.map-tooltip-panel em[b-x0c84s70k8],
.map-tooltip-panel small[b-x0c84s70k8] {
    margin-top: 0.18rem;
    color: var(--market-tooltip-muted);
    font-size: 0.72rem;
    font-style: normal;
}

.map-tooltip-panel b[b-x0c84s70k8] {
    font-size: 0.82rem;
    font-weight: 650;
}

.map-stage[b-x0c84s70k8]  .region-americas {
    --marker-color: var(--market-americas, #3bc86a);
}

.map-stage[b-x0c84s70k8]  .region-europe {
    --marker-color: var(--market-europe, #2f80ed);
}

.map-stage[b-x0c84s70k8]  .region-asia {
    --marker-color: var(--market-asia, #9b5ce5);
}

.map-stage[b-x0c84s70k8]  .region-oceania {
    --marker-color: var(--market-oceania, #f59e19);
}

.map-stage[b-x0c84s70k8]  .region-middleeast {
    --marker-color: #667085;
}

.map-stage[b-x0c84s70k8]  .region-africa {
    --marker-color: #eab308;
}

.map-stage[b-x0c84s70k8]  .status-closed,
.map-stage[b-x0c84s70k8]  .status-weekend,
.map-stage[b-x0c84s70k8]  .status-holiday {
    opacity: 0.7;
}

.map-stage[b-x0c84s70k8]  .status-lunchbreak .map-dot-core,
.map-stage[b-x0c84s70k8]  .status-lunchbreak .map-marker-core,
.map-stage[b-x0c84s70k8]  .status-openingsoon .map-dot-core,
.map-stage[b-x0c84s70k8]  .status-openingsoon .map-marker-core,
.map-stage[b-x0c84s70k8]  .status-closingsoon .map-dot-core,
.map-stage[b-x0c84s70k8]  .status-closingsoon .map-marker-core {
    stroke-width: 2;
}

button:focus-visible[b-x0c84s70k8] {
    outline: 3px solid rgba(47, 128, 237, 0.38);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .map-stage[b-x0c84s70k8] {
        min-height: 18rem;
    }

    .map-controls[b-x0c84s70k8] {
        left: 0.8rem;
        bottom: 0.8rem;
    }

    .map-tooltip-panel[b-x0c84s70k8] {
        min-width: 10.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-controls button[b-x0c84s70k8],
    .map-tooltip-panel[b-x0c84s70k8],
    .map-loading-panel[b-x0c84s70k8] {
        transition: none;
    }

    .map-loading-spinner[b-x0c84s70k8] {
        animation: none;
    }
}

@keyframes map-loading-spin-b-x0c84s70k8 {
    to {
        transform: rotate(1turn);
    }
}
/* /Components/Pages/CityBusinessHoursDraft2Page.razor.rz.scp.css */
.business-draft-page[b-1zraimcysv] {
    --draft-bg: var(--bg-page, #f6f8fb);
    --draft-surface: var(--bg-surface-strong, #ffffff);
    --draft-surface-soft: var(--bg-surface-soft, #f3f6fa);
    --draft-border: var(--border-soft, #dfe6ef);
    --draft-text: var(--text-primary, #101828);
    --draft-secondary: var(--text-secondary, #475467);
    --draft-muted: var(--text-muted, #667085);
    --draft-accent: var(--accent, #1769e0);
    --draft-open: #078760;
    --draft-open-soft: #eaf8f2;
    --draft-closed: #c2413b;
    --draft-closed-soft: #fff1ef;
    --draft-warning: #c77b08;
    --draft-warning-soft: #fff7e7;
    --draft-header-offset: var(--header-height, var(--header-h, 72px));
    min-height: 100dvh;
    color: var(--draft-text);
    background: var(--draft-bg);
    overflow-x: clip;
}

:root[data-theme="dark"] .business-draft-page[b-1zraimcysv] {
    --draft-bg: #081321;
    --draft-surface: #101d2f;
    --draft-surface-soft: #14243a;
    --draft-border: rgba(148, 163, 184, 0.2);
    --draft-text: #f1f5f9;
    --draft-secondary: #c4cfdd;
    --draft-muted: #8fa0b5;
    --draft-accent: #67a9fa;
    --draft-open: #52d6ad;
    --draft-open-soft: rgba(18, 132, 99, 0.16);
    --draft-closed: #fb8179;
    --draft-closed-soft: rgba(194, 65, 59, 0.16);
    --draft-warning: #f6bf55;
    --draft-warning-soft: rgba(199, 123, 8, 0.14);
}

.business-draft-page[b-1zraimcysv],
.business-draft-page *[b-1zraimcysv] {
    box-sizing: border-box;
}

.draft-shell[b-1zraimcysv] {
    width: min(100%, 1360px);
    min-height: calc(100dvh - var(--draft-header-offset));
    margin-inline: auto;
    padding: calc(var(--draft-header-offset) + clamp(16px, 2vw, 28px)) clamp(14px, 2vw, 28px) 52px;
}

.draft-shell svg[b-1zraimcysv],
.draft-shell[b-1zraimcysv]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.draft-version-bar[b-1zraimcysv] {
    min-height: 44px;
    margin: 14px 0;
    padding: 0 14px;
    border: 1px solid var(--draft-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--draft-secondary);
    background: var(--draft-surface);
    font-size: 0.75rem;
    font-weight: 760;
}

.draft-version-bar > span[b-1zraimcysv],
.draft-version-bar > a[b-1zraimcysv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.draft-version-bar > span i[b-1zraimcysv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--draft-warning);
}

.draft-version-bar > a[b-1zraimcysv],
.draft-inline-link[b-1zraimcysv],
.draft-holiday-detail a[b-1zraimcysv] {
    color: var(--draft-accent);
    text-decoration: none;
}

.draft-version-bar svg[b-1zraimcysv],
.draft-inline-link svg[b-1zraimcysv],
.draft-holiday-detail a svg[b-1zraimcysv] {
    width: 0.82rem;
    height: 0.82rem;
}

.draft-card[b-1zraimcysv],
.draft-loading[b-1zraimcysv],
.draft-empty[b-1zraimcysv] {
    min-width: 0;
    border: 1px solid var(--draft-border);
    border-radius: 8px;
    background: var(--draft-surface);
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
}

.draft-status-hero[b-1zraimcysv] {
    position: relative;
    min-height: 290px;
    border: 1px solid var(--draft-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    align-items: end;
    gap: 28px;
    overflow: hidden;
    isolation: isolate;
    color: #f8fafc;
    background-image:
        linear-gradient(90deg, rgba(3, 12, 25, 0.96) 0%, rgba(4, 16, 31, 0.81) 52%, rgba(4, 16, 31, 0.35) 100%),
        var(--draft-city-image),
        linear-gradient(135deg, #102b46, #25577b);
    background-position: center;
    background-size: cover;
}

.draft-hero-shade[b-1zraimcysv] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(2, 8, 20, 0.64), transparent 64%),
        linear-gradient(0deg, color-mix(in srgb, var(--draft-city-accent) 12%, transparent), transparent 70%);
}

.draft-status-copy[b-1zraimcysv] {
    min-width: 0;
    padding: clamp(24px, 3vw, 38px);
}

.draft-live-label[b-1zraimcysv] {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #cbd8e8;
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.draft-live-label span[b-1zraimcysv] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fb8179;
    box-shadow: 0 0 0 5px rgba(251, 129, 121, 0.16);
}

.draft-status-hero.is-open .draft-live-label span[b-1zraimcysv] {
    background: #5ee2b4;
    box-shadow: 0 0 0 5px rgba(94, 226, 180, 0.16);
}

.draft-status-hero h1[b-1zraimcysv] {
    max-width: 780px;
    margin: 0;
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.04;
}

.draft-status-summary[b-1zraimcysv] {
    margin: 12px 0 0;
    color: #d8e2ee;
    font-size: clamp(0.84rem, 1vw, 0.96rem);
    line-height: 1.5;
}

.draft-day-progress[b-1zraimcysv] {
    width: min(100%, 620px);
    margin-top: 25px;
}

.draft-day-progress > div[b-1zraimcysv] {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #e4ebf4;
    font-size: 0.76rem;
    font-weight: 720;
}

.draft-day-progress > div strong[b-1zraimcysv] {
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.draft-day-progress-track[b-1zraimcysv] {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    display: block;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
}

.draft-day-progress-track i[b-1zraimcysv] {
    height: 100%;
    border-radius: inherit;
    display: block;
    background: #fb8179;
    transition: width 300ms ease;
}

.draft-status-hero.is-open .draft-day-progress-track i[b-1zraimcysv] {
    background: #5ee2b4;
}

.draft-local-clock[b-1zraimcysv] {
    min-width: 0;
    margin: 0 clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) 0;
    padding: 21px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    background: rgba(4, 15, 29, 0.72);
    backdrop-filter: blur(12px);
}

.draft-local-clock small[b-1zraimcysv] {
    color: #bdccdc;
    font-size: 0.68rem;
    font-weight: 740;
}

.draft-local-clock strong[b-1zraimcysv] {
    margin: 5px 0 2px;
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    line-height: 1;
}

.draft-local-clock span[b-1zraimcysv] {
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
}

.draft-local-clock em[b-1zraimcysv] {
    margin-top: 8px;
    color: #98c8ff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 760;
}

.draft-closure-alert[b-1zraimcysv] {
    min-width: 0;
    margin-top: 14px;
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--draft-warning) 35%, var(--draft-border));
    border-left: 4px solid var(--draft-warning);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    background: var(--draft-warning-soft);
}

.draft-closure-alert > span[b-1zraimcysv] {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--draft-warning);
    background: color-mix(in srgb, var(--draft-warning) 10%, var(--draft-surface));
}

.draft-closure-alert p[b-1zraimcysv],
.draft-closure-alert strong[b-1zraimcysv],
.draft-closure-alert small[b-1zraimcysv] {
    display: block;
}

.draft-closure-alert p[b-1zraimcysv] {
    margin: 0 0 3px;
    color: var(--draft-warning);
    font-size: 0.65rem;
    font-weight: 820;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.draft-closure-alert strong[b-1zraimcysv] {
    font-size: 0.86rem;
}

.draft-closure-alert small[b-1zraimcysv] {
    margin-top: 3px;
    color: var(--draft-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
}

.draft-closure-alert time[b-1zraimcysv] {
    color: var(--draft-warning);
    font-size: 0.8rem;
    font-weight: 820;
    white-space: nowrap;
}

.draft-card[b-1zraimcysv] {
    margin-top: 16px;
    padding: clamp(18px, 2.2vw, 26px);
}

.draft-section-head[b-1zraimcysv] {
    min-width: 0;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.draft-eyebrow[b-1zraimcysv] {
    margin: 0 0 6px;
    color: var(--draft-accent);
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.draft-section-head h2[b-1zraimcysv] {
    margin: 0;
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
    font-weight: 830;
    letter-spacing: 0;
}

.draft-section-head > span:not(.draft-working-badge)[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.draft-working-badge[b-1zraimcysv] {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--draft-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--draft-muted);
    background: var(--draft-surface-soft);
    font-size: 0.68rem;
    font-weight: 790;
    white-space: nowrap;
}

.draft-working-badge.is-working[b-1zraimcysv] {
    border-color: color-mix(in srgb, var(--draft-open) 30%, var(--draft-border));
    color: var(--draft-open);
    background: var(--draft-open-soft);
}

.draft-working-badge svg[b-1zraimcysv] {
    width: 0.78rem;
    height: 0.78rem;
}

.draft-sector-list[b-1zraimcysv] {
    border-top: 1px solid var(--draft-border);
}

.draft-sector-row[b-1zraimcysv] {
    min-width: 0;
    min-height: 67px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--draft-border);
    display: grid;
    grid-template-columns: 38px minmax(180px, 1fr) minmax(150px, auto) minmax(100px, auto);
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.draft-sector-row:last-child[b-1zraimcysv] {
    border-bottom: 0;
}

.draft-sector-icon[b-1zraimcysv] {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--draft-accent);
    background: color-mix(in srgb, var(--draft-accent) 8%, var(--draft-surface-soft));
}

.draft-sector-row > div[b-1zraimcysv] {
    min-width: 0;
}

.draft-sector-row > div strong[b-1zraimcysv],
.draft-sector-row > div small[b-1zraimcysv] {
    display: block;
}

.draft-sector-row > div strong[b-1zraimcysv] {
    font-size: 0.82rem;
    font-weight: 810;
}

.draft-sector-row > div small[b-1zraimcysv] {
    margin-top: 3px;
    color: var(--draft-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.draft-sector-row > b[b-1zraimcysv] {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 790;
    overflow-wrap: anywhere;
    text-align: right;
}

.draft-sector-status[b-1zraimcysv] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: var(--draft-muted);
    font-size: 0.68rem;
    font-weight: 760;
    white-space: nowrap;
}

.draft-sector-status i[b-1zraimcysv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--draft-muted);
}

.draft-sector-row.is-open .draft-sector-status[b-1zraimcysv] {
    color: var(--draft-open);
}

.draft-sector-row.is-open .draft-sector-status i[b-1zraimcysv] {
    background: var(--draft-open);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--draft-open) 12%, transparent);
}

.draft-market-row[b-1zraimcysv] {
    background: color-mix(in srgb, var(--draft-accent) 3%, transparent);
}

.draft-market-row:hover[b-1zraimcysv] {
    background: color-mix(in srgb, var(--draft-accent) 7%, transparent);
}

.draft-sector-link[b-1zraimcysv] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--draft-accent);
    font-size: 0.68rem;
    font-weight: 780;
}

.draft-sector-link svg[b-1zraimcysv] {
    width: 0.75rem;
    height: 0.75rem;
}

.draft-card-note[b-1zraimcysv] {
    margin-top: 14px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    color: var(--draft-secondary);
    background: var(--draft-surface-soft);
    font-size: 0.7rem;
    line-height: 1.45;
}

.draft-card-note svg[b-1zraimcysv] {
    margin-top: 1px;
    color: var(--draft-accent);
}

.draft-planning-grid[b-1zraimcysv] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 16px;
}

.draft-week-strip[b-1zraimcysv] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--draft-border);
}

.draft-week-strip > div[b-1zraimcysv] {
    min-width: 0;
    min-height: 112px;
    padding: 13px 5px;
    border-right: 1px solid var(--draft-border);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    background: var(--draft-surface-soft);
}

.draft-week-strip > div:last-child[b-1zraimcysv] {
    border-right: 0;
}

.draft-week-strip span[b-1zraimcysv] {
    color: var(--draft-secondary);
    font-size: 0.68rem;
    font-weight: 780;
}

.draft-week-strip i[b-1zraimcysv] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--draft-muted);
    background: var(--draft-surface);
}

.draft-week-strip small[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.58rem;
    font-weight: 730;
}

.draft-week-strip .is-workday[b-1zraimcysv] {
    background: var(--draft-open-soft);
}

.draft-week-strip .is-workday i[b-1zraimcysv],
.draft-week-strip .is-workday small[b-1zraimcysv] {
    color: var(--draft-open);
}

.draft-week-note[b-1zraimcysv] {
    margin: 14px 0 0;
    color: var(--draft-secondary);
    font-size: 0.72rem;
    line-height: 1.5;
}

.draft-call-card .draft-section-head > svg[b-1zraimcysv] {
    width: 22px;
    height: 22px;
    color: var(--draft-accent);
}

.draft-zone-select[b-1zraimcysv] {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.draft-zone-select > span[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.7rem;
    font-weight: 760;
}

.draft-zone-select select[b-1zraimcysv] {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--draft-border);
    border-radius: 6px;
    color: var(--draft-text);
    background: var(--draft-surface-soft);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 730;
}

.draft-call-window[b-1zraimcysv] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.draft-call-window > div[b-1zraimcysv] {
    min-width: 0;
    min-height: 94px;
    padding: 13px;
    border: 1px solid var(--draft-border);
    display: grid;
    align-content: center;
    gap: 4px;
    background: var(--draft-surface-soft);
}

.draft-call-window > div span[b-1zraimcysv],
.draft-call-window > div small[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.63rem;
    font-weight: 720;
}

.draft-call-window > div strong[b-1zraimcysv] {
    font-size: 0.82rem;
    font-weight: 820;
    overflow-wrap: anywhere;
}

.draft-call-connector[b-1zraimcysv] {
    width: 32px;
    height: 32px;
    border: 1px solid var(--draft-border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--draft-accent);
    background: var(--draft-surface);
}

.draft-recommended-window[b-1zraimcysv] {
    margin-top: 10px;
    padding: 12px 13px;
    border-left: 3px solid var(--draft-open);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    background: var(--draft-open-soft);
}

.draft-recommended-window > span[b-1zraimcysv] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--draft-open);
    background: var(--draft-surface);
}

.draft-recommended-window small[b-1zraimcysv],
.draft-recommended-window strong[b-1zraimcysv],
.draft-recommended-window em[b-1zraimcysv] {
    display: block;
}

.draft-recommended-window small[b-1zraimcysv] {
    color: var(--draft-open);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
}

.draft-recommended-window strong[b-1zraimcysv] {
    margin-top: 3px;
    font-size: 0.8rem;
}

.draft-recommended-window em[b-1zraimcysv] {
    margin-top: 2px;
    color: var(--draft-secondary);
    font-size: 0.67rem;
    font-style: normal;
}

.draft-inline-link[b-1zraimcysv] {
    min-height: 36px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 780;
}

.draft-holiday-head[b-1zraimcysv] {
    align-items: flex-end;
}

.draft-next-holiday[b-1zraimcysv] {
    max-width: 380px;
    min-width: 250px;
    padding-left: 14px;
    border-left: 3px solid var(--draft-warning);
    display: grid;
    gap: 2px;
}

.draft-next-holiday span[b-1zraimcysv] {
    color: var(--draft-warning);
    font-size: 0.63rem;
    font-weight: 820;
    text-transform: uppercase;
}

.draft-next-holiday strong[b-1zraimcysv] {
    font-size: 0.82rem;
}

.draft-next-holiday small[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.67rem;
}

.draft-holiday-list[b-1zraimcysv] {
    border-top: 1px solid var(--draft-border);
}

.draft-holiday-list details[b-1zraimcysv] {
    border-bottom: 1px solid var(--draft-border);
}

.draft-holiday-list summary[b-1zraimcysv] {
    min-width: 0;
    min-height: 68px;
    padding: 8px 7px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 88px 22px;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.draft-holiday-list summary[b-1zraimcysv]::-webkit-details-marker {
    display: none;
}

.draft-holiday-list summary > svg[b-1zraimcysv] {
    color: var(--draft-muted);
    transition: transform 160ms ease;
}

.draft-holiday-list details[open] summary > svg[b-1zraimcysv] {
    transform: rotate(180deg);
}

.draft-holiday-list details.is-passed summary[b-1zraimcysv] {
    opacity: 0.62;
}

.draft-holiday-list details.is-today summary[b-1zraimcysv] {
    border-left: 3px solid var(--draft-warning);
    background: var(--draft-warning-soft);
}

.draft-holiday-date[b-1zraimcysv] {
    width: 46px;
    height: 48px;
    border: 1px solid var(--draft-border);
    border-radius: 6px;
    display: grid;
    place-content: center;
    justify-items: center;
    background: var(--draft-surface-soft);
}

.draft-holiday-date b[b-1zraimcysv] {
    font-size: 0.9rem;
    line-height: 1;
}

.draft-holiday-date small[b-1zraimcysv] {
    margin-top: 3px;
    color: var(--draft-muted);
    font-size: 0.58rem;
    font-weight: 760;
    text-transform: uppercase;
}

.draft-holiday-name[b-1zraimcysv] {
    min-width: 0;
}

.draft-holiday-name strong[b-1zraimcysv],
.draft-holiday-name small[b-1zraimcysv] {
    display: block;
}

.draft-holiday-name strong[b-1zraimcysv] {
    font-size: 0.8rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.draft-holiday-name small[b-1zraimcysv] {
    margin-top: 3px;
    color: var(--draft-muted);
    font-size: 0.65rem;
}

.draft-holiday-state[b-1zraimcysv] {
    color: var(--draft-muted);
    font-size: 0.68rem;
    font-weight: 770;
    text-align: right;
}

.draft-holiday-list .is-upcoming .draft-holiday-state[b-1zraimcysv],
.draft-holiday-list .is-today .draft-holiday-state[b-1zraimcysv] {
    color: var(--draft-warning);
}

.draft-holiday-detail[b-1zraimcysv] {
    padding: 0 42px 14px 67px;
}

.draft-holiday-detail p[b-1zraimcysv] {
    margin: 0;
    color: var(--draft-secondary);
    font-size: 0.7rem;
    line-height: 1.5;
}

.draft-holiday-detail a[b-1zraimcysv] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 770;
}

.draft-holiday-source[b-1zraimcysv] {
    margin-top: 14px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    color: var(--draft-muted);
    background: var(--draft-surface-soft);
}

.draft-holiday-source svg[b-1zraimcysv] {
    color: var(--draft-accent);
}

.draft-holiday-source p[b-1zraimcysv] {
    margin: 0;
    font-size: 0.67rem;
    line-height: 1.45;
}

.draft-holiday-empty[b-1zraimcysv] {
    min-height: 120px;
    padding: 22px;
    border: 1px dashed var(--draft-border);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    background: var(--draft-surface-soft);
}

.draft-holiday-empty > svg[b-1zraimcysv] {
    width: 24px;
    height: 24px;
    color: var(--draft-muted);
}

.draft-holiday-empty strong[b-1zraimcysv] {
    font-size: 0.8rem;
}

.draft-holiday-empty p[b-1zraimcysv] {
    margin: 4px 0 0;
    color: var(--draft-secondary);
    font-size: 0.7rem;
    line-height: 1.45;
}

.draft-guidance[b-1zraimcysv] {
    margin-top: 16px;
    padding: clamp(18px, 2.2vw, 26px);
    border-top: 1px solid var(--draft-border);
    border-bottom: 1px solid var(--draft-border);
    background: var(--draft-surface);
}

.draft-guidance > div[b-1zraimcysv] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--draft-border);
    border-left: 1px solid var(--draft-border);
}

.draft-guidance article[b-1zraimcysv] {
    min-width: 0;
    min-height: 142px;
    padding: 16px;
    border-right: 1px solid var(--draft-border);
    border-bottom: 1px solid var(--draft-border);
}

.draft-guidance article > span[b-1zraimcysv] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--draft-warning);
    background: var(--draft-warning-soft);
}

.draft-guidance h3[b-1zraimcysv] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 810;
}

.draft-guidance article p[b-1zraimcysv] {
    margin: 6px 0 0;
    color: var(--draft-secondary);
    font-size: 0.7rem;
    line-height: 1.48;
}

.draft-loading[b-1zraimcysv],
.draft-empty[b-1zraimcysv] {
    min-height: 440px;
    padding: clamp(30px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.draft-loading-copy[b-1zraimcysv] {
    max-width: 620px;
}

.draft-loading-icon[b-1zraimcysv],
.draft-empty > span[b-1zraimcysv] {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--draft-accent);
    background: color-mix(in srgb, var(--draft-accent) 9%, var(--draft-surface-soft));
}

.draft-loading h1[b-1zraimcysv],
.draft-empty h1[b-1zraimcysv] {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.1;
}

.draft-loading-copy > p:not(.draft-eyebrow)[b-1zraimcysv],
.draft-empty > p:not(.draft-eyebrow)[b-1zraimcysv] {
    margin: 12px 0 0;
    color: var(--draft-secondary);
    line-height: 1.55;
}

.draft-loading-progress[b-1zraimcysv] {
    width: min(100%, 560px);
    height: 7px;
    margin-top: 24px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--draft-surface-soft);
}

.draft-loading-progress span[b-1zraimcysv] {
    height: 100%;
    display: block;
    background: var(--draft-accent);
    transition: width 300ms ease;
}

.draft-empty > a[b-1zraimcysv] {
    min-height: 40px;
    margin-top: 20px;
    padding: 0 14px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    background: var(--draft-accent);
    font-size: 0.76rem;
    font-weight: 780;
    text-decoration: none;
}

button:focus-visible[b-1zraimcysv],
a:focus-visible[b-1zraimcysv],
select:focus-visible[b-1zraimcysv],
summary:focus-visible[b-1zraimcysv] {
    outline: 3px solid color-mix(in srgb, var(--draft-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .draft-planning-grid[b-1zraimcysv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-guidance > div[b-1zraimcysv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .draft-status-hero[b-1zraimcysv] {
        min-height: 410px;
        grid-template-columns: minmax(0, 1fr);
        align-content: end;
        gap: 0;
        background-image:
            linear-gradient(180deg, rgba(3, 12, 25, 0.26) 0%, rgba(3, 12, 25, 0.88) 46%, rgba(3, 12, 25, 0.98) 100%),
            var(--draft-city-image),
            linear-gradient(135deg, #102b46, #25577b);
    }

    .draft-status-copy[b-1zraimcysv] {
        padding-bottom: 16px;
    }

    .draft-local-clock[b-1zraimcysv] {
        margin: 0 clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px);
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .draft-local-clock small[b-1zraimcysv],
    .draft-local-clock span[b-1zraimcysv] {
        grid-column: 1;
    }

    .draft-local-clock strong[b-1zraimcysv] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .draft-local-clock em[b-1zraimcysv] {
        grid-column: 2;
        text-align: right;
    }

    .draft-sector-row[b-1zraimcysv] {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .draft-sector-row > b[b-1zraimcysv] {
        grid-column: 2;
        text-align: left;
    }

    .draft-sector-status[b-1zraimcysv],
    .draft-sector-link[b-1zraimcysv] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .draft-holiday-head[b-1zraimcysv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .draft-next-holiday[b-1zraimcysv] {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .draft-shell[b-1zraimcysv] {
        padding: calc(var(--draft-header-offset) + 12px) 12px 32px;
    }

    .draft-version-bar[b-1zraimcysv] {
        padding: 8px 11px;
        flex-wrap: wrap;
    }

    .draft-status-copy[b-1zraimcysv] {
        padding-inline: 18px;
    }

    .draft-local-clock[b-1zraimcysv] {
        margin-inline: 18px;
        padding: 16px;
    }

    .draft-local-clock strong[b-1zraimcysv] {
        font-size: 1.55rem;
    }

    .draft-closure-alert[b-1zraimcysv] {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .draft-closure-alert > span[b-1zraimcysv] {
        width: 34px;
        height: 34px;
    }

    .draft-closure-alert time[b-1zraimcysv] {
        grid-column: 2;
    }

    .draft-card[b-1zraimcysv],
    .draft-guidance[b-1zraimcysv] {
        padding: 16px;
    }

    .draft-section-head[b-1zraimcysv] {
        align-items: flex-start;
    }

    .draft-today-card .draft-section-head[b-1zraimcysv] {
        flex-direction: column;
        gap: 10px;
    }

    .draft-sector-row[b-1zraimcysv] {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 7px 10px;
    }

    .draft-sector-icon[b-1zraimcysv] {
        width: 34px;
        height: 34px;
        grid-row: 1 / span 2;
    }

    .draft-sector-row > b[b-1zraimcysv],
    .draft-sector-status[b-1zraimcysv],
    .draft-sector-link[b-1zraimcysv] {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
        text-align: left;
    }

    .draft-week-strip[b-1zraimcysv] {
        grid-template-columns: repeat(7, minmax(42px, 1fr));
        overflow-x: auto;
    }

    .draft-week-strip > div[b-1zraimcysv] {
        min-height: 98px;
    }

    .draft-week-strip small[b-1zraimcysv] {
        display: none;
    }

    .draft-zone-select[b-1zraimcysv] {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .draft-call-window[b-1zraimcysv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-call-connector[b-1zraimcysv] {
        margin-inline: auto;
        transform: rotate(90deg);
    }

    .draft-holiday-list summary[b-1zraimcysv] {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        gap: 9px;
    }

    .draft-holiday-state[b-1zraimcysv] {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    .draft-holiday-list summary > svg[b-1zraimcysv] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .draft-holiday-detail[b-1zraimcysv] {
        padding: 0 12px 14px 62px;
    }

    .draft-guidance > div[b-1zraimcysv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-guidance article[b-1zraimcysv] {
        min-height: 0;
    }
}

@media (max-width: 390px) {
    .draft-local-clock[b-1zraimcysv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .draft-local-clock strong[b-1zraimcysv],
    .draft-local-clock em[b-1zraimcysv] {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }

    .draft-status-hero h1[b-1zraimcysv] {
        font-size: 1.72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .draft-day-progress-track i[b-1zraimcysv],
    .draft-loading-progress span[b-1zraimcysv],
    .draft-holiday-list summary > svg[b-1zraimcysv] {
        transition: none;
    }
}
/* /Components/Pages/CityBusinessHoursPage.razor.rz.scp.css */
.city-business-hours-page[b-sbrl39oyzg] {
    --city-bg-page: var(--bg-page, #f7faff);
    --city-surface: var(--bg-surface-strong, #ffffff);
    --city-surface-soft: var(--bg-surface-soft, #f5f8fc);
    --city-border: var(--border-soft, #e3eaf4);
    --city-text-primary: var(--text-primary, #0f172a);
    --city-text-secondary: var(--text-secondary, #475569);
    --city-text-muted: var(--text-muted, #64748b);
    --city-accent: var(--accent, #2563eb);
    --city-warning: var(--warning, #f59e0b);
    --business-open: #0f9f83;
    --business-open-soft: #e9f8f4;
    --business-header-offset: var(--header-height, var(--header-h, 72px));
    --business-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    min-height: 100dvh;
    color: var(--city-text-primary);
    background: var(--city-bg-page);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-business-hours-page[b-sbrl39oyzg] {
    --city-bg-page: linear-gradient(180deg, #07111f 0%, #091526 54%, #0b182a 100%);
    --city-surface: #0e1a2c;
    --city-surface-soft: #122137;
    --city-border: rgba(148, 163, 184, 0.18);
    --city-text-primary: #f1f5f9;
    --city-text-secondary: #c3cedc;
    --city-text-muted: #899aaf;
    --city-accent: #60a5fa;
    --city-warning: #fbbf24;
    --business-open: #5eead4;
    --business-open-soft: rgba(94, 234, 212, 0.11);
    --business-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.city-business-hours-page[b-sbrl39oyzg],
.city-business-hours-page *[b-sbrl39oyzg] {
    box-sizing: border-box;
}

.business-tool-shell[b-sbrl39oyzg] {
    width: min(100%, 1440px);
    min-height: calc(100dvh - var(--business-header-offset));
    margin-inline: auto;
    padding: calc(var(--business-header-offset) + clamp(16px, 1.8vw, 32px)) clamp(16px, 1.8vw, 32px) 48px;
}

.business-tool-shell svg[b-sbrl39oyzg],
.business-tool-shell[b-sbrl39oyzg]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.business-dashboard-grid[b-sbrl39oyzg] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.business-main-stack[b-sbrl39oyzg],
.business-side-stack[b-sbrl39oyzg] {
    min-width: 0;
    display: grid;
    gap: clamp(14px, 1.35vw, 24px);
}

.business-side-stack[b-sbrl39oyzg] {
    position: sticky;
    top: calc(var(--business-header-offset) + 24px);
}

.business-card[b-sbrl39oyzg],
.business-guidance-section[b-sbrl39oyzg],
.business-side-card[b-sbrl39oyzg],
.business-data-card[b-sbrl39oyzg],
.business-empty-state[b-sbrl39oyzg],
.business-loading-state[b-sbrl39oyzg] {
    min-width: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: var(--city-surface);
    box-shadow: var(--business-shadow);
}

.business-card[b-sbrl39oyzg],
.business-guidance-section[b-sbrl39oyzg] {
    padding: clamp(18px, 2.2vw, 26px);
}

.business-eyebrow[b-sbrl39oyzg],
.business-section-label[b-sbrl39oyzg],
.business-side-heading p[b-sbrl39oyzg] {
    margin: 0 0 6px;
    color: var(--city-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
}

.business-hero[b-sbrl39oyzg] {
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    background-image:
        linear-gradient(90deg, rgba(3, 12, 25, 0.96) 0%, rgba(4, 15, 30, 0.83) 48%, rgba(4, 15, 30, 0.24) 78%),
        linear-gradient(0deg, rgba(3, 12, 25, 0.68), transparent 58%),
        var(--business-city-image),
        linear-gradient(135deg, #0b223d, #27577d);
    background-position: center, center, center, center;
    background-size: cover;
    box-shadow: var(--business-shadow);
}

.business-actions[b-sbrl39oyzg] {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.business-actions button[b-sbrl39oyzg] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.65);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: all 0.16s ease;
}

.business-actions button:hover[b-sbrl39oyzg] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(15, 23, 42, 0.85);
}

.business-icon-action[b-sbrl39oyzg] {
    width: 42px;
    padding: 0 !important;
}

.business-actions svg[b-sbrl39oyzg] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.business-hero[b-sbrl39oyzg]::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(0deg, color-mix(in srgb, var(--business-city-accent, var(--city-accent)) 14%, transparent), transparent 60%);
    pointer-events: none;
}

.business-hero-copy[b-sbrl39oyzg] {
    width: min(100%, 760px);
    padding-right: min(28%, 260px);
    color: #f8fafc;
}

.business-hero .business-eyebrow[b-sbrl39oyzg] {
    color: #93c5fd;
}

.business-hero h1[b-sbrl39oyzg] {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 840;
    line-height: 1.03;
    letter-spacing: 0;
}

.business-hero-copy > p:not(.business-eyebrow)[b-sbrl39oyzg] {
    max-width: 650px;
    margin: 10px 0 0;
    color: #d7e2ef;
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    line-height: 1.5;
}

.business-hero-meta[b-sbrl39oyzg] {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 18px;
    color: #c8d5e5;
    font-size: 0.77rem;
    font-weight: 680;
}

.business-hero-meta > span:not(.business-status)[b-sbrl39oyzg],
.business-hero-meta time[b-sbrl39oyzg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.business-hero-meta time strong[b-sbrl39oyzg] {
    color: #f8fafc;
}

.business-status[b-sbrl39oyzg] {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(251, 191, 36, 0.38);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fde68a;
    background: rgba(146, 64, 14, 0.42);
    font-weight: 800;
}

.business-status i[b-sbrl39oyzg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);
}

.business-status.is-open[b-sbrl39oyzg] {
    border-color: rgba(94, 234, 212, 0.4);
    color: #99f6e4;
    background: rgba(6, 78, 59, 0.48);
}

.business-status.is-open i[b-sbrl39oyzg] {
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.13);
}

.business-hero-context[b-sbrl39oyzg] {
    position: absolute;
    right: clamp(18px, 2vw, 26px);
    bottom: clamp(18px, 2vw, 26px);
    z-index: 1;
    width: min(24%, 220px);
    min-width: 190px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon title"
        "hours hours";
    align-items: center;
    gap: 2px 10px;
    color: #f8fafc;
    background: rgba(4, 15, 30, 0.7);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.business-hero-context > span[b-sbrl39oyzg] {
    grid-area: icon;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.14);
}

.business-hero-context small[b-sbrl39oyzg] {
    grid-area: label;
    color: #aebed1;
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.business-hero-context strong[b-sbrl39oyzg] {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-hero-context em[b-sbrl39oyzg] {
    grid-area: hours;
    margin-top: 8px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    color: #d7e2ef;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 720;
}

.business-card-head[b-sbrl39oyzg],
.business-section-heading[b-sbrl39oyzg],
.business-side-heading[b-sbrl39oyzg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.business-card-head[b-sbrl39oyzg] {
    margin-bottom: 18px;
}

.business-card-head h2[b-sbrl39oyzg],
.business-section-heading h2[b-sbrl39oyzg],
.business-side-heading h2[b-sbrl39oyzg] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 1.12rem;
    font-weight: 820;
    line-height: 1.18;
    letter-spacing: 0;
}

.business-card-head > span[b-sbrl39oyzg] {
    flex: 0 0 auto;
    color: var(--city-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.business-timeline-axis[b-sbrl39oyzg] {
    margin: 0 108px 8px 130px;
    display: flex;
    justify-content: space-between;
    color: var(--city-text-muted);
    font-size: 0.64rem;
    font-weight: 680;
}

.business-timeline-list[b-sbrl39oyzg] {
    border-top: 1px solid var(--city-border);
}

.business-timeline-row[b-sbrl39oyzg] {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: 124px minmax(180px, 1fr) 112px;
    align-items: center;
    gap: 12px;
    color: var(--city-text-primary);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.business-timeline-row:last-child[b-sbrl39oyzg] {
    border-bottom: 0;
}

.business-timeline-row:hover[b-sbrl39oyzg],
.business-timeline-row:focus-visible[b-sbrl39oyzg],
.business-timeline-row.is-selected[b-sbrl39oyzg] {
    background: color-mix(in srgb, var(--city-accent) 6%, transparent);
}

.business-timeline-label[b-sbrl39oyzg] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.business-timeline-label svg[b-sbrl39oyzg] {
    flex: 0 0 auto;
    color: var(--city-accent);
}

.business-timeline-label strong[b-sbrl39oyzg] {
    min-width: 0;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-timeline-track[b-sbrl39oyzg] {
    position: relative;
    min-width: 0;
    height: 12px;
    border: 1px solid var(--city-border);
    border-radius: 3px;
    display: block;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent calc(25% - 1px), var(--city-border) 25%, transparent calc(25% + 1px)),
        linear-gradient(90deg, transparent calc(50% - 1px), var(--city-border) 50%, transparent calc(50% + 1px)),
        linear-gradient(90deg, transparent calc(75% - 1px), var(--city-border) 75%, transparent calc(75% + 1px)),
        var(--city-surface-soft);
}

.business-timeline-track i[b-sbrl39oyzg] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: var(--window-left);
    width: var(--window-width);
    min-width: 3px;
    border-radius: 2px;
    background: var(--city-accent);
}

.business-timeline-row.is-selected .business-timeline-track i[b-sbrl39oyzg] {
    background: var(--business-open);
}

.business-row-status[b-sbrl39oyzg] {
    min-width: 0;
    color: var(--city-text-muted);
    font-size: 0.7rem;
    font-weight: 730;
    overflow-wrap: anywhere;
    text-align: right;
}

.business-row-status.is-open[b-sbrl39oyzg] {
    color: var(--business-open);
}

.business-today-card footer[b-sbrl39oyzg] {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    color: var(--city-text-secondary);
    background: var(--city-surface-soft);
}

.business-today-card footer svg[b-sbrl39oyzg] {
    margin-top: 2px;
    color: var(--city-accent);
}

.business-today-card footer p[b-sbrl39oyzg] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

.business-category-switcher[b-sbrl39oyzg] {
    min-width: 0;
    padding: 5px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    background: var(--city-surface-soft);
    scrollbar-width: none;
}

.business-category-switcher[b-sbrl39oyzg]::-webkit-scrollbar {
    display: none;
}

.business-category-switcher button[b-sbrl39oyzg] {
    min-height: 40px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--city-text-secondary);
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 760;
    white-space: nowrap;
    cursor: pointer;
}

.business-category-switcher button:hover[b-sbrl39oyzg],
.business-category-switcher button:focus-visible[b-sbrl39oyzg],
.business-category-switcher button.is-active[b-sbrl39oyzg] {
    color: var(--city-accent);
    background: var(--city-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 18%, var(--city-border));
}

.business-selected-category[b-sbrl39oyzg] {
    margin-top: 14px;
    padding: 13px 14px;
    border-left: 3px solid var(--business-open);
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    background: color-mix(in srgb, var(--business-open) 7%, var(--city-surface-soft));
}

.business-selected-category > span[b-sbrl39oyzg] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--business-open);
    background: color-mix(in srgb, var(--business-open) 12%, var(--city-surface));
}

.business-selected-category strong[b-sbrl39oyzg] {
    font-size: 0.9rem;
    font-weight: 820;
}

.business-selected-category p[b-sbrl39oyzg] {
    margin: 3px 0 0;
    color: var(--city-text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
}

.business-selected-category b[b-sbrl39oyzg] {
    color: var(--business-open);
    font-size: 0.78rem;
    font-weight: 820;
    white-space: nowrap;
}

.business-week-list[b-sbrl39oyzg] {
    margin-top: 12px;
    border-top: 1px solid var(--city-border);
}

.business-week-row[b-sbrl39oyzg] {
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(86px, 0.7fr) minmax(150px, 1fr) minmax(120px, 1fr);
    align-items: center;
    gap: 12px;
}

.business-week-row:last-child[b-sbrl39oyzg] {
    border-bottom: 0;
}

.business-week-row.is-today[b-sbrl39oyzg] {
    border-left: 3px solid var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 6%, transparent);
}

.business-week-row > span[b-sbrl39oyzg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.business-week-row > span strong[b-sbrl39oyzg] {
    font-size: 0.8rem;
    font-weight: 780;
}

.business-week-row > span small[b-sbrl39oyzg] {
    min-height: 21px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
    font-size: 0.62rem;
    font-weight: 800;
}

.business-week-row > b[b-sbrl39oyzg] {
    min-width: 0;
    color: var(--city-text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.business-week-row > b.is-closed[b-sbrl39oyzg] {
    color: var(--city-text-muted);
}

.business-week-row > em[b-sbrl39oyzg] {
    min-width: 0;
    color: var(--city-text-muted);
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: right;
}

.business-holiday-head[b-sbrl39oyzg] {
    min-width: 0;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.business-holiday-title[b-sbrl39oyzg] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.business-holiday-title > span[b-sbrl39oyzg] {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 11%, var(--city-surface));
}

.business-holiday-title h2[b-sbrl39oyzg] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 1.12rem;
    font-weight: 820;
    line-height: 1.18;
}

.business-next-holiday[b-sbrl39oyzg] {
    width: min(44%, 360px);
    min-width: 230px;
    padding-left: 14px;
    border-left: 3px solid var(--city-warning);
    display: grid;
    gap: 2px;
}

.business-next-holiday > span[b-sbrl39oyzg] {
    color: var(--city-warning);
    font-size: 0.63rem;
    font-weight: 820;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.business-next-holiday strong[b-sbrl39oyzg] {
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 820;
    overflow-wrap: anywhere;
}

.business-next-holiday small[b-sbrl39oyzg] {
    color: var(--city-text-muted);
    font-size: 0.67rem;
    line-height: 1.35;
}

.business-holiday-list[b-sbrl39oyzg] {
    border-top: 1px solid var(--city-border);
}

.business-holiday-list details[b-sbrl39oyzg] {
    border-bottom: 1px solid var(--city-border);
}

.business-holiday-list summary[b-sbrl39oyzg] {
    min-width: 0;
    min-height: 66px;
    padding: 8px 7px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 86px 22px;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.business-holiday-list summary[b-sbrl39oyzg]::-webkit-details-marker {
    display: none;
}

.business-holiday-list summary > svg[b-sbrl39oyzg] {
    color: var(--city-text-muted);
    transition: transform 160ms ease;
}

.business-holiday-list details[open] summary > svg[b-sbrl39oyzg] {
    transform: rotate(180deg);
}

.business-holiday-list details.is-passed summary[b-sbrl39oyzg] {
    opacity: 0.62;
}

.business-holiday-list details.is-today summary[b-sbrl39oyzg] {
    border-left: 3px solid var(--city-warning);
    background: color-mix(in srgb, var(--city-warning) 7%, var(--city-surface));
}

.business-holiday-date[b-sbrl39oyzg] {
    width: 44px;
    height: 46px;
    border: 1px solid var(--city-border);
    border-radius: 6px;
    display: grid;
    place-content: center;
    justify-items: center;
    background: var(--city-surface-soft);
}

.business-holiday-date b[b-sbrl39oyzg] {
    font-size: 0.88rem;
    font-weight: 820;
    line-height: 1;
}

.business-holiday-date small[b-sbrl39oyzg] {
    margin-top: 3px;
    color: var(--city-text-muted);
    font-size: 0.58rem;
    font-weight: 760;
    text-transform: uppercase;
}

.business-holiday-name[b-sbrl39oyzg] {
    min-width: 0;
}

.business-holiday-name strong[b-sbrl39oyzg],
.business-holiday-name small[b-sbrl39oyzg] {
    display: block;
}

.business-holiday-name strong[b-sbrl39oyzg] {
    font-size: 0.8rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.business-holiday-name small[b-sbrl39oyzg] {
    margin-top: 3px;
    color: var(--city-text-muted);
    font-size: 0.65rem;
}

.business-holiday-state[b-sbrl39oyzg] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 770;
    text-align: right;
}

.business-holiday-list .is-upcoming .business-holiday-state[b-sbrl39oyzg],
.business-holiday-list .is-today .business-holiday-state[b-sbrl39oyzg] {
    color: var(--city-warning);
}

.business-holiday-detail[b-sbrl39oyzg] {
    padding: 0 42px 14px 65px;
}

.business-holiday-detail p[b-sbrl39oyzg] {
    margin: 0;
    color: var(--city-text-secondary);
    font-size: 0.7rem;
    line-height: 1.5;
}

.business-holiday-source[b-sbrl39oyzg] {
    margin-top: 14px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    color: var(--city-text-muted);
    background: var(--city-surface-soft);
}

.business-holiday-source > span[b-sbrl39oyzg] {
    color: var(--city-accent);
}

.business-holiday-source p[b-sbrl39oyzg] {
    margin: 0;
    font-size: 0.67rem;
    line-height: 1.45;
}

.business-holiday-empty[b-sbrl39oyzg] {
    min-height: 116px;
    padding: 20px;
    border: 1px dashed var(--city-border);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    background: var(--city-surface-soft);
}

.business-holiday-empty > svg[b-sbrl39oyzg] {
    width: 24px;
    height: 24px;
    color: var(--city-text-muted);
}

.business-holiday-empty strong[b-sbrl39oyzg] {
    font-size: 0.8rem;
}

.business-holiday-empty p[b-sbrl39oyzg] {
    margin: 4px 0 0;
    color: var(--city-text-secondary);
    font-size: 0.7rem;
    line-height: 1.45;
}

.business-section-heading[b-sbrl39oyzg] {
    justify-content: flex-start;
    margin-bottom: 18px;
}

.business-section-heading > span[b-sbrl39oyzg],
.business-side-heading > span[b-sbrl39oyzg] {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 11%, var(--city-surface));
}

.business-guidance-grid[b-sbrl39oyzg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--city-border);
    border-left: 1px solid var(--city-border);
}

.business-guidance-grid article[b-sbrl39oyzg] {
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border-right: 1px solid var(--city-border);
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
}

.business-guidance-grid article > span[b-sbrl39oyzg] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--city-warning);
    background: color-mix(in srgb, var(--city-warning) 10%, var(--city-surface));
}

.business-guidance-grid h3[b-sbrl39oyzg] {
    margin: 1px 0 5px;
    font-size: 0.85rem;
    font-weight: 820;
    line-height: 1.25;
}

.business-guidance-grid p[b-sbrl39oyzg] {
    margin: 0;
    color: var(--city-text-secondary);
    font-size: 0.75rem;
    line-height: 1.48;
}

.business-side-card[b-sbrl39oyzg] {
    padding: 18px;
    min-width: 0;
    overflow: hidden;
}

.business-side-heading[b-sbrl39oyzg] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    min-width: 0;
}

.business-side-heading > div[b-sbrl39oyzg] {
    min-width: 0;
    flex: 1 1 auto;
}

.business-side-heading p[b-sbrl39oyzg] {
    margin: 0 0 3px;
    color: var(--city-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
}

.business-side-heading h2[b-sbrl39oyzg] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 1.1rem;
    font-weight: 820;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: break-word;
}

.business-quick-card dl[b-sbrl39oyzg] {
    margin: 0;
    min-width: 0;
}

.business-quick-card dl > div[b-sbrl39oyzg] {
    min-width: 0;
    min-height: 42px;
    padding: 10px 0;
    border-top: 1px solid var(--city-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.business-quick-card dt[b-sbrl39oyzg],
.business-quick-card dd[b-sbrl39oyzg] {
    min-width: 0;
    margin: 0;
}

.business-quick-card dt[b-sbrl39oyzg] {
    flex: 1 1 auto;
    color: var(--city-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.business-quick-card dd[b-sbrl39oyzg] {
    flex: 0 0 auto;
    max-width: 60%;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.35;
    text-align: right;
    word-break: break-word;
    overflow-wrap: break-word;
}

.business-contact-list[b-sbrl39oyzg] {
    display: grid;
    gap: 8px;
}

.business-contact-list > div[b-sbrl39oyzg] {
    min-width: 0;
    padding: 11px 12px;
    border-left: 3px solid var(--business-open);
    display: grid;
    gap: 3px;
    background: color-mix(in srgb, var(--business-open) 7%, var(--city-surface-soft));
}

.business-contact-list span[b-sbrl39oyzg] {
    color: var(--city-text-muted);
    font-size: 0.65rem;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.business-contact-list strong[b-sbrl39oyzg] {
    font-size: 0.84rem;
    font-weight: 840;
}

.business-contact-list small[b-sbrl39oyzg] {
    color: var(--city-text-secondary);
    font-size: 0.69rem;
    line-height: 1.35;
}

.business-contact-card > a[b-sbrl39oyzg] {
    min-height: 38px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--city-accent);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.business-contact-card > a svg[b-sbrl39oyzg] {
    width: 0.9rem;
    height: 0.9rem;
}

.business-data-card[b-sbrl39oyzg] {
    padding: 15px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    border-color: color-mix(in srgb, var(--city-warning) 24%, var(--city-border));
    background: color-mix(in srgb, var(--city-warning) 7%, var(--city-surface));
}

.business-data-card > span[b-sbrl39oyzg] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-warning);
    background: color-mix(in srgb, var(--city-warning) 12%, var(--city-surface));
}

.business-data-card strong[b-sbrl39oyzg] {
    font-size: 0.78rem;
    font-weight: 830;
}

.business-data-card p[b-sbrl39oyzg] {
    margin: 5px 0 8px;
    color: var(--city-text-secondary);
    font-size: 0.7rem;
    line-height: 1.42;
}

.business-data-card a[b-sbrl39oyzg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--city-accent);
    font-size: 0.68rem;
    font-weight: 780;
    text-decoration: none;
}

.business-data-card a svg[b-sbrl39oyzg] {
    width: 0.78rem;
    height: 0.78rem;
}

.business-empty-state[b-sbrl39oyzg],
.business-loading-state[b-sbrl39oyzg] {
    min-height: 390px;
    padding: clamp(28px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.business-empty-icon[b-sbrl39oyzg],
.business-loading-icon[b-sbrl39oyzg] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 11%, var(--city-surface));
}

.business-empty-state h1[b-sbrl39oyzg],
.business-loading-state h1[b-sbrl39oyzg] {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 840;
    line-height: 1.1;
}

.business-empty-state > p:not(.business-eyebrow)[b-sbrl39oyzg],
.business-loading-state > p:not(.business-eyebrow)[b-sbrl39oyzg] {
    max-width: 620px;
    margin: 12px 0 20px;
    color: var(--city-text-secondary);
    line-height: 1.55;
}

.business-empty-state a[b-sbrl39oyzg] {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    background: var(--city-accent);
    font-size: 0.8rem;
    font-weight: 780;
    text-decoration: none;
}

.business-loading-icon[b-sbrl39oyzg] {
    animation: business-loading-pulse-b-sbrl39oyzg 1.8s ease-in-out infinite;
}

.business-generation-progress[b-sbrl39oyzg] {
    width: min(100%, 520px);
    text-align: left;
}

.business-generation-progress-head[b-sbrl39oyzg] {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--city-text-secondary);
    font-size: 0.76rem;
    font-weight: 760;
}

.business-generation-progress-head strong[b-sbrl39oyzg] {
    color: var(--city-text);
    font-variant-numeric: tabular-nums;
}

.business-generation-progress-track[b-sbrl39oyzg] {
    width: 100%;
    height: 7px;
    border-radius: 4px;
    display: block;
    overflow: hidden;
    background: color-mix(in srgb, var(--city-border) 72%, transparent);
}

.business-generation-progress-track > i[b-sbrl39oyzg] {
    width: 0;
    height: 100%;
    border-radius: inherit;
    display: block;
    background: var(--city-accent);
    transition: width 320ms ease;
}

.business-loading-state > small[b-sbrl39oyzg] {
    max-width: 520px;
    margin-top: 14px;
    color: var(--city-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

@keyframes business-loading-pulse-b-sbrl39oyzg {
    0%,
    100% {
        opacity: 0.64;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

button:focus-visible[b-sbrl39oyzg],
a:focus-visible[b-sbrl39oyzg] {
    outline: 3px solid color-mix(in srgb, var(--city-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1240px) {
    .business-dashboard-grid[b-sbrl39oyzg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-side-stack[b-sbrl39oyzg] {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .business-data-card[b-sbrl39oyzg] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 840px) {
    .business-hero[b-sbrl39oyzg] {
        display: grid;
        align-content: end;
        background-image:
            linear-gradient(180deg, rgba(3, 12, 25, 0.26) 0%, rgba(3, 12, 25, 0.88) 48%, rgba(3, 12, 25, 0.98) 100%),
            var(--business-city-image),
            linear-gradient(135deg, #0b223d, #27577d);
    }

    .business-hero-copy[b-sbrl39oyzg] {
        width: 100%;
    }

    .business-hero-context[b-sbrl39oyzg] {
        position: static;
        width: auto;
        min-width: 0;
        margin: 0 20px 20px;
    }

    .business-timeline-axis[b-sbrl39oyzg] {
        display: none;
    }

    .business-timeline-row[b-sbrl39oyzg] {
        grid-template-columns: minmax(100px, 1fr) auto;
        gap: 7px 12px;
    }

    .business-timeline-track[b-sbrl39oyzg] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .business-row-status[b-sbrl39oyzg] {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 680px) {
    .business-tool-shell[b-sbrl39oyzg] {
        padding: calc(var(--business-header-offset) + 12px) 12px 24px;
    }

    .business-card[b-sbrl39oyzg],
    .business-guidance-section[b-sbrl39oyzg],
    .business-side-card[b-sbrl39oyzg] {
        padding: 16px;
    }

    .business-card-head[b-sbrl39oyzg] {
        align-items: flex-start;
    }

    .business-week-head[b-sbrl39oyzg] {
        flex-direction: column;
        gap: 4px;
    }

    .business-holiday-head[b-sbrl39oyzg] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .business-next-holiday[b-sbrl39oyzg] {
        width: 100%;
        min-width: 0;
    }

    .business-holiday-list summary[b-sbrl39oyzg] {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        gap: 9px;
    }

    .business-holiday-state[b-sbrl39oyzg] {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
    }

    .business-holiday-list summary > svg[b-sbrl39oyzg] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .business-holiday-detail[b-sbrl39oyzg] {
        padding: 0 12px 14px 62px;
    }

    .business-selected-category[b-sbrl39oyzg] {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .business-selected-category b[b-sbrl39oyzg] {
        grid-column: 2;
        white-space: normal;
    }

    .business-week-row[b-sbrl39oyzg] {
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 4px 10px;
    }

    .business-week-row > em[b-sbrl39oyzg] {
        grid-column: 2;
        text-align: left;
    }

    .business-week-row > span[b-sbrl39oyzg] {
        align-self: start;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .business-guidance-grid[b-sbrl39oyzg] {
        grid-template-columns: 1fr;
    }

    .business-guidance-grid article[b-sbrl39oyzg] {
        min-height: 0;
    }

    .business-side-stack[b-sbrl39oyzg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-data-card[b-sbrl39oyzg] {
        grid-column: auto;
    }
}

@media (max-width: 380px) {
    .business-hero-copy[b-sbrl39oyzg] {
        padding-inline: 16px;
    }

    .business-hero-context[b-sbrl39oyzg] {
        margin-inline: 16px;
    }

    .business-timeline-row[b-sbrl39oyzg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .business-row-status[b-sbrl39oyzg] {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .business-timeline-track[b-sbrl39oyzg] {
        grid-row: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .business-loading-icon[b-sbrl39oyzg] {
        animation: none;
    }

    .business-generation-progress-track > i[b-sbrl39oyzg] {
        transition: none;
    }

    .business-holiday-list summary > svg[b-sbrl39oyzg] {
        transition: none;
    }
}
/* /Components/Pages/CityHistoryPage.razor.rz.scp.css */
.city-history-page[b-irduxy7hlm] {
    --city-bg-page: var(--bg-page, #f7faff);
    --city-surface: var(--bg-surface-strong, #ffffff);
    --city-surface-soft: var(--bg-surface-soft, #f5f8fc);
    --city-border: var(--border-soft, #e3eaf4);
    --city-text-primary: var(--text-primary, #0f172a);
    --city-text-secondary: var(--text-secondary, #475569);
    --city-text-muted: var(--text-muted, #64748b);
    --city-accent: var(--accent, #2563eb);
    --city-warning: var(--warning, #f59e0b);
    --city-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.055);
    --history-green: #0f9f83;
    --history-header-offset: var(--header-height, var(--header-h, 72px));
    min-height: 100dvh;
    color: var(--city-text-primary);
    background: var(--city-bg-page);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-history-page[b-irduxy7hlm] {
    --city-bg-page: linear-gradient(180deg, #07111f 0%, #091526 54%, #0b182a 100%);
    --city-surface: #0e1a2c;
    --city-surface-soft: #122137;
    --city-border: rgba(148, 163, 184, 0.18);
    --city-text-primary: #f1f5f9;
    --city-text-secondary: #c3cedc;
    --city-text-muted: #899aaf;
    --city-accent: #60a5fa;
    --city-warning: #fbbf24;
    --history-green: #5eead4;
    --city-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.city-history-page[b-irduxy7hlm],
.city-history-page *[b-irduxy7hlm] {
    box-sizing: border-box;
}

.history-tool-shell[b-irduxy7hlm] {
    width: min(100%, 1440px);
    min-height: calc(100dvh - var(--history-header-offset));
    margin-inline: auto;
    padding: calc(var(--history-header-offset) + clamp(16px, 1.8vw, 32px)) clamp(16px, 1.8vw, 32px) 48px;
}

.history-tool-shell svg[b-irduxy7hlm],
.history-tool-shell[b-irduxy7hlm]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.history-dashboard-grid[b-irduxy7hlm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.history-main-stack[b-irduxy7hlm],
.history-side-stack[b-irduxy7hlm] {
    min-width: 0;
    display: grid;
    gap: clamp(14px, 1.35vw, 24px);
}

.history-side-stack[b-irduxy7hlm] {
    position: sticky;
    top: calc(var(--history-header-offset) + 24px);
}

.history-hero[b-irduxy7hlm] {
    position: relative;
    min-height: clamp(226px, 17vw, 240px);
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(3, 12, 25, 0.95) 0%, rgba(4, 15, 30, 0.78) 44%, rgba(4, 15, 30, 0.2) 78%),
        linear-gradient(0deg, rgba(3, 12, 25, 0.66), transparent 55%),
        var(--history-city-image);
    background-position: center, center, center;
    background-size: cover;
    box-shadow: var(--city-shadow-soft);
}

.history-actions[b-irduxy7hlm] {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-actions button[b-irduxy7hlm] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.65);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: all 0.16s ease;
}

.history-actions button:hover[b-irduxy7hlm] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(15, 23, 42, 0.85);
}

.history-icon-action[b-irduxy7hlm] {
    width: 42px;
    padding: 0 !important;
}

.history-actions svg[b-irduxy7hlm] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.history-hero-copy[b-irduxy7hlm] {
    position: relative;
    z-index: 1;
    width: min(100%, 700px);
    padding: clamp(22px, 2.5vw, 30px);
    color: #f8fafc;
}

.history-eyebrow[b-irduxy7hlm],
.history-section-heading p[b-irduxy7hlm],
.history-side-heading p[b-irduxy7hlm],
.history-highlight-label[b-irduxy7hlm] {
    margin: 0 0 6px;
    color: var(--city-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.history-hero .history-eyebrow[b-irduxy7hlm] {
    color: #93c5fd;
}

.history-hero h1[b-irduxy7hlm] {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 840;
    line-height: 1.02;
    letter-spacing: 0;
}

.history-hero-copy > p:not(.history-eyebrow)[b-irduxy7hlm] {
    max-width: 640px;
    margin: 10px 0 0;
    color: #d7e2ef;
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    line-height: 1.5;
}

.history-hero-meta[b-irduxy7hlm] {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    color: #c4d3e5;
    font-size: 0.78rem;
    font-weight: 700;
}

.history-hero-meta span[b-irduxy7hlm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.history-hero-meta svg[b-irduxy7hlm] {
    color: #fbbf24;
}

.history-chapter-switcher[b-irduxy7hlm] {
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.history-chapter-switcher button[b-irduxy7hlm] {
    min-width: 0;
    min-height: 52px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: var(--city-text-secondary);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.history-chapter-switcher button:hover[b-irduxy7hlm],
.history-chapter-switcher button:focus-visible[b-irduxy7hlm] {
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 7%, transparent);
}

.history-chapter-switcher button.is-active[b-irduxy7hlm] {
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 12%, var(--city-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 16%, transparent);
}

.history-chapter-switcher button span[b-irduxy7hlm] {
    overflow: hidden;
    font-size: 0.83rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-chapter-switcher button small[b-irduxy7hlm] {
    color: var(--city-text-muted);
    font-size: 0.67rem;
    font-weight: 650;
    white-space: nowrap;
}

.history-reading-flow[b-irduxy7hlm] {
    display: grid;
    gap: 24px;
}

.history-section[b-irduxy7hlm] {
    padding: clamp(18px, 2.2vw, 28px);
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.history-section-heading[b-irduxy7hlm],
.history-side-heading[b-irduxy7hlm] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-section-icon[b-irduxy7hlm],
.history-side-heading > span[b-irduxy7hlm],
.history-highlight-icon[b-irduxy7hlm] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 12%, var(--city-surface));
}

.history-section-heading h2[b-irduxy7hlm],
.history-side-heading h2[b-irduxy7hlm] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 1.16rem;
    font-weight: 820;
    line-height: 1.2;
    letter-spacing: 0;
}

.history-origin-feature[b-irduxy7hlm] {
    padding: clamp(18px, 2.5vw, 28px);
    border-left: 4px solid var(--history-green);
    background: color-mix(in srgb, var(--history-green) 7%, var(--city-surface-soft));
}

.history-origin-label[b-irduxy7hlm] {
    margin: 0 0 8px;
    color: var(--history-green);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.history-origin-title[b-irduxy7hlm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.history-origin-title strong[b-irduxy7hlm] {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 850;
}

.history-origin-title span[b-irduxy7hlm] {
    color: var(--city-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.history-origin-feature blockquote[b-irduxy7hlm] {
    margin: 18px 0 8px;
    color: var(--city-text-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-style: italic;
}

.history-origin-feature > p:not(.history-origin-label)[b-irduxy7hlm],
.history-origin-feature footer[b-irduxy7hlm] {
    margin: 0;
    color: var(--city-text-secondary);
    font-size: 0.88rem;
    line-height: 1.65;
}

.history-origin-feature footer[b-irduxy7hlm] {
    margin-top: 12px;
    color: var(--city-text-muted);
    font-size: 0.76rem;
}

.history-name-grid[b-irduxy7hlm] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.history-name-card[b-irduxy7hlm] {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--city-border);
    border-radius: 6px;
    background: var(--city-surface-soft);
}

.history-name-card-head[b-irduxy7hlm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-name-card-head span[b-irduxy7hlm],
.history-timeline-year[b-irduxy7hlm] {
    color: var(--city-accent);
    font-size: 0.72rem;
    font-weight: 800;
}

.history-name-card-head strong[b-irduxy7hlm] {
    font-size: 1rem;
}

.history-name-card p[b-irduxy7hlm] {
    margin: 10px 0 0;
    color: var(--city-text-secondary);
    font-size: 0.8rem;
    line-height: 1.58;
}

.history-name-card .history-name-meaning[b-irduxy7hlm] {
    color: var(--city-text-primary);
    font-weight: 700;
}

.history-current-zone[b-irduxy7hlm] {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--city-accent) 24%, var(--city-border));
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: color-mix(in srgb, var(--city-accent) 7%, var(--city-surface));
}

.history-current-zone > div span[b-irduxy7hlm],
.history-current-zone dt[b-irduxy7hlm] {
    display: block;
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.history-current-zone > div strong[b-irduxy7hlm] {
    display: block;
    margin-top: 4px;
    font-size: 0.94rem;
}

.history-current-zone dl[b-irduxy7hlm] {
    margin: 0;
    display: flex;
    gap: 20px;
}

.history-current-zone dd[b-irduxy7hlm] {
    margin: 3px 0 0;
    font-size: 0.78rem;
    font-weight: 760;
}

.history-timeline[b-irduxy7hlm],
.history-milestone-list[b-irduxy7hlm] {
    display: grid;
}

.history-timeline-entry[b-irduxy7hlm],
.history-milestone[b-irduxy7hlm] {
    border-top: 1px solid var(--city-border);
}

.history-timeline-entry:last-child[b-irduxy7hlm],
.history-milestone:last-child[b-irduxy7hlm] {
    border-bottom: 1px solid var(--city-border);
}

.history-timeline-entry summary[b-irduxy7hlm],
.history-milestone summary[b-irduxy7hlm] {
    min-height: 72px;
    padding: 13px 8px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.history-timeline-entry summary[b-irduxy7hlm]::-webkit-details-marker,
.history-milestone summary[b-irduxy7hlm]::-webkit-details-marker {
    display: none;
}

.history-timeline-entry summary:hover[b-irduxy7hlm],
.history-milestone summary:hover[b-irduxy7hlm] {
    background: color-mix(in srgb, var(--city-accent) 5%, transparent);
}

.history-timeline-summary[b-irduxy7hlm],
.history-milestone summary > span:nth-child(2)[b-irduxy7hlm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-timeline-summary strong[b-irduxy7hlm],
.history-milestone summary strong[b-irduxy7hlm] {
    color: var(--city-text-primary);
    font-size: 0.86rem;
    line-height: 1.35;
}

.history-timeline-summary small[b-irduxy7hlm],
.history-milestone summary small[b-irduxy7hlm] {
    color: var(--city-text-muted);
    font-size: 0.7rem;
}

.history-expand-icon[b-irduxy7hlm] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--city-text-muted);
    background: var(--city-surface-soft);
    transition: transform 160ms ease;
}

details[open] > summary .history-expand-icon[b-irduxy7hlm] {
    color: var(--city-accent);
    transform: rotate(180deg);
}

.history-timeline-entry > p[b-irduxy7hlm],
.history-milestone > p[b-irduxy7hlm] {
    margin: -2px 36px 18px 108px;
    color: var(--city-text-secondary);
    font-size: 0.82rem;
    line-height: 1.68;
}

.history-milestone summary[b-irduxy7hlm] {
    grid-template-columns: 64px minmax(0, 1fr) 28px;
}

.history-milestone summary time[b-irduxy7hlm] {
    color: var(--city-warning);
    font-size: 1rem;
    font-weight: 840;
}

.history-milestone > p[b-irduxy7hlm] {
    margin-left: 84px;
}

.history-quick-facts[b-irduxy7hlm],
.history-highlight[b-irduxy7hlm] {
    padding: 18px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.history-quick-facts dl[b-irduxy7hlm] {
    margin: 0;
}

.history-quick-facts dl > div[b-irduxy7hlm] {
    padding: 11px 0;
    border-top: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 10px;
}

.history-quick-facts dt[b-irduxy7hlm] {
    color: var(--city-text-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.history-quick-facts dd[b-irduxy7hlm] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 0.74rem;
    font-weight: 760;
    text-align: right;
}

.history-highlight[b-irduxy7hlm] {
    overflow: hidden;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--city-warning) 10%, var(--city-surface)), var(--city-surface) 68%);
}

.history-highlight-top[b-irduxy7hlm] {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.history-highlight-icon[b-irduxy7hlm] {
    color: var(--city-warning);
    background: color-mix(in srgb, var(--city-warning) 14%, var(--city-surface));
}

.history-highlight-controls[b-irduxy7hlm] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-highlight-controls button[b-irduxy7hlm] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: var(--city-text-secondary);
    background: color-mix(in srgb, var(--city-warning) 5%, var(--city-surface));
    cursor: pointer;
}

.history-highlight-controls button:hover[b-irduxy7hlm],
.history-highlight-controls button:focus-visible[b-irduxy7hlm] {
    border-color: color-mix(in srgb, var(--city-warning) 42%, var(--city-border));
    color: var(--city-warning);
}

.history-highlight-controls span[b-irduxy7hlm] {
    min-width: 34px;
    color: var(--city-text-muted);
    font-size: 0.66rem;
    font-weight: 750;
    text-align: center;
}

.history-highlight-slide[b-irduxy7hlm] {
    min-height: 118px;
    animation: history-highlight-in-b-irduxy7hlm 220ms ease-out;
}

.history-highlight h2[b-irduxy7hlm] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 820;
    line-height: 1.25;
}

.history-highlight strong[b-irduxy7hlm] {
    display: block;
    margin: 8px 0;
    color: var(--city-warning);
    font-size: 1.35rem;
}

.history-highlight-copy[b-irduxy7hlm] {
    margin: 0;
    color: var(--city-text-secondary);
    font-size: 0.78rem;
    line-height: 1.6;
}

.history-highlight-dots[b-irduxy7hlm] {
    min-height: 20px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.history-highlight-dots button[b-irduxy7hlm] {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    background: transparent;
    cursor: pointer;
}

.history-highlight-dots button[b-irduxy7hlm]::after {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: color-mix(in srgb, var(--city-text-muted) 46%, transparent);
    transition: width 160ms ease, border-radius 160ms ease, background 160ms ease;
}

.history-highlight-dots button.is-active[b-irduxy7hlm]::after {
    width: 16px;
    border-radius: 999px;
    background: var(--city-warning);
}

@keyframes history-highlight-in-b-irduxy7hlm {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-empty-state[b-irduxy7hlm],
.history-loading-state[b-irduxy7hlm] {
    min-height: 420px;
    padding: 40px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--city-surface);
}

.history-empty-state > span[b-irduxy7hlm],
.history-loading-icon[b-irduxy7hlm] {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 12%, var(--city-surface));
}

.history-empty-state h1[b-irduxy7hlm],
.history-loading-state h1[b-irduxy7hlm] {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.history-empty-state > p:not(.history-eyebrow)[b-irduxy7hlm],
.history-loading-state > p:not(.history-eyebrow)[b-irduxy7hlm] {
    max-width: 560px;
    margin: 12px 0 20px;
    color: var(--city-text-secondary);
}

.history-empty-state a[b-irduxy7hlm] {
    color: var(--city-accent);
    font-weight: 750;
}

.history-loading-icon[b-irduxy7hlm] {
    animation: history-loading-pulse-b-irduxy7hlm 1.8s ease-in-out infinite;
}

.history-generation-progress[b-irduxy7hlm] {
    width: min(100%, 520px);
    text-align: left;
}

.history-generation-progress-head[b-irduxy7hlm] {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--city-text-secondary);
    font-size: 0.78rem;
}

.history-generation-progress-head strong[b-irduxy7hlm] {
    color: var(--city-text-primary);
    font-size: 0.82rem;
}

.history-generation-progress-track[b-irduxy7hlm] {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: color-mix(in srgb, var(--city-border) 72%, var(--city-surface-soft));
}

.history-generation-progress-track span[b-irduxy7hlm] {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--city-accent);
    transition: width 320ms ease;
}

.history-loading-state > small[b-irduxy7hlm] {
    max-width: 520px;
    margin-top: 14px;
    color: var(--city-text-muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

@keyframes history-loading-pulse-b-irduxy7hlm {
    0%,
    100% {
        opacity: 0.64;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-height: 860px) and (min-width: 1051px) {
    .history-side-stack[b-irduxy7hlm] {
        gap: 12px;
    }

    .history-quick-facts[b-irduxy7hlm],
    .history-highlight[b-irduxy7hlm] {
        padding: 14px;
    }

    .history-side-heading[b-irduxy7hlm] {
        margin-bottom: 10px;
    }

    .history-side-heading > span[b-irduxy7hlm],
    .history-highlight-icon[b-irduxy7hlm] {
        width: 36px;
        height: 36px;
    }

    .history-quick-facts dl > div[b-irduxy7hlm] {
        padding: 7px 0;
    }

    .history-highlight strong[b-irduxy7hlm] {
        margin: 4px 0;
        font-size: 1.2rem;
    }

    .history-highlight-copy[b-irduxy7hlm] {
        line-height: 1.45;
    }

    .history-highlight-slide[b-irduxy7hlm] {
        min-height: 104px;
    }
}

@media (max-width: 1050px) {
    .history-dashboard-grid[b-irduxy7hlm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-side-stack[b-irduxy7hlm] {
        position: static;
        grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    }
}

@media (max-width: 760px) {
    .history-tool-shell[b-irduxy7hlm] {
        padding-inline: 12px;
    }

    .history-hero[b-irduxy7hlm] {
        min-height: 300px;
        background-image:
            linear-gradient(0deg, rgba(3, 12, 25, 0.96) 0%, rgba(3, 12, 25, 0.72) 56%, rgba(3, 12, 25, 0.18) 100%),
            var(--history-city-image);
    }

    .history-hero-copy[b-irduxy7hlm] {
        padding: 18px;
    }

    .history-hero h1[b-irduxy7hlm] {
        font-size: 1.9rem;
    }

    .history-hero-copy > p:not(.history-eyebrow)[b-irduxy7hlm] {
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .history-chapter-switcher[b-irduxy7hlm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-chapter-switcher button small[b-irduxy7hlm] {
        display: none;
    }

    .history-name-grid[b-irduxy7hlm],
    .history-side-stack[b-irduxy7hlm] {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-current-zone[b-irduxy7hlm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-timeline-entry summary[b-irduxy7hlm] {
        grid-template-columns: 68px minmax(0, 1fr) 28px;
    }

    .history-timeline-entry > p[b-irduxy7hlm] {
        margin-left: 88px;
    }
}

@media (max-width: 480px) {
    .history-section[b-irduxy7hlm] {
        padding: 16px 12px;
    }

    .history-timeline-entry summary[b-irduxy7hlm],
    .history-milestone summary[b-irduxy7hlm] {
        grid-template-columns: minmax(0, 1fr) 28px;
        gap: 8px;
    }

    .history-timeline-year[b-irduxy7hlm],
    .history-milestone summary time[b-irduxy7hlm] {
        grid-column: 1;
        margin-bottom: -4px;
    }

    .history-timeline-summary[b-irduxy7hlm],
    .history-milestone summary > span:nth-child(2)[b-irduxy7hlm] {
        grid-column: 1;
    }

    .history-expand-icon[b-irduxy7hlm] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .history-timeline-entry > p[b-irduxy7hlm],
    .history-milestone > p[b-irduxy7hlm] {
        margin: 0 36px 16px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-loading-icon[b-irduxy7hlm],
    .history-highlight-slide[b-irduxy7hlm] {
        animation: none;
    }
}
/* /Components/Pages/CitySearchDialog.razor.rz.scp.css */
.city-search-modal-layer[b-zn3j7ln6o4] {
    z-index: 100;
    padding: clamp(12px, 2vw, 28px);
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(10px);
}

.city-search-modal[b-zn3j7ln6o4] {
    width: min(100%, 46rem);
    max-height: min(86dvh, 48rem);
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0)));
    border-radius: 14px;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    color: var(--city-text-primary, var(--sun-text, var(--text-primary, #0f172a)));
    background: var(--city-surface, var(--sun-surface, var(--bg-surface-strong, #ffffff)));
    box-shadow: var(--city-shadow, var(--shadow-elevated, 0 24px 70px rgba(15, 23, 42, 0.22)));
}

.city-search-modal svg[b-zn3j7ln6o4] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.city-search-modal-head[b-zn3j7ln6o4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.city-search-modal-head .city-eyebrow[b-zn3j7ln6o4] {
    margin: 0 0 4px;
    color: var(--city-accent, var(--sun-blue, var(--accent, #2563eb)));
    font-size: 0.7rem;
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.city-search-modal-head h2[b-zn3j7ln6o4] {
    margin: 0;
    color: var(--city-text-primary, var(--sun-text, var(--text-primary, #0f172a)));
    font-size: clamp(1.18rem, 2vw, 1.5rem);
    font-weight: 780;
    line-height: 1.15;
}

.city-search-modal-close[b-zn3j7ln6o4] {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0)));
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--city-text-secondary, var(--sun-secondary, var(--text-secondary, #475569)));
    background: var(--city-surface-soft, var(--sun-surface-soft, var(--bg-surface-soft, #f8fafc)));
}

.city-search-modal-close:hover[b-zn3j7ln6o4],
.city-search-modal-close:focus-visible[b-zn3j7ln6o4] {
    color: var(--city-accent, var(--sun-blue, var(--accent, #2563eb)));
    border-color: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 36%, var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0))));
}

.city-search-modal-close svg[b-zn3j7ln6o4] {
    width: 1.1rem;
    height: 1.1rem;
}

.city-search-box[b-zn3j7ln6o4] {
    position: relative;
    margin: 0;
    display: block;
}

.city-search-box svg[b-zn3j7ln6o4] {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    transform: translateY(-50%);
    pointer-events: none;
}

.city-search-box input[b-zn3j7ln6o4] {
    width: 100%;
    height: 58px;
    padding: 0 42px;
    border: 1px solid var(--city-border-strong, var(--sun-border-strong, var(--border-soft, #cbd5e1)));
    border-radius: 12px;
    color: var(--city-text-primary, var(--sun-text, var(--text-primary, #0f172a)));
    background: var(--city-surface, var(--sun-surface, var(--bg-surface-strong, #ffffff)));
    font: inherit;
    font-size: 0.96rem;
    font-weight: 560;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.city-search-box input[b-zn3j7ln6o4]::placeholder {
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    opacity: 0.78;
}

.city-search-box input[b-zn3j7ln6o4]::-webkit-search-cancel-button {
    display: none;
    appearance: none;
}

.city-search-box input:focus[b-zn3j7ln6o4] {
    border-color: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 48%, var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0))));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 15%, transparent);
}

.city-search-clear[b-zn3j7ln6o4] {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-50%);
}

.city-search-clear:hover[b-zn3j7ln6o4],
.city-search-clear:focus-visible[b-zn3j7ln6o4] {
    color: var(--city-accent, var(--sun-blue, var(--accent, #2563eb)));
    background: var(--city-accent-soft, var(--sun-blue-soft, var(--accent-soft, #eaf2ff)));
}

.city-search-modal-meta[b-zn3j7ln6o4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    font-size: 0.82rem;
    font-weight: 650;
}

.city-search-modal-meta a[b-zn3j7ln6o4] {
    color: var(--city-accent, var(--sun-blue, var(--accent, #2563eb)));
    font-weight: 760;
    text-decoration: none;
}

.city-search-modal-results[b-zn3j7ln6o4] {
    min-height: 0;
    padding-right: 4px;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.city-search-group[b-zn3j7ln6o4] {
    margin: 0;
    padding: 0;
}

.city-search-group h3[b-zn3j7ln6o4] {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0)));
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.city-search-group ul[b-zn3j7ln6o4] {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    list-style: none;
}

.city-search-group li[b-zn3j7ln6o4] {
    min-width: 0;
    border-radius: 8px;
}

.city-search-group li.is-active[b-zn3j7ln6o4] {
    background: var(--city-accent-soft, var(--sun-blue-soft, var(--accent-soft, #eaf2ff)));
}

.city-search-group a[b-zn3j7ln6o4] {
    min-width: 0;
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--city-text-primary, var(--sun-text, var(--text-primary, #0f172a)));
    text-decoration: none;
}

.city-search-group a:hover[b-zn3j7ln6o4],
.city-search-group a:focus-visible[b-zn3j7ln6o4] {
    border-color: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 25%, var(--city-border, var(--sun-border, var(--border-soft, #e2e8f0))));
    background: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 8%, transparent);
}

.city-result-icon[b-zn3j7ln6o4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--city-accent, var(--sun-blue, var(--accent, #2563eb)));
    background: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--accent, #2563eb))) 10%, var(--city-surface, var(--sun-surface, var(--bg-surface-strong, #ffffff))));
    font-size: 1.05rem;
    line-height: 1;
}

.city-result-icon svg[b-zn3j7ln6o4] {
    width: 0.95rem;
    height: 0.95rem;
}

.city-result-flag[b-zn3j7ln6o4] {
    font-size: 1rem;
}

.city-result-copy[b-zn3j7ln6o4] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.city-result-copy strong[b-zn3j7ln6o4],
.city-result-copy small[b-zn3j7ln6o4] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-result-copy strong[b-zn3j7ln6o4] {
    font-size: 0.88rem;
    font-weight: 760;
}

.city-result-copy small[b-zn3j7ln6o4] {
    color: var(--city-text-secondary, var(--sun-secondary, var(--text-secondary, #475569)));
    font-size: 0.75rem;
    font-weight: 560;
}

.city-search-empty[b-zn3j7ln6o4] {
    margin: 0;
    padding: 14px 0;
    color: var(--city-text-muted, var(--sun-muted, var(--text-muted, #64748b)));
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 640px) {
    .city-search-modal-layer[b-zn3j7ln6o4] {
        padding: 10px;
        place-items: end center;
    }

    .city-search-modal[b-zn3j7ln6o4] {
        width: 100%;
        max-height: min(88dvh, 42rem);
        padding: 16px;
        border-radius: 14px 14px 0 0;
        gap: 12px;
    }

    .city-search-modal-head h2[b-zn3j7ln6o4] {
        font-size: 1.18rem;
    }

    .city-search-modal-close[b-zn3j7ln6o4] {
        width: 38px;
        height: 38px;
    }

    .city-search-box input[b-zn3j7ln6o4] {
        height: 54px;
        font-size: 0.92rem;
    }

    .city-search-modal-meta[b-zn3j7ln6o4] {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}
/* /Components/Pages/CityShareDialog.razor.rz.scp.css */
.city-share-modal-layer[b-ovg9ft9amf] {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2.5vw, 32px);
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: cityShareFadeIn-b-ovg9ft9amf 0.18s ease-out;
}

@keyframes cityShareFadeIn-b-ovg9ft9amf {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.city-share-modal[b-ovg9ft9amf] {
    position: relative;
    width: min(100%, 28rem);
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--city-border, rgba(148, 163, 184, 0.2));
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--city-text-primary, #0f172a);
    background: var(--city-surface, #ffffff);
    box-shadow: var(--city-shadow, 0 24px 70px rgba(15, 23, 42, 0.22));
    animation: cityShareScaleUp-b-ovg9ft9amf 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cityShareScaleUp-b-ovg9ft9amf {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.city-share-modal-head[b-ovg9ft9amf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.city-share-eyebrow[b-ovg9ft9amf] {
    margin: 0 0 3px;
    color: var(--city-accent, #3b82f6);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.city-share-modal-head h2[b-ovg9ft9amf] {
    margin: 0;
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 800;
    line-height: 1.15;
}

.city-share-modal-close[b-ovg9ft9amf] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--city-border, rgba(148, 163, 184, 0.2));
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--city-text-muted, #64748b);
    background: var(--city-surface-soft, rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.city-share-modal-close:hover[b-ovg9ft9amf] {
    color: var(--city-text-primary, #0f172a);
    background: var(--city-surface-soft, rgba(15, 23, 42, 0.08));
    transform: scale(1.04);
}

.city-share-modal-close svg[b-ovg9ft9amf] {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
}

.city-share-preview[b-ovg9ft9amf] {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--city-border, rgba(148, 163, 184, 0.15));
    background: var(--city-surface-soft, rgba(15, 23, 42, 0.03));
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.city-share-preview-time[b-ovg9ft9amf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.city-share-preview-time strong[b-ovg9ft9amf] {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: -0.01em;
    color: var(--city-text-primary, #0f172a);
    white-space: nowrap;
}

.city-share-preview-time span[b-ovg9ft9amf] {
    font-size: 0.82rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: var(--city-accent, #3b82f6);
    white-space: nowrap;
}

.city-share-preview-date span[b-ovg9ft9amf] {
    font-size: 0.84rem;
    color: var(--city-text-secondary, #64748b);
    white-space: nowrap;
}

.city-share-field-group[b-ovg9ft9amf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.city-share-label[b-ovg9ft9amf] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--city-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.city-share-box[b-ovg9ft9amf] {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--city-border, rgba(148, 163, 184, 0.24));
    border-radius: 12px;
    background: var(--city-surface-soft, rgba(15, 23, 42, 0.03));
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.city-share-box:focus-within[b-ovg9ft9amf] {
    border-color: var(--city-accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--city-accent-soft, rgba(59, 130, 246, 0.16));
}

.city-share-box input[b-ovg9ft9amf] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 0;
    outline: 0;
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--city-text-primary, #0f172a);
    background: transparent;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-share-copy-btn[b-ovg9ft9amf] {
    flex: 0 0 96px;
    width: 96px;
    min-width: 96px;
    justify-content: center;
    box-sizing: border-box;
    margin: 4px;
    padding: 7px 10px;
    border: 0;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    color: #ffffff;
    background: var(--city-accent, #3b82f6);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--city-accent, #3b82f6) 36%, transparent);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.city-share-copy-btn:hover[b-ovg9ft9amf] {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--city-accent, #3b82f6) 45%, transparent);
}

.city-share-copy-btn.is-copied[b-ovg9ft9amf] {
    background: #10b981;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}

@keyframes cityShareCopiedPop-b-ovg9ft9amf {
    0% {
        transform: scale(0.92);
    }
    60% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.city-share-copy-icon[b-ovg9ft9amf],
.city-share-check-icon[b-ovg9ft9amf] {
    width: 0.95rem;
    height: 0.95rem;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    flex-shrink: 0;
}

.city-share-social-row[b-ovg9ft9amf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.city-share-social-title[b-ovg9ft9amf] {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--city-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.city-share-social-grid[b-ovg9ft9amf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.city-share-social-btn[b-ovg9ft9amf] {
    padding: 10px 6px;
    border: 1px solid var(--city-border, rgba(148, 163, 184, 0.18));
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--city-text-primary, #0f172a);
    background: var(--city-surface-soft, rgba(15, 23, 42, 0.03));
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 680;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.city-share-social-btn svg[b-ovg9ft9amf] {
    width: 1.15rem;
    height: 1.15rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.city-share-social-btn:hover[b-ovg9ft9amf] {
    transform: translateY(-2px);
    border-color: var(--city-accent, #3b82f6);
    color: var(--city-accent, #3b82f6);
    background: var(--city-accent-soft, rgba(59, 130, 246, 0.1));
}

.city-share-social-btn.share-whatsapp:hover[b-ovg9ft9amf] {
    color: #25d366;
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.12);
}

.city-share-social-btn.share-twitter:hover[b-ovg9ft9amf] {
    color: #1d9bf0;
    border-color: #1d9bf0;
    background: rgba(29, 155, 240, 0.12);
}

.city-share-social-btn.share-email:hover[b-ovg9ft9amf] {
    color: #ea4335;
    border-color: #ea4335;
    background: rgba(234, 67, 53, 0.12);
}
/* /Components/Pages/CitySunMoonPage.razor.rz.scp.css */
.city-sun-moon-page[b-zxs2bzjjk0] {
    --sun-bg: var(--bg-page, #f8fbff);
    --sun-surface: var(--bg-surface-strong, #ffffff);
    --sun-surface-soft: var(--bg-surface-soft, #f8fbff);
    --sun-border: var(--border-soft, #e3eaf4);
    --sun-border-strong: rgba(148, 163, 184, 0.36);
    --sun-text: var(--text-primary, #0f172a);
    --sun-secondary: var(--text-secondary, #475569);
    --sun-muted: var(--text-muted, #64748b);
    --sun-faint: var(--text-muted, #64748b);
    --sun-blue: var(--accent, #2563eb);
    --sun-blue-soft: var(--accent-soft, #eaf2ff);
    --sun-yellow: var(--warning, #f59e0b);
    --sun-orange: #f97316;
    --sun-green: #12b76a;
    --sun-violet: #667eea;
    --sun-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
    --sun-card-radius: 10px;
    --sun-header-offset: var(--header-height, var(--header-h, 72px));
    min-height: 100dvh;
    background: var(--sun-bg);
    color: var(--sun-text);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-sun-moon-page[b-zxs2bzjjk0] {
    --sun-bg:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.11), transparent 27%),
        linear-gradient(180deg, #07111f 0%, #091526 54%, #0b182a 100%);
    --sun-surface: #0e1a2c;
    --sun-surface-soft: #122137;
    --sun-border: rgba(148, 163, 184, 0.18);
    --sun-border-strong: rgba(148, 163, 184, 0.28);
    --sun-text: #f1f5f9;
    --sun-secondary: #c3cedc;
    --sun-muted: #899aaf;
    --sun-faint: #8b9aae;
    --sun-blue: #60a5fa;
    --sun-blue-soft: rgba(96, 165, 250, 0.16);
    --sun-yellow: #fbbf24;
    --sun-green: #5eead4;
    --sun-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.city-sun-moon-page[b-zxs2bzjjk0],
.city-sun-moon-page *[b-zxs2bzjjk0] {
    box-sizing: border-box;
}

.sun-tool-shell svg[b-zxs2bzjjk0],
.sun-tool-shell[b-zxs2bzjjk0]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.sun-tool-shell[b-zxs2bzjjk0] {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: calc(var(--sun-header-offset) + clamp(16px, 1.8vw, 32px)) clamp(16px, 1.8vw, 32px) clamp(16px, 1.8vw, 32px);
}

.city-sun-moon-page[b-zxs2bzjjk0]  .city-tabs-card {
    margin-bottom: clamp(16px, 1.35vw, 22px);
}

.sun-actions[b-zxs2bzjjk0] {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    display: flex;
    gap: 10px;
}

.sun-actions button[b-zxs2bzjjk0],
.sun-card-head button[b-zxs2bzjjk0],
.sun-calendar-controls button[b-zxs2bzjjk0] {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--sun-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    text-shadow: none;
    backdrop-filter: blur(14px);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.sun-actions button:hover[b-zxs2bzjjk0],
.sun-card-head button:hover[b-zxs2bzjjk0],
.sun-calendar-controls button:hover[b-zxs2bzjjk0] {
    border-color: color-mix(in srgb, var(--sun-blue) 42%, var(--sun-border));
    background: color-mix(in srgb, var(--sun-blue) 7%, #ffffff);
    color: var(--sun-blue);
}

.sun-actions button:focus-visible[b-zxs2bzjjk0],
.sun-card-head button:focus-visible[b-zxs2bzjjk0],
.sun-calendar-controls button:focus-visible[b-zxs2bzjjk0],
.sun-calendar-link:focus-visible[b-zxs2bzjjk0] {
    outline: 3px solid color-mix(in srgb, var(--sun-blue) 28%, transparent);
    outline-offset: 2px;
}

.sun-actions .sun-action-icon[b-zxs2bzjjk0] {
    width: 40px;
    padding: 0;
}

.sun-actions button svg[b-zxs2bzjjk0],
.sun-card-head button svg[b-zxs2bzjjk0],
.sun-calendar-controls button svg[b-zxs2bzjjk0] {
    color: var(--sun-blue);
}

.sun-card-head button[b-zxs2bzjjk0],
.sun-calendar-controls button[b-zxs2bzjjk0] {
    border-radius: 10px;
    background: var(--sun-surface);
    color: var(--sun-text);
    box-shadow: var(--sun-shadow);
    backdrop-filter: none;
}

.sun-card-head button:hover[b-zxs2bzjjk0],
.sun-calendar-controls button:hover[b-zxs2bzjjk0] {
    background: color-mix(in srgb, var(--sun-blue) 7%, var(--sun-surface));
}

.sun-dashboard-grid[b-zxs2bzjjk0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.sun-primary-stack[b-zxs2bzjjk0],
.sun-side-stack[b-zxs2bzjjk0] {
    min-width: 0;
    display: grid;
    gap: clamp(16px, 1.4vw, 22px);
}

.sun-card[b-zxs2bzjjk0],
.sun-city-card[b-zxs2bzjjk0] {
    border: 1px solid var(--sun-border);
    border-radius: var(--sun-card-radius);
    background: var(--sun-surface);
    box-shadow: var(--sun-shadow);
}

.sun-city-card[b-zxs2bzjjk0] {
    position: relative;
    min-height: clamp(226px, 17vw, 240px);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--sun-border) 72%, transparent);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.84) 37%, rgba(255, 255, 255, 0.28) 66%, rgba(255, 255, 255, 0.08) 100%),
        var(--sun-city-image),
        linear-gradient(135deg, color-mix(in srgb, var(--sun-blue) 14%, #ffffff), #dcecff 52%, #ffffff);
    background-size: cover, cover, cover;
    background-position: center, center right, center;
}

.sun-city-card[b-zxs2bzjjk0]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--sun-blue) 10%, transparent), transparent 58%),
        radial-gradient(circle at 84% 28%, rgba(255, 199, 102, 0.28), transparent 12rem);
    pointer-events: none;
}

:root[data-theme="dark"] .sun-city-card[b-zxs2bzjjk0] {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.99) 0%, rgba(7, 17, 31, 0.9) 38%, rgba(7, 17, 31, 0.46) 68%, rgba(7, 17, 31, 0.24) 100%),
        var(--sun-city-image),
        linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
}

:root[data-theme="dark"] .sun-actions button[b-zxs2bzjjk0] {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(8, 21, 37, 0.88);
    color: #f8fbff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.sun-city-card-content[b-zxs2bzjjk0] {
    position: relative;
    z-index: 1;
    min-height: clamp(226px, 17vw, 240px);
    max-width: min(100%, 42rem);
    padding: clamp(22px, 2.5vw, 30px);
    padding-right: clamp(210px, 25vw, 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--sun-text);
    text-shadow: none;
}

.sun-hero-eyebrow[b-zxs2bzjjk0] {
    margin: 0 0 10px;
    color: var(--sun-blue);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sun-location-line[b-zxs2bzjjk0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sun-flag[b-zxs2bzjjk0] {
    width: 32px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 1.25rem;
    line-height: 1;
}

:root[data-theme="dark"] .sun-flag[b-zxs2bzjjk0] {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--city-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--city-text-primary);
}

.sun-location-line h1[b-zxs2bzjjk0] {
    margin: 0;
    min-width: 0;
    font-size: clamp(1.45rem, 1.8vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.sun-icon-button[b-zxs2bzjjk0] {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--sun-yellow);
    cursor: pointer;
}

.sun-hero-summary[b-zxs2bzjjk0] {
    max-width: 32rem;
    margin: 10px 0 0;
    color: var(--sun-secondary);
    font-size: 0.93rem;
    font-weight: 560;
    line-height: 1.45;
}

.sun-city-date-row[b-zxs2bzjjk0] {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: var(--sun-text);
    font-size: 0.9rem;
    font-weight: 610;
}

.sun-city-date-row span[b-zxs2bzjjk0] {
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--sun-blue-soft);
    color: var(--sun-blue);
    font-weight: 800;
    text-shadow: none;
}

.sun-weather-row[b-zxs2bzjjk0] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sun-text);
    font-size: 0.9rem;
    font-weight: 610;
}

.sun-weather-row svg[b-zxs2bzjjk0] {
    color: var(--sun-yellow);
}

.sun-weather-row strong[b-zxs2bzjjk0] {
    margin-left: 12px;
}

:root[data-theme="dark"] .sun-city-card-content[b-zxs2bzjjk0],
:root[data-theme="dark"] .sun-city-date-row[b-zxs2bzjjk0],
:root[data-theme="dark"] .sun-weather-row[b-zxs2bzjjk0] {
    color: #f8fbff;
}

:root[data-theme="dark"] .sun-hero-summary[b-zxs2bzjjk0] {
    color: #c3cedc;
}

.sun-card[b-zxs2bzjjk0] {
    padding: clamp(22px, 2vw, 28px);
}

.sun-card-head[b-zxs2bzjjk0] {
    min-height: 32px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sun-card-head h2[b-zxs2bzjjk0] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.sun-card-head button[b-zxs2bzjjk0],
.sun-calendar-controls button[b-zxs2bzjjk0] {
    margin-left: auto;
    min-height: 36px;
    padding-inline: 12px;
    font-size: 0.88rem;
}

.sun-info-dot[b-zxs2bzjjk0] {
    width: 15px;
    height: 15px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--sun-border-strong);
    border-radius: 999px;
    color: var(--sun-faint);
    font-size: 0.68rem;
    font-weight: 800;
}

.sun-arc-stage[b-zxs2bzjjk0] {
    position: relative;
    height: clamp(206px, 18vw, 236px);
    min-height: 0;
    display: grid;
    place-items: center;
}

.city-sun-moon-page .sun-arc-svg[b-zxs2bzjjk0] {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
}

.sun-arc-line[b-zxs2bzjjk0] {
    stroke: var(--sun-yellow);
    stroke-dasharray: 8 10;
    stroke-width: 2;
}

.sun-arc-shadow[b-zxs2bzjjk0] {
    stroke: color-mix(in srgb, var(--sun-muted) 26%, transparent);
    stroke-dasharray: 6 12;
}

.sun-arc-horizon[b-zxs2bzjjk0] {
    stroke: color-mix(in srgb, var(--sun-muted) 42%, var(--sun-surface));
    stroke-width: 2;
}

.sun-arc-sun[b-zxs2bzjjk0],
.sun-arc-event[b-zxs2bzjjk0] {
    fill: var(--sun-yellow);
    stroke: var(--sun-surface);
    stroke-width: 3;
}

.sun-arc-ray[b-zxs2bzjjk0] {
    stroke: var(--sun-yellow);
    stroke-width: 2;
}

.sun-arc-event.is-set[b-zxs2bzjjk0] {
    fill: var(--sun-orange);
}

.sun-daylength-center[b-zxs2bzjjk0] {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 260px);
    padding: 0 12px;
    display: grid;
    gap: 4px;
    text-align: center;
}

.sun-daylength-center span[b-zxs2bzjjk0],
.moon-phase-column span[b-zxs2bzjjk0] {
    color: var(--sun-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.sun-daylength-center strong[b-zxs2bzjjk0] {
    font-size: clamp(1.18rem, 1.7vw, 1.45rem);
    line-height: 1;
    letter-spacing: 0;
}

.sun-daylength-center small[b-zxs2bzjjk0] {
    color: var(--sun-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.sun-daylength-center small.is-longer[b-zxs2bzjjk0] {
    color: var(--sun-green);
}

.sun-daylength-center small.is-shorter[b-zxs2bzjjk0] {
    color: var(--danger, #ef4444);
}

.sun-event-grid[b-zxs2bzjjk0] {
    margin-top: -10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    text-align: center;
}

.sun-event-grid div[b-zxs2bzjjk0] {
    min-width: 0;
    display: grid;
    gap: 4px;
    align-content: start;
}

.sun-event-icon[b-zxs2bzjjk0] {
    width: 30px;
    height: 18px;
    margin: 0 auto 2px;
    display: inline-grid;
    place-items: center;
    color: var(--sun-yellow);
}

.sun-event-grid small[b-zxs2bzjjk0],
.moon-stat-grid dt[b-zxs2bzjjk0] {
    color: var(--sun-muted);
    font-size: 0.74rem;
}

.sun-event-grid strong[b-zxs2bzjjk0] {
    font-size: 0.92rem;
}

.sun-event-grid em[b-zxs2bzjjk0] {
    color: var(--sun-muted);
    font-size: 0.72rem;
    font-style: normal;
}

.sun-moon-layout[b-zxs2bzjjk0] {
    display: grid;
    grid-template-columns: 142px minmax(220px, 1fr) minmax(168px, 200px);
    grid-template-areas:
        "disc phase orbit"
        "stats stats orbit";
    gap: 12px clamp(20px, 4vw, 42px);
    align-items: center;
}

.moon-visual-column[b-zxs2bzjjk0] {
    display: contents;
}

.moon-disc[b-zxs2bzjjk0],
.moon-mini[b-zxs2bzjjk0] {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 38% 31%, rgba(255, 255, 255, 0.72) 0 4%, transparent 4.7%),
        radial-gradient(circle at 58% 37%, rgba(49, 58, 73, 0.22) 0 8%, transparent 8.8%),
        radial-gradient(circle at 38% 64%, rgba(35, 43, 55, 0.28) 0 11%, transparent 11.8%),
        radial-gradient(circle at 68% 66%, rgba(21, 27, 36, 0.2) 0 9%, transparent 10%),
        radial-gradient(circle at 48% 50%, #f7f8fb 0%, #cfd5de 46%, #8f99a9 74%, #596272 100%);
    box-shadow:
        inset -18px -8px 28px rgba(20, 26, 35, 0.34),
        inset 14px 8px 24px rgba(255, 255, 255, 0.32),
        0 16px 28px rgba(15, 23, 42, 0.12);
}

.moon-disc[b-zxs2bzjjk0] {
    grid-area: disc;
    width: 128px;
    aspect-ratio: 1;
    border-radius: 999px;
}

.moon-disc[b-zxs2bzjjk0]::before,
.moon-mini[b-zxs2bzjjk0]::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 31% 76%, rgba(255, 255, 255, 0.24) 0 4%, transparent 4.7%),
        radial-gradient(circle at 72% 28%, rgba(17, 24, 39, 0.22) 0 6%, transparent 6.8%),
        radial-gradient(circle at 25% 42%, rgba(17, 24, 39, 0.18) 0 12%, transparent 12.8%);
    mix-blend-mode: multiply;
    opacity: 0.62;
}

.moon-disc[b-zxs2bzjjk0]::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 30% 30%, transparent 0 34%, rgba(13, 18, 27, 0.1) 72%, rgba(13, 18, 27, 0.28) 100%),
        linear-gradient(90deg, transparent 0 58%, rgba(13, 18, 27, 0.18) 100%);
    opacity: 0.9;
}

.moon-mini[b-zxs2bzjjk0]::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, transparent 0 var(--moon-illumination), rgba(12, 18, 30, 0.86) var(--moon-illumination) 100%);
    box-shadow: inset 10px 0 20px rgba(255, 255, 255, 0.12);
}

.moon-stat-grid[b-zxs2bzjjk0] {
    grid-area: stats;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 22px;
}

.moon-stat-grid div[b-zxs2bzjjk0] {
    min-width: 0;
}

.moon-stat-grid dt[b-zxs2bzjjk0],
.moon-stat-grid dd[b-zxs2bzjjk0] {
    margin: 0;
}

.moon-stat-grid dd[b-zxs2bzjjk0] {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 800;
}

.moon-phase-column[b-zxs2bzjjk0] {
    grid-area: phase;
    min-width: 0;
}

.moon-phase-column h3[b-zxs2bzjjk0] {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 800;
}

.moon-phase-column strong[b-zxs2bzjjk0] {
    display: block;
    margin: 5px 0 11px;
    font-size: 1.05rem;
}

.moon-progress[b-zxs2bzjjk0] {
    width: min(100%, 224px);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sun-border) 72%, var(--sun-surface));
}

.moon-progress span[b-zxs2bzjjk0] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--sun-blue);
}

.moon-orbit-column[b-zxs2bzjjk0] {
    grid-area: orbit;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.city-sun-moon-page .moon-orbit[b-zxs2bzjjk0] {
    width: min(100%, 150px);
    height: auto;
}

.moon-orbit-ring[b-zxs2bzjjk0] {
    stroke: color-mix(in srgb, var(--sun-muted) 28%, var(--sun-surface));
    stroke-dasharray: 4 6;
}

.moon-orbit-dot[b-zxs2bzjjk0] {
    fill: var(--sun-blue);
    stroke: var(--sun-surface);
    stroke-width: 2.2;
}

.moon-orbit text[b-zxs2bzjjk0] {
    fill: var(--sun-muted);
    stroke: none;
    font-size: 12px;
    font-weight: 800;
}

.moon-orbit-moon[b-zxs2bzjjk0] {
    fill: var(--sun-text);
    stroke: var(--sun-text);
    transform: scale(0.82);
    transform-box: fill-box;
    transform-origin: center;
}

.moon-rise-set[b-zxs2bzjjk0] {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--sun-muted);
    font-size: 0.78rem;
}

.moon-rise-set span[b-zxs2bzjjk0] {
    display: grid;
    gap: 3px;
}

.moon-rise-set svg[b-zxs2bzjjk0] {
    color: var(--sun-blue);
}

.moon-rise-set strong[b-zxs2bzjjk0] {
    color: var(--sun-text);
    font-size: 0.88rem;
}

.sun-detail-list[b-zxs2bzjjk0],
.sun-compact-list[b-zxs2bzjjk0] {
    margin: 0;
    display: grid;
}

.sun-detail-list div[b-zxs2bzjjk0],
.sun-compact-list div[b-zxs2bzjjk0] {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--sun-border);
}

.sun-detail-list div:last-child[b-zxs2bzjjk0],
.sun-compact-list div:last-child[b-zxs2bzjjk0] {
    border-bottom: 0;
}

.sun-detail-list dt[b-zxs2bzjjk0],
.sun-detail-list dd[b-zxs2bzjjk0],
.sun-compact-list dt[b-zxs2bzjjk0],
.sun-compact-list dd[b-zxs2bzjjk0] {
    margin: 0;
}

.sun-detail-list dt[b-zxs2bzjjk0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sun-text);
    font-size: 0.9rem;
    font-weight: 650;
}

.sun-detail-list dd[b-zxs2bzjjk0],
.sun-compact-list dd[b-zxs2bzjjk0] {
    color: var(--sun-text);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.sun-compact-list dt[b-zxs2bzjjk0] {
    color: var(--sun-text);
    font-size: 0.88rem;
    font-weight: 650;
}

.sun-row-icon[b-zxs2bzjjk0] {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
}

.sun-row-icon.is-first[b-zxs2bzjjk0],
.sun-row-icon.is-rise[b-zxs2bzjjk0],
.sun-row-icon.is-noon[b-zxs2bzjjk0],
.sun-row-icon.is-length[b-zxs2bzjjk0],
.sun-row-icon.is-azimuth[b-zxs2bzjjk0] {
    color: var(--sun-yellow);
}

.sun-row-icon.is-set[b-zxs2bzjjk0],
.sun-row-icon.is-last[b-zxs2bzjjk0] {
    color: var(--sun-orange);
}

.sun-row-icon.is-moonrise[b-zxs2bzjjk0],
.sun-row-icon.is-moonset[b-zxs2bzjjk0],
.sun-row-icon.is-declination[b-zxs2bzjjk0] {
    color: var(--sun-violet);
}

.sun-row-icon.is-altitude[b-zxs2bzjjk0],
.sun-row-icon.is-right-ascension[b-zxs2bzjjk0] {
    color: var(--sun-green);
}

.sun-calendar-link:hover[b-zxs2bzjjk0] {
    color: color-mix(in srgb, var(--sun-blue) 78%, var(--sun-text));
}

.sun-chart-card[b-zxs2bzjjk0],
.sun-calendar-card[b-zxs2bzjjk0] {
    margin-top: clamp(16px, 1.4vw, 22px);
}

.sun-chart-card[b-zxs2bzjjk0] {
    padding: 18px clamp(24px, 2vw, 30px) 15px;
}

.sun-chart-card .sun-card-head[b-zxs2bzjjk0] {
    margin-bottom: 4px;
}

.sun-chart-card .sun-card-head button[b-zxs2bzjjk0] {
    min-height: 34px;
    padding-inline: 16px;
    border-radius: 8px;
}

.sun-chart-frame[b-zxs2bzjjk0] {
    overflow-x: auto;
    padding-top: 0;
    scrollbar-width: thin;
}

.sun-chart-frame svg[b-zxs2bzjjk0] {
    width: 100%;
    min-width: 720px;
    height: clamp(148px, 11.8vw, 166px);
    display: block;
}

.sun-chart-grid[b-zxs2bzjjk0],
.sun-chart-vgrid[b-zxs2bzjjk0] {
    stroke: color-mix(in srgb, var(--sun-border) 78%, var(--sun-surface));
    stroke-width: 1;
}

.sun-chart-vgrid[b-zxs2bzjjk0] {
    opacity: 0.42;
}

.sun-chart-fill[b-zxs2bzjjk0] {
    fill: color-mix(in srgb, var(--sun-yellow) 15%, transparent);
    stroke: none;
}

.sun-chart-line[b-zxs2bzjjk0] {
    stroke: var(--sun-yellow);
    stroke-width: 1.55;
}

.sun-chart-rise[b-zxs2bzjjk0] {
    fill: var(--sun-green);
    stroke: var(--sun-green);
}

.sun-chart-noon-disc[b-zxs2bzjjk0] {
    fill: var(--sun-yellow);
    stroke: var(--sun-surface);
    stroke-width: 2.5;
}

.sun-chart-noon-ray[b-zxs2bzjjk0] {
    fill: none;
    stroke: var(--sun-yellow);
    stroke-width: 1.7;
}

.sun-chart-set[b-zxs2bzjjk0] {
    fill: var(--danger, #ef4444);
    stroke: var(--danger, #ef4444);
}

.sun-chart-frame text[b-zxs2bzjjk0] {
    fill: var(--sun-muted);
    stroke: none;
    font-size: 10px;
    font-weight: 700;
}

.sun-chart-legend[b-zxs2bzjjk0] {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 5.2vw, 64px);
    color: var(--sun-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.sun-chart-legend span[b-zxs2bzjjk0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sun-chart-legend i[b-zxs2bzjjk0] {
    position: relative;
    width: 16px;
    height: 2px;
    display: inline-block;
    border-radius: 999px;
}

.sun-chart-legend i[b-zxs2bzjjk0]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    content: "";
    background: currentColor;
    transform: translate(-50%, -50%);
}

.sun-chart-legend .is-path[b-zxs2bzjjk0],
.sun-chart-legend .is-noon[b-zxs2bzjjk0] {
    background: var(--sun-yellow);
    color: var(--sun-yellow);
}

.sun-chart-legend .is-rise[b-zxs2bzjjk0] {
    background: var(--sun-green);
    color: var(--sun-green);
}

.sun-chart-legend .is-set[b-zxs2bzjjk0] {
    background: var(--danger, #ef4444);
    color: var(--danger, #ef4444);
}

.sun-calendar-card .sun-card-head[b-zxs2bzjjk0] {
    align-items: center;
    margin-bottom: 18px;
}

.sun-calendar-controls[b-zxs2bzjjk0] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sun-calendar-controls .sun-calendar-month[b-zxs2bzjjk0] {
    min-width: 116px;
    gap: 8px;
    font-weight: 780;
}

.sun-calendar-controls button[b-zxs2bzjjk0] {
    margin-left: 0;
    min-width: 34px;
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.sun-calendar-grid[b-zxs2bzjjk0] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 20px;
}

.sun-calendar-day[b-zxs2bzjjk0] {
    min-width: 0;
    min-height: 146px;
    padding: 10px 10px 9px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid var(--sun-border);
    border-radius: 6px;
    background: var(--sun-surface);
    text-align: center;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.sun-calendar-day:hover[b-zxs2bzjjk0] {
    border-color: color-mix(in srgb, var(--sun-blue) 28%, var(--sun-border));
    background: color-mix(in srgb, var(--sun-blue) 4%, var(--sun-surface));
    transform: translateY(-1px);
}

.sun-calendar-day.is-active[b-zxs2bzjjk0] {
    border-color: var(--sun-blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun-blue) 88%, transparent), 0 8px 22px rgba(37, 99, 235, 0.08);
}

.sun-calendar-day > span[b-zxs2bzjjk0] {
    color: var(--sun-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.sun-calendar-day svg[b-zxs2bzjjk0] {
    width: 19px;
    height: 19px;
    color: var(--sun-yellow);
}

.sun-calendar-day strong[b-zxs2bzjjk0],
.sun-calendar-day small[b-zxs2bzjjk0],
.sun-calendar-day em[b-zxs2bzjjk0] {
    color: var(--sun-text);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 760;
    line-height: 1.25;
}

.sun-calendar-day small[b-zxs2bzjjk0],
.sun-calendar-day em[b-zxs2bzjjk0] {
    color: var(--sun-muted);
}

.moon-mini[b-zxs2bzjjk0] {
    width: 36px;
    aspect-ratio: 1;
    border-radius: 999px;
    margin-top: 4px;
    margin-bottom: 1px;
}

.sun-calendar-link[b-zxs2bzjjk0] {
    width: max-content;
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sun-blue);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

@media (max-width: 1180px) {
    .sun-dashboard-grid[b-zxs2bzjjk0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sun-side-stack[b-zxs2bzjjk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {
    .sun-tool-shell[b-zxs2bzjjk0] {
        padding-inline: 16px;
    }

    .sun-actions[b-zxs2bzjjk0] {
        top: 14px;
        right: 14px;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .sun-actions button[b-zxs2bzjjk0] {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 0.78rem;
    }

    .sun-city-card[b-zxs2bzjjk0] {
        min-height: 300px;
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.98) 100%),
            var(--sun-city-image),
            linear-gradient(135deg, color-mix(in srgb, var(--sun-blue) 14%, #ffffff), #dcecff 52%, #ffffff);
        background-position: center top, center top, center;
    }

    :root[data-theme="dark"] .sun-city-card[b-zxs2bzjjk0] {
        background-image:
            linear-gradient(180deg, rgba(7, 17, 31, 0.36) 0%, rgba(7, 17, 31, 0.9) 44%, rgba(7, 17, 31, 0.99) 100%),
            var(--sun-city-image),
            linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
    }

    .sun-city-card-content[b-zxs2bzjjk0] {
        min-height: 300px;
        max-width: none;
        padding: 84px 18px 18px;
        justify-content: end;
    }

    .sun-side-stack[b-zxs2bzjjk0] {
        grid-template-columns: 1fr;
    }

    .sun-moon-layout[b-zxs2bzjjk0] {
        grid-template-columns: 132px minmax(0, 1fr);
        grid-template-areas:
            "disc phase"
            "stats stats"
            "orbit orbit";
        justify-content: center;
        row-gap: 18px;
    }

    .moon-stat-grid[b-zxs2bzjjk0] {
        width: 100%;
        max-width: 560px;
    }

    .sun-calendar-card .sun-card-head[b-zxs2bzjjk0] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .sun-calendar-controls[b-zxs2bzjjk0] {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .sun-calendar-grid[b-zxs2bzjjk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .sun-tool-shell[b-zxs2bzjjk0] {
        padding-top: calc(var(--header-height, var(--header-h, 72px)) + 22px);
        padding-inline: 12px;
    }

    .sun-actions[b-zxs2bzjjk0] {
        right: 18px;
        left: 18px;
        justify-content: flex-end;
    }

    .sun-actions button[b-zxs2bzjjk0] {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 0;
        gap: 0;
    }

    .sun-actions .sun-action-icon[b-zxs2bzjjk0] {
        flex-basis: 44px;
        padding: 0;
    }

    .sun-card[b-zxs2bzjjk0] {
        padding: 16px;
    }

    .sun-location-line h1[b-zxs2bzjjk0] {
        font-size: 1.35rem;
        white-space: normal;
    }

    .sun-city-date-row[b-zxs2bzjjk0],
    .sun-weather-row[b-zxs2bzjjk0] {
        font-size: 0.84rem;
    }

    .sun-event-grid[b-zxs2bzjjk0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .sun-event-grid strong[b-zxs2bzjjk0],
    .sun-event-grid em[b-zxs2bzjjk0],
    .sun-event-grid small[b-zxs2bzjjk0] {
        font-size: 0.72rem;
    }

    .sun-arc-stage[b-zxs2bzjjk0] {
        height: 214px;
    }

    .sun-arc-svg[b-zxs2bzjjk0] {
        min-height: 0;
    }

    .sun-chart-frame svg[b-zxs2bzjjk0] {
        min-width: 720px;
    }

    .sun-chart-frame text[b-zxs2bzjjk0] {
        font-size: 10px;
    }

    .sun-moon-layout[b-zxs2bzjjk0] {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "disc phase"
            "stats stats"
            "orbit orbit";
        justify-items: stretch;
        text-align: left;
    }

    .moon-phase-column[b-zxs2bzjjk0] {
        width: 100%;
        max-width: none;
        align-self: center;
    }

    .moon-stat-grid[b-zxs2bzjjk0] {
        max-width: 330px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
    }

    .sun-daylength-center[b-zxs2bzjjk0] {
        top: 61%;
        width: min(86%, 240px);
        padding: 7px 10px;
    }

    .sun-daylength-center strong[b-zxs2bzjjk0] {
        font-size: 1.28rem;
    }

    .sun-detail-list dt[b-zxs2bzjjk0],
    .sun-detail-list dd[b-zxs2bzjjk0],
    .sun-compact-list dt[b-zxs2bzjjk0],
    .sun-compact-list dd[b-zxs2bzjjk0] {
        font-size: 0.82rem;
    }

    .sun-detail-list div[b-zxs2bzjjk0],
    .sun-compact-list div[b-zxs2bzjjk0] {
        gap: 10px;
    }

    .moon-rise-set[b-zxs2bzjjk0] {
        flex-direction: row;
        align-items: center;
        text-align: center;
    }

    .moon-disc[b-zxs2bzjjk0] {
        width: 112px;
    }

    .moon-stat-grid[b-zxs2bzjjk0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 300px;
    }

    .moon-phase-column[b-zxs2bzjjk0] {
        width: 100%;
    }

    .sun-calendar-grid[b-zxs2bzjjk0] {
        grid-template-columns: 1fr;
    }

    .sun-calendar-day[b-zxs2bzjjk0] {
        min-height: 76px;
        padding: 10px 12px;
        grid-template-columns: minmax(64px, 0.8fr) auto minmax(96px, 1fr) 42px;
        grid-template-rows: auto auto;
        align-items: center;
        align-content: center;
        justify-items: start;
        gap: 4px 10px;
        text-align: left;
    }

    .sun-calendar-day > span[b-zxs2bzjjk0] {
        grid-column: 1;
        grid-row: 1;
    }

    .sun-calendar-day svg[b-zxs2bzjjk0] {
        grid-column: 2;
        grid-row: 1;
        width: 18px;
        height: 18px;
    }

    .sun-calendar-day strong[b-zxs2bzjjk0] {
        grid-column: 3;
        grid-row: 1;
    }

    .sun-calendar-day small[b-zxs2bzjjk0] {
        grid-column: 3;
        grid-row: 2;
    }

    .sun-calendar-day .moon-mini[b-zxs2bzjjk0] {
        grid-column: 4;
        grid-row: 1 / span 2;
        justify-self: end;
    }

    .sun-calendar-day em[b-zxs2bzjjk0] {
        grid-column: 1;
        grid-row: 2;
    }

    .moon-mini[b-zxs2bzjjk0] {
        width: 34px;
    }
}
/* /Components/Pages/CityTabs.razor.rz.scp.css */
.city-tabs-card[b-2s4iqtpmte] {
    border: 1px solid var(--city-border, var(--sun-border, var(--weather-border, #e3eaf4)));
    border-radius: 8px;
    padding: 6px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--city-surface, var(--sun-surface, var(--weather-surface, #ffffff))) 96%, #ffffff),
            color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb))) 4%, var(--city-surface, var(--sun-surface, var(--weather-surface, #ffffff)))));
    box-shadow:
        var(--city-shadow-soft, var(--sun-shadow, var(--weather-shadow, 0 8px 24px rgba(15, 23, 42, 0.055)))),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

:root[data-theme="dark"] .city-tabs-card[b-2s4iqtpmte] {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #0c1829 92%, #1e293b),
            color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--weather-blue, #60a5fa))) 8%, #0c1829));
    box-shadow:
        var(--city-shadow-soft, var(--sun-shadow, var(--weather-shadow, 0 10px 28px rgba(0, 0, 0, 0.22)))),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.city-tabs[b-2s4iqtpmte] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.city-tabs[b-2s4iqtpmte]::-webkit-scrollbar {
    display: none;
}

.city-tab[b-2s4iqtpmte] {
    position: relative;
    min-height: 50px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--city-text-secondary, var(--sun-secondary, var(--weather-secondary, #475569)));
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 720;
    text-decoration: none;
    white-space: nowrap;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.city-tab[b-2s4iqtpmte]::after {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    content: "";
    background: transparent;
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.city-tab:hover[b-2s4iqtpmte],
.city-tab:focus-visible[b-2s4iqtpmte] {
    color: var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb)));
    background: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb))) 7%, transparent);
}

.city-tab.is-active[b-2s4iqtpmte] {
    color: var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb)));
    background: color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb))) 12%, var(--city-surface, var(--sun-surface, var(--weather-surface, #ffffff))));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb))) 13%, transparent);
}

.city-tab.is-active[b-2s4iqtpmte]::after {
    background: linear-gradient(90deg, var(--city-accent, var(--sun-blue, var(--weather-blue, #2563eb))), var(--city-warning, var(--sun-yellow, var(--weather-yellow, #f59e0b))));
    opacity: 1;
    transform: scaleX(1);
}

.city-tab.is-disabled[b-2s4iqtpmte] {
    opacity: 0.55;
    cursor: not-allowed;
}

.city-tab svg[b-2s4iqtpmte] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.city-tab-chevron[b-2s4iqtpmte] {
    width: 0.8rem;
    height: 0.8rem;
}

@media (max-width: 767px) {
    .city-tab[b-2s4iqtpmte] {
        min-height: 48px;
        padding-inline: 13px;
    }
}
/* /Components/Pages/CityTimePage.razor.rz.scp.css */
.city-time-page[b-pl73v57c4h] {
    --city-bg-page: var(--bg-page, #f7faff);
    --city-surface: var(--bg-surface-strong, #ffffff);
    --city-surface-soft: #f8fbff;
    --city-surface-glass: rgba(255, 255, 255, 0.84);
    --city-border: var(--border-soft, #e3eaf4);
    --city-border-strong: rgba(148, 163, 184, 0.36);
    --city-text-primary: var(--text-primary, #0f172a);
    --city-text-secondary: var(--text-secondary, #475569);
    --city-text-muted: var(--text-muted, #64748b);
    --city-accent: var(--accent, #2563eb);
    --city-accent-hover: var(--accent-hover, #1d4ed8);
    --city-accent-soft: var(--accent-soft, #eaf2ff);
    --city-warning: var(--warning, #f59e0b);
    --city-warning-soft: var(--warning-soft, #fef3c7);
    --city-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
    --city-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.055);
    --city-header-offset: var(--header-height, var(--header-h, 72px));
    min-height: 100dvh;
    color: var(--city-text-primary);
    background: var(--city-bg-page);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h] {
    --city-bg-page:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.11), transparent 27%),
        linear-gradient(180deg, #07111f 0%, #091526 54%, #0b182a 100%);
    --city-surface: #0e1a2c;
    --city-surface-soft: #122137;
    --city-surface-glass: rgba(9, 22, 39, 0.88);
    --city-border: rgba(148, 163, 184, 0.18);
    --city-border-strong: rgba(148, 163, 184, 0.28);
    --city-text-primary: #f1f5f9;
    --city-text-secondary: #c3cedc;
    --city-text-muted: #899aaf;
    --city-accent: #60a5fa;
    --city-accent-hover: #93c5fd;
    --city-accent-soft: rgba(96, 165, 250, 0.16);
    --city-warning: #fbbf24;
    --city-warning-soft: rgba(251, 191, 36, 0.14);
    --city-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
    --city-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.city-time-page[b-pl73v57c4h],
.city-time-page *[b-pl73v57c4h] {
    box-sizing: border-box;
}

.city-time-page svg[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* The page-level icon defaults must not resize the shared header artwork. */
.city-time-page[b-pl73v57c4h]  .brand-mark {
    width: 2.45rem;
    height: 1.65rem;
}

.city-time-page[b-pl73v57c4h]  .brand-mark .brand-logo-svg {
    width: 100%;
    height: 100%;
}

.city-page-layout[b-pl73v57c4h] {
    width: 100%;
    max-width: 1440px;
    min-height: calc(100dvh - var(--city-header-offset));
    margin-inline: auto;
    padding: calc(var(--city-header-offset) + clamp(16px, 1.8vw, 32px)) clamp(16px, 1.8vw, 32px) clamp(16px, 1.8vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.city-main-column[b-pl73v57c4h],
.city-overview-grid[b-pl73v57c4h],
.city-right-rail[b-pl73v57c4h] {
    min-width: 0;
}

.city-main-column[b-pl73v57c4h] {
    display: grid;
    gap: clamp(16px, 1.4vw, 22px);
}

.city-right-rail[b-pl73v57c4h] {
    position: static;
    align-self: start;
    max-height: none;
    overflow: visible;
}

.city-right-rail[b-pl73v57c4h] {
    display: grid;
    gap: clamp(16px, 1.2vw, 20px);
}

.city-content-card[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-hero-card,
.city-time-page[b-pl73v57c4h]  .city-side-card {
    border: 1px solid var(--city-border);
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.city-time-page[b-pl73v57c4h]  .city-search-box {
    position: relative;
    margin: 0;
    display: block;
}

.city-time-page[b-pl73v57c4h]  .city-search-box svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 1rem;
    height: 1rem;
    color: var(--city-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-box input {
    width: 100%;
    height: 52px;
    padding: 0 42px 0 42px;
    border: 1px solid var(--city-border-strong);
    border-radius: 12px;
    color: var(--city-text-primary);
    background: var(--city-surface);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 560;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.city-time-page[b-pl73v57c4h]  .city-search-box input::-webkit-search-cancel-button {
    display: none;
    appearance: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-box input:focus {
    border-color: color-mix(in srgb, var(--city-accent) 48%, var(--city-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--city-accent) 15%, transparent);
}

.city-time-page[b-pl73v57c4h]  .city-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    color: var(--city-text-muted);
    background: transparent;
    font: inherit;
    font-size: 1rem;
    transform: translateY(-50%);
}

.city-time-page[b-pl73v57c4h]  .city-search-clear:hover {
    color: var(--city-accent);
    background: var(--city-accent-soft);
}

.city-time-page[b-pl73v57c4h]  .city-card-head a,
.city-card-head a[b-pl73v57c4h],
.city-card-link[b-pl73v57c4h] {
    color: var(--city-accent);
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-group {
    margin-bottom: 18px;
}

.city-time-page[b-pl73v57c4h]  .city-search-group h2 {
    margin: 0 0 10px;
    padding-top: 1px;
    border-top: 1px solid var(--city-border);
    color: var(--city-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.city-time-page[b-pl73v57c4h]  .city-search-group ul {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    list-style: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-group li {
    min-width: 0;
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
}

.city-time-page[b-pl73v57c4h]  .city-search-group li.is-active {
    background: var(--city-accent-soft);
}

.city-time-page[b-pl73v57c4h]  .city-search-group a {
    min-width: 0;
    min-height: 50px;
    padding: 8px 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--city-text-primary);
    text-decoration: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-group a:hover,
.city-time-page[b-pl73v57c4h]  .city-search-group a:focus-visible {
    background: color-mix(in srgb, var(--city-accent) 8%, transparent);
}

.city-time-page[b-pl73v57c4h]  .city-result-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
    font-size: 1.05rem;
    line-height: 1;
}

.city-time-page[b-pl73v57c4h]  .city-result-flag {
    font-size: 1rem;
}

.city-time-page[b-pl73v57c4h]  .city-result-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.city-time-page[b-pl73v57c4h]  .city-result-copy strong,
.city-time-page[b-pl73v57c4h]  .city-result-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-time-page[b-pl73v57c4h]  .city-result-copy strong {
    font-size: 0.88rem;
    font-weight: 760;
}

.city-time-page[b-pl73v57c4h]  .city-result-copy small {
    color: var(--city-text-secondary);
    font-size: 0.75rem;
    font-weight: 560;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-layer {
    z-index: 60;
    padding: clamp(12px, 2vw, 28px);
    overflow: hidden;
    overscroll-behavior: contain;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal {
    width: min(100%, 46rem);
    max-height: min(86dvh, 48rem);
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid var(--city-border);
    border-radius: 16px;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    color: var(--city-text-primary);
    background: var(--city-surface);
    box-shadow: var(--city-shadow);
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-head .city-eyebrow {
    margin-bottom: 4px;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-head h2 {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.15;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-close {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--city-text-secondary);
    background: var(--city-surface-soft);
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-close:hover {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 36%, var(--city-border));
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-box {
    margin: 0;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-box input {
    height: 58px;
    border-radius: 14px;
    font-size: 1rem;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--city-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-meta a {
    color: var(--city-accent);
    font-weight: 760;
    text-decoration: none;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal-results {
    min-height: 0;
    padding-right: 4px;
    display: grid;
    align-content: start;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group {
    margin: 0;
    padding: 0;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group h3 {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--city-border);
    color: var(--city-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group ul {
    grid-template-columns: 1fr;
    gap: 6px;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group li {
    grid-template-columns: 1fr;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group a {
    min-height: 54px;
    padding: 9px 10px;
    border: 1px solid transparent;
}

.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group a:hover,
.city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-group a:focus-visible {
    border-color: color-mix(in srgb, var(--city-accent) 25%, var(--city-border));
}

.city-time-page[b-pl73v57c4h]  .city-search-empty {
    margin: 0;
    padding: 14px 0;
    color: var(--city-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.city-time-page[b-pl73v57c4h]  .city-hero-card {
    border-radius: 10px;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 36%, rgba(255, 255, 255, 0.18) 62%, rgba(255, 255, 255, 0) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, color-mix(in srgb, var(--city-hero-accent, var(--city-accent)) 16%, #ffffff), #d9ecff 52%, #ffffff);
    background-position: center, center right, center;
    background-size: cover, cover, cover;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-card {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.99) 0%, rgba(7, 17, 31, 0.92) 39%, rgba(7, 17, 31, 0.42) 68%, rgba(7, 17, 31, 0.22) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
}

.city-time-page[b-pl73v57c4h]  .city-hero-card::after {
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 52%;
    content: "";
    background: linear-gradient(0deg, color-mix(in srgb, var(--city-accent) 11%, transparent), transparent);
}

.city-time-page[b-pl73v57c4h]  .city-hero-copy {
    gap: 11px;
}

.city-time-page[b-pl73v57c4h]  .city-hero-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.city-time-page[b-pl73v57c4h]  .city-hero-flag {
    flex: 0 0 auto;
    width: 32px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 1.25rem;
    line-height: 1;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-flag {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--city-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--city-text-primary);
}

.city-time-page[b-pl73v57c4h]  .city-hero-title-row h1 {
    min-width: 0;
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1.45rem, 1.8vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.city-time-page[b-pl73v57c4h]  .city-hero-favorite {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--city-warning);
    background: transparent;
}

.city-time-page[b-pl73v57c4h]  .city-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--city-text-secondary);
    font-size: 0.89rem;
    font-weight: 620;
}

.city-time-page[b-pl73v57c4h]  .city-hero-badge,
.city-time-page[b-pl73v57c4h]  .city-hero-meridiem,
.city-change-badge[b-pl73v57c4h] {
    border-radius: 8px;
    color: var(--city-accent);
    background: var(--city-accent-soft);
    font-weight: 800;
}

.city-time-page[b-pl73v57c4h]  .city-hero-badge {
    padding: 3px 8px;
    font-size: 0.78rem;
}

.city-time-page[b-pl73v57c4h]  .city-hero-time {
    display: flex;
    align-items: baseline;
    gap: 5px;
    width: max-content;
    max-width: 100%;
    color: #020b21;
    font-variant-numeric: tabular-nums;
    line-height: 0.92;
    white-space: nowrap;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-time {
    color: #f8fbff;
}

.city-time-page[b-pl73v57c4h]  .city-hero-time-main {
    font-size: clamp(2.65rem, 4.1vw, 4rem);
    font-weight: 800;
    letter-spacing: 0;
}

.city-time-page[b-pl73v57c4h]  .city-hero-time-seconds {
    font-size: clamp(1.05rem, 1.45vw, 1.45rem);
    font-weight: 780;
}

.city-time-page[b-pl73v57c4h]  .city-hero-meridiem {
    align-self: center;
    padding: 5px 8px;
    font-size: 0.78rem;
    line-height: 1;
}

.city-time-page[b-pl73v57c4h]  .city-hero-date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    color: var(--city-text-primary);
    font-size: 0.88rem;
    font-weight: 610;
}

.city-time-page[b-pl73v57c4h]  .city-daylight-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.city-time-page[b-pl73v57c4h]  .city-daylight-status.is-daytime svg {
    color: var(--city-warning);
}

.city-time-page[b-pl73v57c4h]  .city-daylight-status.is-nighttime svg {
    color: var(--city-accent);
}

.city-time-page[b-pl73v57c4h]  .city-hero-actions {
    top: 24px;
    right: 24px;
}

.city-time-page[b-pl73v57c4h]  .city-hero-actions button,
.city-time-page[b-pl73v57c4h]  .city-hero-actions a {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--city-border);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--city-text-primary);
    background: var(--city-surface-glass);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    text-decoration: none;
    backdrop-filter: blur(14px);
}

.city-time-page[b-pl73v57c4h]  .city-hero-actions button:hover,
.city-time-page[b-pl73v57c4h]  .city-hero-actions a:hover {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 34%, var(--city-border));
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-actions button,
:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-actions a {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(8, 21, 37, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.city-time-page[b-pl73v57c4h]  .city-hero-search,
.city-time-page[b-pl73v57c4h]  .city-hero-add-clock {
    width: 42px;
    padding: 0;
}

.city-time-page[b-pl73v57c4h]  .city-hero-image {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
}

.city-time-page[b-pl73v57c4h]  .city-hero-card-image .city-hero-skyline {
    display: none;
}

.city-time-page[b-pl73v57c4h]  .city-hero-card-generated .city-hero-skyline {
    position: absolute;
    right: clamp(36px, 5vw, 76px);
    bottom: 26px;
    width: 38%;
    height: 44%;
    opacity: 0.28;
    background:
        linear-gradient(90deg, transparent 0 5%, var(--city-hero-accent) 5% 13%, transparent 13% 16%, var(--city-hero-accent) 16% 28%, transparent 28% 32%, var(--city-hero-accent) 32% 45%, transparent 45% 50%, var(--city-hero-accent) 50% 58%, transparent 58% 62%, var(--city-hero-accent) 62% 79%, transparent 79% 82%, var(--city-hero-accent) 82% 100%);
    clip-path: polygon(0 100%, 0 42%, 10% 42%, 10% 22%, 18% 22%, 18% 52%, 30% 52%, 30% 8%, 42% 8%, 42% 36%, 51% 36%, 51% 18%, 60% 18%, 60% 48%, 72% 48%, 72% 4%, 83% 4%, 83% 34%, 100% 34%, 100% 100%);
}

.city-overview-grid[b-pl73v57c4h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 22px);
}

.city-content-card[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-side-card {
    border-radius: 10px;
    padding: clamp(18px, 1.6vw, 24px);
}

.city-card-head[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-card-head {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.city-card-head h2[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-card-head h2 {
    margin: 0;
    color: var(--city-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.city-info-list[b-pl73v57c4h],
.city-compact-list[b-pl73v57c4h],
.city-highlight-list[b-pl73v57c4h] {
    margin: 0;
    display: grid;
}

.city-info-list div[b-pl73v57c4h],
.city-compact-list div[b-pl73v57c4h],
.city-highlight-list div[b-pl73v57c4h],
.city-major-row[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-time-change-item,
.city-time-page[b-pl73v57c4h]  .city-popular-link {
    border-bottom: 1px solid var(--city-border);
}

.city-info-list div[b-pl73v57c4h],
.city-compact-list div[b-pl73v57c4h],
.city-highlight-list div[b-pl73v57c4h] {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.city-info-list div:last-child[b-pl73v57c4h],
.city-compact-list div:last-child[b-pl73v57c4h],
.city-highlight-list div:last-child[b-pl73v57c4h],
.city-major-row:last-of-type[b-pl73v57c4h],
.city-time-page[b-pl73v57c4h]  .city-time-change-item:last-child,
.city-time-page[b-pl73v57c4h]  .city-popular-link:last-child {
    border-bottom: 0;
}

.city-info-list dt[b-pl73v57c4h],
.city-highlight-list dt[b-pl73v57c4h] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--city-text-secondary);
    font-size: 0.85rem;
    font-weight: 620;
}

.city-info-list dt svg[b-pl73v57c4h],
.city-highlight-list dt svg[b-pl73v57c4h] {
    flex: 0 0 auto;
    color: #446080;
}

:root[data-theme="dark"] .city-info-list dt svg[b-pl73v57c4h],
:root[data-theme="dark"] .city-highlight-list dt svg[b-pl73v57c4h] {
    color: var(--city-accent);
}

.city-info-list dd[b-pl73v57c4h],
.city-compact-list dd[b-pl73v57c4h],
.city-highlight-list dd[b-pl73v57c4h] {
    min-width: 0;
    margin: 0;
    display: grid;
    justify-items: end;
    gap: 3px;
    color: var(--city-text-primary);
    text-align: right;
    overflow-wrap: anywhere;
}

.city-info-list dd strong[b-pl73v57c4h],
.city-compact-list dd[b-pl73v57c4h],
.city-highlight-list dd[b-pl73v57c4h],
.city-major-row time[b-pl73v57c4h] {
    font-size: 0.86rem;
    font-weight: 760;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.city-info-list dd small[b-pl73v57c4h] {
    color: var(--city-text-muted);
    font-size: 0.72rem;
    font-weight: 560;
}

.city-major-list[b-pl73v57c4h] {
    display: grid;
}

.city-major-row[b-pl73v57c4h] {
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    color: var(--city-text-primary);
    text-decoration: none;
}

.city-major-row span[b-pl73v57c4h] {
    min-width: 0;
    overflow: hidden;
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-major-row small[b-pl73v57c4h],
.city-change-badge[b-pl73v57c4h] {
    justify-self: end;
    min-width: fit-content;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 8px;
    color: var(--city-text-secondary);
    background: color-mix(in srgb, var(--city-accent) 8%, var(--city-surface-soft));
    font-size: 0.72rem;
    font-weight: 760;
    text-align: center;
}

.city-major-row:hover span[b-pl73v57c4h],
.city-major-row:hover time[b-pl73v57c4h] {
    color: var(--city-accent);
}

.city-major-card .city-card-link[b-pl73v57c4h] {
    margin-top: 14px;
    min-height: 28px;
    display: grid;
    place-items: center;
}

.city-compact-list div[b-pl73v57c4h] {
    grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1fr);
}

.city-compact-list dt[b-pl73v57c4h] {
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    font-weight: 620;
}

.city-compact-list dd[b-pl73v57c4h] {
    overflow-wrap: anywhere;
}

.city-highlight-list div[b-pl73v57c4h] {
    grid-template-columns: minmax(130px, 1fr) auto;
}

.city-highlight-list dt svg[b-pl73v57c4h] {
    width: 1rem;
    height: 1rem;
}

.city-related-links[b-pl73v57c4h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-related-links a[b-pl73v57c4h],
.city-seo-card nav a[b-pl73v57c4h] {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--city-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--city-text-primary);
    background: var(--city-surface-soft);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

.city-related-links a:hover[b-pl73v57c4h],
.city-seo-card nav a:hover[b-pl73v57c4h] {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 30%, var(--city-border));
}

.city-related-links small[b-pl73v57c4h] {
    color: var(--city-text-muted);
}

.city-eyebrow[b-pl73v57c4h] {
    margin: 0 0 6px;
    color: var(--city-accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.city-seo-card h2[b-pl73v57c4h],
.city-faq-card h2[b-pl73v57c4h] {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 800;
}

.city-seo-card p[b-pl73v57c4h] {
    margin: 0;
    max-width: 76ch;
    color: var(--city-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.city-seo-card nav[b-pl73v57c4h] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-faq-card[b-pl73v57c4h] {
    display: grid;
    gap: 10px;
}

.city-faq-card details[b-pl73v57c4h] {
    border: 1px solid var(--city-border);
    border-radius: 12px;
    background: var(--city-surface-soft);
}

.city-faq-card summary[b-pl73v57c4h] {
    padding: 13px 14px;
    color: var(--city-text-primary);
    font-weight: 760;
    cursor: pointer;
}

.city-faq-card details p[b-pl73v57c4h] {
    margin: 0;
    padding: 0 14px 14px;
    color: var(--city-text-secondary);
    line-height: 1.55;
}

.city-time-page[b-pl73v57c4h]  .city-side-card {
    min-width: 0;
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc {
    position: relative;
    min-height: 166px;
    display: grid;
    place-items: center;
    color: var(--city-text-primary);
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc svg {
    width: min(100%, 270px);
    height: auto;
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc-line {
    stroke: var(--city-warning);
    stroke-dasharray: 4 7;
    stroke-width: 2;
}

.city-time-page[b-pl73v57c4h]  .city-sun-horizon-left,
.city-time-page[b-pl73v57c4h]  .city-sun-horizon-right {
    stroke: var(--city-warning);
    stroke-width: 3;
}

.city-time-page[b-pl73v57c4h]  .city-sun-horizon-right {
    stroke: #cbd5e1;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-sun-horizon-right {
    stroke: #53657d;
}

.city-time-page[b-pl73v57c4h]  .city-sun-dot {
    fill: var(--city-warning);
    stroke: var(--city-warning);
}

.city-time-page[b-pl73v57c4h]  .city-sun-rays {
    stroke: var(--city-warning);
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc div {
    position: absolute;
    top: 76px;
    left: 50%;
    display: grid;
    gap: 4px;
    text-align: center;
    transform: translateX(-50%);
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc span,
.city-time-page[b-pl73v57c4h]  .city-sun-times small,
.city-time-page[b-pl73v57c4h]  .city-moon-row small {
    color: var(--city-text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
}

.city-time-page[b-pl73v57c4h]  .city-sun-arc strong {
    font-size: 1rem;
    font-weight: 800;
}

.city-time-page[b-pl73v57c4h]  .city-sun-times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--city-border);
}

.city-time-page[b-pl73v57c4h]  .city-sun-times span,
.city-time-page[b-pl73v57c4h]  .city-moon-row > span:not(.city-moon-visual) {
    display: grid;
    gap: 4px;
}

.city-time-page[b-pl73v57c4h]  .city-sun-times span:last-child,
.city-time-page[b-pl73v57c4h]  .city-moon-row > span:last-child {
    justify-items: end;
    text-align: right;
}

.city-time-page[b-pl73v57c4h]  .city-sun-times strong,
.city-time-page[b-pl73v57c4h]  .city-moon-row strong {
    font-size: 1rem;
    font-weight: 800;
}

.city-time-page[b-pl73v57c4h]  .city-moon-row {
    min-height: 78px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.city-time-page[b-pl73v57c4h]  .city-moon-visual {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95) 0 3px, transparent 4px),
        radial-gradient(circle at 64% 60%, rgba(15, 23, 42, 0.12) 0 5px, transparent 6px),
        radial-gradient(circle at 42% 68%, rgba(15, 23, 42, 0.1) 0 3px, transparent 4px),
        linear-gradient(90deg, #d8e2ef 0 48%, #9facbd 49% 100%);
    box-shadow: inset -10px 0 12px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.12);
}

.city-time-page[b-pl73v57c4h]  .city-time-change-list {
    margin: 0;
    padding: 0;
    display: grid;
    list-style: none;
}

.city-time-page[b-pl73v57c4h]  .city-time-change-item {
    min-width: 0;
    min-height: 92px;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.city-time-page[b-pl73v57c4h]  .city-change-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--city-accent);
    background: var(--city-accent-soft);
}

.city-time-page[b-pl73v57c4h]  .city-time-change-item.is-start .city-change-icon {
    color: var(--city-warning);
    background: var(--city-warning-soft);
}

.city-time-page[b-pl73v57c4h]  .city-change-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.city-time-page[b-pl73v57c4h]  .city-change-copy strong {
    font-size: 0.9rem;
    font-weight: 800;
}

.city-time-page[b-pl73v57c4h]  .city-change-copy time,
.city-time-page[b-pl73v57c4h]  .city-change-copy small {
    color: var(--city-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.city-time-page[b-pl73v57c4h]  .city-change-badge {
    color: var(--city-text-secondary);
}

.city-time-page[b-pl73v57c4h]  .city-empty-note {
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    color: var(--city-text-secondary);
    background: var(--city-surface-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.city-time-page[b-pl73v57c4h]  .city-popular-link-list {
    display: grid;
}

.city-time-page[b-pl73v57c4h]  .city-popular-link {
    min-height: 52px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    color: var(--city-text-primary);
    text-decoration: none;
}

.city-time-page[b-pl73v57c4h]  .city-popular-link span:not(.city-link-icon) {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-time-page[b-pl73v57c4h]  .city-popular-link small {
    color: var(--city-accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.city-time-page[b-pl73v57c4h]  .city-popular-link:hover span:not(.city-link-icon) {
    color: var(--city-accent);
}

.city-time-page[b-pl73v57c4h]  .city-popular-link.is-disabled {
    color: var(--city-text-muted);
}

.city-time-page[b-pl73v57c4h]  .city-popular-link.is-disabled small {
    color: var(--city-text-muted);
}

.city-time-page[b-pl73v57c4h]  .city-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #233a5b;
    font-size: 0.86rem;
    font-weight: 900;
}

:root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-link-icon {
    color: var(--city-text-secondary);
}

button:focus-visible[b-pl73v57c4h],
input:focus-visible[b-pl73v57c4h],
a:focus-visible[b-pl73v57c4h],
summary:focus-visible[b-pl73v57c4h] {
    outline: 3px solid color-mix(in srgb, var(--city-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (min-width: 1200px) and (min-height: 1220px) {
    .city-right-rail[b-pl73v57c4h] {
        position: sticky;
        top: calc(var(--city-header-offset) + 16px);
    }
}

@media (max-width: 1199px) {
    .city-page-layout[b-pl73v57c4h] {
        grid-template-columns: 1fr;
        max-width: 980px;
    }

    .city-right-rail[b-pl73v57c4h] {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .city-right-rail[b-pl73v57c4h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .city-time-page[b-pl73v57c4h]  .city-popular-links-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .city-page-layout[b-pl73v57c4h] {
        padding: calc(var(--city-header-offset) + 12px) 12px 12px;
        gap: 12px;
    }

    .city-main-column[b-pl73v57c4h] {
        gap: 12px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-card {
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.98) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, color-mix(in srgb, var(--city-hero-accent, var(--city-accent)) 16%, #ffffff), #d9ecff 52%, #ffffff);
        background-position: center top;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-title-row h1 {
        white-space: normal;
    }

    :root[data-theme="dark"] .city-time-page[b-pl73v57c4h]  .city-hero-card {
        background-image:
            linear-gradient(180deg, rgba(7, 17, 31, 0.36) 0%, rgba(7, 17, 31, 0.9) 44%, rgba(7, 17, 31, 0.99) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions {
        top: 14px;
        right: 14px;
        gap: 8px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions button,
    .city-time-page[b-pl73v57c4h]  .city-hero-actions a {
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-search,
    .city-time-page[b-pl73v57c4h]  .city-hero-add-clock {
        width: 38px;
        padding: 0;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-share span {
        max-width: 118px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-time {
        width: 100%;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-time-main {
        font-size: clamp(2.65rem, 13vw, 3.5rem);
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-time-seconds {
        font-size: clamp(1rem, 4.2vw, 1.35rem);
    }

    .city-overview-grid[b-pl73v57c4h],
    .city-right-rail[b-pl73v57c4h] {
        grid-template-columns: 1fr;
    }

    .city-content-card[b-pl73v57c4h],
    .city-time-page[b-pl73v57c4h]  .city-side-card {
        padding: 16px;
    }

    .city-info-list div[b-pl73v57c4h],
    .city-compact-list div[b-pl73v57c4h],
    .city-highlight-list div[b-pl73v57c4h] {
        grid-template-columns: minmax(102px, 0.82fr) minmax(0, 1.18fr);
        gap: 10px;
        padding: 9px 0;
    }

    .city-info-list dd[b-pl73v57c4h],
    .city-compact-list dd[b-pl73v57c4h],
    .city-highlight-list dd[b-pl73v57c4h] {
        justify-items: end;
        text-align: right;
    }
}

@media (max-width: 520px) {
    .city-time-page[b-pl73v57c4h]  .city-hero-title-row {
        align-items: flex-start;
        gap: 9px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-title-row h1 {
        font-size: clamp(1.4rem, 6.2vw, 1.8rem);
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-favorite {
        width: 36px;
        height: 36px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions {
        right: 18px;
        left: 18px;
        justify-content: flex-end;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions button,
    .city-time-page[b-pl73v57c4h]  .city-hero-actions a {
        flex: 0 1 auto;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions button:not(.city-hero-more),
    .city-time-page[b-pl73v57c4h]  .city-hero-actions a {
        font-size: 0;
        gap: 0;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-actions svg {
        width: 1rem;
        height: 1rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-date-row {
        gap: 10px;
        row-gap: 6px;
        font-size: 0.86rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-search-modal {
        padding: 16px;
        gap: 12px;
    }

    .city-time-page[b-pl73v57c4h]  .city-search-modal .city-search-box input {
        height: 54px;
    }

    .city-time-page[b-pl73v57c4h]  .city-search-modal-meta {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .city-major-row[b-pl73v57c4h] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
    }

    .city-major-row small[b-pl73v57c4h] {
        grid-column: auto;
    }

    .city-time-page[b-pl73v57c4h]  .city-time-change-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .city-time-page[b-pl73v57c4h]  .city-change-badge {
        grid-column: 2;
        justify-self: start;
    }

    .city-time-page[b-pl73v57c4h]  .city-moon-row {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .city-time-page[b-pl73v57c4h]  .city-moon-row > span:last-child {
        grid-column: 2;
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 340px) {
    .city-time-page[b-pl73v57c4h]  .city-hero-title-row {
        gap: 8px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-title-row h1 {
        font-size: 1.28rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-favorite {
        width: 32px;
        height: 32px;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-meta {
        gap: 6px;
        font-size: 0.8rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-badge {
        padding-inline: 6px;
        font-size: 0.72rem;
    }

    .city-time-page[b-pl73v57c4h]  .city-hero-date-row {
        gap: 8px;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-time-page *[b-pl73v57c4h],
    .city-time-page[b-pl73v57c4h]  * {
        scroll-behavior: auto;
        transition: none;
    }
}
/* /Components/Pages/CityWeatherPage.razor.rz.scp.css */
.city-weather-page[b-yvt7kwpx0v] {
    --city-bg-page: var(--bg-page, #f7faff);
    --city-surface: var(--bg-surface-strong, #ffffff);
    --city-surface-soft: #f8fbff;
    --city-surface-glass: rgba(255, 255, 255, 0.84);
    --city-border: var(--border-soft, #e3eaf4);
    --city-border-strong: rgba(148, 163, 184, 0.36);
    --city-text-primary: var(--text-primary, #0f172a);
    --city-text-secondary: var(--text-secondary, #475569);
    --city-text-muted: var(--text-muted, #64748b);
    --city-accent: var(--accent, #2563eb);
    --city-accent-hover: var(--accent-hover, #1d4ed8);
    --city-accent-soft: var(--accent-soft, #eaf2ff);
    --city-warning: var(--warning, #f59e0b);
    --city-warning-soft: var(--warning-soft, #fef3c7);
    --city-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
    --city-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.055);
    --city-header-offset: var(--header-height, var(--header-h, 72px));
    --weather-rain: var(--city-accent);
    --weather-rain-soft: color-mix(in srgb, var(--city-accent) 12%, var(--city-surface));
    --weather-success: #16a34a;
    --weather-warning: var(--city-warning);
    min-height: 100dvh;
    color: var(--city-text-primary);
    background: var(--city-bg-page);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-weather-page[b-yvt7kwpx0v] {
    --city-bg-page:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.11), transparent 27%),
        linear-gradient(180deg, #07111f 0%, #091526 54%, #0b182a 100%);
    --city-surface: #0e1a2c;
    --city-surface-soft: #122137;
    --city-surface-glass: rgba(9, 22, 39, 0.88);
    --city-border: rgba(148, 163, 184, 0.18);
    --city-border-strong: rgba(148, 163, 184, 0.28);
    --city-text-primary: #f1f5f9;
    --city-text-secondary: #c3cedc;
    --city-text-muted: #899aaf;
    --city-accent: #60a5fa;
    --city-accent-hover: #93c5fd;
    --city-accent-soft: rgba(96, 165, 250, 0.16);
    --city-warning: #fbbf24;
    --city-warning-soft: rgba(251, 191, 36, 0.14);
    --city-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
    --city-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.22);
    --weather-success: #5eead4;
}

.city-weather-page[b-yvt7kwpx0v],
.city-weather-page *[b-yvt7kwpx0v] {
    box-sizing: border-box;
}

.weather-tool-shell[b-yvt7kwpx0v] {
    width: 100%;
    max-width: 1440px;
    min-height: calc(100dvh - var(--city-header-offset));
    margin-inline: auto;
    padding: calc(var(--city-header-offset) + clamp(16px, 1.8vw, 32px)) clamp(16px, 1.8vw, 32px) clamp(16px, 1.8vw, 32px);
    display: grid;
    gap: clamp(14px, 1.35vw, 24px);
}

.weather-tool-shell[b-yvt7kwpx0v]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.weather-dashboard-grid[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.weather-main-stack[b-yvt7kwpx0v],
.weather-side-stack[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    gap: clamp(14px, 1.35vw, 24px);
}

.weather-card[b-yvt7kwpx0v],
.weather-hero-card[b-yvt7kwpx0v] {
    min-width: 0;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.weather-card[b-yvt7kwpx0v] {
    padding: clamp(14px, 1.3vw, 18px);
}

.weather-card-head[b-yvt7kwpx0v] {
    min-height: 28px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.weather-card-head h2[b-yvt7kwpx0v] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.weather-card-head h2 span[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    font-weight: 650;
}

.weather-card-head a[b-yvt7kwpx0v],
.weather-map-link[b-yvt7kwpx0v] {
    color: var(--city-accent);
    font-size: 0.78rem;
    font-weight: 780;
    text-decoration: none;
    white-space: nowrap;
}

.weather-map-link[b-yvt7kwpx0v] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.weather-hourly-pager[b-yvt7kwpx0v] {
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.weather-hourly-pager button[b-yvt7kwpx0v] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    color: var(--city-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.weather-hourly-pager button svg[b-yvt7kwpx0v] {
    width: 13px;
    height: 13px;
}

.weather-hourly-pager button:hover:not(:disabled)[b-yvt7kwpx0v],
.weather-hourly-pager button:focus-visible:not(:disabled)[b-yvt7kwpx0v] {
    color: var(--city-text-primary);
    border-color: color-mix(in srgb, var(--city-accent) 40%, var(--city-border));
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .weather-hourly-pager button:hover:not(:disabled)[b-yvt7kwpx0v] {
    background: rgba(0, 0, 0, 0.04);
}

.weather-hourly-pager button:disabled[b-yvt7kwpx0v] {
    color: var(--city-text-muted);
    opacity: 0.35;
    cursor: not-allowed;
}

.weather-hourly-pager span[b-yvt7kwpx0v] {
    min-width: 58px;
    color: var(--city-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.weather-info-dot[b-yvt7kwpx0v] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--city-border-strong);
    border-radius: 999px;
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.weather-hero-card[b-yvt7kwpx0v] {
    border-color: color-mix(in srgb, var(--city-border) 72%, transparent);
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 39%, rgba(255, 255, 255, 0.3) 68%, rgba(255, 255, 255, 0.08) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, color-mix(in srgb, var(--city-hero-accent, var(--city-accent)) 16%, #ffffff), #d9ecff 52%, #ffffff);
    background-position: center, center right, center;
    background-size: cover, cover, cover;
}

:root[data-theme="dark"] .weather-hero-card[b-yvt7kwpx0v] {
    background-image:
        linear-gradient(90deg, rgba(7, 17, 31, 0.99) 0%, rgba(7, 17, 31, 0.91) 41%, rgba(7, 17, 31, 0.52) 72%, rgba(7, 17, 31, 0.26) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
}

.weather-hero-card[b-yvt7kwpx0v]::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--city-accent) 10%, transparent), transparent 58%),
        radial-gradient(circle at 84% 28%, rgba(255, 199, 102, 0.24), transparent 12rem);
    pointer-events: none;
}

.weather-actions[b-yvt7kwpx0v] {
    top: 22px;
    right: 22px;
}

.weather-actions button[b-yvt7kwpx0v] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--city-border);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 720;
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.weather-actions button:hover[b-yvt7kwpx0v] {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 36%, var(--city-border));
}

:root[data-theme="dark"] .weather-actions button[b-yvt7kwpx0v] {
    border-color: rgba(148, 163, 184, 0.22);
    color: #f8fbff;
    background: rgba(8, 21, 37, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.weather-unit-switch[b-yvt7kwpx0v] {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] .weather-unit-switch[b-yvt7kwpx0v] {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(8, 21, 37, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.weather-unit-btn[b-yvt7kwpx0v] {
    min-height: 34px !important;
    min-width: 36px;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--city-text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
    cursor: pointer;
    transition: all 0.16s ease;
}

.weather-unit-btn:hover[b-yvt7kwpx0v] {
    color: var(--city-text-primary) !important;
}

.weather-unit-btn.is-active[b-yvt7kwpx0v] {
    color: #ffffff !important;
    background: var(--city-accent, #3b82f6) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--city-accent) 40%, transparent) !important;
}

:root[data-theme="dark"] .weather-unit-btn.is-active[b-yvt7kwpx0v] {
    color: #ffffff !important;
    background: var(--city-accent, #3b82f6) !important;
}

.weather-icon-action[b-yvt7kwpx0v] {
    width: 42px;
    padding: 0;
}

.weather-hero-copy[b-yvt7kwpx0v] {
    gap: 8px;
}

.weather-hero-eyebrow[b-yvt7kwpx0v] {
    margin: 0 0 2px;
    color: var(--city-accent);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.weather-location-row[b-yvt7kwpx0v] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather-flag[b-yvt7kwpx0v] {
    flex: 0 0 auto;
    width: 32px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 1.25rem;
    line-height: 1;
}

:root[data-theme="dark"] .weather-flag[b-yvt7kwpx0v] {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--city-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--city-text-primary);
}

.weather-location-row h1[b-yvt7kwpx0v] {
    min-width: 0;
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.weather-favorite[b-yvt7kwpx0v] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--city-warning);
    background: transparent;
}

.weather-local-meta[b-yvt7kwpx0v] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--city-text-secondary);
    font-size: 0.89rem;
    font-weight: 620;
}

.weather-local-meta time[b-yvt7kwpx0v] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.weather-local-meta span[b-yvt7kwpx0v] {
    width: 4px;
    height: 4px;
    padding: 0;
    border-radius: 999px;
    background: var(--city-warning);
}

.weather-current-row[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    grid-template-columns: 78px max-content minmax(118px, 1fr);
    align-items: center;
    gap: 14px;
}

.weather-current-icon[b-yvt7kwpx0v] {
    min-width: 0;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
}

.weather-current-icon[b-yvt7kwpx0v]  svg,
.weather-hour-tile span[b-yvt7kwpx0v]  svg,
.weather-daily-row > span[b-yvt7kwpx0v]  svg {
    width: 100%;
    height: 100%;
}

.weather-current-temp[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.weather-current-temp strong[b-yvt7kwpx0v] {
    color: #020b21;
    font-size: clamp(2.85rem, 4.1vw, 3.85rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 0;
}

:root[data-theme="dark"] .weather-current-temp strong[b-yvt7kwpx0v] {
    color: #f8fbff;
}

.weather-current-temp small[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    font-weight: 680;
}

.weather-high-low[b-yvt7kwpx0v] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--city-text-secondary);
    font-size: 0.9rem;
}

.weather-high-low b[b-yvt7kwpx0v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 760;
}

.weather-high-low b:first-child svg[b-yvt7kwpx0v] {
    color: var(--danger, #ef4444);
    fill: var(--danger, #ef4444);
}

.weather-high-low b:last-child svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
    fill: var(--city-accent);
}

.weather-condition-pill[b-yvt7kwpx0v] {
    min-width: 0;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 32px;
    padding: 3px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--city-accent) 22%, var(--city-border));
    color: var(--city-text-primary);
    background: var(--city-accent-soft);
    font-size: 0.84rem;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: 0.015em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

:root[data-theme="dark"] .weather-condition-pill[b-yvt7kwpx0v] {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(30, 58, 138, 0.35);
    color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.weather-unavailable[b-yvt7kwpx0v] {
    max-width: 36rem;
    min-height: 70px;
    padding: 16px;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--city-text-secondary);
    background: color-mix(in srgb, var(--city-surface) 72%, transparent);
    font-size: 0.92rem;
    font-weight: 680;
}

.weather-unavailable svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
}

.weather-metric-strip[b-yvt7kwpx0v] {
    position: relative;
    z-index: 1;
    min-height: 46px;
    margin: 0;
    padding: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
}

.weather-metric-strip div[b-yvt7kwpx0v] {
    min-width: 0;
    padding: 0 12px;
    border-left: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-content: center;
    gap: 1px 8px;
}

.weather-metric-strip div:first-child[b-yvt7kwpx0v] {
    padding-left: 0;
    border-left: 0;
}

.weather-metric-strip dt[b-yvt7kwpx0v],
.weather-metric-strip dd[b-yvt7kwpx0v] {
    margin: 0;
    min-width: 0;
}

.weather-metric-strip dt[b-yvt7kwpx0v] {
    display: contents;
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.weather-metric-strip dt svg[b-yvt7kwpx0v] {
    grid-area: icon;
    align-self: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: #193760;
}

.weather-metric-strip dt span[b-yvt7kwpx0v] {
    grid-area: label;
    min-width: 0;
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

:root[data-theme="dark"] .weather-metric-strip dt svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
}

.weather-metric-strip dd[b-yvt7kwpx0v] {
    grid-area: value;
    color: var(--city-text-primary);
    font-size: 0.84rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.weather-metric-card[b-yvt7kwpx0v] {
    padding: 8px 12px;
    box-shadow: none;
}

.weather-hourly-strip[b-yvt7kwpx0v] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow-x: auto;
    scrollbar-width: thin;
}

:root[data-theme="light"] .weather-hourly-strip[b-yvt7kwpx0v] {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .weather-hourly-strip[b-yvt7kwpx0v] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.weather-hour-tile[b-yvt7kwpx0v] {
    position: relative;
    min-width: 64px;
    min-height: 76px;
    padding: 8px 4px 6px;
    border: 0;
    border-right: 1px solid var(--city-border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    text-align: center;
    background: transparent;
    box-shadow: none;
    transition: background-color 150ms ease;
}

:root[data-theme="light"] .weather-hour-tile[b-yvt7kwpx0v] {
    border-right-color: rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .weather-hour-tile[b-yvt7kwpx0v] {
    border-right-color: rgba(255, 255, 255, 0.07);
}

.weather-hour-tile:last-child[b-yvt7kwpx0v] {
    border-right: 0;
}

.weather-hour-tile:hover[b-yvt7kwpx0v] {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .weather-hour-tile:hover[b-yvt7kwpx0v] {
    background: rgba(0, 0, 0, 0.03);
}

.weather-hour-tile-now[b-yvt7kwpx0v] {
    background: color-mix(in srgb, var(--city-accent) 8%, transparent);
    position: relative;
}

.weather-hour-tile-now[b-yvt7kwpx0v]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--city-accent);
}

.weather-hour-tile-now time[b-yvt7kwpx0v] {
    color: var(--city-accent) !important;
    font-weight: 700 !important;
}

.weather-hour-tile time[b-yvt7kwpx0v] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.weather-hour-icon[b-yvt7kwpx0v] {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--city-accent);
}

.weather-hour-icon svg[b-yvt7kwpx0v] {
    width: 22px;
    height: 22px;
}

.weather-hour-pop[b-yvt7kwpx0v] {
    position: absolute;
    bottom: -3px;
    right: -7px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #38bdf8;
    line-height: 1;
}

:root[data-theme="light"] .weather-hour-pop[b-yvt7kwpx0v] {
    color: #0284c7;
}

.weather-hour-tile strong[b-yvt7kwpx0v] {
    color: var(--city-text-primary);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.weather-lower-grid[b-yvt7kwpx0v] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.35vw, 24px);
}

.weather-forecast-card[b-yvt7kwpx0v] {
    grid-column: span 2;
}

.weather-details-card[b-yvt7kwpx0v] {
    grid-column: span 3;
}

.weather-lower-grid[b-yvt7kwpx0v]  .weather-precip-card {
    grid-column: 1 / -1;
}

.weather-daily-list[b-yvt7kwpx0v],
.weather-detail-list[b-yvt7kwpx0v] {
    display: grid;
}

.weather-daily-row[b-yvt7kwpx0v] {
    min-width: 0;
    min-height: 48px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(82px, 0.78fr) 24px minmax(58px, 1fr) minmax(66px, auto);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 5px;
}

.weather-daily-row:last-child[b-yvt7kwpx0v],
.weather-detail-list div:last-child[b-yvt7kwpx0v] {
    border-bottom: 0;
}

.weather-daily-row time[b-yvt7kwpx0v],
.weather-daily-row strong[b-yvt7kwpx0v],
.weather-daily-row b[b-yvt7kwpx0v],
.weather-daily-row small[b-yvt7kwpx0v] {
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.25;
}

.weather-daily-row time[b-yvt7kwpx0v] {
    grid-row: 1 / span 2;
    color: var(--city-text-primary);
    font-weight: 730;
    white-space: nowrap;
}

.weather-daily-row > span[b-yvt7kwpx0v] {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.weather-daily-row strong[b-yvt7kwpx0v] {
    grid-row: 1 / span 2;
    color: var(--city-text-secondary);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-daily-row b[b-yvt7kwpx0v] {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    color: var(--city-text-primary);
    font-weight: 850;
    white-space: nowrap;
}

.weather-daily-row small[b-yvt7kwpx0v] {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--city-accent);
    font-weight: 760;
    white-space: nowrap;
}

.weather-detail-list[b-yvt7kwpx0v] {
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.weather-detail-list div[b-yvt7kwpx0v] {
    min-width: 0;
    min-height: 42px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.weather-detail-list dt[b-yvt7kwpx0v],
.weather-detail-list dd[b-yvt7kwpx0v] {
    margin: 0;
}

.weather-detail-list dt[b-yvt7kwpx0v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--city-text-secondary);
    font-size: 0.74rem;
    font-weight: 650;
}

.weather-detail-list dt svg[b-yvt7kwpx0v] {
    flex: 0 0 auto;
    color: #315174;
}

:root[data-theme="dark"] .weather-detail-list dt svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
}

.weather-detail-list dd[b-yvt7kwpx0v] {
    color: var(--city-text-primary);
    font-size: 0.76rem;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.weather-updated-row[b-yvt7kwpx0v] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--city-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--city-text-secondary);
    font-size: 0.82rem;
    font-weight: 650;
}

.weather-updated-row svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
}

.weather-chart-block[b-yvt7kwpx0v] {
    display: grid;
    gap: 9px;
}

.weather-chart-block + .weather-chart-block[b-yvt7kwpx0v] {
    margin-top: 14px;
}

.weather-chart-title[b-yvt7kwpx0v] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.weather-chart-title strong[b-yvt7kwpx0v] {
    font-size: 0.84rem;
}

.weather-chart-title small[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    text-align: right;
}

.weather-precip-overview[b-yvt7kwpx0v] {
    min-height: 74px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--city-accent) 18%, var(--city-border));
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: color-mix(in srgb, var(--city-accent) 7%, var(--city-surface));
}

.weather-precip-overview div[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-precip-overview span[b-yvt7kwpx0v],
.weather-precip-overview small[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.weather-precip-overview strong[b-yvt7kwpx0v] {
    font-size: 0.96rem;
    font-weight: 850;
}

.weather-precip-overview b[b-yvt7kwpx0v] {
    min-width: 52px;
    padding: 7px 9px;
    border-radius: 999px;
    color: var(--city-accent);
    background: var(--city-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 18%, transparent);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.weather-precip-overview.is-dry[b-yvt7kwpx0v] {
    border-color: color-mix(in srgb, var(--weather-success) 22%, var(--city-border));
    background: color-mix(in srgb, var(--weather-success) 8%, var(--city-surface));
}

.weather-precip-overview.is-dry b[b-yvt7kwpx0v] {
    color: var(--weather-success);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--weather-success) 22%, transparent);
}

.weather-precip-overview.is-watch[b-yvt7kwpx0v],
.weather-precip-overview.is-wet[b-yvt7kwpx0v] {
    border-color: color-mix(in srgb, var(--city-warning) 32%, var(--city-border));
    background: color-mix(in srgb, var(--city-warning) 10%, var(--city-surface));
}

.weather-precip-overview.is-wet b[b-yvt7kwpx0v],
.weather-precip-overview.is-watch b[b-yvt7kwpx0v] {
    color: #b45309;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-warning) 28%, transparent);
}

.weather-pop-chart[b-yvt7kwpx0v] {
    height: 78px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
}

.weather-pop-chart span[b-yvt7kwpx0v] {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 16px minmax(4px, 1fr) 16px;
    justify-items: center;
    align-items: end;
    gap: 3px;
}

.weather-pop-chart b[b-yvt7kwpx0v],
.weather-pop-chart time[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.64rem;
    font-weight: 760;
    white-space: nowrap;
}

.weather-pop-chart i[b-yvt7kwpx0v] {
    width: min(100%, 24px);
    height: var(--bar-height);
    min-height: 4px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #8fb7ff, var(--city-accent));
}

.weather-cloud-chart[b-yvt7kwpx0v] {
    position: relative;
    height: 82px;
    padding: 0;
    border-bottom: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
}

.weather-cloud-chart[b-yvt7kwpx0v]::before,
.weather-cloud-chart[b-yvt7kwpx0v]::after {
    display: none;
}

.weather-cloud-chart span[b-yvt7kwpx0v] {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(24px, 1fr) 16px;
    align-items: end;
    justify-items: center;
    gap: 4px;
    background: transparent;
    opacity: 1;
}

.weather-cloud-chart span[b-yvt7kwpx0v]::before {
    width: min(100%, 26px);
    height: var(--cloud-height);
    min-height: 8px;
    border-radius: 999px 999px 0 0;
    content: "";
    background: linear-gradient(180deg, #b8cdf8, color-mix(in srgb, var(--city-accent) 48%, #d9e4f5));
    opacity: 0.86;
}

.weather-cloud-chart i[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 760;
    white-space: nowrap;
}

.weather-condition-summary[b-yvt7kwpx0v] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.weather-precip-card .weather-condition-summary[b-yvt7kwpx0v] {
    grid-template-columns: 1fr;
    gap: 8px;
}

.weather-condition-summary div[b-yvt7kwpx0v] {
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--city-surface-soft);
}

.weather-precip-card .weather-condition-summary div[b-yvt7kwpx0v] {
    min-height: 44px;
    grid-template-columns: 20px minmax(0, 1fr) auto;
}

.weather-condition-summary svg[b-yvt7kwpx0v] {
    color: var(--city-accent);
}

.weather-condition-summary span[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.weather-condition-summary strong[b-yvt7kwpx0v] {
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.weather-alert-panel[b-yvt7kwpx0v] {
    min-height: 122px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--weather-success) 22%, var(--city-border));
    border-radius: 12px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon copy";
    gap: 8px 12px;
    align-content: center;
    background: color-mix(in srgb, var(--weather-success) 9%, var(--city-surface));
}

.weather-alert-panel.is-active[b-yvt7kwpx0v] {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, var(--city-border));
    background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--city-surface));
}

.weather-alert-panel svg[b-yvt7kwpx0v] {
    grid-area: icon;
    width: 24px;
    height: 24px;
    color: var(--weather-success);
}

.weather-alert-panel.is-active svg[b-yvt7kwpx0v] {
    color: var(--danger, #ef4444);
}

.weather-alert-panel strong[b-yvt7kwpx0v] {
    grid-area: title;
    align-self: end;
    font-size: 0.92rem;
    font-weight: 850;
}

.weather-alert-panel span[b-yvt7kwpx0v] {
    grid-area: copy;
    color: var(--city-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.weather-aqi-panel[b-yvt7kwpx0v] {
    min-height: 158px;
    padding: 12px 0 8px;
    display: grid;
    grid-template-columns: minmax(0, 136px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.weather-aqi-gauge[b-yvt7kwpx0v] {
    position: relative;
    width: min(136px, 100%);
    height: 104px;
    justify-self: center;
    display: grid;
    place-items: center;
    align-content: start;
    padding-top: 42px;
    isolation: isolate;
}

.weather-aqi-gauge[b-yvt7kwpx0v]::before,
.weather-aqi-gauge[b-yvt7kwpx0v]::after {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 68px;
    border-radius: 136px 136px 0 0;
    content: "";
    -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 45px, #000 46px 53px, transparent 54px);
    mask: radial-gradient(circle at 50% 100%, transparent 0 45px, #000 46px 53px, transparent 54px);
}

.weather-aqi-gauge[b-yvt7kwpx0v]::before {
    background: color-mix(in srgb, var(--city-text-muted) 22%, #dbe2ee);
}

.weather-aqi-gauge[b-yvt7kwpx0v]::after {
    background:
        conic-gradient(from 270deg at 50% 100%, var(--weather-success) 0 var(--aqi-angle), transparent var(--aqi-angle) 360deg);
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--weather-success) 18%, transparent));
}

.weather-aqi-gauge strong[b-yvt7kwpx0v] {
    position: relative;
    z-index: 1;
    font-size: 2.25rem;
    font-weight: 850;
    line-height: 0.95;
}

.weather-aqi-gauge span[b-yvt7kwpx0v] {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding-inline: 8px;
    color: var(--weather-success);
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.weather-aqi-panel dl[b-yvt7kwpx0v] {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.weather-aqi-panel div[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.weather-aqi-panel dt[b-yvt7kwpx0v],
.weather-aqi-panel dd[b-yvt7kwpx0v] {
    margin: 0;
}

.weather-aqi-panel dt[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.weather-aqi-panel dd[b-yvt7kwpx0v] {
    min-width: 0;
    font-size: 1rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.weather-aqi-card .weather-card-head h2[b-yvt7kwpx0v] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.weather-aqi-card p[b-yvt7kwpx0v] {
    margin: 0 0 14px;
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.weather-comfort-card .weather-card-head[b-yvt7kwpx0v] {
    min-height: 0;
    margin-bottom: 12px;
}

.weather-comfort-eyebrow[b-yvt7kwpx0v] {
    margin: 0 0 3px;
    color: var(--city-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.weather-comfort-overview[b-yvt7kwpx0v],
.weather-comfort-tile[b-yvt7kwpx0v] {
    --comfort-tone: var(--city-accent);
    --comfort-tone-soft: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
}

.weather-comfort-overview.is-good[b-yvt7kwpx0v],
.weather-comfort-tile.is-good[b-yvt7kwpx0v] {
    --comfort-tone: var(--weather-success);
    --comfort-tone-soft: color-mix(in srgb, var(--weather-success) 10%, var(--city-surface));
}

.weather-comfort-overview.is-warn[b-yvt7kwpx0v],
.weather-comfort-tile.is-warn[b-yvt7kwpx0v] {
    --comfort-tone: var(--city-warning);
    --comfort-tone-soft: color-mix(in srgb, var(--city-warning) 11%, var(--city-surface));
}

.weather-comfort-overview.is-blue[b-yvt7kwpx0v],
.weather-comfort-tile.is-blue[b-yvt7kwpx0v] {
    --comfort-tone: var(--city-accent);
    --comfort-tone-soft: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
}

.weather-comfort-overview[b-yvt7kwpx0v] {
    min-width: 0;
    min-height: 68px;
    padding: 10px 11px 10px 9px;
    border: 1px solid color-mix(in srgb, var(--comfort-tone) 26%, var(--city-border));
    border-left: 3px solid var(--comfort-tone);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    background: var(--comfort-tone-soft);
}

.weather-comfort-overview-icon[b-yvt7kwpx0v],
.weather-comfort-tile-icon[b-yvt7kwpx0v] {
    display: grid;
    place-items: center;
    color: var(--comfort-tone);
}

.weather-comfort-overview-icon[b-yvt7kwpx0v] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--comfort-tone) 13%, var(--city-surface));
}

.weather-comfort-overview-icon[b-yvt7kwpx0v]  svg {
    width: 1.08rem;
    height: 1.08rem;
}

.weather-comfort-overview-copy[b-yvt7kwpx0v],
.weather-comfort-tile-copy[b-yvt7kwpx0v] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.weather-comfort-overview-copy small[b-yvt7kwpx0v],
.weather-comfort-tile-copy small[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.weather-comfort-overview-copy strong[b-yvt7kwpx0v] {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.weather-comfort-overview b[b-yvt7kwpx0v] {
    min-height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--comfort-tone);
    background: color-mix(in srgb, var(--comfort-tone) 13%, var(--city-surface));
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.weather-comfort-grid[b-yvt7kwpx0v] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.weather-comfort-tile[b-yvt7kwpx0v] {
    min-width: 0;
    min-height: 58px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--comfort-tone) 22%, var(--city-border));
    border-radius: 8px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    background: var(--comfort-tone-soft);
}

.weather-comfort-tile:nth-child(5)[b-yvt7kwpx0v] {
    grid-column: 1 / -1;
}

.weather-comfort-tile-icon[b-yvt7kwpx0v] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--comfort-tone) 12%, var(--city-surface));
}

.weather-comfort-tile-icon[b-yvt7kwpx0v]  svg {
    width: 0.94rem;
    height: 0.94rem;
}

.weather-comfort-tile-copy small[b-yvt7kwpx0v],
.weather-comfort-tile-copy strong[b-yvt7kwpx0v] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-comfort-tile-copy strong[b-yvt7kwpx0v] {
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.08;
}

.weather-empty[b-yvt7kwpx0v] {
    margin: 0;
    padding: 14px;
    border-radius: 8px;
    color: var(--city-text-secondary);
    background: var(--city-surface-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-sun {
    fill: #fbbf24;
    stroke: #f59e0b;
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-ray {
    stroke: #f59e0b;
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-cloud {
    fill: #f8fbff;
    stroke: #8da0b8;
}

:root[data-theme="dark"] .weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-cloud {
    fill: #d8e2ef;
    stroke: #93a4b8;
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-rain,
.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-snow {
    stroke: var(--city-accent);
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-bolt {
    fill: #fbbf24;
    stroke: #f59e0b;
}

.weather-tool-shell[b-yvt7kwpx0v]  .weather-svg-moon {
    fill: #cbd5e1;
    stroke: #8da0b8;
}

button:focus-visible[b-yvt7kwpx0v],
a:focus-visible[b-yvt7kwpx0v] {
    outline: 3px solid color-mix(in srgb, var(--city-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1120px) {
    .weather-lower-grid[b-yvt7kwpx0v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-forecast-card[b-yvt7kwpx0v],
    .weather-details-card[b-yvt7kwpx0v] {
        grid-column: auto;
    }

    .weather-lower-grid[b-yvt7kwpx0v]  .weather-precip-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1240px) {
    .weather-dashboard-grid[b-yvt7kwpx0v] {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-side-stack[b-yvt7kwpx0v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .weather-side-stack[b-yvt7kwpx0v],
    .weather-lower-grid[b-yvt7kwpx0v] {
        grid-template-columns: 1fr;
    }

    .weather-forecast-card[b-yvt7kwpx0v],
    .weather-details-card[b-yvt7kwpx0v],
    .weather-lower-grid[b-yvt7kwpx0v]  .weather-precip-card {
        grid-column: auto;
    }

    .weather-hero-card[b-yvt7kwpx0v] {
        padding: 0;
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.88) 42%, rgba(255, 255, 255, 0.98) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, color-mix(in srgb, var(--city-hero-accent, var(--city-accent)) 16%, #ffffff), #d9ecff 52%, #ffffff);
        background-position: center top, center top, center;
    }

    :root[data-theme="dark"] .weather-hero-card[b-yvt7kwpx0v] {
        background-image:
            linear-gradient(180deg, rgba(7, 17, 31, 0.36) 0%, rgba(7, 17, 31, 0.9) 44%, rgba(7, 17, 31, 0.99) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
    }

    .weather-metric-strip[b-yvt7kwpx0v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 0;
    }

    .weather-metric-strip div:nth-child(4)[b-yvt7kwpx0v] {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .weather-tool-shell[b-yvt7kwpx0v] {
        padding: calc(var(--city-header-offset) + 12px) 12px 12px;
        gap: 12px;
    }

    .weather-card[b-yvt7kwpx0v] {
        padding: 16px;
    }

    .weather-actions[b-yvt7kwpx0v] {
        top: 14px;
        right: 14px;
        gap: 8px;
    }

    .weather-actions button:not(.weather-unit-btn)[b-yvt7kwpx0v] {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 0;
        gap: 0;
    }

    .weather-unit-switch[b-yvt7kwpx0v] {
        padding: 2px;
    }

    .weather-unit-btn[b-yvt7kwpx0v] {
        min-height: 38px !important;
        min-width: 34px !important;
        padding: 0 8px !important;
        font-size: 0.8rem !important;
    }

    .weather-location-row[b-yvt7kwpx0v] {
        align-items: flex-start;
        gap: 9px;
    }

    .weather-location-row h1[b-yvt7kwpx0v] {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
        white-space: normal;
    }

    .weather-current-row[b-yvt7kwpx0v] {
        grid-template-columns: 62px max-content minmax(0, 1fr);
        gap: 10px;
    }

    .weather-current-icon[b-yvt7kwpx0v] {
        width: 60px;
        height: 60px;
    }

    .weather-current-temp strong[b-yvt7kwpx0v] {
        font-size: clamp(2.65rem, 13vw, 3.3rem);
    }

    .weather-condition-pill[b-yvt7kwpx0v] {
        grid-column: auto;
        align-self: center;
    }

    .weather-metric-strip[b-yvt7kwpx0v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-metric-strip div[b-yvt7kwpx0v],
    .weather-metric-strip div:nth-child(4)[b-yvt7kwpx0v] {
        min-height: 40px;
        padding: 0 8px;
        border-left: 1px solid var(--city-border);
        border-bottom: 1px solid var(--city-border);
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "icon label"
            "icon value";
        align-content: center;
        gap: 1px 7px;
    }

    .weather-metric-strip div:nth-child(odd)[b-yvt7kwpx0v] {
        padding-left: 0;
        border-left: 0;
    }

    .weather-metric-strip div:nth-child(n + 5)[b-yvt7kwpx0v] {
        grid-column: 1 / -1;
    }

    .weather-metric-strip div:last-child[b-yvt7kwpx0v] {
        border-bottom: 0;
    }

    .weather-metric-strip dt[b-yvt7kwpx0v] {
        min-width: 0;
    }

    .weather-metric-strip dt svg[b-yvt7kwpx0v] {
        width: 1rem;
        height: 1rem;
    }

    .weather-metric-strip dd[b-yvt7kwpx0v] {
        text-align: left;
    }

    .weather-metric-card[b-yvt7kwpx0v] {
        padding: 8px 10px;
    }

    .weather-hourly-strip[b-yvt7kwpx0v] {
        grid-auto-columns: 76px;
    }

    .weather-daily-row[b-yvt7kwpx0v] {
        grid-template-columns: minmax(0, 1fr) 28px auto;
        gap: 2px 8px;
    }

    .weather-daily-row time[b-yvt7kwpx0v] {
        grid-column: 1;
        grid-row: 1;
        white-space: normal;
    }

    .weather-daily-row > span[b-yvt7kwpx0v] {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: center;
    }

    .weather-daily-row strong[b-yvt7kwpx0v] {
        grid-column: 1;
        grid-row: 2;
    }

    .weather-daily-row b[b-yvt7kwpx0v] {
        grid-column: 3;
        grid-row: 1;
    }

    .weather-daily-row small[b-yvt7kwpx0v] {
        grid-column: 3;
        grid-row: 2;
    }

    .weather-detail-list[b-yvt7kwpx0v],
    .weather-condition-summary[b-yvt7kwpx0v],
    .weather-aqi-panel[b-yvt7kwpx0v] {
        grid-template-columns: 1fr;
    }

    .weather-aqi-panel[b-yvt7kwpx0v] {
        justify-items: center;
        text-align: center;
    }

    .weather-alert-panel[b-yvt7kwpx0v] {
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .weather-current-row[b-yvt7kwpx0v] {
        grid-template-columns: 1fr;
    }

    .weather-current-icon[b-yvt7kwpx0v] {
        justify-self: start;
    }

    .weather-high-low[b-yvt7kwpx0v] {
        gap: 10px;
        flex-wrap: wrap;
    }

    .weather-card-head[b-yvt7kwpx0v] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-weather-page *[b-yvt7kwpx0v],
    .city-weather-page[b-yvt7kwpx0v]  * {
        scroll-behavior: auto;
        transition: none;
    }
}
/* /Components/Pages/ExchangeDetailPage.razor.rz.scp.css */
.exchange-detail-page[b-a1tkga7zw5] { min-height:100dvh; color:var(--text-primary); background:var(--bg-page); overflow-x:clip; }
.exchange-detail-shell[b-a1tkga7zw5] { width:min(100%,1200px); min-height:calc(100dvh - var(--header-h,72px)); margin:auto; padding:calc(4.25rem + clamp(12px,2vw,32px)) clamp(12px,2vw,32px) clamp(12px,2vw,32px); display:grid; gap:clamp(1rem,2vw,1.5rem); }
.exchange-detail-shell section[id][b-a1tkga7zw5], .exchange-detail-shell article[id][b-a1tkga7zw5] { scroll-margin-top:calc(var(--header-h,72px) + 1.25rem); }
.exchange-detail-toolbar[b-a1tkga7zw5] { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.exchange-back-button[b-a1tkga7zw5] { flex:0 0 auto; width:max-content; max-width:100%; min-height:1.9rem; padding:.32rem .62rem; gap:.34rem; border-radius:.55rem; font-size:.68rem; line-height:1; text-decoration:none; white-space:nowrap; }
.exchange-back-button svg[b-a1tkga7zw5] { width:.82rem; height:.82rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.exchange-breadcrumb[b-a1tkga7zw5] { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:var(--text-muted); font-size:.72rem; }.exchange-breadcrumb a[b-a1tkga7zw5] { color:var(--accent); }
.exchange-detail-hero[b-a1tkga7zw5] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(.8rem,2vw,1.5rem); padding:clamp(1rem,2vw,2rem); border:1px solid var(--border-soft); border-radius:clamp(14px,1.2vw,20px); background:var(--bg-surface); box-shadow:var(--shadow-card); }
.exchange-detail-hero[b-a1tkga7zw5]  .market-logo-detail { align-self:center; }
.exchange-detail-kicker[b-a1tkga7zw5] { color:var(--accent); font-size:.68rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
h1[b-a1tkga7zw5] { margin:.2rem 0; font-size:clamp(1.75rem,3.2vw,3rem); font-weight:700; line-height:1.05; letter-spacing:-.025em; }h2[b-a1tkga7zw5] { margin:.2rem 0 .75rem; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:650; line-height:1.15; }
.exchange-detail-hero p[b-a1tkga7zw5],.exchange-detail-card p[b-a1tkga7zw5],.exchange-detail-note p[b-a1tkga7zw5] { margin:0; color:var(--text-secondary); font-size:.875rem; font-weight:400; line-height:1.6; }
.exchange-hero-chips[b-a1tkga7zw5] { margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.55rem; }
.exchange-hero-chips button[b-a1tkga7zw5],.holiday-month-chips button[b-a1tkga7zw5],.holiday-type-pill[b-a1tkga7zw5] { min-height:2rem; padding:.4rem .8rem; border:1px solid var(--border-soft); border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; color:var(--text-secondary); background:color-mix(in srgb,var(--bg-surface-muted) 82%,transparent); font:inherit; font-size:.72rem; font-weight:600; line-height:1; text-decoration:none; appearance:none; }
.exchange-hero-chips button[b-a1tkga7zw5],.holiday-month-chips button[b-a1tkga7zw5] { cursor:pointer; }
.exchange-hero-chips button:hover[b-a1tkga7zw5],.holiday-month-chips button:hover[b-a1tkga7zw5] { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 28%,var(--border-soft)); background:color-mix(in srgb,var(--accent) 10%,var(--bg-surface-strong)); }
.holiday-month-chips button small[b-a1tkga7zw5] { color:var(--text-muted); font-size:.68rem; font-weight:500; }
.exchange-live-status[b-a1tkga7zw5] { --status-color:#64748b; min-width:13.5rem; display:grid; justify-items:end; gap:.45rem; }
.exchange-status-badge[b-a1tkga7zw5] { min-height:2rem; padding:.32rem .7rem .32rem .38rem; border:1px solid color-mix(in srgb,var(--status-color) 30%,var(--border-soft)); border-radius:999px; display:inline-flex; align-items:center; gap:.42rem; color:var(--status-color); background:color-mix(in srgb,var(--status-color) 12%,var(--bg-surface-strong)); font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.exchange-status-icon[b-a1tkga7zw5],.exchange-next-icon[b-a1tkga7zw5],.session-icon[b-a1tkga7zw5],.detail-event-icon[b-a1tkga7zw5],.weekly-status-icon[b-a1tkga7zw5] { flex:0 0 auto; display:grid; place-items:center; }
.exchange-status-icon[b-a1tkga7zw5] { width:1.35rem; height:1.35rem; border-radius:50%; color:var(--bg-surface-strong); background:var(--status-color); }
.exchange-status-icon svg[b-a1tkga7zw5] { width:.82rem; height:.82rem; }
.exchange-status-icon svg[b-a1tkga7zw5],.exchange-next-icon svg[b-a1tkga7zw5],.session-icon svg[b-a1tkga7zw5],.detail-event-icon svg[b-a1tkga7zw5],.weekly-status-icon svg[b-a1tkga7zw5],.exchange-live-status time svg[b-a1tkga7zw5],.session-hours > svg[b-a1tkga7zw5],.detail-event-countdown svg[b-a1tkga7zw5] { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.exchange-next-change[b-a1tkga7zw5] { min-height:1.7rem; display:inline-flex; align-items:center; justify-content:flex-end; gap:.45rem; font-size:.86rem; }
.exchange-next-change small[b-a1tkga7zw5] { color:var(--text-muted); font-size:.68rem; font-weight:500; }
.exchange-next-icon[b-a1tkga7zw5] { width:1.55rem; height:1.55rem; border-radius:.48rem; color:currentColor; background:color-mix(in srgb,currentColor 11%,transparent); }
.exchange-next-icon svg[b-a1tkga7zw5] { width:.92rem; height:.92rem; }
.exchange-next-change.next-opening[b-a1tkga7zw5] { color:var(--success); }.exchange-next-change.next-closing[b-a1tkga7zw5] { color:var(--danger); }.exchange-next-change.next-neutral[b-a1tkga7zw5] { color:var(--accent); }
.exchange-live-status time[b-a1tkga7zw5] { display:inline-flex; align-items:center; gap:.32rem; color:var(--text-secondary); font-size:.7rem; font-variant-numeric:tabular-nums; }
.exchange-live-status time svg[b-a1tkga7zw5] { width:.82rem; height:.82rem; color:var(--text-muted); }.exchange-live-status time span[b-a1tkga7zw5] { color:var(--text-muted); }
.status-open[b-a1tkga7zw5],.status-closingsoon[b-a1tkga7zw5] { --status-color:var(--success); }.status-openingsoon[b-a1tkga7zw5],.status-closed[b-a1tkga7zw5],.status-weekend[b-a1tkga7zw5] { --status-color:#64748b; }.status-lunchbreak[b-a1tkga7zw5],.status-holiday[b-a1tkga7zw5] { --status-color:#8b5cf6; }
.exchange-detail-grid[b-a1tkga7zw5] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }.exchange-profile-card[b-a1tkga7zw5],.exchange-detail-card[b-a1tkga7zw5],.exchange-weekly-card[b-a1tkga7zw5],.exchange-detail-note[b-a1tkga7zw5],.exchange-faq-card[b-a1tkga7zw5] { padding:clamp(1rem,2vw,1.5rem); border:1px solid var(--border-soft); border-radius:clamp(14px,1.2vw,20px); background:var(--bg-surface); box-shadow:var(--shadow-card); }
.exchange-section-head[b-a1tkga7zw5] { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.exchange-section-head > div:first-child[b-a1tkga7zw5] { min-width:0; display:grid; gap:.25rem; }
.exchange-facts-grid[b-a1tkga7zw5] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:0; }
.exchange-facts-grid > div[b-a1tkga7zw5] { min-width:0; min-height:6.1rem; padding:.85rem; border:1px solid var(--border-soft); border-radius:.8rem; display:grid; align-content:start; gap:.22rem; background:var(--bg-surface-muted); }
.exchange-facts-grid dt[b-a1tkga7zw5] { color:var(--text-muted); font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.exchange-facts-grid dd[b-a1tkga7zw5] { overflow-wrap:anywhere; margin:0; color:var(--text-primary); font-size:.88rem; font-weight:700; line-height:1.2; }
.exchange-facts-grid small[b-a1tkga7zw5] { overflow-wrap:anywhere; color:var(--text-secondary); font-size:.66rem; line-height:1.35; }
.exchange-today-summary[b-a1tkga7zw5] { margin-top:.75rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border-soft)); border-radius:.85rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:.8rem; background:color-mix(in srgb,var(--accent) 7%,var(--bg-surface-muted)); }
.exchange-today-summary > span[b-a1tkga7zw5] { min-width:0; display:grid; gap:.18rem; }
.exchange-today-summary > span + span[b-a1tkga7zw5] { padding-left:.8rem; border-left:1px solid var(--border-soft); }
.exchange-today-summary small[b-a1tkga7zw5] { color:var(--text-muted); font-size:.58rem; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
.exchange-today-summary strong[b-a1tkga7zw5] { overflow-wrap:anywhere; font-size:.76rem; line-height:1.3; }
.today-status strong[b-a1tkga7zw5] { color:var(--status-color,#64748b); }
.session-list[b-a1tkga7zw5] { display:grid; gap:.55rem; margin-bottom:1rem; }
.session-list > div[b-a1tkga7zw5] { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.72rem .8rem; border:1px solid var(--border-soft); border-radius:.75rem; background:var(--bg-surface-muted); font-size:.78rem; }
.session-label[b-a1tkga7zw5] { min-width:0; display:flex; align-items:center; gap:.48rem; }
.session-icon[b-a1tkga7zw5] { width:1.6rem; height:1.6rem; border-radius:.48rem; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--bg-surface-strong)); }.session-icon svg[b-a1tkga7zw5] { width:.92rem; height:.92rem; }
.session-hours[b-a1tkga7zw5] { display:flex; align-items:center; gap:.52rem; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.session-hours > svg[b-a1tkga7zw5] { width:.9rem; height:.9rem; color:var(--text-muted); }
.session-hours small[b-a1tkga7zw5] { display:block; margin-bottom:.08rem; font-size:.56rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.session-open[b-a1tkga7zw5] { color:var(--success); }.session-close[b-a1tkga7zw5] { color:var(--danger); }
.detail-event-list[b-a1tkga7zw5] { display:grid; gap:.48rem; margin:0; padding:0; list-style:none; }
.detail-event-list li[b-a1tkga7zw5] { --event-color:var(--accent); min-width:0; padding:.7rem .75rem; border:1px solid color-mix(in srgb,var(--event-color) 18%,var(--border-soft)); border-radius:.75rem; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; background:color-mix(in srgb,var(--event-color) 5%,var(--bg-surface-muted)); font-size:.72rem; }
.detail-event-list .event-opening[b-a1tkga7zw5] { --event-color:var(--success); }.detail-event-list .event-closing[b-a1tkga7zw5] { --event-color:var(--danger); }.detail-event-list .event-neutral[b-a1tkga7zw5] { --event-color:#8b5cf6; }
.detail-event-icon[b-a1tkga7zw5] { width:2rem; height:2rem; border-radius:.58rem; color:var(--event-color); background:color-mix(in srgb,var(--event-color) 13%,var(--bg-surface-strong)); }.detail-event-icon svg[b-a1tkga7zw5] { width:1rem; height:1rem; }
.detail-event-copy[b-a1tkga7zw5] { min-width:0; display:grid; gap:.2rem; }.detail-event-copy strong[b-a1tkga7zw5] { color:var(--event-color); font-size:.76rem; overflow-wrap:anywhere; }.detail-event-copy time[b-a1tkga7zw5] { color:var(--text-secondary); font-size:.68rem; font-variant-numeric:tabular-nums; }.detail-event-copy time span[b-a1tkga7zw5] { color:var(--text-muted); }
.detail-event-countdown[b-a1tkga7zw5] { min-width:4.4rem; padding:.34rem .5rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; color:var(--event-color); background:color-mix(in srgb,var(--event-color) 11%,var(--bg-surface-strong)); font-size:.68rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }.detail-event-countdown svg[b-a1tkga7zw5] { width:.78rem; height:.78rem; }
.exchange-holiday-card[b-a1tkga7zw5] { display:grid; gap:0; }
.holiday-month-chips[b-a1tkga7zw5] { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
.holiday-entry-list[b-a1tkga7zw5] { display:grid; gap:.7rem; }
.holiday-entry[b-a1tkga7zw5] { min-width:0; padding:.85rem 1rem; border:1px solid var(--border-soft); border-radius:.95rem; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9rem; background:color-mix(in srgb,var(--bg-surface-strong) 92%,transparent); }
.holiday-entry.holiday[b-a1tkga7zw5] { border-color:color-mix(in srgb,var(--danger) 22%,var(--border-soft)); }
.holiday-entry.special[b-a1tkga7zw5] { border-color:color-mix(in srgb,var(--warning) 22%,var(--border-soft)); }
.holiday-date-block[b-a1tkga7zw5] { min-width:4.9rem; padding:.65rem .75rem; border-radius:.8rem; display:grid; gap:.15rem; background:var(--bg-surface-muted); text-align:center; }
.holiday-date-block strong[b-a1tkga7zw5] { font-size:.88rem; }
.holiday-date-block span[b-a1tkga7zw5] { color:var(--text-muted); font-size:.7rem; font-weight:600; text-transform:uppercase; }
.holiday-copy[b-a1tkga7zw5] { min-width:0; display:grid; gap:.2rem; }
.holiday-copy strong[b-a1tkga7zw5] { font-size:.88rem; }
.holiday-copy p[b-a1tkga7zw5] { margin:0; color:var(--text-secondary); font-size:.75rem; }
.holiday-entry-meta[b-a1tkga7zw5] { display:flex; align-items:center; justify-content:flex-end; gap:.55rem; }
.holiday-countdown[b-a1tkga7zw5] { min-width:6.7rem; min-height:2.25rem; padding:.38rem .58rem; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border-soft)); border-radius:.72rem; display:flex; align-items:center; gap:.42rem; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface-muted)); font-variant-numeric:tabular-nums; }
.holiday-countdown > svg[b-a1tkga7zw5] { flex:0 0 auto; width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.holiday-countdown > span[b-a1tkga7zw5] { display:grid; gap:.03rem; }.holiday-countdown small[b-a1tkga7zw5] { color:var(--text-muted); font-size:.52rem; font-weight:600; letter-spacing:.04em; line-height:1; text-transform:uppercase; }.holiday-countdown strong[b-a1tkga7zw5] { color:var(--text-primary); font-size:.7rem; font-weight:650; line-height:1.15; white-space:nowrap; }
.holiday-type-pill[b-a1tkga7zw5] { justify-self:end; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 22%,var(--border-soft)); background:color-mix(in srgb,var(--accent) 12%,var(--bg-surface-strong)); }
.holiday-empty-state[b-a1tkga7zw5] { margin:0; color:var(--text-muted); }
.exchange-weekly-card[b-a1tkga7zw5] { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2rem; }.weekly-grid[b-a1tkga7zw5] { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.45rem; }.weekly-grid article[b-a1tkga7zw5] { min-width:0; position:relative; display:grid; gap:.2rem; padding:.62rem; border:1px solid var(--border-soft); border-radius:.68rem; background:var(--bg-surface-strong); }.weekly-grid strong[b-a1tkga7zw5] { padding-right:1.15rem; font-size:.7rem; }.weekly-grid article > span:last-child[b-a1tkga7zw5] { overflow:hidden; color:var(--text-muted); font-size:.58rem; white-space:nowrap; text-overflow:ellipsis; }.weekly-grid .trading[b-a1tkga7zw5] { border-color:color-mix(in srgb,var(--success) 35%,var(--border-soft)); }.weekly-grid .closed[b-a1tkga7zw5] { border-color:color-mix(in srgb,var(--text-muted) 24%,var(--border-soft)); }
.weekly-status-icon[b-a1tkga7zw5] { position:absolute; top:.48rem; right:.48rem; width:1rem; height:1rem; border-radius:50%; color:#64748b; background:color-mix(in srgb,#64748b 12%,var(--bg-surface-strong)); }.weekly-status-icon svg[b-a1tkga7zw5] { width:.65rem; height:.65rem; stroke-width:2.3; }.weekly-grid .trading .weekly-status-icon[b-a1tkga7zw5] { color:var(--success); background:color-mix(in srgb,var(--success) 12%,var(--bg-surface-strong)); }
.exchange-guidance-grid[b-a1tkga7zw5] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.exchange-guidance-grid > div[b-a1tkga7zw5] { min-width:0; padding:.85rem; border:1px solid var(--border-soft); border-radius:.8rem; background:var(--bg-surface-muted); }
.exchange-guidance-grid strong[b-a1tkga7zw5] { display:block; margin-bottom:.35rem; color:var(--text-primary); font-size:.78rem; }
.exchange-faq-card[b-a1tkga7zw5] { display:grid; gap:.7rem; }
.exchange-faq-card h2[b-a1tkga7zw5] { margin-bottom:.15rem; }
.exchange-faq-list[b-a1tkga7zw5] { display:grid; gap:.55rem; }
.exchange-faq-list details[b-a1tkga7zw5] { border:1px solid var(--border-soft); border-radius:.8rem; background:var(--bg-surface-muted); }
.exchange-faq-list summary[b-a1tkga7zw5] { padding:.82rem .9rem; color:var(--text-primary); font-size:.78rem; font-weight:650; cursor:pointer; }
.exchange-faq-list details p[b-a1tkga7zw5] { padding:0 .9rem .9rem; font-size:.78rem; }
.exchange-go-top[b-a1tkga7zw5] { position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(84px,10vh,108px); width:3rem; height:3rem; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border-soft)); border-radius:999px; display:grid; place-items:center; color:var(--accent-contrast,var(--text-primary)); background:linear-gradient(180deg,var(--accent),var(--accent-hover)); box-shadow:0 .9rem 2rem color-mix(in srgb,var(--accent) 24%,transparent); z-index:25; }
.exchange-go-top svg[b-a1tkga7zw5] { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
a:focus-visible[b-a1tkga7zw5],button:focus-visible[b-a1tkga7zw5] { outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
@media (max-width:900px) { .exchange-section-head[b-a1tkga7zw5] { flex-direction:column; }.exchange-facts-grid[b-a1tkga7zw5] { grid-template-columns:repeat(2,minmax(0,1fr)); }.holiday-entry[b-a1tkga7zw5] { grid-template-columns:1fr; }.holiday-month-chips[b-a1tkga7zw5] { justify-content:flex-start; }.holiday-entry-meta[b-a1tkga7zw5] { justify-content:flex-start; flex-wrap:wrap; }.holiday-type-pill[b-a1tkga7zw5] { justify-self:start; } }
@media (max-width:767px) { .exchange-detail-hero[b-a1tkga7zw5] { grid-template-columns:auto minmax(0,1fr); }.exchange-live-status[b-a1tkga7zw5] { grid-column:1/-1; min-width:0; justify-items:start; }.exchange-next-change[b-a1tkga7zw5] { justify-content:flex-start; }.exchange-detail-grid[b-a1tkga7zw5] { grid-template-columns:1fr; }.exchange-guidance-grid[b-a1tkga7zw5] { grid-template-columns:1fr; }.session-list > div[b-a1tkga7zw5] { align-items:flex-start; }.detail-event-list li[b-a1tkga7zw5] { grid-template-columns:auto minmax(0,1fr); }.detail-event-countdown[b-a1tkga7zw5] { grid-column:2; justify-self:start; }.exchange-weekly-card[b-a1tkga7zw5] { grid-template-columns:1fr; gap:.5rem; }.weekly-grid[b-a1tkga7zw5] { grid-template-columns:repeat(2,minmax(0,1fr)); }.weekly-grid article:last-child[b-a1tkga7zw5] { grid-column:1/-1; } }
@media (max-width:440px) { .session-list > div[b-a1tkga7zw5] { display:grid; }.session-hours[b-a1tkga7zw5] { padding-left:2.08rem; }.detail-event-copy time span[b-a1tkga7zw5] { display:block; margin-top:.1rem; } }
@media (max-width:820px) and (min-width:521px) { .exchange-detail-shell[b-a1tkga7zw5] { padding-top:calc(6.5rem + clamp(12px,2vw,32px)); } }
@media (max-width:520px) { .exchange-detail-shell[b-a1tkga7zw5] { padding-top:calc(4.35rem + 12px); }.exchange-detail-toolbar[b-a1tkga7zw5] { align-items:flex-start; }.exchange-breadcrumb[b-a1tkga7zw5] { font-size:.66rem; }.exchange-back-button[b-a1tkga7zw5] { min-height:1.75rem; padding:.28rem .5rem; }.exchange-back-button span[b-a1tkga7zw5] { display:none; }.exchange-detail-hero[b-a1tkga7zw5] { position:relative; grid-template-columns:1fr; }.exchange-detail-hero > div:not(.exchange-live-status)[b-a1tkga7zw5] { padding-right:2.8rem; }.exchange-detail-hero[b-a1tkga7zw5]  .market-logo-detail { position:absolute; top:1rem; right:1rem; width:2.5rem; min-height:2.5rem; }.exchange-live-status[b-a1tkga7zw5] { grid-column:auto; }.exchange-hero-chips[b-a1tkga7zw5],.holiday-month-chips[b-a1tkga7zw5] { gap:.4rem; }.exchange-hero-chips button[b-a1tkga7zw5],.holiday-month-chips button[b-a1tkga7zw5],.holiday-type-pill[b-a1tkga7zw5] { padding:.36rem .68rem; font-size:.68rem; }.exchange-facts-grid[b-a1tkga7zw5] { grid-template-columns:1fr; }.exchange-today-summary[b-a1tkga7zw5] { grid-template-columns:1fr; }.exchange-today-summary > span + span[b-a1tkga7zw5] { padding-top:.65rem; padding-left:0; border-top:1px solid var(--border-soft); border-left:0; }.exchange-go-top[b-a1tkga7zw5] { width:2.75rem; height:2.75rem; right:12px; bottom:88px; } }
/* /Components/Pages/HolidayDetailPage.razor.rz.scp.css */
/* HolidayDetailPage - reusable holiday SEO template */

.holiday-detail-page[b-780xe9lpqk] {
    --hd-bg: var(--bg-page, #f8fafc);
    --hd-surface: var(--bg-surface-strong, #ffffff);
    --hd-surface-subtle: #f8fafc;
    --hd-surface-muted: #f1f5f9;
    --hd-surface-hover: #e2e8f0;
    --hd-text-main: var(--text-primary, #0f172a);
    --hd-text-secondary: var(--text-secondary, #334155);
    --hd-text-muted: var(--text-muted, #64748b);
    --hd-text-dim: #94a3b8;
    --hd-accent: var(--accent, #2563eb);
    --hd-accent-hover: var(--accent-hover, #1d4ed8);
    --hd-accent-soft: #eff6ff;
    --hd-accent-border: #bfdbfe;
    --hd-green: #10b981;
    --hd-green-dark: #047857;
    --hd-green-soft: #ecfdf5;
    --hd-green-border: #a7f3d0;
    --hd-orange: #f59e0b;
    --hd-orange-dark: #b45309;
    --hd-orange-soft: #fffbeb;
    --hd-orange-border: #fde68a;
    --hd-purple: #8b5cf6;
    --hd-purple-dark: #6d28d9;
    --hd-purple-soft: #faf5ff;
    --hd-purple-border: #e9d5ff;
    --hd-rose: #f43f5e;
    --hd-rose-dark: #be123c;
    --hd-rose-soft: #fff1f2;
    --hd-rose-border: #fecdd3;
    --hd-border: var(--border-soft, #e2e8f0);
    --hd-border-subtle: var(--border-subtle, #f1f5f9);
    --hd-border-strong: var(--border-strong, #cbd5e1);
    --hd-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.045);
    --hd-shadow-hover: 0 3px 8px rgba(37, 99, 235, 0.08), 0 14px 30px rgba(15, 23, 42, 0.08);
    --hd-glow: 0 0 0 1px rgba(37, 99, 235, 0.03), 0 12px 32px rgba(37, 99, 235, 0.07);
    --hd-radius-lg: 12px;
    --hd-radius-md: 8px;
    --hd-radius-sm: 6px;
    --hd-radius-pill: 9999px;

    min-height: 100dvh;
    overflow-x: clip;
    color: var(--hd-text-main);
    font-family: var(--font-ui, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.07) 0, transparent 24rem),
        radial-gradient(circle at 92% 14%, rgba(139, 92, 246, 0.055) 0, transparent 20rem),
        var(--hd-bg);
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .holiday-detail-page[b-780xe9lpqk] {
    --hd-bg: #07101e;
    --hd-surface: #0e1a2d;
    --hd-surface-subtle: #112037;
    --hd-surface-muted: #152744;
    --hd-surface-hover: #1c3254;
    --hd-text-main: #f8fafc;
    --hd-text-secondary: #cbd5e1;
    --hd-text-muted: #94a3b8;
    --hd-text-dim: #64748b;
    --hd-accent: #3b82f6;
    --hd-accent-hover: #60a5fa;
    --hd-accent-soft: rgba(59, 130, 246, 0.14);
    --hd-accent-border: rgba(59, 130, 246, 0.35);
    --hd-green: #34d399;
    --hd-green-dark: #34d399;
    --hd-green-soft: rgba(16, 185, 129, 0.14);
    --hd-green-border: rgba(16, 185, 129, 0.35);
    --hd-orange: #fbbf24;
    --hd-orange-dark: #fbbf24;
    --hd-orange-soft: rgba(245, 158, 11, 0.14);
    --hd-orange-border: rgba(245, 158, 11, 0.35);
    --hd-purple: #c084fc;
    --hd-purple-dark: #c084fc;
    --hd-purple-soft: rgba(168, 85, 247, 0.14);
    --hd-purple-border: rgba(168, 85, 247, 0.35);
    --hd-rose: #fb7185;
    --hd-rose-dark: #fb7185;
    --hd-rose-soft: rgba(244, 63, 94, 0.14);
    --hd-rose-border: rgba(244, 63, 94, 0.35);
    --hd-border: #1e2e47;
    --hd-border-subtle: #17263d;
    --hd-border-strong: #2a3f60;
    --hd-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
    --hd-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.45);
    --hd-glow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 16px 36px rgba(0, 0, 0, 0.32);
}

.holiday-detail-shell[b-780xe9lpqk] {
    width: min(100% - 2vw, 1320px);
    min-height: calc(100dvh - var(--header-height, var(--header-h, 72px)));
    margin: 0 auto;
    padding: calc(var(--header-height, var(--header-h, 72px)) + 8px) clamp(12px, 1.5vw, 24px) clamp(24px, 4vh, 48px);
}

.hd-loading[b-780xe9lpqk],
.hd-error[b-780xe9lpqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50vh;
    color: var(--hd-text-muted);
    text-align: center;
}

.hd-spinner[b-780xe9lpqk] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--hd-border);
    border-top-color: var(--hd-accent);
    border-radius: 50%;
    animation: hd-spin-b-780xe9lpqk 0.8s linear infinite;
}

@keyframes hd-spin-b-780xe9lpqk {
    to { transform: rotate(360deg); }
}

.hd-breadcrumb[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    scrollbar-width: none;
}

.hd-breadcrumb[b-780xe9lpqk]::-webkit-scrollbar {
    display: none;
}

.hd-bc-link[b-780xe9lpqk] {
    color: var(--hd-accent);
    text-decoration: none;
}

.hd-bc-link:hover[b-780xe9lpqk] {
    color: var(--hd-accent-hover);
    text-decoration: underline;
}

.hd-bc-sep[b-780xe9lpqk] {
    color: var(--hd-text-dim);
    flex-shrink: 0;
}

.hd-bc-current[b-780xe9lpqk] {
    color: var(--hd-text-main);
    font-weight: 700;
}

.hd-hero[b-780xe9lpqk] {
    margin-bottom: 16px;
}

.hd-hero h1[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    color: var(--hd-text-main);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.04;
}

.hd-flag[b-780xe9lpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 29px;
    flex: 0 0 auto;
    border: 1px solid var(--hd-border-strong);
    border-radius: 7px;
    color: var(--hd-text-main);
    background: linear-gradient(180deg, var(--hd-surface) 0%, var(--hd-surface-subtle) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.hd-flag.is-us[b-780xe9lpqk],
.hd-related-card span.is-us[b-780xe9lpqk],
.hd-related-mini span.is-us[b-780xe9lpqk] {
    position: relative;
    overflow: hidden;
    color: transparent;
    background: repeating-linear-gradient(
        to bottom,
        #ef4444 0 7.7%,
        #ffffff 7.7% 15.4%
    );
    border-color: #d5deec;
}

.hd-flag.is-us[b-780xe9lpqk]::before,
.hd-related-card span.is-us[b-780xe9lpqk]::before,
.hd-related-mini span.is-us[b-780xe9lpqk]::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 54%;
    content: "";
    background: #1d4ed8;
}

.hd-hero p[b-780xe9lpqk] {
    max-width: 90ch;
    margin: 0;
    color: var(--hd-text-secondary);
    font-size: 0.94rem;
    line-height: 1.5;
}

.hd-primary-card[b-780xe9lpqk],
.hd-card[b-780xe9lpqk],
.hd-side-card[b-780xe9lpqk],
.hd-faq-panel[b-780xe9lpqk] {
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-surface);
    box-shadow: var(--hd-shadow-card);
}

.hd-primary-card[b-780xe9lpqk] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    padding: 16px 18px;
    box-shadow: var(--hd-glow);
}

.hd-primary-left[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.hd-primary-icon[b-780xe9lpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 1px solid var(--hd-green-border);
    border-radius: 11px;
    color: var(--hd-green-dark);
    background: var(--hd-green-soft);
}

.hd-primary-left h2[b-780xe9lpqk] {
    margin: 0 0 3px;
    color: var(--hd-text-main);
    font-size: 1.08rem;
    font-weight: 800;
}

.hd-primary-left strong[b-780xe9lpqk] {
    display: block;
    margin-bottom: 6px;
    color: var(--hd-text-main);
    font-size: 0.86rem;
}

.hd-type-badge[b-780xe9lpqk] {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid var(--hd-green-border);
    border-radius: var(--hd-radius-pill);
    color: var(--hd-green-dark);
    background: var(--hd-green-soft);
    font-size: 0.66rem;
    font-weight: 800;
}

.hd-primary-right[b-780xe9lpqk] {
    display: grid;
    align-content: center;
    gap: 9px;
    width: min(34%, 360px);
}

.hd-primary-right p[b-780xe9lpqk] {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    color: var(--hd-text-secondary);
    background: var(--hd-surface-subtle);
    font-size: 0.75rem;
    line-height: 1.45;
}

.hd-share-btn[b-780xe9lpqk],
.hd-outline-btn[b-780xe9lpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid var(--hd-accent-border);
    border-radius: var(--hd-radius-md);
    color: var(--hd-accent);
    background: var(--hd-surface);
    font: inherit;
    font-size: 0.73rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.hd-share-btn:hover[b-780xe9lpqk],
.hd-outline-btn:hover[b-780xe9lpqk] {
    color: #fff;
    background: var(--hd-accent);
    border-color: var(--hd-accent);
}

.hd-outline-btn[href][b-780xe9lpqk]::after,
.hd-side-card > a:not(.hd-outline-btn)[b-780xe9lpqk]::after,
.hd-text-link[b-780xe9lpqk]::after {
    content: "->";
    margin-left: 5px;
    transition: transform 0.15s ease;
}

.hd-outline-btn[href]:hover[b-780xe9lpqk]::after,
.hd-side-card > a:not(.hd-outline-btn):hover[b-780xe9lpqk]::after,
.hd-text-link:hover[b-780xe9lpqk]::after {
    transform: translateX(2px);
}

.hd-tabs[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 14px;
    overflow-x: auto;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-surface);
    box-shadow: var(--hd-shadow-card);
    scrollbar-color: var(--hd-accent-border) transparent;
    scrollbar-width: thin;
}

.hd-tabs[b-780xe9lpqk]::-webkit-scrollbar,
.hd-date-table-wrap[b-780xe9lpqk]::-webkit-scrollbar {
    height: 8px;
}

.hd-tabs[b-780xe9lpqk]::-webkit-scrollbar-track,
.hd-date-table-wrap[b-780xe9lpqk]::-webkit-scrollbar-track {
    background: transparent;
}

.hd-tabs[b-780xe9lpqk]::-webkit-scrollbar-thumb,
.hd-date-table-wrap[b-780xe9lpqk]::-webkit-scrollbar-thumb {
    border: 2px solid var(--hd-surface);
    border-radius: var(--hd-radius-pill);
    background: var(--hd-accent-border);
}

.hd-tab[b-780xe9lpqk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: max-content;
    height: 40px;
    padding: 0 17px;
    color: var(--hd-text-secondary);
    font-size: 0.71rem;
    font-weight: 800;
    text-decoration: none;
}

.hd-tab[b-780xe9lpqk]::after {
    position: absolute;
    right: 10px;
    bottom: 0;
    left: 10px;
    height: 2px;
    content: "";
    border-radius: var(--hd-radius-pill);
    background: transparent;
}

.hd-tab:hover[b-780xe9lpqk] {
    color: var(--hd-accent);
    background: var(--hd-surface-subtle);
}

.hd-tab.is-active[b-780xe9lpqk] {
    color: var(--hd-accent);
}

.hd-tab.is-active[b-780xe9lpqk]::after {
    background: var(--hd-accent);
}

.hd-section-history .hd-tab.is-active[b-780xe9lpqk] {
    color: var(--hd-purple-dark);
}

.hd-section-history .hd-tab.is-active[b-780xe9lpqk]::after {
    background: var(--hd-purple);
}

.hd-section-observed .hd-tab.is-active[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
}

.hd-section-observed .hd-tab.is-active[b-780xe9lpqk]::after {
    background: var(--hd-rose);
}

.hd-section-things .hd-tab.is-active[b-780xe9lpqk],
.hd-section-dates .hd-tab.is-active[b-780xe9lpqk] {
    color: var(--hd-orange-dark);
}

.hd-section-things .hd-tab.is-active[b-780xe9lpqk]::after,
.hd-section-dates .hd-tab.is-active[b-780xe9lpqk]::after {
    background: var(--hd-orange);
}

.hd-section-longweekend .hd-tab.is-active[b-780xe9lpqk] {
    color: var(--hd-green-dark);
}

.hd-section-longweekend .hd-tab.is-active[b-780xe9lpqk]::after {
    background: var(--hd-green);
}

.hd-content-layout[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
    gap: clamp(12px, 1.25vw, 18px);
    align-items: start;
    margin-bottom: 14px;
}

.hd-history-layout[b-780xe9lpqk] {
    grid-template-columns: minmax(0, 2.45fr) minmax(250px, 0.75fr);
}

.hd-history-layout .hd-sidebar[b-780xe9lpqk] {
    position: sticky;
    top: calc(var(--header-height, var(--header-h, 72px)) + 12px);
}

.hd-main-stack[b-780xe9lpqk],
.hd-sidebar[b-780xe9lpqk] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 18px);
    min-width: 0;
}

.hd-main-span[b-780xe9lpqk] {
    grid-column: 1 / -1;
}

.hd-card[b-780xe9lpqk],
.hd-side-card[b-780xe9lpqk],
.hd-faq-panel[b-780xe9lpqk] {
    padding: 17px 19px;
}

.hd-card h2[b-780xe9lpqk],
.hd-side-card h2[b-780xe9lpqk],
.hd-faq-panel h2[b-780xe9lpqk] {
    margin: 0 0 12px;
    color: var(--hd-text-main);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.hd-card p[b-780xe9lpqk],
.hd-side-card p[b-780xe9lpqk],
.hd-feature-card p[b-780xe9lpqk],
.hd-copy-block p[b-780xe9lpqk],
.hd-faq-item p[b-780xe9lpqk] {
    color: var(--hd-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.hd-card > p[b-780xe9lpqk] {
    margin: 0 0 14px;
}

.hd-meta-list[b-780xe9lpqk],
.hd-quick-facts[b-780xe9lpqk] {
    display: grid;
    gap: 0;
    margin: 0;
}

.hd-meta-list div[b-780xe9lpqk],
.hd-quick-facts div[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: minmax(160px, 0.48fr) 1fr;
    gap: 16px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--hd-border-subtle);
}

.hd-meta-list dt[b-780xe9lpqk],
.hd-quick-facts dt[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hd-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.hd-meta-list dd[b-780xe9lpqk],
.hd-quick-facts dd[b-780xe9lpqk] {
    margin: 0;
    color: var(--hd-text-main);
    font-size: 0.78rem;
    font-weight: 700;
}

.hd-reading-path[b-780xe9lpqk] {
    padding: 2px 1px;
}

.hd-reading-path .hd-section-heading[b-780xe9lpqk] {
    margin-bottom: 10px;
}

.hd-reading-path .hd-section-heading h2[b-780xe9lpqk] {
    font-size: 1.05rem;
}

.hd-reading-path-grid[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hd-reading-path-item[b-780xe9lpqk] {
    display: flex;
    min-width: 0;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-md);
    color: inherit;
    background: var(--hd-surface);
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.045);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hd-reading-path-item:hover[b-780xe9lpqk] {
    border-color: var(--hd-accent);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.09);
    transform: translateY(-1px);
}

.hd-reading-path-item:nth-child(1):hover[b-780xe9lpqk] {
    border-color: var(--hd-purple);
}

.hd-reading-path-item:nth-child(2):hover[b-780xe9lpqk] {
    border-color: var(--hd-rose);
}

.hd-reading-path-item:nth-child(3):hover[b-780xe9lpqk] {
    border-color: var(--hd-orange);
}

.hd-reading-path-icon[b-780xe9lpqk] {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--hd-radius-sm);
    color: var(--hd-accent);
    background: var(--hd-accent-soft);
}

.hd-reading-path-item:nth-child(1) .hd-reading-path-icon[b-780xe9lpqk] {
    color: var(--hd-purple-dark);
    background: var(--hd-purple-soft);
}

.hd-reading-path-item:nth-child(2) .hd-reading-path-icon[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
    background: var(--hd-rose-soft);
}

.hd-reading-path-item:nth-child(3) .hd-reading-path-icon[b-780xe9lpqk] {
    color: var(--hd-orange-dark);
    background: var(--hd-orange-soft);
}

.hd-reading-path-icon svg[b-780xe9lpqk],
.hd-reading-path-icon[b-780xe9lpqk]  svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.hd-reading-path-copy[b-780xe9lpqk] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.hd-reading-path-copy strong[b-780xe9lpqk] {
    color: var(--hd-text-main);
    font-size: 0.8rem;
    line-height: 1.3;
}

.hd-reading-path-copy > span:not(.hd-reading-path-link)[b-780xe9lpqk] {
    margin-top: 6px;
    color: var(--hd-text-secondary);
    font-size: 0.74rem;
    line-height: 1.55;
}

.hd-reading-path-link[b-780xe9lpqk] {
    margin-top: auto;
    padding-top: 9px;
    color: var(--hd-accent);
    font-size: 0.72rem;
    font-weight: 800;
}

.hd-reading-path-item:nth-child(1) .hd-reading-path-link[b-780xe9lpqk] {
    color: var(--hd-purple-dark);
}

.hd-reading-path-item:nth-child(2) .hd-reading-path-link[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
}

.hd-reading-path-item:nth-child(3) .hd-reading-path-link[b-780xe9lpqk] {
    color: var(--hd-orange-dark);
}

.hd-history-lede[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: auto auto minmax(220px, 1fr);
    gap: 13px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--hd-purple-border);
    border-radius: var(--hd-radius-lg);
    background: var(--hd-purple-soft);
    box-shadow: 0 10px 26px rgba(109, 40, 217, 0.07);
}

.hd-history-lede-icon[b-780xe9lpqk] {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hd-purple-border);
    border-radius: var(--hd-radius-md);
    color: var(--hd-purple-dark);
    background: var(--hd-surface);
}

.hd-history-lede-icon svg[b-780xe9lpqk],
.hd-history-lede-icon[b-780xe9lpqk]  svg,
.hd-side-heading svg[b-780xe9lpqk],
.hd-side-heading[b-780xe9lpqk]  svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-history-lede-copy[b-780xe9lpqk] {
    display: grid;
    min-width: 145px;
    gap: 2px;
}

.hd-history-lede-copy > span[b-780xe9lpqk],
.hd-section-heading > div > span[b-780xe9lpqk],
.hd-faq-heading > span[b-780xe9lpqk] {
    color: var(--hd-purple-dark);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hd-history-lede-copy strong[b-780xe9lpqk] {
    color: var(--hd-text-main);
    font-size: 0.76rem;
}

.hd-history-lede p[b-780xe9lpqk] {
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid var(--hd-purple-border);
    color: var(--hd-text-secondary);
    font-size: 0.76rem;
    line-height: 1.55;
}

.hd-history-jumps[b-780xe9lpqk] {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px 16px;
    padding-top: 10px;
    overflow-x: auto;
    border-top: 1px solid var(--hd-purple-border);
    white-space: nowrap;
    scrollbar-width: none;
}

.hd-history-jumps[b-780xe9lpqk]::-webkit-scrollbar {
    display: none;
}

.hd-history-jumps span[b-780xe9lpqk] {
    color: var(--hd-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hd-history-jumps a[b-780xe9lpqk] {
    position: relative;
    padding: 3px 0;
    color: var(--hd-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.hd-history-jumps a[b-780xe9lpqk]::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    border-radius: 2px;
    background: transparent;
}

.hd-history-jumps a:hover[b-780xe9lpqk],
.hd-history-jumps a:focus-visible[b-780xe9lpqk] {
    color: var(--hd-purple-dark);
    outline: none;
}

.hd-history-jumps a:hover[b-780xe9lpqk]::after,
.hd-history-jumps a:focus-visible[b-780xe9lpqk]::after {
    background: var(--hd-purple);
}

.hd-history-visual[b-780xe9lpqk] {
    margin: 0;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-height, var(--header-h, 72px)) + 12px);
    border: 1px solid var(--hd-purple-border);
    border-radius: 8px;
    background: var(--hd-surface);
    box-shadow: 0 8px 22px rgb(67 56 202 / 7%);
}

.hd-history-visual img[b-780xe9lpqk] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 230px;
    object-fit: cover;
    object-position: center 48%;
}

.hd-history-visual figcaption[b-780xe9lpqk] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 12px;
    border-top: 1px solid var(--hd-purple-border);
    background: var(--hd-purple-soft);
}

.hd-history-visual figcaption span[b-780xe9lpqk] {
    flex: 0 0 auto;
    color: var(--hd-purple-dark);
    font-size: 0.65rem;
    font-weight: 850;
    text-transform: uppercase;
}

.hd-history-visual figcaption p[b-780xe9lpqk] {
    margin: 0;
    color: var(--hd-text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
}

.hd-history-card[b-780xe9lpqk],
.hd-timeline-card[b-780xe9lpqk],
.hd-quick-card[b-780xe9lpqk],
.hd-faq-panel[b-780xe9lpqk] {
    scroll-margin-top: calc(var(--header-height, var(--header-h, 72px)) + 12px);
}

.hd-history-card[b-780xe9lpqk] {
    border-top: 2px solid var(--hd-purple);
}

.hd-timeline-card[b-780xe9lpqk] {
    border-top: 2px solid var(--hd-accent);
}

.hd-quick-card[b-780xe9lpqk] {
    border-top: 2px solid var(--hd-orange);
}

.hd-faq-panel[b-780xe9lpqk] {
    border-top: 2px solid var(--hd-rose);
}

.hd-timeline-card .hd-section-heading > div > span[b-780xe9lpqk] {
    color: var(--hd-accent);
}

.hd-faq-heading > span[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
}

.hd-section-heading[b-780xe9lpqk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.hd-section-heading h2[b-780xe9lpqk] {
    margin: 3px 0 0;
}

.hd-section-count[b-780xe9lpqk] {
    flex: 0 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-pill);
    color: var(--hd-text-muted);
    background: var(--hd-surface-subtle);
    font-size: 0.64rem;
    font-weight: 800;
}

.hd-copy-block[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid var(--hd-border-subtle);
    transition: background-color 0.15s ease;
}

.hd-copy-block:hover[b-780xe9lpqk] {
    background: var(--hd-purple-soft);
}

.hd-copy-block:first-of-type[b-780xe9lpqk] {
    padding-top: 0;
    border-top: 0;
}

.hd-copy-block h3[b-780xe9lpqk],
.hd-feature-card h3[b-780xe9lpqk] {
    margin: 0 0 6px;
    color: var(--hd-text-main);
    font-size: 0.9rem;
    font-weight: 780;
}

.hd-copy-block p[b-780xe9lpqk],
.hd-feature-card p[b-780xe9lpqk] {
    margin: 0;
}

.hd-chapter-number[b-780xe9lpqk],
.hd-fact-number[b-780xe9lpqk] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hd-green-border);
    border-radius: 50%;
    color: var(--hd-green-dark);
    background: var(--hd-green-soft);
    font-size: 0.62rem;
    font-weight: 850;
}

.hd-card-grid[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hd-feature-card[b-780xe9lpqk] {
    padding: 13px;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-subtle);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hd-feature-card:hover[b-780xe9lpqk] {
    border-color: var(--hd-accent-border);
    box-shadow: var(--hd-shadow-hover);
    transform: translateY(-1px);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 1) svg[b-780xe9lpqk],
.hd-card-grid .hd-feature-card:nth-child(4n + 1)[b-780xe9lpqk]  svg {
    color: var(--hd-green-dark);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 2) svg[b-780xe9lpqk],
.hd-card-grid .hd-feature-card:nth-child(4n + 2)[b-780xe9lpqk]  svg {
    color: var(--hd-purple-dark);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 3) svg[b-780xe9lpqk],
.hd-card-grid .hd-feature-card:nth-child(4n + 3)[b-780xe9lpqk]  svg {
    color: var(--hd-orange-dark);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 4) svg[b-780xe9lpqk],
.hd-card-grid .hd-feature-card:nth-child(4n + 4)[b-780xe9lpqk]  svg {
    color: var(--hd-rose-dark);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 1):hover[b-780xe9lpqk] {
    border-color: var(--hd-green-border);
    background: var(--hd-green-soft);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 2):hover[b-780xe9lpqk] {
    border-color: var(--hd-purple-border);
    background: var(--hd-purple-soft);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 3):hover[b-780xe9lpqk] {
    border-color: var(--hd-orange-border);
    background: var(--hd-orange-soft);
}

.hd-card-grid .hd-feature-card:nth-child(4n + 4):hover[b-780xe9lpqk] {
    border-color: var(--hd-rose-border);
    background: var(--hd-rose-soft);
}

.hd-feature-card svg[b-780xe9lpqk] {
    width: 18px;
    height: 18px;
    margin-bottom: 10px;
    color: var(--hd-accent);
}

.hd-feature-card[b-780xe9lpqk]  svg {
    width: 18px;
    height: 18px;
    margin-bottom: 10px;
    color: var(--hd-accent);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-timeline[b-780xe9lpqk] {
    display: grid;
    gap: 0;
}

.hd-timeline-item[b-780xe9lpqk] {
    position: relative;
    margin-left: 8px;
    padding-left: 28px;
}

.hd-timeline-item[b-780xe9lpqk]::before {
    position: absolute;
    top: 18px;
    bottom: -18px;
    left: 5px;
    width: 1px;
    content: "";
    background: var(--hd-border-strong);
}

.hd-timeline-item:last-child[b-780xe9lpqk]::before {
    display: none;
}

.hd-timeline-item summary[b-780xe9lpqk] {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: var(--hd-radius-md);
    color: var(--hd-text-main);
    background: transparent;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.hd-timeline-item summary[b-780xe9lpqk]::-webkit-details-marker {
    display: none;
}

.hd-timeline-item summary:hover[b-780xe9lpqk] {
    color: var(--hd-accent);
    background: var(--hd-surface-subtle);
}

.hd-timeline-item[open] summary[b-780xe9lpqk] {
    border-color: var(--hd-accent-border);
    color: var(--hd-accent);
    background: var(--hd-accent-soft);
}

.hd-timeline-marker[b-780xe9lpqk] {
    position: absolute;
    top: 15px;
    left: -28px;
    width: 11px;
    height: 11px;
    border: 3px solid var(--hd-surface);
    border-radius: 50%;
    background: var(--hd-text-dim);
    box-shadow: 0 0 0 1px var(--hd-border-strong);
}

.hd-timeline-item[open] .hd-timeline-marker[b-780xe9lpqk] {
    background: var(--hd-accent);
    box-shadow: 0 0 0 1px var(--hd-accent), 0 0 0 5px var(--hd-accent-soft);
}

.hd-timeline-item summary strong[b-780xe9lpqk] {
    font-size: 0.8rem;
    font-weight: 820;
}

.hd-timeline-toggle[b-780xe9lpqk] {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.hd-timeline-toggle[b-780xe9lpqk]::before,
.hd-timeline-toggle[b-780xe9lpqk]::after {
    position: absolute;
    top: 6px;
    left: 2px;
    width: 10px;
    height: 1.5px;
    content: "";
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.15s ease;
}

.hd-timeline-toggle[b-780xe9lpqk]::after {
    transform: rotate(90deg);
}

.hd-timeline-item[open] .hd-timeline-toggle[b-780xe9lpqk]::after {
    transform: rotate(0deg);
}

.hd-timeline-item p[b-780xe9lpqk] {
    margin: 4px 12px 10px;
    padding: 4px 0 7px;
    color: var(--hd-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.hd-weekend-summary[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid var(--hd-accent-border);
    border-radius: var(--hd-radius-md);
    color: var(--hd-accent);
    background: var(--hd-accent-soft);
    font-size: 0.86rem;
    font-weight: 800;
}

.hd-weekend-days[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hd-weekend-days div[b-780xe9lpqk] {
    display: grid;
    gap: 3px;
    padding: 11px;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-subtle);
}

.hd-weekend-days div.is-holiday[b-780xe9lpqk] {
    border-color: var(--hd-green-border);
    background: var(--hd-green-soft);
}

.hd-weekend-days span[b-780xe9lpqk] {
    color: var(--hd-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hd-weekend-days strong[b-780xe9lpqk] {
    color: var(--hd-text-main);
    font-size: 0.9rem;
}

.hd-weekend-days em[b-780xe9lpqk] {
    color: var(--hd-green-dark);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.hd-date-table-wrap[b-780xe9lpqk] {
    overflow-x: auto;
    scrollbar-color: var(--hd-accent-border) transparent;
    scrollbar-width: thin;
}

.hd-date-table[b-780xe9lpqk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.hd-date-table th[b-780xe9lpqk],
.hd-date-table td[b-780xe9lpqk] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--hd-border-subtle);
    text-align: left;
    white-space: nowrap;
}

.hd-date-table th[b-780xe9lpqk] {
    color: var(--hd-text-muted);
    background: linear-gradient(180deg, var(--hd-surface-muted) 0%, var(--hd-surface-subtle) 100%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hd-date-table td[b-780xe9lpqk] {
    color: var(--hd-text-secondary);
    font-weight: 700;
}

.hd-side-card[b-780xe9lpqk] {
    display: grid;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hd-side-heading[b-780xe9lpqk] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hd-side-heading > span[b-780xe9lpqk] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hd-orange-border);
    border-radius: var(--hd-radius-md);
    color: var(--hd-orange-dark);
    background: var(--hd-orange-soft);
}

.hd-side-heading h2[b-780xe9lpqk] {
    margin: 0;
}

.hd-quick-card .hd-quick-facts[b-780xe9lpqk] {
    gap: 0;
}

.hd-quick-card .hd-quick-facts > div[b-780xe9lpqk] {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
    padding: 10px 0;
}

.hd-quick-card .hd-quick-facts dt[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.hd-quick-card .hd-quick-facts dd[b-780xe9lpqk] {
    padding-left: 32px;
    color: var(--hd-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.45;
}

.hd-quick-card .hd-fact-number[b-780xe9lpqk] {
    width: 24px;
    height: 24px;
    font-size: 0.56rem;
}

.hd-side-card:hover[b-780xe9lpqk] {
    border-color: var(--hd-accent-border);
    box-shadow: var(--hd-shadow-hover);
    transform: translateY(-1px);
}

.hd-side-card p[b-780xe9lpqk] {
    margin: 0;
}

.hd-side-card > a:not(.hd-outline-btn)[b-780xe9lpqk],
.hd-text-link[b-780xe9lpqk] {
    display: inline-flex;
    align-items: center;
    color: var(--hd-accent);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.hd-side-card > a:not(.hd-outline-btn):hover[b-780xe9lpqk],
.hd-text-link:hover[b-780xe9lpqk] {
    color: var(--hd-accent-hover);
    text-decoration: underline;
}

.hd-side-card strong[b-780xe9lpqk] {
    color: var(--hd-text-main);
    font-size: 0.82rem;
}

.hd-related-grid[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.hd-related-card[b-780xe9lpqk],
.hd-related-mini a[b-780xe9lpqk] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    color: var(--hd-text-main);
    background: var(--hd-surface-subtle);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hd-related-card:hover[b-780xe9lpqk],
.hd-related-mini a:hover[b-780xe9lpqk] {
    border-color: var(--hd-accent-border);
    background: var(--hd-accent-soft);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.07);
    transform: translateY(-1px);
}

.hd-related-card span[b-780xe9lpqk],
.hd-related-mini span[b-780xe9lpqk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 17px;
    flex: 0 0 auto;
    border: 1px solid var(--hd-border);
    border-radius: 4px;
    color: var(--hd-text-secondary);
    background: var(--hd-surface);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.hd-related-card strong[b-780xe9lpqk],
.hd-related-mini strong[b-780xe9lpqk] {
    display: block;
    color: var(--hd-accent);
    font-size: 0.78rem;
}

.hd-related-card small[b-780xe9lpqk],
.hd-related-mini small[b-780xe9lpqk] {
    display: block;
    color: var(--hd-text-muted);
    font-size: 0.68rem;
}

.hd-related-mini[b-780xe9lpqk] {
    display: grid;
    gap: 8px;
}

.hd-faq-panel[b-780xe9lpqk] {
    display: grid;
    grid-template-columns: minmax(190px, 0.32fr) minmax(0, 1fr);
    gap: clamp(18px, 2.5vw, 34px);
    align-items: start;
    margin-top: 14px;
}

.hd-faq-heading h2[b-780xe9lpqk] {
    margin: 4px 0 5px;
}

.hd-faq-heading p[b-780xe9lpqk] {
    margin: 0;
    color: var(--hd-text-muted);
    font-size: 0.73rem;
    line-height: 1.5;
}

.hd-faq-list[b-780xe9lpqk] {
    display: grid;
    gap: 0;
}

.hd-faq-item[b-780xe9lpqk] {
    border-bottom: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    transition: background-color 0.15s ease;
}

.hd-faq-item:last-child[b-780xe9lpqk] {
    border-bottom: 0;
}

.hd-faq-item summary[b-780xe9lpqk] {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 9px;
    color: var(--hd-text-main);
    font-size: 0.82rem;
    font-weight: 780;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease;
}

.hd-faq-item summary[b-780xe9lpqk]::after {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    content: "";
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform 0.15s ease;
}

.hd-faq-item[open][b-780xe9lpqk] {
    background: var(--hd-surface-subtle);
}

.hd-faq-item[open] summary[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
}

.hd-faq-item[open] summary[b-780xe9lpqk]::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.hd-faq-item summary:hover[b-780xe9lpqk] {
    color: var(--hd-rose-dark);
}

.hd-faq-item summary[b-780xe9lpqk]::-webkit-details-marker {
    display: none;
}

.hd-faq-item p[b-780xe9lpqk] {
    margin: 0;
    padding: 0 34px 12px 9px;
}

.hd-primary-icon svg[b-780xe9lpqk],
.hd-share-btn svg[b-780xe9lpqk],
.hd-tab svg[b-780xe9lpqk],
.hd-meta-list svg[b-780xe9lpqk],
.hd-feature-card svg[b-780xe9lpqk] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-primary-icon[b-780xe9lpqk]  svg,
.hd-share-btn[b-780xe9lpqk]  svg,
.hd-tab[b-780xe9lpqk]  svg,
.hd-meta-list[b-780xe9lpqk]  svg,
.hd-feature-card[b-780xe9lpqk]  svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hd-tab svg[b-780xe9lpqk],
.hd-meta-list svg[b-780xe9lpqk] {
    width: 15px;
    height: 15px;
}

.hd-tab[b-780xe9lpqk]  svg,
.hd-meta-list[b-780xe9lpqk]  svg {
    width: 15px;
    height: 15px;
}

.hd-share-btn:focus-visible[b-780xe9lpqk],
.hd-outline-btn:focus-visible[b-780xe9lpqk],
.hd-tab:focus-visible[b-780xe9lpqk],
.hd-timeline-item summary:focus-visible[b-780xe9lpqk],
.hd-faq-item summary:focus-visible[b-780xe9lpqk] {
    outline: none;
    box-shadow: 0 0 0 3px var(--hd-accent-soft);
}

@media (max-width: 1100px) {
    .hd-content-layout[b-780xe9lpqk] {
        grid-template-columns: 1fr;
    }

    .hd-history-layout .hd-sidebar[b-780xe9lpqk] {
        position: static;
    }

    .hd-primary-right[b-780xe9lpqk] {
        width: min(42%, 360px);
    }

    .hd-card-grid[b-780xe9lpqk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hd-reading-path-grid[b-780xe9lpqk] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hd-hero h1[b-780xe9lpqk] {
        font-size: 1.9rem;
    }

    .hd-primary-card[b-780xe9lpqk] {
        flex-direction: column;
        padding: 15px 16px;
    }

    .hd-primary-right[b-780xe9lpqk] {
        width: 100%;
    }

    .hd-card-grid[b-780xe9lpqk],
    .hd-related-grid[b-780xe9lpqk],
    .hd-weekend-days[b-780xe9lpqk] {
        grid-template-columns: 1fr;
    }

    .hd-meta-list div[b-780xe9lpqk],
    .hd-quick-facts div[b-780xe9lpqk] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .hd-card[b-780xe9lpqk],
    .hd-side-card[b-780xe9lpqk],
    .hd-faq-panel[b-780xe9lpqk] {
        padding: 16px;
    }

    .hd-history-lede[b-780xe9lpqk] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .hd-history-lede p[b-780xe9lpqk] {
        grid-column: 1 / -1;
        padding: 11px 0 0;
        border-top: 1px solid var(--hd-purple-border);
        border-left: 0;
    }

    .hd-history-visual img[b-780xe9lpqk] {
        max-height: 190px;
    }

    .hd-history-visual figcaption[b-780xe9lpqk] {
        display: grid;
        gap: 3px;
    }

    .hd-faq-panel[b-780xe9lpqk] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .holiday-detail-shell[b-780xe9lpqk] {
        width: 100%;
    }

    .hd-hero[b-780xe9lpqk] {
        margin-bottom: 14px;
    }

    .hd-hero h1[b-780xe9lpqk] {
        gap: 10px;
        font-size: 1.82rem;
    }

    .hd-hero p[b-780xe9lpqk] {
        font-size: 0.9rem;
    }

    .hd-flag[b-780xe9lpqk] {
        width: 38px;
        height: 26px;
    }

    .hd-tab[b-780xe9lpqk] {
        height: 38px;
        padding: 0 11px;
        font-size: 0.69rem;
    }

    .hd-primary-left[b-780xe9lpqk] {
        align-items: flex-start;
    }

    .hd-primary-icon[b-780xe9lpqk] {
        width: 48px;
        height: 48px;
    }

    .hd-copy-block[b-780xe9lpqk] {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
    }

    .hd-chapter-number[b-780xe9lpqk] {
        width: 26px;
        height: 26px;
    }

    .hd-section-count[b-780xe9lpqk] {
        display: none;
    }
}
/* /Components/Pages/HolidaysPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HolidaysPage — Scoped CSS (Header Offset, Fluid VW/VH, Hero Grid)
   ═══════════════════════════════════════════════════════════════ */

.holidays-page[b-x3t7kfajtl] {
    /* ─── Header & Shell Offsets ─── */
    --header-offset: var(--header-height, var(--header-h, 72px));

    /* ─── Light Mode Tokens ─── */
    --hol-bg: var(--bg-page, #f8fafc);
    --hol-surface: var(--bg-surface-strong, #ffffff);
    --hol-surface-subtle: #f8fafc;
    --hol-surface-muted: #f1f5f9;
    --hol-surface-hover: #e2e8f0;
    
    --hol-text-main: var(--text-primary, #0f172a);
    --hol-text-secondary: var(--text-secondary, #334155);
    --hol-text-muted: var(--text-muted, #64748b);
    --hol-text-dim: #94a3b8;

    --hol-accent: var(--accent, #2563eb);
    --hol-accent-hover: var(--accent-hover, #1d4ed8);
    --hol-accent-soft: #eff6ff;
    --hol-accent-border: #bfdbfe;
    --hol-gradient-accent: #2563eb;
    --hol-gradient-violet: #6d28d9;
    --hol-gradient-green-start: #10b981;
    --hol-gradient-green-end: #047857;
    --hol-gradient-orange-start: #f59e0b;
    --hol-gradient-orange-end: #b45309;
    --hol-gradient-rose-start: #f43f5e;
    --hol-gradient-rose-end: #be123c;

    --hol-green: #10b981;
    --hol-green-dark: #047857;
    --hol-green-soft: #ecfdf5;
    --hol-green-border: #a7f3d0;

    --hol-orange: #f59e0b;
    --hol-orange-dark: #b45309;
    --hol-orange-soft: #fffbeb;
    --hol-orange-border: #fde68a;

    --hol-purple: #8b5cf6;
    --hol-purple-dark: #6d28d9;
    --hol-purple-soft: #faf5ff;
    --hol-purple-border: #e9d5ff;

    --hol-rose: #f43f5e;
    --hol-rose-dark: #be123c;
    --hol-rose-soft: #fff1f2;
    --hol-rose-border: #fecdd3;

    --hol-border: var(--border-soft, #e2e8f0);
    --hol-border-subtle: var(--border-subtle, #f1f5f9);
    --hol-border-strong: var(--border-strong, #cbd5e1);

    --hol-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.025);
    --hol-shadow-hover: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 10px 24px -3px rgba(15, 23, 42, 0.05);

    --hol-radius-lg: 12px;
    --hol-radius-md: 8px;
    --hol-radius-sm: 6px;
    --hol-radius-pill: 9999px;

    font-family: var(--font-ui, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--hol-text-main);
    background:
        radial-gradient(circle at 4% 0%, var(--hol-accent-soft) 0, transparent 25rem),
        radial-gradient(circle at 96% 18%, var(--hol-purple-soft) 0, transparent 22rem),
        var(--hol-bg);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* ─── Dark Mode Palette ─── */
:root[data-theme="dark"] .holidays-page[b-x3t7kfajtl] {
    --hol-bg: #07101e;
    --hol-surface: #0e1a2d;
    --hol-surface-subtle: #112037;
    --hol-surface-muted: #152744;
    --hol-surface-hover: #1c3254;

    --hol-text-main: #f8fafc;
    --hol-text-secondary: #cbd5e1;
    --hol-text-muted: #94a3b8;
    --hol-text-dim: #64748b;

    --hol-accent: #3b82f6;
    --hol-accent-hover: #60a5fa;
    --hol-accent-soft: rgba(59, 130, 246, 0.14);
    --hol-accent-border: rgba(59, 130, 246, 0.35);
    --hol-gradient-accent: #2563eb;
    --hol-gradient-violet: #7c3aed;
    --hol-gradient-green-start: #059669;
    --hol-gradient-green-end: #065f46;
    --hol-gradient-orange-start: #d97706;
    --hol-gradient-orange-end: #92400e;
    --hol-gradient-rose-start: #e11d48;
    --hol-gradient-rose-end: #9f1239;

    --hol-green: #34d399;
    --hol-green-dark: #34d399;
    --hol-green-soft: rgba(16, 185, 129, 0.14);
    --hol-green-border: rgba(16, 185, 129, 0.35);

    --hol-orange: #fbbf24;
    --hol-orange-dark: #fbbf24;
    --hol-orange-soft: rgba(245, 158, 11, 0.14);
    --hol-orange-border: rgba(245, 158, 11, 0.35);

    --hol-purple: #c084fc;
    --hol-purple-dark: #c084fc;
    --hol-purple-soft: rgba(168, 85, 247, 0.14);
    --hol-purple-border: rgba(168, 85, 247, 0.35);

    --hol-rose: #fb7185;
    --hol-rose-dark: #fb7185;
    --hol-rose-soft: rgba(244, 63, 94, 0.14);
    --hol-rose-border: rgba(244, 63, 94, 0.35);

    --hol-border: #1e2e47;
    --hol-border-subtle: #17263d;
    --hol-border-strong: #2a3f60;

    --hol-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
    --hol-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT & SHELL (Header Offset + Fluid VW/VH)
   ═══════════════════════════════════════════════════════════════ */

.holidays-shell[b-x3t7kfajtl] {
    width: min(100% - 2vw, 1400px);
    margin: 0 auto;
    padding-top: calc(var(--header-offset) + 8px);
    padding-bottom: clamp(24px, 4vh, 48px);
    padding-left: clamp(12px, 1.5vw, 24px);
    padding-right: clamp(12px, 1.5vw, 24px);
    min-height: calc(100dvh - var(--header-offset));
}

.holidays-outer-grid[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    gap: clamp(12px, 1.2vw, 16px);
    align-items: start;
}

.holidays-left-col[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 16px);
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}

.holidays-main-content[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 16px);
}

/* ─── Upcoming Holidays (full width in main content) ─── */
.holidays-main-content .upcoming-holidays-panel[b-x3t7kfajtl] {
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HERO HEADER (2-COLUMN GRID WITH COUNTRY SNAPSHOT ON RIGHT)
   ═══════════════════════════════════════════════════════════════ */

.holidays-hero[b-x3t7kfajtl] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(18px, 2vw, 28px);
    border: 1px solid var(--hol-border);
    border-radius: 20px;
    background:
        linear-gradient(135deg, var(--hol-surface) 0%, var(--hol-surface-subtle) 100%);
    box-shadow: var(--hol-shadow-card);
}

.holidays-hero[b-x3t7kfajtl]::before {
    position: absolute;
    z-index: -1;
    width: 22rem;
    height: 22rem;
    top: -15rem;
    right: -5rem;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, var(--hol-accent-soft) 0%, transparent 68%);
    pointer-events: none;
}

.holidays-hero[b-x3t7kfajtl]::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--hol-gradient-accent), var(--hol-gradient-violet), transparent) 1;
    opacity: 0.55;
    pointer-events: none;
}

.holidays-hero-main[b-x3t7kfajtl] {
    min-width: 0;
}

@media (max-width: 900px) {
    .holidays-duo-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }

    .holidays-bottom-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }
}

.holidays-breadcrumb[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 8px;
}

.bc-link[b-x3t7kfajtl] {
    color: var(--hol-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.bc-link:hover[b-x3t7kfajtl] {
    color: var(--hol-accent-hover);
    text-decoration: underline;
}

.breadcrumb-sep[b-x3t7kfajtl] {
    color: var(--hol-text-dim);
    flex-shrink: 0;
}

.breadcrumb-current[b-x3t7kfajtl] {
    color: var(--hol-text-main);
    font-weight: 600;
}

#holidays-title[b-x3t7kfajtl] {
    font-size: 2.35rem;
    font-weight: 720;
    line-height: 1.05;
    margin: 0 0 6px;
    color: var(--hol-text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.holidays-flag[b-x3t7kfajtl] {
    font-size: 0.95em;
    line-height: 1;
}

.holidays-subtitle[b-x3t7kfajtl] {
    font-size: 0.9375rem;
    color: var(--hol-text-muted);
    line-height: 1.55;
    max-width: 65ch;
    margin: 0 0 12px;
}

/* ─── Controls Bar ─── */
.holidays-controls-bar[b-x3t7kfajtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.holidays-select-wrapper[b-x3t7kfajtl] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.country-select-wrap[b-x3t7kfajtl] {
    min-width: clamp(180px, 15vw, 220px);
}

.year-select-wrap[b-x3t7kfajtl] {
    min-width: 100px;
}

.select-prefix-flag[b-x3t7kfajtl] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 1.05rem;
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}

.select-prefix-icon[b-x3t7kfajtl] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--hol-text-muted);
    pointer-events: none;
    z-index: 1;
}

.select-chevron[b-x3t7kfajtl] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--hol-text-muted);
    pointer-events: none;
    z-index: 1;
}

.holidays-select[b-x3t7kfajtl] {
    appearance: none;
    width: 100%;
    height: 40px;
    background-color: var(--hol-surface);
    border: 1px solid var(--hol-border-strong);
    border-radius: var(--hol-radius-md);
    padding: 8px 32px 8px 36px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--hol-text-main);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.15s ease;
}

.year-select-wrap .holidays-select[b-x3t7kfajtl] {
    padding-left: 34px;
}

.holidays-select:hover[b-x3t7kfajtl] {
    border-color: var(--hol-accent);
}

.holidays-select:focus-visible[b-x3t7kfajtl] {
    outline: none;
    border-color: var(--hol-accent);
    box-shadow: 0 0 0 3px var(--hol-accent-soft);
}

.holidays-search-wrapper[b-x3t7kfajtl] {
    position: relative;
    flex: 1;
    min-width: clamp(200px, 20vw, 280px);
    display: inline-flex;
    align-items: center;
}

.search-icon-left[b-x3t7kfajtl] {
    position: absolute;
    left: 12px;
    color: var(--hol-text-muted);
    pointer-events: none;
}

.search-icon-right[b-x3t7kfajtl] {
    position: absolute;
    right: 12px;
    color: var(--hol-text-dim);
    pointer-events: none;
}

.holidays-search-input[b-x3t7kfajtl] {
    width: 100%;
    height: 40px;
    appearance: none;
    background-color: var(--hol-surface);
    border: 1px solid var(--hol-border-strong);
    border-radius: var(--hol-radius-md);
    padding: 8px 36px 8px 36px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--hol-text-main);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: all 0.15s ease;
}

.holidays-search-input[b-x3t7kfajtl]::placeholder {
    color: var(--hol-text-dim);
}

.holidays-search-input:focus-visible[b-x3t7kfajtl] {
    outline: none;
    border-color: var(--hol-accent);
    box-shadow: 0 0 0 3px var(--hol-accent-soft);
}

.holidays-share-btn[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--hol-accent);
    background: linear-gradient(135deg, var(--hol-accent-soft), var(--hol-purple-soft));
    border: 1px solid var(--hol-accent-border);
    border-radius: var(--hol-radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.holidays-share-btn:hover[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-accent), var(--hol-gradient-violet));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

/* ─── Filter Tabs (Pill Buttons) ─── */
.holidays-tabs[b-x3t7kfajtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
}

.holidays-tab[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--hol-text-secondary);
    background-color: var(--hol-surface);
    border: 1px solid var(--hol-border-strong);
    border-radius: var(--hol-radius-pill);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 30px;
}

.holidays-tab:hover[b-x3t7kfajtl] {
    color: var(--hol-text-main);
    background-color: var(--hol-surface-muted);
    border-color: var(--hol-border-strong);
}

.holidays-tab.is-active[b-x3t7kfajtl] {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--hol-gradient-accent), var(--hol-gradient-violet)) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.holidays-clear-filters[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hol-accent);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    margin-left: 4px;
    transition: color 0.15s ease;
}

.holidays-clear-filters:hover[b-x3t7kfajtl] {
    color: var(--hol-accent-hover);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS (5-COLUMN ROW — COMPACT & FLUID)
   ═══════════════════════════════════════════════════════════════ */

.holidays-stats[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 0.8vw, 10px);
}

.holidays-stat-card[b-x3t7kfajtl] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.8vw, 12px);
    padding: clamp(8px, 0.8vh, 10px) clamp(10px, 0.8vw, 12px);
    background-color: var(--hol-surface);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-lg);
    box-shadow: var(--hol-shadow-card);
    min-width: 0;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.holidays-stat-card[b-x3t7kfajtl]::after {
    position: absolute;
    z-index: -1;
    width: 6rem;
    height: 6rem;
    right: -2.25rem;
    bottom: -3rem;
    content: "";
    border-radius: 50%;
    opacity: 0.65;
    filter: blur(2px);
    pointer-events: none;
}

.stat-next[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-surface) 45%, var(--hol-green-soft));
}

.stat-next[b-x3t7kfajtl]::after {
    background: var(--hol-green);
}

.stat-countdown[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-surface) 45%, var(--hol-accent-soft));
}

.stat-countdown[b-x3t7kfajtl]::after {
    background: var(--hol-accent);
}

.stat-total[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-surface) 45%, var(--hol-purple-soft));
}

.stat-total[b-x3t7kfajtl]::after {
    background: var(--hol-purple);
}

.stat-long-weekend[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-surface) 45%, var(--hol-orange-soft));
}

.stat-long-weekend[b-x3t7kfajtl]::after {
    background: var(--hol-orange);
}

.stat-season[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-surface) 45%, var(--hol-rose-soft));
}

.stat-season[b-x3t7kfajtl]::after {
    background: var(--hol-rose);
}

.holidays-stat-card:hover[b-x3t7kfajtl] {
    border-color: var(--hol-border-strong);
    box-shadow: var(--hol-shadow-hover);
    transform: translateY(-1px);
}

.stat-icon-wrap[b-x3t7kfajtl] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.holidays-stat-card .stat-icon-wrap[b-x3t7kfajtl] {
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.14);
}

.holidays-stat-card .icon-green[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-green-start), var(--hol-gradient-green-end));
}

.holidays-stat-card .icon-blue[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-accent), var(--hol-gradient-violet));
}

.holidays-stat-card .icon-purple[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-violet), var(--hol-gradient-accent));
}

.holidays-stat-card .icon-orange[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-orange-start), var(--hol-gradient-orange-end));
}

.holidays-stat-card .icon-rose[b-x3t7kfajtl] {
    background: linear-gradient(135deg, var(--hol-gradient-rose-start), var(--hol-gradient-violet));
}

.icon-green[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
    background-color: var(--hol-green-soft);
    border: 1px solid var(--hol-green-border);
}

.icon-blue[b-x3t7kfajtl] {
    color: var(--hol-accent);
    background-color: var(--hol-accent-soft);
    border: 1px solid var(--hol-accent-border);
}

.icon-purple[b-x3t7kfajtl] {
    color: var(--hol-purple-dark);
    background-color: var(--hol-purple-soft);
    border: 1px solid var(--hol-purple-border);
}

.icon-orange[b-x3t7kfajtl] {
    color: var(--hol-orange-dark);
    background-color: var(--hol-orange-soft);
    border: 1px solid var(--hol-orange-border);
}

.icon-rose[b-x3t7kfajtl] {
    color: var(--hol-rose-dark);
    background-color: var(--hol-rose-soft);
    border: 1px solid var(--hol-rose-border);
}

.stat-body[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-eyebrow[b-x3t7kfajtl] {
    font-size: clamp(0.625rem, 0.65vw, 0.6875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hol-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-heading[b-x3t7kfajtl] {
    font-size: clamp(0.85rem, 1vw, 0.9375rem);
    font-weight: 800;
    color: var(--hol-text-main);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-heading-hero[b-x3t7kfajtl] {
    font-size: clamp(1.1rem, 1.3vw, 1.35rem);
}

.stat-meta[b-x3t7kfajtl] {
    font-size: 0.6875rem;
    color: var(--hol-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   PANEL BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

.holidays-panel[b-x3t7kfajtl] {
    background: linear-gradient(180deg, var(--hol-surface) 0%, var(--hol-surface-subtle) 100%);
    border: 1px solid var(--hol-border);
    border-radius: var(--hol-radius-lg);
    box-shadow: var(--hol-shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hol-border-subtle);
}

.panel-title-wrap[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-icon-flag[b-x3t7kfajtl] {
    font-size: 1.1rem;
    line-height: 1;
}

.icon-blue-text[b-x3t7kfajtl] {
    color: var(--hol-accent);
}

.panel-heading[b-x3t7kfajtl] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--hol-text-main);
    margin: 0;
    letter-spacing: -0.01em;
}

.panel-action-link[b-x3t7kfajtl] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hol-accent);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.15s ease;
}

.panel-action-link:hover[b-x3t7kfajtl] {
    color: var(--hol-accent-hover);
    text-decoration: underline;
}

.panel-action-link:disabled[b-x3t7kfajtl] {
    color: var(--hol-text-dim);
    cursor: default;
}

.panel-action-link:disabled:hover[b-x3t7kfajtl] {
    color: var(--hol-text-dim);
    text-decoration: none;
}

.calendar-pagination[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.calendar-page-label[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hol-text-secondary);
}

.panel-footer[b-x3t7kfajtl] {
    padding: 8px 14px;
    border-top: 1px solid var(--hol-border-subtle);
    background: linear-gradient(90deg, var(--hol-surface), var(--hol-surface-subtle));
}

.panel-card-body[b-x3t7kfajtl] {
    padding: 12px 14px;
}

.panel-scroll-body[b-x3t7kfajtl] {
    padding: 12px 14px;
    flex: 1;
}

.details-body-padding[b-x3t7kfajtl] {
    padding: 16px 18px;
}

.panel-empty-state[b-x3t7kfajtl] {
    padding: 24px 16px;
    text-align: center;
    color: var(--hol-text-muted);
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   UPCOMING HOLIDAYS TABLE
   ═══════════════════════════════════════════════════════════════ */

.table-responsive-wrapper[b-x3t7kfajtl] {
    overflow-x: auto;
    flex: 1;
}

.holidays-table[b-x3t7kfajtl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.holidays-table th[b-x3t7kfajtl] {
    padding: 8px 12px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hol-text-muted);
    background-color: var(--hol-surface-muted);
    border-bottom: 1px solid var(--hol-border);
    white-space: nowrap;
}

.holidays-table td[b-x3t7kfajtl] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--hol-border-subtle);
    vertical-align: middle;
    white-space: nowrap;
}

.holidays-table tbody tr[b-x3t7kfajtl] {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.holidays-table tbody tr:hover[b-x3t7kfajtl] {
    background: linear-gradient(90deg, var(--hol-surface-muted), var(--hol-accent-soft));
}

.holidays-table tbody tr.row-unpublished[b-x3t7kfajtl] {
    cursor: default;
}

.holidays-table tbody tr.row-unpublished:hover[b-x3t7kfajtl] {
    background: transparent;
}

.holidays-table tbody tr:focus-visible[b-x3t7kfajtl] {
    outline: 2px solid var(--hol-accent);
    outline-offset: -2px;
}

.holidays-table tbody tr.row-selected[b-x3t7kfajtl] {
    background: linear-gradient(90deg, var(--hol-accent-soft), var(--hol-purple-soft));
}

.holidays-table tbody tr.row-today[b-x3t7kfajtl] {
    background: linear-gradient(90deg, var(--hol-green-soft), var(--hol-surface));
}

.col-holiday-name[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--hol-text-main);
    min-width: 140px;
}

.holiday-icon[b-x3t7kfajtl] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.col-date[b-x3t7kfajtl], .col-day[b-x3t7kfajtl] {
    color: var(--hol-text-secondary);
}

.col-region[b-x3t7kfajtl] {
    color: var(--hol-text-muted);
    font-size: 0.75rem;
}

/* ─── Pill Badges ─── */
.pill-badge[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--hol-radius-pill);
    white-space: nowrap;
}

.pill-type-public[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
    background-color: var(--hol-green-soft);
    border: 1px solid var(--hol-green-border);
}

.pill-type-school[b-x3t7kfajtl] {
    color: var(--hol-purple-dark);
    background-color: var(--hol-purple-soft);
    border: 1px solid var(--hol-purple-border);
}

.pill-type-observance[b-x3t7kfajtl] {
    color: var(--hol-orange-dark);
    background-color: var(--hol-orange-soft);
    border: 1px solid var(--hol-orange-border);
}

.pill-status-upcoming[b-x3t7kfajtl] {
    color: var(--hol-accent);
    background-color: var(--hol-accent-soft);
}

.pill-status-today[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
    background-color: var(--hol-green-soft);
    font-weight: 700;
}

.pill-status-past[b-x3t7kfajtl] {
    color: var(--hol-text-muted);
    background-color: var(--hol-surface-muted);
}

.days-pill[b-x3t7kfajtl] {
    font-weight: 600;
}

.days-upcoming[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
}

.days-past[b-x3t7kfajtl] {
    color: var(--hol-text-muted);
}

.days-today[b-x3t7kfajtl] {
    color: var(--hol-accent);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   FULL ROW 2026 HOLIDAY CALENDAR PANEL
   ═══════════════════════════════════════════════════════════════ */

.calendar-full-row[b-x3t7kfajtl] {
    width: 100%;
}

.calendar-legend[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.legend-badge[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hol-text-muted);
}

.dot[b-x3t7kfajtl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.dot-green[b-x3t7kfajtl] {
    background-color: var(--hol-green);
}

.dot-blue[b-x3t7kfajtl] {
    background-color: var(--hol-accent);
}

.calendar-grid-body[b-x3t7kfajtl] {
    padding: 12px 14px;
    flex: 1;
}

.calendar-months-grid[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 14px;
}

@media (max-width: 1100px) {
    .calendar-months-grid[b-x3t7kfajtl] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .calendar-months-grid[b-x3t7kfajtl] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 440px) {
    .calendar-months-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }
}

.mini-month-card[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--hol-surface-subtle);
    border: 1px solid var(--hol-border-subtle);
    border-radius: var(--hol-radius-md);
    padding: 8px;
}

.mini-month-header-label[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hol-text-main);
    text-align: center;
    margin-bottom: 2px;
}

.mini-weekdays-row[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-weekdays-row span[b-x3t7kfajtl] {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--hol-text-dim);
    text-align: center;
    line-height: 1.2;
}

.mini-days-matrix[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* Interactive date cell resets */
button.matrix-cell[b-x3t7kfajtl],
a.matrix-cell[b-x3t7kfajtl] {
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    appearance: none;
}

.holiday-name-link[b-x3t7kfajtl] {
    color: inherit;
    text-decoration: none;
}

.holiday-name-link:hover[b-x3t7kfajtl],
.holiday-name-link:focus-visible[b-x3t7kfajtl] {
    color: var(--hol-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.holiday-name-static[b-x3t7kfajtl] {
    color: inherit;
}

.matrix-cell:focus-visible[b-x3t7kfajtl] {
    outline: 2px solid var(--hol-accent);
    outline-offset: 2px;
}

.matrix-cell[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 500;
    width: 100%;
    aspect-ratio: 1;
    color: var(--hol-text-muted);
    border-radius: 50%;
    transition: all 0.12s ease;
}

.matrix-cell:hover:not(.cell-empty)[b-x3t7kfajtl] {
    background-color: var(--hol-surface-hover);
    color: var(--hol-text-main);
    transform: scale(1.18);
    font-weight: 700;
}

.cell-empty[b-x3t7kfajtl] {
    visibility: hidden;
    pointer-events: none;
}

.cell-public[b-x3t7kfajtl] {
    background-color: var(--hol-green-soft) !important;
    color: var(--hol-green-dark) !important;
    font-weight: 700 !important;
    border: 1px solid var(--hol-green-border);
}

.cell-longweekend[b-x3t7kfajtl] {
    background-color: var(--hol-accent-soft) !important;
    color: var(--hol-accent) !important;
    font-weight: 700 !important;
    border: 1px solid var(--hol-accent-border);
}

.cell-school[b-x3t7kfajtl] {
    background-color: var(--hol-purple-soft) !important;
    color: var(--hol-purple-dark) !important;
    font-weight: 600 !important;
}

.cell-today[b-x3t7kfajtl] {
    box-shadow: 0 0 0 2px var(--hol-accent);
    font-weight: 800;
}

.cell-selected[b-x3t7kfajtl] {
    box-shadow: 0 0 0 2px var(--hol-orange-dark) !important;
    background-color: var(--hol-orange-soft) !important;
    color: var(--hol-orange-dark) !important;
    font-weight: 800 !important;
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM 3-COLUMN PANELS
   ═══════════════════════════════════════════════════════════════ */

.holidays-bottom-grid[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1vw, 14px);
    grid-column: 1 / -1;
    grid-row: 2;
}

.bottom-panel[b-x3t7kfajtl] {
    min-height: 0;
    height: clamp(300px, 24vw, 340px);
}

.bottom-panel .panel-header[b-x3t7kfajtl] {
    padding: 11px 14px;
}

.bottom-panel .panel-footer[b-x3t7kfajtl] {
    padding: 9px 14px;
}

.bottom-panel .panel-scroll-body[b-x3t7kfajtl] {
    padding: 12px 14px;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hol-border-strong) transparent;
}

.bottom-panel .panel-scroll-body[b-x3t7kfajtl]::-webkit-scrollbar {
    width: 7px;
}

.bottom-panel .panel-scroll-body[b-x3t7kfajtl]::-webkit-scrollbar-thumb {
    background-color: var(--hol-border-strong);
    border-radius: var(--hol-radius-pill);
}

.bottom-panel .panel-heading[b-x3t7kfajtl] {
    font-size: 0.875rem;
    letter-spacing: 0;
}

.bottom-panel .panel-action-link[b-x3t7kfajtl] {
    font-size: 0.75rem;
}

/* ─── Long Weekends Feed ─── */
.long-weekend-feed[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.lw-feed-item[b-x3t7kfajtl] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 10px;
    background-color: var(--hol-surface-subtle);
    border: 1px solid var(--hol-border-subtle);
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lw-feed-item:hover[b-x3t7kfajtl] {
    background-color: var(--hol-surface-muted);
    border-color: var(--hol-border-strong);
}

.lw-date-tag[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    background-color: var(--hol-accent-soft);
    border: 1px solid var(--hol-accent-border);
    border-radius: 7px;
    flex-shrink: 0;
}

.lw-tag-month[b-x3t7kfajtl] {
    font-size: 0.5625rem;
    font-weight: 800;
    color: var(--hol-accent);
    line-height: 1;
}

.lw-tag-days[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--hol-accent);
    line-height: 1.2;
}

.lw-item-details[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.lw-item-title-row[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.lw-holiday-title[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hol-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-bridge-orange[b-x3t7kfajtl] {
    color: var(--hol-orange-dark);
    background-color: var(--hol-orange-soft);
    border: 1px solid var(--hol-orange-border);
}

.badge-weekend-green[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
    background-color: var(--hol-green-soft);
    border: 1px solid var(--hol-green-border);
}

.lw-item-sub[b-x3t7kfajtl] {
    font-size: 0.7rem;
    color: var(--hol-text-secondary);
}

.lw-item-advice[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6625rem;
    color: var(--hol-text-muted);
}

.lw-advice-icon[b-x3t7kfajtl] {
    font-size: 0.78rem;
    line-height: 1;
}

/* ─── Holiday Details Panel (Fireworks Graphic Banner) ─── */
.holiday-details-panel[b-x3t7kfajtl] {
    position: relative;
}

.details-fireworks-hero[b-x3t7kfajtl] {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0b192c 0%, #1e3a8a 50%, #312e81 100%);
    overflow: hidden;
    margin-bottom: 8px;
}

.fireworks-stars[b-x3t7kfajtl] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.3;
}

.fireworks-spark[b-x3t7kfajtl] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px #fbbf24;
}

.f1[b-x3t7kfajtl] { top: 15px; left: 20%; background-color: #fbbf24; }
.f2[b-x3t7kfajtl] { top: 24px; right: 25%; background-color: #f43f5e; box-shadow: 0 0 10px 3px #f43f5e; }
.f3[b-x3t7kfajtl] { top: 10px; right: 45%; background-color: #60a5fa; box-shadow: 0 0 10px 3px #60a5fa; }

.capitol-dome-silhouette[b-x3t7kfajtl] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.15);
    clip-path: polygon(50% 0%, 80% 40%, 100% 100%, 0% 100%, 20% 40%);
}

.details-info-header[b-x3t7kfajtl] {
    margin-bottom: 9px;
}

.details-main-title[b-x3t7kfajtl] {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--hol-text-main);
    margin: 0 0 5px;
}

.details-meta-line[b-x3t7kfajtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    font-size: 0.7rem;
}

.meta-field[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.meta-lbl[b-x3t7kfajtl] {
    color: var(--hol-text-muted);
}

.meta-val[b-x3t7kfajtl] {
    color: var(--hol-text-main);
    font-weight: 600;
}

.details-subnote[b-x3t7kfajtl] {
    font-size: 0.7rem;
    color: var(--hol-text-muted);
    margin-bottom: 6px;
}

.details-description[b-x3t7kfajtl] {
    font-size: 0.75rem;
    color: var(--hol-text-secondary);
    line-height: 1.45;
    margin: 0 0 11px;
}

.subhead-uppercase[b-x3t7kfajtl] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hol-text-muted);
    margin: 0 0 5px;
}

.activities-pill-row[b-x3t7kfajtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.activity-chip[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--hol-text-main);
    background-color: var(--hol-surface-muted);
    border: 1px solid var(--hol-border-subtle);
    border-radius: var(--hol-radius-pill);
}

.details-affects-grid[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--hol-border-subtle);
}

.affects-col[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.affects-label[b-x3t7kfajtl] {
    font-size: 0.625rem;
    color: var(--hol-text-muted);
}

.affects-val[b-x3t7kfajtl] {
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.val-yes[b-x3t7kfajtl] {
    color: var(--hol-green-dark);
}

/* ─── Compare Countries Feed ─── */
.panel-intro-hint[b-x3t7kfajtl] {
    font-size: 0.7rem;
    color: var(--hol-text-muted);
    margin: 0 0 9px;
}

.compare-feed[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compare-row-btn[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    background-color: var(--hol-surface-subtle);
    border: 1px solid var(--hol-border-subtle);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.15s ease;
}

.compare-row-btn:hover[b-x3t7kfajtl] {
    background-color: var(--hol-surface-muted);
    border-color: var(--hol-border-strong);
}

.compare-flag-emoji[b-x3t7kfajtl] {
    font-size: 1rem;
    line-height: 1;
}

.compare-country-name[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--hol-text-main);
    flex: 1;
}

.compare-holiday-sample[b-x3t7kfajtl] {
    font-size: 0.7rem;
    color: var(--hol-text-secondary);
}

.compare-date-sample[b-x3t7kfajtl] {
    font-size: 0.625rem;
    color: var(--hol-text-muted);
    margin-left: 4px;
}

.compare-row-chevron[b-x3t7kfajtl] {
    color: var(--hol-text-dim);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RIGHT SIDEBAR (Attribution, Note, Explore Links)
   ═══════════════════════════════════════════════════════════════ */

.holidays-sidebar[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.2vw, 16px);
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
}

.sidebar-card[b-x3t7kfajtl] {
    box-shadow: var(--hol-shadow-card);
    background: linear-gradient(180deg, var(--hol-surface) 0%, var(--hol-surface-subtle) 100%);
}

.snapshot-dl[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
}

.snapshot-row[b-x3t7kfajtl] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.snapshot-icon-cell[b-x3t7kfajtl] {
    color: var(--hol-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.snapshot-content-cell[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
}

.snapshot-dt[b-x3t7kfajtl] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hol-text-muted);
}

.snapshot-dd[b-x3t7kfajtl] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hol-text-main);
    margin: 0;
}

.snapshot-subtext[b-x3t7kfajtl] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--hol-text-muted);
}

.explore-nav-list[b-x3t7kfajtl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.explore-nav-item[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--hol-text-secondary);
    text-decoration: none;
    border-radius: var(--hol-radius-sm);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}

.explore-nav-item:hover[b-x3t7kfajtl] {
    color: var(--hol-accent);
    background-color: var(--hol-surface-muted);
}

.explore-nav-item svg[b-x3t7kfajtl] {
    color: var(--hol-text-muted);
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.explore-nav-item:hover svg[b-x3t7kfajtl] {
    color: var(--hol-accent);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .holidays-outer-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }

    .holidays-left-col[b-x3t7kfajtl],
    .holidays-sidebar[b-x3t7kfajtl],
    .holidays-bottom-grid[b-x3t7kfajtl] {
        grid-column: 1;
        grid-row: auto;
    }

    .holidays-stats[b-x3t7kfajtl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .holidays-bottom-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }

    .bottom-panel[b-x3t7kfajtl] {
        height: auto;
    }

    .bottom-panel .panel-scroll-body[b-x3t7kfajtl] {
        overflow-y: visible;
    }
}

@media (max-width: 640px) {
    #holidays-title[b-x3t7kfajtl] {
        font-size: 2rem;
    }

    .holidays-stats[b-x3t7kfajtl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .holidays-controls-bar[b-x3t7kfajtl] {
        flex-direction: column;
        align-items: stretch;
    }

    .country-select-wrap[b-x3t7kfajtl], .year-select-wrap[b-x3t7kfajtl], .holidays-search-wrapper[b-x3t7kfajtl] {
        width: 100%;
    }

    .details-affects-grid[b-x3t7kfajtl] {
        grid-template-columns: 1fr;
    }

    .compare-row-btn[b-x3t7kfajtl] {
        flex-wrap: wrap;
    }

    .compare-country-name[b-x3t7kfajtl] {
        flex-basis: calc(100% - 46px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR COMPACT CALENDAR
   ═══════════════════════════════════════════════════════════════ */

.sidebar-calendar-card[b-x3t7kfajtl] {
    position: relative;
    overflow: hidden;
    box-shadow: var(--hol-shadow-card);
}

.sidebar-calendar-card[b-x3t7kfajtl]::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--hol-gradient-accent), var(--hol-gradient-violet), var(--hol-gradient-rose-end));
    opacity: 0.8;
}

.sidebar-calendar-card .panel-icon[b-x3t7kfajtl] {
    filter: drop-shadow(0 3px 5px rgba(37, 99, 235, 0.2));
}

.sidebar-calendar-card .panel-header[b-x3t7kfajtl] {
    padding: 10px 12px 8px;
}

.sidebar-calendar-card .panel-title-wrap[b-x3t7kfajtl] {
    min-width: 0;
}

.sidebar-calendar-card .panel-heading[b-x3t7kfajtl] {
    font-size: 0.9rem;
    line-height: 1.15;
}

.sidebar-calendar-body[b-x3t7kfajtl] {
    padding: 8px 12px 2px;
}

.sidebar-cal-nav[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 8px;
    gap: 6px;
}

.sidebar-cal-btn[b-x3t7kfajtl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--hol-text-secondary);
    background: var(--hol-surface-subtle);
    border: 1px solid var(--hol-border);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.sidebar-cal-btn:hover:not(:disabled)[b-x3t7kfajtl] {
    background: var(--hol-accent-soft);
    color: var(--hol-accent);
    border-color: var(--hol-accent-border);
    transform: scale(1.08);
}

.sidebar-cal-btn:active:not(:disabled)[b-x3t7kfajtl] {
    transform: scale(0.95);
}

.sidebar-cal-btn:focus-visible[b-x3t7kfajtl] {
    outline: 2px solid var(--hol-accent);
    outline-offset: 2px;
}

.sidebar-cal-btn-today[b-x3t7kfajtl] {
    color: var(--hol-accent);
    border-color: var(--hol-accent-border);
    background: var(--hol-accent-soft);
}

.sidebar-cal-btn-today:hover:not(:disabled)[b-x3t7kfajtl] {
    background: var(--hol-accent);
    color: #fff;
    border-color: var(--hol-accent);
}

.sidebar-cal-btn:disabled[b-x3t7kfajtl] {
    opacity: 0.25;
    cursor: default;
}

.sidebar-mini-month[b-x3t7kfajtl] {
    --sidebar-cal-cell: clamp(25px, 2vw, 30px);
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.sidebar-mini-month .mini-weekdays-row[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(7, var(--sidebar-cal-cell));
    gap: 3px;
    text-align: center;
    margin-bottom: 5px;
}

.sidebar-mini-month .mini-weekdays-row span[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-cal-cell);
    height: 15px;
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--hol-text-dim);
    line-height: 1;
}

.sidebar-mini-month .mini-days-matrix[b-x3t7kfajtl] {
    display: grid;
    grid-template-columns: repeat(7, var(--sidebar-cal-cell));
    grid-auto-rows: var(--sidebar-cal-cell);
    gap: 3px;
}

.sidebar-mini-month .matrix-cell[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-cal-cell);
    height: var(--sidebar-cal-cell);
    min-width: 0;
    aspect-ratio: auto;
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--hol-text-secondary);
    background: transparent !important;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    line-height: 1;
}

.sidebar-mini-month .matrix-cell:hover:not(.cell-empty):not(.cell-today):not(.cell-public):not(.cell-longweekend):not(.cell-selected)[b-x3t7kfajtl] {
    background: var(--hol-surface-hover);
    transform: none;
}

.sidebar-mini-month .cell-empty[b-x3t7kfajtl] {
    cursor: default;
}

.sidebar-mini-month .cell-today[b-x3t7kfajtl] {
    background: var(--hol-accent-soft) !important;
    color: var(--hol-accent) !important;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--hol-accent-border);
    transform: none;
}

.sidebar-mini-month .cell-public[b-x3t7kfajtl] {
    background: var(--hol-green-soft) !important;
    color: var(--hol-green-dark) !important;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px var(--hol-green-border);
    transform: none;
}

.sidebar-mini-month .cell-longweekend[b-x3t7kfajtl] {
    background: var(--hol-accent-soft) !important;
    color: var(--hol-accent) !important;
    font-weight: 750;
    box-shadow: inset 0 0 0 1px var(--hol-accent-border);
    transform: none;
}

.sidebar-mini-month .cell-selected[b-x3t7kfajtl] {
    background: var(--hol-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
}

.sidebar-calendar-footer[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 10px;
}

.sidebar-cal-legend[b-x3t7kfajtl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--hol-text-dim);
}

.legend-dot[b-x3t7kfajtl] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 2px;
}

.dot-green[b-x3t7kfajtl] {
    background-color: var(--hol-green);
}

.dot-blue[b-x3t7kfajtl] {
    background-color: var(--hol-accent);
}

/* ─── FAQ Panel ─── */
.holidays-faq-panel[b-x3t7kfajtl] {
    margin-top: 14px;
}

.holidays-faq-list[b-x3t7kfajtl] {
    display: grid;
    gap: 0;
    padding: 0 18px 6px;
}

.holidays-faq-detail[b-x3t7kfajtl] {
    padding: 13px 0;
    border-bottom: 1px solid var(--hol-border-subtle);
}

.holidays-faq-detail:last-child[b-x3t7kfajtl] {
    border-bottom: 0;
}

.holidays-faq-question[b-x3t7kfajtl] {
    color: var(--hol-text-main);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.holidays-faq-question[b-x3t7kfajtl]::-webkit-details-marker {
    display: none;
}

.holidays-faq-answer[b-x3t7kfajtl] {
    margin: 8px 0 0;
    color: var(--hol-text-secondary);
    font-size: 0.81rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    .holidays-page *[b-x3t7kfajtl],
    .holidays-page *[b-x3t7kfajtl]::before,
    .holidays-page *[b-x3t7kfajtl]::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Components/Pages/LongWeekendsPage.razor.rz.scp.css */
/* LongWeekendsPage - Holidays product extension */

.long-weekends-page[b-q2iimuxuu0] {
    --lw-bg: var(--bg-page, #f8fafc);
    --lw-surface: var(--bg-surface-strong, #ffffff);
    --lw-surface-subtle: #f8fafc;
    --lw-surface-muted: #f1f5f9;
    --lw-surface-hover: #e2e8f0;
    --lw-text-main: var(--text-primary, #0f172a);
    --lw-text-secondary: var(--text-secondary, #334155);
    --lw-text-muted: var(--text-muted, #64748b);
    --lw-text-dim: #94a3b8;
    --lw-accent: var(--accent, #2563eb);
    --lw-accent-hover: var(--accent-hover, #1d4ed8);
    --lw-accent-soft: #eff6ff;
    --lw-accent-border: #bfdbfe;
    --lw-gradient-accent: #2563eb;
    --lw-gradient-violet: #6d28d9;
    --lw-gradient-green-start: #10b981;
    --lw-gradient-green-end: #047857;
    --lw-gradient-orange-start: #f59e0b;
    --lw-gradient-orange-end: #b45309;
    --lw-gradient-rose-start: #f43f5e;
    --lw-gradient-rose-end: #be123c;
    --lw-green: #10b981;
    --lw-green-dark: #047857;
    --lw-green-soft: #ecfdf5;
    --lw-green-border: #a7f3d0;
    --lw-orange: #f59e0b;
    --lw-orange-dark: #b45309;
    --lw-orange-soft: #fffbeb;
    --lw-orange-border: #fde68a;
    --lw-purple: #8b5cf6;
    --lw-purple-dark: #6d28d9;
    --lw-purple-soft: #faf5ff;
    --lw-purple-border: #e9d5ff;
    --lw-rose: #f43f5e;
    --lw-rose-dark: #be123c;
    --lw-rose-soft: #fff1f2;
    --lw-rose-border: #fecdd3;
    --lw-border: var(--border-soft, #e2e8f0);
    --lw-border-subtle: var(--border-subtle, #f1f5f9);
    --lw-border-strong: var(--border-strong, #cbd5e1);
    --lw-hero-surface: rgba(255, 255, 255, 0.98);
    --lw-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.045);
    --lw-shadow-hover: 0 4px 10px rgba(37, 99, 235, 0.08), 0 18px 36px rgba(15, 23, 42, 0.09);
    --lw-glow: 0 0 0 1px rgba(37, 99, 235, 0.035), 0 14px 34px rgba(37, 99, 235, 0.08);
    --lw-radius-lg: 12px;
    --lw-radius-md: 8px;
    --lw-radius-sm: 6px;
    --lw-radius-pill: 9999px;

    min-height: 100dvh;
    overflow-x: clip;
    color: var(--lw-text-main);
    font-family: var(--font-ui, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    background:
        radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--lw-accent-soft) 84%, #60a5fa) 0, transparent 30rem),
        radial-gradient(circle at 94% 14%, color-mix(in srgb, var(--lw-purple-soft) 82%, #a78bfa) 0, transparent 28rem),
        radial-gradient(circle at 48% 100%, rgba(37, 99, 235, 0.08) 0, transparent 32rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(99, 102, 241, 0.035) 100%),
        var(--lw-bg);
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .long-weekends-page[b-q2iimuxuu0] {
    --lw-bg: #07101e;
    --lw-surface: #0e1a2d;
    --lw-surface-subtle: #112037;
    --lw-surface-muted: #152744;
    --lw-surface-hover: #1c3254;
    --lw-text-main: #f8fafc;
    --lw-text-secondary: #cbd5e1;
    --lw-text-muted: #94a3b8;
    --lw-text-dim: #64748b;
    --lw-accent: #3b82f6;
    --lw-accent-hover: #60a5fa;
    --lw-accent-soft: rgba(59, 130, 246, 0.14);
    --lw-accent-border: rgba(59, 130, 246, 0.35);
    --lw-gradient-accent: #2563eb;
    --lw-gradient-violet: #7c3aed;
    --lw-gradient-green-start: #059669;
    --lw-gradient-green-end: #065f46;
    --lw-gradient-orange-start: #d97706;
    --lw-gradient-orange-end: #92400e;
    --lw-gradient-rose-start: #e11d48;
    --lw-gradient-rose-end: #9f1239;
    --lw-green: #34d399;
    --lw-green-dark: #34d399;
    --lw-green-soft: rgba(16, 185, 129, 0.14);
    --lw-green-border: rgba(16, 185, 129, 0.35);
    --lw-orange: #fbbf24;
    --lw-orange-dark: #fbbf24;
    --lw-orange-soft: rgba(245, 158, 11, 0.14);
    --lw-orange-border: rgba(245, 158, 11, 0.35);
    --lw-purple: #c084fc;
    --lw-purple-dark: #c084fc;
    --lw-purple-soft: rgba(168, 85, 247, 0.14);
    --lw-purple-border: rgba(168, 85, 247, 0.35);
    --lw-rose: #fb7185;
    --lw-rose-dark: #fb7185;
    --lw-rose-soft: rgba(244, 63, 94, 0.14);
    --lw-rose-border: rgba(244, 63, 94, 0.35);
    --lw-border: #1e2e47;
    --lw-border-subtle: #17263d;
    --lw-border-strong: #2a3f60;
    --lw-hero-surface: var(--lw-surface);
    --lw-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
    --lw-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.45);
    --lw-glow: 0 0 0 1px rgba(59, 130, 246, 0.08), 0 16px 36px rgba(0, 0, 0, 0.32);
}

.long-weekends-shell[b-q2iimuxuu0] {
    width: min(100% - 2vw, 1460px);
    min-height: calc(100dvh - var(--header-height, var(--header-h, 72px)));
    margin: 0 auto;
    padding: calc(var(--header-height, var(--header-h, 72px)) + 8px) clamp(12px, 1.5vw, 24px) clamp(24px, 4vh, 48px);
}

.lw-loading[b-q2iimuxuu0],
.lw-error[b-q2iimuxuu0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50vh;
    color: var(--lw-text-muted);
    text-align: center;
}

.lw-spinner[b-q2iimuxuu0] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--lw-border);
    border-top-color: var(--lw-accent);
    border-radius: 50%;
    animation: lw-spin-b-q2iimuxuu0 0.8s linear infinite;
}

@keyframes lw-spin-b-q2iimuxuu0 {
    to { transform: rotate(360deg); }
}

.lw-retry-btn[b-q2iimuxuu0],
.lw-outline-btn[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 13px;
    border-radius: var(--lw-radius-md);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.lw-retry-btn[b-q2iimuxuu0] {
    color: #fff;
    background: linear-gradient(135deg, var(--lw-gradient-accent), var(--lw-gradient-violet));
    border: 1px solid transparent;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.lw-outline-btn[b-q2iimuxuu0] {
    color: var(--lw-accent);
    background: linear-gradient(135deg, var(--lw-accent-soft), var(--lw-purple-soft));
    border: 1px solid var(--lw-accent-border);
}

.lw-outline-btn:hover[b-q2iimuxuu0] {
    color: #fff;
    background: linear-gradient(135deg, var(--lw-gradient-accent), var(--lw-gradient-violet));
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.lw-outline-btn[href][b-q2iimuxuu0]::after {
    content: "->";
    margin-left: 2px;
    transition: transform 0.15s ease;
}

.lw-outline-btn[href]:hover[b-q2iimuxuu0]::after {
    transform: translateX(2px);
}

.lw-breadcrumb[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    scrollbar-width: none;
}

.lw-breadcrumb[b-q2iimuxuu0]::-webkit-scrollbar {
    display: none;
}

.lw-bc-link[b-q2iimuxuu0] {
    color: var(--lw-accent);
    text-decoration: none;
}

.lw-bc-link:hover[b-q2iimuxuu0] {
    color: var(--lw-accent-hover);
    text-decoration: underline;
}

.lw-bc-sep[b-q2iimuxuu0] {
    color: var(--lw-text-dim);
    flex-shrink: 0;
}

.lw-bc-current[b-q2iimuxuu0] {
    color: var(--lw-text-main);
    font-weight: 700;
}

.lw-layout[b-q2iimuxuu0] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
    gap: clamp(12px, 1.25vw, 18px);
    align-items: start;
}

.lw-main-column[b-q2iimuxuu0],
.lw-sidebar[b-q2iimuxuu0] {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.25vw, 18px);
    min-width: 0;
}

.lw-hero[b-q2iimuxuu0] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(18px, 1.8vw, 24px);
    border: 1px solid color-mix(in srgb, var(--lw-accent-border) 70%, var(--lw-border));
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(109, 40, 217, 0.08) 44%, rgba(255, 255, 255, 0) 74%),
        linear-gradient(135deg, var(--lw-hero-surface) 0%, var(--lw-surface-subtle) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, 0 18px 44px rgba(37, 99, 235, 0.12), var(--lw-glow);
}

.lw-hero[b-q2iimuxuu0]::before {
    position: absolute;
    z-index: 0;
    width: 28rem;
    height: 28rem;
    top: -18rem;
    right: -8rem;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.24) 0%, rgba(109, 40, 217, 0.13) 42%, transparent 70%);
    pointer-events: none;
}

.lw-hero[b-q2iimuxuu0]::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, var(--lw-gradient-accent), var(--lw-gradient-violet), var(--lw-gradient-rose-end)) top left / 100% 3px no-repeat,
        linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, 0.5) 57%, transparent 71%);
    opacity: 0.72;
    pointer-events: none;
}

.lw-hero > *[b-q2iimuxuu0] {
    position: relative;
    z-index: 1;
}

.lw-hero h1[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--lw-text-main);
    font-size: clamp(2.05rem, 2.7vw, 2.8rem);
    font-weight: 800;
    line-height: 1.04;
}

.lw-flag[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 29px;
    flex: 0 0 auto;
    border: 1px solid var(--lw-border-strong);
    border-radius: 7px;
    color: var(--lw-text-main);
    background: linear-gradient(180deg, var(--lw-surface) 0%, var(--lw-surface-subtle) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.lw-flag.is-us[b-q2iimuxuu0] {
    position: relative;
    overflow: hidden;
    color: transparent;
    background: repeating-linear-gradient(
        to bottom,
        #ef4444 0 7.7%,
        #ffffff 7.7% 15.4%
    );
    border-color: #d5deec;
}

.lw-select-flag.is-us[b-q2iimuxuu0] {
    overflow: hidden;
    color: transparent;
    background: repeating-linear-gradient(
        to bottom,
        #ef4444 0 7.7%,
        #ffffff 7.7% 15.4%
    );
    border-color: #d5deec;
}

.lw-flag.is-us[b-q2iimuxuu0]::before,
.lw-select-flag.is-us[b-q2iimuxuu0]::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 54%;
    content: "";
    background: #1d4ed8;
}

.lw-subtitle[b-q2iimuxuu0] {
    max-width: 82ch;
    margin: 0 0 15px;
    color: var(--lw-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.lw-controls-bar[b-q2iimuxuu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}

.lw-select-wrapper[b-q2iimuxuu0],
.lw-search-wrapper[b-q2iimuxuu0] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.country-select-wrap[b-q2iimuxuu0] {
    min-width: clamp(190px, 17vw, 260px);
}

.year-select-wrap[b-q2iimuxuu0] {
    min-width: 130px;
}

.lw-search-wrapper[b-q2iimuxuu0] {
    flex: 1;
    min-width: clamp(220px, 25vw, 420px);
}

.lw-select-flag[b-q2iimuxuu0],
.lw-select-prefix[b-q2iimuxuu0],
.lw-search-icon[b-q2iimuxuu0] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--lw-text-muted);
    pointer-events: none;
}

.lw-select-flag[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 17px;
    border: 1px solid var(--lw-border);
    border-radius: 4px;
    color: var(--lw-text-secondary);
    background: var(--lw-surface-subtle);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.02em;
    line-height: 1;
}

.lw-select-chevron[b-q2iimuxuu0] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--lw-text-muted);
    pointer-events: none;
}

.lw-select[b-q2iimuxuu0],
.lw-search-input[b-q2iimuxuu0] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--lw-border-strong);
    border-radius: var(--lw-radius-md);
    color: var(--lw-text-main);
    background: var(--lw-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font: inherit;
    font-size: 0.84rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lw-select[b-q2iimuxuu0] {
    appearance: none;
    padding: 8px 34px 8px 36px;
    font-weight: 700;
    cursor: pointer;
}

.country-select-wrap .lw-select[b-q2iimuxuu0] {
    padding-left: 46px;
}

.lw-search-input[b-q2iimuxuu0] {
    padding: 8px 34px 8px 38px;
    font-weight: 500;
}

.lw-search-input[b-q2iimuxuu0]::placeholder {
    color: var(--lw-text-dim);
}

.lw-select:hover[b-q2iimuxuu0],
.lw-search-input:hover[b-q2iimuxuu0] {
    border-color: var(--lw-accent);
}

.lw-select:focus-visible[b-q2iimuxuu0],
.lw-search-input:focus-visible[b-q2iimuxuu0],
.lw-filter-pill:focus-visible[b-q2iimuxuu0],
.lw-clear-filter:focus-visible[b-q2iimuxuu0],
.lw-outline-btn:focus-visible[b-q2iimuxuu0],
.lw-favorite-btn:focus-visible[b-q2iimuxuu0] {
    outline: none;
    border-color: var(--lw-accent);
    box-shadow: 0 0 0 3px var(--lw-accent-soft);
}

.lw-filter-row[b-q2iimuxuu0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.lw-filter-pill[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 31px;
    padding: 0 11px;
    border: 1px solid var(--lw-border-strong);
    border-radius: var(--lw-radius-md);
    color: var(--lw-text-secondary);
    background: var(--lw-surface);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.lw-filter-pill svg[b-q2iimuxuu0] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lw-filter-pill[b-q2iimuxuu0]  svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lw-filter-pill:hover[b-q2iimuxuu0] {
    color: var(--lw-accent);
    background: linear-gradient(135deg, var(--lw-accent-soft), var(--lw-purple-soft));
    border-color: var(--lw-accent-border);
}

.lw-filter-pill.is-active[b-q2iimuxuu0] {
    color: #fff;
    background: linear-gradient(135deg, var(--lw-gradient-accent), var(--lw-gradient-violet));
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.lw-clear-filter[b-q2iimuxuu0] {
    height: 32px;
    padding: 0 8px;
    border: 0;
    color: var(--lw-accent);
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.lw-stats-row[b-q2iimuxuu0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 0.8vw, 12px);
}

.lw-stat-card[b-q2iimuxuu0] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 86px;
    padding: 13px 16px;
    border: 1px solid color-mix(in srgb, var(--lw-accent-border) 50%, var(--lw-border));
    border-radius: var(--lw-radius-lg);
    background: linear-gradient(135deg, var(--lw-surface) 45%, var(--lw-accent-soft));
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset, var(--lw-shadow-card);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lw-stat-card[b-q2iimuxuu0]::after {
    position: absolute;
    z-index: 0;
    width: 7rem;
    height: 7rem;
    right: -2.75rem;
    bottom: -3.75rem;
    content: "";
    border-radius: 50%;
    opacity: 0.18;
    filter: blur(1px);
    pointer-events: none;
}

.lw-stat-card:nth-child(1)[b-q2iimuxuu0] {
    background: linear-gradient(135deg, var(--lw-surface) 35%, color-mix(in srgb, var(--lw-green-soft) 78%, #a7f3d0));
}

.lw-stat-card:nth-child(1)[b-q2iimuxuu0]::after {
    background: var(--lw-green);
}

.lw-stat-card:nth-child(2)[b-q2iimuxuu0] {
    background: linear-gradient(135deg, var(--lw-surface) 35%, color-mix(in srgb, var(--lw-accent-soft) 78%, #93c5fd));
}

.lw-stat-card:nth-child(2)[b-q2iimuxuu0]::after {
    background: var(--lw-accent);
}

.lw-stat-card:nth-child(3)[b-q2iimuxuu0] {
    background: linear-gradient(135deg, var(--lw-surface) 35%, color-mix(in srgb, var(--lw-purple-soft) 78%, #c4b5fd));
}

.lw-stat-card:nth-child(3)[b-q2iimuxuu0]::after {
    background: var(--lw-purple);
}

.lw-stat-card:nth-child(4)[b-q2iimuxuu0] {
    background: linear-gradient(135deg, var(--lw-surface) 35%, color-mix(in srgb, var(--lw-rose-soft) 78%, #fda4af));
}

.lw-stat-card:nth-child(4)[b-q2iimuxuu0]::after {
    background: var(--lw-rose);
}

.lw-stat-card:hover[b-q2iimuxuu0] {
    border-color: var(--lw-accent-border);
    box-shadow: var(--lw-shadow-hover);
    transform: translateY(-1px);
}

.lw-stat-card > *[b-q2iimuxuu0] {
    position: relative;
    z-index: 1;
}

.lw-stat-icon[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    flex-shrink: 0;
    border-radius: 10px;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.14);
}

.lw-stat-icon svg[b-q2iimuxuu0],
.lw-side-header svg[b-q2iimuxuu0],
.lw-explore-list svg[b-q2iimuxuu0] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lw-stat-icon[b-q2iimuxuu0]  svg,
.lw-side-header[b-q2iimuxuu0]  svg,
.lw-explore-list[b-q2iimuxuu0]  svg,
.lw-planning-icon[b-q2iimuxuu0]  svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-green[b-q2iimuxuu0] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--lw-gradient-green-start), var(--lw-gradient-green-end));
    border: 1px solid transparent;
}

.icon-blue[b-q2iimuxuu0] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--lw-gradient-accent), var(--lw-gradient-violet));
    border: 1px solid transparent;
}

.icon-purple[b-q2iimuxuu0] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--lw-gradient-violet), var(--lw-gradient-accent));
    border: 1px solid transparent;
}

.icon-rose[b-q2iimuxuu0] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--lw-gradient-rose-start), var(--lw-gradient-violet));
    border: 1px solid transparent;
}

.lw-stat-eyebrow[b-q2iimuxuu0],
.lw-next-eyebrow[b-q2iimuxuu0] {
    display: block;
    color: var(--lw-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.lw-stat-number[b-q2iimuxuu0] {
    display: block;
    color: var(--lw-text-main);
    font-size: 1.5rem;
    font-weight: 840;
    line-height: 1.05;
}

.lw-stat-meta[b-q2iimuxuu0] {
    display: block;
    color: var(--lw-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.lw-next-card[b-q2iimuxuu0],
.lw-planning-card[b-q2iimuxuu0],
.lw-link-panel[b-q2iimuxuu0],
.lw-faq-section[b-q2iimuxuu0],
.lw-info-card[b-q2iimuxuu0],
.lw-table-panel[b-q2iimuxuu0],
.lw-side-card[b-q2iimuxuu0] {
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-lg);
    background: linear-gradient(180deg, var(--lw-surface) 0%, var(--lw-surface-subtle) 100%);
    box-shadow: var(--lw-shadow-card);
}

.lw-next-card[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.lw-next-copy[b-q2iimuxuu0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lw-next-copy strong[b-q2iimuxuu0] {
    color: var(--lw-text-main);
    font-size: 0.98rem;
}

.lw-next-copy span:last-child[b-q2iimuxuu0] {
    color: var(--lw-text-secondary);
    font-size: 0.78rem;
}

.lw-table-panel[b-q2iimuxuu0] {
    overflow: hidden;
}

.lw-panel-header[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--lw-border-subtle);
}

.lw-panel-header h2[b-q2iimuxuu0],
.lw-side-card h2[b-q2iimuxuu0],
.lw-info-card h2[b-q2iimuxuu0],
.lw-planning-card h2[b-q2iimuxuu0],
.lw-link-panel h2[b-q2iimuxuu0],
.lw-faq-heading[b-q2iimuxuu0] {
    margin: 0;
    color: var(--lw-text-main);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.2;
}

.lw-panel-header p[b-q2iimuxuu0] {
    margin: 3px 0 0;
    color: var(--lw-text-muted);
    font-size: 0.75rem;
}

.lw-table-legend[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--lw-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.legend-dot[b-q2iimuxuu0] {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-radius: 50%;
}

.dot-green[b-q2iimuxuu0] { background: var(--lw-green); }
.dot-blue[b-q2iimuxuu0] { background: var(--lw-accent); }

.lw-table-wrap[b-q2iimuxuu0] {
    overflow-x: auto;
    scrollbar-color: var(--lw-accent-border) transparent;
    scrollbar-width: thin;
}

.lw-table-wrap[b-q2iimuxuu0]::-webkit-scrollbar {
    height: 8px;
}

.lw-table-wrap[b-q2iimuxuu0]::-webkit-scrollbar-track {
    background: transparent;
}

.lw-table-wrap[b-q2iimuxuu0]::-webkit-scrollbar-thumb {
    border: 2px solid var(--lw-surface);
    border-radius: var(--lw-radius-pill);
    background: var(--lw-accent-border);
}

.lw-table[b-q2iimuxuu0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lw-table th[b-q2iimuxuu0] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--lw-border);
    color: var(--lw-text-muted);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--lw-accent-soft) 48%, transparent), transparent 60%),
        linear-gradient(180deg, var(--lw-surface-muted) 0%, var(--lw-surface-subtle) 100%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.lw-table td[b-q2iimuxuu0] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--lw-border-subtle);
    color: var(--lw-text-secondary);
    vertical-align: middle;
    white-space: nowrap;
}

.lw-table tbody tr[b-q2iimuxuu0] {
    transition: background-color 0.12s ease;
}

.lw-table tbody tr:hover[b-q2iimuxuu0] {
    background: linear-gradient(90deg, var(--lw-accent-soft), color-mix(in srgb, var(--lw-purple-soft) 38%, var(--lw-surface)));
}

.lw-period-cell[b-q2iimuxuu0],
.lw-table-link[b-q2iimuxuu0] {
    color: var(--lw-text-main);
    font-weight: 760;
}

.lw-table-link[b-q2iimuxuu0] {
    text-decoration: none;
}

.lw-table-link:hover[b-q2iimuxuu0] {
    color: var(--lw-accent);
    text-decoration: underline;
}

.lw-weekend-badge[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    min-height: 21px;
    padding: 2px 8px;
    border-radius: var(--lw-radius-pill);
    font-size: 0.66rem;
    font-weight: 800;
}

.badge-weekend-green[b-q2iimuxuu0] {
    color: var(--lw-green-dark);
    background: linear-gradient(135deg, var(--lw-green-soft), color-mix(in srgb, var(--lw-green-soft) 62%, var(--lw-surface)));
    border: 1px solid var(--lw-green-border);
}

.badge-weekend-blue[b-q2iimuxuu0] {
    color: var(--lw-accent);
    background: linear-gradient(135deg, var(--lw-accent-soft), var(--lw-purple-soft));
    border: 1px solid var(--lw-accent-border);
}

.badge-bridge-orange[b-q2iimuxuu0] {
    color: var(--lw-orange-dark);
    background: linear-gradient(135deg, var(--lw-orange-soft), color-mix(in srgb, var(--lw-orange-soft) 65%, var(--lw-surface)));
    border: 1px solid var(--lw-orange-border);
}

.lw-occasion-upcoming[b-q2iimuxuu0] {
    color: var(--lw-green-dark);
    font-weight: 800;
}

.lw-occasion-past[b-q2iimuxuu0] {
    color: var(--lw-text-muted);
    font-weight: 700;
}

.lw-empty-state[b-q2iimuxuu0] {
    padding: 28px 18px;
    color: var(--lw-text-muted);
    text-align: center;
}

.lw-planning-card[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at 7% 28%, rgba(37, 99, 235, 0.12) 0, transparent 5.5rem),
        linear-gradient(135deg, var(--lw-surface) 0%, var(--lw-accent-soft) 100%);
}

.lw-planning-icon[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 14px;
    color: var(--lw-accent);
    background: linear-gradient(180deg, var(--lw-surface) 0%, var(--lw-surface-subtle) 100%);
    border: 1px solid var(--lw-accent-border);
    font-size: 1.7rem;
}

.lw-planning-icon[b-q2iimuxuu0]  svg {
    width: 26px;
    height: 26px;
}

.lw-planning-card p[b-q2iimuxuu0],
.lw-info-card p[b-q2iimuxuu0],
.lw-side-card p[b-q2iimuxuu0],
.lw-faq-answer[b-q2iimuxuu0] {
    color: var(--lw-text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
}

.lw-planning-card p[b-q2iimuxuu0] {
    margin: 6px 0 12px;
}

.lw-seo-grid[b-q2iimuxuu0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.2vw, 16px);
}

.lw-info-card[b-q2iimuxuu0],
.lw-link-panel[b-q2iimuxuu0],
.lw-faq-section[b-q2iimuxuu0] {
    padding: 17px 18px;
}

.lw-info-card p[b-q2iimuxuu0] {
    margin: 10px 0 0;
}

.lw-mini-table[b-q2iimuxuu0] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.lw-mini-table div[b-q2iimuxuu0] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--lw-border-subtle);
    border-radius: var(--lw-radius-md);
    background: var(--lw-surface-subtle);
    color: var(--lw-text-secondary);
    font-size: 0.75rem;
}

.lw-mini-table strong[b-q2iimuxuu0] {
    color: var(--lw-text-main);
}

.lw-month-links[b-q2iimuxuu0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.lw-month-links a[b-q2iimuxuu0] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--lw-border);
    border-radius: var(--lw-radius-pill);
    color: var(--lw-accent);
    background: var(--lw-accent-soft);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.lw-month-links a:hover[b-q2iimuxuu0] {
    color: #fff;
    background: var(--lw-accent);
    border-color: var(--lw-accent);
}

.lw-faq-list[b-q2iimuxuu0] {
    display: grid;
    gap: 0;
    margin-top: 12px;
}

.lw-faq-detail[b-q2iimuxuu0] {
    padding: 12px 0;
    border-bottom: 1px solid var(--lw-border-subtle);
}

.lw-faq-detail:last-child[b-q2iimuxuu0] {
    border-bottom: 0;
}

.lw-faq-question[b-q2iimuxuu0] {
    color: var(--lw-text-main);
    font-size: 0.82rem;
    font-weight: 760;
    cursor: pointer;
    list-style: none;
}

.lw-faq-question[b-q2iimuxuu0]::-webkit-details-marker {
    display: none;
}

.lw-faq-answer[b-q2iimuxuu0] {
    margin: 8px 0 0;
}

.lw-side-card[b-q2iimuxuu0] {
    position: relative;
    overflow: hidden;
    padding: 17px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lw-side-card:first-child[b-q2iimuxuu0]::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--lw-gradient-accent), var(--lw-gradient-violet), var(--lw-gradient-rose-end));
    opacity: 0.8;
}

.lw-side-card:hover[b-q2iimuxuu0] {
    border-color: var(--lw-accent-border);
    box-shadow: var(--lw-shadow-hover);
    transform: translateY(-1px);
}

.lw-side-header[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--lw-accent);
}

.lw-side-list[b-q2iimuxuu0] {
    display: grid;
    gap: 0;
    margin: 0 0 14px;
}

.lw-side-list div[b-q2iimuxuu0] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid var(--lw-border-subtle);
}

.lw-side-list div:first-child[b-q2iimuxuu0] {
    border-top: 0;
    padding-top: 0;
}

.lw-side-list dt[b-q2iimuxuu0] {
    color: var(--lw-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.lw-side-list dd[b-q2iimuxuu0] {
    margin: 0;
    color: var(--lw-text-main);
    font-size: 0.78rem;
    font-weight: 760;
    text-align: right;
}

.lw-explore-list[b-q2iimuxuu0] {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}

.lw-explore-list a[b-q2iimuxuu0] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: var(--lw-radius-sm);
    color: var(--lw-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.lw-explore-list a:hover[b-q2iimuxuu0] {
    color: var(--lw-accent);
    background: linear-gradient(135deg, var(--lw-accent-soft), var(--lw-purple-soft));
    transform: translateX(2px);
}

.lw-source-note[b-q2iimuxuu0] {
    margin: 0 6px;
    padding: 0 2px;
    color: var(--lw-text-muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .lw-layout[b-q2iimuxuu0] {
        grid-template-columns: 1fr;
    }

    .lw-stats-row[b-q2iimuxuu0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .lw-hero h1[b-q2iimuxuu0] {
        font-size: 1.9rem;
    }

    .lw-controls-bar[b-q2iimuxuu0] {
        flex-direction: column;
        align-items: stretch;
    }

    .country-select-wrap[b-q2iimuxuu0],
    .year-select-wrap[b-q2iimuxuu0],
    .lw-search-wrapper[b-q2iimuxuu0] {
        width: 100%;
    }

    .lw-panel-header[b-q2iimuxuu0],
    .lw-next-card[b-q2iimuxuu0],
    .lw-planning-card[b-q2iimuxuu0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .lw-panel-header[b-q2iimuxuu0] {
        gap: 8px;
        padding: 14px 16px;
    }

    .lw-filter-row[b-q2iimuxuu0] {
        gap: 7px;
    }

    .lw-seo-grid[b-q2iimuxuu0] {
        grid-template-columns: 1fr;
    }

    .lw-mini-table div[b-q2iimuxuu0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .long-weekends-shell[b-q2iimuxuu0] {
        width: 100%;
    }

    .lw-hero[b-q2iimuxuu0] {
        padding: 17px 18px;
        border-radius: 16px;
    }

    .lw-hero h1[b-q2iimuxuu0] {
        gap: 10px;
        font-size: 1.82rem;
    }

    .lw-subtitle[b-q2iimuxuu0] {
        font-size: 0.9rem;
    }

    .lw-flag[b-q2iimuxuu0] {
        width: 38px;
        height: 26px;
    }

    .lw-stats-row[b-q2iimuxuu0] {
        gap: 8px;
    }

    .lw-stat-card[b-q2iimuxuu0] {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .lw-stat-icon[b-q2iimuxuu0] {
        width: 39px;
        height: 39px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .long-weekends-page *[b-q2iimuxuu0],
    .long-weekends-page *[b-q2iimuxuu0]::before,
    .long-weekends-page *[b-q2iimuxuu0]::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-page[b-5faturslzq] {
    min-height: 100svh;
    color: var(--text-primary);
    background: var(--bg-page-gradient, var(--bg-page));
    overflow: clip;
}

.not-found-stage[b-5faturslzq] {
    position: relative;
    isolation: isolate;
    min-height: max(34rem, calc(100svh - var(--header-h, 4.5rem)));
    padding: clamp(2rem, 5svh, 4.75rem) clamp(1rem, 4vw, 4rem);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.not-found-stage[b-5faturslzq]::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: auto -8vw -18svh;
    height: min(48svh, 30rem);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 8%, var(--bg-page)));
    transform: skewY(-3deg);
    transform-origin: right bottom;
}

.not-found-shell[b-5faturslzq] {
    width: min(92vw, 76rem);
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.not-found-copy[b-5faturslzq] {
    min-width: 0;
}

.not-found-kicker[b-5faturslzq] {
    margin: 0 0 clamp(0.85rem, 2svh, 1.25rem);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-secondary);
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    font-weight: 760;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.not-found-kicker span[b-5faturslzq] {
    padding: 0.35rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    letter-spacing: 0.08em;
}

.not-found-copy h1[b-5faturslzq] {
    max-width: 12ch;
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.5rem, 5.2vw, 5.1rem);
    font-weight: 790;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.not-found-lead[b-5faturslzq] {
    max-width: 38rem;
    margin: clamp(1.15rem, 2.5svh, 1.65rem) 0 0;
    color: var(--text-secondary);
    font-size: clamp(0.98rem, 1.35vw, 1.13rem);
    line-height: 1.7;
}

.not-found-actions[b-5faturslzq] {
    margin-top: clamp(1.5rem, 3.5svh, 2.25rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.not-found-action[b-5faturslzq] {
    min-height: 3rem;
    padding: 0.72rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.72rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.not-found-action svg[b-5faturslzq] {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.not-found-action-primary[b-5faturslzq] {
    color: var(--accent-contrast);
    background: var(--accent);
    box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--accent) 24%, transparent);
}

.not-found-action-secondary[b-5faturslzq] {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

.not-found-action:hover[b-5faturslzq],
.not-found-action:focus-visible[b-5faturslzq] {
    transform: translateY(-2px);
}

.not-found-action-primary:hover[b-5faturslzq],
.not-found-action-primary:focus-visible[b-5faturslzq] {
    color: var(--accent-contrast);
    background: var(--accent-hover);
}

.not-found-action-secondary:hover[b-5faturslzq],
.not-found-action-secondary:focus-visible[b-5faturslzq] {
    border-color: var(--border-strong);
    color: var(--accent);
    background: var(--accent-soft);
}

.not-found-action:focus-visible[b-5faturslzq],
.not-found-shortcuts a:focus-visible[b-5faturslzq] {
    outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
}

.not-found-shortcuts[b-5faturslzq] {
    margin-top: clamp(1.5rem, 3.4svh, 2.2rem);
    display: grid;
    gap: 0.7rem;
}

.not-found-shortcuts > span[b-5faturslzq] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.not-found-shortcuts div[b-5faturslzq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
}

.not-found-shortcuts a[b-5faturslzq] {
    position: relative;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}

.not-found-shortcuts a[b-5faturslzq]::after {
    content: "↗";
    margin-left: 0.25rem;
    color: var(--accent);
}

.not-found-shortcuts a:hover[b-5faturslzq] {
    color: var(--accent);
}

.not-found-visual[b-5faturslzq] {
    position: relative;
    width: min(44vw, 31rem);
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 35%),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.42), transparent 3%),
        color-mix(in srgb, var(--bg-surface) 86%, transparent);
    box-shadow:
        0 2rem 5rem color-mix(in srgb, var(--text-primary) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
}

.not-found-visual[b-5faturslzq]::before {
    content: "";
    position: absolute;
    inset: 9%;
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 50%;
}

.not-found-code[b-5faturslzq] {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1.4vw, 0.9rem);
    transform: translateY(-2%);
}

.not-found-code > strong[b-5faturslzq] {
    color: var(--text-primary);
    font-size: clamp(4rem, 8.5vw, 7rem);
    font-weight: 820;
    letter-spacing: -0.08em;
    line-height: 1;
    text-shadow: 0 0.8rem 2rem color-mix(in srgb, var(--accent) 16%, transparent);
}

.not-found-clock[b-5faturslzq] {
    position: relative;
    width: clamp(4.4rem, 9vw, 7.2rem);
    aspect-ratio: 1;
    border: clamp(0.28rem, 0.55vw, 0.45rem) solid var(--accent);
    border-radius: 50%;
    background: var(--bg-surface-strong);
    box-shadow:
        0 0 0 0.55rem color-mix(in srgb, var(--accent) 11%, transparent),
        0 1rem 2.3rem color-mix(in srgb, var(--accent) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.not-found-clock-center[b-5faturslzq] {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 0.62rem;
    height: 0.62rem;
    border: 2px solid var(--bg-surface-strong);
    border-radius: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
}

.not-found-clock-hand[b-5faturslzq] {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 0.2rem;
    border-radius: 999px;
    background: var(--text-primary);
    transform-origin: 50% 100%;
}

.not-found-clock-hour[b-5faturslzq] {
    height: 25%;
    transform: translateX(-50%) rotate(-55deg);
}

.not-found-clock-minute[b-5faturslzq] {
    height: 34%;
    background: var(--accent);
    transform: translateX(-50%) rotate(58deg);
}

.not-found-tick[b-5faturslzq] {
    position: absolute;
    width: 0.2rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--text-muted);
}

.not-found-tick-twelve[b-5faturslzq],
.not-found-tick-six[b-5faturslzq] {
    left: 50%;
    transform: translateX(-50%);
}

.not-found-tick-twelve[b-5faturslzq] {
    top: 8%;
}

.not-found-tick-six[b-5faturslzq] {
    bottom: 8%;
}

.not-found-tick-three[b-5faturslzq],
.not-found-tick-nine[b-5faturslzq] {
    top: 50%;
    width: 0.55rem;
    height: 0.2rem;
    transform: translateY(-50%);
}

.not-found-tick-three[b-5faturslzq] {
    right: 8%;
}

.not-found-tick-nine[b-5faturslzq] {
    left: 8%;
}

.not-found-orbit[b-5faturslzq] {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 50%;
}

.not-found-orbit-outer[b-5faturslzq] {
    inset: -6%;
    transform: rotate(-18deg) scaleY(0.7);
}

.not-found-orbit-outer span[b-5faturslzq] {
    position: absolute;
    top: 17%;
    right: 8%;
    width: clamp(0.55rem, 1vw, 0.8rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 1rem var(--accent);
}

.not-found-orbit-inner[b-5faturslzq] {
    inset: 19%;
    border-style: dashed;
    opacity: 0.72;
    transform: rotate(28deg) scaleY(0.78);
}

.not-found-horizon[b-5faturslzq] {
    position: absolute;
    z-index: 2;
    right: 14%;
    bottom: 24%;
    left: 14%;
    display: grid;
    gap: clamp(0.25rem, 0.7vw, 0.45rem);
}

.not-found-horizon span[b-5faturslzq] {
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 58%, transparent), transparent);
}

.not-found-horizon span:nth-child(2)[b-5faturslzq] {
    margin-inline: 9%;
    opacity: 0.7;
}

.not-found-horizon span:nth-child(3)[b-5faturslzq] {
    margin-inline: 19%;
    opacity: 0.42;
}

.not-found-visual > p[b-5faturslzq] {
    position: absolute;
    right: 1rem;
    bottom: 13%;
    left: 1rem;
    z-index: 3;
    margin: 0;
    color: var(--text-muted);
    font-size: clamp(0.62rem, 1vw, 0.75rem);
    font-weight: 720;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.not-found-star[b-5faturslzq] {
    position: absolute;
    z-index: 1;
    width: 0.3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0.8rem var(--accent);
}

.not-found-star-one[b-5faturslzq] {
    top: 22%;
    left: 23%;
}

.not-found-star-two[b-5faturslzq] {
    top: 32%;
    right: 19%;
    width: 0.2rem;
}

.not-found-star-three[b-5faturslzq] {
    right: 27%;
    bottom: 29%;
    width: 0.22rem;
}

.not-found-glow[b-5faturslzq] {
    position: absolute;
    z-index: -2;
    width: min(44vw, 34rem);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(5rem);
    pointer-events: none;
}

.not-found-glow-one[b-5faturslzq] {
    top: -22%;
    right: -12%;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.not-found-glow-two[b-5faturslzq] {
    bottom: -32%;
    left: -16%;
    background: color-mix(in srgb, var(--warning) 10%, transparent);
}

@media (max-width: 800px) {
    .not-found-stage[b-5faturslzq] {
        min-height: calc(100svh - var(--header-h, 4.5rem));
        padding-block: clamp(2rem, 5svh, 3.5rem);
        overflow: visible;
    }

    .not-found-shell[b-5faturslzq] {
        width: min(91vw, 40rem);
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.2rem, 7svh, 4rem);
    }

    .not-found-copy[b-5faturslzq] {
        text-align: center;
    }

    .not-found-copy h1[b-5faturslzq],
    .not-found-lead[b-5faturslzq] {
        margin-inline: auto;
    }

    .not-found-actions[b-5faturslzq],
    .not-found-shortcuts div[b-5faturslzq] {
        justify-content: center;
    }

    .not-found-visual[b-5faturslzq] {
        width: min(82vw, 25rem);
        grid-row: 1;
    }
}

@media (max-width: 480px) {
    .not-found-stage[b-5faturslzq] {
        padding-inline: 0.85rem;
    }

    .not-found-shell[b-5faturslzq] {
        width: min(93vw, 28rem);
    }

    .not-found-copy h1[b-5faturslzq] {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .not-found-actions[b-5faturslzq] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .not-found-action[b-5faturslzq] {
        width: 100%;
    }

    .not-found-shortcuts div[b-5faturslzq] {
        gap: 0.7rem 1rem;
    }

    .not-found-visual[b-5faturslzq] {
        width: min(80vw, 20rem);
    }
}

@media (max-height: 700px) and (min-width: 801px) {
    .not-found-stage[b-5faturslzq] {
        min-height: 34rem;
        padding-block: 1.5rem;
    }

    .not-found-visual[b-5faturslzq] {
        width: min(38vw, 24rem);
    }

    .not-found-copy h1[b-5faturslzq] {
        font-size: clamp(2.8rem, 4.6vw, 4.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .not-found-action[b-5faturslzq] {
        transition: none;
    }
}
/* /Components/Pages/SandTimer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   Sand Timer — Page Layout & Visual Polish
   Designed to fit entirely within the viewport
   ═══════════════════════════════════════════════ */

/* Page background — exactly one viewport */
.sand-timer-page[b-y1spm58wsd] {
    --sand-accent: #A855F7;
    --sand-accent-rgb: 168, 85, 247;
    --sand-accent-mid: #7C3AED;
    --sand-accent-mid-rgb: 124, 58, 237;
    --sand-accent-deep: #6D28D9;
    --sand-accent-dark: #4C1D95;
    --sand-accent-light: #C084FC;
    --sand-accent-soft: #E9D5FF;
    --sand-secondary-rgb: 37, 99, 235;
    --sand-glass-1: #E0E7FF;
    --sand-glass-2: #C4B5FD;
    --sand-glass-3: #818CF8;
    --sand-page-start: #020713;
    --sand-page-mid: #060D1C;
    --sand-page-end: #020713;
    --sand-page-pattern: repeating-linear-gradient(135deg, rgba(var(--sand-accent-rgb), 0.025) 0 1px, transparent 1px 18px);
    min-height: 100svh;
    width: 100%;
    overflow-x: hidden;
    color: #f8fafc;
    background:
        var(--sand-page-pattern),
        radial-gradient(circle at 22% 42%, rgba(var(--sand-accent-rgb), 0.18), transparent 32rem),
        radial-gradient(circle at 68% 14%, rgba(var(--sand-secondary-rgb), 0.09), transparent 28rem),
        radial-gradient(circle at 50% 85%, rgba(var(--sand-accent-mid-rgb), 0.11), transparent 26rem),
        linear-gradient(180deg, var(--sand-page-start) 0%, var(--sand-page-mid) 48%, var(--sand-page-end) 100%);
    transition: background 0.4s ease;
}

.sand-timer-page.sand-theme-ocean[b-y1spm58wsd] {
    --sand-accent: #38BDF8;
    --sand-accent-rgb: 56, 189, 248;
    --sand-accent-mid: #0EA5E9;
    --sand-accent-mid-rgb: 14, 165, 233;
    --sand-accent-deep: #0284C7;
    --sand-accent-dark: #075985;
    --sand-accent-light: #7DD3FC;
    --sand-accent-soft: #E0F2FE;
    --sand-secondary-rgb: 59, 130, 246;
    --sand-glass-1: #E0F2FE;
    --sand-glass-2: #BAE6FD;
    --sand-glass-3: #38BDF8;
    --sand-page-start: #020B16;
    --sand-page-mid: #051526;
    --sand-page-end: #020812;
    --sand-page-pattern: repeating-radial-gradient(circle at 18% 16%, rgba(125, 211, 252, 0.03) 0 1px, transparent 1px 22px);
}

.sand-timer-page.sand-theme-golden[b-y1spm58wsd] {
    --sand-accent: #FBBF24;
    --sand-accent-rgb: 251, 191, 36;
    --sand-accent-mid: #F59E0B;
    --sand-accent-mid-rgb: 245, 158, 11;
    --sand-accent-deep: #D97706;
    --sand-accent-dark: #92400E;
    --sand-accent-light: #FDE68A;
    --sand-accent-soft: #FEF3C7;
    --sand-secondary-rgb: 249, 115, 22;
    --sand-glass-1: #FEF3C7;
    --sand-glass-2: #FDE68A;
    --sand-glass-3: #F59E0B;
    --sand-page-start: #120A02;
    --sand-page-mid: #1D1004;
    --sand-page-end: #0C0601;
    --sand-page-pattern: repeating-linear-gradient(160deg, rgba(253, 230, 138, 0.026) 0 2px, transparent 2px 24px);
}

.sand-timer-page.sand-theme-forest[b-y1spm58wsd] {
    --sand-accent: #34D399;
    --sand-accent-rgb: 52, 211, 153;
    --sand-accent-mid: #10B981;
    --sand-accent-mid-rgb: 16, 185, 129;
    --sand-accent-deep: #059669;
    --sand-accent-dark: #065F46;
    --sand-accent-light: #6EE7B7;
    --sand-accent-soft: #D1FAE5;
    --sand-secondary-rgb: 20, 184, 166;
    --sand-glass-1: #D1FAE5;
    --sand-glass-2: #A7F3D0;
    --sand-glass-3: #34D399;
    --sand-page-start: #02100C;
    --sand-page-mid: #051A13;
    --sand-page-end: #020B08;
    --sand-page-pattern: repeating-linear-gradient(45deg, rgba(110, 231, 183, 0.024) 0 1px, transparent 1px 20px);
}

.sand-timer-page.sand-theme-rose[b-y1spm58wsd] {
    --sand-accent: #F472B6;
    --sand-accent-rgb: 244, 114, 182;
    --sand-accent-mid: #EC4899;
    --sand-accent-mid-rgb: 236, 72, 153;
    --sand-accent-deep: #DB2777;
    --sand-accent-dark: #831843;
    --sand-accent-light: #F9A8D4;
    --sand-accent-soft: #FCE7F3;
    --sand-secondary-rgb: 168, 85, 247;
    --sand-glass-1: #FCE7F3;
    --sand-glass-2: #FBCFE8;
    --sand-glass-3: #F472B6;
    --sand-page-start: #13040D;
    --sand-page-mid: #200817;
    --sand-page-end: #0D0208;
    --sand-page-pattern: repeating-radial-gradient(circle at 80% 18%, rgba(249, 168, 212, 0.028) 0 1px, transparent 1px 21px);
}

/* Shell — fills remaining space below header */
.sand-timer-shell[b-y1spm58wsd] {
    width: min(100%, 1440px);
    height: calc(100svh - var(--header-h, 72px));
    margin-inline: auto;
    padding:
        clamp(8px, 1vh, 20px)
        clamp(18px, 2vw, 40px)
        clamp(8px, 0.8vh, 16px);
    display: grid;
    align-items: center;
}

/* Two-column stage — viewport-constrained */
.sand-timer-stage[b-y1spm58wsd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(20px, 3vw, 56px);
    align-items: center;
    max-height: calc(100svh - var(--header-h, 72px) - clamp(16px, 2vh, 40px));
}

/* Visual column */
.sand-visual-col[b-y1spm58wsd] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-height: calc(100svh - var(--header-h, 72px) - clamp(16px, 2vh, 40px));
}

/* Control column — constrain height to viewport */
.sand-control-col[b-y1spm58wsd] {
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - var(--header-h, 72px) - clamp(16px, 2vh, 40px));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.sand-control-col[b-y1spm58wsd]::-webkit-scrollbar {
    display: none;
}

/* Control stack */
[b-y1spm58wsd] .sand-control-stack {
    display: grid;
    gap: clamp(8px, 1vh, 14px);
    font-family: var(--font-ui);
}

/* Main panel — glassmorphic dark card */
[b-y1spm58wsd] .sand-main-panel {
    padding: clamp(16px, 2vh, 36px) clamp(18px, 2.2vw, 36px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--sand-accent-rgb), 0.10), transparent 34%),
        linear-gradient(180deg, rgba(12, 18, 35, 0.95), rgba(7, 12, 25, 0.93));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 64px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-y1spm58wsd] .sand-timer-title {
    margin: 0;
    color: #F8FAFC;
    font-family: var(--font-ui);
    font-size: 2.3rem;
    font-weight: 720;
    line-height: 1.05;
}

[b-y1spm58wsd] .sand-panel-actions {
    z-index: 22;
}

[b-y1spm58wsd] .sand-panel-icon-button.is-active {
    color: var(--sand-accent) !important;
    border-color: rgba(var(--sand-accent-rgb), 0.5) !important;
    background: rgba(var(--sand-accent-rgb), 0.12) !important;
}

[b-y1spm58wsd] .sand-color-pattern-popover {
    position: relative;
    z-index: 21;
    width: 100%;
    margin: clamp(42px, 6vh, 52px) 0 12px;
    padding: 12px;
    border: 1px solid rgba(var(--sand-accent-rgb), 0.28);
    border-radius: 14px;
    color: #e2e8f0;
    background:
        radial-gradient(circle at 85% 0%, rgba(var(--sand-accent-rgb), 0.14), transparent 45%),
        rgba(7, 12, 25, 0.96);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

[b-y1spm58wsd] .sand-color-pattern-heading {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[b-y1spm58wsd] .sand-color-pattern-current {
    overflow: hidden;
    color: var(--sand-accent-light);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

[b-y1spm58wsd] .sand-color-pattern-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
}

[b-y1spm58wsd] .sand-color-pattern-option {
    position: relative;
    min-width: 0;
    padding: 5px 4px 6px;
    display: grid;
    gap: 5px;
    justify-items: center;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 10px;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.62);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

[b-y1spm58wsd] .sand-color-pattern-option:hover {
    color: #f8fafc;
    border-color: rgba(var(--sand-accent-rgb), 0.35);
    background: rgba(var(--sand-accent-rgb), 0.08);
}

[b-y1spm58wsd] .sand-color-pattern-option.is-selected {
    color: #f8fafc;
    border-color: var(--sand-accent);
    background: rgba(var(--sand-accent-rgb), 0.12);
    box-shadow: 0 0 18px rgba(var(--sand-accent-rgb), 0.13);
}

[b-y1spm58wsd] .sand-color-pattern-swatch {
    position: relative;
    width: 100%;
    min-height: 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 7px),
        linear-gradient(135deg, var(--pattern-a), var(--pattern-b) 52%, var(--pattern-c));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[b-y1spm58wsd] .sand-color-pattern-swatch::after {
    position: absolute;
    inset: 20% 16%;
    border-radius: 999px;
    content: '';
    background: rgba(255, 255, 255, 0.2);
    filter: blur(5px);
}

[b-y1spm58wsd] .sand-color-pattern-check {
    position: absolute;
    top: 8px;
    right: 7px;
    padding: 2px;
    border-radius: 50%;
    color: #fff;
    background: rgba(2, 6, 23, 0.72);
}

/* Bottom card grid */
[b-y1spm58wsd] .sand-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 0.8vw, 14px);
}

.sand-timer-page:fullscreen[b-y1spm58wsd]  .sand-bottom-grid,
.sand-timer-page:-webkit-full-screen[b-y1spm58wsd]  .sand-bottom-grid {
    display: none;
}

.sand-timer-page:fullscreen[b-y1spm58wsd],
.sand-timer-page:-webkit-full-screen[b-y1spm58wsd] {
    height: 100svh;
    overflow: hidden;
}

.sand-timer-page:fullscreen .sand-seo-content[b-y1spm58wsd],
.sand-timer-page:-webkit-full-screen .sand-seo-content[b-y1spm58wsd] {
    display: none;
}

.sand-seo-content[b-y1spm58wsd] {
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--sand-accent-rgb), 0.1), transparent 28rem),
        linear-gradient(180deg, #050d1a 0%, #071120 100%);
}

.sand-seo-content .seo-panel[b-y1spm58wsd] {
    border-color: rgba(var(--sand-accent-rgb), 0.18);
    background: rgba(7, 17, 32, 0.82);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.sand-seo-content .seo-panel h2[b-y1spm58wsd],
.sand-seo-content .seo-faq summary[b-y1spm58wsd] {
    color: #f8fafc;
}

.sand-seo-content .seo-panel p[b-y1spm58wsd] {
    color: #aebed2;
}

.sand-seo-content .seo-faq details[b-y1spm58wsd] {
    border-color: rgba(148, 163, 184, 0.16);
}

.sand-seo-content .eyebrow[b-y1spm58wsd] {
    color: var(--sand-accent);
}

/* ═══════════════════════════════════════════════
   Focus & Outline States
   ═══════════════════════════════════════════════ */

.sand-timer-page:focus[b-y1spm58wsd] {
    outline: none;
}

[b-y1spm58wsd] button:focus-visible {
    outline: 2px solid var(--sand-accent);
    outline-offset: 2px;
}

[b-y1spm58wsd] button:hover {
    filter: brightness(1.08);
}

[b-y1spm58wsd] button:active {
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════════
   Base glow beneath hourglass
   ═══════════════════════════════════════════════ */

.sand-visual-col[b-y1spm58wsd]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 50px;
    background: radial-gradient(ellipse, rgba(var(--sand-accent-rgb), 0.35), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ═══════════════════════════════════════════════
   Light theme overrides
   ═══════════════════════════════════════════════ */

:global([data-theme="light"]) .sand-timer-page[b-y1spm58wsd] {
    color: #f8fafc;
}

/* ═══════════════════════════════════════════════
   Responsive — Tablet
   ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .sand-timer-stage[b-y1spm58wsd] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        gap: clamp(14px, 2vw, 28px);
    }
}

/* ═══════════════════════════════════════════════
   Responsive — Mobile (allow scrolling)
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sand-timer-page[b-y1spm58wsd] {
        height: auto;
        min-height: 100svh;
        width: 100%;
        overflow-y: auto;
    }

    .sand-timer-shell[b-y1spm58wsd] {
        width: 100%;
        height: auto;
        min-height: 100svh;
        padding:
            calc(max(var(--header-h, 72px), 6.5rem) + clamp(8px, 1vh, 12px))
            clamp(14px, 3vw, 24px)
            clamp(12px, 1.5vh, 20px);
        align-items: start;
    }

    .sand-timer-stage[b-y1spm58wsd] {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        max-height: none;
    }

    .sand-visual-col[b-y1spm58wsd] {
        order: 2;
        display: flex;
        justify-content: center;
        max-height: none;
    }

    .sand-control-col[b-y1spm58wsd] {
        order: 1;
        width: 100%;
        min-width: 0;
        align-items: center;
        max-height: none;
        overflow: visible;
    }

    [b-y1spm58wsd] .sand-control-stack {
        width: min(100%, 42rem);
        min-width: 0;
        margin-inline: auto;
        gap: 10px;
    }

    [b-y1spm58wsd] .sand-bottom-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sand-visual-col[b-y1spm58wsd]::after {
        display: none;
    }

    [b-y1spm58wsd] .sand-main-panel {
        min-width: 0;
        box-sizing: border-box;
        padding: 18px 16px;
        border-radius: 18px;
        overflow: hidden;
    }

    [b-y1spm58wsd] .sand-panel-actions {
        top: 10px !important;
        right: 12px !important;
        gap: 0.35rem !important;
    }

    [b-y1spm58wsd] .sand-panel-icon-button {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    [b-y1spm58wsd] .sand-panel-icon-button svg {
        width: 18px;
        height: 18px;
    }

    [b-y1spm58wsd] .sand-timer-title {
        font-size: clamp(1.85rem, 8vw, 2.3rem);
        margin-top: 4px !important;
    }

    [b-y1spm58wsd] .sand-countdown-value {
        font-size: var(--type-time-lg);
    }

    [b-y1spm58wsd] .sand-duration-presets {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem !important;
    }

    [b-y1spm58wsd] .sand-duration-preset {
        width: 100%;
        min-width: 0 !important;
        flex: none !important;
    }
}

@media (max-width: 640px) {
    .sand-timer-shell[b-y1spm58wsd] {
        padding-top: calc(var(--header-h, 4.35rem) + clamp(8px, 1vh, 12px));
        padding-right: clamp(10px, 3vw, 16px);
        padding-bottom: clamp(8px, 1vh, 14px);
        padding-left: clamp(10px, 3vw, 16px);
    }
}

@media (max-width: 420px) {
    [b-y1spm58wsd] .sand-page-heading {
        padding-top: 38px;
    }
}

/* ═══════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    [b-y1spm58wsd] .completion-sparkle,
    [b-y1spm58wsd] .backdrop-glow,
    [b-y1spm58wsd] .stream-drop,
    [b-y1spm58wsd] .impact-grain,
    [b-y1spm58wsd] .impact-glow,
    [b-y1spm58wsd] .sand-sparkle-dot {
        animation: none !important;
    }

    [b-y1spm58wsd] button:hover {
        filter: none;
    }

    [b-y1spm58wsd] button:active {
        transform: none;
    }
}
/* /Components/Pages/SandTimerVisual.razor.rz.scp.css */
/* Hourglass container — viewport-relative sizing */
.sand-hourglass-wrap[b-rhj9kmed4c] {
    position: relative;
    width: min(42vw, 560px);
    height: min(72svh, 740px);
    max-height: calc(100svh - var(--header-h, 72px) - clamp(20px, 2.4vh, 48px));
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.hourglass-svg[b-rhj9kmed4c] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(var(--sand-accent-mid-rgb), 0.15));
    transition: filter 0.6s ease;
}

/* ═══════ STATE: Running — subtle living glow ═══════ */

.sand-hourglass-wrap.running .hourglass-svg[b-rhj9kmed4c] {
    filter: drop-shadow(0 0 22px rgba(var(--sand-accent-mid-rgb), 0.18));
}

/* ═══════ STATE: Almost Done — warm orange glow ═══════ */

.sand-hourglass-wrap.almostdone .hourglass-svg[b-rhj9kmed4c] {
    filter:
        drop-shadow(0 0 28px rgba(249, 115, 22, 0.38))
        drop-shadow(0 0 70px rgba(var(--sand-accent-rgb), 0.2));
}

.sand-hourglass-wrap.almostdone .backdrop-glow[b-rhj9kmed4c] {
    animation: glow-breathe-urgent-b-rhj9kmed4c 1.0s ease-in-out infinite alternate;
}

/* Glass shake during almost-done */
.sand-hourglass-wrap.almostdone .hourglass-svg[b-rhj9kmed4c] {
    animation: glass-shake-b-rhj9kmed4c 0.35s ease-in-out infinite;
}

.sand-hourglass-wrap.almostdone .sand-fill[b-rhj9kmed4c] {
    transition: d 0.15s ease-out;
}

/* ═══════ STATE: Paused — frozen in time, subtle shimmer ═══════ */

.sand-hourglass-wrap.paused .hourglass-svg[b-rhj9kmed4c] {
    filter:
        drop-shadow(0 0 14px rgba(var(--sand-accent-mid-rgb), 0.1))
        brightness(0.78)
        saturate(0.55);
}

.sand-hourglass-wrap.paused .backdrop-glow[b-rhj9kmed4c] {
    animation: paused-breathe-b-rhj9kmed4c 5s ease-in-out infinite;
    opacity: 0.35;
}

.sand-hourglass-wrap.paused .sand-stream[b-rhj9kmed4c] {
    opacity: 0.12;
    animation: none;
}

.sand-hourglass-wrap.paused .stream-drop[b-rhj9kmed4c] {
    animation: none !important;
    opacity: 0.18;
}

.sand-hourglass-wrap.paused .sand-sparkle-dot[b-rhj9kmed4c] {
    animation: paused-sparkle-shimmer-b-rhj9kmed4c 5s ease-in-out infinite;
    opacity: 0.18;
}

.sand-hourglass-wrap.paused .impact-grain[b-rhj9kmed4c],
.sand-hourglass-wrap.paused .impact-glow[b-rhj9kmed4c] {
    animation: none !important;
    opacity: 0;
}

/* ═══════ STATE: Complete — bright, celebratory ═══════ */

.sand-hourglass-wrap.complete .hourglass-svg[b-rhj9kmed4c] {
    filter:
        drop-shadow(0 0 36px rgba(var(--sand-accent-rgb), 0.45))
        drop-shadow(0 0 90px rgba(var(--sand-accent-mid-rgb), 0.28))
        drop-shadow(0 0 150px rgba(249, 115, 22, 0.12));
}

.sand-hourglass-wrap.complete .backdrop-glow[b-rhj9kmed4c] {
    animation: glow-breathe-celebrate-b-rhj9kmed4c 2.5s ease-in-out infinite alternate;
}

/* ═══════ Background glow breathing ═══════ */

.backdrop-glow[b-rhj9kmed4c] {
    animation: glow-breathe-b-rhj9kmed4c 4s ease-in-out infinite alternate;
}

/* ═══════ Sand fill transitions ═══════ */

.sand-fill[b-rhj9kmed4c] {
    transition: d 0.3s ease-out;
}

/* ═══════ Sand sparkle dots — twinkling starfield ═══════ */

.sand-sparkle-dot[b-rhj9kmed4c] {
    animation: sparkle-twinkle-b-rhj9kmed4c 3s ease-in-out infinite;
    animation-delay: var(--delay);
    transition: opacity 0.5s ease;
}

/* ═══════ Stream falling particles ═══════ */

.stream-drop[b-rhj9kmed4c] {
    animation: stream-fall-b-rhj9kmed4c var(--dur) linear infinite;
    animation-delay: var(--delay);
    animation-fill-mode: both;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 0;
}

/* Faint wisp guide through the neck */
.sand-stream[b-rhj9kmed4c] {
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

/* ═══════ Impact grains settling onto the lower pile ═══════ */

.impact-grain[b-rhj9kmed4c] {
    animation: grain-deposit-b-rhj9kmed4c var(--dur) cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
    animation-delay: var(--delay);
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 0;
}

/* ═══════ Impact glow pulsing ═══════ */

.impact-glow[b-rhj9kmed4c] {
    animation: impact-pulse-b-rhj9kmed4c 1.2s ease-in-out infinite;
}

/* Almost done: faster, warmer impact pulse */
.sand-hourglass-wrap.almostdone .impact-glow[b-rhj9kmed4c] {
    animation: impact-pulse-urgent-b-rhj9kmed4c 0.65s ease-in-out infinite;
}

/* ═══════ Completion sparkles ═══════ */

.completion-sparkle[b-rhj9kmed4c] {
    transform-origin: center;
    animation: sparkle-burst-b-rhj9kmed4c 2.4s ease-in-out infinite;
    animation-delay: var(--delay);
    opacity: 0;
}

/* ═══════ Almost-done warning pulse on glass ═══════ */

.sand-hourglass-wrap.almostdone .glass-outline[b-rhj9kmed4c] {
    animation: glass-warn-pulse-b-rhj9kmed4c 0.9s ease-in-out infinite;
}

/* ═══════ Completion glow ring ═══════ */

.completion-ring[b-rhj9kmed4c] {
    opacity: 0;
    animation: ring-expand-b-rhj9kmed4c 3.5s ease-out infinite;
    animation-delay: var(--delay, 0s);
}

/* ═══════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════ */

/* Sparkle dots twinkling inside sand — richer */
@keyframes sparkle-twinkle-b-rhj9kmed4c {
    0%, 100% {
        opacity: var(--base-opacity, 0.3);
        transform: scale(1);
    }
    30% {
        opacity: 0.7;
        transform: scale(1.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.8);
        filter: drop-shadow(0 0 5px currentColor);
    }
    70% {
        opacity: 0.7;
        transform: scale(1.3);
    }
}

/* Paused sparkle shimmer — twinkling frozen dots */
@keyframes paused-sparkle-shimmer-b-rhj9kmed4c {
    0%, 100% { opacity: 0.12; }
    25% { opacity: 0.25; }
    50% { opacity: 0.35; }
    75% { opacity: 0.25; }
}

/* Paused backdrop breathing — very slow */
@keyframes paused-breathe-b-rhj9kmed4c {
    0%, 100% { opacity: 0.25; transform: scale(0.97); }
    50% { opacity: 0.45; transform: scale(1.02); }
}

/* Falling stream grains — accelerating from the neck to the pile */
@keyframes stream-fall-b-rhj9kmed4c {
    0% {
        transform: translate(0, -2px) scale(0.65);
        opacity: 0;
    }
    7% {
        opacity: 0.95;
    }
    35% {
        transform: translate(calc(var(--dx) * 0.15), calc(var(--drop) * 0.12)) scale(0.9);
        opacity: 1;
    }
    65% {
        transform: translate(calc(var(--dx) * 0.45), calc(var(--drop) * 0.42)) scale(1);
        opacity: 0.95;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--dx), var(--drop)) scale(0.65);
        opacity: 0;
    }
}

/* Impact grains follow the mound slope: outward and down, never back up */
@keyframes grain-deposit-b-rhj9kmed4c {
    0% {
        transform: translate(0, -2px) scale(0.45);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
        transform: translate(calc(var(--dx) * 0.08), 0) scale(0.8);
    }
    45% {
        opacity: 0.8;
        transform: translate(calc(var(--dx) * 0.45), 4px) scale(1);
    }
    75% {
        opacity: 0.5;
        transform: translate(calc(var(--dx) * 0.8), 8px) scale(0.72);
    }
    100% {
        transform: translate(var(--dx), 13px) scale(0.35);
        opacity: 0;
    }
}

/* Impact glow pulse — gentle breathing */
@keyframes impact-pulse-b-rhj9kmed4c {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    35% { opacity: 0.7; }
    65% { opacity: 0.85; transform: scale(1.25); }
}

/* Urgent impact pulse (almost done) — faster heartbeat */
@keyframes impact-pulse-urgent-b-rhj9kmed4c {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    30% { opacity: 0.9; transform: scale(1.2); }
    55% { opacity: 1; transform: scale(1.45); }
    85% { opacity: 0.8; transform: scale(1.15); }
}

/* Completion sparkles — dramatic burst with scale & rotation */
@keyframes sparkle-burst-b-rhj9kmed4c {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
        filter: drop-shadow(0 0 0 transparent);
    }
    12% {
        opacity: 0.55;
        transform: scale(0.3) rotate(40deg);
    }
    30% {
        opacity: 1;
        transform: scale(var(--scale, 1)) rotate(110deg);
        filter: drop-shadow(0 0 16px var(--sand-accent-soft)) drop-shadow(0 0 32px rgba(var(--sand-accent-rgb), 0.6));
    }
    55% {
        opacity: 0.75;
        transform: scale(calc(var(--scale, 1) * 0.75)) rotate(220deg);
        filter: drop-shadow(0 0 10px rgba(var(--sand-accent-rgb), 0.45)) drop-shadow(0 0 18px rgba(var(--sand-accent-rgb), 0.35));
    }
    80% {
        opacity: 0.35;
        transform: scale(0.4) rotate(300deg);
        filter: drop-shadow(0 0 4px rgba(var(--sand-accent-rgb), 0.3));
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
        filter: drop-shadow(0 0 0 transparent);
    }
}

/* Normal glow breathing */
@keyframes glow-breathe-b-rhj9kmed4c {
    0% {
        opacity: 0.5;
        transform: scale(0.96);
        transform-origin: center;
    }
    100% {
        opacity: 0.9;
        transform: scale(1.04);
        transform-origin: center;
    }
}

/* Urgent glow breathing (almost done) — faster heartbeat */
@keyframes glow-breathe-urgent-b-rhj9kmed4c {
    0% {
        opacity: 0.45;
        transform: scale(0.93);
        transform-origin: center;
    }
    40% {
        opacity: 0.85;
        transform: scale(1.05);
        transform-origin: center;
    }
    70% {
        opacity: 0.65;
        transform: scale(0.98);
        transform-origin: center;
    }
    100% {
        opacity: 1;
        transform: scale(1.1);
        transform-origin: center;
    }
}

/* Celebration glow breathing (complete) */
@keyframes glow-breathe-celebrate-b-rhj9kmed4c {
    0% {
        opacity: 0.65;
        transform: scale(0.96);
        transform-origin: center;
        filter: hue-rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1.08);
        transform-origin: center;
        filter: hue-rotate(15deg);
    }
}

/* Glass shake — subtle wobble for almost-done urgency */
@keyframes glass-shake-b-rhj9kmed4c {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-0.5px, -0.3px) rotate(-0.15deg); }
    35% { transform: translate(0.5px, 0.3px) rotate(0.15deg); }
    55% { transform: translate(-0.3px, 0.2px) rotate(-0.1deg); }
    75% { transform: translate(0.3px, -0.2px) rotate(0.1deg); }
}

/* Glass outline warning pulse */
@keyframes glass-warn-pulse-b-rhj9kmed4c {
    0%, 100% { opacity: 0; stroke-width: 3; }
    30% { opacity: 0.35; }
    50% { opacity: 0.5; stroke-width: 7; }
    70% { opacity: 0.35; }
}

/* Completion ring expanding outward */
@keyframes ring-expand-b-rhj9kmed4c {
    0% {
        opacity: 0.7;
        transform: scale(0.7);
    }
    45% {
        opacity: 0.35;
        transform: scale(1.15);
    }
    80% {
        opacity: 0.1;
        transform: scale(1.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

/* ═══════════════════════════════════════
   REDUCED MOTION — elegant static fallbacks
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .backdrop-glow[b-rhj9kmed4c],
    .sand-stream[b-rhj9kmed4c],
    .stream-drop[b-rhj9kmed4c],
    .impact-grain[b-rhj9kmed4c],
    .impact-glow[b-rhj9kmed4c],
    .sand-sparkle-dot[b-rhj9kmed4c],
    .completion-sparkle[b-rhj9kmed4c],
    .completion-ring[b-rhj9kmed4c],
    .glass-outline[b-rhj9kmed4c] {
        animation: none !important;
        transition: none !important;
    }

    .hourglass-svg[b-rhj9kmed4c] {
        transition: none !important;
        animation: none !important;
    }

    /* Static visibility for all key elements */
    .sand-sparkle-dot[b-rhj9kmed4c] {
        opacity: 0.5;
        animation: none !important;
    }
    .stream-drop[b-rhj9kmed4c] {
        opacity: 0.5;
        animation: none !important;
        transform: translateY(calc(var(--drop) * 0.5)) scale(0.8);
    }
    .impact-grain[b-rhj9kmed4c] {
        opacity: 0.4;
        animation: none !important;
    }
    .impact-glow[b-rhj9kmed4c] {
        opacity: 0.45;
        animation: none !important;
    }
    .backdrop-glow[b-rhj9kmed4c] {
        opacity: 0.65;
        animation: none !important;
    }
    .completion-sparkle[b-rhj9kmed4c] {
        opacity: 0.75;
        transform: scale(var(--scale, 0.85));
        animation: none !important;
        filter: drop-shadow(0 0 8px rgba(var(--sand-accent-rgb), 0.6));
    }
    .completion-ring[b-rhj9kmed4c] {
        opacity: 0.4;
        transform: scale(1.1);
        animation: none !important;
    }
    .glass-outline[b-rhj9kmed4c] {
        opacity: 0.25;
        animation: none !important;
    }

    /* Paused: dim but visible */
    .sand-hourglass-wrap.paused .hourglass-svg[b-rhj9kmed4c] {
        filter: brightness(0.75) saturate(0.55);
    }
    .sand-hourglass-wrap.paused .stream-drop[b-rhj9kmed4c] {
        opacity: 0.15;
    }
    .sand-hourglass-wrap.paused .sand-sparkle-dot[b-rhj9kmed4c] {
        opacity: 0.15;
    }
    .sand-hourglass-wrap.paused .backdrop-glow[b-rhj9kmed4c] {
        opacity: 0.25;
    }

    /* Almost done: warm static tint */
    .sand-hourglass-wrap.almostdone .hourglass-svg[b-rhj9kmed4c] {
        filter:
            drop-shadow(0 0 24px rgba(249, 115, 22, 0.3))
            drop-shadow(0 0 50px rgba(var(--sand-accent-rgb), 0.15));
    }
    .sand-hourglass-wrap.almostdone .glass-outline[b-rhj9kmed4c] {
        opacity: 0.3;
    }
    .sand-hourglass-wrap.almostdone .impact-glow[b-rhj9kmed4c] {
        opacity: 0.6;
    }

    /* Complete: bright static */
    .sand-hourglass-wrap.complete .hourglass-svg[b-rhj9kmed4c] {
        filter:
            drop-shadow(0 0 30px rgba(var(--sand-accent-rgb), 0.4))
            drop-shadow(0 0 80px rgba(var(--sand-accent-mid-rgb), 0.25));
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 1024px) {
    .sand-hourglass-wrap[b-rhj9kmed4c] {
        width: min(38vw, 420px);
        height: min(62svh, 560px);
    }
}

@media (max-width: 768px) {
    .sand-hourglass-wrap[b-rhj9kmed4c] {
        width: min(70vw, 380px);
        height: min(48svh, 400px);
        max-height: none;
    }
}

@media (max-width: 640px) {
    .sand-hourglass-wrap[b-rhj9kmed4c] {
        width: 100%;
        max-width: 320px;
        height: min(44svh, 360px);
    }
}
/* /Components/Pages/TimeZoneMap.razor.rz.scp.css */
.time-zone-map-page[b-nrgu2nuvhb] {
    --tz-page-bg: #f8fafd;
    --tz-card-bg: #ffffff;
    --tz-text: #0f172a;
    --tz-muted: #5b6475;
    --tz-soft: #f4f7fb;
    --tz-border: #e6ecf5;
    --tz-border-strong: #d9e2ef;
    --tz-blue: #2563eb;
    --tz-blue-dark: #1d4ed8;
    --tz-blue-soft: #eaf2ff;
    --tz-action: #f2a531;
    --tz-action-hover: #9a6417;
    --tz-action-soft: rgba(242, 165, 49, 0.13);
    --tz-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
    --tz-page-background: var(--tz-page-bg);
    --tz-control-color: #1c2b41;
    --tz-control-bg: #ffffff;
    --tz-control-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
    --tz-control-hover-bg: color-mix(in srgb, var(--tz-blue) 7%, #ffffff);
    --tz-map-stage-bg: #edf4fb;
    --tz-map-band-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
    --tz-map-band-border: rgba(75, 99, 130, 0.12);
    --tz-boundary-stroke: rgba(92, 119, 154, 0.18);
    --tz-map-filter: drop-shadow(0 10px 15px rgba(82, 100, 130, 0.11));
    --tz-world-shade: linear-gradient(90deg, rgba(18, 33, 63, 0.3) 0%, rgba(25, 43, 75, 0.2) 16%, rgba(42, 61, 91, 0.06) 34%, rgba(255, 229, 157, 0.035) 42%, rgba(255, 229, 157, 0.035) 58%, rgba(42, 61, 91, 0.06) 66%, rgba(25, 43, 75, 0.2) 84%, rgba(18, 33, 63, 0.3) 100%);
    --tz-map-graticule: rgba(105, 129, 158, 0.1);
    --tz-map-land: rgba(255, 255, 255, 0.38);
    --tz-map-land-stroke: rgba(255, 255, 255, 0.96);
    --tz-map-land-shadow: drop-shadow(0 7px 8px rgba(71, 85, 105, 0.14));
    --tz-map-borders: rgba(59, 84, 118, 0.28);
    --tz-map-edge-overlay: linear-gradient(90deg, rgba(223, 234, 249, 0.82), transparent 10%, transparent 90%, rgba(223, 234, 249, 0.82)), linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 22%, transparent 82%, rgba(255, 255, 255, 0.22));
    --tz-utc-line: rgba(15, 23, 42, 0.58);
    --tz-utc-pill-text: #ffffff;
    --tz-utc-pill-bg: #263447;
    --tz-utc-pill-border: transparent;
    --tz-utc-pill-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
    --tz-map-dot-bg: #ef4444;
    --tz-map-dot-hover-bg: #f97316;
    --tz-map-dot-border: rgba(255, 255, 255, 0.94);
    --tz-map-dot-shadow: 0 0 0 1px rgba(239, 68, 68, 0.16), 0 6px 12px rgba(15, 23, 42, 0.16);
    --tz-map-dot-hover-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15), 0 8px 16px rgba(15, 23, 42, 0.16);
    --tz-map-dot-selected-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16), 0 8px 16px rgba(37, 99, 235, 0.2);
    --tz-watermark-text: rgba(51, 65, 85, 0.62);
    --tz-watermark-bg: rgba(255, 255, 255, 0.62);
    --tz-callout-bg: rgba(255, 255, 255, 0.95);
    --tz-callout-border: rgba(37, 99, 235, 0.22);
    --tz-callout-shadow: 0 12px 24px rgba(37, 99, 235, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    --tz-callout-time: #243246;
    --tz-callout-utc: #9a6417;
    --tz-map-control-bg: rgba(255, 255, 255, 0.96);
    --tz-map-control-text: #1c2b41;
    --tz-map-control-border: rgba(226, 232, 240, 0.88);
    --tz-map-control-divider: rgba(226, 232, 240, 0.9);
    --tz-map-control-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
    --tz-kicker: #2f3c51;
    --tz-row-icon: #60a5fa;
    --tz-daylight-text: #2f3c51;
    --tz-timeline-icon-text: #1d2a3d;
    --tz-timeline-icon-bg: #ffffff;
    --tz-map-timeline-bg: rgba(255, 255, 255, 0.9);
    --tz-map-timeline-border: rgba(148, 163, 184, 0.2);
    --tz-map-timeline-shadow: 0 -14px 30px rgba(15, 23, 42, 0.09);
    --tz-timeline-track: #d8e1ed;
    --tz-timeline-tick: #d8e1ed;
    --tz-timeline-label: #334155;
    --tz-timeline-knob-bg: #ffffff;
    --tz-chip-text: #263347;
    --tz-chip-border: rgba(148, 163, 184, 0.16);
    --tz-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    --tz-popular-text: #334155;
    --tz-popular-bg: #ffffff;
    --tz-info-bar-text: #566477;
    --tz-info-bar-bg: linear-gradient(90deg, #edf5ff, #f5f8fd);
    --tz-modal-backdrop: rgba(15, 23, 42, 0.22);
    --tz-modal-bg: #ffffff;
    --tz-modal-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
    --tz-modal-input-bg: #ffffff;
    --tz-modal-option-bg: rgba(248, 251, 255, 0.78);
    --tz-modal-offset: var(--tz-blue);
    --tz-focus: rgba(37, 99, 235, 0.28);
    --tz-band-1: #dce8ff;
    --tz-band-2: #d8e9ff;
    --tz-band-3: #d1edfb;
    --tz-band-4: #c7eff0;
    --tz-band-5: #c4f1df;
    --tz-band-6: #d1f2c8;
    --tz-band-7: #e3f2bf;
    --tz-band-8: #f4efb9;
    --tz-band-9: #fde7b4;
    --tz-band-10: #feddb9;
    --tz-band-11: #fdd1c0;
    --tz-band-12: #fac5ca;
    --tz-band-13: #f4bfda;
    --tz-band-14: #e7c5ee;
    --tz-band-15: #d9ccf6;
    --tz-chip-1: #d9c8f5;
    --tz-chip-2: #d4cbf4;
    --tz-chip-3: #cdd3f4;
    --tz-chip-4: #c5dcf4;
    --tz-chip-5: #bedff0;
    --tz-chip-6: #b9e4e8;
    --tz-chip-7: #b7e9dc;
    --tz-chip-8: #bbebcc;
    --tz-chip-9: #c6ecbc;
    --tz-chip-10: #d8edb4;
    --tz-chip-11: #e8ecb5;
    --tz-chip-12: #f4e9b7;
    --tz-chip-13: #ffffff;
    --tz-chip-14: #f8edbd;
    --tz-chip-15: #fee5b4;
    --tz-chip-16: #fedcb5;
    --tz-chip-17: #fdd2bc;
    --tz-chip-18: #fac9c6;
    --tz-chip-19: #f8c2cf;
    --tz-chip-20: #f5c0da;
    --tz-chip-21: #f0c4e8;
    --tz-chip-22: #e6c8f2;
    --tz-chip-23: #d7cff8;
    --tz-chip-24: #ccd7f8;
    --tz-chip-25: #c5e0f5;
    --tz-chip-26: #bee8ef;
    --tz-chip-27: #bdf0e3;
    min-height: 100svh;
    color: var(--tz-text);
    background: var(--tz-page-background);
    overflow-x: clip;
}

:root[data-theme="dark"] .time-zone-map-page[b-nrgu2nuvhb] {
    --tz-page-bg: #07111f;
    --tz-card-bg: rgba(15, 23, 42, 0.88);
    --tz-text: #e5edf7;
    --tz-muted: #9aa7bb;
    --tz-soft: #101827;
    --tz-border: rgba(148, 163, 184, 0.22);
    --tz-border-strong: rgba(148, 163, 184, 0.34);
    --tz-blue: #60a5fa;
    --tz-blue-dark: #93c5fd;
    --tz-blue-soft: rgba(96, 165, 250, 0.16);
    --tz-action-hover: #ffd27a;
    --tz-action-soft: rgba(242, 165, 49, 0.15);
    --tz-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
    --tz-page-background: linear-gradient(180deg, rgba(18, 27, 44, 0.98), var(--tz-page-bg) 34%, #050b14);
    --tz-control-color: #dbeafe;
    --tz-control-bg: rgba(15, 23, 42, 0.86);
    --tz-control-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 22px rgba(0, 0, 0, 0.22);
    --tz-control-hover-bg: color-mix(in srgb, var(--tz-blue) 12%, #0f172a);
    --tz-map-stage-bg: linear-gradient(180deg, rgba(14, 27, 47, 0.96), rgba(8, 17, 31, 0.98));
    --tz-map-band-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(2, 6, 23, 0.18));
    --tz-map-band-border: rgba(203, 213, 225, 0.1);
    --tz-boundary-stroke: rgba(203, 213, 225, 0.18);
    --tz-map-filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
    --tz-world-shade: linear-gradient(90deg, rgba(2, 6, 23, 0.48) 0%, rgba(8, 13, 29, 0.36) 16%, rgba(14, 23, 44, 0.14) 34%, rgba(96, 165, 250, 0.05) 42%, rgba(96, 165, 250, 0.05) 58%, rgba(14, 23, 44, 0.14) 66%, rgba(8, 13, 29, 0.36) 84%, rgba(2, 6, 23, 0.48) 100%);
    --tz-map-graticule: rgba(203, 213, 225, 0.15);
    --tz-map-land: rgba(226, 232, 240, 0.24);
    --tz-map-land-stroke: rgba(226, 232, 240, 0.72);
    --tz-map-land-shadow: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.26));
    --tz-map-borders: rgba(203, 213, 225, 0.32);
    --tz-map-edge-overlay: linear-gradient(90deg, rgba(2, 6, 23, 0.44), transparent 12%, transparent 88%, rgba(2, 6, 23, 0.44)), linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 20%, transparent 78%, rgba(2, 6, 23, 0.24));
    --tz-utc-line: rgba(226, 232, 240, 0.62);
    --tz-utc-pill-text: #dbeafe;
    --tz-utc-pill-bg: rgba(15, 23, 42, 0.94);
    --tz-utc-pill-border: rgba(96, 165, 250, 0.24);
    --tz-utc-pill-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    --tz-map-dot-bg: #22d3ee;
    --tz-map-dot-hover-bg: #67e8f9;
    --tz-map-dot-border: rgba(15, 23, 42, 0.95);
    --tz-map-dot-shadow: 0 0 0 1px rgba(103, 232, 249, 0.26), 0 6px 12px rgba(0, 0, 0, 0.3);
    --tz-map-dot-hover-shadow: 0 0 0 4px rgba(34, 211, 238, 0.18), 0 8px 16px rgba(0, 0, 0, 0.28);
    --tz-map-dot-selected-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18), 0 8px 16px rgba(96, 165, 250, 0.2);
    --tz-watermark-text: rgba(226, 232, 240, 0.58);
    --tz-watermark-bg: rgba(15, 23, 42, 0.54);
    --tz-callout-bg: rgba(15, 23, 42, 0.94);
    --tz-callout-shadow: 0 14px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(96, 165, 250, 0.08);
    --tz-callout-time: #bfdbfe;
    --tz-callout-utc: rgba(255, 210, 122, 0.92);
    --tz-map-control-bg: rgba(15, 23, 42, 0.9);
    --tz-map-control-text: #e2e8f0;
    --tz-map-control-border: rgba(148, 163, 184, 0.3);
    --tz-map-control-divider: rgba(148, 163, 184, 0.24);
    --tz-map-control-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
    --tz-kicker: #cbd5e1;
    --tz-row-icon: #93c5fd;
    --tz-daylight-text: #dbeafe;
    --tz-timeline-icon-text: #bfdbfe;
    --tz-timeline-icon-bg: rgba(15, 23, 42, 0.78);
    --tz-map-timeline-bg: rgba(8, 13, 29, 0.88);
    --tz-map-timeline-border: rgba(148, 163, 184, 0.24);
    --tz-map-timeline-shadow: 0 -16px 34px rgba(0, 0, 0, 0.26);
    --tz-timeline-track: rgba(148, 163, 184, 0.32);
    --tz-timeline-tick: rgba(148, 163, 184, 0.36);
    --tz-timeline-label: #cbd5e1;
    --tz-timeline-knob-bg: #0f172a;
    --tz-chip-text: #e5edf7;
    --tz-chip-border: rgba(226, 232, 240, 0.12);
    --tz-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 12px rgba(0, 0, 0, 0.14);
    --tz-popular-text: #cbd5e1;
    --tz-popular-bg: rgba(15, 23, 42, 0.62);
    --tz-info-bar-text: #aab7ca;
    --tz-info-bar-bg: linear-gradient(90deg, rgba(14, 27, 47, 0.86), rgba(15, 23, 42, 0.76));
    --tz-modal-backdrop: rgba(2, 6, 23, 0.7);
    --tz-modal-bg: rgba(15, 23, 42, 0.96);
    --tz-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
    --tz-modal-input-bg: rgba(2, 6, 23, 0.58);
    --tz-modal-option-bg: rgba(15, 23, 42, 0.72);
    --tz-modal-offset: #bfdbfe;
    --tz-focus: rgba(96, 165, 250, 0.36);
    --tz-band-1: #0f2a4a;
    --tz-band-2: #123857;
    --tz-band-3: #164762;
    --tz-band-4: #155b6b;
    --tz-band-5: #176b69;
    --tz-band-6: #2d745f;
    --tz-band-7: #56764f;
    --tz-band-8: #817344;
    --tz-band-9: #9a6c44;
    --tz-band-10: #9a5b4b;
    --tz-band-11: #8c4858;
    --tz-band-12: #763f66;
    --tz-band-13: #5d3d71;
    --tz-band-14: #46386c;
    --tz-band-15: #2f315f;
    --tz-chip-1: #33265d;
    --tz-chip-2: #2f2c62;
    --tz-chip-3: #283861;
    --tz-chip-4: #224762;
    --tz-chip-5: #1d5565;
    --tz-chip-6: #1b6265;
    --tz-chip-7: #1d6b5b;
    --tz-chip-8: #2b704d;
    --tz-chip-9: #457344;
    --tz-chip-10: #65703c;
    --tz-chip-11: #806b38;
    --tz-chip-12: #966237;
    --tz-chip-13: #0f172a;
    --tz-chip-14: #9a6b3b;
    --tz-chip-15: #9d5f3f;
    --tz-chip-16: #9a5247;
    --tz-chip-17: #8f4852;
    --tz-chip-18: #804158;
    --tz-chip-19: #743c61;
    --tz-chip-20: #673c6c;
    --tz-chip-21: #553e76;
    --tz-chip-22: #433e78;
    --tz-chip-23: #334274;
    --tz-chip-24: #294b71;
    --tz-chip-25: #22576b;
    --tz-chip-26: #1e6368;
    --tz-chip-27: #1d6f62;
}

.time-zone-map-page[b-nrgu2nuvhb],
.time-zone-map-page *[b-nrgu2nuvhb] {
    box-sizing: border-box;
}

.time-zone-map-shell[b-nrgu2nuvhb] {
    min-width: 0;
}

.time-zone-map-content[b-nrgu2nuvhb] {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: calc(var(--header-h, 4.25rem) + 22px) 32px 28px;
    display: grid;
    gap: 16px;
}

.time-zone-map-hero[b-nrgu2nuvhb] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 616px);
    align-items: center;
    gap: 20px;
}

.time-zone-map-title-block[b-nrgu2nuvhb] {
    min-width: 0;
}

.time-zone-map-title-block h1[b-nrgu2nuvhb] {
    margin: 0;
    color: var(--tz-text);
    font-size: 2.3rem;
    font-weight: 720;
    line-height: 1.05;
    letter-spacing: 0;
}

.time-zone-map-title-block p[b-nrgu2nuvhb] {
    max-width: 700px;
    margin: 0.42rem 0 0;
    color: var(--tz-muted);
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 400;
}

.time-zone-map-search-area[b-nrgu2nuvhb] {
    position: relative;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.time-zone-map-search-trigger svg[b-nrgu2nuvhb],
.time-zone-map-locate svg[b-nrgu2nuvhb],
.time-zone-icon-button svg[b-nrgu2nuvhb],
.time-zone-city-kicker svg[b-nrgu2nuvhb],
.time-zone-daylight svg[b-nrgu2nuvhb],
.time-zone-row-icon svg[b-nrgu2nuvhb],
.time-zone-city-link svg[b-nrgu2nuvhb],
.time-zone-timeline-icon svg[b-nrgu2nuvhb],
.time-zone-utc-time-row svg[b-nrgu2nuvhb],
.time-zone-info-bar svg[b-nrgu2nuvhb],
.time-zone-popular-cities svg[b-nrgu2nuvhb],
.time-zone-map-reset svg[b-nrgu2nuvhb] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.time-zone-map-search-trigger[b-nrgu2nuvhb],
.time-zone-map-locate[b-nrgu2nuvhb],
.time-zone-icon-button[b-nrgu2nuvhb],
.time-zone-map-reset[b-nrgu2nuvhb] {
    border: 1px solid var(--tz-border-strong);
    display: inline-grid;
    place-items: center;
    color: var(--tz-control-color);
    background: var(--tz-control-bg);
    box-shadow: var(--tz-control-shadow);
}

.time-zone-map-search-trigger[b-nrgu2nuvhb],
.time-zone-map-locate[b-nrgu2nuvhb] {
    width: 50px;
    height: 50px;
    border-radius: 14px;
}

.time-zone-map-search-trigger:hover[b-nrgu2nuvhb],
.time-zone-map-locate:hover[b-nrgu2nuvhb],
.time-zone-icon-button:hover[b-nrgu2nuvhb],
.time-zone-map-reset:hover[b-nrgu2nuvhb],
.time-zone-popular-cities button:hover[b-nrgu2nuvhb],
.time-zone-info-actions button:hover[b-nrgu2nuvhb] {
    border-color: color-mix(in srgb, var(--tz-blue) 34%, var(--tz-border));
    color: var(--tz-blue);
    background: var(--tz-control-hover-bg);
}

.time-zone-map-main-grid[b-nrgu2nuvhb] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.time-zone-map-card[b-nrgu2nuvhb],
.time-zone-city-card[b-nrgu2nuvhb],
.time-zone-timeline-card[b-nrgu2nuvhb],
.time-zone-utility-card[b-nrgu2nuvhb] {
    min-width: 0;
    border: 1px solid var(--tz-border);
    background: var(--tz-card-bg);
    box-shadow: var(--tz-shadow);
    backdrop-filter: blur(18px);
}

.time-zone-map-card[b-nrgu2nuvhb] {
    height: clamp(460px, min(56svh, 34vw), 540px);
    border-radius: 22px;
    overflow: hidden;
    transition: height 180ms ease;
}

.time-zone-map-stage[b-nrgu2nuvhb] {
    position: relative;
    --map-transform: matrix(1, 0, 0, 1, 0, 0);
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--tz-map-stage-bg);
    cursor: grab;
    touch-action: pan-x pan-y;
}

.time-zone-map-stage[data-dragging="true"][b-nrgu2nuvhb] {
    cursor: grabbing;
}

.time-zone-band-grid[b-nrgu2nuvhb] {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(15, minmax(0, 1fr));
    transform: var(--map-transform);
    transform-origin: 0 0;
    will-change: transform;
}

.time-zone-band-grid span[b-nrgu2nuvhb] {
    min-width: 0;
    background:
        var(--tz-map-band-overlay),
        var(--band-color);
    border-left: 1px solid var(--tz-map-band-border);
    opacity: 0.9;
    transition: opacity 180ms ease;
}

.time-zone-band-grid span:first-child[b-nrgu2nuvhb] {
    border-left: 0;
}

.time-zone-boundary-art[b-nrgu2nuvhb] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: var(--map-transform);
    transform-origin: 0 0;
    will-change: transform;
}

.time-zone-boundary-art path[b-nrgu2nuvhb] {
    fill: none;
    stroke: var(--tz-boundary-stroke);
    stroke-width: 1.1;
}

.time-zone-world-map[b-nrgu2nuvhb] {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    filter: var(--tz-map-filter);
    will-change: transform;
}

.time-zone-world-time-shade[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 300%;
    pointer-events: none;
    background-image: var(--tz-world-shade);
    background-repeat: repeat-x;
    background-size: 33.333333% 100%;
    transform: var(--map-transform) translateX(var(--daylight-shift, 0%));
    transform-origin: 0 0;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.time-zone-map-stage[b-nrgu2nuvhb]  .map-content {
    pointer-events: auto;
}

.time-zone-map-stage[b-nrgu2nuvhb]  .map-graticule {
    fill: none;
    stroke: var(--tz-map-graticule);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.time-zone-map-stage[b-nrgu2nuvhb]  .map-land {
    fill: var(--tz-map-land);
    stroke: var(--tz-map-land-stroke);
    stroke-width: 2.2;
    filter: var(--tz-map-land-shadow);
    vector-effect: non-scaling-stroke;
}

.time-zone-map-stage[b-nrgu2nuvhb]  .map-borders {
    fill: none;
    stroke: var(--tz-map-borders);
    stroke-width: 0.72;
    vector-effect: non-scaling-stroke;
}

.time-zone-map-stage[b-nrgu2nuvhb]  .map-routes-group,
.time-zone-map-stage[b-nrgu2nuvhb]  .map-ambient-group,
.time-zone-map-stage[b-nrgu2nuvhb]  .map-label-group {
    display: none;
}

.time-zone-map-tooltip[b-nrgu2nuvhb] {
    display: none;
}

.time-zone-map-stage[b-nrgu2nuvhb]::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    pointer-events: none;
    background: var(--tz-map-edge-overlay);
}

.time-zone-utc-line[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 57.3%;
    border-left: 2px dashed var(--tz-utc-line);
    pointer-events: none;
    transform: var(--map-transform);
    transform-origin: 0 0;
    will-change: transform;
}

.time-zone-utc-pill[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 6;
    top: -1px;
    left: 57.3%;
    transform: var(--map-transform) translateX(-50%);
    transform-origin: 0 0;
    min-height: 29px;
    padding: 0 11px;
    border-radius: 0 0 12px 12px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tz-utc-pill-border);
    border-top: 0;
    color: var(--tz-utc-pill-text);
    background: var(--tz-utc-pill-bg);
    box-shadow: var(--tz-utc-pill-shadow);
    font-size: 0.86rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.time-zone-map-overlay-content[b-nrgu2nuvhb] {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    transform: var(--map-transform);
    transform-origin: 0 0;
    will-change: transform;
}

.time-zone-popular-map-dot[b-nrgu2nuvhb] {
    position: absolute;
    left: var(--dot-left);
    top: var(--dot-top);
    width: 9px;
    height: 9px;
    border: 2px solid var(--tz-map-dot-border);
    border-radius: 999px;
    padding: 0;
    background: var(--tz-map-dot-bg);
    box-shadow: var(--tz-map-dot-shadow);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    transition:
        transform 170ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 170ms ease,
        box-shadow 170ms ease,
        border-color 170ms ease;
    cursor: pointer;
    pointer-events: auto;
}

.time-zone-popular-map-dot:hover[b-nrgu2nuvhb],
.time-zone-popular-map-dot:focus-visible[b-nrgu2nuvhb] {
    background: var(--tz-map-dot-hover-bg);
    box-shadow: var(--tz-map-dot-hover-shadow);
    transform: translate(-50%, -50%) scale(1.35);
}

.time-zone-popular-map-dot.is-selected[b-nrgu2nuvhb] {
    background: var(--tz-blue);
    box-shadow: var(--tz-map-dot-selected-shadow);
    transform: translate(-50%, -50%) scale(1.28);
}

.time-zone-map-watermark[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 6;
    right: 22px;
    bottom: 96px;
    padding: 5px 8px;
    border: 1px solid var(--tz-border);
    border-radius: 999px;
    color: var(--tz-watermark-text);
    background: var(--tz-watermark-bg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.time-zone-selected-marker[b-nrgu2nuvhb] {
    position: absolute;
    left: var(--marker-left);
    top: var(--marker-top);
    display: flex;
    align-items: center;
    pointer-events: none;
    transition:
        left 260ms cubic-bezier(0.22, 1, 0.36, 1),
        top 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: left, top;
}

.time-zone-pin[b-nrgu2nuvhb] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--tz-blue);
    filter: drop-shadow(0 9px 12px rgba(37, 99, 235, 0.26));
    transform: translate(-50%, -82%);
    transition: filter 180ms ease, transform 180ms ease;
}

.time-zone-pin svg[b-nrgu2nuvhb] {
    width: 38px;
    height: 38px;
    fill: currentColor;
    stroke: #ffffff;
    stroke-width: 1.6;
}

.time-zone-pin circle[b-nrgu2nuvhb] {
    fill: #eaf2ff;
    stroke: none;
}

.time-zone-map-callout[b-nrgu2nuvhb] {
    position: absolute;
    top: -76px;
    left: 20px;
    min-width: 148px;
    padding: 9px 10px;
    border: 1px solid var(--tz-callout-border);
    border-radius: 10px;
    display: grid;
    gap: 3px;
    color: var(--tz-text);
    background: var(--tz-callout-bg);
    box-shadow: var(--tz-callout-shadow);
    transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.time-zone-selected-marker.callout-left .time-zone-map-callout[b-nrgu2nuvhb] {
    right: 26px;
    left: auto;
}

.time-zone-map-callout strong[b-nrgu2nuvhb] {
    font-size: 0.82rem;
    font-weight: 800;
}

.time-zone-map-callout span[b-nrgu2nuvhb] {
    color: var(--tz-callout-time);
    font-size: 0.82rem;
    font-weight: 550;
}

.time-zone-map-callout small[b-nrgu2nuvhb] {
    color: var(--tz-callout-utc);
    font-size: 0.72rem;
    font-weight: 720;
    white-space: nowrap;
}

.time-zone-map-controls[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 8;
    top: 20px;
    left: 20px;
    width: 40px;
    border: 1px solid var(--tz-map-control-border);
    border-radius: 15px;
    display: grid;
    overflow: hidden;
    background: var(--tz-map-control-bg);
    box-shadow: var(--tz-map-control-shadow);
}

.time-zone-map-controls button[b-nrgu2nuvhb] {
    width: 100%;
    height: 40px;
    border: 0;
    display: grid;
    place-items: center;
    color: var(--tz-map-control-text);
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
}

.time-zone-map-controls button + button[b-nrgu2nuvhb] {
    border-top: 1px solid var(--tz-map-control-divider);
}

.time-zone-map-controls button:hover[b-nrgu2nuvhb],
.time-zone-map-controls button:focus-visible[b-nrgu2nuvhb] {
    color: var(--tz-blue);
    background: var(--tz-blue-soft);
}

.time-zone-map-reset[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 8;
    top: 124px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 16px;
}

.time-zone-city-card[b-nrgu2nuvhb] {
    padding: 18px;
    border-radius: 22px;
    display: grid;
    gap: 13px;
    align-self: start;
    min-height: 0;
}

.time-zone-city-card-top[b-nrgu2nuvhb],
.time-zone-date-row[b-nrgu2nuvhb],
.time-zone-info-list div[b-nrgu2nuvhb],
.time-zone-utility-title-row[b-nrgu2nuvhb],
.time-zone-info-bar[b-nrgu2nuvhb],
.time-zone-info-actions[b-nrgu2nuvhb],
.time-zone-info-bar p[b-nrgu2nuvhb] {
    display: flex;
    align-items: center;
}

.time-zone-city-card-top[b-nrgu2nuvhb] {
    justify-content: space-between;
    gap: 12px;
}

.time-zone-city-kicker[b-nrgu2nuvhb] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tz-kicker);
    font-size: 0.9rem;
    font-weight: 600;
}

.time-zone-city-kicker svg[b-nrgu2nuvhb] {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--tz-blue);
    fill: currentColor;
    stroke: none;
}

.time-zone-city-card h2[b-nrgu2nuvhb] {
    margin: 0;
    color: var(--tz-text);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 760;
    line-height: 1.18;
}

.time-zone-time-row[b-nrgu2nuvhb] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.time-zone-time-row time[b-nrgu2nuvhb] {
    min-width: 0;
    color: var(--tz-text);
    line-height: 0.95;
    white-space: nowrap;
}

.time-zone-time-main[b-nrgu2nuvhb] {
    font-size: clamp(2.25rem, 3.5vw, 3.05rem);
    font-weight: 800;
    letter-spacing: 0;
}

.time-zone-time-sub[b-nrgu2nuvhb] {
    font-size: clamp(0.96rem, 1.35vw, 1.18rem);
    font-weight: 720;
}

.time-zone-abbreviation[b-nrgu2nuvhb] {
    align-self: center;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--tz-blue);
    background: var(--tz-blue-soft);
    font-size: 0.85rem;
    font-weight: 800;
}

.time-zone-utc-time-row[b-nrgu2nuvhb] {
    min-width: 0;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--tz-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--tz-muted);
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.09), rgba(242, 165, 49, 0.08));
}

.time-zone-utc-time-label[b-nrgu2nuvhb],
.time-zone-utc-time-value[b-nrgu2nuvhb] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
}

.time-zone-utc-time-label[b-nrgu2nuvhb] {
    gap: 7px;
    color: var(--tz-kicker);
    font-size: 0.82rem;
    font-weight: 680;
    white-space: nowrap;
}

.time-zone-utc-time-label svg[b-nrgu2nuvhb] {
    width: 1rem;
    height: 1rem;
    color: var(--tz-blue-dark);
}

.time-zone-utc-time-value[b-nrgu2nuvhb] {
    justify-content: flex-end;
    gap: 7px;
    color: var(--tz-text);
    text-align: right;
}

.time-zone-utc-time-value time[b-nrgu2nuvhb] {
    font-size: 0.92rem;
    font-weight: 780;
    white-space: nowrap;
}

.time-zone-utc-time-value small[b-nrgu2nuvhb] {
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--tz-action-hover);
    background: var(--tz-action-soft);
    font-size: 0.68rem;
    font-weight: 760;
    white-space: nowrap;
}

.time-zone-date-row[b-nrgu2nuvhb] {
    justify-content: space-between;
    gap: 10px;
    color: var(--tz-muted);
    font-size: 0.92rem;
    line-height: 1.35;
}

.time-zone-daylight[b-nrgu2nuvhb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.time-zone-daylight.is-daytime[b-nrgu2nuvhb] {
    color: var(--tz-daylight-text);
}

.time-zone-daylight.is-daytime svg[b-nrgu2nuvhb] {
    color: #fbbf24;
}

.time-zone-daylight.is-nighttime svg[b-nrgu2nuvhb] {
    color: var(--tz-blue-dark);
}

.time-zone-card-divider[b-nrgu2nuvhb] {
    height: 1px;
    background: var(--tz-border);
}

.time-zone-info-list[b-nrgu2nuvhb] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.time-zone-info-list div[b-nrgu2nuvhb] {
    min-width: 0;
    justify-content: space-between;
    gap: 12px;
}

.time-zone-info-list dt[b-nrgu2nuvhb] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--tz-muted);
    font-size: 0.88rem;
    font-weight: 560;
}

.time-zone-info-list dd[b-nrgu2nuvhb] {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: 2px;
    justify-items: end;
    color: var(--tz-text);
    text-align: right;
}

.time-zone-info-list dd strong[b-nrgu2nuvhb] {
    max-width: 170px;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    font-weight: 760;
}

.time-zone-info-list dd small[b-nrgu2nuvhb] {
    color: var(--tz-muted);
    font-size: 0.78rem;
}

.time-zone-row-icon[b-nrgu2nuvhb] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--tz-row-icon);
}

.time-zone-city-link[b-nrgu2nuvhb] {
    min-height: 42px;
    margin-top: 2px;
    border: 1px solid color-mix(in srgb, var(--tz-action) 38%, var(--tz-border));
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--tz-action-hover);
    background: var(--tz-action-soft);
    font-size: 0.9rem;
    font-weight: 720;
    text-decoration: none;
}

.time-zone-city-link:hover[b-nrgu2nuvhb] {
    border-color: color-mix(in srgb, var(--tz-action) 58%, var(--tz-border));
    color: var(--tz-action-hover);
    background: color-mix(in srgb, var(--tz-action) 18%, var(--tz-card-bg));
}

.time-zone-timeline-card[b-nrgu2nuvhb] {
    min-height: 74px;
    padding: 10px 16px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.time-zone-timeline-icon[b-nrgu2nuvhb] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tz-border);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--tz-timeline-icon-text);
    background: var(--tz-timeline-icon-bg);
}

.time-zone-timeline-scroll[b-nrgu2nuvhb] {
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
}

.time-zone-timeline-scroll[b-nrgu2nuvhb]::-webkit-scrollbar {
    display: none;
}

.time-zone-timeline[b-nrgu2nuvhb] {
    position: relative;
    min-width: 1380px;
    height: 56px;
}

.time-zone-map-timeline-card[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 72px;
    padding: 8px 18px;
    border-color: var(--tz-map-timeline-border);
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--tz-map-timeline-bg);
    box-shadow: var(--tz-map-timeline-shadow);
    backdrop-filter: blur(12px);
    transition:
        left 180ms ease,
        right 180ms ease,
        bottom 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.time-zone-map-timeline-card .time-zone-timeline-icon[b-nrgu2nuvhb] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.time-zone-map-timeline-card .time-zone-timeline[b-nrgu2nuvhb] {
    min-width: 100%;
    height: 52px;
}

.time-zone-map-timeline-card .time-zone-timeline-track[b-nrgu2nuvhb] {
    top: 28px;
}

.time-zone-map-timeline-card .time-zone-timeline-tick[b-nrgu2nuvhb] {
    top: 20px;
}

.time-zone-map-timeline-card .time-zone-timeline-tick small[b-nrgu2nuvhb] {
    top: 18px;
    min-width: 34px;
    color: var(--tz-timeline-label);
    font-size: 0.58rem;
    font-weight: 650;
}

.time-zone-map-timeline-card .time-zone-timeline-marker[b-nrgu2nuvhb] {
    height: 50px;
}

.time-zone-timeline input[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 8;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.time-zone-timeline-track[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 28px;
    height: 1px;
    background: var(--tz-timeline-track);
}

.time-zone-timeline-tick[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: var(--tick-left);
    width: 1px;
    height: 22px;
    transform: translateX(-50%);
    color: var(--tz-timeline-label);
}

.time-zone-timeline-tick i[b-nrgu2nuvhb] {
    display: block;
    width: 1px;
    height: 9px;
    margin: 3px auto 0;
    background: var(--tz-timeline-tick);
}

.time-zone-timeline-tick small[b-nrgu2nuvhb] {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 60px;
    color: var(--tz-timeline-label);
    font-size: 0.72rem;
    font-weight: 560;
    text-align: center;
    white-space: nowrap;
}

.time-zone-timeline-marker[b-nrgu2nuvhb] {
    position: absolute;
    z-index: 4;
    top: 0;
    left: var(--selected-left);
    width: 1px;
    height: 50px;
    background: var(--tz-blue);
    transform: translateX(-50%);
}

.time-zone-timeline-marker span[b-nrgu2nuvhb] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 78px;
    padding: 5px 8px;
    border-radius: 7px;
    color: #ffffff;
    background: var(--tz-blue);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    font-size: 0.75rem;
    font-weight: 760;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.time-zone-timeline-marker i[b-nrgu2nuvhb] {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid var(--tz-blue);
    border-radius: 50%;
    transform: translate(-50%, 0);
    background: var(--tz-timeline-knob-bg);
}

.time-zone-utility-grid[b-nrgu2nuvhb] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 14px;
}

.time-zone-utility-card[b-nrgu2nuvhb] {
    padding: 13px 16px;
    border-radius: 16px;
}

.time-zone-utility-card h2[b-nrgu2nuvhb] {
    margin: 0 0 10px;
    color: var(--tz-text);
    font-size: 1rem;
    font-weight: 780;
    line-height: 1.2;
}

.time-zone-offset-chips[b-nrgu2nuvhb] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.time-zone-offset-chips span[b-nrgu2nuvhb] {
    min-width: 27px;
    min-height: 22px;
    padding: 0 5px;
    border: 1px solid var(--tz-chip-border);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tz-chip-text);
    background: var(--chip-bg);
    box-shadow: var(--tz-chip-shadow);
    font-size: 0.74rem;
    font-weight: 720;
}

.time-zone-popular-card[b-nrgu2nuvhb] {
    display: grid;
    align-content: start;
}

.time-zone-popular-cities[b-nrgu2nuvhb] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.time-zone-popular-cities[b-nrgu2nuvhb]::-webkit-scrollbar {
    display: none;
}

.time-zone-popular-cities button[b-nrgu2nuvhb] {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--tz-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--tz-popular-text);
    background: var(--tz-popular-bg);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.time-zone-popular-cities button.is-selected[b-nrgu2nuvhb] {
    border-color: color-mix(in srgb, var(--tz-action) 42%, var(--tz-border));
    color: var(--tz-action-hover);
    background: var(--tz-action-soft);
}

.time-zone-popular-cities button:hover[b-nrgu2nuvhb],
.time-zone-popular-cities button:focus-visible[b-nrgu2nuvhb] {
    border-color: color-mix(in srgb, var(--tz-action) 36%, var(--tz-border));
    color: var(--tz-action-hover);
    background: color-mix(in srgb, var(--tz-action) 13%, var(--tz-card-bg));
}

.time-zone-popular-cities button.is-selected svg[b-nrgu2nuvhb] {
    color: var(--tz-action-hover);
}

.time-zone-popular-cities svg[b-nrgu2nuvhb] {
    width: 1rem;
    height: 1rem;
    color: var(--tz-blue);
    fill: none;
    stroke: currentColor;
}

.time-zone-popular-cities .time-zone-city-next[b-nrgu2nuvhb] {
    width: 34px;
    padding: 0;
    border-radius: 12px;
}

.time-zone-info-bar[b-nrgu2nuvhb] {
    min-width: 0;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 15px;
    border: 1px solid var(--tz-border);
    color: var(--tz-info-bar-text);
    background: var(--tz-info-bar-bg);
}

.time-zone-info-bar p[b-nrgu2nuvhb] {
    min-width: 0;
    margin: 0;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
}

.time-zone-info-bar p svg[b-nrgu2nuvhb] {
    flex: 0 0 auto;
    color: var(--tz-blue);
}

.time-zone-info-actions[b-nrgu2nuvhb] {
    flex: 0 0 auto;
    gap: 10px;
}

.time-zone-info-actions button[b-nrgu2nuvhb],
.time-zone-info-actions a[b-nrgu2nuvhb] {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-left: 1px solid var(--tz-border);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tz-action-hover);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.time-zone-info-actions button:first-child[b-nrgu2nuvhb],
.time-zone-info-actions a:first-child[b-nrgu2nuvhb] {
    border-left: 0;
}

.time-zone-info-actions button:hover[b-nrgu2nuvhb],
.time-zone-info-actions button:focus-visible[b-nrgu2nuvhb],
.time-zone-info-actions a:hover[b-nrgu2nuvhb],
.time-zone-info-actions a:focus-visible[b-nrgu2nuvhb] {
    color: var(--tz-action-hover);
    background: color-mix(in srgb, var(--tz-action) 10%, transparent);
}

.time-zone-search-modal-layer[b-nrgu2nuvhb] {
    z-index: 100;
    background: var(--tz-modal-backdrop);
    backdrop-filter: blur(10px);
}

.time-zone-city-picker[b-nrgu2nuvhb] {
    width: min(100%, 34rem);
    max-height: min(78svh, 38rem);
    border-radius: 0.75rem;
    border: 1px solid var(--tz-border);
    background: var(--tz-modal-bg);
    box-shadow: var(--tz-modal-shadow);
}

.time-zone-city-picker .picker-head[b-nrgu2nuvhb] {
    padding: 1rem 1rem 0.75rem;
    gap: 0.85rem;
    border-bottom-color: var(--tz-border);
}

.time-zone-picker-eyebrow[b-nrgu2nuvhb] {
    margin: 0 0 0.32rem;
    color: var(--tz-blue);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.time-zone-city-picker h2[b-nrgu2nuvhb] {
    margin: 0;
    color: var(--tz-text);
    font-size: clamp(1.15rem, 2.1svh, 1.35rem);
    font-weight: 720;
    line-height: 1.15;
}

.time-zone-city-picker .close-button[b-nrgu2nuvhb] {
    width: 2.25rem;
    height: 2.25rem;
    border-color: var(--tz-border);
    color: var(--tz-control-color);
    background: var(--tz-control-bg);
    font-size: 0.86rem;
}

.time-zone-city-picker .search-box[b-nrgu2nuvhb] {
    margin: 0 1rem 0.75rem;
}

.time-zone-city-picker .search-box svg[b-nrgu2nuvhb] {
    left: 0.9rem;
    width: 1rem;
    height: 1rem;
    color: var(--tz-muted);
}

.time-zone-city-picker .search-box input[b-nrgu2nuvhb] {
    min-height: 2.45rem;
    padding: 0 0.9rem 0 2.55rem;
    font-size: 0.88rem;
    font-weight: 560;
    color: var(--tz-text);
    background: var(--tz-modal-input-bg);
    border-color: var(--tz-border);
}

.time-zone-city-picker .search-box input[b-nrgu2nuvhb]::placeholder {
    color: var(--tz-muted);
    opacity: 0.8;
}

.time-zone-city-picker .picker-list[b-nrgu2nuvhb] {
    max-height: min(23rem, 52svh);
    padding: 0 1rem 1rem;
    gap: 0.42rem;
}

.time-zone-city-picker .picker-option[b-nrgu2nuvhb] {
    min-height: 3.2rem;
    padding: 0.5rem 0.68rem;
    border-radius: 0.55rem;
    gap: 0.75rem;
    border-color: var(--tz-border);
    color: var(--tz-text);
    background: var(--tz-modal-option-bg);
}

.time-zone-city-picker .picker-option:hover[b-nrgu2nuvhb],
.time-zone-city-picker .picker-option:focus-visible[b-nrgu2nuvhb] {
    border-color: color-mix(in srgb, var(--tz-blue) 38%, var(--tz-border));
    background: color-mix(in srgb, var(--tz-blue) 12%, var(--tz-modal-bg));
}

.time-zone-city-picker .picker-option strong[b-nrgu2nuvhb] {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.16;
}

.time-zone-city-picker .picker-option small[b-nrgu2nuvhb] {
    margin-top: 0.16rem;
    font-size: 0.72rem;
    line-height: 1.18;
    color: var(--tz-muted);
}

.time-zone-city-picker .picker-option > span:last-child[b-nrgu2nuvhb] {
    font-size: 0.76rem;
    font-weight: 720;
    color: var(--tz-modal-offset);
}

.time-zone-city-picker .empty-state[b-nrgu2nuvhb] {
    padding: 1.15rem 0;
    font-size: 0.88rem;
    color: var(--tz-muted);
}

button:focus-visible[b-nrgu2nuvhb],
input:focus-visible[b-nrgu2nuvhb],
a:focus-visible[b-nrgu2nuvhb] {
    outline: 3px solid var(--tz-focus);
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .time-zone-map-hero[b-nrgu2nuvhb],
    .time-zone-map-main-grid[b-nrgu2nuvhb],
    .time-zone-utility-grid[b-nrgu2nuvhb] {
        grid-template-columns: 1fr;
    }

    .time-zone-map-search-area[b-nrgu2nuvhb] {
        justify-self: start;
    }

    .time-zone-city-card[b-nrgu2nuvhb] {
        min-height: 0;
    }

    .time-zone-info-list[b-nrgu2nuvhb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .time-zone-map-content[b-nrgu2nuvhb] {
        padding: calc(var(--header-h, 4.25rem) + 18px) 24px 24px;
    }

    .time-zone-map-card[b-nrgu2nuvhb] {
        height: clamp(410px, 58vw, 470px);
    }

    .time-zone-map-timeline-card .time-zone-timeline[b-nrgu2nuvhb] {
        min-width: max(100%, 820px);
    }

    .time-zone-info-list[b-nrgu2nuvhb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-zone-info-bar[b-nrgu2nuvhb] {
        align-items: flex-start;
        flex-direction: column;
    }

    .time-zone-info-actions[b-nrgu2nuvhb] {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .time-zone-map-content[b-nrgu2nuvhb] {
        padding: calc(var(--header-h, 4.25rem) + 16px) 16px 22px;
        gap: 14px;
    }

    .time-zone-map-hero[b-nrgu2nuvhb] {
        gap: 14px;
    }

    .time-zone-map-title-block h1[b-nrgu2nuvhb] {
        font-size: 2rem;
    }

    .time-zone-map-title-block p[b-nrgu2nuvhb] {
        font-size: 1rem;
    }

    .time-zone-map-search-area[b-nrgu2nuvhb] {
        gap: 10px;
    }

    .time-zone-map-search-trigger[b-nrgu2nuvhb],
    .time-zone-map-locate[b-nrgu2nuvhb] {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .time-zone-map-card[b-nrgu2nuvhb] {
        height: clamp(360px, 82vw, 430px);
        border-radius: 20px;
    }

    .time-zone-map-controls[b-nrgu2nuvhb] {
        top: 18px;
        left: 16px;
        width: 42px;
        border-radius: 15px;
    }

    .time-zone-map-controls button[b-nrgu2nuvhb] {
        height: 42px;
    }

    .time-zone-map-reset[b-nrgu2nuvhb] {
        top: 126px;
        left: 16px;
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }

    .time-zone-pin[b-nrgu2nuvhb],
    .time-zone-pin svg[b-nrgu2nuvhb] {
        width: 36px;
        height: 36px;
    }

    .time-zone-map-callout[b-nrgu2nuvhb] {
        top: -74px;
        min-width: 140px;
        padding: 8px 10px;
    }

    .time-zone-map-watermark[b-nrgu2nuvhb] {
        right: 18px;
        bottom: 86px;
        font-size: 0.62rem;
    }

    .time-zone-city-card[b-nrgu2nuvhb] {
        padding: 16px;
        border-radius: 20px;
        gap: 10px;
    }

    .time-zone-time-row[b-nrgu2nuvhb] {
        flex-wrap: wrap;
    }

    .time-zone-time-main[b-nrgu2nuvhb] {
        font-size: clamp(2.35rem, 12vw, 3rem);
    }

    .time-zone-info-list div[b-nrgu2nuvhb] {
        align-items: flex-start;
    }

    .time-zone-date-row[b-nrgu2nuvhb] {
        gap: 8px;
        font-size: 0.86rem;
    }

    .time-zone-timeline-card[b-nrgu2nuvhb] {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 10px;
        gap: 10px;
    }

    .time-zone-timeline-icon[b-nrgu2nuvhb] {
        width: 38px;
        height: 38px;
    }

    .time-zone-map-timeline-card[b-nrgu2nuvhb] {
        right: 0;
        bottom: 0;
        left: 0;
        min-height: 64px;
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 8px 10px;
        gap: 8px;
        border-radius: 0;
    }

    .time-zone-map-timeline-card .time-zone-timeline-icon[b-nrgu2nuvhb] {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .time-zone-map-timeline-card .time-zone-timeline[b-nrgu2nuvhb] {
        min-width: max(100%, 860px);
        height: 48px;
    }

    .time-zone-map-timeline-card .time-zone-timeline-marker[b-nrgu2nuvhb] {
        height: 46px;
    }

    .time-zone-map-timeline-card .time-zone-timeline-tick small[b-nrgu2nuvhb] {
        min-width: 40px;
        font-size: 0.62rem;
    }

    .time-zone-timeline[b-nrgu2nuvhb] {
        min-width: 1320px;
    }

    .time-zone-utility-card[b-nrgu2nuvhb] {
        padding: 13px;
    }

    .time-zone-popular-cities[b-nrgu2nuvhb] {
        flex-wrap: nowrap;
    }

    .time-zone-info-bar[b-nrgu2nuvhb] {
        padding: 13px;
    }
}

@media (max-width: 520px) {
    .time-zone-map-timeline-card .time-zone-timeline[b-nrgu2nuvhb] {
        min-width: max(100%, 760px);
    }

    .time-zone-utc-time-row[b-nrgu2nuvhb] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .time-zone-utc-time-value[b-nrgu2nuvhb] {
        justify-content: flex-start;
        text-align: left;
    }

    .time-zone-info-list[b-nrgu2nuvhb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .time-zone-info-list div[b-nrgu2nuvhb] {
        display: grid;
        align-content: start;
        gap: 6px;
        padding: 9px;
        border: 1px solid var(--tz-border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--tz-blue) 4%, var(--tz-card-bg));
    }

    .time-zone-info-list dt[b-nrgu2nuvhb] {
        gap: 6px;
        font-size: 0.78rem;
    }

    .time-zone-row-icon[b-nrgu2nuvhb] {
        width: 16px;
        height: 16px;
    }

    .time-zone-info-list dd[b-nrgu2nuvhb] {
        justify-items: start;
        text-align: left;
    }

    .time-zone-info-list dd strong[b-nrgu2nuvhb] {
        max-width: 100%;
        font-size: 0.8rem;
    }

    .time-zone-info-list dd small[b-nrgu2nuvhb] {
        font-size: 0.68rem;
    }

    .time-zone-info-actions[b-nrgu2nuvhb] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .time-zone-info-actions button[b-nrgu2nuvhb] {
        justify-content: center;
        border: 1px solid var(--tz-border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--tz-blue) 4%, var(--tz-card-bg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .time-zone-map-controls button[b-nrgu2nuvhb],
    .time-zone-map-search-trigger[b-nrgu2nuvhb],
    .time-zone-map-locate[b-nrgu2nuvhb],
    .time-zone-icon-button[b-nrgu2nuvhb],
    .time-zone-popular-cities button[b-nrgu2nuvhb],
    .time-zone-city-link[b-nrgu2nuvhb],
    .time-zone-map-card[b-nrgu2nuvhb],
    .time-zone-map-timeline-card[b-nrgu2nuvhb],
    .time-zone-popular-map-dot[b-nrgu2nuvhb],
    .time-zone-selected-marker[b-nrgu2nuvhb],
    .time-zone-pin[b-nrgu2nuvhb],
    .time-zone-map-callout[b-nrgu2nuvhb] {
        transition: none;
    }

    .time-zone-world-time-shade[b-nrgu2nuvhb] {
        transition: none;
    }
}

.time-zone-map-content .seo-panel[b-nrgu2nuvhb] {
    width: 100%;
    margin: 8px 0 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--tz-border);
    border-radius: 20px;
    background: var(--tz-card-bg);
    box-shadow: var(--tz-shadow);
    display: grid;
    gap: 1.25rem;
}

.time-zone-map-content .seo-panel .eyebrow[b-nrgu2nuvhb] {
    margin: 0 0 0.35rem;
    color: var(--tz-blue);
    font-size: 0.8rem;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.time-zone-map-content .seo-faq h2[b-nrgu2nuvhb] {
    margin: 0;
    color: var(--tz-text);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 720;
    line-height: 1.15;
}

.time-zone-map-content .seo-faq details[b-nrgu2nuvhb] {
    border-top: 1px solid var(--tz-border);
    padding: 1.1rem 0 0;
}

.time-zone-map-content .seo-faq details:first-of-type[b-nrgu2nuvhb] {
    border-top: 0;
    padding-top: 0;
}

.time-zone-map-content .seo-faq summary[b-nrgu2nuvhb] {
    cursor: pointer;
    color: var(--tz-text);
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.4;
    user-select: none;
    transition: color 0.15s ease;
}

.time-zone-map-content .seo-faq summary:hover[b-nrgu2nuvhb] {
    color: var(--tz-blue);
}

.time-zone-map-content .seo-faq details p[b-nrgu2nuvhb] {
    margin: 0.65rem 0 0;
    color: var(--tz-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* /Components/Pages/Weather14DayPage.razor.rz.scp.css */
.weather14-page[b-3g0nj25hi4] {
    --weather14-accent: #1769e0;
    --weather14-accent-soft: rgba(23, 105, 224, .12);
    --weather14-panel-shadow: 0 8px 24px rgba(15, 23, 42, .055);
    --weather14-panel-shadow-hover: 0 12px 30px rgba(15, 23, 42, .1);
    min-height: 100vh;
    background: var(--wt-page-bg, #f3f5f8);
    color: var(--wt-text, #111827);
}

.weather14-shell[b-3g0nj25hi4] {
    width: min(1500px, calc(100% - 32px));
    margin: 0 auto;
    padding: calc(var(--header-height, var(--header-h, 72px)) + 10px) 0 34px;
}

.weather14-card[b-3g0nj25hi4],
.weather14-glance[b-3g0nj25hi4],
.weather14-loading[b-3g0nj25hi4],
.weather14-error[b-3g0nj25hi4] {
    border: 1px solid var(--wt-border, #dce2ea);
    border-radius: 8px;
    background: var(--wt-surface, #fff);
    box-shadow: var(--weather14-panel-shadow);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.weather14-topbar[b-3g0nj25hi4],
.weather14-heading[b-3g0nj25hi4],
.weather14-layout[b-3g0nj25hi4],
.weather14-trends[b-3g0nj25hi4],
.weather14-seo-summary[b-3g0nj25hi4],
.weather14-weekend-grid[b-3g0nj25hi4] {
    display: grid;
}

.weather14-topbar[b-3g0nj25hi4] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 34px;
    margin-bottom: 12px;
}

.weather14-breadcrumb ol[b-3g0nj25hi4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    color: var(--wt-muted, #667085);
}

.weather14-breadcrumb li:not(:last-child)[b-3g0nj25hi4]::after {
    content: "/";
    margin-left: 6px;
    color: #9aa4b2;
}

.weather14-breadcrumb a[b-3g0nj25hi4],
.weather14-card a[b-3g0nj25hi4],
.weather14-heading a[b-3g0nj25hi4] {
    color: var(--wt-accent, #1769e0);
    text-decoration: none;
}

.weather14-breadcrumb a:hover[b-3g0nj25hi4],
.weather14-card a:hover[b-3g0nj25hi4],
.weather14-heading a:hover[b-3g0nj25hi4] { text-decoration: underline; }

.weather14-unit-controls[b-3g0nj25hi4] {
    display: flex;
    gap: 7px;
}

.weather14-unit-controls > div[b-3g0nj25hi4] {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(38px, 1fr));
    overflow: hidden;
    border: 1px solid var(--wt-border, #d9e0e9);
    border-radius: 6px;
    background: var(--wt-surface, #fff);
}

.weather14-unit-controls button[b-3g0nj25hi4],
.weather14-view-switcher button[b-3g0nj25hi4],
.weather14-chart-card header button[b-3g0nj25hi4],
.weather14-error button[b-3g0nj25hi4] {
    border: 0;
    background: transparent;
    color: var(--wt-muted, #596579);
    font: inherit;
    cursor: pointer;
}

.weather14-unit-controls button[b-3g0nj25hi4] {
    min-height: 32px;
    padding: 0 9px;
    font-size: .72rem;
    font-weight: 700;
}

.weather14-unit-controls button + button[b-3g0nj25hi4] { border-left: 1px solid var(--wt-border, #d9e0e9); }
.weather14-unit-controls button.is-active[b-3g0nj25hi4] { background: var(--weather14-accent); color: #fff; }
.weather14-unit-controls button:hover:not(.is-active)[b-3g0nj25hi4] { background: var(--weather14-accent-soft); color: var(--weather14-accent); }

.weather14-heading[b-3g0nj25hi4] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    margin: 0 0 14px;
}

.weather14-eyebrow[b-3g0nj25hi4] {
    margin: 0 0 4px;
    color: #1769e0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.weather14-heading h1[b-3g0nj25hi4] {
    margin: 0;
    font-size: 2.3rem;
    line-height: 1.12;
    letter-spacing: 0;
}

.weather14-description[b-3g0nj25hi4],
.weather14-narrative[b-3g0nj25hi4] {
    max-width: 920px;
    margin: 6px 0 0;
    color: var(--wt-muted, #637083);
    font-size: .84rem;
    line-height: 1.45;
}

.weather14-narrative[b-3g0nj25hi4] { color: var(--wt-text-soft, #3f4b5c); }

.weather14-heading-meta[b-3g0nj25hi4] {
    display: grid;
    justify-items: end;
    gap: 7px;
    color: var(--wt-muted, #667085);
    font-size: .72rem;
    white-space: nowrap;
}

.weather14-alert-link[b-3g0nj25hi4] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #f5b5b5;
    border-radius: 6px;
    background: #fff4f3;
    color: #b42318 !important;
}

.weather14-alert-link span[b-3g0nj25hi4] { font-size: 1.05rem; }

.weather14-glance[b-3g0nj25hi4] { padding: 11px; margin-bottom: 11px; }
.weather14-glance > header[b-3g0nj25hi4],
.weather14-card > header[b-3g0nj25hi4],
.weather14-planning > header[b-3g0nj25hi4],
.weather14-weekends > header[b-3g0nj25hi4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.weather14-glance > header[b-3g0nj25hi4] { margin: 0 2px 9px; }
.weather14-glance h2[b-3g0nj25hi4],
.weather14-card h2[b-3g0nj25hi4] { margin: 0; font-size: 1rem; line-height: 1.25; }
.weather14-glance header span[b-3g0nj25hi4],
.weather14-card header > span[b-3g0nj25hi4] { color: var(--wt-muted, #6b7280); font-size: .7rem; }

.weather14-glance-grid[b-3g0nj25hi4] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.weather14-glance-card[b-3g0nj25hi4] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 70px;
    gap: 9px;
    padding: 9px;
    border: 1px solid var(--wt-border-soft, #e7ebf0);
    border-radius: 6px;
    background: var(--wt-soft, #f7f9fb);
}

.weather14-glance-card > span[b-3g0nj25hi4] { flex: 0 0 26px; font-size: 1.35rem; text-align: center; color: #1769e0; }
.weather14-glance-card div[b-3g0nj25hi4] { min-width: 0; display: grid; gap: 2px; }
.weather14-glance-card small[b-3g0nj25hi4],
.weather14-glance-card em[b-3g0nj25hi4] { overflow: hidden; color: var(--wt-muted, #667085); font-size: .7rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.weather14-glance-card strong[b-3g0nj25hi4] { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }

.weather14-layout[b-3g0nj25hi4] { grid-template-columns: minmax(0, 1fr) 286px; gap: 11px; align-items: start; }
.weather14-main-column[b-3g0nj25hi4],
.weather14-sidebar[b-3g0nj25hi4] { display: grid; gap: 11px; min-width: 0; }
.weather14-sidebar[b-3g0nj25hi4] { position: sticky; top: 12px; }

.weather14-view-switcher[b-3g0nj25hi4] {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    padding: 3px;
    border: 1px solid var(--wt-border, #dce2ea);
    border-radius: 7px;
    background: var(--wt-soft, #f5f7fa);
}

.weather14-view-switcher button[b-3g0nj25hi4] {
    min-width: 94px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 700;
}

.weather14-view-switcher button.is-active[b-3g0nj25hi4] {
    background: var(--wt-surface, #fff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
    color: var(--weather14-accent);
}
.weather14-view-switcher button:hover:not(.is-active)[b-3g0nj25hi4] { color: var(--weather14-accent); }

.weather14-primary-card[b-3g0nj25hi4] { overflow: hidden; padding: 12px; }
.weather14-card-head[b-3g0nj25hi4] { margin-bottom: 10px; }
.weather14-card-head p[b-3g0nj25hi4] { margin: 0 0 3px; color: var(--weather14-accent); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.weather14-card-head a[b-3g0nj25hi4] { font-size: .78rem; font-weight: 700; }

.weather14-rail-stage[b-3g0nj25hi4] { position: relative; }
.weather14-day-rail[b-3g0nj25hi4] {
    display: grid;
    grid-auto-columns: 130px;
    grid-auto-flow: column;
    gap: 6px;
    overflow-x: auto;
    padding: 2px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.weather14-day-card[b-3g0nj25hi4] {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 18px 43px auto minmax(28px, auto) auto;
    align-items: center;
    min-height: 206px;
    padding: 9px 8px 8px;
    border: 1px solid var(--wt-border-soft, #e3e8ef);
    border-radius: 7px;
    background: var(--wt-surface, #fff);
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: start;
}

.weather14-day-card:hover[b-3g0nj25hi4] { border-color: #9fc4f9; background: #f7fbff; box-shadow: 0 7px 18px rgba(23, 105, 224, .1); transform: translateY(-1px); }
.weather14-day-card.is-long-range[b-3g0nj25hi4] { background: var(--wt-soft, #f8f9fb); }
.weather14-day-card.is-selected[b-3g0nj25hi4] { border-color: #1769e0; box-shadow: inset 0 0 0 1px #1769e0, 0 6px 16px rgba(23, 105, 224, .1); }
.weather14-day-card.is-today[b-3g0nj25hi4]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 7px 0 0 7px; background: #1769e0; }
.weather14-day-card > time[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .7rem; }
.weather14-day-card > em[b-3g0nj25hi4] { align-self: center; color: #d92d20; font-size: .59rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.weather14-day-card > i[b-3g0nj25hi4] { display: grid; place-items: center; height: 43px; }
.weather14-day-card > i[b-3g0nj25hi4]  svg { width: 42px; height: 42px; }
.weather14-day-name[b-3g0nj25hi4] { font-size: .78rem; font-weight: 800; }
.weather14-day-card > strong[b-3g0nj25hi4] { font-size: 1rem; }
.weather14-day-card > strong span[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .8rem; font-weight: 600; }
.weather14-day-card > small[b-3g0nj25hi4] { line-height: 1.25; font-size: .7rem; color: var(--wt-muted, #5f6b7c); }
.weather14-day-meta[b-3g0nj25hi4] { display: flex; justify-content: space-between; gap: 5px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--wt-border-soft, #e6eaf0); color: #35638f; font-size: .64rem; }

.weather14-scroll-arrow[b-3g0nj25hi4] {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    place-items: center;
    width: 31px;
    height: 56px;
    margin-top: -28px;
    border: 1px solid #9fc4f9;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    color: #1769e0;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .16);
    cursor: pointer;
}

.weather14-scroll-arrow.is-left[b-3g0nj25hi4] { left: -8px; }
.weather14-scroll-arrow.is-right[b-3g0nj25hi4] { right: -8px; }
.weather14-scroll-arrow svg[b-3g0nj25hi4] { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.weather14-scroll-arrow:disabled[b-3g0nj25hi4] { opacity: 0; pointer-events: none; }
.weather14-scroll-arrow:hover:not(:disabled)[b-3g0nj25hi4] { background: #f1f7ff; box-shadow: 0 9px 22px rgba(23, 105, 224, .2); }

.weather14-selected-day[b-3g0nj25hi4] {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) 1.6fr;
    gap: 12px;
    margin-top: 9px;
    padding: 10px;
    border-top: 1px solid var(--wt-border, #dce2ea);
    background: var(--wt-soft, #f7f9fb);
}

.weather14-selected-summary[b-3g0nj25hi4] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.weather14-selected-summary > span[b-3g0nj25hi4]  svg { width: 50px; height: 50px; }
.weather14-selected-summary small[b-3g0nj25hi4] { color: #1769e0; font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.weather14-selected-summary h3[b-3g0nj25hi4] { margin: 2px 0; font-size: 1rem; }
.weather14-selected-summary p[b-3g0nj25hi4] { margin: 0; color: var(--wt-muted, #667085); font-size: .67rem; line-height: 1.35; }
.weather14-selected-metrics[b-3g0nj25hi4] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; gap: 5px; }
.weather14-selected-metrics div[b-3g0nj25hi4] { min-width: 0; padding: 6px 7px; border-left: 1px solid var(--wt-border, #dce2ea); }
.weather14-selected-metrics dt[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .59rem; }
.weather14-selected-metrics dd[b-3g0nj25hi4] { margin: 2px 0 0; font-size: .7rem; font-weight: 800; }

.weather14-trends[b-3g0nj25hi4] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.weather14-chart-card[b-3g0nj25hi4] { min-width: 0; padding: 13px; overflow: hidden; }
.weather14-chart-card > header[b-3g0nj25hi4] { margin-bottom: 6px; }
.weather14-chart-card header button[b-3g0nj25hi4] { color: var(--weather14-accent); font-size: .76rem; font-weight: 700; }
.weather14-chart-card header button:hover[b-3g0nj25hi4] { text-decoration: underline; }

.weather14-temperature-chart[b-3g0nj25hi4] { position: relative; min-height: 176px; padding: 10px 3px 23px; }
.weather14-temperature-chart svg[b-3g0nj25hi4] { display: block; width: 100%; height: 138px; overflow: visible; }
.weather14-chart-grid line[b-3g0nj25hi4] { stroke: var(--wt-border-soft, #e6eaf0); stroke-width: 1; }
.weather14-line[b-3g0nj25hi4] { fill: none; stroke-width: 2.3; vector-effect: non-scaling-stroke; }
.weather14-line.is-high[b-3g0nj25hi4] { stroke: #f04438; }
.weather14-line.is-low[b-3g0nj25hi4] { stroke: #1769e0; }
.weather14-temperature-chart circle.is-high[b-3g0nj25hi4] { fill: #f04438; }
.weather14-temperature-chart circle.is-low[b-3g0nj25hi4] { fill: #1769e0; }
.weather14-chart-legend[b-3g0nj25hi4] { display: flex; gap: 14px; font-size: .65rem; color: var(--wt-muted, #667085); }
.weather14-chart-legend i[b-3g0nj25hi4] { display: inline-block; width: 13px; height: 2px; margin-right: 4px; vertical-align: middle; }
.weather14-chart-legend .is-high[b-3g0nj25hi4] { background: #f04438; }
.weather14-chart-legend .is-low[b-3g0nj25hi4] { background: #1769e0; }
.weather14-chart-labels[b-3g0nj25hi4] { position: absolute; inset: auto 2px 0; display: grid; grid-template-columns: repeat(14, 1fr); color: var(--wt-muted, #758094); font-size: .52rem; text-align: center; }

.weather14-bar-chart[b-3g0nj25hi4] {
    display: grid;
    grid-template-columns: repeat(14, minmax(12px, 1fr));
    align-items: end;
    gap: 4px;
    height: 176px;
    padding-top: 10px;
}

.weather14-bar-chart > div[b-3g0nj25hi4] { display: grid; grid-template-rows: 18px 118px 18px; align-items: end; min-width: 0; text-align: center; }
.weather14-bar-chart strong[b-3g0nj25hi4] { align-self: center; font-size: .56rem; }
.weather14-bar-chart i[b-3g0nj25hi4] { justify-self: center; width: min(74%, 20px); min-height: 3px; border-radius: 3px 3px 1px 1px; background: #3b82f6; }
.weather14-bar-chart small[b-3g0nj25hi4] { align-self: end; color: var(--wt-muted, #758094); font-size: .5rem; white-space: nowrap; }
.weather14-uv-chart i.is-low[b-3g0nj25hi4] { background: #4caf50; }
.weather14-uv-chart i.is-moderate[b-3g0nj25hi4] { background: #ffb020; }
.weather14-uv-chart i.is-high[b-3g0nj25hi4] { background: #f04438; }

.weather14-detail-table-wrap[b-3g0nj25hi4] { overflow-x: auto; }
.weather14-detail-table[b-3g0nj25hi4] { width: 100%; border-collapse: collapse; font-size: .68rem; }
.weather14-detail-table th[b-3g0nj25hi4] { padding: 7px 6px; background: var(--wt-soft, #f6f8fa); color: var(--wt-muted, #667085); text-align: left; white-space: nowrap; }
.weather14-detail-table td[b-3g0nj25hi4] { padding: 7px 6px; border-top: 1px solid var(--wt-border-soft, #e7ebf0); white-space: nowrap; }
.weather14-detail-table td:nth-child(2)[b-3g0nj25hi4] { white-space: normal; min-width: 140px; }
.weather14-mobile-details[b-3g0nj25hi4] { display: none; }

.weather14-planning[b-3g0nj25hi4],
.weather14-weekends[b-3g0nj25hi4],
.weather14-seo-summary[b-3g0nj25hi4],
.weather14-current-card[b-3g0nj25hi4],
.weather14-sun-card[b-3g0nj25hi4],
.weather14-alert-card[b-3g0nj25hi4],
.weather14-links-card[b-3g0nj25hi4] { padding: 11px; }

.weather14-planning > header[b-3g0nj25hi4],
.weather14-weekends > header[b-3g0nj25hi4] { margin-bottom: 9px; }
.weather14-planning > div[b-3g0nj25hi4] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.weather14-planning article[b-3g0nj25hi4] { display: flex; gap: 8px; min-width: 0; padding: 4px 10px; border-left: 1px solid var(--wt-border-soft, #e7ebf0); }
.weather14-planning article:first-child[b-3g0nj25hi4] { border-left: 0; padding-left: 2px; }
.weather14-planning article > span[b-3g0nj25hi4] { color: #1769e0; font-size: 1.25rem; }
.weather14-planning h3[b-3g0nj25hi4] { margin: 0; font-size: .68rem; }
.weather14-planning strong[b-3g0nj25hi4] { display: block; margin-top: 2px; font-size: .66rem; }
.weather14-planning p[b-3g0nj25hi4] { margin: 2px 0 0; color: var(--wt-muted, #667085); font-size: .6rem; line-height: 1.3; }

.weather14-weekend-grid[b-3g0nj25hi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.weather14-weekend-grid > article[b-3g0nj25hi4] { padding: 9px; border: 1px solid var(--wt-border-soft, #e7ebf0); border-radius: 6px; background: var(--wt-soft, #f8f9fb); }
.weather14-weekend-grid h3[b-3g0nj25hi4] { margin: 0 0 6px; font-size: .76rem; }
.weather14-weekend-day[b-3g0nj25hi4] { display: grid; grid-template-columns: 76px 31px 80px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 35px; border-top: 1px solid var(--wt-border-soft, #e7ebf0); font-size: .64rem; }
.weather14-weekend-day:first-of-type[b-3g0nj25hi4] { border-top: 0; }
.weather14-weekend-day span[b-3g0nj25hi4]  svg { width: 27px; height: 27px; }
.weather14-weekend-day small[b-3g0nj25hi4] { color: var(--wt-muted, #667085); }

.weather14-seo-summary[b-3g0nj25hi4] { gap: 0; }
.weather14-seo-summary h2[b-3g0nj25hi4] { font-size: 1rem; }
.weather14-seo-summary p[b-3g0nj25hi4] { margin: 7px 0 0; color: var(--wt-muted, #667085); font-size: .8rem; line-height: 1.55; }
.weather14-seo-summary nav[b-3g0nj25hi4] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .76rem; font-weight: 700; }

.weather14-faq-card[b-3g0nj25hi4] {
    width: 100%;
    padding: 15px;
    gap: 0;
    border-color: var(--wt-border, #dce2ea);
    border-radius: 8px;
    background: var(--wt-surface, #fff);
    box-shadow: var(--weather14-panel-shadow);
    backdrop-filter: none;
}

.weather14-faq-card .eyebrow[b-3g0nj25hi4] {
    margin: 0 0 4px;
    color: var(--weather14-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.weather14-faq-card h2[b-3g0nj25hi4] {
    margin: 0 0 10px;
    color: var(--wt-text, #111827);
    font-size: 1.15rem;
    line-height: 1.25;
}

.weather14-faq-card details[b-3g0nj25hi4] {
    padding: 10px 0 0;
    border-color: var(--wt-border-soft, #e7ebf0);
}

.weather14-faq-card details:first-of-type[b-3g0nj25hi4] { padding-top: 0; }
.weather14-faq-card summary[b-3g0nj25hi4] { color: var(--wt-text, #111827); font-size: .84rem; font-weight: 760; line-height: 1.4; cursor: pointer; }
.weather14-faq-card details p[b-3g0nj25hi4] { margin: 7px 0 0; color: var(--wt-muted, #667085); font-size: .8rem; line-height: 1.6; }

.weather14-sidebar .weather14-card > header[b-3g0nj25hi4] { margin-bottom: 9px; }
.weather14-current-hero[b-3g0nj25hi4] {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 136px;
    overflow: hidden;
    padding: 12px;
    border-radius: 6px;
    background-image: var(--weather14-hero-image);
    background-position: center;
    background-size: cover;
    color: #fff;
    isolation: isolate;
}

.weather14-current-hero[b-3g0nj25hi4]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 20, 39, .78), rgba(6, 36, 67, .22)); }
.weather14-current-hero strong[b-3g0nj25hi4] { font-size: 2rem; line-height: 1; }
.weather14-current-hero span[b-3g0nj25hi4] { margin-top: 4px; font-size: .86rem; font-weight: 800; }
.weather14-current-hero small[b-3g0nj25hi4] { margin-top: 2px; font-size: .66rem; }
.weather14-current-hero > i[b-3g0nj25hi4] { position: absolute; top: 8px; right: 8px; }
.weather14-current-hero > i[b-3g0nj25hi4]  svg { width: 64px; height: 64px; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .18)); }
.weather14-current-metrics[b-3g0nj25hi4] { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0 0; }
.weather14-current-metrics div[b-3g0nj25hi4] { padding: 6px; border-left: 1px solid var(--wt-border-soft, #e7ebf0); border-top: 1px solid var(--wt-border-soft, #e7ebf0); }
.weather14-current-metrics div:nth-child(3n + 1)[b-3g0nj25hi4] { border-left: 0; }
.weather14-current-metrics dt[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .58rem; }
.weather14-current-metrics dd[b-3g0nj25hi4] { margin: 2px 0 0; font-size: .68rem; font-weight: 800; }

.weather14-sun-card > div[b-3g0nj25hi4] { display: grid; grid-template-columns: 28px 1fr 28px 1fr; align-items: center; gap: 6px; }
.weather14-sun-card > div > span[b-3g0nj25hi4] { color: #f59e0b; font-size: 1.2rem; text-align: center; }
.weather14-sun-card p[b-3g0nj25hi4] { display: grid; margin: 0; }
.weather14-sun-card small[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .58rem; }
.weather14-sun-card strong[b-3g0nj25hi4] { font-size: .71rem; }

.weather14-alert-card p[b-3g0nj25hi4] { display: grid; grid-template-columns: 27px 1fr; margin: 0; gap: 1px 7px; align-items: center; }
.weather14-alert-card p + p[b-3g0nj25hi4] { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--wt-border-soft, #e7ebf0); }
.weather14-alert-card p > span[b-3g0nj25hi4] { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e9f8ee; color: #16833b; font-weight: 800; }
.weather14-alert-card p.is-active > span[b-3g0nj25hi4] { background: #fff0ee; color: #d92d20; }
.weather14-alert-card strong[b-3g0nj25hi4] { font-size: .7rem; }
.weather14-alert-card small[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .6rem; }

.weather14-links-card nav[b-3g0nj25hi4] { display: grid; }
.weather14-links-card a[b-3g0nj25hi4] { display: flex; justify-content: space-between; padding: 8px 2px; border-top: 1px solid var(--wt-border-soft, #e7ebf0); font-size: .68rem; font-weight: 700; }
.weather14-links-card a:first-child[b-3g0nj25hi4] { border-top: 0; }

.weather14-loading[b-3g0nj25hi4] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; min-height: 280px; padding: 18px; }
.weather14-loading span[b-3g0nj25hi4] { border-radius: 6px; background: linear-gradient(100deg, #eef1f5 20%, #f8fafc 40%, #eef1f5 60%); background-size: 250% 100%; animation: weather14-shimmer-b-3g0nj25hi4 1.3s infinite linear; }
.weather14-error[b-3g0nj25hi4] { padding: 36px; text-align: center; }
.weather14-error h1[b-3g0nj25hi4] { margin: 0; font-size: 1.6rem; }
.weather14-error p[b-3g0nj25hi4] { color: var(--wt-muted, #667085); }
.weather14-error button[b-3g0nj25hi4] { min-height: 36px; padding: 0 14px; border-radius: 6px; background: #1769e0; color: #fff; font-weight: 700; }

.weather14-page button:focus-visible[b-3g0nj25hi4],
.weather14-page a:focus-visible[b-3g0nj25hi4],
.weather14-day-rail:focus-visible[b-3g0nj25hi4],
.weather14-page summary:focus-visible[b-3g0nj25hi4] { outline: 3px solid rgba(23, 105, 224, .32); outline-offset: 2px; }

.weather14-page[b-3g0nj25hi4]  .weather-svg-sun { fill: #ffb020; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-ray { stroke: #ffb020; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-cloud { fill: #b8c4d1; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-rain { stroke: #3182ce; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-moon { fill: #8ea6c8; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-snow { fill: #88c8f0; }
.weather14-page[b-3g0nj25hi4]  .weather-svg-bolt { fill: #f4b740; }

@keyframes weather14-shimmer-b-3g0nj25hi4 { to { background-position-x: -150%; } }

:root[data-theme="dark"] .weather14-page[b-3g0nj25hi4] {
    --wt-page-bg: #0a0d12;
    --wt-surface: #11161d;
    --wt-soft: #171d26;
    --wt-border: #29313c;
    --wt-border-soft: #242b35;
    --wt-text: #edf2f7;
    --wt-text-soft: #c4ccd7;
    --wt-muted: #99a5b5;
    background: #0a0d12;
}

:root[data-theme="dark"] .weather14-alert-link[b-3g0nj25hi4] { background: #291719; border-color: #6e3034; color: #ff9b94 !important; }
:root[data-theme="dark"] .weather14-day-card:hover[b-3g0nj25hi4] { background: #151e29; border-color: #4179bb; }
:root[data-theme="dark"] .weather14-scroll-arrow[b-3g0nj25hi4] { background: rgba(17, 22, 29, .96); border-color: #315b8c; }
:root[data-theme="dark"] .weather14-loading span[b-3g0nj25hi4] { background: linear-gradient(100deg, #151b23 20%, #202833 40%, #151b23 60%); background-size: 250% 100%; }
:root[data-theme="dark"] .weather14-faq-card[b-3g0nj25hi4] {
    border-color: #29313c;
    background: #11161d;
    box-shadow: var(--weather14-panel-shadow);
}

@media (max-width: 1180px) {
    .weather14-glance-grid[b-3g0nj25hi4] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .weather14-layout[b-3g0nj25hi4] { grid-template-columns: minmax(0, 1fr) 250px; }
    .weather14-selected-day[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-planning > div[b-3g0nj25hi4] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; }
    .weather14-planning article:nth-child(4)[b-3g0nj25hi4] { border-left: 0; }
    .weather14-selected-metrics[b-3g0nj25hi4] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    .weather14-layout[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-sidebar[b-3g0nj25hi4] { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather14-current-card[b-3g0nj25hi4] { grid-row: span 2; }
    .weather14-trends[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-chart-card[b-3g0nj25hi4] { min-height: 220px; }
}

@media (max-width: 700px) {
    .weather14-shell[b-3g0nj25hi4] { width: min(100% - 20px, 1500px); padding-top: calc(var(--header-height, var(--header-h, 64px)) + 7px); }
    .weather14-topbar[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-unit-controls[b-3g0nj25hi4] { width: 100%; }
    .weather14-unit-controls > div[b-3g0nj25hi4] { flex: 1; }
    .weather14-heading[b-3g0nj25hi4] { grid-template-columns: 1fr; gap: 8px; }
    .weather14-heading h1[b-3g0nj25hi4] { font-size: 1.7rem; }
    .weather14-heading-meta[b-3g0nj25hi4] { justify-items: start; white-space: normal; }
    .weather14-narrative[b-3g0nj25hi4] { display: none; }
    .weather14-glance[b-3g0nj25hi4] { overflow: hidden; }
    .weather14-glance-grid[b-3g0nj25hi4] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .weather14-glance-card[b-3g0nj25hi4] { flex: 0 0 156px; scroll-snap-align: start; }
    .weather14-view-switcher[b-3g0nj25hi4] { width: 100%; overflow-x: auto; }
    .weather14-view-switcher button[b-3g0nj25hi4] { flex: 1 0 84px; min-width: 0; }
    .weather14-primary-card[b-3g0nj25hi4] { padding: 9px; }
    .weather14-card-head[b-3g0nj25hi4] { align-items: flex-start; }
    .weather14-card-head a[b-3g0nj25hi4] { text-align: right; }
    .weather14-day-rail[b-3g0nj25hi4] { grid-auto-columns: 124px; }
    .weather14-day-card[b-3g0nj25hi4] { min-height: 196px; }
    .weather14-scroll-arrow[b-3g0nj25hi4] { width: 28px; height: 50px; }
    .weather14-selected-metrics[b-3g0nj25hi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather14-selected-metrics div[b-3g0nj25hi4] { border-left: 0; border-top: 1px solid var(--wt-border-soft, #e7ebf0); }
    .weather14-detail-table-wrap[b-3g0nj25hi4] { display: none; }
    .weather14-mobile-details[b-3g0nj25hi4] { display: grid; gap: 6px; }
    .weather14-mobile-details details[b-3g0nj25hi4] { border: 1px solid var(--wt-border-soft, #e7ebf0); border-radius: 6px; }
    .weather14-mobile-details summary[b-3g0nj25hi4] { padding: 9px; font-size: .72rem; font-weight: 800; cursor: pointer; }
    .weather14-mobile-details dl[b-3g0nj25hi4] { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0 9px 9px; gap: 6px; }
    .weather14-mobile-details dl div[b-3g0nj25hi4] { padding: 6px; background: var(--wt-soft, #f7f9fb); }
    .weather14-mobile-details dt[b-3g0nj25hi4] { color: var(--wt-muted, #667085); font-size: .58rem; }
    .weather14-mobile-details dd[b-3g0nj25hi4] { margin: 2px 0 0; font-size: .68rem; font-weight: 700; }
    .weather14-planning > div[b-3g0nj25hi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather14-planning article[b-3g0nj25hi4],
    .weather14-planning article:nth-child(4)[b-3g0nj25hi4] { border-left: 0; border-top: 1px solid var(--wt-border-soft, #e7ebf0); padding: 8px 4px; }
    .weather14-planning article:first-child[b-3g0nj25hi4],
    .weather14-planning article:nth-child(2)[b-3g0nj25hi4] { border-top: 0; }
    .weather14-weekend-grid[b-3g0nj25hi4],
    .weather14-sidebar[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-current-card[b-3g0nj25hi4] { grid-row: auto; }
    .weather14-weekend-day[b-3g0nj25hi4] { grid-template-columns: 72px 29px 76px minmax(0, 1fr); }
    .weather14-chart-labels small:nth-child(even)[b-3g0nj25hi4],
    .weather14-bar-chart small:nth-child(even)[b-3g0nj25hi4] { visibility: hidden; }
}

@media (max-width: 430px) {
    .weather14-shell[b-3g0nj25hi4] { width: calc(100% - 14px); }
    .weather14-heading h1[b-3g0nj25hi4] { font-size: 1.48rem; }
    .weather14-description[b-3g0nj25hi4] { font-size: .76rem; }
    .weather14-glance > header span[b-3g0nj25hi4] { display: none; }
    .weather14-card-head[b-3g0nj25hi4] { display: grid; }
    .weather14-card-head a[b-3g0nj25hi4] { text-align: left; }
    .weather14-day-rail[b-3g0nj25hi4] { grid-auto-columns: 118px; }
    .weather14-planning > div[b-3g0nj25hi4] { grid-template-columns: 1fr; }
    .weather14-planning article:nth-child(2)[b-3g0nj25hi4] { border-top: 1px solid var(--wt-border-soft, #e7ebf0); }
    .weather14-weekend-day[b-3g0nj25hi4] { grid-template-columns: 68px 27px 74px; }
    .weather14-weekend-day small[b-3g0nj25hi4] { grid-column: 1 / -1; padding-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .weather14-day-rail[b-3g0nj25hi4] { scroll-behavior: auto; }
    .weather14-loading span[b-3g0nj25hi4] { animation: none; }
}
/* /Components/Pages/Weather48HourPage.razor.rz.scp.css */
.weather48-page[b-qcg1qgnqi4] {
    --w48-page: #f3f5f8;
    --w48-surface: #ffffff;
    --w48-surface-soft: #f5f7fa;
    --w48-border: #dce2e9;
    --w48-border-strong: #c7d0db;
    --w48-text: #111827;
    --w48-secondary: #536174;
    --w48-muted: #778396;
    --w48-accent: var(--accent, #1769e0);
    --w48-good: #11884a;
    --w48-warning: #c98108;
    --w48-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 22px rgba(17, 24, 39, 0.04);
    --w48-shadow-raised: 0 10px 30px rgba(17, 24, 39, 0.11);
    min-height: 100dvh;
    color: var(--w48-text);
    background: var(--w48-page);
}

:root[data-theme="dark"] .weather48-page[b-qcg1qgnqi4] {
    --w48-page: #0a0d12;
    --w48-surface: #11161d;
    --w48-surface-soft: #171d26;
    --w48-border: rgba(199, 210, 225, 0.15);
    --w48-border-strong: rgba(199, 210, 225, 0.27);
    --w48-text: #f4f7fb;
    --w48-secondary: #bdc7d4;
    --w48-muted: #8491a2;
    --w48-accent: #71b7ff;
    --w48-good: #55d892;
    --w48-warning: #f0b84d;
    --w48-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 12px 28px rgba(0, 0, 0, 0.18);
    --w48-shadow-raised: 0 14px 34px rgba(0, 0, 0, 0.34);
    background: var(--w48-page);
}

.weather48-page[b-qcg1qgnqi4],
.weather48-page *[b-qcg1qgnqi4] {
    box-sizing: border-box;
}

.weather48-shell[b-qcg1qgnqi4] {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding: calc(var(--header-height, var(--header-h, 72px)) + 9px) clamp(14px, 1.4vw, 22px) 22px;
    display: grid;
    gap: 10px;
}

.weather48-topbar[b-qcg1qgnqi4],
.weather48-heading[b-qcg1qgnqi4],
.weather48-card-head[b-qcg1qgnqi4] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.weather48-breadcrumb[b-qcg1qgnqi4] {
    min-width: 0;
    color: var(--w48-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.weather48-breadcrumb ol[b-qcg1qgnqi4] {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.weather48-breadcrumb li[b-qcg1qgnqi4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.weather48-breadcrumb li + li[b-qcg1qgnqi4]::before {
    content: "/";
    color: color-mix(in srgb, var(--w48-muted) 55%, transparent);
}

.weather48-breadcrumb a[b-qcg1qgnqi4] {
    color: var(--w48-accent);
    text-decoration: none;
}

.weather48-unit-controls[b-qcg1qgnqi4] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.weather48-unit-controls > div[b-qcg1qgnqi4] {
    padding: 2px;
    border: 1px solid var(--w48-border);
    border-radius: 7px;
    display: flex;
    background: var(--w48-surface-soft);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent);
}

.weather48-unit-controls button[b-qcg1qgnqi4] {
    min-width: 35px;
    min-height: 31px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    color: var(--w48-secondary);
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 760;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.weather48-unit-controls button.is-active[b-qcg1qgnqi4] {
    color: #fff;
    background: var(--w48-accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--w48-accent) 28%, transparent);
}

.weather48-unit-controls button:hover:not(.is-active)[b-qcg1qgnqi4] {
    color: var(--w48-text);
    background: color-mix(in srgb, var(--w48-accent) 7%, var(--w48-surface));
}

.weather48-heading[b-qcg1qgnqi4] {
    align-items: flex-end;
    padding: 4px 2px 3px;
}

.weather48-heading > div[b-qcg1qgnqi4] {
    min-width: 0;
}

.weather48-eyebrow[b-qcg1qgnqi4] {
    margin: 0 0 3px;
    color: var(--w48-accent);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.weather48-heading h1[b-qcg1qgnqi4],
.weather48-error h1[b-qcg1qgnqi4] {
    margin: 0;
    color: var(--w48-text);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: 0;
}

.weather48-heading p:not(.weather48-eyebrow)[b-qcg1qgnqi4] {
    max-width: 62rem;
    margin: 5px 0 0;
    color: var(--w48-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.weather48-heading time[b-qcg1qgnqi4] {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--w48-border);
    border-radius: 7px;
    color: var(--w48-secondary);
    background: var(--w48-surface);
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--w48-surface) 96%, var(--w48-accent));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--w48-text) 7%, transparent);
    font-weight: 720;
    white-space: nowrap;
}

.weather48-summary-grid[b-qcg1qgnqi4] {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.weather48-summary-card[b-qcg1qgnqi4],
.weather48-card[b-qcg1qgnqi4] {
    min-width: 0;
    border: 1px solid var(--w48-border);
    border-radius: 7px;
    background: var(--w48-surface);
    box-shadow: var(--w48-shadow);
}

.weather48-summary-card[b-qcg1qgnqi4] {
    min-height: 70px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.weather48-summary-card:hover[b-qcg1qgnqi4] {
    border-color: color-mix(in srgb, var(--w48-accent) 28%, var(--w48-border));
    box-shadow: var(--w48-shadow-raised);
    transform: translateY(-1px);
}

.weather48-summary-card > span[b-qcg1qgnqi4] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-family: "Segoe UI Emoji", sans-serif;
    border-radius: 6px;
    background: color-mix(in srgb, var(--w48-accent) 7%, var(--w48-surface-soft));
    font-size: 1rem;
}

.weather48-summary-card div[b-qcg1qgnqi4] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather48-summary-card small[b-qcg1qgnqi4],
.weather48-summary-card em[b-qcg1qgnqi4] {
    color: var(--w48-muted);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.2;
}

.weather48-summary-card strong[b-qcg1qgnqi4] {
    min-width: 0;
    color: var(--w48-text);
    font-size: 0.86rem;
    font-weight: 780;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.weather48-layout[b-qcg1qgnqi4] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    align-items: start;
    gap: 10px;
}

.weather48-main-column[b-qcg1qgnqi4],
.weather48-sidebar[b-qcg1qgnqi4] {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.weather48-card[b-qcg1qgnqi4] {
    padding: 11px;
}

.weather48-card-head[b-qcg1qgnqi4] {
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--w48-border);
}

.weather48-card-head p[b-qcg1qgnqi4],
.weather48-card-head h2[b-qcg1qgnqi4] {
    margin: 0;
}

.weather48-card-head p[b-qcg1qgnqi4] {
    margin-bottom: 2px;
    color: var(--w48-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.weather48-card-head h2[b-qcg1qgnqi4],
.weather48-card header h2[b-qcg1qgnqi4],
.weather48-seo-card h2[b-qcg1qgnqi4] {
    margin: 0;
    color: var(--w48-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.weather48-card-head > span[b-qcg1qgnqi4] {
    color: var(--w48-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.weather48-table-wrap[b-qcg1qgnqi4] {
    min-width: 0;
    max-height: min(69dvh, 670px);
    overflow: auto;
    border: 1px solid var(--w48-border);
    border-radius: 7px;
    background: var(--w48-surface);
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--w48-text) 4%, transparent);
    scrollbar-color: var(--w48-border-strong) transparent;
}

.weather48-table-wrap:focus-visible[b-qcg1qgnqi4] {
    outline: 3px solid color-mix(in srgb, var(--w48-accent) 28%, transparent);
    outline-offset: 2px;
}

.weather48-table-stage[b-qcg1qgnqi4] {
    position: relative;
    min-width: 0;
}

.weather48-scroll-arrow[b-qcg1qgnqi4] {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 36px;
    height: 54px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--w48-accent) 34%, var(--w48-border));
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--w48-accent);
    background: color-mix(in srgb, var(--w48-surface) 92%, transparent);
    box-shadow: var(--w48-shadow-raised);
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.weather48-scroll-arrow.is-left[b-qcg1qgnqi4] { left: -8px; }
.weather48-scroll-arrow.is-right[b-qcg1qgnqi4] { right: -8px; }

.weather48-scroll-arrow svg[b-qcg1qgnqi4] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.weather48-scroll-arrow:hover:not(:disabled)[b-qcg1qgnqi4] {
    border-color: var(--w48-accent);
    color: #fff;
    background: var(--w48-accent);
    transform: translateY(-50%) scale(1.04);
}

.weather48-scroll-arrow:disabled[b-qcg1qgnqi4] {
    opacity: 0.28;
    box-shadow: none;
    cursor: default;
}

.weather48-table[b-qcg1qgnqi4] {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--w48-text);
    font-size: 0.7rem;
}

.weather48-table th[b-qcg1qgnqi4],
.weather48-table td[b-qcg1qgnqi4] {
    min-width: 64px;
    height: 32px;
    padding: 4px 6px;
    border-right: 1px solid color-mix(in srgb, var(--w48-border) 70%, transparent);
    border-bottom: 1px solid var(--w48-border);
    text-align: center;
    white-space: nowrap;
}

.weather48-table tr > :first-child[b-qcg1qgnqi4] {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 142px;
    max-width: 142px;
    padding-left: 10px;
    color: var(--w48-secondary);
    background: var(--w48-surface);
    font-weight: 760;
    text-align: left;
}

.weather48-table thead[b-qcg1qgnqi4] {
    position: sticky;
    top: 0;
    z-index: 4;
}

.weather48-table thead th[b-qcg1qgnqi4] {
    color: var(--w48-secondary);
    background: var(--w48-surface-soft);
    font-weight: 780;
}

.weather48-table thead tr > :first-child[b-qcg1qgnqi4] {
    z-index: 6;
    background: var(--w48-surface-soft);
}

.weather48-table .weather48-day-row th[b-qcg1qgnqi4] {
    height: 30px;
    color: var(--w48-text);
    background: color-mix(in srgb, var(--w48-accent) 6%, var(--w48-surface));
    font-size: 0.72rem;
    text-align: left;
}

.weather48-table tbody tr:hover td[b-qcg1qgnqi4],
.weather48-table tbody tr:hover th[b-qcg1qgnqi4] {
    background: color-mix(in srgb, var(--w48-accent) 5%, var(--w48-surface));
}

.weather48-table tbody tr:nth-child(even) td:not(.is-now)[b-qcg1qgnqi4],
.weather48-table tbody tr:nth-child(even) th[b-qcg1qgnqi4] {
    background: color-mix(in srgb, var(--w48-surface-soft) 48%, var(--w48-surface));
}

.weather48-table td.is-now[b-qcg1qgnqi4],
.weather48-table th.is-now[b-qcg1qgnqi4] {
    background: color-mix(in srgb, var(--w48-accent) 10%, var(--w48-surface));
}

.weather48-table .is-day-start[b-qcg1qgnqi4] {
    border-left: 2px solid color-mix(in srgb, var(--w48-accent) 50%, var(--w48-border));
}

.weather48-table th small[b-qcg1qgnqi4] {
    display: block;
    margin-top: 1px;
    color: var(--w48-muted);
    font-size: 0.61rem;
    font-weight: 700;
}

.weather48-condition-row td[b-qcg1qgnqi4] {
    height: 42px;
}

.weather48-condition-icon[b-qcg1qgnqi4] {
    width: 32px;
    height: 32px;
    margin-inline: auto;
    display: grid;
    place-items: center;
}

.weather48-condition-icon[b-qcg1qgnqi4]  svg,
.weather48-current-hero i[b-qcg1qgnqi4]  svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.weather48-page[b-qcg1qgnqi4]  .weather-svg-sun { fill: #fbbf24; stroke: #f59e0b; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-ray { stroke: #f59e0b; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-cloud { fill: #dce8f4; stroke: #8ea4bc; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-rain { stroke: #3b82f6; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-snow { stroke: #60a5fa; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-bolt { fill: #facc15; stroke: #d97706; }
.weather48-page[b-qcg1qgnqi4]  .weather-svg-moon { fill: #dbeafe; stroke: #7c8da6; }

.weather48-wind-direction[b-qcg1qgnqi4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.weather48-wind-direction i[b-qcg1qgnqi4] {
    color: var(--w48-accent);
    font-size: 0.85rem;
    font-style: normal;
}

.weather48-uv-row .is-low[b-qcg1qgnqi4] { color: #16854b; }
.weather48-uv-row .is-moderate[b-qcg1qgnqi4] { color: #b97808; }
.weather48-uv-row .is-high[b-qcg1qgnqi4] { color: #dc5a18; font-weight: 850; }
.weather48-uv-row .is-very-high[b-qcg1qgnqi4] { color: #dc2626; font-weight: 850; }

.weather48-insights[b-qcg1qgnqi4] {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.weather48-insight-card[b-qcg1qgnqi4] {
    padding: 10px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
}

.weather48-insight-card > span[b-qcg1qgnqi4] {
    font-family: "Segoe UI Emoji", sans-serif;
    font-size: 1.1rem;
}

.weather48-insight-card h3[b-qcg1qgnqi4],
.weather48-insight-card p[b-qcg1qgnqi4] {
    margin: 0;
}

.weather48-insight-card h3[b-qcg1qgnqi4] {
    color: var(--w48-secondary);
    font-size: 0.72rem;
    font-weight: 740;
}

.weather48-insight-card strong[b-qcg1qgnqi4] {
    margin-top: 4px;
    display: block;
    color: var(--w48-text);
    font-size: 0.83rem;
    font-weight: 780;
}

.weather48-insight-card p[b-qcg1qgnqi4] {
    margin-top: 4px;
    color: var(--w48-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.weather48-sidebar .weather48-card > header[b-qcg1qgnqi4] {
    margin-bottom: 9px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--w48-border);
}

.weather48-current-hero[b-qcg1qgnqi4] {
    min-height: 158px;
    padding: 14px;
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background-image: linear-gradient(90deg, rgba(4, 37, 74, 0.9), rgba(8, 65, 124, 0.38)), var(--weather48-hero-image);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), inset 0 -42px 70px rgba(1, 18, 38, 0.22);
}

.weather48-current-hero strong[b-qcg1qgnqi4] {
    font-size: 2.15rem;
    font-weight: 760;
}

.weather48-current-hero span[b-qcg1qgnqi4] {
    margin-top: 2px;
    font-size: 0.95rem;
    font-weight: 760;
}

.weather48-current-hero small[b-qcg1qgnqi4] {
    margin-top: 5px;
    font-size: 0.74rem;
    font-weight: 700;
}

.weather48-current-hero i[b-qcg1qgnqi4] {
    position: absolute;
    right: 14px;
    top: 26px;
    width: 72px;
    height: 72px;
}

.weather48-current-metrics[b-qcg1qgnqi4] {
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weather48-current-metrics div[b-qcg1qgnqi4] {
    min-width: 0;
    padding: 7px 6px 5px;
    border-left: 1px solid var(--w48-border);
}

.weather48-current-metrics div:first-child[b-qcg1qgnqi4] { border-left: 0; }
.weather48-current-metrics dt[b-qcg1qgnqi4],
.weather48-current-metrics dd[b-qcg1qgnqi4] { margin: 0; }
.weather48-current-metrics dt[b-qcg1qgnqi4] { color: var(--w48-muted); font-size: 0.62rem; font-weight: 750; }
.weather48-current-metrics dd[b-qcg1qgnqi4] { margin-top: 2px; color: var(--w48-text); font-size: 0.74rem; font-weight: 780; overflow-wrap: anywhere; }

.weather48-location-card > strong[b-qcg1qgnqi4] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.82rem;
}

.weather48-location-card dl[b-qcg1qgnqi4],
.weather48-aqi-card dl[b-qcg1qgnqi4] {
    margin: 0;
    display: grid;
    gap: 6px;
}

.weather48-location-card dl div[b-qcg1qgnqi4],
.weather48-aqi-card dl div[b-qcg1qgnqi4] {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.weather48-location-card dt[b-qcg1qgnqi4],
.weather48-location-card dd[b-qcg1qgnqi4],
.weather48-aqi-card dt[b-qcg1qgnqi4],
.weather48-aqi-card dd[b-qcg1qgnqi4] {
    margin: 0;
    font-size: 0.72rem;
}

.weather48-location-card dt[b-qcg1qgnqi4],
.weather48-aqi-card dt[b-qcg1qgnqi4] { color: var(--w48-muted); }
.weather48-location-card dd[b-qcg1qgnqi4],
.weather48-aqi-card dd[b-qcg1qgnqi4] { color: var(--w48-text); font-weight: 800; text-align: right; }

.weather48-aqi-value[b-qcg1qgnqi4] {
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.weather48-aqi-value strong[b-qcg1qgnqi4] { color: var(--w48-good); font-size: 2rem; font-weight: 750; }
.weather48-aqi-value span[b-qcg1qgnqi4] { color: var(--w48-good); font-size: 0.78rem; font-weight: 850; }
.weather48-aqi-card > p[b-qcg1qgnqi4] { margin: 0; color: var(--w48-secondary); font-size: 0.75rem; }

.weather48-alert-status[b-qcg1qgnqi4] {
    padding: 9px;
    border: 1px solid var(--w48-border);
    border-radius: 6px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
}

.weather48-alert-status + .weather48-alert-status[b-qcg1qgnqi4] { margin-top: 6px; }
.weather48-alert-status > span[b-qcg1qgnqi4] { width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-weight: 850; }
.weather48-alert-status p[b-qcg1qgnqi4] { margin: 0; display: grid; gap: 2px; }
.weather48-alert-status strong[b-qcg1qgnqi4] { font-size: 0.77rem; }
.weather48-alert-status small[b-qcg1qgnqi4] { color: var(--w48-secondary); font-size: 0.68rem; line-height: 1.35; }
.weather48-alert-status.is-clear[b-qcg1qgnqi4] { color: var(--w48-good); background: color-mix(in srgb, var(--w48-good) 5%, var(--w48-surface)); }
.weather48-alert-status.is-active[b-qcg1qgnqi4] { color: #dc2626; background: color-mix(in srgb, #ef4444 6%, var(--w48-surface)); }
.weather48-alerts-card > a[b-qcg1qgnqi4] { margin-top: 9px; display: inline-block; color: var(--w48-accent); font-size: 0.72rem; font-weight: 800; text-decoration: none; }

.weather48-links-card nav[b-qcg1qgnqi4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.weather48-links-card a[b-qcg1qgnqi4] {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--w48-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: var(--w48-accent);
    background: var(--w48-surface-soft);
    font-size: 0.7rem;
    font-weight: 740;
    text-decoration: none;
    transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.weather48-links-card a:hover[b-qcg1qgnqi4] {
    border-color: color-mix(in srgb, var(--w48-accent) 38%, var(--w48-border));
    color: var(--w48-text);
    background: color-mix(in srgb, var(--w48-accent) 8%, var(--w48-surface));
}

.weather48-seo-card[b-qcg1qgnqi4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 0.8fr);
    gap: 18px;
}

.weather48-seo-card > div:first-child[b-qcg1qgnqi4] {
    padding-right: 18px;
    border-right: 1px solid var(--w48-border);
}

.weather48-seo-card p[b-qcg1qgnqi4] {
    margin: 7px 0 0;
    color: var(--w48-secondary);
    font-size: 0.76rem;
    line-height: 1.55;
}

.weather48-seo-card nav[b-qcg1qgnqi4] {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.weather48-seo-card nav a[b-qcg1qgnqi4] {
    color: var(--w48-accent);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.weather48-faq[b-qcg1qgnqi4] {
    display: grid;
    gap: 6px;
}

.weather48-faq details[b-qcg1qgnqi4] {
    border: 1px solid var(--w48-border);
    border-radius: 6px;
    background: var(--w48-surface-soft);
}

.weather48-faq details[open][b-qcg1qgnqi4] {
    border-color: color-mix(in srgb, var(--w48-accent) 28%, var(--w48-border));
    background: color-mix(in srgb, var(--w48-accent) 5%, var(--w48-surface));
}

.weather48-faq summary[b-qcg1qgnqi4] {
    padding: 8px 10px;
    color: var(--w48-accent);
    font-size: 0.72rem;
    font-weight: 760;
    cursor: pointer;
}

.weather48-faq p[b-qcg1qgnqi4] { margin: 0; padding: 0 10px 9px; }

.weather48-loading[b-qcg1qgnqi4] {
    min-height: 520px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.weather48-loading span[b-qcg1qgnqi4] {
    border: 1px solid var(--w48-border);
    border-radius: 8px;
    background: linear-gradient(100deg, var(--w48-surface) 20%, var(--w48-surface-soft) 40%, var(--w48-surface) 60%);
    background-size: 220% 100%;
    animation: weather48-shimmer-b-qcg1qgnqi4 1.5s linear infinite;
}

.weather48-loading span:first-child[b-qcg1qgnqi4] { grid-column: 1 / -1; min-height: 160px; }

@keyframes weather48-shimmer-b-qcg1qgnqi4 { to { background-position-x: -220%; } }

.weather48-error[b-qcg1qgnqi4] {
    min-height: 420px;
    padding: 40px;
    border: 1px solid var(--w48-border);
    border-radius: 8px;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    background: var(--w48-surface);
}

.weather48-error p[b-qcg1qgnqi4] { color: var(--w48-secondary); }
.weather48-error button[b-qcg1qgnqi4] { min-height: 38px; padding: 0 16px; border: 0; border-radius: 7px; color: #fff; background: var(--w48-accent); font: inherit; font-weight: 800; cursor: pointer; }

button:focus-visible[b-qcg1qgnqi4],
a:focus-visible[b-qcg1qgnqi4],
summary:focus-visible[b-qcg1qgnqi4] {
    outline: 3px solid color-mix(in srgb, var(--w48-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1250px) {
    .weather48-layout[b-qcg1qgnqi4] { grid-template-columns: minmax(0, 1fr); }
    .weather48-sidebar[b-qcg1qgnqi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather48-summary-grid[b-qcg1qgnqi4] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .weather48-summary-grid[b-qcg1qgnqi4] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .weather48-insights[b-qcg1qgnqi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weather48-seo-card[b-qcg1qgnqi4] { grid-template-columns: minmax(0, 1fr); }
    .weather48-seo-card > div:first-child[b-qcg1qgnqi4] { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--w48-border); }
}

@media (max-width: 640px) {
    .weather48-shell[b-qcg1qgnqi4] { padding: calc(var(--header-height, var(--header-h, 64px)) + 7px) 10px 16px; gap: 8px; }
    .weather48-topbar[b-qcg1qgnqi4] { align-items: stretch; flex-direction: column; gap: 7px; }
    .weather48-breadcrumb[b-qcg1qgnqi4] { margin-inline: -1px; overflow-x: auto; scrollbar-width: none; }
    .weather48-breadcrumb[b-qcg1qgnqi4]::-webkit-scrollbar { display: none; }
    .weather48-breadcrumb ol[b-qcg1qgnqi4] { width: max-content; flex-wrap: nowrap; }
    .weather48-unit-controls[b-qcg1qgnqi4] { width: 100%; overflow-x: auto; }
    .weather48-unit-controls > div[b-qcg1qgnqi4] { flex: 1 0 auto; }
    .weather48-unit-controls button[b-qcg1qgnqi4] { min-height: 32px; flex: 1; }
    .weather48-heading[b-qcg1qgnqi4] { align-items: flex-start; flex-direction: column; }
    .weather48-heading h1[b-qcg1qgnqi4],
    .weather48-error h1[b-qcg1qgnqi4] { font-size: 1.7rem; line-height: 1.11; }
    .weather48-heading p:not(.weather48-eyebrow)[b-qcg1qgnqi4] { margin-top: 4px; font-size: 0.79rem; line-height: 1.42; }
    .weather48-heading time[b-qcg1qgnqi4] { align-self: flex-start; }
    .weather48-summary-grid[b-qcg1qgnqi4] {
        margin-inline: -10px;
        padding: 0 10px 4px;
        grid-template-columns: none;
        grid-template-rows: repeat(2, 64px);
        grid-auto-flow: column;
        grid-auto-columns: 158px;
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--w48-accent) 32%, var(--w48-border)) transparent;
    }
    .weather48-summary-grid[b-qcg1qgnqi4]::-webkit-scrollbar { height: 4px; }
    .weather48-summary-grid[b-qcg1qgnqi4]::-webkit-scrollbar-track { background: transparent; }
    .weather48-summary-grid[b-qcg1qgnqi4]::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--w48-accent) 32%, var(--w48-border)); }
    .weather48-summary-card[b-qcg1qgnqi4] { min-height: 64px; padding: 7px 8px; grid-template-columns: 24px minmax(0, 1fr); scroll-snap-align: start; }
    .weather48-summary-card:hover[b-qcg1qgnqi4] { box-shadow: var(--w48-shadow); transform: none; }
    .weather48-summary-card > span[b-qcg1qgnqi4] { width: 24px; height: 24px; font-size: 0.9rem; }
    .weather48-summary-card small[b-qcg1qgnqi4],
    .weather48-summary-card em[b-qcg1qgnqi4] { font-size: 0.64rem; }
    .weather48-summary-card strong[b-qcg1qgnqi4] { font-size: 0.8rem; }
    .weather48-card[b-qcg1qgnqi4] { padding: 9px; }
    .weather48-card-head[b-qcg1qgnqi4] { align-items: flex-start; }
    .weather48-card-head > span[b-qcg1qgnqi4] { max-width: 7rem; font-size: 0.66rem; line-height: 1.3; text-align: right; }
    .weather48-table-wrap[b-qcg1qgnqi4] { max-height: 64dvh; }
    .weather48-scroll-arrow[b-qcg1qgnqi4] { width: 32px; height: 46px; }
    .weather48-scroll-arrow.is-left[b-qcg1qgnqi4] { left: -4px; }
    .weather48-scroll-arrow.is-right[b-qcg1qgnqi4] { right: -4px; }
    .weather48-scroll-arrow svg[b-qcg1qgnqi4] { width: 19px; height: 19px; }
    .weather48-table[b-qcg1qgnqi4] { font-size: 0.72rem; }
    .weather48-table th[b-qcg1qgnqi4],
    .weather48-table td[b-qcg1qgnqi4] { min-width: 68px; height: 34px; padding: 4px 5px; }
    .weather48-table tr > :first-child[b-qcg1qgnqi4] { min-width: 112px; max-width: 112px; padding-left: 8px; }
    .weather48-condition-row td[b-qcg1qgnqi4] { height: 42px; }
    .weather48-insights[b-qcg1qgnqi4] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .weather48-insight-card[b-qcg1qgnqi4] { min-height: 94px; padding: 8px; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
    .weather48-insight-card > span[b-qcg1qgnqi4] { font-size: 0.95rem; }
    .weather48-insight-card h3[b-qcg1qgnqi4] { font-size: 0.67rem; }
    .weather48-insight-card strong[b-qcg1qgnqi4] { font-size: 0.78rem; line-height: 1.25; }
    .weather48-insight-card p[b-qcg1qgnqi4] { font-size: 0.66rem; }
    .weather48-sidebar[b-qcg1qgnqi4] { grid-template-columns: minmax(0, 1fr); }
    .weather48-current-hero[b-qcg1qgnqi4] { min-height: 148px; }
    .weather48-seo-card[b-qcg1qgnqi4] { gap: 14px; }
    .weather48-loading[b-qcg1qgnqi4] { grid-template-columns: 1fr; }
    .weather48-loading span:first-child[b-qcg1qgnqi4] { grid-column: auto; }
}

@media (max-width: 380px) {
    .weather48-heading h1[b-qcg1qgnqi4],
    .weather48-error h1[b-qcg1qgnqi4] { font-size: 1.58rem; }
    .weather48-summary-grid[b-qcg1qgnqi4] { grid-auto-columns: 150px; }
    .weather48-insights[b-qcg1qgnqi4] { grid-template-columns: minmax(0, 1fr); }
    .weather48-insight-card[b-qcg1qgnqi4] { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .weather48-loading span[b-qcg1qgnqi4] { animation: none; }
    .weather48-summary-card[b-qcg1qgnqi4],
    .weather48-unit-controls button[b-qcg1qgnqi4],
    .weather48-scroll-arrow[b-qcg1qgnqi4],
    .weather48-links-card a[b-qcg1qgnqi4] { transition: none; }
}
/* /Components/Pages/WeatherCityPage.razor.rz.scp.css */
.city-weather-page[b-fysf9h0nyl] {
    --city-bg-page:
        linear-gradient(145deg, rgba(37, 99, 235, 0.075) 0%, rgba(37, 99, 235, 0) 38%),
        linear-gradient(180deg, #f7fbff 0%, #eef6ff 46%, #f9fbff 100%);
    --city-surface: var(--bg-surface-strong, #ffffff);
    --city-surface-soft: #f8fbff;
    --city-surface-glass: rgba(255, 255, 255, 0.84);
    --city-panel-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96));
    --city-panel-fill-soft: linear-gradient(180deg, rgba(252, 254, 255, 0.96), rgba(241, 247, 255, 0.94));
    --city-border: var(--border-soft, #e3eaf4);
    --city-border-strong: rgba(148, 163, 184, 0.36);
    --city-text-primary: var(--text-primary, #0f172a);
    --city-text-secondary: var(--text-secondary, #475569);
    --city-text-muted: var(--text-muted, #64748b);
    --city-accent: var(--accent, #2563eb);
    --city-accent-hover: var(--accent-hover, #1d4ed8);
    --city-accent-soft: var(--accent-soft, #eaf2ff);
    --city-warning: var(--warning, #f59e0b);
    --city-warning-soft: var(--warning-soft, #fef3c7);
    --city-shadow: 0 24px 64px rgba(15, 23, 42, 0.09);
    --city-shadow-soft: 0 14px 38px rgba(15, 23, 42, 0.068);
    --city-shadow-float: 0 22px 54px rgba(15, 23, 42, 0.155);
    --city-glow: 0 0 0 1px rgba(255, 255, 255, 0.68) inset;
    --weather-card-sheen: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.24) 34%, rgba(245, 158, 11, 0.18) 68%, transparent 100%);
    --city-header-offset: var(--header-height, var(--header-h, 72px));
    --weather-rain: var(--city-accent);
    --weather-rain-soft: color-mix(in srgb, var(--city-accent) 12%, var(--city-surface));
    --weather-success: #16a34a;
    --weather-warning: var(--city-warning);
    min-height: 100dvh;
    color: var(--city-text-primary);
    background: var(--city-bg-page);
    overflow-x: clip;
}

:root[data-theme="dark"] .city-weather-page[b-fysf9h0nyl] {
    --city-bg-page:
        radial-gradient(circle at 8% -4%, rgba(93, 165, 255, 0.14) 0%, rgba(93, 165, 255, 0) 27%),
        radial-gradient(circle at 98% 10%, rgba(45, 212, 191, 0.06) 0%, rgba(45, 212, 191, 0) 24%),
        linear-gradient(180deg, #08111d 0%, #0b1420 52%, #0e1723 100%);
    --city-surface: #111b29;
    --city-surface-soft: #172536;
    --city-surface-glass: rgba(15, 25, 39, 0.92);
    --city-panel-fill: linear-gradient(180deg, #121e2d 0%, #0f1927 100%);
    --city-panel-fill-soft: linear-gradient(180deg, #172536 0%, #132031 100%);
    --city-border: rgba(158, 178, 202, 0.22);
    --city-border-strong: rgba(158, 178, 202, 0.34);
    --city-text-primary: #f5f7fb;
    --city-text-secondary: #c7d2e0;
    --city-text-muted: #8fa0b5;
    --city-accent: #7db8ff;
    --city-accent-hover: #acd2ff;
    --city-accent-soft: rgba(125, 184, 255, 0.15);
    --city-warning: #f8c65d;
    --city-warning-soft: rgba(248, 198, 93, 0.14);
    --city-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
    --city-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.26);
    --city-shadow-float: 0 20px 46px rgba(0, 0, 0, 0.44);
    --city-glow: 0 0 0 1px rgba(181, 205, 232, 0.055) inset;
    --weather-card-sheen: linear-gradient(90deg, transparent 0%, rgba(125, 184, 255, 0.22) 38%, rgba(248, 198, 93, 0.14) 72%, transparent 100%);
    --weather-success: #5eead4;
}

.city-weather-page[b-fysf9h0nyl],
.city-weather-page *[b-fysf9h0nyl] {
    box-sizing: border-box;
}

/* The page-level icon defaults must not resize the shared header artwork. */
.city-weather-page[b-fysf9h0nyl]  .brand-mark {
    width: 2.45rem;
    height: 1.65rem;
}

.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-logo-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-sun-disk {
    fill: currentColor;
    stroke: none;
}

.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-sun-arc,
.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-horizon-line {
    fill: none;
    stroke: currentColor;
}

.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-sun-arc {
    stroke-width: 3.1;
}

.city-weather-page[b-fysf9h0nyl]  .brand-mark .brand-horizon-line {
    stroke-width: 2.4;
}

.weather-tool-shell[b-fysf9h0nyl] {
    width: 100%;
    max-width: 1460px;
    min-height: calc(100dvh - var(--city-header-offset));
    margin-inline: auto;
    padding: calc(var(--city-header-offset) + clamp(10px, 1vw, 16px)) clamp(13px, 1.35vw, 22px) clamp(14px, 1.45vw, 22px);
    display: grid;
    gap: clamp(10px, 0.9vw, 14px);
}

.weather-tool-shell[b-fysf9h0nyl]  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.weather-topbar[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.weather-breadcrumb[b-fysf9h0nyl] {
    min-width: 0;
    color: var(--city-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.weather-breadcrumb ol[b-fysf9h0nyl] {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
}

.weather-breadcrumb li[b-fysf9h0nyl] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.weather-breadcrumb li + li[b-fysf9h0nyl]::before {
    content: "/";
    color: color-mix(in srgb, var(--city-text-muted) 58%, transparent);
}

.weather-breadcrumb a[b-fysf9h0nyl] {
    color: var(--city-accent);
    text-decoration: none;
}

.weather-breadcrumb a:hover[b-fysf9h0nyl] {
    color: var(--city-accent-hover);
    text-decoration: underline;
}

.weather-breadcrumb span[b-fysf9h0nyl] {
    min-width: 0;
    max-width: min(56vw, 34rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-control-bar[b-fysf9h0nyl] {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    justify-content: flex-end;
    background: transparent;
    box-shadow: none;
}

.weather-control-bar .weather-actions[b-fysf9h0nyl] {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.weather-dashboard-grid[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(10px, 0.9vw, 14px);
    align-items: start;
}

.weather-main-stack[b-fysf9h0nyl],
.weather-side-stack[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: clamp(10px, 0.9vw, 14px);
}

.weather-card[b-fysf9h0nyl],
.weather-hero-card[b-fysf9h0nyl] {
    min-width: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: var(--city-panel-fill);
    box-shadow: var(--city-shadow-soft), var(--city-glow);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.weather-current-panel[b-fysf9h0nyl] {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 8px;
    background: transparent;
    box-shadow: none;
}

.weather-current-panel .weather-hero-card[b-fysf9h0nyl] {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07), var(--city-glow);
}

.weather-current-panel .weather-page-heading[b-fysf9h0nyl] {
    padding-inline: 1px;
}

.weather-page-heading[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.weather-heading-title-row[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-heading-copy[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.weather-page-heading h1[b-fysf9h0nyl] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.weather-heading-meta[b-fysf9h0nyl],
.weather-heading-status[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.32;
}

.weather-heading-meta[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.weather-heading-meta span + span[b-fysf9h0nyl]::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    margin-right: 8px;
    background: var(--city-border-strong);
    vertical-align: -0.1em;
}

.weather-heading-status[b-fysf9h0nyl] {
    flex: 0 0 auto;
    display: grid;
    gap: 5px;
    justify-items: end;
    text-align: right;
}

.weather-heading-status > span[b-fysf9h0nyl],
.weather-heading-status a[b-fysf9h0nyl] {
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid var(--city-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    background: var(--city-panel-fill-soft);
    box-shadow: var(--city-glow);
    white-space: nowrap;
}

.weather-heading-status > span[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-weight: 760;
}

.weather-heading-status a[b-fysf9h0nyl] {
    color: var(--city-accent);
    text-decoration: none;
}

.weather-heading-status a svg[b-fysf9h0nyl] {
    width: 0.8rem;
    height: 0.8rem;
}

.weather-edit-location[b-fysf9h0nyl] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--city-text-muted);
    background: var(--city-panel-fill-soft);
    box-shadow: var(--city-glow);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.weather-edit-location:hover[b-fysf9h0nyl],
.weather-edit-location:focus-visible[b-fysf9h0nyl] {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 30%, var(--city-border));
    background: var(--city-accent-soft);
    transform: translateY(-1px);
}

.weather-edit-location svg[b-fysf9h0nyl] {
    width: 0.9rem;
    height: 0.9rem;
}

.weather-heading-status a:hover[b-fysf9h0nyl] {
    text-decoration: underline;
}

.weather-card[b-fysf9h0nyl] {
    padding: clamp(11px, 0.95vw, 13px);
}

.weather-card-head[b-fysf9h0nyl] {
    min-height: 28px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.weather-card-head h2[b-fysf9h0nyl] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(0.92rem, 0.95vw, 1.02rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
}

.weather-card-head h2 span[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.86rem;
    font-weight: 650;
}

.weather-card-head a[b-fysf9h0nyl],
.weather-map-link[b-fysf9h0nyl],
.weather-card-link-button[b-fysf9h0nyl] {
    color: var(--city-accent);
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.weather-card-link-button[b-fysf9h0nyl] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.weather-card-link-button:hover[b-fysf9h0nyl],
.weather-card-link-button:focus-visible[b-fysf9h0nyl] {
    color: var(--city-accent-hover);
    text-decoration: underline;
}

.weather-map-link[b-fysf9h0nyl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.weather-hourly-pager[b-fysf9h0nyl] {
    flex: 0 0 auto;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.weather-hourly-pager button[b-fysf9h0nyl] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 6px;
    display: inline-grid;
    place-items: center;
    color: var(--city-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.weather-hourly-pager button svg[b-fysf9h0nyl] {
    width: 13px;
    height: 13px;
}

.weather-hourly-pager button:hover:not(:disabled)[b-fysf9h0nyl],
.weather-hourly-pager button:focus-visible:not(:disabled)[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    border-color: color-mix(in srgb, var(--city-accent) 40%, var(--city-border));
    background: rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .weather-hourly-pager button:hover:not(:disabled)[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.04);
}

.weather-hourly-pager button:disabled[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    opacity: 0.35;
    cursor: not-allowed;
}

.weather-hourly-pager span[b-fysf9h0nyl] {
    min-width: 58px;
    color: var(--city-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.weather-info-dot[b-fysf9h0nyl] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--city-border-strong);
    border-radius: 999px;
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
}

.weather-hero-card[b-fysf9h0nyl] {
    position: relative;
    min-height: 188px;
    padding: 0;
    border-color: color-mix(in srgb, var(--city-border) 72%, transparent);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(196px, 216px);
    align-items: stretch;
    background-image:
        linear-gradient(90deg, rgba(8, 56, 108, 0.95) 0%, rgba(11, 82, 151, 0.8) 40%, rgba(10, 56, 101, 0.44) 70%, rgba(8, 43, 78, 0.12) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, #1e73be, #60a5fa 52%, #c7e3ff);
    background-position: center, center right, center;
    background-size: cover, cover, cover;
    box-shadow: var(--city-shadow-float), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .weather-hero-card[b-fysf9h0nyl],
.weather-hero-card.is-night[b-fysf9h0nyl] {
    background-image:
        linear-gradient(90deg, rgba(4, 15, 31, 0.98) 0%, rgba(8, 31, 60, 0.92) 43%, rgba(6, 22, 43, 0.62) 70%, rgba(2, 10, 22, 0.26) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, #071426, #12345a 52%, #0a1b31);
}

.weather-hero-card[b-fysf9h0nyl]::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%, rgba(4, 18, 36, 0.18) 100%),
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.18), transparent 10rem),
        radial-gradient(circle at 84% 24%, rgba(255, 199, 102, 0.16), transparent 9rem);
    pointer-events: none;
}

:root[data-theme="dark"] .weather-hero-card[b-fysf9h0nyl]::after,
.weather-hero-card.is-night[b-fysf9h0nyl]::after {
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent 34%, rgba(2, 10, 22, 0.26) 100%),
        radial-gradient(circle at 80% 18%, rgba(96, 165, 250, 0.16), transparent 11rem);
}

/* ── Weather condition ambient animations ── */

@keyframes hero-rain-fall-b-fysf9h0nyl {
    0% { background-position: 0 -100%; }
    100% { background-position: 0 100%; }
}

@keyframes hero-sun-glow-b-fysf9h0nyl {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.08); }
}

@keyframes hero-snow-drift-b-fysf9h0nyl {
    0% { background-position: 0 -60%; }
    100% { background-position: 20px 60%; }
}

@keyframes hero-fog-drift-b-fysf9h0nyl {
    0%, 100% { opacity: 0.18; transform: translateX(0); }
    50% { opacity: 0.32; transform: translateX(12px); }
}

@keyframes hero-storm-flash-b-fysf9h0nyl {
    0%, 92%, 100% { opacity: 0; }
    94% { opacity: 0.12; }
    96% { opacity: 0; }
    97% { opacity: 0.08; }
}

.weather-hero-card.is-rain[b-fysf9h0nyl]::before,
.weather-hero-card.is-snow[b-fysf9h0nyl]::before,
.weather-hero-card.is-clear.is-day[b-fysf9h0nyl]::before,
.weather-hero-card.is-fog[b-fysf9h0nyl]::before,
.weather-hero-card.is-storm[b-fysf9h0nyl]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.weather-hero-card.is-rain[b-fysf9h0nyl]::before {
    background: repeating-linear-gradient(
        175deg,
        transparent,
        transparent 6px,
        rgba(148, 200, 255, 0.06) 6px,
        rgba(148, 200, 255, 0.06) 7px
    );
    background-size: 100% 200%;
    animation: hero-rain-fall-b-fysf9h0nyl 1.8s linear infinite;
}

.weather-hero-card.is-storm[b-fysf9h0nyl]::before {
    background:
        repeating-linear-gradient(
            172deg,
            transparent,
            transparent 4px,
            rgba(148, 200, 255, 0.08) 4px,
            rgba(148, 200, 255, 0.08) 5px
        ),
        linear-gradient(180deg, transparent, transparent);
    background-size: 100% 200%, 100% 100%;
    animation: hero-rain-fall-b-fysf9h0nyl 1.2s linear infinite, hero-storm-flash-b-fysf9h0nyl 6s ease-in-out infinite;
}

.weather-hero-card.is-snow[b-fysf9h0nyl]::before {
    background: repeating-linear-gradient(
        178deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.07) 10px,
        rgba(255, 255, 255, 0.07) 12px
    );
    background-size: 100% 200%;
    animation: hero-snow-drift-b-fysf9h0nyl 4s linear infinite;
}

.weather-hero-card.is-clear.is-day[b-fysf9h0nyl]::before {
    background: radial-gradient(circle at 82% 15%, rgba(255, 220, 120, 0.22), transparent 45%);
    animation: hero-sun-glow-b-fysf9h0nyl 6s ease-in-out infinite;
}

.weather-hero-card.is-fog[b-fysf9h0nyl]::before {
    background:
        linear-gradient(90deg, transparent 10%, rgba(200, 210, 225, 0.12) 30%, rgba(200, 210, 225, 0.08) 60%, transparent 90%);
    animation: hero-fog-drift-b-fysf9h0nyl 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .weather-hero-card.is-rain[b-fysf9h0nyl]::before,
    .weather-hero-card.is-snow[b-fysf9h0nyl]::before,
    .weather-hero-card.is-clear.is-day[b-fysf9h0nyl]::before,
    .weather-hero-card.is-fog[b-fysf9h0nyl]::before,
    .weather-hero-card.is-storm[b-fysf9h0nyl]::before {
        animation: none;
    }
}

.weather-actions button[b-fysf9h0nyl] {
    min-height: 26px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--city-text-muted);
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 650;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
}

.weather-actions button:hover[b-fysf9h0nyl],
.weather-actions button:focus-visible[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    background: rgba(0, 0, 0, 0.04);
}

.weather-actions button:active[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] .weather-actions button:hover[b-fysf9h0nyl],
:root[data-theme="dark"] .weather-actions button:focus-visible[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .weather-actions button:active[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.08);
}

.weather-unit-switch[b-fysf9h0nyl] {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--city-border) 60%, transparent);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.03);
    box-shadow: none;
}

:root[data-theme="dark"] .weather-unit-switch[b-fysf9h0nyl] {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.weather-unit-btn[b-fysf9h0nyl] {
    min-height: 24px !important;
    min-width: 32px;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--city-text-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease;
}

.weather-unit-btn:hover[b-fysf9h0nyl] {
    color: var(--city-text-primary) !important;
}

.weather-unit-btn.is-active[b-fysf9h0nyl] {
    color: var(--city-text-primary) !important;
    background: var(--city-panel-fill) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="dark"] .weather-unit-btn.is-active[b-fysf9h0nyl] {
    color: #f8fbff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.weather-icon-action[b-fysf9h0nyl] {
    width: 34px;
    padding: 0;
}

.weather-hero-copy[b-fysf9h0nyl] {
    position: relative;
    z-index: 1;
    gap: 6px;
    align-self: center;
    padding: clamp(13px, 1.2vw, 17px);
}

.weather-unit-switch:nth-child(2) .weather-unit-btn[b-fysf9h0nyl] {
    min-width: 36px;
}

.weather-hero-copy.shared-city-hero-copy[b-fysf9h0nyl] {
    min-height: 188px;
}

.weather-hero-eyebrow[b-fysf9h0nyl] {
    margin: 0 0 2px;
    color: var(--city-accent);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.weather-location-row[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.weather-flag[b-fysf9h0nyl] {
    flex: 0 0 auto;
    width: 30px;
    height: 22px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1;
}

:root[data-theme="dark"] .weather-flag[b-fysf9h0nyl] {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid var(--city-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color: var(--city-text-primary);
}

.weather-location-row h1[b-fysf9h0nyl] {
    min-width: 0;
    margin: 0;
    color: var(--city-text-primary);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
}

.weather-favorite[b-fysf9h0nyl] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--city-warning);
    background: transparent;
}

.weather-local-meta[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--city-text-secondary);
    font-size: 0.82rem;
    font-weight: 650;
}

.weather-local-meta time[b-fysf9h0nyl] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.weather-local-meta span[b-fysf9h0nyl] {
    width: 4px;
    height: 4px;
    padding: 0;
    border-radius: 999px;
    background: var(--city-warning);
}

.weather-current-row[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(156px, max-content) minmax(72px, 100px);
    align-items: center;
    gap: clamp(12px, 1.75vw, 20px);
}

.weather-current-icon[b-fysf9h0nyl] {
    min-width: 0;
    width: clamp(74px, 7.1vw, 96px);
    height: clamp(74px, 7.1vw, 96px);
    display: grid;
    place-items: center;
    filter: drop-shadow(0 12px 18px rgba(6, 24, 45, 0.2));
}

.weather-current-icon[b-fysf9h0nyl]  svg,
.weather-hour-tile span[b-fysf9h0nyl]  svg,
.weather-daily-row > span[b-fysf9h0nyl]  svg {
    width: 100%;
    height: 100%;
}

.weather-current-temp[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.weather-current-temp strong[b-fysf9h0nyl] {
    color: #ffffff;
    font-size: clamp(2.4rem, 3.6vw, 3.2rem);
    font-weight: 760;
    line-height: 0.9;
    letter-spacing: -0.015em;
    text-shadow: 0 4px 12px rgba(2, 10, 22, 0.18);
}

:root[data-theme="dark"] .weather-current-temp strong[b-fysf9h0nyl] {
    color: #f8fbff;
}

.weather-current-temp small[b-fysf9h0nyl] {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8rem;
    font-weight: 650;
    text-shadow: 0 1px 6px rgba(2, 10, 22, 0.24);
}

.weather-high-low[b-fysf9h0nyl] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    text-shadow: 0 1px 6px rgba(2, 10, 22, 0.28);
}

.weather-high-low b[b-fysf9h0nyl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 680;
}

.weather-high-low b:first-child svg[b-fysf9h0nyl] {
    color: rgba(255, 255, 255, 0.92);
    fill: rgba(255, 255, 255, 0.92);
}

.weather-high-low b:last-child svg[b-fysf9h0nyl] {
    color: rgba(255, 255, 255, 0.92);
    fill: rgba(255, 255, 255, 0.92);
}

.weather-hero-details[b-fysf9h0nyl] {
    margin: 2px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.weather-hero-details div[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 46px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    display: grid;
    align-content: start;
    gap: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.weather-hero-details dt[b-fysf9h0nyl],
.weather-hero-details dd[b-fysf9h0nyl] {
    margin: 0;
    min-width: 0;
}

.weather-hero-details dt[b-fysf9h0nyl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.64rem;
    font-weight: 780;
    line-height: 1.1;
    text-transform: uppercase;
}

.weather-hero-details dt svg[b-fysf9h0nyl] {
    width: 0.88rem;
    height: 0.88rem;
    color: rgba(255, 255, 255, 0.94);
}

.weather-hero-details dd[b-fysf9h0nyl] {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 720;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(2, 10, 22, 0.22);
}

.weather-hero-details small[b-fysf9h0nyl] {
    min-width: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-condition-label[b-fysf9h0nyl] {
    min-width: 0;
    max-width: 100%;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.88rem, 1.08vw, 1.02rem);
    font-weight: 680;
    line-height: 1.18;
    text-shadow: 0 1px 6px rgba(2, 10, 22, 0.28);
}

:root[data-theme="dark"] .weather-condition-label[b-fysf9h0nyl] {
    color: rgba(248, 251, 255, 0.9);
}

.weather-unavailable[b-fysf9h0nyl] {
    max-width: 36rem;
    min-height: 70px;
    padding: 16px;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--city-text-secondary);
    background: color-mix(in srgb, var(--city-surface) 72%, transparent);
    font-size: 0.92rem;
    font-weight: 680;
}

.weather-unavailable svg[b-fysf9h0nyl] {
    color: var(--city-accent);
}

.weather-metric-strip[b-fysf9h0nyl] {
    position: relative;
    z-index: 1;
    min-height: 42px;
    margin: 0;
    padding: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: stretch;
    gap: 0;
    background: linear-gradient(180deg, rgba(8, 39, 73, 0.26), rgba(6, 30, 56, 0.62));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.weather-hero-card.is-night .weather-metric-strip[b-fysf9h0nyl],
:root[data-theme="dark"] .weather-metric-strip[b-fysf9h0nyl] {
    background: linear-gradient(180deg, rgba(5, 17, 32, 0.46), rgba(5, 17, 32, 0.76));
}

.weather-metric-strip div[b-fysf9h0nyl] {
    min-width: 0;
    padding: 7px 11px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 14px;
    grid-template-areas:
        "icon label chevron"
        "icon value chevron";
    align-content: center;
    gap: 1px 6px;
}

.weather-metric-chevron[b-fysf9h0nyl] {
    grid-area: chevron;
    align-self: center;
    color: rgba(255, 255, 255, 0.5);
}

.weather-metric-chevron svg[b-fysf9h0nyl] {
    width: 0.85rem;
    height: 0.85rem;
}

.weather-metric-strip div:first-child[b-fysf9h0nyl] {
    padding-left: 11px;
    border-left: 0;
    border-top: 0;
}

.weather-metric-strip dt[b-fysf9h0nyl],
.weather-metric-strip dd[b-fysf9h0nyl] {
    margin: 0;
    min-width: 0;
}

.weather-metric-strip dt[b-fysf9h0nyl] {
    display: contents;
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.weather-metric-strip dt svg[b-fysf9h0nyl] {
    grid-area: icon;
    align-self: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: #193760;
}

.weather-metric-strip dt span[b-fysf9h0nyl] {
    grid-area: label;
    min-width: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.67rem;
    font-weight: 680;
    line-height: 1.1;
}

:root[data-theme="dark"] .weather-metric-strip dt svg[b-fysf9h0nyl] {
    color: #ffffff;
}

.weather-metric-strip dd[b-fysf9h0nyl] {
    grid-area: value;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.weather-metric-strip dt svg[b-fysf9h0nyl] {
    color: #ffffff;
    opacity: 0.9;
}

.weather-metric-card[b-fysf9h0nyl] {
    padding: 8px 12px;
    box-shadow: none;
}

.weather-hourly-card[b-fysf9h0nyl] {
    padding: 12px 14px 10px;
}

.weather-hourly-card .weather-card-head[b-fysf9h0nyl] {
    min-height: 24px;
    margin-bottom: 8px;
}

.weather-hourly-strip[b-fysf9h0nyl] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow-x: auto;
    scrollbar-width: thin;
}

:root[data-theme="light"] .weather-hourly-strip[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .weather-hourly-strip[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.weather-hour-tile[b-fysf9h0nyl] {
    position: relative;
    min-width: 64px;
    min-height: 76px;
    padding: 8px 4px 6px;
    border: 0;
    border-right: 1px solid var(--city-border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    text-align: center;
    background: transparent;
    box-shadow: none;
    transition: background-color 150ms ease;
}

:root[data-theme="light"] .weather-hour-tile[b-fysf9h0nyl] {
    border-right-color: rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .weather-hour-tile[b-fysf9h0nyl] {
    border-right-color: rgba(255, 255, 255, 0.07);
}

.weather-hour-tile:last-child[b-fysf9h0nyl] {
    border-right: 0;
}

.weather-hour-tile:hover[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .weather-hour-tile:hover[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.03);
}

.weather-hour-tile-now[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 8%, transparent);
    position: relative;
}

.weather-hour-tile-now[b-fysf9h0nyl]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--city-accent);
}

.weather-hour-tile-now time[b-fysf9h0nyl] {
    color: var(--city-accent) !important;
    font-weight: 700 !important;
}

.weather-hour-tile time[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

.weather-hour-icon[b-fysf9h0nyl] {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--city-accent);
}

.weather-hour-icon svg[b-fysf9h0nyl] {
    width: 22px;
    height: 22px;
}

.weather-hour-pop[b-fysf9h0nyl] {
    position: absolute;
    bottom: -3px;
    right: -7px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #38bdf8;
    line-height: 1;
}

:root[data-theme="light"] .weather-hour-pop[b-fysf9h0nyl] {
    color: #0284c7;
}

.weather-hour-tile strong[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.weather-forecast-card[b-fysf9h0nyl] {
    width: 100%;
}

.weather-daily-list[b-fysf9h0nyl] {
    display: grid;
}

.weather-daily-row[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 48px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(82px, 0.78fr) 24px minmax(58px, 1fr) minmax(66px, auto);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 5px;
}

.weather-daily-row:last-child[b-fysf9h0nyl] {
    border-bottom: 0;
}

.weather-daily-row time[b-fysf9h0nyl],
.weather-daily-row strong[b-fysf9h0nyl],
.weather-daily-row b[b-fysf9h0nyl],
.weather-daily-row small[b-fysf9h0nyl] {
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.25;
}

.weather-daily-row time[b-fysf9h0nyl] {
    grid-row: 1 / span 2;
    color: var(--city-text-primary);
    font-weight: 730;
    white-space: nowrap;
}

.weather-daily-row > span[b-fysf9h0nyl] {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.weather-daily-row strong[b-fysf9h0nyl] {
    grid-row: 1 / span 2;
    color: var(--city-text-secondary);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-daily-row b[b-fysf9h0nyl] {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    color: var(--city-text-primary);
    font-weight: 850;
    white-space: nowrap;
}

.weather-daily-row small[b-fysf9h0nyl] {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--city-accent);
    font-weight: 760;
    white-space: nowrap;
}

.weather-chart-block[b-fysf9h0nyl] {
    display: grid;
    gap: 9px;
}

.weather-chart-block + .weather-chart-block[b-fysf9h0nyl] {
    margin-top: 14px;
}

.weather-chart-title[b-fysf9h0nyl] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.weather-chart-title strong[b-fysf9h0nyl] {
    font-size: 0.84rem;
}

.weather-chart-title small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    text-align: right;
}

.weather-precip-overview[b-fysf9h0nyl] {
    min-height: 74px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--city-accent) 18%, var(--city-border));
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: color-mix(in srgb, var(--city-accent) 7%, var(--city-surface));
}

.weather-precip-overview div[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-precip-overview span[b-fysf9h0nyl],
.weather-precip-overview small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.weather-precip-overview strong[b-fysf9h0nyl] {
    font-size: 0.96rem;
    font-weight: 850;
}

.weather-precip-overview b[b-fysf9h0nyl] {
    min-width: 52px;
    padding: 7px 9px;
    border-radius: 999px;
    color: var(--city-accent);
    background: var(--city-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-accent) 18%, transparent);
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
}

.weather-precip-overview.is-dry[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--weather-success) 22%, var(--city-border));
    background: color-mix(in srgb, var(--weather-success) 8%, var(--city-surface));
}

.weather-precip-overview.is-dry b[b-fysf9h0nyl] {
    color: var(--weather-success);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--weather-success) 22%, transparent);
}

.weather-precip-overview.is-watch[b-fysf9h0nyl],
.weather-precip-overview.is-wet[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--city-warning) 32%, var(--city-border));
    background: color-mix(in srgb, var(--city-warning) 10%, var(--city-surface));
}

.weather-precip-overview.is-wet b[b-fysf9h0nyl],
.weather-precip-overview.is-watch b[b-fysf9h0nyl] {
    color: #b45309;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--city-warning) 28%, transparent);
}

.weather-pop-chart[b-fysf9h0nyl] {
    height: 78px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
}

.weather-pop-chart span[b-fysf9h0nyl] {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 16px minmax(4px, 1fr) 16px;
    justify-items: center;
    align-items: end;
    gap: 3px;
}

.weather-pop-chart b[b-fysf9h0nyl],
.weather-pop-chart time[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.64rem;
    font-weight: 760;
    white-space: nowrap;
}

.weather-pop-chart i[b-fysf9h0nyl] {
    width: min(100%, 24px);
    height: var(--bar-height);
    min-height: 4px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #8fb7ff, var(--city-accent));
}

.weather-cloud-chart[b-fysf9h0nyl] {
    position: relative;
    height: 82px;
    padding: 0;
    border-bottom: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
}

.weather-cloud-chart[b-fysf9h0nyl]::before,
.weather-cloud-chart[b-fysf9h0nyl]::after {
    display: none;
}

.weather-cloud-chart span[b-fysf9h0nyl] {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(24px, 1fr) 16px;
    align-items: end;
    justify-items: center;
    gap: 4px;
    background: transparent;
    opacity: 1;
}

.weather-cloud-chart span[b-fysf9h0nyl]::before {
    width: min(100%, 26px);
    height: var(--cloud-height);
    min-height: 8px;
    border-radius: 999px 999px 0 0;
    content: "";
    background: linear-gradient(180deg, #b8cdf8, color-mix(in srgb, var(--city-accent) 48%, #d9e4f5));
    opacity: 0.86;
}

.weather-cloud-chart i[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 760;
    white-space: nowrap;
}

.weather-condition-summary[b-fysf9h0nyl] {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.weather-condition-summary div[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: var(--city-surface-soft);
}

.weather-condition-summary svg[b-fysf9h0nyl] {
    color: var(--city-accent);
}

.weather-condition-summary span[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
}

.weather-condition-summary strong[b-fysf9h0nyl] {
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.weather-alert-panel[b-fysf9h0nyl] {
    width: 100%;
    min-height: 98px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--weather-success) 22%, var(--city-border));
    border-radius: 12px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon copy";
    gap: 6px 9px;
    align-content: center;
    color: var(--city-text-primary);
    background: color-mix(in srgb, var(--weather-success) 9%, var(--city-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.weather-alert-panel.is-active[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, var(--city-border));
    background: color-mix(in srgb, var(--danger, #ef4444) 8%, var(--city-surface));
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.weather-alert-panel:hover[b-fysf9h0nyl],
.weather-alert-panel:focus-visible[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--city-accent) 34%, var(--city-border));
    box-shadow: var(--city-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transform: translateY(-1px);
}

.weather-alert-panel svg[b-fysf9h0nyl] {
    grid-area: icon;
    width: 24px;
    height: 24px;
    color: var(--weather-success);
}

.weather-alert-panel.is-active svg[b-fysf9h0nyl] {
    color: var(--danger, #ef4444);
}

.weather-alert-panel strong[b-fysf9h0nyl] {
    grid-area: title;
    align-self: end;
    font-size: 0.84rem;
    font-weight: 850;
}

.weather-alert-panel span[b-fysf9h0nyl] {
    grid-area: copy;
    color: var(--city-text-secondary);
    font-size: 0.74rem;
    line-height: 1.38;
}

.weather-alert-modal-layer[b-fysf9h0nyl] {
    z-index: 120;
    padding: clamp(16px, 3vw, 38px);
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(16px) saturate(112%);
    -webkit-backdrop-filter: blur(16px) saturate(112%);
}

.weather-alert-modal[b-fysf9h0nyl] {
    width: clamp(42rem, 70vw, 64rem);
    max-width: calc(100vw - clamp(32px, 6vw, 76px));
    max-height: min(84dvh, 48rem);
    padding: clamp(18px, 1.8vw, 24px);
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    overflow: hidden;
    color: var(--city-text-primary);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 253, 0.98)),
        var(--city-panel-fill);
    box-shadow:
        0 32px 80px rgba(15, 23, 42, 0.26),
        0 1px 0 rgba(255, 255, 255, 0.86) inset;
    outline: none;
}

:root[data-theme="dark"] .weather-alert-modal[b-fysf9h0nyl] {
    border-color: rgba(148, 163, 184, 0.2);
    background:
        linear-gradient(145deg, rgba(18, 32, 52, 0.98), rgba(8, 20, 36, 0.99)),
        var(--city-panel-fill);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.48),
        0 1px 0 rgba(148, 163, 184, 0.08) inset;
}

:root[data-theme="dark"] .weather-alert-modal-close[b-fysf9h0nyl],
:root[data-theme="dark"] .weather-alert-modal-section[b-fysf9h0nyl],
:root[data-theme="dark"] .weather-alert-modal-list dl div[b-fysf9h0nyl] {
    background: rgba(15, 23, 42, 0.42);
}

:root[data-theme="dark"] .weather-alert-modal-list li[b-fysf9h0nyl] {
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.035), transparent 46%),
        color-mix(in srgb, var(--danger, #ef4444) 7%, var(--city-surface));
}

.weather-alert-modal svg[b-fysf9h0nyl] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.weather-alert-modal-head[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.weather-alert-modal-eyebrow[b-fysf9h0nyl] {
    margin: 0 0 4px;
    color: var(--city-accent);
    font-size: 0.7rem;
    font-weight: 820;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.weather-alert-modal-head h2[b-fysf9h0nyl] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1.3rem, 1.8vw, 1.8rem);
    font-weight: 850;
    line-height: 1.15;
}

.weather-alert-modal-close[b-fysf9h0nyl] {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--city-text-secondary);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.weather-alert-modal-close:hover[b-fysf9h0nyl],
.weather-alert-modal-close:focus-visible[b-fysf9h0nyl] {
    color: var(--city-accent);
    border-color: color-mix(in srgb, var(--city-accent) 34%, var(--city-border));
    background: var(--city-accent-soft);
}

.weather-alert-modal-summary[b-fysf9h0nyl] {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--weather-success) 18%, var(--city-border));
    border-radius: 8px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--weather-success) 9%, transparent), transparent 56%),
        var(--city-panel-fill-soft);
}

.weather-alert-modal-summary.is-active[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--danger, #ef4444) 22%, var(--city-border));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--danger, #ef4444) 8%, transparent), transparent 58%),
        var(--city-panel-fill-soft);
}

.weather-alert-modal-summary > svg[b-fysf9h0nyl] {
    width: 21px;
    height: 21px;
    color: var(--weather-success);
}

.weather-alert-modal-summary.is-active > svg[b-fysf9h0nyl] {
    color: var(--danger, #ef4444);
}

.weather-alert-modal-summary div[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.weather-alert-modal-summary strong[b-fysf9h0nyl] {
    font-size: 0.9rem;
    font-weight: 850;
}

.weather-alert-modal-summary span[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.weather-alert-modal-body[b-fysf9h0nyl] {
    min-height: 0;
    padding-right: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.weather-alert-modal-empty[b-fysf9h0nyl] {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    color: var(--city-text-secondary);
    background: var(--city-panel-fill-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.weather-alert-modal-list[b-fysf9h0nyl] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
    list-style: none;
}

.weather-alert-modal-list li[b-fysf9h0nyl] {
    position: relative;
    min-width: 0;
    padding: 12px 12px 12px 14px;
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 16%, var(--city-border));
    border-radius: 8px;
    display: grid;
    gap: 9px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 44%),
        color-mix(in srgb, var(--danger, #ef4444) 3.5%, var(--city-surface));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.weather-alert-modal-list li[b-fysf9h0nyl]::before {
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    content: "";
    background: var(--danger, #ef4444);
}

.weather-alert-modal-list header[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.weather-alert-modal-list header > span[b-fysf9h0nyl] {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 9%, var(--city-surface));
}

.weather-alert-modal-list header div[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-alert-modal-list strong[b-fysf9h0nyl],
.weather-alert-modal-list small[b-fysf9h0nyl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-alert-modal-list strong[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    font-size: 0.96rem;
    font-weight: 850;
}

.weather-alert-modal-list small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.76rem;
    font-weight: 700;
}

.weather-alert-modal-sections[b-fysf9h0nyl] {
    display: grid;
    gap: 7px;
}

.weather-alert-modal-section[b-fysf9h0nyl] {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    background: rgba(255, 255, 255, 0.58);
}

.weather-alert-modal-section h3[b-fysf9h0nyl] {
    margin: 0;
    color: var(--danger, #ef4444);
    font-size: 0.66rem;
    font-weight: 880;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.weather-alert-modal-section p[b-fysf9h0nyl] {
    margin: 0;
    color: var(--city-text-secondary);
    font-size: 0.8rem;
    font-weight: 660;
    line-height: 1.5;
}

.weather-alert-modal-bullet[b-fysf9h0nyl] {
    position: relative;
    padding-left: 14px;
}

.weather-alert-modal-bullet[b-fysf9h0nyl]::before {
    position: absolute;
    top: 0.62em;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    content: "";
    background: color-mix(in srgb, var(--danger, #ef4444) 68%, var(--city-text-muted));
}

.weather-alert-modal-list dl[b-fysf9h0nyl] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.weather-alert-modal-list dl div[b-fysf9h0nyl] {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
}

.weather-alert-modal-list dt[b-fysf9h0nyl],
.weather-alert-modal-list dd[b-fysf9h0nyl] {
    margin: 0;
    min-width: 0;
}

.weather-alert-modal-list dt[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    font-size: 0.64rem;
    font-weight: 780;
    text-transform: uppercase;
}

.weather-alert-modal-list dd[b-fysf9h0nyl] {
    margin-top: 3px;
    color: var(--city-text-primary);
    font-size: 0.74rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.weather-alert-modal-foot[b-fysf9h0nyl] {
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid var(--city-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--city-text-secondary);
    font-size: 0.78rem;
    font-weight: 720;
}

.weather-alert-modal-foot a[b-fysf9h0nyl] {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--city-accent) 16%, var(--city-border));
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 6%, var(--city-surface));
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.weather-alert-modal-foot a:hover[b-fysf9h0nyl],
.weather-alert-modal-foot a:focus-visible[b-fysf9h0nyl] {
    color: var(--city-accent-hover);
    border-color: color-mix(in srgb, var(--city-accent) 30%, var(--city-border));
    text-decoration: none;
}

.weather-aqi-panel[b-fysf9h0nyl] {
    min-height: 120px;
    padding: 2px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
}

.weather-aqi-gauge[b-fysf9h0nyl] {
    position: relative;
    width: min(104px, 100%);
    height: 82px;
    justify-self: center;
    display: grid;
    place-items: center;
    align-content: start;
    padding-top: 31px;
    isolation: isolate;
}

.weather-aqi-gauge[b-fysf9h0nyl]::before,
.weather-aqi-gauge[b-fysf9h0nyl]::after {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 58px;
    border-radius: 136px 136px 0 0;
    content: "";
    -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 37px, #000 38px 46px, transparent 47px);
    mask: radial-gradient(circle at 50% 100%, transparent 0 37px, #000 38px 46px, transparent 47px);
}

.weather-aqi-gauge[b-fysf9h0nyl]::before {
    background: color-mix(in srgb, var(--city-text-muted) 22%, #dbe2ee);
}

.weather-aqi-gauge[b-fysf9h0nyl]::after {
    background:
        conic-gradient(from 270deg at 50% 100%, var(--weather-success) 0 var(--aqi-angle), transparent var(--aqi-angle) 360deg);
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--weather-success) 18%, transparent));
}

.weather-aqi-gauge strong[b-fysf9h0nyl] {
    position: relative;
    z-index: 1;
    font-size: 1.75rem;
    font-weight: 850;
    line-height: 0.95;
}

.weather-aqi-gauge span[b-fysf9h0nyl] {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding-inline: 6px;
    color: var(--weather-success);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-align: center;
}

.weather-aqi-panel dl[b-fysf9h0nyl] {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.weather-aqi-panel div[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-aqi-panel dt[b-fysf9h0nyl],
.weather-aqi-panel dd[b-fysf9h0nyl] {
    margin: 0;
}

.weather-aqi-panel dt[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.66rem;
    font-weight: 720;
    overflow-wrap: anywhere;
}

.weather-aqi-panel dd[b-fysf9h0nyl] {
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.weather-aqi-card .weather-card-head h2[b-fysf9h0nyl] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.weather-aqi-card p[b-fysf9h0nyl] {
    margin: 0 0 10px;
    color: var(--city-text-secondary);
    font-size: 0.78rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.weather-comfort-card .weather-card-head[b-fysf9h0nyl] {
    min-height: 0;
    margin-bottom: 8px;
}

.weather-comfort-eyebrow[b-fysf9h0nyl] {
    margin: 0 0 3px;
    color: var(--city-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.weather-comfort-overview[b-fysf9h0nyl],
.weather-comfort-tile[b-fysf9h0nyl] {
    --comfort-tone: var(--city-accent);
    --comfort-tone-soft: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
}

.weather-comfort-overview.is-good[b-fysf9h0nyl],
.weather-comfort-tile.is-good[b-fysf9h0nyl] {
    --comfort-tone: var(--weather-success);
    --comfort-tone-soft: color-mix(in srgb, var(--weather-success) 10%, var(--city-surface));
}

.weather-comfort-overview.is-warn[b-fysf9h0nyl],
.weather-comfort-tile.is-warn[b-fysf9h0nyl] {
    --comfort-tone: var(--city-warning);
    --comfort-tone-soft: color-mix(in srgb, var(--city-warning) 11%, var(--city-surface));
}

.weather-comfort-overview.is-blue[b-fysf9h0nyl],
.weather-comfort-tile.is-blue[b-fysf9h0nyl] {
    --comfort-tone: var(--city-accent);
    --comfort-tone-soft: color-mix(in srgb, var(--city-accent) 10%, var(--city-surface));
}

.weather-comfort-overview[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 62px;
    padding: 8px 10px 8px 8px;
    border: 1px solid color-mix(in srgb, var(--comfort-tone) 26%, var(--city-border));
    border-left: 3px solid var(--comfort-tone);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    background: var(--comfort-tone-soft);
}

.weather-comfort-overview-icon[b-fysf9h0nyl],
.weather-comfort-tile-icon[b-fysf9h0nyl] {
    display: grid;
    place-items: center;
    color: var(--comfort-tone);
}

.weather-comfort-overview-icon[b-fysf9h0nyl] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--comfort-tone) 13%, var(--city-surface));
}

.weather-comfort-overview-icon[b-fysf9h0nyl]  svg {
    width: 1.08rem;
    height: 1.08rem;
}

.weather-comfort-overview-copy[b-fysf9h0nyl],
.weather-comfort-tile-copy[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-comfort-overview-copy small[b-fysf9h0nyl],
.weather-comfort-tile-copy small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

.weather-comfort-overview-copy strong[b-fysf9h0nyl] {
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.weather-comfort-overview b[b-fysf9h0nyl] {
    min-height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: var(--comfort-tone);
    background: color-mix(in srgb, var(--comfort-tone) 13%, var(--city-surface));
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.weather-comfort-grid[b-fysf9h0nyl] {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.weather-comfort-tile[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 54px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--comfort-tone) 22%, var(--city-border));
    border-radius: 8px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    background: var(--comfort-tone-soft);
}

.weather-comfort-tile:nth-child(5)[b-fysf9h0nyl] {
    grid-column: 1 / -1;
}

.weather-comfort-tile-icon[b-fysf9h0nyl] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--comfort-tone) 12%, var(--city-surface));
}

.weather-comfort-tile-icon[b-fysf9h0nyl]  svg {
    width: 0.94rem;
    height: 0.94rem;
}

.weather-comfort-tile-copy small[b-fysf9h0nyl],
.weather-comfort-tile-copy strong[b-fysf9h0nyl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-comfort-tile-copy strong[b-fysf9h0nyl] {
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.08;
}

.weather-glance-grid[b-fysf9h0nyl] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

:root[data-theme="light"] .weather-glance-grid[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .weather-glance-grid[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.weather-glance-tile[b-fysf9h0nyl] {
    --glance-tone: var(--city-accent);
    min-width: 0;
    min-height: 76px;
    padding: 10px 12px;
    border: 0;
    border-right: 1px solid var(--city-border);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    background: transparent;
    box-shadow: none;
    transition: background-color 150ms ease;
}

:root[data-theme="light"] .weather-glance-tile[b-fysf9h0nyl] {
    border-right-color: rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .weather-glance-tile[b-fysf9h0nyl] {
    border-right-color: rgba(255, 255, 255, 0.07);
}

.weather-glance-tile:last-child[b-fysf9h0nyl] {
    border-right: 0;
}

.weather-glance-tile:hover[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .weather-glance-tile:hover[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.03);
}

.weather-glance-tile.is-good[b-fysf9h0nyl] {
    --glance-tone: #10b981;
}

.weather-glance-tile.is-warn[b-fysf9h0nyl] {
    --glance-tone: #f59e0b;
}

.weather-glance-tile.is-blue[b-fysf9h0nyl],
.weather-glance-tile.is-neutral[b-fysf9h0nyl] {
    --glance-tone: #38bdf8;
}

:root[data-theme="light"] .weather-glance-tile.is-blue[b-fysf9h0nyl],
:root[data-theme="light"] .weather-glance-tile.is-neutral[b-fysf9h0nyl] {
    --glance-tone: #0284c7;
}

.weather-glance-icon[b-fysf9h0nyl] {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    color: var(--glance-tone);
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
}

.weather-glance-icon svg[b-fysf9h0nyl] {
    width: 13px;
    height: 13px;
}

.weather-glance-copy[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weather-glance-copy small[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--city-text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.weather-glance-copy strong[b-fysf9h0nyl] {
    min-width: 0;
    color: var(--city-text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: 2px;
}

.weather-glance-copy em[b-fysf9h0nyl] {
    min-width: 0;
    color: var(--city-text-secondary);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-table-card[b-fysf9h0nyl] {
    padding-bottom: 6px;
}

.weather-forecast-table-wrap[b-fysf9h0nyl],
.weather-daily-table-wrap[b-fysf9h0nyl] {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.weather-forecast-table[b-fysf9h0nyl],
.weather-daily-table[b-fysf9h0nyl] {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    color: var(--city-text-primary);
}

.weather-forecast-table[b-fysf9h0nyl] {
    min-width: 800px;
    table-layout: fixed;
}

.weather-daily-table[b-fysf9h0nyl] {
    min-width: 760px;
    table-layout: fixed;
}

.weather-daily-table th:first-child[b-fysf9h0nyl] {
    width: 16%;
}

.weather-daily-table th:nth-child(2)[b-fysf9h0nyl] {
    width: 20%;
}

.weather-daily-table th:nth-child(3)[b-fysf9h0nyl] {
    width: 12%;
}

.weather-daily-table th:nth-child(4)[b-fysf9h0nyl] {
    width: 9%;
}

.weather-daily-table th:nth-child(5)[b-fysf9h0nyl] {
    width: 13%;
}

.weather-daily-table th:nth-child(6)[b-fysf9h0nyl] {
    width: 12%;
}

.weather-daily-table th:nth-child(7)[b-fysf9h0nyl],
.weather-daily-table th:nth-child(8)[b-fysf9h0nyl] {
    width: 9%;
}

.weather-forecast-table th:first-child[b-fysf9h0nyl] {
    width: 21%;
}

.weather-forecast-table th:nth-child(2)[b-fysf9h0nyl] {
    width: 18%;
}

.weather-forecast-table th:nth-child(3)[b-fysf9h0nyl],
.weather-forecast-table th:nth-child(4)[b-fysf9h0nyl] {
    width: 9%;
}

.weather-forecast-table th:nth-child(5)[b-fysf9h0nyl] {
    width: 8%;
}

.weather-forecast-table th:nth-child(6)[b-fysf9h0nyl] {
    width: 12%;
}

.weather-forecast-table th[b-fysf9h0nyl],
.weather-forecast-table td[b-fysf9h0nyl],
.weather-daily-table th[b-fysf9h0nyl],
.weather-daily-table td[b-fysf9h0nyl] {
    min-height: 40px;
    padding: 8px 8px;
    border-bottom: 1px solid var(--city-border);
    font-size: 0.72rem;
    line-height: 1.24;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.weather-forecast-table thead th[b-fysf9h0nyl],
.weather-daily-table thead th[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    background: var(--city-panel-fill-soft);
}

.weather-forecast-table thead th[b-fysf9h0nyl] {
    padding-block: 6px;
    border-bottom-color: var(--city-border-strong);
    font-size: 0.66rem;
}

.weather-daily-table thead th[b-fysf9h0nyl] {
    padding-block: 6px;
    border-bottom-color: var(--city-border-strong);
    font-size: 0.66rem;
}

.weather-daily-table tbody th[b-fysf9h0nyl],
.weather-daily-table tbody td[b-fysf9h0nyl] {
    min-height: 0;
    padding: 6px 8px;
    font-size: 0.7rem;
    line-height: 1.2;
}

.weather-daily-table tbody tr:hover th[b-fysf9h0nyl],
.weather-daily-table tbody tr:hover td[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 5%, transparent);
}

.weather-daily-toggle[b-fysf9h0nyl] {
    width: 100%;
    min-height: 34px;
    margin-top: 2px;
    padding: 6px 12px 0;
    border: 0;
    border-top: 1px solid var(--city-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--city-accent);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.weather-daily-toggle:hover[b-fysf9h0nyl],
.weather-daily-toggle:focus-visible[b-fysf9h0nyl] {
    color: var(--city-accent-hover);
    background: color-mix(in srgb, var(--city-accent) 5%, transparent);
}

.weather-daily-toggle svg[b-fysf9h0nyl] {
    width: 0.9rem;
    height: 0.9rem;
}

.weather-forecast-table .weather-forecast-day-row th[b-fysf9h0nyl] {
    height: auto;
    padding: 10px 8px 5px;
    border-bottom: 0;
    color: var(--city-text-primary);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.15;
}

.weather-forecast-table .weather-forecast-period-row th[b-fysf9h0nyl],
.weather-forecast-table .weather-forecast-period-row td[b-fysf9h0nyl] {
    min-height: 0;
    padding: 5px 8px;
    border-bottom: 0;
    font-size: 0.7rem;
    line-height: 1.2;
}

.weather-forecast-table .weather-forecast-period-row:hover th[b-fysf9h0nyl],
.weather-forecast-table .weather-forecast-period-row:hover td[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 5%, transparent);
}

.weather-forecast-table tbody tr:last-child th[b-fysf9h0nyl],
.weather-forecast-table tbody tr:last-child td[b-fysf9h0nyl],
.weather-daily-table tbody tr:last-child th[b-fysf9h0nyl],
.weather-daily-table tbody tr:last-child td[b-fysf9h0nyl] {
    border-bottom: 0;
}

.weather-forecast-table tbody th[b-fysf9h0nyl],
.weather-daily-table tbody th[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    font-weight: 850;
}

.weather-forecast-table tbody th span[b-fysf9h0nyl],
.weather-forecast-table tbody th small[b-fysf9h0nyl] {
    display: block;
}

.weather-forecast-table tbody th small[b-fysf9h0nyl] {
    margin-top: 2px;
    color: var(--city-text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
}

.weather-table-condition[b-fysf9h0nyl] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.weather-table-condition > span[b-fysf9h0nyl] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}

.weather-table-condition > span[b-fysf9h0nyl]  svg {
    width: 100%;
    height: 100%;
}

.weather-table-condition strong[b-fysf9h0nyl] {
    font-weight: 720;
}

@media (max-width: 640px) {
    .weather-forecast-table[b-fysf9h0nyl] {
        min-width: 760px;
    }

    .weather-forecast-table thead th:first-child[b-fysf9h0nyl],
    .weather-forecast-table .weather-forecast-period-row th[b-fysf9h0nyl] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--city-surface);
    }

    .weather-forecast-table thead th:first-child[b-fysf9h0nyl] {
        z-index: 3;
        background: var(--city-surface-soft);
    }

    .weather-daily-table[b-fysf9h0nyl] {
        min-width: 740px;
    }

    .weather-daily-table thead th:first-child[b-fysf9h0nyl],
    .weather-daily-table tbody th[b-fysf9h0nyl] {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--city-surface);
    }

    .weather-daily-table thead th:first-child[b-fysf9h0nyl] {
        z-index: 3;
        background: var(--city-surface-soft);
    }
}

.weather-compare-card[b-fysf9h0nyl] {
    min-height: 0;
}

.weather-compare-card .weather-card-head[b-fysf9h0nyl] {
    align-items: center;
    margin-bottom: 12px;
}

.weather-compare-list[b-fysf9h0nyl] {
    display: grid;
    gap: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

:root[data-theme="light"] .weather-compare-list[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .weather-compare-list[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.weather-compare-list a[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

:root[data-theme="light"] .weather-compare-list a[b-fysf9h0nyl] {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .weather-compare-list a[b-fysf9h0nyl] {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.weather-compare-list a:last-child[b-fysf9h0nyl] {
    border-bottom: 0;
}

.weather-compare-list a:hover[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .weather-compare-list a:hover[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.03);
}

.weather-compare-list a:hover strong[b-fysf9h0nyl],
.weather-compare-list a:focus-visible strong[b-fysf9h0nyl] {
    color: var(--city-accent);
}

.weather-compare-flag[b-fysf9h0nyl] {
    font-size: 1.15rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-compare-name[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weather-compare-name strong[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.weather-compare-name small[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.weather-compare-dist[b-fysf9h0nyl] {
    color: var(--city-accent);
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--city-accent) 10%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.weather-explore-card[b-fysf9h0nyl] {
    min-height: 0;
}

.weather-explore-card .weather-card-head[b-fysf9h0nyl] {
    margin-bottom: 12px;
}

.weather-explore-links[b-fysf9h0nyl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.weather-explore-links a[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--city-accent);
    background: var(--city-surface-soft);
    font-size: 0.74rem;
    font-weight: 820;
    line-height: 1.15;
    text-decoration: none;
}

.weather-explore-links a:hover[b-fysf9h0nyl],
.weather-explore-links a:focus-visible[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--city-accent) 32%, var(--city-border));
    background: var(--city-accent-soft);
}

.weather-explore-links svg[b-fysf9h0nyl] {
    flex: 0 0 auto;
}

.weather-explore-links span[b-fysf9h0nyl] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.weather-sunmoon-card[b-fysf9h0nyl] {
    overflow: hidden;
}

.weather-sun-arc[b-fysf9h0nyl] {
    position: relative;
    height: 66px;
    margin: 1px 0 5px;
    display: grid;
    place-items: end center;
}

.weather-sun-arc span[b-fysf9h0nyl] {
    width: min(170px, 82%);
    height: 62px;
    border: 2px solid color-mix(in srgb, var(--city-warning) 68%, transparent);
    border-bottom: 0;
    border-radius: 160px 160px 0 0;
}

.weather-sun-arc i[b-fysf9h0nyl] {
    position: absolute;
    top: 7px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fbbf24;
    box-shadow: 0 0 0 10px rgba(251, 191, 36, 0.12);
}

.weather-sunmoon-list[b-fysf9h0nyl] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.weather-sunmoon-list div[b-fysf9h0nyl] {
    min-width: 0;
    min-height: 52px;
    padding: 7px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: var(--city-panel-fill-soft);
}

.weather-sunmoon-list dt[b-fysf9h0nyl],
.weather-sunmoon-list dd[b-fysf9h0nyl] {
    margin: 0;
    min-width: 0;
}

.weather-sunmoon-list dt[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.64rem;
    font-weight: 760;
}

.weather-sunmoon-list dd[b-fysf9h0nyl] {
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.weather-moon-row[b-fysf9h0nyl] {
    margin-top: 7px;
    min-height: 42px;
    padding: 8px 9px;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    background: var(--city-panel-fill-soft);
}

.weather-moon-row svg[b-fysf9h0nyl] {
    color: var(--city-accent);
}

.weather-moon-row span[b-fysf9h0nyl] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.weather-moon-row strong[b-fysf9h0nyl],
.weather-moon-row small[b-fysf9h0nyl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-moon-row strong[b-fysf9h0nyl] {
    font-size: 0.8rem;
    font-weight: 850;
}

.weather-moon-row small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.weather-activity-list[b-fysf9h0nyl] {
    display: grid;
    gap: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

:root[data-theme="light"] .weather-activity-list[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] .weather-activity-list[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.weather-activity-row[b-fysf9h0nyl] {
    --activity-tone: var(--city-accent);
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--city-border);
    border-radius: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    background: transparent;
    box-shadow: none;
    transition: background-color 150ms ease;
}

:root[data-theme="light"] .weather-activity-row[b-fysf9h0nyl] {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] .weather-activity-row[b-fysf9h0nyl] {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

.weather-activity-row:last-child[b-fysf9h0nyl] {
    border-bottom: 0;
}

.weather-activity-row:hover[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .weather-activity-row:hover[b-fysf9h0nyl] {
    background: rgba(0, 0, 0, 0.03);
}

.weather-activity-row.is-good[b-fysf9h0nyl] {
    --activity-tone: #10b981;
}

.weather-activity-row.is-warn[b-fysf9h0nyl] {
    --activity-tone: #f59e0b;
}

.weather-activity-row.is-danger[b-fysf9h0nyl] {
    --activity-tone: #ef4444;
}

.weather-activity-icon[b-fysf9h0nyl] {
    width: 24px;
    height: 24px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: transparent;
    box-shadow: none;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    font-size: 1.15rem;
    line-height: 1;
}

.weather-activity-row span[b-fysf9h0nyl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weather-activity-row strong[b-fysf9h0nyl] {
    color: var(--city-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-activity-row small[b-fysf9h0nyl] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-activity-row b[b-fysf9h0nyl] {
    color: var(--activity-tone);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
}

.weather-activity-row em[b-fysf9h0nyl] {
    color: var(--activity-tone);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    background: color-mix(in srgb, var(--activity-tone) 12%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.weather-empty[b-fysf9h0nyl] {
    margin: 0;
    padding: 14px;
    border-radius: 8px;
    color: var(--city-text-secondary);
    background: var(--city-surface-soft);
    font-size: 0.88rem;
    line-height: 1.45;
}

.weather-card[b-fysf9h0nyl] {
    --weather-card-accent: var(--city-accent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: color-mix(in srgb, var(--weather-card-accent) 7%, var(--city-border));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 24%),
        linear-gradient(145deg, color-mix(in srgb, var(--weather-card-accent) 3%, transparent) 0%, transparent 48%),
        var(--city-panel-fill);
    box-shadow:
        0 16px 38px rgba(15, 23, 42, 0.065),
        0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

.weather-card[b-fysf9h0nyl]::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0%, transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--weather-card-accent) 4%, transparent) 0%, transparent 60%);
    opacity: 0.78;
    pointer-events: none;
}

.weather-card > *[b-fysf9h0nyl] {
    position: relative;
    z-index: 1;
}

.weather-card:hover[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--weather-card-accent) 14%, var(--city-border));
    box-shadow:
        0 18px 46px rgba(15, 23, 42, 0.082),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

:root[data-theme="dark"] .weather-card[b-fysf9h0nyl] {
    background:
        linear-gradient(180deg, rgba(148, 163, 184, 0.05), transparent 26%),
        linear-gradient(145deg, color-mix(in srgb, var(--weather-card-accent) 5%, transparent) 0%, transparent 48%),
        var(--city-panel-fill);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(148, 163, 184, 0.08) inset;
}

:root[data-theme="dark"] .weather-card[b-fysf9h0nyl]::before {
    background:
        linear-gradient(115deg, rgba(148, 163, 184, 0.08) 0%, transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--weather-card-accent) 6%, transparent) 0%, transparent 62%);
}

.weather-hero-card[b-fysf9h0nyl] {
    border-color: rgba(255, 255, 255, 0.18);
    background-image:
        linear-gradient(90deg, rgba(4, 24, 50, 0.96) 0%, rgba(8, 70, 130, 0.86) 38%, rgba(7, 44, 82, 0.38) 70%, rgba(4, 20, 39, 0.08) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(2, 10, 22, 0.22)),
        var(--city-hero-image),
        linear-gradient(135deg, #175ca6, #40a7e9 54%, #d7ecff);
    box-shadow:
        0 26px 64px rgba(15, 23, 42, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

:root[data-theme="dark"] .weather-hero-card[b-fysf9h0nyl],
.weather-hero-card.is-night[b-fysf9h0nyl] {
    border-color: rgba(148, 163, 184, 0.2);
    background-image:
        linear-gradient(90deg, rgba(3, 12, 27, 0.98) 0%, rgba(8, 35, 68, 0.94) 43%, rgba(6, 25, 48, 0.62) 72%, rgba(2, 10, 22, 0.24) 100%),
        linear-gradient(180deg, rgba(148, 163, 184, 0.05), rgba(2, 10, 22, 0.32)),
        var(--city-hero-image),
        linear-gradient(135deg, #071426, #12345a 52%, #0a1b31);
}

.weather-hero-card[b-fysf9h0nyl]::after {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 24%),
        linear-gradient(180deg, transparent 48%, rgba(2, 10, 22, 0.22) 100%);
}

:root[data-theme="dark"] .weather-hero-card[b-fysf9h0nyl]::after,
.weather-hero-card.is-night[b-fysf9h0nyl]::after {
    background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0%, transparent 28%),
        linear-gradient(180deg, transparent 46%, rgba(2, 10, 22, 0.36) 100%);
}

.weather-hero-details div[b-fysf9h0nyl] {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07));
}

.weather-metric-strip[b-fysf9h0nyl] {
    background: linear-gradient(180deg, rgba(5, 30, 58, 0.34), rgba(3, 19, 36, 0.74));
}

.weather-metric-strip div[b-fysf9h0nyl] {
    transition: background 160ms ease;
}

.weather-metric-strip div:hover[b-fysf9h0nyl] {
    background: rgba(255, 255, 255, 0.055);
}



.weather-glance-tile[b-fysf9h0nyl],
.weather-sunmoon-list div[b-fysf9h0nyl],
.weather-moon-row[b-fysf9h0nyl],
.weather-alert-panel[b-fysf9h0nyl],
.weather-activity-row[b-fysf9h0nyl],
.weather-aqi-panel[b-fysf9h0nyl] {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.52) inset;
}

.weather-comfort-card[b-fysf9h0nyl] {
    --weather-card-accent: var(--weather-success);
}

.weather-alert-card[b-fysf9h0nyl] {
    --weather-card-accent: var(--danger, #ef4444);
}

.weather-aqi-card[b-fysf9h0nyl] {
    --weather-card-accent: #14b8a6;
}

.weather-sunmoon-card[b-fysf9h0nyl] {
    --weather-card-accent: var(--city-warning);
}

.weather-table-card[b-fysf9h0nyl],
.weather-hourly-card[b-fysf9h0nyl] {
    --weather-card-accent: #0ea5e9;
}

.weather-compare-card[b-fysf9h0nyl] {
    --weather-card-accent: #6366f1;
}

.weather-explore-card[b-fysf9h0nyl] {
    --weather-card-accent: #8b5cf6;
}

.weather-alert-panel[b-fysf9h0nyl] {
    box-shadow:
        inset 3px 0 0 var(--weather-success),
        0 1px 0 rgba(255, 255, 255, 0.46) inset;
}

.weather-alert-panel.is-active[b-fysf9h0nyl] {
    box-shadow:
        inset 3px 0 0 var(--danger, #ef4444),
        0 12px 26px rgba(239, 68, 68, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

.weather-activity-row[b-fysf9h0nyl] {
    box-shadow:
        inset 3px 0 0 var(--activity-tone),
        0 1px 0 rgba(255, 255, 255, 0.42) inset;
}

.weather-activity-row b[b-fysf9h0nyl],
.weather-activity-row em[b-fysf9h0nyl] {
    border: 1px solid color-mix(in srgb, var(--activity-tone) 18%, transparent);
}

.weather-forecast-table thead th[b-fysf9h0nyl],
.weather-daily-table thead th[b-fysf9h0nyl] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--city-accent) 7%, var(--city-surface)), var(--city-panel-fill-soft));
}

.weather-forecast-table tbody tr:hover th[b-fysf9h0nyl],
.weather-forecast-table tbody tr:hover td[b-fysf9h0nyl],
.weather-daily-table tbody tr:hover th[b-fysf9h0nyl],
.weather-daily-table tbody tr:hover td[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 7%, transparent);
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-sun {
    fill: #fbbf24;
    stroke: #f59e0b;
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-ray {
    stroke: #f59e0b;
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-cloud {
    fill: #f8fbff;
    stroke: #8da0b8;
}

:root[data-theme="dark"] .weather-tool-shell[b-fysf9h0nyl]  .weather-svg-cloud {
    fill: #d8e2ef;
    stroke: #93a4b8;
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-rain,
.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-snow {
    stroke: var(--city-accent);
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-bolt {
    fill: #fbbf24;
    stroke: #f59e0b;
}

.weather-tool-shell[b-fysf9h0nyl]  .weather-svg-moon {
    fill: #cbd5e1;
    stroke: #8da0b8;
}

button:focus-visible[b-fysf9h0nyl],
a:focus-visible[b-fysf9h0nyl] {
    outline: 3px solid color-mix(in srgb, var(--city-accent) 28%, transparent);
    outline-offset: 2px;
}

@media (max-width: 1120px) {
    .weather-dashboard-grid[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr) minmax(268px, 304px);
    }

    .weather-glance-grid[b-fysf9h0nyl],
    .weather-explore-links[b-fysf9h0nyl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .weather-seo-grid[b-fysf9h0nyl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    .weather-dashboard-grid[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-side-stack[b-fysf9h0nyl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .weather-topbar[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .weather-control-bar[b-fysf9h0nyl] {
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
        justify-content: flex-start;
        scrollbar-width: thin;
    }

    .weather-control-bar .weather-actions[b-fysf9h0nyl] {
        min-width: max-content;
    }

    .weather-side-stack[b-fysf9h0nyl],
    .weather-seo-grid[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-forecast-card[b-fysf9h0nyl] {
        grid-column: auto;
    }

    .weather-hero-card[b-fysf9h0nyl] {
        padding: 0;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        background-image:
            linear-gradient(90deg, rgba(10, 71, 132, 0.96) 0%, rgba(13, 87, 158, 0.79) 62%, rgba(7, 43, 80, 0.42) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, color-mix(in srgb, var(--city-hero-accent, var(--city-accent)) 16%, #ffffff), #d9ecff 52%, #ffffff);
        background-position: center, center, center;
    }

    .weather-hero-copy.shared-city-hero-copy[b-fysf9h0nyl] {
        min-height: 164px;
        padding: 13px;
        justify-content: center;
    }

    :root[data-theme="dark"] .weather-hero-card[b-fysf9h0nyl],
    .weather-hero-card.is-night[b-fysf9h0nyl] {
        background-image:
            linear-gradient(90deg, rgba(3, 14, 31, 0.98) 0%, rgba(8, 31, 60, 0.91) 62%, rgba(2, 10, 22, 0.54) 100%),
            var(--city-hero-image),
            linear-gradient(135deg, #0b1a30, #15334f 52%, #0b1728);
    }

    .weather-metric-strip[b-fysf9h0nyl] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
        gap: 0;
    }

    .weather-metric-strip div[b-fysf9h0nyl] {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .weather-glance-grid[b-fysf9h0nyl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-metric-strip div:nth-child(4)[b-fysf9h0nyl] {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .weather-tool-shell[b-fysf9h0nyl] {
        padding: calc(var(--city-header-offset) + 10px) 12px 14px;
        gap: 10px;
    }

    .weather-card[b-fysf9h0nyl] {
        padding: 12px;
    }

    .weather-current-panel[b-fysf9h0nyl] {
        padding: 0;
        gap: 8px;
    }

    .weather-page-heading[b-fysf9h0nyl] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .weather-page-heading h1[b-fysf9h0nyl] {
        font-size: 1.7rem;
        line-height: 1.1;
    }

    .weather-heading-meta[b-fysf9h0nyl] {
        gap: 4px 8px;
    }

    .weather-heading-meta span + span[b-fysf9h0nyl]::before {
        display: none;
    }

    .weather-heading-status[b-fysf9h0nyl] {
        justify-items: start;
        gap: 3px;
        text-align: left;
    }

    .weather-control-bar[b-fysf9h0nyl],
    .weather-control-bar .weather-actions[b-fysf9h0nyl] {
        justify-content: flex-start;
    }

    .weather-control-bar[b-fysf9h0nyl] {
        overflow: hidden;
        padding: 6px;
        border-radius: 12px;
    }

    .weather-control-bar .weather-actions[b-fysf9h0nyl] {
        min-width: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .weather-actions button:not(.weather-unit-btn)[b-fysf9h0nyl] {
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        font-size: 0;
        gap: 0;
    }

    .weather-unit-switch[b-fysf9h0nyl] {
        padding: 2px;
    }

    .weather-unit-btn[b-fysf9h0nyl] {
        min-height: 30px !important;
        min-width: 34px !important;
        padding: 0 8px !important;
        font-size: 0.8rem !important;
    }

    .weather-location-row[b-fysf9h0nyl] {
        align-items: flex-start;
        gap: 9px;
    }

    .weather-location-row h1[b-fysf9h0nyl] {
        font-size: 1.72rem;
        white-space: normal;
    }

    .weather-current-row[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr) 64px;
        gap: 10px;
    }

    .weather-current-icon[b-fysf9h0nyl] {
        width: 64px;
        height: 64px;
    }

    .weather-current-temp strong[b-fysf9h0nyl] {
        font-size: clamp(2.2rem, 11vw, 2.8rem);
    }

    .weather-hero-details[b-fysf9h0nyl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .weather-hero-details div[b-fysf9h0nyl] {
        min-height: 46px;
        padding: 7px;
    }

    .weather-hero-details small[b-fysf9h0nyl] {
        white-space: normal;
    }

    .weather-metric-strip[b-fysf9h0nyl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-metric-strip div[b-fysf9h0nyl],
    .weather-metric-strip div:nth-child(4)[b-fysf9h0nyl] {
        min-height: 38px;
        padding: 6px 8px;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        grid-template-columns: 24px minmax(0, 1fr) 14px;
        grid-template-areas:
            "icon label chevron"
            "icon value chevron";
        align-content: center;
        gap: 1px 7px;
    }

    .weather-metric-strip div:nth-child(odd)[b-fysf9h0nyl] {
        padding-left: 0;
        border-left: 0;
    }

    .weather-metric-strip div:nth-child(n + 5)[b-fysf9h0nyl] {
        grid-column: auto;
    }

    .weather-metric-strip div:last-child[b-fysf9h0nyl] {
        border-bottom: 0;
    }

    .weather-metric-strip dt[b-fysf9h0nyl] {
        min-width: 0;
    }

    .weather-metric-strip dt svg[b-fysf9h0nyl] {
        width: 1rem;
        height: 1rem;
    }

    .weather-metric-strip dd[b-fysf9h0nyl] {
        text-align: left;
    }

    .weather-metric-card[b-fysf9h0nyl] {
        padding: 8px 10px;
    }

    .weather-hourly-strip[b-fysf9h0nyl] {
        grid-auto-columns: 68px;
    }

    .weather-glance-grid[b-fysf9h0nyl],
    .weather-explore-links[b-fysf9h0nyl],
    .weather-sunmoon-list[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-glance-tile[b-fysf9h0nyl] {
        min-height: 60px;
    }

    .weather-explore-links a[b-fysf9h0nyl] {
        min-height: 36px;
    }

    .weather-daily-row[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr) 28px auto;
        gap: 2px 8px;
    }

    .weather-daily-row time[b-fysf9h0nyl] {
        grid-column: 1;
        grid-row: 1;
        white-space: normal;
    }

    .weather-daily-row > span[b-fysf9h0nyl] {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: center;
    }

    .weather-daily-row strong[b-fysf9h0nyl] {
        grid-column: 1;
        grid-row: 2;
    }

    .weather-daily-row b[b-fysf9h0nyl] {
        grid-column: 3;
        grid-row: 1;
    }

    .weather-daily-row small[b-fysf9h0nyl] {
        grid-column: 3;
        grid-row: 2;
    }

    .weather-condition-summary[b-fysf9h0nyl],
    .weather-aqi-panel[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-aqi-panel[b-fysf9h0nyl] {
        justify-items: center;
        text-align: center;
    }

    .weather-alert-panel[b-fysf9h0nyl] {
        min-height: 98px;
        padding: 13px;
    }

    .weather-alert-modal-layer[b-fysf9h0nyl] {
        padding: 10px;
        place-items: end center;
    }

    .weather-alert-modal[b-fysf9h0nyl] {
        width: 100%;
        max-height: min(88dvh, 44rem);
        padding: 15px;
        border-radius: 14px 14px 0 0;
        gap: 12px;
    }

    .weather-alert-modal-close[b-fysf9h0nyl] {
        width: 38px;
        height: 38px;
    }

    .weather-alert-modal-list dl[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-alert-modal-foot[b-fysf9h0nyl] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

@media (max-width: 860px) and (min-width: 641px) {
    .weather-alert-modal[b-fysf9h0nyl] {
        width: min(100%, 42rem);
        max-width: calc(100vw - 32px);
    }
}

@media (max-width: 360px) {
    .weather-current-row[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-hero-details[b-fysf9h0nyl] {
        grid-template-columns: 1fr;
    }

    .weather-current-icon[b-fysf9h0nyl] {
        justify-self: start;
    }

    .weather-high-low[b-fysf9h0nyl] {
        gap: 10px;
        flex-wrap: wrap;
    }

    .weather-card-head[b-fysf9h0nyl] {
        align-items: flex-start;
        flex-direction: column;
    }
}

.city-weather-page .weather-card[b-fysf9h0nyl],
.city-weather-page .weather-hour-tile[b-fysf9h0nyl],
.city-weather-page .weather-sunmoon-list div[b-fysf9h0nyl],
.city-weather-page .weather-moon-row[b-fysf9h0nyl],
.city-weather-page .weather-aqi-panel[b-fysf9h0nyl],
.city-weather-page .weather-alert-panel[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-summary[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list li[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-section[b-fysf9h0nyl],
.city-weather-page .weather-activity-row[b-fysf9h0nyl],
.city-weather-page .weather-comfort-overview[b-fysf9h0nyl],
.city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
    color: var(--city-text-primary);
}

.city-weather-page .weather-hour-tile strong[b-fysf9h0nyl],
.city-weather-page .weather-sunmoon-list dd[b-fysf9h0nyl],
.city-weather-page .weather-moon-row strong[b-fysf9h0nyl],
.city-weather-page .weather-aqi-gauge strong[b-fysf9h0nyl],
.city-weather-page .weather-aqi-panel dd[b-fysf9h0nyl],
.city-weather-page .weather-alert-panel strong[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-summary strong[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list strong[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list dd[b-fysf9h0nyl],
.city-weather-page .weather-comfort-overview-copy strong[b-fysf9h0nyl],
.city-weather-page .weather-comfort-tile-copy strong[b-fysf9h0nyl],
.city-weather-page .weather-activity-row strong[b-fysf9h0nyl],
.city-weather-page .weather-table-condition strong[b-fysf9h0nyl],
.city-weather-page .weather-compare-list strong[b-fysf9h0nyl] {
    color: var(--city-text-primary);
}

.city-weather-page .weather-hour-tile time[b-fysf9h0nyl],
.city-weather-page .weather-sunmoon-list dt[b-fysf9h0nyl],
.city-weather-page .weather-moon-row small[b-fysf9h0nyl],
.city-weather-page .weather-aqi-panel dt[b-fysf9h0nyl],
.city-weather-page .weather-aqi-card p[b-fysf9h0nyl],
.city-weather-page .weather-alert-panel span[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-summary span[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list small[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list dt[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-section p[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-empty[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-foot[b-fysf9h0nyl],
.city-weather-page .weather-comfort-overview-copy small[b-fysf9h0nyl],
.city-weather-page .weather-comfort-tile-copy small[b-fysf9h0nyl],
.city-weather-page .weather-activity-row small[b-fysf9h0nyl] {
    color: var(--city-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .city-weather-page *[b-fysf9h0nyl],
    .city-weather-page[b-fysf9h0nyl]  * {
        scroll-behavior: auto;
        transition: none;
    }
}

/* Weather dashboard dark mode: keep the page layered and readable without
   turning every surface into the same blue-black block. */
:root[data-theme="dark"] .city-weather-page .weather-control-bar[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.28);
    background: rgba(12, 21, 33, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), var(--city-glow);
}

:root[data-theme="dark"] .city-weather-page .weather-card[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.22);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), var(--city-glow);
}

:root[data-theme="dark"] .city-weather-page .weather-card:hover[b-fysf9h0nyl] {
    border-color: rgba(125, 184, 255, 0.36);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(125, 184, 255, 0.06) inset;
}

:root[data-theme="dark"] .city-weather-page .weather-heading-status > span[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-heading-status a[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-edit-location[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-hourly-pager button[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.26);
    background: linear-gradient(180deg, rgba(23, 37, 54, 0.96), rgba(15, 27, 42, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

:root[data-theme="dark"] .city-weather-page .weather-hero-card[b-fysf9h0nyl] {
    border-color: rgba(174, 204, 235, 0.32);
    background-image:
        linear-gradient(90deg, rgba(4, 15, 29, 0.84) 0%, rgba(8, 34, 61, 0.68) 42%, rgba(7, 25, 44, 0.36) 70%, rgba(5, 14, 27, 0.08) 100%),
        var(--city-hero-image),
        linear-gradient(135deg, #0b1d34, #174a78 52%, #102b4b);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(222, 239, 255, 0.16);
}

:root[data-theme="dark"] .city-weather-page .weather-hero-card[b-fysf9h0nyl]::after {
    background:
        linear-gradient(180deg, rgba(190, 218, 245, 0.09), transparent 30%, rgba(2, 10, 22, 0.16) 100%),
        radial-gradient(circle at 76% 18%, rgba(125, 184, 255, 0.19), transparent 11rem),
        radial-gradient(circle at 24% 12%, rgba(255, 213, 125, 0.08), transparent 9rem);
}

:root[data-theme="dark"] .city-weather-page .weather-actions button[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-unit-switch[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.28);
    background: rgba(11, 22, 35, 0.92);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .city-weather-page .weather-actions button:hover[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-actions button:focus-visible[b-fysf9h0nyl] {
    border-color: rgba(125, 184, 255, 0.56);
    background: rgba(20, 43, 68, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(125, 184, 255, 0.08);
}

:root[data-theme="dark"] .city-weather-page .weather-unit-btn.is-active[b-fysf9h0nyl] {
    background: linear-gradient(180deg, #79b7ff, #4d8fdc) !important;
    box-shadow: 0 8px 18px rgba(60, 133, 220, 0.34) !important;
}

:root[data-theme="dark"] .city-weather-page .weather-sunmoon-list div[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-moon-row[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-aqi-panel[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.22);
    background: linear-gradient(180deg, rgba(23, 37, 54, 0.86), rgba(14, 26, 41, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:root[data-theme="dark"] .city-weather-page .weather-glance-tile[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-comfort-overview[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:root[data-theme="dark"] .city-weather-page .weather-forecast-table thead th[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-daily-table thead th[b-fysf9h0nyl] {
    background: rgba(23, 37, 54, 0.72);
}

:root[data-theme="dark"] .city-weather-page .weather-forecast-table tbody tr:hover th[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-forecast-table tbody tr:hover td[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-daily-table tbody tr:hover th[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-daily-table tbody tr:hover td[b-fysf9h0nyl] {
    background: rgba(125, 184, 255, 0.07);
}

:root[data-theme="dark"] .city-weather-page .weather-alert-panel.is-active[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-alert-modal-list li[b-fysf9h0nyl] {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

:root[data-theme="dark"] .city-weather-page .weather-alert-modal-layer[b-fysf9h0nyl] {
    background: rgba(2, 8, 16, 0.68);
}

/* Distinct weather-console pass: reduce generic card decoration and let the
   data hierarchy, rules, and hero image carry the visual identity. */
.city-weather-page .weather-card:not(.weather-hero-card)[b-fysf9h0nyl] {
    border-radius: 12px;
    border: 1px solid var(--city-border);
    background: var(--city-surface-glass);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px -4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.city-weather-page .weather-card[b-fysf9h0nyl]::before {
    display: none;
}

.city-weather-page .weather-card:hover[b-fysf9h0nyl] {
    border-color: color-mix(in srgb, var(--city-accent) 30%, var(--city-border));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 20px -4px rgba(0, 0, 0, 0.08);
}

.city-weather-page .weather-card-head[b-fysf9h0nyl] {
    min-height: 27px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.city-weather-page .weather-card-head h2[b-fysf9h0nyl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.city-weather-page .weather-card-head h2[b-fysf9h0nyl]::before {
    display: none;
}

.city-weather-page .weather-current-panel .weather-page-heading[b-fysf9h0nyl] {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--city-border);
}

.city-weather-page .weather-sunmoon-list div[b-fysf9h0nyl],
.city-weather-page .weather-moon-row[b-fysf9h0nyl],
.city-weather-page .weather-aqi-panel[b-fysf9h0nyl],
.city-weather-page .weather-comfort-overview[b-fysf9h0nyl],
.city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
    border-radius: 8px;
    box-shadow: none;
}

.city-weather-page .weather-explore-links a[b-fysf9h0nyl] {
    min-height: 32px;
    padding: 6px 2px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
}

.city-weather-page .weather-explore-links a:hover[b-fysf9h0nyl],
.city-weather-page .weather-explore-links a:focus-visible[b-fysf9h0nyl] {
    border-color: var(--city-accent);
    background: color-mix(in srgb, var(--city-accent) 5%, transparent);
}

.city-weather-page .weather-insight-card[b-fysf9h0nyl],
.city-weather-page .weather-compare-card[b-fysf9h0nyl],
.city-weather-page .weather-explore-card[b-fysf9h0nyl] {
    min-height: 0;
}

.city-weather-page .weather-forecast-table thead th[b-fysf9h0nyl],
.city-weather-page .weather-daily-table thead th[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 4%, var(--city-surface));
}

.city-weather-page .weather-forecast-table tbody tr:hover th[b-fysf9h0nyl],
.city-weather-page .weather-forecast-table tbody tr:hover td[b-fysf9h0nyl],
.city-weather-page .weather-daily-table tbody tr:hover th[b-fysf9h0nyl],
.city-weather-page .weather-daily-table tbody tr:hover td[b-fysf9h0nyl] {
    background: color-mix(in srgb, var(--city-accent) 6%, transparent);
}

.city-weather-page .weather-hero-card[b-fysf9h0nyl] {
    border-radius: 6px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

:root[data-theme="dark"] .city-weather-page .weather-card:not(.weather-hero-card)[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.24);
    background: #101b29;
    box-shadow: none;
}

:root[data-theme="dark"] .city-weather-page .weather-card-head[b-fysf9h0nyl] {
    border-bottom-color: rgba(158, 178, 202, 0.22);
}

:root[data-theme="dark"] .city-weather-page .weather-sunmoon-list div[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-moon-row[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-aqi-panel[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-comfort-overview[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
    border-color: rgba(158, 178, 202, 0.24);
    background: #152334;
}

:root[data-theme="dark"] .city-weather-page .weather-explore-links a:hover[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-explore-links a:focus-visible[b-fysf9h0nyl] {
    background: rgba(125, 184, 255, 0.08);
}

:root[data-theme="dark"] .city-weather-page .weather-hero-card[b-fysf9h0nyl] {
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(222, 239, 255, 0.14);
}

/* Density and polish pass: tighten the weather page without flattening the
   hierarchy. This trims empty air, normalizes control sizing, and improves
   panel rhythm across desktop and mobile. */
.city-weather-page .weather-tool-shell[b-fysf9h0nyl] {
    max-width: 1428px;
    padding:
        calc(var(--city-header-offset) + clamp(4px, 0.55vw, 8px))
        clamp(12px, 1.2vw, 20px)
        clamp(12px, 1.3vw, 20px);
    gap: clamp(8px, 0.8vw, 12px);
}

.city-weather-page .weather-topbar[b-fysf9h0nyl] {
    min-height: 34px;
    gap: 8px;
}

.city-weather-page .weather-control-bar[b-fysf9h0nyl] {
    padding: 3px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055), var(--city-glow);
}

.city-weather-page .weather-control-bar .weather-actions[b-fysf9h0nyl] {
    gap: 5px;
}

.city-weather-page .weather-actions button[b-fysf9h0nyl],
.city-weather-page .weather-unit-switch[b-fysf9h0nyl],
.city-weather-page .weather-heading-status > span[b-fysf9h0nyl],
.city-weather-page .weather-heading-status a[b-fysf9h0nyl],
.city-weather-page .weather-hourly-pager button[b-fysf9h0nyl] {
    min-height: 34px;
}

.city-weather-page .weather-actions button[b-fysf9h0nyl] {
    min-width: 34px;
    padding: 0 10px;
    border-radius: 9px;
}

.city-weather-page .weather-unit-switch[b-fysf9h0nyl] {
    padding: 2px;
    border-radius: 9px;
}

.city-weather-page .weather-unit-btn[b-fysf9h0nyl] {
    min-width: 34px;
    min-height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.82rem;
}

.city-weather-page .weather-dashboard-grid[b-fysf9h0nyl],
.city-weather-page .weather-main-stack[b-fysf9h0nyl],
.city-weather-page .weather-side-stack[b-fysf9h0nyl] {
    gap: 12px;
}

.city-weather-page .weather-page-heading[b-fysf9h0nyl] {
    gap: 10px;
}

.city-weather-page .weather-current-panel .weather-page-heading[b-fysf9h0nyl] {
    padding-bottom: 8px;
}

.city-weather-page .weather-heading-copy[b-fysf9h0nyl] {
    gap: 3px;
}

.city-weather-page .weather-page-heading h1[b-fysf9h0nyl] {
    max-width: none;
    font-size: 2.3rem;
    line-height: 1.05;
    overflow-wrap: normal;
}

.city-weather-page .weather-heading-meta[b-fysf9h0nyl],
.city-weather-page .weather-heading-status[b-fysf9h0nyl] {
    font-size: 0.78rem;
}

.city-weather-page .weather-heading-status[b-fysf9h0nyl] {
    gap: 4px;
}

.city-weather-page .weather-heading-status > span[b-fysf9h0nyl],
.city-weather-page .weather-heading-status a[b-fysf9h0nyl] {
    padding: 0 9px;
    border-radius: 999px;
    box-shadow: none;
}

.city-weather-page .weather-hero-card[b-fysf9h0nyl] {
    min-height: 292px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.city-weather-page .weather-hero-copy.shared-city-hero-copy[b-fysf9h0nyl] {
    min-height: 238px;
    padding: 16px 18px 14px;
}

.city-weather-page .weather-current-row[b-fysf9h0nyl] {
    grid-template-columns: minmax(136px, max-content) 84px;
    gap: 16px;
}

.city-weather-page .weather-current-icon[b-fysf9h0nyl] {
    width: clamp(68px, 6vw, 88px);
    height: clamp(68px, 6vw, 88px);
}

.city-weather-page .weather-current-temp[b-fysf9h0nyl] {
    gap: 3px;
}

.city-weather-page .weather-current-temp strong[b-fysf9h0nyl] {
    font-size: clamp(2.7rem, 4vw, 3.7rem);
}

.city-weather-page .weather-condition-label[b-fysf9h0nyl] {
    font-size: clamp(0.98rem, 1.05vw, 1.1rem);
}

.city-weather-page .weather-current-temp small[b-fysf9h0nyl],
.city-weather-page .weather-high-low[b-fysf9h0nyl] {
    font-size: 0.82rem;
}

.city-weather-page .weather-hero-details[b-fysf9h0nyl] {
    gap: 6px;
}

.city-weather-page .weather-hero-details div[b-fysf9h0nyl] {
    min-height: 46px;
    padding: 7px 8px;
    border-radius: 8px;
}

.city-weather-page .weather-hero-details dd[b-fysf9h0nyl] {
    font-size: 0.84rem;
}

.city-weather-page .weather-hero-details small[b-fysf9h0nyl] {
    font-size: 0.75rem;
}

.city-weather-page .weather-metric-strip div[b-fysf9h0nyl] {
    padding: 6px 10px;
}

.city-weather-page .weather-metric-strip dt span[b-fysf9h0nyl] {
    font-size: 0.75rem;
}

.city-weather-page .weather-metric-strip dd[b-fysf9h0nyl] {
    font-size: 0.82rem;
}

.city-weather-page .weather-card-head[b-fysf9h0nyl] {
    min-height: 24px;
    margin-bottom: 9px;
    padding-bottom: 7px;
}

.city-weather-page .weather-card-head h2[b-fysf9h0nyl] {
    font-size: 0.98rem;
}

.city-weather-page .weather-card-head a[b-fysf9h0nyl],
.city-weather-page .weather-card-link-button[b-fysf9h0nyl],
.city-weather-page .weather-map-link[b-fysf9h0nyl] {
    font-size: 0.76rem;
}

.city-weather-page .weather-glance-grid[b-fysf9h0nyl] {
    gap: 0;
}

.city-weather-page .weather-hourly-card[b-fysf9h0nyl] {
    padding: 12px 14px 10px;
}

.city-weather-page .weather-hourly-card .weather-card-head[b-fysf9h0nyl] {
    margin-bottom: 8px;
}

.city-weather-page .weather-hourly-strip[b-fysf9h0nyl] {
    grid-auto-columns: minmax(64px, 1fr);
    gap: 0;
}

.city-weather-page .weather-hour-tile[b-fysf9h0nyl] {
    min-height: 76px;
    padding: 8px 4px 6px;
}

.city-weather-page .weather-aqi-card[b-fysf9h0nyl] {
    padding-bottom: 10px;
}

.city-weather-page .weather-aqi-panel[b-fysf9h0nyl] {
    min-height: 104px;
    grid-template-columns: minmax(0, 92px) minmax(0, 1fr);
    gap: 4px;
}

.city-weather-page .weather-aqi-gauge[b-fysf9h0nyl] {
    width: min(92px, 100%);
    height: 72px;
    padding-top: 25px;
}

.city-weather-page .weather-aqi-gauge[b-fysf9h0nyl]::before,
.city-weather-page .weather-aqi-gauge[b-fysf9h0nyl]::after {
    top: 2px;
    height: 52px;
    -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 33px, #000 34px 41px, transparent 42px);
    mask: radial-gradient(circle at 50% 100%, transparent 0 33px, #000 34px 41px, transparent 42px);
}

.city-weather-page .weather-aqi-gauge strong[b-fysf9h0nyl] {
    font-size: 1.5rem;
}

.city-weather-page .weather-aqi-gauge span[b-fysf9h0nyl] {
    font-size: 0.72rem;
}

.city-weather-page .weather-aqi-panel dl[b-fysf9h0nyl] {
    gap: 6px;
}

.city-weather-page .weather-aqi-panel dt[b-fysf9h0nyl] {
    font-size: 0.75rem;
}

.city-weather-page .weather-aqi-panel dd[b-fysf9h0nyl] {
    font-size: 0.82rem;
}

.city-weather-page .weather-aqi-card p[b-fysf9h0nyl] {
    margin-bottom: 8px;
    font-size: 0.78rem;
}

.city-weather-page .weather-alert-panel[b-fysf9h0nyl] {
    min-height: 86px;
    padding: 10px 11px;
    gap: 5px 8px;
}

.city-weather-page .weather-alert-panel strong[b-fysf9h0nyl] {
    font-size: 0.86rem;
}

.city-weather-page .weather-alert-panel span[b-fysf9h0nyl] {
    font-size: 0.76rem;
}

.city-weather-page .weather-comfort-overview[b-fysf9h0nyl] {
    min-height: 58px;
    padding: 7px 9px 7px 7px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
}

.city-weather-page .weather-comfort-overview-copy strong[b-fysf9h0nyl],
.city-weather-page .weather-comfort-tile-copy strong[b-fysf9h0nyl] {
    font-size: 0.86rem;
}

.city-weather-page .weather-comfort-grid[b-fysf9h0nyl] {
    margin-top: 6px;
    gap: 6px;
}

.city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
    min-height: 50px;
    padding: 7px;
    gap: 7px;
}

.city-weather-page .weather-activity-list[b-fysf9h0nyl] {
    border-radius: 8px;
}

.city-weather-page .weather-activity-best[b-fysf9h0nyl] {
    min-width: 0;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: #10b981;
    background: color-mix(in srgb, #10b981 10%, transparent);
    border: 1px solid color-mix(in srgb, #10b981 25%, var(--city-border));
}

.city-weather-page .weather-activity-best > span:first-child[b-fysf9h0nyl] {
    font-size: 0.88rem;
    line-height: 1;
}

.city-weather-page .weather-activity-best strong[b-fysf9h0nyl] {
    font-weight: 700;
    color: var(--city-text-primary);
}

.city-weather-page .weather-alert-modal-layer[b-fysf9h0nyl] {
    padding: clamp(12px, 2.4vw, 28px);
    backdrop-filter: blur(14px) saturate(108%);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
}

.city-weather-page .weather-alert-modal[b-fysf9h0nyl] {
    width: clamp(38rem, 66vw, 58rem);
    max-height: min(82dvh, 44rem);
    padding: 16px 16px 14px;
    border-radius: 14px;
    gap: 10px;
}

.city-weather-page .weather-alert-modal-head h2[b-fysf9h0nyl] {
    font-size: clamp(1.2rem, 1.6vw, 1.6rem);
}

.city-weather-page .weather-alert-modal-summary[b-fysf9h0nyl] {
    padding: 9px 10px;
    gap: 8px;
}

.city-weather-page .weather-alert-modal-summary strong[b-fysf9h0nyl] {
    font-size: 0.84rem;
}

.city-weather-page .weather-alert-modal-summary span[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-foot[b-fysf9h0nyl] {
    font-size: 0.78rem;
}

.city-weather-page .weather-alert-modal-list[b-fysf9h0nyl] {
    gap: 8px;
}

.city-weather-page .weather-alert-modal-list li[b-fysf9h0nyl] {
    padding: 11px 11px 11px 13px;
    gap: 8px;
}

.city-weather-page .weather-alert-modal-list strong[b-fysf9h0nyl] {
    font-size: 0.9rem;
}

.city-weather-page .weather-alert-modal-list small[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-list dd[b-fysf9h0nyl],
.city-weather-page .weather-alert-modal-section p[b-fysf9h0nyl] {
    font-size: 0.8rem;
}

.city-weather-page .weather-alert-modal-section[b-fysf9h0nyl] {
    padding: 8px 10px;
}

.city-weather-page .weather-alert-modal-foot[b-fysf9h0nyl] {
    padding-top: 8px;
}

:root[data-theme="dark"] .city-weather-page .weather-control-bar[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-actions button[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-unit-switch[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-heading-status > span[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-heading-status a[b-fysf9h0nyl],
:root[data-theme="dark"] .city-weather-page .weather-hourly-pager button[b-fysf9h0nyl] {
    box-shadow: none;
}

:root[data-theme="dark"] .city-weather-page .weather-hero-card[b-fysf9h0nyl] {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(222, 239, 255, 0.12);
}

:root[data-theme="dark"] .city-weather-page .weather-hero-details div[b-fysf9h0nyl] {
    background: linear-gradient(180deg, rgba(18, 35, 56, 0.76), rgba(10, 24, 41, 0.68));
}

@media (max-width: 960px) {
    .city-weather-page .weather-tool-shell[b-fysf9h0nyl] {
        padding-top: calc(var(--city-header-offset) + 8px);
    }

    .city-weather-page .weather-dashboard-grid[b-fysf9h0nyl],
    .city-weather-page .weather-main-stack[b-fysf9h0nyl],
    .city-weather-page .weather-side-stack[b-fysf9h0nyl] {
        gap: 10px;
    }

    .city-weather-page .weather-hero-copy.shared-city-hero-copy[b-fysf9h0nyl] {
        min-height: 0;
        padding: 14px;
    }

    .city-weather-page .weather-hero-card[b-fysf9h0nyl] {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .city-weather-page .weather-tool-shell[b-fysf9h0nyl] {
        padding:
            calc(var(--city-header-offset) + 6px)
            12px
            14px;
        gap: 9px;
    }

    .city-weather-page .weather-topbar[b-fysf9h0nyl] {
        gap: 7px;
    }

    .city-weather-page .weather-control-bar[b-fysf9h0nyl] {
        padding: 3px;
        border-radius: 10px;
    }

    .city-weather-page .weather-control-bar .weather-actions[b-fysf9h0nyl] {
        gap: 4px;
    }

    .city-weather-page .weather-actions button:not(.weather-unit-btn)[b-fysf9h0nyl] {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .city-weather-page .weather-unit-btn[b-fysf9h0nyl] {
        min-width: 32px !important;
        min-height: 28px !important;
        padding: 0 7px !important;
        font-size: 0.76rem !important;
    }

    .city-weather-page .weather-page-heading h1[b-fysf9h0nyl] {
        max-width: none;
        font-size: 1.78rem;
        line-height: 1.08;
    }

    .city-weather-page .weather-heading-meta[b-fysf9h0nyl],
    .city-weather-page .weather-heading-status[b-fysf9h0nyl] {
        font-size: 0.75rem;
    }

    .city-weather-page .weather-heading-status > span[b-fysf9h0nyl],
    .city-weather-page .weather-heading-status a[b-fysf9h0nyl] {
        min-height: 32px;
        padding: 0 8px;
    }

    .city-weather-page .weather-hero-copy.shared-city-hero-copy[b-fysf9h0nyl] {
        padding: 12px 12px 10px;
    }

    .city-weather-page .weather-current-row[b-fysf9h0nyl] {
        grid-template-columns: minmax(0, 1fr) 58px;
        gap: 8px;
    }

    .city-weather-page .weather-current-icon[b-fysf9h0nyl] {
        width: 58px;
        height: 58px;
    }

    .city-weather-page .weather-current-temp strong[b-fysf9h0nyl] {
        font-size: clamp(2.05rem, 10vw, 2.55rem);
    }

    .city-weather-page .weather-current-temp small[b-fysf9h0nyl],
    .city-weather-page .weather-high-low[b-fysf9h0nyl] {
        font-size: 0.78rem;
    }

    .city-weather-page .weather-hero-details[b-fysf9h0nyl] {
        gap: 5px;
    }

    .city-weather-page .weather-hero-details div[b-fysf9h0nyl] {
        min-height: 42px;
        padding: 6px 7px;
    }

    .city-weather-page .weather-hero-details dd[b-fysf9h0nyl] {
        font-size: 0.8rem;
    }

    .city-weather-page .weather-hero-details small[b-fysf9h0nyl] {
        font-size: 0.75rem;
    }

    .city-weather-page .weather-metric-strip div[b-fysf9h0nyl],
    .city-weather-page .weather-metric-strip div:nth-child(4)[b-fysf9h0nyl] {
        min-height: 34px;
        padding: 5px 7px;
    }

    .city-weather-page .weather-glance-grid[b-fysf9h0nyl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .city-weather-page .weather-glance-tile[b-fysf9h0nyl] {
        min-height: 72px;
        padding: 10px 12px;
        border-right: 1px solid var(--city-border);
        border-bottom: 1px solid var(--city-border);
    }

    .city-weather-page .weather-glance-tile:nth-child(2n)[b-fysf9h0nyl] {
        border-right: 0;
    }

    .city-weather-page .weather-glance-tile:nth-last-child(-n+2)[b-fysf9h0nyl] {
        border-bottom: 0;
    }

    .city-weather-page .weather-glance-copy strong[b-fysf9h0nyl] {
        font-size: 1.05rem;
    }

    .city-weather-page .weather-hourly-card[b-fysf9h0nyl] {
        padding: 10px 10px 9px;
    }

    .city-weather-page .weather-hourly-strip[b-fysf9h0nyl] {
        grid-auto-columns: 78px;
        gap: 0;
    }

    .city-weather-page .weather-hour-tile[b-fysf9h0nyl] {
        min-height: 104px;
        padding: 10px 4px 8px;
    }

    .city-weather-page .weather-aqi-panel[b-fysf9h0nyl] {
        min-height: 0;
        gap: 8px;
    }

    .city-weather-page .weather-aqi-gauge[b-fysf9h0nyl] {
        width: 88px;
        height: 68px;
        padding-top: 24px;
    }

    .city-weather-page .weather-alert-panel[b-fysf9h0nyl] {
        min-height: 78px;
        padding: 9px 10px;
    }

    .city-weather-page .weather-comfort-overview[b-fysf9h0nyl],
    .city-weather-page .weather-comfort-tile[b-fysf9h0nyl] {
        border-radius: 6px;
    }

    .city-weather-page .weather-alert-modal[b-fysf9h0nyl] {
        max-height: min(86dvh, 42rem);
        padding: 14px 14px 12px;
        border-radius: 16px 16px 0 0;
    }

    .city-weather-page .weather-alert-modal-list li[b-fysf9h0nyl] {
        padding: 10px 10px 10px 12px;
    }

    .city-weather-page .weather-alert-modal-list strong[b-fysf9h0nyl],
    .city-weather-page .weather-alert-modal-summary strong[b-fysf9h0nyl] {
        white-space: normal;
    }
}
/* /Components/Pages/WeatherDashboardSkeleton.razor.rz.scp.css */
.weather-skeleton-dashboard[b-ojh9s5zow5] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: clamp(14px, 1.35vw, 24px);
    align-items: start;
}

.weather-skeleton-main[b-ojh9s5zow5],
.weather-skeleton-side[b-ojh9s5zow5] {
    min-width: 0;
    display: grid;
    gap: clamp(14px, 1.35vw, 24px);
}

.weather-skeleton-status[b-ojh9s5zow5] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.weather-skeleton-card[b-ojh9s5zow5] {
    min-width: 0;
    padding: clamp(14px, 1.3vw, 18px);
    border: 1px solid var(--city-border);
    border-radius: 10px;
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
}

.weather-skeleton-block[b-ojh9s5zow5] {
    min-width: 0;
    display: block;
    border-radius: 6px;
    background-color: color-mix(in srgb, var(--city-text-muted) 13%, var(--city-surface-soft));
    background-image: linear-gradient(
        100deg,
        transparent 20%,
        color-mix(in srgb, var(--city-surface) 76%, transparent) 46%,
        transparent 72%);
    background-position: 130% 0;
    background-size: 220% 100%;
    animation: weather-skeleton-shimmer-b-ojh9s5zow5 1.8s ease-in-out infinite;
}

.weather-skeleton-hero[b-ojh9s5zow5] {
    position: relative;
    min-height: clamp(226px, 17vw, 240px);
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(110deg, var(--city-surface) 0%, var(--city-surface-soft) 68%, var(--city-accent-soft) 100%);
}

.weather-skeleton-actions[b-ojh9s5zow5] {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    gap: 10px;
}

.weather-skeleton-actions .is-action[b-ojh9s5zow5] {
    width: 42px;
    height: 42px;
    border-radius: 9px;
}

.weather-skeleton-actions .is-wide[b-ojh9s5zow5] {
    width: 78px;
}

.weather-skeleton-hero-copy[b-ojh9s5zow5] {
    min-height: clamp(226px, 17vw, 240px);
    max-width: min(100%, 42rem);
    padding: clamp(22px, 2.5vw, 30px);
    padding-right: clamp(210px, 25vw, 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
}

.is-eyebrow[b-ojh9s5zow5] {
    width: 88px;
    height: 10px;
}

.is-title[b-ojh9s5zow5] {
    width: min(220px, 82%);
    height: 30px;
}

.is-meta[b-ojh9s5zow5] {
    width: min(290px, 94%);
    height: 12px;
}

.weather-skeleton-current[b-ojh9s5zow5] {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 72px minmax(92px, max-content) minmax(90px, 1fr);
    align-items: center;
    gap: 14px;
}

.is-weather-icon[b-ojh9s5zow5] {
    width: 66px;
    height: 66px;
    border-radius: 50%;
}

.weather-skeleton-temperature[b-ojh9s5zow5] {
    display: grid;
    gap: 6px;
}

.is-temperature[b-ojh9s5zow5] {
    width: 82px;
    height: 46px;
}

.is-temperature-meta[b-ojh9s5zow5] {
    width: 96px;
    height: 10px;
}

.is-temperature-range[b-ojh9s5zow5] {
    width: 118px;
    height: 10px;
}

.is-condition[b-ojh9s5zow5] {
    width: min(116px, 100%);
    height: 30px;
    border-radius: 999px;
}

.weather-skeleton-metrics[b-ojh9s5zow5] {
    min-height: 94px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
}

.weather-skeleton-metrics > div[b-ojh9s5zow5] {
    min-width: 0;
    min-height: 58px;
    padding: 0 16px;
    border-left: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.weather-skeleton-metrics > div:first-child[b-ojh9s5zow5] {
    padding-left: 0;
    border-left: 0;
}

.weather-skeleton-metrics > div > span:last-child[b-ojh9s5zow5] {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.is-metric-icon[b-ojh9s5zow5] {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.is-metric-label[b-ojh9s5zow5] {
    width: 74%;
    height: 9px;
}

.is-metric-value[b-ojh9s5zow5] {
    width: 90%;
    height: 12px;
}

.weather-skeleton-card-head[b-ojh9s5zow5] {
    min-height: 28px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.is-heading[b-ojh9s5zow5] {
    width: 132px;
    height: 17px;
}

.is-heading.is-long[b-ojh9s5zow5] {
    width: min(190px, 72%);
}

.is-control[b-ojh9s5zow5] {
    width: 112px;
    height: 30px;
    border-radius: 8px;
}

.is-link[b-ojh9s5zow5] {
    width: 74px;
    height: 10px;
}

.is-info[b-ojh9s5zow5] {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.weather-skeleton-hourly-strip[b-ojh9s5zow5] {
    display: grid;
    grid-template-columns: repeat(8, minmax(74px, 1fr));
    overflow: hidden;
}

.weather-skeleton-hourly-strip > div[b-ojh9s5zow5] {
    min-width: 0;
    min-height: 104px;
    padding: 2px 12px 0;
    border-left: 1px solid var(--city-border);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
}

.weather-skeleton-hourly-strip > div:first-child[b-ojh9s5zow5] {
    border-left: 0;
}

.is-hour[b-ojh9s5zow5] {
    width: 44px;
    height: 9px;
}

.is-hour-icon[b-ojh9s5zow5] {
    width: 31px;
    height: 31px;
    border-radius: 50%;
}

.is-hour-temp[b-ojh9s5zow5] {
    width: 34px;
    height: 12px;
}

.is-hour-rain[b-ojh9s5zow5] {
    width: 42px;
    height: 9px;
}

.weather-skeleton-lower[b-ojh9s5zow5] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.35vw, 24px);
}

.weather-skeleton-forecast[b-ojh9s5zow5] {
    grid-column: span 2;
}

.weather-skeleton-details[b-ojh9s5zow5] {
    grid-column: span 3;
}

.weather-skeleton-chart[b-ojh9s5zow5] {
    grid-column: 1 / -1;
    min-height: 244px;
}

.weather-skeleton-rows[b-ojh9s5zow5],
.weather-skeleton-detail-grid[b-ojh9s5zow5] {
    display: grid;
}

.weather-skeleton-rows > div[b-ojh9s5zow5] {
    min-height: 52px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 28px minmax(72px, 0.8fr);
    align-items: center;
    gap: 10px;
}

.weather-skeleton-rows > div:last-child[b-ojh9s5zow5],
.weather-skeleton-detail-grid > div:last-child[b-ojh9s5zow5] {
    border-bottom: 0;
}

.is-row-label[b-ojh9s5zow5] {
    width: 78%;
    height: 11px;
}

.is-row-icon[b-ojh9s5zow5] {
    width: 27px;
    height: 27px;
    border-radius: 50%;
}

.is-row-value[b-ojh9s5zow5] {
    width: 100%;
    height: 11px;
}

.weather-skeleton-detail-grid[b-ojh9s5zow5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weather-skeleton-detail-grid > div[b-ojh9s5zow5] {
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    align-content: center;
    gap: 8px;
}

.weather-skeleton-detail-grid > div:nth-child(even)[b-ojh9s5zow5] {
    border-left: 1px solid var(--city-border);
}

.is-detail-label[b-ojh9s5zow5] {
    width: 58%;
    height: 10px;
}

.is-detail-value[b-ojh9s5zow5] {
    width: 78%;
    height: 14px;
}

.weather-skeleton-chart-summary[b-ojh9s5zow5] {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.is-chart-copy[b-ojh9s5zow5] {
    width: min(320px, 62%);
    height: 13px;
}

.is-chart-value[b-ojh9s5zow5] {
    width: 82px;
    height: 22px;
}

.weather-skeleton-bars[b-ojh9s5zow5] {
    height: 116px;
    margin-top: 24px;
    border-bottom: 1px solid var(--city-border);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: clamp(8px, 2vw, 24px);
}

.weather-skeleton-bars > span[b-ojh9s5zow5] {
    width: min(34px, 76%);
    height: var(--skeleton-bar-height);
    justify-self: center;
    border-radius: 5px 5px 0 0;
}

.weather-skeleton-side-card[b-ojh9s5zow5] {
    min-height: 168px;
}

.is-panel[b-ojh9s5zow5] {
    width: 100%;
    height: 92px;
    border-radius: 8px;
}

.weather-skeleton-aqi[b-ojh9s5zow5] {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.is-gauge[b-ojh9s5zow5] {
    width: 104px;
    height: 104px;
    border-radius: 50%;
}

.weather-skeleton-aqi > span:last-child[b-ojh9s5zow5] {
    display: grid;
    gap: 8px;
}

.is-side-label[b-ojh9s5zow5] {
    width: 88%;
    height: 9px;
}

.is-side-value[b-ojh9s5zow5] {
    width: 100%;
    height: 14px;
    margin-bottom: 5px;
}

.is-side-value.is-short[b-ojh9s5zow5] {
    width: 64%;
}

.weather-skeleton-comfort[b-ojh9s5zow5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.weather-skeleton-comfort > span[b-ojh9s5zow5] {
    height: 70px;
    border-radius: 10px;
}

@keyframes weather-skeleton-shimmer-b-ojh9s5zow5 {
    from {
        background-position: 130% 0;
    }

    to {
        background-position: -130% 0;
    }
}

@media (max-width: 1240px) {
    .weather-skeleton-dashboard[b-ojh9s5zow5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .weather-skeleton-side[b-ojh9s5zow5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .weather-skeleton-lower[b-ojh9s5zow5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-skeleton-forecast[b-ojh9s5zow5],
    .weather-skeleton-details[b-ojh9s5zow5] {
        grid-column: auto;
    }

    .weather-skeleton-chart[b-ojh9s5zow5] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .weather-skeleton-side[b-ojh9s5zow5],
    .weather-skeleton-lower[b-ojh9s5zow5] {
        grid-template-columns: 1fr;
    }

    .weather-skeleton-forecast[b-ojh9s5zow5],
    .weather-skeleton-details[b-ojh9s5zow5],
    .weather-skeleton-chart[b-ojh9s5zow5] {
        grid-column: auto;
    }

    .weather-skeleton-hero[b-ojh9s5zow5],
    .weather-skeleton-hero-copy[b-ojh9s5zow5] {
        min-height: 300px;
    }

    .weather-skeleton-hero-copy[b-ojh9s5zow5] {
        max-width: none;
        padding: 84px 18px 18px;
        justify-content: end;
    }

    .weather-skeleton-metrics[b-ojh9s5zow5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 0;
    }

    .weather-skeleton-metrics > div:nth-child(4)[b-ojh9s5zow5] {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    .weather-skeleton-card[b-ojh9s5zow5] {
        padding: 16px;
    }

    .weather-skeleton-hero[b-ojh9s5zow5] {
        padding: 0;
    }

    .weather-skeleton-actions[b-ojh9s5zow5] {
        top: 14px;
        right: 14px;
        gap: 8px;
    }

    .weather-skeleton-actions .is-action[b-ojh9s5zow5],
    .weather-skeleton-actions .is-wide[b-ojh9s5zow5] {
        width: 44px;
        height: 44px;
    }

    .weather-skeleton-current[b-ojh9s5zow5] {
        grid-template-columns: 60px minmax(92px, max-content) minmax(70px, 1fr);
        gap: 10px;
    }

    .is-weather-icon[b-ojh9s5zow5] {
        width: 58px;
        height: 58px;
    }

    .weather-skeleton-metrics[b-ojh9s5zow5] {
        grid-template-columns: 1fr;
    }

    .weather-skeleton-metrics > div[b-ojh9s5zow5],
    .weather-skeleton-metrics > div:nth-child(4)[b-ojh9s5zow5] {
        min-height: 48px;
        padding: 0;
        border-left: 0;
        border-bottom: 1px solid var(--city-border);
    }

    .weather-skeleton-metrics > div:last-child[b-ojh9s5zow5] {
        border-bottom: 0;
    }

    .weather-skeleton-hourly-strip[b-ojh9s5zow5] {
        grid-template-columns: repeat(8, 76px);
        overflow: hidden;
    }

    .weather-skeleton-detail-grid[b-ojh9s5zow5],
    .weather-skeleton-comfort[b-ojh9s5zow5] {
        grid-template-columns: 1fr;
    }

    .weather-skeleton-detail-grid > div:nth-child(even)[b-ojh9s5zow5] {
        border-left: 0;
    }

    .weather-skeleton-aqi[b-ojh9s5zow5] {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

@media (max-width: 360px) {
    .weather-skeleton-current[b-ojh9s5zow5] {
        grid-template-columns: 1fr;
    }

    .is-condition[b-ojh9s5zow5] {
        width: 108px;
    }

    .weather-skeleton-card-head[b-ojh9s5zow5] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-skeleton-block[b-ojh9s5zow5] {
        animation: none;
        background-image: none;
    }
}
/* /Components/Pages/WeatherDirectoryPage.razor.rz.scp.css */
.weather-directory-page[b-fwns0o5dro] {
    --weather-directory-bg: var(--bg-page, #f7faff);
    --weather-directory-surface: var(--bg-surface-strong, #ffffff);
    --weather-directory-border: var(--border-soft, #e3eaf4);
    --weather-directory-text: var(--text-primary, #0f172a);
    --weather-directory-muted: var(--text-muted, #64748b);
    --weather-directory-accent: var(--accent, #2563eb);
    min-height: 100dvh;
    color: var(--weather-directory-text);
    background: var(--weather-directory-bg);
}

:root[data-theme="dark"] .weather-directory-page[b-fwns0o5dro] {
    --weather-directory-bg: #07111f;
    --weather-directory-surface: #0e1a2c;
    --weather-directory-border: rgba(148, 163, 184, 0.18);
    --weather-directory-text: #f1f5f9;
    --weather-directory-muted: #94a3b8;
    --weather-directory-accent: #60a5fa;
}

.weather-directory-shell[b-fwns0o5dro] {
    width: min(1120px, 100%);
    margin-inline: auto;
    padding: calc(var(--header-height, var(--header-h, 72px)) + 24px) clamp(16px, 3vw, 32px) 40px;
    display: grid;
    gap: 20px;
}

.weather-directory-breadcrumb[b-fwns0o5dro] {
    color: var(--weather-directory-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.weather-directory-breadcrumb ol[b-fwns0o5dro] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.38rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.weather-directory-breadcrumb li[b-fwns0o5dro] {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.weather-directory-breadcrumb li + li[b-fwns0o5dro]::before {
    content: "/";
    color: color-mix(in srgb, var(--weather-directory-muted) 58%, transparent);
}

.weather-directory-breadcrumb a[b-fwns0o5dro],
.weather-directory-section a[b-fwns0o5dro] {
    color: var(--weather-directory-accent);
    text-decoration: none;
}

.weather-directory-breadcrumb a:hover[b-fwns0o5dro],
.weather-directory-section a:hover strong[b-fwns0o5dro] {
    text-decoration: underline;
}

.weather-directory-hero[b-fwns0o5dro],
.weather-directory-section[b-fwns0o5dro] {
    border: 1px solid var(--weather-directory-border);
    border-radius: 8px;
    background: var(--weather-directory-surface);
    padding: clamp(18px, 2.4vw, 28px);
}

.weather-directory-hero[b-fwns0o5dro] {
    display: grid;
    gap: 8px;
}

.weather-directory-hero p[b-fwns0o5dro] {
    margin: 0;
    color: var(--weather-directory-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.weather-directory-hero h1[b-fwns0o5dro] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.weather-directory-hero span[b-fwns0o5dro],
.weather-directory-section header span[b-fwns0o5dro],
.weather-directory-grid small[b-fwns0o5dro] {
    color: var(--weather-directory-muted);
}

.weather-directory-section[b-fwns0o5dro] {
    display: grid;
    gap: 16px;
}

.weather-directory-section header[b-fwns0o5dro] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: end;
}

.weather-directory-section h2[b-fwns0o5dro] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
}

.weather-directory-grid[b-fwns0o5dro] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.weather-directory-grid a[b-fwns0o5dro] {
    min-width: 0;
    display: grid;
    gap: 4px;
    border: 1px solid var(--weather-directory-border);
    border-radius: 8px;
    padding: 14px;
    color: inherit;
}

.weather-directory-grid strong[b-fwns0o5dro],
.weather-directory-grid small[b-fwns0o5dro] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .weather-directory-shell[b-fwns0o5dro] {
        padding-inline: 12px;
        gap: 12px;
    }

    .weather-directory-section header[b-fwns0o5dro] {
        align-items: start;
        flex-direction: column;
    }
}
/* /Components/Pages/WeatherPrecipitationConditionsCard.razor.rz.scp.css */
.weather-precip-card[b-o6otpn9z3g] {
    grid-column: 1 / -1;
    padding: clamp(14px, 1.3vw, 18px);
    border: 1px solid var(--city-border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0;
    color: var(--city-text-primary);
    background: var(--city-surface);
    box-shadow: var(--city-shadow-soft);
    overflow: hidden;
}

.weather-precip-header[b-o6otpn9z3g] {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.weather-precip-header h2[b-o6otpn9z3g] {
    margin: 0;
    color: var(--city-text-primary);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0;
}

.weather-precip-header a[b-o6otpn9z3g] {
    flex: 0 0 auto;
    color: var(--city-accent);
    font-size: 0.78rem;
    font-weight: 780;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.weather-precip-section[b-o6otpn9z3g] {
    display: grid;
    gap: 10px;
}

.weather-precip-section.is-cloud[b-o6otpn9z3g] {
    margin-top: 16px;
}

.weather-precip-section-title[b-o6otpn9z3g] {
    display: grid;
    gap: 2px;
}

.weather-precip-section-title strong[b-o6otpn9z3g] {
    color: var(--city-text-primary);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}

.weather-precip-section-title small[b-o6otpn9z3g] {
    color: var(--city-text-muted);
    font-size: 0.76rem;
    font-weight: 650;
}

.precip-bars[b-o6otpn9z3g] {
    height: 82px;
    margin-top: 2px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
}

.precip-bar-item[b-o6otpn9z3g] {
    min-width: 0;
    display: grid;
    grid-template-rows: 18px 44px 18px;
    justify-items: center;
    align-items: end;
    gap: 1px;
}

.precip-percent[b-o6otpn9z3g] {
    color: var(--weather-rain, var(--city-accent));
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.precip-bar-track[b-o6otpn9z3g] {
    width: 18px;
    height: 44px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.precip-bar-fill[b-o6otpn9z3g] {
    width: 18px;
    height: var(--precip-height);
    min-height: 3px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--weather-rain, var(--city-accent)) 42%, #ffffff) 0%, var(--weather-rain, var(--city-accent)) 100%);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.16);
}

.precip-time[b-o6otpn9z3g],
.cloud-time-row time[b-o6otpn9z3g] {
    color: var(--city-text-muted);
    font-size: 0.64rem;
    font-weight: 720;
    white-space: nowrap;
}

.cloud-cover-chart[b-o6otpn9z3g] {
    position: relative;
    height: 78px;
    margin-top: 2px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--weather-rain-soft, var(--city-accent-soft)), color-mix(in srgb, var(--city-accent) 2%, transparent));
    overflow: hidden;
}

.cloud-cover-chart svg[b-o6otpn9z3g] {
    position: absolute;
    inset: 0 0 0 34px;
    width: calc(100% - 34px);
    height: 100%;
    overflow: visible;
}

.cloud-cover-chart[b-o6otpn9z3g]::before,
.cloud-cover-chart[b-o6otpn9z3g]::after {
    position: absolute;
    right: 0;
    left: 34px;
    height: 1px;
    content: "";
    background: color-mix(in srgb, var(--city-border) 72%, transparent);
}

.cloud-cover-chart[b-o6otpn9z3g]::before {
    top: 50%;
}

.cloud-cover-chart[b-o6otpn9z3g]::after {
    bottom: 7px;
}

.cloud-axis[b-o6otpn9z3g] {
    position: absolute;
    left: 0;
    color: var(--city-text-muted);
    font-size: 0.65rem;
    font-weight: 720;
}

.cloud-axis.is-top[b-o6otpn9z3g] {
    top: 3px;
}

.cloud-axis.is-mid[b-o6otpn9z3g] {
    top: calc(50% - 7px);
}

.cloud-axis.is-bottom[b-o6otpn9z3g] {
    bottom: 3px;
}

.cloud-area[b-o6otpn9z3g] {
    fill: color-mix(in srgb, var(--weather-rain, var(--city-accent)) 13%, transparent);
    stroke: none;
}

.cloud-line[b-o6otpn9z3g] {
    fill: none;
    stroke: color-mix(in srgb, var(--weather-rain, var(--city-accent)) 42%, #94a3b8);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.cloud-time-row[b-o6otpn9z3g] {
    margin-top: 4px;
    padding-left: 34px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}

.precip-summary-grid[b-o6otpn9z3g] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.summary-box[b-o6otpn9z3g] {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--city-border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 8px;
    background: var(--city-surface-soft);
}

.summary-box svg[b-o6otpn9z3g],
.weather-precip-empty svg[b-o6otpn9z3g] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.summary-box svg[b-o6otpn9z3g] {
    color: var(--weather-rain, var(--city-accent));
}

.summary-box span[b-o6otpn9z3g] {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.summary-box strong[b-o6otpn9z3g] {
    color: var(--city-text-secondary);
    font-size: 0.72rem;
    font-weight: 780;
    line-height: 1.2;
}

.summary-box small[b-o6otpn9z3g] {
    color: var(--city-text-muted);
    font-size: 0.68rem;
    font-weight: 650;
}

.summary-box b[b-o6otpn9z3g] {
    grid-column: 1 / -1;
    justify-self: end;
    color: var(--city-text-primary);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.weather-precip-empty[b-o6otpn9z3g] {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--city-text-muted);
    text-align: center;
    font-size: 0.88rem;
    font-weight: 680;
}

.weather-precip-empty svg[b-o6otpn9z3g] {
    width: 2rem;
    height: 2rem;
    color: var(--weather-rain, var(--city-accent));
}

@media (min-width: 900px) {
    .weather-precip-card.has-cloud-chart[b-o6otpn9z3g] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "head head"
            "precip cloud"
            "summary summary";
        column-gap: 24px;
    }

    .weather-precip-card.has-cloud-chart .weather-precip-header[b-o6otpn9z3g] {
        grid-area: head;
    }

    .weather-precip-card.has-cloud-chart .weather-precip-section.is-precip[b-o6otpn9z3g] {
        grid-area: precip;
    }

    .weather-precip-card.has-cloud-chart .weather-precip-section.is-cloud[b-o6otpn9z3g] {
        grid-area: cloud;
        margin-top: 0;
    }

    .weather-precip-card.has-cloud-chart .precip-summary-grid[b-o6otpn9z3g] {
        grid-area: summary;
    }
}

@media (max-width: 960px) {
    .weather-precip-card[b-o6otpn9z3g] {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .weather-precip-card[b-o6otpn9z3g] {
        padding: 14px;
    }

    .precip-bars[b-o6otpn9z3g] {
        gap: 6px;
    }

    .precip-bar-track[b-o6otpn9z3g],
    .precip-bar-fill[b-o6otpn9z3g] {
        width: 14px;
    }

    .precip-summary-grid[b-o6otpn9z3g] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/WorldStockMarketHours.razor.rz.scp.css */
.world-stock-market-page[b-lixuccip4q] {
    --market-americas: #3bc86a;
    --market-europe: #2f80ed;
    --market-asia: #9b5ce5;
    --market-oceania: #f59e19;
    --market-middle-east: #667085;
    --market-map-stage-bg:
        radial-gradient(circle at 48% 42%, rgba(37, 99, 235, 0.1), transparent 46%),
        radial-gradient(circle at 12% 24%, rgba(16, 185, 129, 0.055), transparent 30%),
        radial-gradient(circle at 87% 60%, rgba(245, 158, 11, 0.05), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #e8f1fc 100%);
    --market-map-card-border: rgba(91, 119, 154, 0.18);
    --market-map-stage-border: rgba(91, 119, 154, 0.12);
    --market-map-grid-dot: rgba(91, 119, 154, 0.24);
    --market-map-grid-line: rgba(91, 119, 154, 0.1);
    --market-map-grid-opacity: 0.22;
    --market-map-edge-fade: rgba(229, 238, 249, 0.7);
    --market-map-graticule: rgba(75, 104, 140, 0.16);
    --market-map-land: #bdd0e5;
    --market-map-land-stroke: rgba(66, 95, 132, 0.34);
    --market-map-border-stroke: rgba(73, 101, 137, 0.28);
    --market-map-route: rgba(37, 99, 235, 0.32);
    --market-map-art-shadow: drop-shadow(0 10px 18px rgba(57, 75, 102, 0.12));
    --market-map-land-shadow: drop-shadow(0 10px 18px rgba(51, 65, 85, 0.13));
    --market-map-control-bg: rgba(255, 255, 255, 0.96);
    --market-map-control-text: #334155;
    --market-map-control-border: rgba(100, 116, 139, 0.22);
    --market-map-control-shadow: 0 0.75rem 1.75rem rgba(51, 65, 85, 0.16);
    --market-map-control-hover-bg: #2563eb;
    --market-map-control-hover-text: #ffffff;
    --market-map-pill-bg: rgba(255, 255, 255, 0.97);
    --market-map-pill-text: #334155;
    --market-map-pill-shadow: drop-shadow(0 0.4rem 0.9rem rgba(51, 65, 85, 0.16));
    --market-map-marker-stroke: rgba(255, 255, 255, 0.98);
    --market-tooltip-bg: rgba(255, 255, 255, 0.98);
    --market-tooltip-text: #0f172a;
    --market-tooltip-muted: #64748b;
    --market-tooltip-border: rgba(148, 163, 184, 0.24);
    --bg-page: #f4f8ff;
    --bg-surface: rgba(255, 255, 255, 0.88);
    --bg-surface-strong: #ffffff;
    --bg-surface-muted: #eef4fb;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border-soft: rgba(148, 163, 184, 0.24);
    --border-strong: rgba(148, 163, 184, 0.34);
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-contrast: #ffffff;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --shadow-card: 0 16px 38px rgba(15, 23, 42, 0.1);
    min-height: 100svh;
    width: 100%;
    overflow-x: clip;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 18% -8%, rgba(37, 99, 235, 0.14), transparent 34rem),
        radial-gradient(circle at 82% 0%, rgba(16, 185, 129, 0.08), transparent 28rem),
        linear-gradient(180deg, #f6f9ff 0%, #edf4ff 58%, #f7fbff 100%);
}

:root[data-theme="dark"] .world-stock-market-page[b-lixuccip4q] {
    --market-map-stage-bg:
        radial-gradient(circle at 48% 42%, rgba(47, 128, 237, 0.16), transparent 42%),
        radial-gradient(circle at 12% 24%, rgba(59, 200, 106, 0.08), transparent 28%),
        radial-gradient(circle at 87% 60%, rgba(245, 158, 25, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(8, 20, 38, 0.9), rgba(4, 12, 24, 0.92));
    --market-map-grid-dot: rgba(142, 162, 192, 0.48);
    --market-map-grid-line: rgba(132, 153, 181, 0.06);
    --market-map-grid-opacity: 0.3;
    --market-map-edge-fade: rgba(3, 9, 20, 0.24);
    --market-map-card-border: rgba(132, 153, 181, 0.18);
    --market-map-stage-border: rgba(132, 153, 181, 0.05);
    --market-map-graticule: rgba(127, 150, 184, 0.12);
    --market-map-land: #253b5a;
    --market-map-land-stroke: rgba(155, 181, 216, 0.18);
    --market-map-border-stroke: rgba(161, 184, 214, 0.16);
    --market-map-route: rgba(110, 169, 255, 0.3);
    --market-map-art-shadow: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));
    --market-map-land-shadow: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.2));
    --market-map-control-bg: rgba(8, 18, 33, 0.86);
    --market-map-control-text: #eef4ff;
    --market-map-control-border: rgba(132, 153, 181, 0.22);
    --market-map-control-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.22);
    --market-map-control-hover-bg: rgba(47, 128, 237, 0.28);
    --market-map-control-hover-text: #ffffff;
    --market-map-pill-bg: rgba(6, 15, 28, 0.9);
    --market-map-pill-text: #ffffff;
    --market-map-pill-shadow: drop-shadow(0 0.55rem 1rem rgba(0, 0, 0, 0.22));
    --market-map-marker-stroke: rgba(255, 255, 255, 0.9);
    --market-tooltip-bg: rgba(8, 18, 33, 0.98);
    --market-tooltip-text: #f8fafc;
    --market-tooltip-muted: rgba(211, 220, 233, 0.78);
    --market-tooltip-border: rgba(132, 153, 181, 0.24);
    --bg-page: #030914;
    --bg-surface: rgba(11, 22, 38, 0.9);
    --bg-surface-strong: rgba(14, 27, 47, 0.96);
    --bg-surface-muted: rgba(8, 18, 33, 0.9);
    --text-primary: #f8fafc;
    --text-secondary: #c8d1df;
    --text-muted: #8792a6;
    --border-soft: rgba(132, 153, 181, 0.2);
    --border-strong: rgba(132, 153, 181, 0.34);
    --accent: #2f80ed;
    --accent-hover: #5aa2ff;
    --success: #3bc86a;
    --warning: #f59e19;
    --danger: #ff5b57;
    --shadow-card: 0 14px 42px rgba(0, 0, 0, 0.24);
    background:
        radial-gradient(circle at 18% -8%, rgba(47, 128, 237, 0.16), transparent 34rem),
        radial-gradient(circle at 82% 0%, rgba(88, 44, 166, 0.12), transparent 30rem),
        linear-gradient(180deg, #020713 0%, #071120 58%, #020713 100%);
}

.world-stock-market-page[b-lixuccip4q],
.world-stock-market-page *[b-lixuccip4q] {
    box-sizing: border-box;
}

.market-page-shell[b-lixuccip4q] {
    width: 100%;
    min-height: 100svh;
    margin-inline: auto;
    padding: calc(max(var(--header-h), 7.75svh) + clamp(14px, 1.35vw, 28px)) clamp(14px, 1.35vw, 28px) clamp(14px, 1.35vw, 28px);
}

.market-workspace[b-lixuccip4q] {
    width: min(100%, 1600px);
    margin-inline: auto;
    display: grid;
    gap: clamp(10px, 1.05vw, 18px);
    align-content: start;
}

.market-title-block[b-lixuccip4q] {
    padding-top: clamp(0.15rem, 1.2vw, 0.7rem);
}

.market-title-block h1[b-lixuccip4q] {
    margin: 0;
    color: var(--text-primary);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 0;
}

.market-title-block p[b-lixuccip4q] {
    max-width: 44rem;
    margin: 0.62rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(0.92rem, 1.1vw, 1rem);
    font-weight: 500;
    line-height: 1.45;
}

.market-control-button svg[b-lixuccip4q],
.market-filter-row svg[b-lixuccip4q],
.exchange-directory svg[b-lixuccip4q],
.view-toggle svg[b-lixuccip4q],
.market-dashboard-footnote svg[b-lixuccip4q] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.market-control-actions[b-lixuccip4q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

.market-control-button[b-lixuccip4q] {
    min-height: clamp(2.75rem, 5vh, 3.35rem);
    padding: 0 1.1rem;
    border: 1px solid rgba(132, 153, 181, 0.24);
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface-strong) 88%, transparent);
    font-size: 0.86rem;
    font-weight: 650;
    white-space: nowrap;
}

.market-control-button svg[b-lixuccip4q] {
    width: 1.12rem;
    height: 1.12rem;
}

.market-search-trigger[b-lixuccip4q] {
    width: clamp(2.75rem, 5vh, 3.35rem);
    padding: 0;
}

.market-alerts-button[b-lixuccip4q] {
    position: relative;
    width: clamp(2.75rem, 5vh, 3.35rem);
    padding: 0;
}

.market-alert-count[b-lixuccip4q] {
    position: absolute;
    top: -0.38rem;
    right: -0.38rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.28rem;
    border: 2px solid var(--bg-page);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--accent-contrast);
    background: var(--accent);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.market-search-trigger.active[b-lixuccip4q] {
    color: var(--accent-contrast);
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
}

.market-search-trigger.active svg[b-lixuccip4q] {
    color: var(--accent-contrast);
}

.market-favorites-button.active[b-lixuccip4q],
.market-favorites-button.active svg[b-lixuccip4q] {
    color: #ffb232;
}

.market-settings[b-lixuccip4q] {
    position: relative;
}

.market-settings .market-control-button[b-lixuccip4q] {
    width: 100%;
}

.market-settings-menu[b-lixuccip4q] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 12rem;
    padding: 0.35rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.65rem;
    display: grid;
    gap: 0.25rem;
    background: color-mix(in srgb, var(--bg-surface-strong) 96%, transparent);
    box-shadow: var(--shadow-card);
}

.market-settings-menu button[b-lixuccip4q] {
    min-height: 2.25rem;
    border: 0;
    border-radius: 0.45rem;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    padding-inline: 0.65rem;
}

.market-settings-menu button.active[b-lixuccip4q] {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface-strong));
}

.market-filter-row[b-lixuccip4q] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.market-filter-scroll[b-lixuccip4q] {
    min-width: 0;
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.market-filter-scroll[b-lixuccip4q]::-webkit-scrollbar {
    display: none;
}

.market-filter-row button[b-lixuccip4q] {
    flex: 0 0 auto;
    min-height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1rem;
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 0.55rem;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface-strong) 84%, transparent);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.market-filter-row button.active[b-lixuccip4q] {
    border-color: #2f80ed;
    color: var(--accent-contrast);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, white), color-mix(in srgb, var(--accent-hover) 88%, black));
    box-shadow: inset 0 0 0 1px rgba(112, 166, 255, 0.18);
}

.market-filter-row i[b-lixuccip4q] {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 50%;
    background: var(--region-color, var(--success));
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--region-color, var(--success)) 16%, transparent);
}

.market-filter-row .open-filter i[b-lixuccip4q] {
    --region-color: var(--success);
    background: transparent;
    border: 2px solid var(--success);
    box-shadow: inset 0 0 0 2px rgba(59, 200, 106, 0.22), 0 0 0 0.2rem rgba(59, 200, 106, 0.12);
}

.market-search-modal-layer[b-lixuccip4q] {
    z-index: 40;
    padding: clamp(0.8rem, 2vw, 1.5rem);
    overflow: hidden;
    overscroll-behavior: contain;
}

.market-search-modal[b-lixuccip4q] {
    width: min(100%, 62rem);
    height: min(88svh, calc(var(--page-vh) - 2rem));
    max-height: min(88svh, calc(var(--page-vh) - 2rem));
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 1rem;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 0.9rem;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-surface-strong) 98%, transparent), color-mix(in srgb, var(--bg-surface) 96%, transparent));
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}

.market-search-modal-head[b-lixuccip4q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.market-search-modal-head h2[b-lixuccip4q] {
    margin: 0.15rem 0 0;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    color: var(--text-primary);
}

.market-search-close[b-lixuccip4q] {
    width: 2.9rem;
    height: 2.9rem;
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-surface-muted) 94%, transparent);
}

.market-search-close svg[b-lixuccip4q],
.market-search-overlay-box svg[b-lixuccip4q] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.market-search-overlay-box[b-lixuccip4q] {
    min-height: 4rem;
    padding: 0 1.15rem;
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 999px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.market-search-overlay-box input[b-lixuccip4q] {
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
}

.market-search-overlay-box input[b-lixuccip4q]::placeholder {
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.market-search-overlay-box button[b-lixuccip4q],
.market-search-modal-meta button[b-lixuccip4q] {
    border: 0;
    color: var(--text-secondary);
    background: transparent;
}

.market-search-overlay-box button[b-lixuccip4q] {
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
}

.market-search-modal-meta[b-lixuccip4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.market-search-modal-meta button[b-lixuccip4q] {
    color: var(--accent-hover);
    font-size: 0.82rem;
    font-weight: 650;
}

.market-search-results[b-lixuccip4q] {
    min-height: 0;
    display: grid;
    gap: 0.65rem;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    padding-right: 0.15rem;
}

.market-search-result[b-lixuccip4q] {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(132, 153, 181, 0.18);
    border-radius: 0.8rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    color: inherit;
    text-decoration: none;
    background: color-mix(in srgb, var(--bg-surface-strong) 84%, transparent);
}

.market-search-result:hover[b-lixuccip4q] {
    border-color: rgba(47, 128, 237, 0.38);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface-strong));
}

.market-search-result span[b-lixuccip4q] {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.market-search-result strong[b-lixuccip4q],
.market-search-result small[b-lixuccip4q],
.market-search-result em[b-lixuccip4q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-search-result strong[b-lixuccip4q] {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-style: normal;
}

.market-search-result small[b-lixuccip4q] {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.market-search-result em[b-lixuccip4q] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 500;
}

.market-search-empty[b-lixuccip4q] {
    padding: 1.5rem 0;
    color: var(--text-muted);
    text-align: center;
}

.market-alert-modal-layer[b-lixuccip4q] {
    z-index: 50;
    padding: clamp(0.8rem, 2vw, 1.5rem);
}

.market-alert-modal[b-lixuccip4q] {
    width: min(100%, 42rem);
    max-height: min(84svh, 42rem);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-surface-strong);
    box-shadow: var(--shadow-card);
}

.market-alert-modal-head[b-lixuccip4q] {
    padding: 1rem 1.05rem 0.8rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.market-alert-modal-head p[b-lixuccip4q] {
    margin: 0 0 0.3rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-alert-modal-head h2[b-lixuccip4q] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
}

.market-alert-modal-close[b-lixuccip4q] {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.65rem;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    background: var(--bg-surface-muted);
}

.market-alert-modal-close svg[b-lixuccip4q] {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.market-alert-modal-body[b-lixuccip4q] {
    padding: 1rem 1.05rem 1.1rem;
    display: grid;
    gap: 0.85rem;
    overflow: auto;
}

.market-alert-modal-helper[b-lixuccip4q],
.market-alert-empty[b-lixuccip4q] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
}

.market-alert-empty[b-lixuccip4q] {
    padding: 1rem;
    border: 1px dashed var(--border-soft);
    border-radius: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-surface-muted);
}

.market-alert-list[b-lixuccip4q] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    list-style: none;
}

.market-alert-list li[b-lixuccip4q] {
    padding: 0.75rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface-muted);
}

.market-alert-list strong[b-lixuccip4q],
.market-alert-list span[b-lixuccip4q] {
    display: block;
}

.market-alert-list strong[b-lixuccip4q] {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 650;
}

.market-alert-list span[b-lixuccip4q] {
    margin-top: 0.18rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.market-alert-list button[b-lixuccip4q] {
    min-height: 2rem;
    padding: 0 0.72rem;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border-soft));
    border-radius: 0.6rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface-strong));
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
}

.region-americas[b-lixuccip4q] {
    --region-color: var(--market-americas);
}

.region-europe[b-lixuccip4q] {
    --region-color: var(--market-europe);
}

.region-asia[b-lixuccip4q] {
    --region-color: var(--market-asia);
}

.region-oceania[b-lixuccip4q] {
    --region-color: var(--market-oceania);
}

.region-middleeast[b-lixuccip4q] {
    --region-color: var(--market-middle-east);
}

.market-main-grid[b-lixuccip4q] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(27rem, 1fr);
    grid-template-areas: "map upcoming";
    gap: clamp(10px, 1.05vw, 18px);
    align-items: stretch;
}

.market-map-area[b-lixuccip4q] {
    grid-area: map;
    min-width: 0;
}

.market-upcoming-area[b-lixuccip4q] {
    grid-area: upcoming;
    min-width: 0;
}

.market-map-area[b-lixuccip4q]  .market-map-card,
.market-upcoming-area[b-lixuccip4q]  .upcoming-panel {
    height: 100%;
    min-height: clamp(20rem, 35vh, 26rem);
}

.exchange-directory[b-lixuccip4q] {
    display: grid;
    gap: 0.75rem;
}

.exchange-directory > header[b-lixuccip4q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.exchange-directory > header > div:first-child[b-lixuccip4q] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #2f80ed;
}

.exchange-directory h2[b-lixuccip4q] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(0.92rem, 1.05vw, 1.15rem);
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.view-toggle[b-lixuccip4q] {
    flex: 0 0 auto;
    display: flex;
    padding: 0.18rem;
    border: 1px solid rgba(132, 153, 181, 0.22);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--bg-surface-muted) 90%, transparent);
}

.view-toggle button[b-lixuccip4q] {
    min-height: 2.15rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 0.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    color: var(--text-muted);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
}

.view-toggle button.active[b-lixuccip4q] {
    color: var(--accent-contrast);
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    box-shadow: 0 0.55rem 1.3rem color-mix(in srgb, var(--accent) 22%, transparent);
}

.exchange-card-grid[b-lixuccip4q] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.65rem, 0.8vw, 0.9rem);
}

.exchange-card-grid.list[b-lixuccip4q] {
    grid-template-columns: 1fr;
}

.market-no-results[b-lixuccip4q] {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1.5rem;
    border: 1px dashed var(--border-soft);
    border-radius: 0.6rem;
    color: var(--text-muted);
    text-align: center;
}

.market-no-results button[b-lixuccip4q] {
    border: 0;
    color: var(--accent-hover);
    background: transparent;
    font-weight: 650;
}

.market-seo-content[b-lixuccip4q] {
    padding: clamp(1.15rem, 2.1vw, 2rem);
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    display: grid;
    gap: clamp(1.2rem, 2vw, 1.8rem);
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 26rem),
        color-mix(in srgb, var(--bg-surface) 96%, transparent);
    box-shadow: var(--shadow-card);
}

.market-seo-intro[b-lixuccip4q] {
    max-width: 68rem;
}

.market-seo-intro > p:first-child[b-lixuccip4q],
.market-seo-links > div > p[b-lixuccip4q],
.market-seo-section-heading > p[b-lixuccip4q] {
    margin: 0 0 0.35rem;
    color: var(--accent-hover);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-seo-intro h2[b-lixuccip4q],
.market-seo-links h3[b-lixuccip4q],
.market-seo-section-heading h3[b-lixuccip4q] {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.16;
}

.market-seo-intro h2[b-lixuccip4q] {
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 700;
}

.market-seo-intro > p:last-child[b-lixuccip4q] {
    max-width: 62rem;
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    font-size: clamp(0.88rem, 1vw, 1rem);
    line-height: 1.7;
}

.market-seo-answer-grid[b-lixuccip4q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.7rem, 1vw, 1rem);
}

.market-seo-answer-grid article[b-lixuccip4q] {
    min-width: 0;
    padding: clamp(1rem, 1.4vw, 1.3rem);
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--bg-surface-strong) 88%, transparent);
}

.market-seo-answer-grid h3[b-lixuccip4q] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(0.98rem, 1.15vw, 1.12rem);
    line-height: 1.35;
}

.market-seo-answer-grid p[b-lixuccip4q] {
    margin: 0.65rem 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.65;
}

.market-seo-answer-grid a[b-lixuccip4q],
.market-seo-inline-links a[b-lixuccip4q] {
    color: var(--accent-hover);
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
}

.market-seo-answer-grid a:hover[b-lixuccip4q],
.market-seo-inline-links a:hover[b-lixuccip4q] {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.market-seo-inline-links[b-lixuccip4q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.market-seo-links[b-lixuccip4q],
.market-seo-faq[b-lixuccip4q] {
    padding-top: clamp(1rem, 1.5vw, 1.35rem);
    border-top: 1px solid var(--border-soft);
}

.market-seo-links[b-lixuccip4q] {
    display: grid;
    grid-template-columns: minmax(11rem, 0.28fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.market-seo-links h3[b-lixuccip4q],
.market-seo-section-heading h3[b-lixuccip4q] {
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    font-weight: 650;
}

.market-seo-links nav[b-lixuccip4q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.market-seo-links nav a[b-lixuccip4q] {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.65rem;
    display: grid;
    gap: 0.16rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-surface-strong) 82%, transparent);
    text-decoration: none;
}

.market-seo-links nav a:hover[b-lixuccip4q] {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-soft));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface-strong));
}

.market-seo-links nav strong[b-lixuccip4q] {
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-seo-links nav span[b-lixuccip4q] {
    color: var(--text-muted);
    font-size: 0.73rem;
}

.market-seo-faq[b-lixuccip4q] {
    display: grid;
    grid-template-columns: minmax(11rem, 0.28fr) minmax(0, 1fr);
    gap: 1rem;
}

.market-seo-faq-list[b-lixuccip4q] {
    min-width: 0;
    display: grid;
    gap: 0.5rem;
}

.market-seo-faq-list details[b-lixuccip4q] {
    border: 1px solid var(--border-soft);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--bg-surface-strong) 82%, transparent);
}

.market-seo-faq-list summary[b-lixuccip4q] {
    padding: 0.85rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.4;
}

.market-seo-faq-list details p[b-lixuccip4q] {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--text-secondary);
    font-size: 0.83rem;
    line-height: 1.65;
}

.market-dashboard-footnote[b-lixuccip4q] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 4vw, 3rem);
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-size: clamp(0.72rem, 0.8vw, 0.86rem);
}

.market-dashboard-footnote span[b-lixuccip4q] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

button:focus-visible[b-lixuccip4q],
input:focus-visible[b-lixuccip4q],
a:focus-visible[b-lixuccip4q] {
    outline: 3px solid rgba(47, 128, 237, 0.38);
    outline-offset: 2px;
}

@media (max-width: 1450px) {
    .exchange-card-grid[b-lixuccip4q] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1350px) {
    .market-filter-row[b-lixuccip4q] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .market-control-actions[b-lixuccip4q] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 1180px) {
    .market-main-grid[b-lixuccip4q] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "map"
            "upcoming";
    }

    .exchange-card-grid[b-lixuccip4q] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .market-page-shell[b-lixuccip4q] {
        padding: calc(max(var(--header-h), 7.7svh) + 0.8rem) 0.8rem 0.8rem;
    }

    .market-filter-row[b-lixuccip4q] {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .market-filter-scroll[b-lixuccip4q] {
        order: 0;
    }

    .market-control-actions[b-lixuccip4q] {
        grid-column: auto;
        order: 1;
        justify-content: stretch;
    }

    .market-control-button[b-lixuccip4q] {
        flex: 1 1 0;
        min-width: 0;
    }

    .market-filter-row button[b-lixuccip4q] {
        min-height: 2.8rem;
    }

    .market-main-grid[b-lixuccip4q] {
        grid-template-areas:
            "upcoming"
            "map";
    }

    .exchange-card-grid[b-lixuccip4q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-seo-answer-grid[b-lixuccip4q] {
        grid-template-columns: 1fr;
    }

    .market-seo-links[b-lixuccip4q],
    .market-seo-faq[b-lixuccip4q] {
        grid-template-columns: 1fr;
    }

    .market-dashboard-footnote[b-lixuccip4q] {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }
}

@media (max-width: 560px) {
    .market-title-block h1[b-lixuccip4q] {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }
}

@media (max-width: 520px) {
    .market-page-shell[b-lixuccip4q] {
        padding: calc(max(var(--header-h), 7.7svh) + 0.65rem) 0.65rem 0.65rem;
        gap: 0.7rem;
    }

    .market-control-actions[b-lixuccip4q] {
        display: grid;
        grid-template-columns: auto auto repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .market-control-button[b-lixuccip4q] {
        padding-inline: 0.65rem;
        font-size: 0.78rem;
    }

    .market-search-trigger[b-lixuccip4q] {
        width: 2.85rem;
    }

    .market-alerts-button[b-lixuccip4q] {
        width: 2.85rem;
    }

    .market-alert-list li[b-lixuccip4q] {
        grid-template-columns: 1fr;
    }

    .market-alert-list button[b-lixuccip4q] {
        justify-self: start;
    }

    .exchange-directory > header[b-lixuccip4q] {
        align-items: stretch;
        flex-direction: column;
    }

    .view-toggle[b-lixuccip4q] {
        align-self: stretch;
    }

    .view-toggle button[b-lixuccip4q] {
        flex: 1 1 0;
    }

    .exchange-card-grid[b-lixuccip4q] {
        grid-template-columns: 1fr;
    }

    .market-seo-links nav[b-lixuccip4q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}