:root {
    --theme-speed: 260ms;
}

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body,
header,
.summary,
.housemap,
.housemap-shell,
.panel,
.help section,
.login-card,
.sensor .label,
.tip,
.stats div,
.tabs button,
nav button,
button,
input {
    transition:
        color var(--theme-speed) ease,
        background-color var(--theme-speed) ease,
        border-color var(--theme-speed) ease,
        box-shadow var(--theme-speed) ease,
        filter var(--theme-speed) ease,
        transform var(--theme-speed) ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 5px 11px 5px 6px;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    color: #334155;
    background: linear-gradient(135deg, #ffffff, #edf3ff);
    box-shadow: 0 6px 18px #1e3a5f12;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .01em;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px #2563eb20;
}

.theme-toggle-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #334155, #0f172a);
    box-shadow: 0 4px 11px #0f172a38;
    font-size: 16px;
    line-height: 1;
}

.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5;
}

html[data-theme="dark"] body {
    color: #e8f2ff;
    background-color: #050711;
    background-image:
        radial-gradient(circle at 12% 6%, #183a6875 0, transparent 29%),
        radial-gradient(circle at 87% 14%, #5b21b655 0, transparent 27%),
        radial-gradient(circle at 55% 100%, #0e749044 0, transparent 34%),
        linear-gradient(145deg, #050711 0%, #080d1d 42%, #0a1023 72%, #050711 100%);
    background-attachment: fixed;
    background-size: 140% 140%, 135% 135%, 150% 150%, 100% 100%;
    animation: midnight-drift 18s ease-in-out infinite alternate;
}

html[data-theme="dark"] header {
    background: linear-gradient(90deg, #090e1bea, #0d1424e8 55%, #10172bea);
    border-bottom-color: #5cc8ff2e;
    box-shadow:
        0 13px 38px #0008,
        inset 0 -1px 0 #7dd3fc15;
    backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="dark"] .brand {
    filter: drop-shadow(0 0 13px #38bdf83d);
}

html[data-theme="dark"] .brand b {
    color: transparent;
    background: linear-gradient(90deg, #f8fbff, #8fddff 58%, #c4b5fd);
    background-clip: text;
    -webkit-background-clip: text;
}

html[data-theme="dark"] .brand small,
html[data-theme="dark"] .sys small,
html[data-theme="dark"] .summary small,
html[data-theme="dark"] .maptitle,
html[data-theme="dark"] .legend,
html[data-theme="dark"] .panelhead small,
html[data-theme="dark"] .reading small,
html[data-theme="dark"] .reading em,
html[data-theme="dark"] .stats small,
html[data-theme="dark"] .all-history-head p,
html[data-theme="dark"] .all-history-status {
    color: #8fa8c5;
}

html[data-theme="dark"] nav button {
    color: #96a9c3;
    background: transparent;
    border: 1px solid transparent;
}

html[data-theme="dark"] nav button:hover {
    color: #eaf7ff;
    background: #17233ba8;
    border-color: #70d2ff22;
}

html[data-theme="dark"] nav button.active {
    color: #dff7ff;
    background: linear-gradient(135deg, #0ea5e929, #6366f12e);
    border-color: #67d4ff45;
    box-shadow:
        inset 0 0 16px #38bdf81a,
        0 0 20px #2563eb1c;
}

html[data-theme="dark"] .theme-toggle {
    color: #d9edff;
    background: linear-gradient(135deg, #151f35e8, #10182be8);
    border-color: #68d5ff45;
    box-shadow:
        0 8px 28px #0008,
        inset 0 1px 0 #ffffff12,
        0 0 20px #4338ca1e;
}

html[data-theme="dark"] .theme-toggle:hover {
    border-color: #8be2ff88;
    box-shadow:
        0 11px 32px #0009,
        0 0 26px #38bdf832;
}

html[data-theme="dark"] .theme-toggle-icon {
    color: #172033;
    background: radial-gradient(circle at 35% 30%, #fff8c7, #fbbf24 55%, #f97316);
    box-shadow:
        0 0 13px #fbbf247d,
        0 0 28px #f59e0b38;
    transform: rotate(180deg);
}

html[data-theme="dark"] .logout-form button {
    color: #75d7ff;
}

html[data-theme="dark"] .dot.green {
    box-shadow:
        0 0 8px #22c55e,
        0 0 18px #22c55e80;
    animation: status-breathe 2.4s ease-in-out infinite;
}

html[data-theme="dark"] .dot.orange {
    box-shadow:
        0 0 8px #f59e0b,
        0 0 18px #f59e0b70;
}

html[data-theme="dark"] .dot.red {
    box-shadow:
        0 0 8px #ef4444,
        0 0 18px #ef444470;
}

html[data-theme="dark"] .summary {
    background:
        linear-gradient(155deg, #121c31e8, #0b1223e8),
        radial-gradient(circle at top left, #2563eb2c, transparent 60%);
    border-color: #74d4ff2e;
    box-shadow:
        0 22px 55px #0008,
        inset 0 1px 0 #ffffff12,
        0 0 36px #1d4ed81c;
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .summary div {
    color: #dcecff;
    text-shadow: 0 0 18px #7dd3fc26;
}

html[data-theme="dark"] .summary hr {
    border-top-color: #7dd3fc1c;
}

html[data-theme="dark"] .summary button {
    color: #d9f3ff;
    background: linear-gradient(135deg, #17243d, #101a30);
    border-color: #59cdf748;
    box-shadow: inset 0 1px 0 #ffffff10;
}

html[data-theme="dark"] .maptitle b {
    color: #eaf5ff;
    text-shadow: 0 0 20px #38bdf836;
}

html[data-theme="dark"] .mapcontrols button,
html[data-theme="dark"] .closemain,
html[data-theme="dark"] .login-form button {
    color: #f4fbff;
    background: linear-gradient(135deg, #0ea5e9, #4f46e5 58%, #7c3aed);
    border-color: #8bdfff75;
    box-shadow:
        0 8px 24px #2563eb4d,
        inset 0 1px 0 #ffffff40;
}

html[data-theme="dark"] .mapcontrols button:hover,
html[data-theme="dark"] .closemain:hover,
html[data-theme="dark"] .login-form button:hover {
    transform: translateY(-1px);
    filter: brightness(1.13);
    box-shadow:
        0 11px 30px #2563eb70,
        0 0 24px #22d3ee32;
}

html[data-theme="dark"] .mapcontrols button[aria-pressed="true"] {
    color: #16110b;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    border-color: #fed7aa;
    box-shadow:
        0 8px 28px #f973164f,
        0 0 23px #fbbf2432;
}

html[data-theme="dark"] .housemap {
    background: #070c16;
    border-color: #65d9ff52;
    box-shadow:
        0 28px 80px #000b,
        0 0 0 1px #60a5fa12,
        0 0 48px #2563eb25,
        inset 0 0 55px #030712;
}

@media (max-width: 800px) {
    html[data-theme="dark"] .housemap-shell {
        background: #070c16;
        border-color: #65d9ff52;
        box-shadow:
            0 28px 80px #000b,
            0 0 0 1px #60a5fa12,
            0 0 48px #2563eb25,
            inset 0 0 55px #030712;
    }

    html[data-theme="dark"] .housemap {
        border: 0;
        box-shadow: none;
    }
}

html[data-theme="dark"] .housemap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 34px #020617c7,
        inset 0 0 0 1px #a5f3fc1a;
}

html[data-theme="dark"] .housemap > img {
    filter:
        invert(.9)
        hue-rotate(175deg)
        saturate(.78)
        brightness(.72)
        contrast(1.18);
    opacity: .92;
}

html[data-theme="dark"] .sensor {
    filter: drop-shadow(0 7px 10px #000a);
}

html[data-theme="dark"] .sensor .face {
    filter: drop-shadow(0 0 9px #7dd3fc74);
}

html[data-theme="dark"] .sensor .tube {
    border-color: #dff8ff;
    background: #19263b;
    box-shadow:
        0 0 0 1px #7dd3fc66,
        0 0 16px #38bdf870,
        0 5px 12px #000a;
}

html[data-theme="dark"] .sensor .tube i {
    background: linear-gradient(180deg, #fde047, #fb923c 60%, #ef4444);
    box-shadow: 0 0 11px #f97316a3;
}

html[data-theme="dark"] .sensor .label {
    color: #e8f6ff;
    background: linear-gradient(145deg, #101b2de8, #08111ee8);
    border: 1px solid #81dcff42;
    box-shadow:
        0 10px 25px #000a,
        inset 0 1px 0 #ffffff12;
    backdrop-filter: blur(12px) saturate(140%);
}

html[data-theme="dark"] .sensor.online .label {
    box-shadow:
        0 10px 25px #000a,
        0 0 17px #22c55e3b,
        inset 0 1px 0 #ffffff12;
}

html[data-theme="dark"] .sensor.delayed .label {
    box-shadow:
        0 10px 25px #000a,
        0 0 17px #f59e0b40,
        inset 0 1px 0 #ffffff12;
}

html[data-theme="dark"] .sensor.offline .label {
    box-shadow:
        0 10px 25px #000a,
        0 0 15px #ef444438;
}

html[data-theme="dark"] .label b {
    color: #fed66f;
    text-shadow: 0 0 12px #f59e0b75;
}

html[data-theme="dark"] .label span {
    color: #72dcff;
    text-shadow: 0 0 10px #0ea5e95c;
}

html[data-theme="dark"] .label small {
    color: #9fb3cb;
}

html[data-theme="dark"] .tip {
    color: #b9ddf4;
    background: linear-gradient(135deg, #0d2236d9, #111a32d9);
    border-color: #55d5ff35;
    box-shadow: inset 0 1px 0 #ffffff0d;
}

html[data-theme="dark"] .sensor-edit-actions {
    background: linear-gradient(135deg, #32151be0, #1b1019e8);
    border-color: #fb71856b;
    box-shadow: inset 0 1px 0 #ffffff0c;
}

html[data-theme="dark"] .sensor-edit-actions strong {
    color: #fda4af;
}

html[data-theme="dark"] .sensor-edit-actions p {
    color: #b9c9dc;
}

html[data-theme="dark"] .remove-gauge-button {
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #be123c);
    border-color: #fda4af7a;
    box-shadow: 0 8px 22px #e11d4840;
}

html[data-theme="dark"] .remove-gauge-button:hover {
    filter: brightness(1.12);
    box-shadow: 0 10px 28px #e11d485c;
}

html[data-theme="dark"] .backdrop,
html[data-theme="dark"] .help {
    background: #01040ac7;
    backdrop-filter: blur(12px) saturate(130%);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .help section {
    color: #e7f2ff;
    background:
        radial-gradient(circle at 100% 0, #4f46e528, transparent 30%),
        radial-gradient(circle at 0 75%, #0891b21c, transparent 32%),
        linear-gradient(160deg, #111a2d 0%, #090f1d 55%, #070c17 100%);
    border-left: 1px solid #6bdcff42;
    box-shadow:
        -25px 0 75px #000b,
        inset 1px 0 0 #ffffff0c,
        0 0 42px #4338ca25;
}

html[data-theme="dark"] .panelhead,
html[data-theme="dark"] .all-history-head {
    border-bottom-color: #7dd3fc20;
}

html[data-theme="dark"] .panelhead h2,
html[data-theme="dark"] .all-history-head h2,
html[data-theme="dark"] .help h2,
html[data-theme="dark"] .login-card h1 {
    color: transparent;
    background: linear-gradient(90deg, #f8fbff, #79dcff 60%, #c4b5fd);
    background-clip: text;
    -webkit-background-clip: text;
}

html[data-theme="dark"] .x {
    color: #9bb6d2;
}

html[data-theme="dark"] .x:hover {
    color: #fff;
    text-shadow: 0 0 12px #7dd3fc;
}

html[data-theme="dark"] .reading > b {
    color: #ffc857;
    text-shadow: 0 0 20px #f59e0b65;
}

html[data-theme="dark"] .reading > strong {
    color: #68dbff;
    text-shadow: 0 0 16px #0ea5e950;
}

html[data-theme="dark"] .tabs button {
    color: #9bb1ca;
    background: #111a2aaa;
    border-color: #7892b522;
}

html[data-theme="dark"] .tabs button:hover {
    color: #effaff;
    background: #182841;
    border-color: #6bdcff5c;
}

html[data-theme="dark"] .tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, #0284c7, #4f46e5);
    border-color: #7dd3fc73;
    box-shadow:
        0 6px 18px #2563eb50,
        inset 0 1px 0 #ffffff25;
}

html[data-theme="dark"] .chart {
    color: #dceeff;
}

html[data-theme="dark"] .stats div {
    background: linear-gradient(145deg, #142035a8, #0b1323a8);
    border-color: #75d8ff24;
    box-shadow: inset 0 1px 0 #ffffff0c;
}

html[data-theme="dark"] .stats b {
    color: #76dcff;
    text-shadow: 0 0 13px #38bdf853;
}

html[data-theme="dark"] .help p {
    color: #afc2d8;
}

html[data-theme="dark"] .login-page {
    background-color: #040610;
    background-image:
        radial-gradient(circle at 20% 18%, #07598585 0, transparent 32%),
        radial-gradient(circle at 78% 20%, #6d28d970 0, transparent 31%),
        radial-gradient(circle at 52% 92%, #0f766e52 0, transparent 36%),
        linear-gradient(145deg, #03050c, #0a1021 52%, #060914);
}

html[data-theme="dark"] .login-card {
    color: #e9f4ff;
    background:
        linear-gradient(150deg, #16213ad9, #090f1ddd),
        radial-gradient(circle at top right, #7c3aed32, transparent 45%);
    border-color: #83dcff4a;
    box-shadow:
        0 38px 100px #000c,
        0 0 65px #4338ca30,
        inset 0 1px 0 #ffffff1a;
    backdrop-filter: blur(24px) saturate(140%);
}

html[data-theme="dark"] .login-brand {
    filter:
        drop-shadow(0 0 12px #38bdf877)
        drop-shadow(0 0 27px #7c3aed45);
}

html[data-theme="dark"] .login-eyebrow,
html[data-theme="dark"] .all-history-head small {
    color: #6edcff;
    text-shadow: 0 0 14px #0ea5e968;
}

html[data-theme="dark"] .login-intro {
    color: #a5bad1;
}

html[data-theme="dark"] .login-form label {
    color: #cfe3f7;
}

html[data-theme="dark"] .login-form input {
    color: #f1f8ff;
    caret-color: #67e8f9;
    background: #070d19c9;
    border-color: #6384aa50;
    box-shadow: inset 0 1px 8px #0005;
}

html[data-theme="dark"] .login-form input:focus {
    border-color: #67d8ff;
    box-shadow:
        0 0 0 3px #0ea5e926,
        0 0 22px #2563eb28,
        inset 0 1px 8px #0005;
}

html[data-theme="dark"] .login-error {
    color: #fecaca;
    background: #450a0a70;
    border-color: #f8717152;
    box-shadow: 0 0 18px #ef44441f;
}

html[data-theme="dark"] ::selection {
    color: #fff;
    background: #2563ebad;
}

html[data-theme="dark"] * {
    scrollbar-color: #2b4f72 #080d18;
}

@keyframes midnight-drift {
    0% {
        background-position: 0% 0%, 100% 0%, 50% 100%, 0 0;
    }

    100% {
        background-position: 12% 8%, 88% 10%, 44% 88%, 0 0;
    }
}

@keyframes status-breathe {
    0%,
    100% {
        transform: scale(.92);
        filter: brightness(.9);
    }

    50% {
        transform: scale(1.13);
        filter: brightness(1.25);
    }
}

@media (max-width: 1050px) {
    header {
        gap: 13px;
        padding-right: 16px;
        padding-left: 16px;
    }

    header .brand {
        min-width: 220px;
    }

    header nav button {
        padding-right: 10px;
        padding-left: 10px;
    }

    header .theme-toggle-label {
        display: none;
    }

    header .theme-toggle {
        padding-right: 6px;
    }
}

@media (max-width: 800px) {
    .login-theme-toggle {
        top: 12px;
        right: 12px;
    }

    html[data-theme="dark"] header {
        background: #090f1df2;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}