/* /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;
}

.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] {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6fd2ff, #2067b4);
}

.logo-asx i[b-t73xffwlmp],
.logo-asx[b-t73xffwlmp]::before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.28rem;
    height: 1.35rem;
    border-radius: 999px;
    content: "";
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(35deg);
}

.logo-asx i:last-child[b-t73xffwlmp],
.logo-asx[b-t73xffwlmp]::before {
    transform: translate(-50%, -50%) rotate(-35deg);
}

.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-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: clamp(2rem, 3vw, 2.6rem);
    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;
}

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

.business-side-heading p[b-sbrl39oyzg] {
    margin-bottom: 4px;
}

.business-quick-card dl[b-sbrl39oyzg] {
    margin: 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: grid;
    grid-template-columns: minmax(0, 1fr) minmax(100px, auto);
    align-items: center;
    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] {
    color: var(--city-text-muted);
    font-size: 0.7rem;
    font-weight: 720;
}

.business-quick-card dd[b-sbrl39oyzg] {
    font-size: 0.75rem;
    font-weight: 820;
    overflow-wrap: anywhere;
    text-align: right;
}

.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-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: clamp(2rem, 3vw, 2.6rem);
    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/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: 4px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    font-size: 1.35rem;
    line-height: 1;
}

.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: 4px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    font-size: 1.35rem;
    line-height: 1;
}

.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-more,
.city-time-page[b-pl73v57c4h]  .city-hero-search {
    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;
}

.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 42px;
    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;
    padding: 3px 7px;
    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;
}

.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-actions a span,
    .city-time-page[b-pl73v57c4h]  .city-hero-actions button:not(.city-hero-more) {
        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;
    }

    .city-major-row small[b-pl73v57c4h] {
        grid-column: 2;
    }

    .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: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--city-text-secondary);
}

.weather-hourly-pager button[b-yvt7kwpx0v] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--city-border);
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    color: var(--city-accent);
    background: var(--city-surface-soft);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.weather-hourly-pager button:hover:not(:disabled)[b-yvt7kwpx0v],
.weather-hourly-pager button:focus-visible:not(:disabled)[b-yvt7kwpx0v] {
    color: var(--city-accent-hover);
    border-color: color-mix(in srgb, var(--city-accent) 32%, var(--city-border));
    background: var(--city-accent-soft);
}

.weather-hourly-pager button:disabled[b-yvt7kwpx0v] {
    color: var(--city-text-muted);
    opacity: 0.45;
    cursor: not-allowed;
}

.weather-hourly-pager span[b-yvt7kwpx0v] {
    min-width: 76px;
    color: var(--city-text-secondary);
    font-size: 0.76rem;
    font-weight: 780;
    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-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: 4px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    font-size: 1.35rem;
    line-height: 1;
}

.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;
    max-width: 100%;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--city-text-primary);
    background: var(--city-accent-soft);
    font-size: 0.86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.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(74px, 1fr);
    overflow-x: auto;
    scrollbar-width: thin;
}

.weather-hour-tile[b-yvt7kwpx0v] {
    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: 7px;
    text-align: center;
}

.weather-hour-tile:first-child[b-yvt7kwpx0v] {
    border-left: 0;
}

.weather-hour-tile time[b-yvt7kwpx0v],
.weather-hour-tile small[b-yvt7kwpx0v] {
    color: var(--city-text-secondary);
    font-size: 0.75rem;
    font-weight: 760;
    white-space: nowrap;
}

.weather-hour-tile span[b-yvt7kwpx0v] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
}

.weather-hour-tile strong[b-yvt7kwpx0v] {
    font-size: 0.92rem;
    font-weight: 850;
}

.weather-hour-tile small[b-yvt7kwpx0v] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--city-accent);
}

.weather-hour-tile small svg[b-yvt7kwpx0v] {
    width: 0.72rem;
    height: 0.72rem;
}

.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[b-yvt7kwpx0v] {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 0;
        gap: 0;
    }

    .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/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/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.35rem;
    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] {
    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;
}

.time-zone-info-actions button:first-child[b-nrgu2nuvhb] {
    border-left: 0;
}

.time-zone-info-actions button:hover[b-nrgu2nuvhb],
.time-zone-info-actions button: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;
    }
}
/* /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/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: min(100%, 1920px);
    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);
    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: clamp(2.05rem, 4vw, 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));
    }
}