.site-preview-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    font-family: 'InfraRegular', monospace;
    font-size: 0.62em;
    line-height: 1;
}

.site-preview-theme-toggle {
    display: none;
}

.site-preview-switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    flex: 0 0 auto;
}

.site-preview-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.site-preview-track {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}

.site-preview-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background 0.2s ease;
}

.site-preview-switch input:checked + .site-preview-track {
    border-color: rgba(39, 157, 132, 0.72);
    background: rgba(39, 157, 132, 0.74);
}

.site-preview-switch input:checked + .site-preview-track::before {
    transform: translateX(20px);
}

.site-preview-switch input:focus-visible + .site-preview-track {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}

.site-preview-theme-icon {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.site-preview-theme-svg {
    display: block;
    width: 22px;
    height: 22px;
    overflow: visible;
}

.site-preview-theme-svg * {
    vector-effect: non-scaling-stroke;
}

.site-preview-theme-sun,
.site-preview-theme-moon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.2, 0.9, 0.22, 1.12);
}

.site-preview-theme-disc {
    fill: none;
}

.site-preview-theme-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.site-preview-theme-moon {
    opacity: 0;
    transform: rotate(-30deg) scale(0.72);
}

body.dtemp-preview.dtemp-preview-modules-dark .site-preview-theme-sun {
    opacity: 0;
    transform: rotate(48deg) scale(0.72);
}

body.dtemp-preview.dtemp-preview-modules-dark .site-preview-theme-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@media (max-width: 600px) {
    .site-preview-toggle-text {
        display: none;
    }

    .site-preview-switch {
        width: 40px;
        height: 22px;
    }

    .site-preview-track::before {
        width: 14px;
        height: 14px;
    }

    .site-preview-switch input:checked + .site-preview-track::before {
        transform: translateX(18px);
    }

    .site-preview-theme-icon {
        width: 22px;
        height: 22px;
    }

    .site-preview-theme-svg {
        width: 20px;
        height: 20px;
    }
}

body.dtemp-preview {
    --preview-module-bg: rgba(255, 255, 255, 0.5);
    --preview-module-bg-soft: rgba(255, 255, 255, 0.42);
    --preview-module-bg-muted: rgba(255, 255, 255, 0.36);
    --preview-module-bg-hover: rgba(237, 244, 241, 0.68);
    --preview-module-border: rgba(23, 35, 38, 0.12);
    --preview-module-divider: rgba(23, 35, 38, 0.12);
    --preview-module-shadow: 0 12px 26px rgba(23, 35, 38, 0.07);
    --preview-module-text: #172326;
    --preview-module-muted: #596b6c;
    --preview-module-subtle: #435657;
    --preview-chart-bg: rgba(255, 255, 255, 0.46);
    --preview-chart-border: rgba(23, 35, 38, 0.16);
    --preview-chart-text: #10191b;
    --preview-chart-grid: rgba(16, 25, 27, 0.26);
    --preview-chart-muted: rgba(16, 25, 27, 0.72);
    --preview-chart-point-bg: transparent;
    --preview-chart-series-outside: #2d2d2d;
    --preview-chart-series-inside: #009de8;
    --preview-chart-series-101m: #a33131;
    --preview-chart-tab-bg: rgba(23, 35, 38, 0.06);
    --preview-chart-tab-bg-hover: rgba(23, 35, 38, 0.1);
    --preview-chart-tab-text: rgba(23, 35, 38, 0.74);
    --preview-chart-tab-active-bg: rgba(23, 35, 38, 0.86);
    --preview-chart-tab-active-text: #fff;
    --preview-control-bg: rgba(237, 244, 241, 0.68);
    --preview-control-bg-hover: rgba(225, 236, 233, 0.82);
    --preview-control-border: #c8d6d2;
    --preview-accent-bg: rgba(39, 157, 132, 0.15);
    --preview-accent-border: rgba(39, 157, 132, 0.36);
    --preview-loading-bg: rgba(39, 157, 132, 0.38);
    --preview-loading-border: rgba(39, 157, 132, 0.78);
    --preview-loading-text: #06372e;
    --preview-loading-spinner-track: rgba(6, 55, 46, 0.24);
    --preview-loading-spinner-fill: #006d5a;
    --preview-topbar-bg: rgba(255, 255, 255, 0.52);
    --preview-topbar-border: rgba(23, 35, 38, 0.12);
    --preview-topbar-text: #172326;
    --preview-topbar-control-bg: rgba(255, 255, 255, 0.46);
    --preview-topbar-control-bg-hover: rgba(236, 243, 241, 0.64);
    background: linear-gradient(155deg, #f5f7f3 0%, #e7eff0 52%, #f0eee7 100%);
    color: #172326;
    font-size: 1rem;
}

body.dtemp-preview.dtemp-preview-modules-dark {
    --preview-module-bg: rgba(18, 29, 32, 0.68);
    --preview-module-bg-soft: rgba(23, 37, 41, 0.6);
    --preview-module-bg-muted: rgba(28, 44, 48, 0.52);
    --preview-module-bg-hover: rgba(31, 52, 56, 0.78);
    --preview-module-border: rgba(255, 255, 255, 0.16);
    --preview-module-divider: rgba(255, 255, 255, 0.12);
    --preview-module-shadow: 0 14px 30px rgba(10, 20, 22, 0.14);
    --preview-module-text: #f4faf8;
    --preview-module-muted: #b7c8c5;
    --preview-module-subtle: #cedbd8;
    --preview-chart-bg: rgba(14, 24, 28, 0.72);
    --preview-chart-border: rgba(255, 255, 255, 0.16);
    --preview-chart-text: #dcebe8;
    --preview-chart-grid: rgba(220, 235, 232, 0.14);
    --preview-chart-muted: rgba(220, 235, 232, 0.5);
    --preview-chart-point-bg: rgba(14, 24, 28, 0.9);
    --preview-chart-series-outside: #fff;
    --preview-chart-series-inside: #f0c96b;
    --preview-chart-series-101m: #f47f75;
    --preview-chart-tab-bg: rgba(255, 255, 255, 0.08);
    --preview-chart-tab-bg-hover: rgba(255, 255, 255, 0.16);
    --preview-chart-tab-text: rgba(255, 255, 255, 0.78);
    --preview-chart-tab-active-bg: #f0b75a;
    --preview-chart-tab-active-text: #172326;
    --preview-control-bg: rgba(255, 255, 255, 0.1);
    --preview-control-bg-hover: rgba(255, 255, 255, 0.16);
    --preview-control-border: rgba(255, 255, 255, 0.2);
    --preview-accent-bg: rgba(39, 157, 132, 0.22);
    --preview-accent-border: rgba(68, 195, 165, 0.48);
    --preview-loading-bg: rgba(84, 214, 179, 0.22);
    --preview-loading-border: rgba(84, 214, 179, 0.58);
    --preview-loading-text: #e4fff8;
    --preview-loading-spinner-track: rgba(228, 255, 248, 0.2);
    --preview-loading-spinner-fill: #54d6b3;
    --preview-topbar-bg: rgba(18, 29, 32, 0.7);
    --preview-topbar-border: rgba(255, 255, 255, 0.16);
    --preview-topbar-text: #f4faf8;
    --preview-topbar-control-bg: rgba(255, 255, 255, 0.1);
    --preview-topbar-control-bg-hover: rgba(255, 255, 255, 0.16);
}

body.dtemp-preview.dtemp-preview-modules-dark .module .icon,
body.dtemp-preview.dtemp-preview-modules-dark .module-btn img,
body.dtemp-preview.dtemp-preview-modules-dark .pagination-arrow img {
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

body.dtemp-preview.dtemp-preview-modules-dark .inner-top-bar .icon,
body.dtemp-preview.dtemp-preview-modules-dark .inner-top-bar button img {
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

body.dtemp-preview .content {
    background: transparent;
}

body.dtemp-preview .top-bar {
    height: auto;
    padding: 14px 0 8px;
    position: sticky;
    z-index: 100;
}

body.dtemp-preview.mobile-actions-open .top-bar {
    z-index: 1200;
}

body.dtemp-preview .inner-top-bar {
    position: static;
    left: auto;
    transform: none;
    width: min(1180px, calc(100% - 40px)) !important;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 44px;
    margin: 0 auto;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 1px solid var(--preview-topbar-border);
    border-radius: 8px;
    background: var(--preview-topbar-bg);
    box-shadow: var(--preview-module-shadow);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

body.dtemp-preview .title {
    color: var(--preview-topbar-text);
    font-family: 'InfraBold', monospace;
    font-size: 1.15rem;
}

body.dtemp-preview .right {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: var(--preview-topbar-text);
    font-size: 0.9rem;
}

body.dtemp-preview .spacer {
    display: none;
}

body.dtemp-preview .location,
body.dtemp-preview .export-trigger-btn,
body.dtemp-preview .site-preview-toggle,
body.dtemp-preview .language {
    color: var(--preview-topbar-text);
}

body.dtemp-preview .location {
    padding: 6px 10px;
    border: 1px solid var(--preview-topbar-border);
    border-radius: 8px;
    background: var(--preview-topbar-control-bg);
}

body.dtemp-preview .icon,
body.dtemp-preview button img {
    filter: none;
}

body.dtemp-preview .language {
    width: 24px;
    height: 24px;
}

body.dtemp-preview .export-trigger-btn {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--preview-topbar-border);
    border-radius: 8px;
    background: var(--preview-topbar-control-bg);
}

body.dtemp-preview .export-trigger-btn:hover {
    background: var(--preview-topbar-control-bg-hover);
}

body.dtemp-preview .mobile-actions-trigger {
    border-color: var(--preview-topbar-border);
    background: var(--preview-topbar-control-bg);
    color: var(--preview-topbar-text);
}

body.dtemp-preview .mobile-actions-trigger:hover,
body.dtemp-preview .mobile-actions-menu.is-open .mobile-actions-trigger {
    background: var(--preview-topbar-control-bg-hover);
    border-color: var(--preview-accent-border);
}

body.dtemp-preview .mobile-actions-trigger:focus-visible,
body.dtemp-preview .mobile-menu-action:focus-visible {
    outline-color: rgba(39, 157, 132, 0.62);
}

body.dtemp-preview .mobile-actions-dropdown {
    border-color: var(--preview-topbar-border);
    background: var(--preview-topbar-bg);
    box-shadow: var(--preview-module-shadow);
    color: var(--preview-topbar-text);
}

body.dtemp-preview .mobile-menu-row {
    color: var(--preview-topbar-text);
}

body.dtemp-preview .mobile-menu-action:hover,
body.dtemp-preview .mobile-menu-action:focus-visible,
body.dtemp-preview .mobile-menu-toggle-row:hover {
    background: var(--preview-topbar-control-bg-hover);
}

body.dtemp-preview .mobile-menu-icon {
    filter: none;
    opacity: 0.78;
}

body.dtemp-preview.dtemp-preview-modules-dark .mobile-menu-icon {
    filter: brightness(0) invert(1);
    opacity: 0.82;
}

body.dtemp-preview .mobile-menu-dot {
    border-color: var(--preview-control-border);
    background: var(--preview-control-bg);
}

body.dtemp-preview .mobile-menu-divider {
    background: var(--preview-topbar-border);
}

body.dtemp-preview .site-preview-toggle {
    padding: 6px 10px;
    border: 1px solid var(--preview-topbar-border);
    border-radius: 8px;
    background: var(--preview-topbar-control-bg);
    font-size: 0.78rem;
}

body.dtemp-preview .site-preview-theme-toggle {
    display: flex;
}

body.dtemp-preview .site-preview-track {
    border-color: var(--preview-control-border);
    background: var(--preview-control-bg);
}

body.dtemp-preview .site-preview-track::before {
    background: #fff;
}

body.dtemp-preview .site-preview-switch input:focus-visible + .site-preview-track {
    outline-color: rgba(39, 157, 132, 0.55);
}

@media (max-width: 768px) {
    body.dtemp-preview .inner-top-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    body.dtemp-preview .left {
        grid-column: 2;
        justify-self: center;
    }

    body.dtemp-preview .right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        width: 100%;
        margin-left: 0;
        align-items: center;
        justify-content: stretch;
        column-gap: 8px;
        row-gap: 0;
    }

    body.dtemp-preview .location {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        justify-self: start;
    }

    body.dtemp-preview .location-name {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.dtemp-preview .mobile-actions-menu {
        display: contents;
    }

    body.dtemp-preview .mobile-actions-trigger {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    body.dtemp-preview .mobile-actions-dropdown {
        position: static;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin-top: 0;
        box-shadow: none;
    }

    body.dtemp-preview .mobile-actions-menu.is-open .mobile-actions-dropdown {
        border-color: var(--preview-topbar-border);
    }

    body.dtemp-preview .language {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    body.dtemp-preview .buttons-module {
        display: none !important;
    }
}

@supports (-moz-appearance: none) {
    @media (max-width: 768px) {
        body.dtemp-preview .inner-top-bar,
        body.dtemp-preview .mobile-actions-dropdown {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }
    }
}

body.dtemp-preview .main-content {
    padding: 0 20px 28px;
    box-sizing: border-box;
}

body.dtemp-preview .main {
    left: auto;
    transform: none;
    width: min(1180px, 100%) !important;
    min-width: 0;
    max-width: none;
    margin: 0 auto;
    padding-bottom: 28px;
    gap: 16px;
}

body.dtemp-preview .loading-status-region {
    position: relative;
    z-index: 1100;
    display: none;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(1180px, calc(100% - 40px));
    margin: 8px auto 0;
    box-sizing: border-box;
}

.loading-status-region {
    width: min(850px, 80%);
    min-width: min(500px, calc(100% - 20px));
    margin: 8px auto 0;
    box-sizing: border-box;
}

body.dtemp-preview .loading-status-region.has-app-notifications,
body.dtemp-preview .loading-status-region:has(.app-notification-banner),
body.dtemp-preview .loading-status-region:has(.loading-indicator[style*="flex"]) {
    display: grid;
}

.loading-status-region.has-app-notifications {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(850px, 80%);
    min-width: min(500px, calc(100% - 20px));
    margin: 8px auto 0;
    box-sizing: border-box;
}

.app-notification-banner {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    font-family: 'InfraRegular', monospace;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.app-notification-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.app-notification-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-notification-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    line-height: 1.35;
}

.app-notification-copy strong {
    font-family: 'InfraBold', 'InfraRegular', monospace;
    font-size: 0.82rem;
}

.app-notification-copy span {
    font-size: 0.86rem;
}

.app-notification-close {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1.05rem;
    opacity: 0.72;
}

.app-notification-close:hover {
    opacity: 1;
}

.app-notification-information {
    border-color: rgba(39, 157, 132, 0.58);
    background: rgba(39, 157, 132, 0.18);
}

.app-notification-warning {
    border-color: rgba(217, 148, 38, 0.62);
    background: rgba(217, 148, 38, 0.18);
}

.app-notification-error {
    border-color: rgba(220, 68, 68, 0.62);
    background: rgba(220, 68, 68, 0.18);
}

body.dtemp-preview .loading-status-region.has-app-notifications {
    grid-template-columns: 1fr;
    width: min(1180px, calc(100% - 40px));
    min-width: 0;
}

body.dtemp-preview .app-notification-banner {
    border-color: var(--preview-loading-border);
    background: var(--preview-loading-bg);
    color: var(--preview-loading-text);
    box-shadow: 0 14px 28px rgba(23, 35, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.dtemp-preview .app-notification-warning {
    border-color: rgba(188, 117, 21, 0.66);
    background: rgba(230, 157, 45, 0.28);
    color: #3f2a05;
}

body.dtemp-preview .app-notification-error {
    border-color: rgba(173, 44, 44, 0.66);
    background: rgba(224, 75, 75, 0.22);
    color: #4d0808;
}

body.dtemp-preview.dtemp-preview-modules-dark .app-notification-warning {
    border-color: rgba(240, 201, 107, 0.58);
    background: rgba(240, 201, 107, 0.18);
    color: #fff4d2;
}

body.dtemp-preview.dtemp-preview-modules-dark .app-notification-error {
    border-color: rgba(244, 127, 117, 0.58);
    background: rgba(244, 127, 117, 0.16);
    color: #ffe4e1;
}

body.dtemp-preview .temperature-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
    grid-template-areas:
        "values stats"
        "labels stats";
    gap: 8px 24px;
    margin-top: 16px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid var(--preview-module-border);
    border-radius: 8px;
    background: var(--preview-module-bg);
    box-shadow: var(--preview-module-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.dtemp-preview .temp-value-holders {
    grid-area: values;
    margin: 0;
    gap: 14px;
    color: var(--preview-module-text);
    font-family: 'InfraBold', monospace;
    font-size: 2.25rem;
    line-height: 1.1;
}

body.dtemp-preview .temp-holders {
    grid-area: labels;
    gap: 14px;
}

body.dtemp-preview .outside-temp-label,
body.dtemp-preview .inside-temp-label,
body.dtemp-preview .inside101m-temp-label {
    color: var(--preview-module-muted);
    font-size: 0.82rem;
}

body.dtemp-preview .threshold-info {
    grid-area: stats;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding-left: 22px;
    border-left: 1px solid var(--preview-module-divider);
    color: var(--preview-module-subtle);
    text-align: left;
    font-size: 0.9rem;
}

body.dtemp-preview #hours-above-threshold {
    color: var(--preview-module-text);
    font-family: 'InfraBold', monospace;
    font-size: 1.35rem;
}

body.dtemp-preview .streak-info {
    color: var(--preview-module-muted);
    font-size: 0.82rem;
    opacity: 1;
}

body.dtemp-preview #current-streak,
body.dtemp-preview #longest-streak,
body.dtemp-preview #last-streak {
    color: var(--preview-module-text);
}

body.dtemp-preview .modules {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas:
        "chart predictions"
        "chart buttons"
        "day week";
    align-items: stretch;
    gap: 16px;
    margin: 0;
    position: relative;
}

body.dtemp-preview .module {
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid var(--preview-module-border) !important;
    border-radius: 8px !important;
    background: var(--preview-module-bg) !important;
    box-shadow: var(--preview-module-shadow) !important;
    color: var(--preview-module-text) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.dtemp-preview .module::before,
body.dtemp-preview .module::after,
body.dtemp-preview .module-btn::before {
    display: none;
}

body.dtemp-preview .chart-module {
    grid-area: chart;
    min-height: 430px;
    background: var(--preview-chart-bg) !important;
    border-color: var(--preview-chart-border) !important;
    box-shadow: 0 18px 36px rgba(24, 48, 53, 0.18);
    color: var(--preview-chart-text) !important;
}

body.dtemp-preview .predictions-module {
    grid-area: predictions;
    align-self: start;
    align-items: stretch;
    gap: 10px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.dtemp-preview .buttons-module {
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-self: start;
}

body.dtemp-preview .day-module {
    grid-area: day;
    align-self: start;
    --preview-temp-columns-width: clamp(138px, 34%, 240px);
    --preview-pager-button-size: 34px;
}

body.dtemp-preview .week-module {
    grid-area: week;
    align-self: start;
    --preview-temp-columns-width: clamp(128px, 42%, 170px);
    --preview-pager-button-size: 34px;
}

body.dtemp-preview .module .module-subtitle {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--preview-module-divider);
}

body.dtemp-preview .module-subtitle-text {
    color: var(--preview-module-text);
    font-family: 'InfraBold', monospace;
    font-size: 0.95rem;
}

body.dtemp-preview .module-subtitle-icons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    width: var(--preview-temp-columns-width) !important;
    gap: 10px;
}

body.dtemp-preview .module-subtitle-icons .icon {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    opacity: 0.7;
}

body.dtemp-preview .module-btn {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--preview-module-border);
    border-radius: 8px;
    background: var(--preview-module-bg);
    box-shadow: var(--preview-module-shadow);
    color: var(--preview-module-text);
    font-size: 0.92rem;
    justify-content: flex-start;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.dtemp-preview .module-btn:hover {
    background: var(--preview-module-bg-hover);
    border-color: var(--preview-accent-border);
    box-shadow: var(--preview-module-shadow);
}

body.dtemp-preview .predictions-module p {
    color: var(--preview-module-text);
    font-size: 0.92rem;
}

body.dtemp-preview .predictions-toggle-container,
body.dtemp-preview .predictions-accuracy {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    box-sizing: border-box;
    border: 1px solid var(--preview-module-border);
    border-radius: 8px;
    background: var(--preview-module-bg);
    box-shadow: var(--preview-module-shadow);
    gap: 12px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.dtemp-preview .predictions-toggle-container {
    cursor: pointer;
}

body.dtemp-preview .predictions-toggle-container:hover {
    background: var(--preview-module-bg-hover);
    border-color: var(--preview-accent-border);
    box-shadow: var(--preview-module-shadow);
}

body.dtemp-preview .predictions-accuracy {
    align-items: flex-start;
    border-color: var(--preview-accent-border);
    background: var(--preview-module-bg-muted);
}

body.dtemp-preview .predictions-module:has(#predictions-toggle:not(:checked)) .predictions-accuracy {
    display: none !important;
}

body.dtemp-preview .predictions-module:has(#predictions-toggle:checked) .predictions-toggle-container {
    border-color: var(--preview-accent-border);
    background: var(--preview-accent-bg);
}

body.dtemp-preview .predictions-accuracy p,
body.dtemp-preview .predictions-percentage,
body.dtemp-preview .model-accuracy-row .model-name,
body.dtemp-preview .model-accuracy-row .model-accuracy {
    color: var(--preview-module-subtle);
    font-size: 0.85rem;
    opacity: 1;
}

body.dtemp-preview .predictions-percentage {
    font-family: 'InfraBold', monospace;
    text-align: right;
}

body.dtemp-preview .predictions-module .slider {
    border-color: var(--preview-control-border);
    background: var(--preview-control-bg);
}

body.dtemp-preview .predictions-module input:checked + .slider {
    border-color: rgba(39, 157, 132, 0.72);
    background: rgba(39, 157, 132, 0.74);
}

body.dtemp-preview .chart-tabs {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

body.dtemp-preview .chart-tab,
body.dtemp-preview .view-toggle {
    margin: 0;
    border-radius: 8px;
    border-color: var(--preview-chart-border);
    background: var(--preview-chart-tab-bg);
    color: var(--preview-chart-tab-text);
}

body.dtemp-preview .chart-tab.active,
body.dtemp-preview .view-toggle.active {
    background: var(--preview-chart-tab-active-bg);
    border-color: var(--preview-chart-tab-active-bg);
    color: var(--preview-chart-tab-active-text);
}

body.dtemp-preview .chart-tab:hover,
body.dtemp-preview .view-toggle:hover:not(.active) {
    background: var(--preview-chart-tab-bg-hover);
    color: var(--preview-chart-text);
}

body.dtemp-preview .chart-view-toggles {
    justify-content: flex-start;
    margin: 0 0 10px;
    padding: 0;
}

body.dtemp-preview .chart-slider,
body.dtemp-preview .chart-container {
    height: 360px !important;
}

body.dtemp-preview .list-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--preview-module-divider);
}

body.dtemp-preview .list-item .temp-holders {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    width: var(--preview-temp-columns-width) !important;
    gap: 10px;
}

body.dtemp-preview .list-item .list-item-temperature-value {
    width: 100%;
    text-align: center;
}

body.dtemp-preview .list-item:last-child {
    border-bottom: none;
}

body.dtemp-preview .list-item-time,
body.dtemp-preview .list-item-temperature-value {
    color: var(--preview-module-text);
}

body.dtemp-preview .prediction-item {
    border-left-color: rgba(39, 157, 132, 0.68);
    background: rgba(39, 157, 132, 0.08);
}

body.dtemp-preview .prediction-time,
body.dtemp-preview .prediction-value {
    color: var(--preview-module-muted) !important;
}

body.dtemp-preview .pagination-info {
    min-height: var(--preview-pager-button-size);
    margin: 12px 0 0;
    padding: 9px calc(var(--preview-pager-button-size) + 14px) 0;
    border-top-color: var(--preview-module-divider);
}

body.dtemp-preview .date-label {
    color: var(--preview-module-muted);
}

body.dtemp-preview .pagination-dot {
    background: #c2cfcc;
    border-color: #b4c2bf;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.dtemp-preview .pagination-dot.active {
    background: #279d84;
    border-color: #279d84;
    box-shadow: 0 0 0 4px rgba(39, 157, 132, 0.16);
}

body.dtemp-preview .pagination-arrow {
    top: auto;
    bottom: 12px;
    width: var(--preview-pager-button-size);
    height: var(--preview-pager-button-size);
    transform: none;
    border-radius: 8px;
    border-color: var(--preview-control-border);
    background: var(--preview-control-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.dtemp-preview .pagination-arrow:hover {
    background: var(--preview-control-bg-hover);
    border-color: var(--preview-accent-border);
    transform: translateY(-1px);
}

body.dtemp-preview .pagination-arrow:active {
    transform: translateY(0);
}

body.dtemp-preview .pagination-arrow-left {
    left: 16px;
}

body.dtemp-preview .pagination-arrow-right {
    right: 16px;
}

body.dtemp-preview .pagination-arrow img {
    filter: none;
    opacity: 0.74;
}

body.dtemp-preview .loading-indicator {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid var(--preview-loading-border);
    border-radius: 8px;
    background: var(--preview-loading-bg);
    box-shadow: 0 14px 28px rgba(23, 35, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: var(--preview-loading-text);
    font-size: 0.9rem;
    justify-content: space-between;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.dtemp-preview .loading-text {
    color: var(--preview-loading-text);
    font-family: 'InfraMedium', 'InfraRegular', monospace;
}

body.dtemp-preview .loading-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: var(--preview-loading-spinner-track);
    border-top-color: var(--preview-loading-spinner-fill);
}

body.dtemp-preview .model-modal.show,
body.dtemp-preview .modal.show,
body.dtemp-preview .export-modal.show {
    background-color: rgba(9, 15, 17, 0.34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body.dtemp-preview .model-modal-content,
body.dtemp-preview .modal-content,
body.dtemp-preview .export-modal-content {
    border: 1px solid var(--preview-module-border) !important;
    border-radius: 8px !important;
    background: var(--preview-module-bg) !important;
    box-shadow: var(--preview-module-shadow) !important;
    color: var(--preview-module-text) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.dtemp-preview .model-modal h2,
body.dtemp-preview .model-modal h3,
body.dtemp-preview .export-modal h2,
body.dtemp-preview .settings-modal-header h2,
body.dtemp-preview .changelog-modal-header h2,
body.dtemp-preview .settings-section-title,
body.dtemp-preview .model-features h3 {
    color: var(--preview-module-text) !important;
}

body.dtemp-preview .model-modal-header,
body.dtemp-preview .settings-modal-header,
body.dtemp-preview .changelog-modal-header,
body.dtemp-preview .settings-modal-footer,
body.dtemp-preview .changelog-modal-footer,
body.dtemp-preview .model-metadata p,
body.dtemp-preview .notification-details {
    border-color: var(--preview-module-divider) !important;
}

body.dtemp-preview .model-modal p,
body.dtemp-preview .model-modal li,
body.dtemp-preview .model-info-section p,
body.dtemp-preview .model-features li,
body.dtemp-preview .settings-label,
body.dtemp-preview .settings-radio-text,
body.dtemp-preview .settings-checkbox-text,
body.dtemp-preview .settings-unit,
body.dtemp-preview .export-form-group label,
body.dtemp-preview .export-info,
body.dtemp-preview .export-info li {
    color: var(--preview-module-text) !important;
}

body.dtemp-preview .settings-help,
body.dtemp-preview .model-loading,
body.dtemp-preview .model-switch,
body.dtemp-preview .export-progress,
body.dtemp-preview .export-status {
    color: var(--preview-module-muted) !important;
}

body.dtemp-preview .model-modal-close,
body.dtemp-preview .close-modal,
body.dtemp-preview .export-modal-close {
    border: 1px solid var(--preview-control-border);
    border-radius: 8px;
    background: var(--preview-control-bg);
    color: var(--preview-module-text) !important;
}

body.dtemp-preview .model-modal-close:hover,
body.dtemp-preview .close-modal:hover,
body.dtemp-preview .export-modal-close:hover {
    background: var(--preview-control-bg-hover);
    color: var(--preview-module-text) !important;
}

body.dtemp-preview .settings-input,
body.dtemp-preview .export-form-group select,
body.dtemp-preview .export-form-group input[type="date"],
body.dtemp-preview #feature-list,
body.dtemp-preview .export-info {
    border: 1px solid var(--preview-control-border) !important;
    border-radius: 8px !important;
    background: var(--preview-control-bg) !important;
    color: var(--preview-module-text) !important;
}

body.dtemp-preview .settings-input:focus,
body.dtemp-preview .export-form-group select:focus,
body.dtemp-preview .export-form-group input[type="date"]:focus {
    border-color: var(--preview-accent-border) !important;
    box-shadow: 0 0 0 2px var(--preview-accent-bg) !important;
    background: var(--preview-control-bg-hover) !important;
}

body.dtemp-preview .settings-radio-label:hover,
body.dtemp-preview .settings-checkbox-label:hover,
body.dtemp-preview .export-form-group select:hover,
body.dtemp-preview .export-form-group input[type="date"]:hover {
    background: var(--preview-control-bg-hover) !important;
}

body.dtemp-preview .settings-radio,
body.dtemp-preview .settings-checkbox {
    border-color: var(--preview-control-border) !important;
}

body.dtemp-preview .settings-radio:checked,
body.dtemp-preview .settings-checkbox:checked {
    border-color: var(--preview-accent-border) !important;
    background: var(--preview-accent-bg) !important;
}

body.dtemp-preview .settings-save-btn,
body.dtemp-preview .settings-reset-btn,
body.dtemp-preview .export-btn,
body.dtemp-preview .export-action-btn,
body.dtemp-preview #toggle-feature-names {
    border: 1px solid var(--preview-control-border) !important;
    border-radius: 8px !important;
    background: var(--preview-control-bg) !important;
    color: var(--preview-module-text) !important;
    box-shadow: none !important;
}

body.dtemp-preview .settings-save-btn:hover,
body.dtemp-preview .settings-reset-btn:hover,
body.dtemp-preview .export-btn:hover,
body.dtemp-preview .export-action-btn:hover,
body.dtemp-preview #toggle-feature-names:hover {
    border-color: var(--preview-accent-border) !important;
    background: var(--preview-control-bg-hover) !important;
    transform: translateY(-1px);
}

body.dtemp-preview .model-error,
body.dtemp-preview .settings-alert-error {
    border: 1px solid rgba(173, 44, 44, 0.46);
    background: rgba(224, 75, 75, 0.18);
    color: #6b1010;
}

body.dtemp-preview.dtemp-preview-modules-dark .model-error,
body.dtemp-preview.dtemp-preview-modules-dark .settings-alert-error {
    border-color: rgba(244, 127, 117, 0.58);
    background: rgba(244, 127, 117, 0.16);
    color: #ffe4e1;
}

body.dtemp-preview footer,
body.dtemp-preview a {
    color: #435657;
}

body.dtemp-preview a:hover {
    color: #172326;
}

@media (max-width: 900px) {
    body.dtemp-preview .modules {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chart"
            "predictions"
            "buttons"
            "day"
            "week";
    }

    body.dtemp-preview .temperature-overview {
        grid-template-columns: 1fr;
        grid-template-areas:
            "values"
            "labels"
            "stats";
    }

    body.dtemp-preview .threshold-info {
        padding: 14px 0 0;
        border-left: none;
        border-top: 1px solid var(--preview-module-divider);
    }

    body.dtemp-preview .chart-module {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    body.dtemp-preview .top-bar {
        padding-top: 10px;
    }

    body.dtemp-preview .inner-top-bar {
        width: calc(100% - 20px) !important;
        padding: 10px;
        gap: 8px;
    }

    body.dtemp-preview .loading-status-region {
        width: calc(100% - 20px);
        grid-template-columns: 1fr;
    }

    body.dtemp-preview .site-preview-toggle-text {
        display: none;
    }

    body.dtemp-preview .main-content {
        padding: 0 10px 22px;
    }

    body.dtemp-preview .temperature-overview,
    body.dtemp-preview .module {
        padding: 14px;
    }

    body.dtemp-preview .temp-value-holders {
        font-size: 1.7rem;
    }

    body.dtemp-preview .chart-slider,
    body.dtemp-preview .chart-container {
        height: 300px !important;
    }

    body.dtemp-preview .buttons-module {
        display: none !important;
    }

    body.dtemp-preview .list-item .temp-holders {
        width: var(--preview-temp-columns-width) !important;
    }
}