:root {
    color-scheme: dark;
    --bg: #06101d;
    --bg-deep: #030a13;
    --panel: rgba(12, 27, 43, .82);
    --panel-solid: #0c1b2b;
    --panel-2: rgba(18, 38, 58, .72);
    --line: rgba(166, 202, 218, .13);
    --line-strong: rgba(166, 202, 218, .24);
    --text: #f4f8f5;
    --muted: #8ea5b4;
    --muted-2: #637b8a;
    --mint: #6fffc2;
    --teal: #22d7c7;
    --cyan: #52bfff;
    --violet: #a887ff;
    --yellow: #f8d573;
    --orange: #ff9a6b;
    --red: #ff6f7e;
    --shadow: 0 22px 70px rgba(0, 0, 0, .28);
    --radius: 22px;
    --sidebar: 244px;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #edf4f2;
    --bg-deep: #dfeae7;
    --panel: rgba(255, 255, 255, .82);
    --panel-solid: #fff;
    --panel-2: rgba(245, 250, 249, .9);
    --line: rgba(25, 67, 72, .12);
    --line-strong: rgba(25, 67, 72, .23);
    --text: #10272d;
    --muted: #5b7479;
    --muted-2: #789095;
    --shadow: 0 24px 70px rgba(36, 73, 75, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 73% 14%, rgba(34, 215, 199, .08), transparent 30%),
        linear-gradient(145deg, var(--bg-deep), var(--bg) 48%, #071522);
    color: var(--text);
    font-family: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: "tnum" 1, "ss01" 1;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 3px;
}
.hidden { display: none !important; }
.pet-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.pet-picker select { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); color: var(--text); font: inherit; }
.data-error { border-color: var(--orange); gap: 16px; flex-wrap: wrap; }
.companionship-panel, .configuration-panel { padding: 24px; margin: 20px 0; }
.companionship-panel p, .configuration-panel p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.social-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0; }
.social-metrics span { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 12px; }
.social-metrics b { color: var(--text); font-size: 21px; }
.social-metrics i { width: 9px; height: 9px; border-radius: 50%; }
.together { background: var(--mint); }.apart { background: var(--violet); }.unknown { background: var(--muted-2); }
.social-hours { display: flex; gap: 4px; min-height: 85px; align-items: end; }
.social-hour { flex: 1; min-width: 0; color: var(--muted); font-size: 9px; text-align: center; }
.social-hour>div { height: 60px; display: flex; flex-direction: column-reverse; overflow: hidden; border-radius: 5px; margin-bottom: 8px; background: var(--line); }
.settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin: 18px 0; }
.settings-fields label { display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.settings-fields input { border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--text); background: var(--panel-solid); min-width: 0; }
.settings-fields input[type=checkbox] { justify-self: start; width: 20px; height: 20px; }
.configuration-panel button:disabled { opacity: .45; cursor: not-allowed; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .18; pointer-events: none; }
.ambient-one { width: 36vw; height: 36vw; right: -12vw; top: 3vh; background: var(--teal); }
.ambient-two { width: 24vw; height: 24vw; left: 12vw; bottom: -12vw; background: var(--violet); opacity: .1; }

.app-shell { min-height: 100vh; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    display: flex;
    width: var(--sidebar);
    flex-direction: column;
    padding: 30px 18px 20px;
    border-right: 1px solid var(--line);
    background: rgba(4, 14, 25, .84);
    backdrop-filter: blur(24px);
}
[data-theme="light"] .sidebar { background: rgba(242, 249, 247, .88); }
.brand { display: flex; align-items: center; gap: 13px; padding: 0 9px 33px; color: var(--text); text-decoration: none; }
.brand > span:last-child { display: flex; align-items: baseline; font-size: 20px; letter-spacing: -.6px; }
.brand strong { font-weight: 760; }
.brand small { color: var(--mint); font-size: 20px; font-weight: 450; }
.brand-mark { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(111, 255, 194, .45); border-radius: 15px; background: linear-gradient(145deg, rgba(111,255,194,.22), rgba(82,191,255,.06)); box-shadow: inset 0 0 24px rgba(111,255,194,.08); }
.cat-face { position: relative; z-index: 2; color: var(--mint); font-weight: 800; }
.cat-ear { position: absolute; top: 6px; width: 9px; height: 9px; border: 1px solid rgba(111, 255, 194, .55); background: var(--panel-solid); transform: rotate(45deg); }
.cat-ear.left { left: 8px; }.cat-ear.right { right: 8px; }

.main-nav { display: flex; flex: 1; flex-direction: column; gap: 7px; }
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 13px;
    padding: 12px 14px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    text-align: left;
    transition: .2s ease;
}
.nav-item::before { position: absolute; left: -18px; width: 3px; height: 24px; border-radius: 0 6px 6px 0; background: var(--mint); content: ""; opacity: 0; transform: scaleY(.3); transition: .2s ease; }
.nav-item:hover { background: rgba(111, 255, 194, .06); color: var(--text); }
.nav-item.active { background: linear-gradient(90deg, rgba(111, 255, 194, .13), rgba(111,255,194,.03)); color: var(--mint); }
.nav-item.active::before { opacity: 1; transform: none; }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; font-size: 18px; font-weight: 600; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 5px 0; border-top: 1px solid var(--line); }
.data-quality-mini { display: flex; align-items: center; gap: 9px; min-width: 0; }
.data-quality-mini > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.data-quality-mini small { color: var(--muted-2); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.data-quality-mini strong { overflow: hidden; max-width: 105px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quality-ring { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) var(--quality, 0%), rgba(255,255,255,.08) 0); }
.quality-ring::before { position: absolute; width: 31px; height: 31px; border-radius: 50%; background: var(--panel-solid); content: ""; }
.quality-ring b { position: relative; z-index: 1; font-size: 10px; }
.icon-button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); color: var(--mint); }

.main-content { width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); padding: 0 38px 24px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; min-height: 96px; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, var(--bg) 68%, transparent); }
.context-title h1 { margin: 3px 0 0; font-size: 24px; letter-spacing: -.7px; }
.eyebrow { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.sync-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.sync-state i, .live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }
.avatar-button { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(111,255,194,.35); border-radius: 50%; background: linear-gradient(145deg, rgba(111,255,194,.25), rgba(82,191,255,.1)); font-weight: 800; cursor: pointer; }
.mobile-brand { display: none; align-items: center; gap: 12px; }

.notice { display: flex; align-items: center; justify-content: space-between; margin: -3px 0 22px; padding: 10px 15px; border: 1px solid rgba(248,213,115,.24); border-radius: 12px; background: rgba(248,213,115,.08); color: var(--yellow); font-size: 12px; }
.notice button { border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.view { display: none; max-width: 1520px; margin: 0 auto; }
.view.active { display: block; }
.reveal { animation: rise .45s both ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, var(--panel), rgba(8, 21, 35, .65)); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
[data-theme="light"] .panel { background: linear-gradient(150deg, var(--panel), rgba(248,252,251,.85)); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.panel-heading h3, .panel h3 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.35px; }
.source-chip, .confidence-chip, .map-accuracy { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 10px; }

.hero-card { position: relative; display: grid; min-height: 300px; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); overflow: hidden; background: radial-gradient(circle at 82% 42%, rgba(34,215,199,.14), transparent 26%), linear-gradient(120deg, rgba(13,34,49,.98), rgba(8,24,39,.85)); }
[data-theme="light"] .hero-card { background: radial-gradient(circle at 82% 42%, rgba(34,215,199,.18), transparent 28%), linear-gradient(120deg, rgba(255,255,255,.98), rgba(236,247,244,.9)); }
.hero-card::after { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 34px 34px; content: ""; mask-image: linear-gradient(to right, transparent, #000); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 40px 44px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(111,255,194,.25); border-radius: 99px; background: rgba(111,255,194,.07); color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.hero-kicker { margin: 22px 0 6px; color: var(--mint); font-size: 13px; font-weight: 650; }
.hero-copy h2 { max-width: 680px; margin: 0; font-size: clamp(33px, 4.1vw, 59px); font-weight: 710; letter-spacing: -2.7px; line-height: 1.02; }
.hero-copy > p:not(.hero-kicker) { max-width: 700px; margin: 16px 0 25px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-meta span { display: flex; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 11px; }
.hero-meta b { color: var(--text); font-weight: 650; }
.buddy-orbit { position: relative; z-index: 2; display: grid; min-height: 300px; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(111,255,194,.16); border-radius: 50%; }
.orbit-a { width: 220px; height: 220px; animation: orbitPulse 4s infinite ease-in-out; }
.orbit-b { width: 150px; height: 150px; border-style: dashed; animation: spin 18s linear infinite; }
@keyframes orbitPulse { 50% { opacity: .45; transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
.buddy-avatar { position: relative; display: grid; width: 104px; height: 104px; place-items: center; border: 1px solid rgba(111,255,194,.5); border-radius: 38% 38% 44% 44%; background: linear-gradient(145deg, #173e43, #0c2635); box-shadow: 0 0 50px rgba(111,255,194,.16); }
.buddy-avatar b { color: var(--mint); font-size: 38px; }
.buddy-avatar small { position: absolute; bottom: -22px; color: var(--mint); font-size: 8px; letter-spacing: 2px; }
.avatar-ear { position: absolute; top: -14px; width: 35px; height: 35px; border: 1px solid rgba(111,255,194,.5); background: #14383e; transform: rotate(45deg); }
.avatar-ear.left { left: 8px; border-radius: 8px 3px 8px 3px; }.avatar-ear.right { right: 8px; border-radius: 3px 8px 3px 8px; }
.orbit-label { position: absolute; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-solid); color: var(--muted); font-size: 10px; }
.label-room { top: 55px; right: 26px; }.label-battery { bottom: 47px; left: 17px; }

.score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.score-card { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 17px; box-shadow: none; }
.score-card > div:last-child { min-width: 0; }
.score-card small { color: var(--muted-2); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.score-card strong { display: block; overflow: hidden; margin-top: 3px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.score-card p { overflow: hidden; margin: 3px 0 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.score-ring { --score: 0%; position: relative; display: grid; width: 53px; height: 53px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--score-color, var(--mint)) var(--score), rgba(255,255,255,.07) 0); }
.score-ring::after { position: absolute; width: 43px; height: 43px; border-radius: 50%; background: var(--panel-solid); content: ""; }
.score-ring b { position: relative; z-index: 1; font-size: 13px; }

.cockpit-grid { display: grid; grid-template-columns: 1fr 1fr .82fr; gap: 16px; }
.metric-panel, .battery-glance { min-height: 273px; padding: 22px; }
.delta { padding: 5px 8px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.delta.positive { background: rgba(111,255,194,.09); color: var(--mint); }.delta.neutral { background: rgba(82,191,255,.09); color: var(--cyan); }.delta.negative { background: rgba(255,111,126,.09); color: var(--red); }
.metric-split { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 7px; }
.metric-split > div:first-child { display: flex; align-items: baseline; gap: 7px; }
.mega-number { font-size: 45px; letter-spacing: -2px; }.metric-split span { color: var(--muted); font-size: 11px; }
.radial-progress { --progress: 0%; display: grid; width: 74px; height: 74px; place-content: center; border-radius: 50%; background: radial-gradient(circle, var(--panel-solid) 57%, transparent 59%), conic-gradient(var(--cyan) var(--progress), rgba(255,255,255,.07) 0); text-align: center; }
.radial-progress b { font-size: 15px; }.radial-progress span { display: block; font-size: 8px; text-transform: uppercase; }
.micro-chart { display: block; width: 100%; }
.metric-foot { display: flex; justify-content: space-between; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.metric-foot b { color: var(--text); }
.sleep-total { display: flex; align-items: baseline; gap: 9px; margin: 23px 0 16px; }.sleep-total strong { font-size: 38px; letter-spacing: -1.5px; }.sleep-total span { color: var(--muted); font-size: 11px; }
.sleep-bar { display: flex; height: 10px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.06); }.sleep-bar span { transition: width .5s; }.sleep-bar .night { background: linear-gradient(90deg, var(--violet), var(--cyan)); }.sleep-bar .day { background: linear-gradient(90deg, var(--cyan), var(--mint)); }
.sleep-legend { display: flex; justify-content: space-between; margin: 10px 0 24px; color: var(--muted); font-size: 10px; }.sleep-legend span { display: flex; align-items: center; gap: 5px; }.sleep-legend i { width: 6px; height: 6px; border-radius: 50%; }.night-dot { background: var(--violet); }.day-dot { background: var(--mint); }.sleep-legend b { color: var(--text); }
.battery-display { display: flex; align-items: center; gap: 15px; margin: 27px 0 12px; }.battery-display strong { font-size: 33px; }
.battery-shell { position: relative; width: 94px; height: 38px; padding: 4px; border: 2px solid var(--line-strong); border-radius: 9px; }.battery-shell::after { position: absolute; top: 10px; right: -7px; width: 5px; height: 14px; border-radius: 0 4px 4px 0; background: var(--line-strong); content: ""; }.battery-shell span { display: block; width: 0; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--mint)); transition: width .6s; }
.battery-forecast { color: var(--muted); font-size: 11px; }.battery-forecast b { color: var(--text); }.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; }.status-dot.ok { background: var(--mint); }
.text-button { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 8px; padding: 9px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }.text-button:hover { color: var(--mint); }

.day-stream { margin-top: 16px; padding: 22px; }
.legend-inline { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 9px; }.legend-inline span { display: flex; align-items: center; gap: 5px; }.legend-inline i { width: 7px; height: 7px; border-radius: 50%; }.legend-inline .sleep { background: var(--violet); }.legend-inline .active { background: var(--mint); }.legend-inline .outside { background: var(--cyan); }
.timeline-track { display: flex; height: 38px; margin-top: 22px; overflow: hidden; border: 3px solid rgba(255,255,255,.025); border-radius: 12px; background: rgba(255,255,255,.035); }
.timeline-segment { position: relative; min-width: 5px; border: 0; cursor: pointer; transition: filter .2s, transform .2s; }.timeline-segment:hover, .timeline-segment.selected { z-index: 2; filter: brightness(1.25); transform: scaleY(1.16); }.timeline-segment.sleep { background: linear-gradient(90deg, rgba(168,135,255,.72), rgba(82,191,255,.66)); }.timeline-segment.rest { background: rgba(82,191,255,.25); }.timeline-segment.active { background: linear-gradient(90deg, var(--teal), var(--mint)); }.timeline-segment.outside { background: linear-gradient(90deg, #328fcc, var(--cyan)); }
.timeline-hours { display: flex; justify-content: space-between; margin-top: 7px; color: var(--muted-2); font-size: 8px; }
.timeline-segment { flex-shrink: 0; min-width: 0; }
.timeline-segment.unknown { background: repeating-linear-gradient(135deg, #24313d 0, #24313d 4px, #192630 4px, #192630 8px); }
.timeline-segment.inactive { background: #364954; }
.timeline-note { color: var(--muted); font-size: 11px; line-height: 1.6; }
.ai-report > p, .insight-card > p, .insight-feature > p { white-space: pre-line; }
.insight-card .evidence-list, .insight-feature .evidence-list { display: grid; gap: 10px; }
.insight-card .evidence-list span, .insight-feature .evidence-list span { font-size: 12px; line-height: 1.7; }
.timeline-detail { margin-top: 15px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 11px; }.timeline-detail b { color: var(--text); }
.insight-layout { display: grid; grid-template-columns: 1.55fr .45fr; gap: 16px; margin-top: 16px; }
.insight-feature { position: relative; overflow: hidden; padding: 28px 30px; background: radial-gradient(circle at 90% 20%, rgba(168,135,255,.15), transparent 28%), linear-gradient(145deg, rgba(17,37,57,.9), rgba(8,22,36,.8)); }.insight-feature::after { position: absolute; right: 30px; bottom: -30px; color: rgba(168,135,255,.08); content: "✦"; font-size: 150px; }.insight-badge { display: inline-flex; padding: 6px 9px; border-radius: 8px; background: rgba(168,135,255,.12); color: var(--violet); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }.insight-feature h3 { position: relative; z-index: 1; max-width: 750px; margin-top: 18px; font-size: 24px; }.insight-feature p { position: relative; z-index: 1; max-width: 780px; color: var(--muted); line-height: 1.6; }.evidence-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.evidence-list span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 9px; }
.compact-room { padding: 22px; }.live-dot { color: var(--mint); font-size: 8px; letter-spacing: 1px; }.room-radar { position: relative; display: grid; height: 116px; place-items: center; }.radar-ring { position: absolute; border: 1px solid rgba(111,255,194,.16); border-radius: 50%; }.radar-ring.r1 { width: 42px; height: 42px; }.radar-ring.r2 { width: 75px; height: 75px; }.radar-ring.r3 { width: 108px; height: 108px; }.radar-cat { position: relative; z-index: 2; display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: var(--mint); color: #07241c; box-shadow: 0 0 24px rgba(111,255,194,.38); }.room-stats { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }.room-stats b { color: var(--text); }

.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 8px 2px 24px; }.page-intro h2 { margin: 5px 0 7px; font-size: clamp(30px, 4vw, 47px); letter-spacing: -2px; }.page-intro p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.55; }
.range-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.range-switch button { padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }.range-switch button.active { background: rgba(111,255,194,.12); color: var(--mint); }
.territory-grid { display: grid; grid-template-columns: 1.55fr .45fr; gap: 16px; }.map-panel { padding: 22px; }.territory-map { position: relative; height: 420px; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: radial-gradient(circle at 46% 55%, rgba(111,255,194,.08), transparent 10%), linear-gradient(135deg, #0a1d2a, #102638); }.territory-map canvas { position: absolute; z-index: 3; width: 100%; height: 100%; }.map-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(rgba(166,202,218,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(166,202,218,.12) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(400px) rotateX(5deg) scale(1.1); }.map-home { position: absolute; z-index: 4; left: 46%; top: 56%; display: grid; width: 37px; height: 37px; place-items: center; border: 2px solid var(--mint); border-radius: 50%; background: #0b2a2d; color: var(--mint); box-shadow: 0 0 30px rgba(111,255,194,.35); }.map-home span { position: absolute; top: 42px; padding: 4px 7px; border-radius: 7px; background: var(--panel-solid); color: var(--text); font-size: 9px; white-space: nowrap; }.map-compass { position: absolute; z-index: 4; top: 14px; right: 14px; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 10px; }.map-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 17px; }.map-footer span { display: flex; flex-direction: column; color: var(--muted); font-size: 9px; }.map-footer b { margin-bottom: 4px; color: var(--text); font-size: 16px; }
.stacked-panels { display: grid; gap: 16px; }.comparison-panel, .pattern-panel { padding: 23px; }.comparison-panel > p, .pattern-panel > p { color: var(--muted); font-size: 11px; line-height: 1.5; }.compare-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 22px; color: var(--muted); font-size: 10px; }.compare-row b { color: var(--text); }.compare-row i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.06); }.compare-row em { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); transition: width .5s; }.pattern-panel > strong { display: block; margin-top: 23px; color: var(--mint); font-size: 28px; letter-spacing: -1px; }.pattern-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 26px; }.pattern-dots i { height: 34px; border-radius: 6px; background: rgba(111,255,194,var(--intensity)); }
.chart-panel { margin-top: 16px; padding: 23px; }.large-chart { display: block; width: 100%; margin-top: 15px; }

.page-intro-actions { display: grid; justify-items: end; gap: 8px; }.page-intro-actions small { color: var(--muted-2); font-size: 9px; }.refresh-all-button { min-width: 245px; }.refresh-all-button:disabled { opacity: .58; cursor: wait; }.live-pill.stale { border-color: rgba(255,154,107,.3); background: rgba(255,154,107,.08); color: var(--orange); }.live-pill.stale i { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(315px, .55fr); gap: 16px; }.floor-panel, .room-budget, .transition-panel, .node-panel, .home-health-context, .wheel-panel { padding: 23px; }.floor-meta { display: grid; justify-items: end; gap: 7px; }.floor-meta small { color: var(--muted-2); font-size: 8px; }.floor-plan { display: grid; min-height: 390px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); grid-auto-rows: minmax(180px, 1fr); gap: 9px; margin-top: 18px; }.floor-room { --heat: 0; position: relative; display: flex; min-width: 0; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 15px; border: 1px solid rgba(82,191,255,calc(.11 + var(--heat) * .22)); border-radius: 15px; background: radial-gradient(circle at 50% 55%, rgba(111,255,194,calc(var(--heat) * .20)), transparent 45%), linear-gradient(145deg, rgba(82,191,255,calc(.025 + var(--heat) * .055)), rgba(255,255,255,.012)); color: var(--muted); font-size: 10px; isolation: isolate; }.floor-room::after { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 22px 22px; content: ""; mask-image: radial-gradient(circle, #000, transparent 74%); }.floor-room.active { border-color: rgba(111,255,194,.6); color: var(--text); box-shadow: inset 0 0 40px rgba(111,255,194,.06), 0 0 35px rgba(111,255,194,.06); }.floor-room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.floor-room-head b { color: var(--text); font-size: 12px; }.floor-room-head span { color: var(--muted-2); font-size: 8px; }.room-heat-core { position: absolute; left: 50%; top: 53%; z-index: -1; width: calc(45px + var(--heat) * 95px); height: calc(45px + var(--heat) * 95px); border-radius: 50%; background: radial-gradient(circle, rgba(111,255,194,calc(.08 + var(--heat) * .28)), rgba(34,215,199,calc(var(--heat) * .09)) 52%, transparent 70%); filter: blur(calc(2px + var(--heat) * 7px)); transform: translate(-50%,-50%); }.floor-room-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: auto; }.floor-room-stats span { padding: 8px; border-radius: 9px; background: rgba(2,10,18,.24); color: var(--muted-2); font-size: 8px; }.floor-room-stats strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 11px; }.floor-room > small { margin-top: 8px; color: var(--muted-2); font-size: 8px; }.floor-buddy { position: absolute; left: 50%; top: 48%; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--mint); color: #07241c; font-weight: 800; box-shadow: 0 0 0 10px rgba(111,255,194,.09), 0 0 38px rgba(111,255,194,.4); animation: buddyPing 2.5s infinite; transform: translate(-50%,-50%); }.floor-buddy::after { position: absolute; width: 59px; height: 59px; border: 1px solid rgba(111,255,194,.3); border-radius: 50%; content: ""; animation: ping 2.5s infinite; }.floor-buddy span { position: absolute; top: 51px; padding: 5px 7px; border-radius: 7px; background: var(--panel-solid); color: var(--text); font-size: 8px; white-space: nowrap; }@keyframes ping { from { opacity: .7; transform: scale(.65); } to { opacity: 0; transform: scale(1.45); } }@keyframes buddyPing { 50% { transform: translate(-50%,calc(-50% - 2px)); } }
.heat-legend { display: grid; grid-template-columns: auto 120px auto 1fr; align-items: center; gap: 8px; margin-top: 13px; color: var(--muted-2); font-size: 8px; }.heat-legend i { height: 6px; border-radius: 9px; background: linear-gradient(90deg, rgba(82,191,255,.12), var(--mint)); }.heat-legend b { justify-self: end; color: var(--muted); font-weight: 500; }.indoor-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 13px; }.indoor-facts span { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }.indoor-facts small, .indoor-facts b { display: block; }.indoor-facts small { color: var(--muted-2); font-size: 8px; }.indoor-facts b { margin-top: 4px; font-size: 10px; }
.budget-bars { margin-top: 22px; }.budget-row { display: grid; grid-template-columns: 112px minmax(60px,1fr) 68px; align-items: center; gap: 9px; margin: 15px 0; color: var(--muted); font-size: 10px; }.budget-label, .budget-value { display: grid; gap: 3px; }.budget-label b, .budget-value b { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.budget-label small, .budget-value small { color: var(--muted-2); font-size: 7px; }.budget-value { justify-items: end; }.budget-row > i { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.06); }.budget-row em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); box-shadow: 0 0 12px rgba(111,255,194,.18); }.budget-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 25px; }.budget-summary span { padding: 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 9px; }.budget-summary b { display: block; margin-bottom: 3px; color: var(--text); font-size: 15px; }.budget-note { margin: 17px 0 0; color: var(--muted-2); font-size: 8px; line-height: 1.55; }
.home-context-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-top: 16px; }.context-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }.context-metrics span, .wheel-stats span { padding: 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 8px; }.context-metrics b, .wheel-stats b { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; }.activity-hours { display: grid; height: 76px; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; margin-top: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.activity-hours i { position: relative; min-height: 3px; height: calc(3px + var(--activity) * 55px); border-radius: 4px 4px 1px 1px; background: linear-gradient(to top, var(--cyan), var(--mint)); opacity: calc(.25 + var(--activity) * .75); }.activity-hours span { position: absolute; top: calc(100% + 5px); left: 50%; color: var(--muted-2); font-size: 6px; transform: translateX(-50%); }.home-health-context > p, .wheel-panel > p, .position-limit { margin: 13px 0 0; color: var(--muted-2); font-size: 8px; line-height: 1.55; }.wheel-visual { display: flex; align-items: center; justify-content: center; gap: 23px; margin: 20px 0; }.wheel-ring { display: grid; width: 88px; height: 88px; place-items: center; border: 6px solid rgba(82,191,255,.18); border-top-color: var(--mint); border-radius: 50%; color: var(--mint); font-size: 28px; }.wheel-visual strong, .wheel-visual small { display: block; }.wheel-visual strong { font-size: 23px; }.wheel-visual small { margin-top: 4px; color: var(--muted-2); font-size: 8px; }.wheel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }.transition-list, .node-list { margin-top: 17px; }.transition-item, .node-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 10px; }.transition-time { width: 40px; flex: 0 0 auto; color: var(--muted-2); font-size: 8px; }.transition-route { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 5px 8px; color: var(--muted); }.transition-route b { color: var(--text); }.transition-route i { color: var(--mint); font-style: normal; }.transition-route small { width: 100%; color: var(--muted-2); font-size: 7px; }.transition-count { padding: 4px 7px; border-radius: 7px; background: rgba(82,191,255,.1); color: var(--cyan); font-size: 8px; white-space: nowrap; }.node-name { display: flex; align-items: center; gap: 8px; }.node-status { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }.node-status.unknown { background: var(--muted-2); box-shadow: none; }.node-meta { color: var(--muted); }.position-limit { padding-top: 14px; border-top: 1px solid var(--line); }.position-limit b { color: var(--text); }

.vital-grid { display: grid; grid-template-columns: 1fr 1fr .75fr; gap: 16px; }.vital-card, .quality-card { padding: 23px; }.vital-value { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }.vital-value strong { font-size: 48px; letter-spacing: -2px; }.vital-value span { color: var(--muted); font-size: 12px; }.vital-card > p { color: var(--mint); font-size: 10px; }.baseline-line { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }.baseline-line b { color: var(--text); }.quality-orb { display: grid; width: 128px; height: 128px; margin: 26px auto 22px; place-content: center; border: 1px solid rgba(111,255,194,.3); border-radius: 50%; background: radial-gradient(circle, rgba(111,255,194,.13), transparent 68%); text-align: center; box-shadow: inset 0 0 35px rgba(111,255,194,.06); }.quality-orb strong { font-size: 29px; }.quality-orb span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.quality-card ul { margin: 0; padding: 0; color: var(--muted); font-size: 9px; line-height: 1.9; list-style: none; }.quality-card li::before { margin-right: 7px; color: var(--mint); content: "✓"; }
.insight-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }.insight-card { padding: 22px; }.insight-card .severity { display: inline-flex; padding: 5px 8px; border-radius: 7px; background: rgba(82,191,255,.09); color: var(--cyan); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; }.insight-card .severity.positive { background: rgba(111,255,194,.09); color: var(--mint); }.insight-card .severity.warning { background: rgba(255,154,107,.1); color: var(--orange); }.insight-card p { color: var(--muted); font-size: 11px; line-height: 1.55; }

.battery-hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }.big-battery { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; min-height: 300px; padding: 30px; }.battery-visual { display: grid; justify-items: center; gap: 17px; }.battery-visual > strong { font-size: 35px; }.battery-giant { position: relative; width: 170px; height: 78px; padding: 7px; border: 3px solid var(--line-strong); border-radius: 16px; }.battery-giant::after { position: absolute; top: 21px; right: -12px; width: 8px; height: 30px; border-radius: 0 7px 7px 0; background: var(--line-strong); content: ""; }.battery-giant span { display: block; width: 0; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--teal), var(--mint)); box-shadow: 0 0 28px rgba(111,255,194,.15); transition: width .6s; }.big-battery h3 { margin: 8px 0; font-size: 32px; letter-spacing: -1.2px; }.big-battery p, .alert-policy p { color: var(--muted); line-height: 1.5; }.forecast-facts { display: flex; gap: 10px; margin-top: 21px; }.forecast-facts span { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 9px; }.forecast-facts b { color: var(--text); }.alert-policy { padding: 27px; }.policy-step { display: flex; align-items: center; gap: 11px; margin-top: 18px; color: var(--muted); font-size: 10px; }.policy-step i { width: 8px; height: 8px; border-radius: 50%; }.policy-step i.warn { background: var(--yellow); }.policy-step i.critical { background: var(--red); }.policy-step i.ok { background: var(--mint); }.policy-step b { color: var(--text); }

.diary-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 16px; }.diary-form, .diary-list-panel { padding: 25px; }.diary-form label, .login-card label { display: grid; gap: 6px; margin-top: 15px; color: var(--muted); font-size: 10px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.diary-form input, .diary-form select, .diary-form textarea, .login-card input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(255,255,255,.035); color: var(--text); resize: vertical; }.diary-form option { background: var(--panel-solid); }.primary-button, .secondary-button { padding: 11px 16px; border: 1px solid rgba(111,255,194,.3); border-radius: 11px; background: linear-gradient(135deg, var(--mint), #3edfb1); color: #062219; font-weight: 750; cursor: pointer; }.diary-form .primary-button { width: 100%; margin-top: 18px; }.secondary-button { background: rgba(111,255,194,.08); color: var(--mint); }.form-message { min-height: 15px; color: var(--muted); font-size: 10px; }.diary-list { margin-top: 14px; }.diary-entry { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }.diary-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgba(82,191,255,.08); color: var(--cyan); }.diary-entry h4 { margin: 0 0 4px; font-size: 12px; }.diary-entry p { margin: 0; color: var(--muted); font-size: 10px; }.diary-value { color: var(--mint); font-size: 12px; }

.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.system-card { padding: 22px; }.system-card-head { display: flex; align-items: center; justify-content: space-between; }.system-card-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }.system-card-head i.offline { background: var(--red); box-shadow: 0 0 9px var(--red); }.system-card-head i.waiting { background: var(--yellow); box-shadow: 0 0 9px var(--yellow); }.system-card strong { display: block; margin: 19px 0 5px; font-size: 19px; }.system-card p { margin: 0; color: var(--muted); font-size: 10px; }.coverage-panel { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 25px; margin-top: 16px; padding: 27px; }.coverage-score { display: grid; width: 130px; height: 130px; place-content: center; border: 1px solid rgba(111,255,194,.3); border-radius: 50%; background: radial-gradient(circle, rgba(111,255,194,.12), transparent); text-align: center; }.coverage-score strong { font-size: 32px; }.coverage-score span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.coverage-panel p { color: var(--muted); }.coverage-meter { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.06); }.coverage-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); transition: width .6s; }.privacy-panel { display: flex; align-items: center; gap: 25px; margin-top: 16px; padding: 25px; }.privacy-icon { display: grid; width: 62px; height: 62px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(168,135,255,.3); border-radius: 18px; background: rgba(168,135,255,.08); color: var(--violet); font-size: 25px; }.privacy-panel p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 30px 2px 14px; }.section-heading h3 { margin: 5px 0 0; font-size: 22px; }.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.service-card { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }.service-card h4 { margin: 10px 0 4px; font-size: 13px; }.service-card code { color: var(--muted-2); font-size: 9px; }.service-card p { max-width: 44%; margin: 2px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; text-align: right; }.status-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; }.status-badge.success { background: rgba(111,255,194,.1); color: var(--mint); }.status-badge.error { background: rgba(255,111,126,.1); color: var(--red); }.status-badge.waiting { background: rgba(248,213,115,.1); color: var(--yellow); }.status-badge.neutral { color: var(--muted); }

.ai-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.ai-stat { padding: 20px; box-shadow: none; }.ai-stat strong { display: block; margin-top: 12px; font-size: 29px; letter-spacing: -1px; }.ai-stat p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.ai-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; margin-top: 16px; }.ai-report-panel, .ai-audit-panel { min-width: 0; padding: 24px; }.ai-report-list, .ai-audit-list { display: grid; gap: 12px; margin-top: 18px; }.ai-report { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(168,135,255,.035); }.ai-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.ai-report h3 { margin-top: 6px; }.ai-report > p { color: var(--muted); font-size: 11px; line-height: 1.6; }.report-list { display: grid; gap: 8px; margin-top: 14px; }.report-list > div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.025); }.report-list b { color: var(--text); font-size: 10px; }.report-list span { color: var(--muted); font-size: 9px; line-height: 1.5; }.ai-report .vet-note { margin: 15px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--yellow); font-size: 9px; }.ai-audit-row { display: grid; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--line); }.ai-audit-row > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 9px; }.ai-audit-row > div:first-child small { grid-column: 1 / -1; color: var(--muted-2); font-size: 8px; }.ai-audit-row > div:first-child b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.audit-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.audit-numbers span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 8px; }.audit-numbers b { color: var(--text); font-size: 10px; }.audit-details { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; }.audit-details summary { color: var(--muted); font-size: 8px; cursor: pointer; }.audit-details div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; margin-top: 8px; }.audit-details span { color: var(--muted-2); font-size: 8px; }.audit-details code { overflow: hidden; color: var(--text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.audit-error { overflow-wrap: anywhere; margin: 0; color: var(--red); font-size: 8px; }.empty-state { display: grid; gap: 6px; padding: 25px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); text-align: center; }.empty-state b { color: var(--text); font-size: 12px; }.empty-state span { font-size: 9px; line-height: 1.5; }.ai-policy { display: flex; align-items: center; gap: 25px; margin-top: 16px; padding: 25px; }.ai-policy p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }

.detail-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.detail-principle { padding: 22px; }.detail-principle p { margin-bottom: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }.detail-type { display: inline-flex; padding: 5px 8px; border-radius: 7px; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }.detail-type.direct { background: rgba(82,191,255,.1); color: var(--cyan); }.detail-type.derived { background: rgba(111,255,194,.1); color: var(--mint); }.detail-type.interpreted { background: rgba(168,135,255,.1); color: var(--violet); }.detail-accordion { display: grid; gap: 10px; margin-top: 16px; }.detail-accordion details { padding: 0 22px; box-shadow: none; }.detail-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-size: 13px; font-weight: 700; }.detail-accordion summary small { color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; }.detail-accordion details > div { padding: 0 0 18px; border-top: 1px solid var(--line); }.detail-accordion p { color: var(--muted); font-size: 10px; line-height: 1.65; }.detail-accordion p b { color: var(--text); }.concept-panel { display: grid; grid-template-columns: 1.35fr .65fr; gap: 28px; margin-top: 16px; padding: 27px; border-color: rgba(248,213,115,.2); background: radial-gradient(circle at 90% 15%, rgba(248,213,115,.08), transparent 27%), linear-gradient(150deg, var(--panel), rgba(8,21,35,.65)); }.concept-panel p, .concept-panel li { color: var(--muted); font-size: 10px; line-height: 1.65; }.concept-panel ul { margin: 0; padding-left: 18px; }.idea-panel { margin-top: 16px; padding: 25px; }.idea-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.idea-grid span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 9px; }

.app-footer { display: flex; justify-content: space-between; max-width: 1520px; margin: 45px auto 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; }
.login-overlay { position: fixed; inset: 0; z-index: 100; display: grid; padding: 20px; place-items: center; background: rgba(2,8,14,.8); backdrop-filter: blur(17px); }.login-card { width: min(430px, 100%); padding: 35px; text-align: center; }.login-mark { display: grid; width: 65px; height: 65px; margin: 0 auto 23px; place-items: center; border: 1px solid rgba(111,255,194,.4); border-radius: 22px; background: rgba(111,255,194,.1); color: var(--mint); font-size: 25px; font-weight: 800; }.login-card p { color: var(--muted); }.login-card label { text-align: left; }.login-card .primary-button { width: 100%; margin-top: 18px; }.toast { position: fixed; z-index: 110; right: 23px; bottom: 23px; max-width: 390px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow); color: var(--text); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }.toast.show { opacity: 1; transform: none; }

/* Precomputed heat variables avoid relying on CSS calc multiplication. */
.floor-room { border-color: rgba(82,191,255,var(--heat-border)); background: radial-gradient(circle at 50% 55%, rgba(111,255,194,var(--heat-fill)), transparent 45%), linear-gradient(145deg, rgba(82,191,255,var(--heat-room)), rgba(255,255,255,.012)); }
.room-heat-core { width: var(--heat-size); height: var(--heat-size); background: radial-gradient(circle, rgba(111,255,194,var(--heat-core)), rgba(34,215,199,var(--heat-halo)) 52%, transparent 70%); filter: blur(var(--heat-blur)); }

/* Editable indoor topology map. Coordinates are stored in metres, not pixels. */
.map-panel-heading { align-items: flex-start; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; }
.map-statuses, .map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.map-actions { justify-content: flex-end; }
.map-actions .primary-button, .map-actions .secondary-button { padding: 8px 11px; border-radius: 9px; font-size: 9px; }
.map-actions button:disabled { opacity: .42; cursor: not-allowed; }
.map-edit-panel { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 13px; border: 1px solid rgba(248,213,115,.25); border-radius: 12px; background: rgba(248,213,115,.055); }
.map-edit-panel label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.map-edit-panel input { width: 67px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: rgba(255,255,255,.045); color: var(--text); }
.map-edit-panel label span { color: var(--muted-2); }
.map-edit-panel p { margin: 0 0 0 auto; color: var(--muted-2); font-size: 8px; line-height: 1.45; }
.virtual-map { position: relative; height: 490px; margin-top: 13px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 17px; background-color: rgba(4,15,26,.72); background-image: linear-gradient(rgba(136,190,214,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(136,190,214,.055) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(34,215,199,.045), transparent 60%); background-size: 24px 24px, 24px 24px, 100% 100%; isolation: isolate; touch-action: none; }
.virtual-map.editing { border-color: rgba(248,213,115,.42); box-shadow: inset 0 0 0 1px rgba(248,213,115,.08); }
.virtual-map canvas, .map-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.virtual-map canvas { z-index: 0; pointer-events: none; }
#mapRoomsLayer { z-index: 1; }
#mapNodesLayer { z-index: 3; pointer-events: none; }
#mapBuddyLayer { z-index: 4; pointer-events: none; }
.map-room { position: absolute; display: flex; min-width: 46px; min-height: 42px; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 12px; border: 1px solid rgba(82,191,255,.26); border-radius: 13px; background: linear-gradient(145deg, rgba(82,191,255,.075), rgba(9,26,42,.88)); box-shadow: inset 0 0 30px rgba(82,191,255,.035), 0 5px 22px rgba(0,0,0,.14); color: var(--muted); user-select: none; }
.map-room.active { border-color: rgba(111,255,194,.72); box-shadow: inset 0 0 34px rgba(111,255,194,.09), 0 0 24px rgba(111,255,194,.10); }
.map-room-glow { position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(circle, rgba(111,255,194,.48), rgba(34,215,199,.12) 45%, transparent 70%); opacity: var(--map-heat); filter: blur(10px); pointer-events: none; }
.map-room > div, .map-room-activity { position: relative; z-index: 1; }
.map-room > div { display: grid; gap: 4px; }
.map-room b { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.map-room small, .map-room-activity { color: var(--muted-2); font-size: 7px; }
.map-room-activity { align-self: flex-end; padding: 4px 6px; border-radius: 7px; background: rgba(3,12,21,.42); }
.virtual-map.editing .map-room { border-style: dashed; cursor: move; }
.map-resize-handle { position: absolute; z-index: 3; right: 2px; bottom: 2px; width: 15px; height: 15px; border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); cursor: nwse-resize; }
.map-node { position: absolute; z-index: 3; display: grid; justify-items: center; color: var(--cyan); pointer-events: auto; transform: translate(-50%, -50%); user-select: none; }
.map-node i { display: block; width: 15px; height: 15px; border: 3px solid #07111f; border-radius: 50% 50% 50% 2px; background: var(--cyan); box-shadow: 0 0 0 2px rgba(82,191,255,.28), 0 0 16px rgba(82,191,255,.5); transform: rotate(-45deg); }
.map-node b { max-width: 85px; margin-top: 5px; overflow: hidden; padding: 3px 5px; border-radius: 6px; background: rgba(5,17,29,.87); color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.virtual-map.editing .map-node { cursor: grab; }
.virtual-map.editing .map-node:active { cursor: grabbing; }
.map-buddy-marker { position: absolute; display: grid; justify-items: center; transform: translate(-50%, -50%); }
.map-buddy-marker b { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--mint); color: #062219; font-size: 12px; box-shadow: 0 0 0 8px rgba(111,255,194,.10), 0 0 28px rgba(111,255,194,.42); animation: buddyPing 2.5s infinite; }
.map-buddy-marker.room-only b { border: 2px dashed rgba(6,34,25,.6); background: rgba(111,255,194,.86); }
.map-buddy-marker small { margin-top: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(5,17,29,.9); color: var(--text); font-size: 7px; white-space: nowrap; }
.map-uncertainty { position: absolute; min-width: 28px; min-height: 28px; border: 1px dashed rgba(111,255,194,.65); border-radius: 50%; background: radial-gradient(circle, rgba(111,255,194,.09), rgba(111,255,194,.025) 60%, transparent); transform: translate(-50%, -50%); }
.map-scale { position: absolute; z-index: 6; right: 10px; bottom: 10px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: rgba(5,17,29,.88); color: var(--muted); font-size: 8px; }
.map-empty { position: absolute; left: 50%; top: 50%; display: grid; gap: 5px; color: var(--muted); text-align: center; transform: translate(-50%, -50%); }
.map-empty b { color: var(--text); }
.map-empty span { font-size: 9px; }

@media (max-width: 1180px) {
    :root { --sidebar: 84px; }
    .brand > span:last-child, .nav-item span:last-child, .data-quality-mini > span:last-child { display: none; }
    .brand { justify-content: center; padding-inline: 0; }.nav-item { justify-content: center; }.nav-item::before { left: -18px; }.sidebar-foot { flex-direction: column; }.score-grid { grid-template-columns: repeat(2, 1fr); }.cockpit-grid { grid-template-columns: 1fr 1fr; }.battery-glance { grid-column: 1 / -1; }.territory-grid, .insight-layout, .ai-layout, .home-context-grid { grid-template-columns: 1fr; }.stacked-panels { grid-template-columns: 1fr 1fr; }.home-grid { grid-template-columns: 1fr; }.vital-grid { grid-template-columns: 1fr 1fr; }.quality-card { grid-column: 1 / -1; }.battery-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    :root { --sidebar: 0px; --radius: 18px; }
    .sidebar { width: 260px; transform: translateX(-105%); transition: transform .25s; }.sidebar.open { transform: none; }.brand > span:last-child, .nav-item span:last-child, .data-quality-mini > span:last-child { display: flex; }.nav-item { justify-content: flex-start; }.sidebar-foot { flex-direction: row; }
    .main-content { width: 100%; margin-left: 0; padding: 0 15px 20px; }.topbar { min-height: 75px; }.context-title { display: none; }.mobile-brand { display: flex; }.sync-state span { display: none; }.top-actions { gap: 10px; }
    .hero-card { grid-template-columns: 1fr; }.hero-copy { padding: 31px 24px 18px; }.hero-copy h2 { font-size: 39px; letter-spacing: -1.8px; }.buddy-orbit { min-height: 230px; }
    .score-grid, .cockpit-grid, .stacked-panels, .home-secondary, .vital-grid, .insight-feed, .diary-layout, .system-grid, .service-grid, .ai-stat-grid, .detail-principles, .concept-panel { grid-template-columns: 1fr; }.battery-glance, .quality-card { grid-column: auto; }.score-card { padding: 15px; }.page-intro { align-items: flex-start; flex-direction: column; }.page-intro h2 { font-size: 36px; }.page-intro-actions { width: 100%; justify-items: stretch; }.refresh-all-button { width: 100%; min-width: 0; }.range-switch { width: 100%; }.range-switch button { flex: 1; }
    .metric-panel, .battery-glance { min-height: auto; }.map-panel { padding: 14px; }.territory-map { height: 360px; }.map-footer { grid-template-columns: 1fr 1fr; }.floor-plan { min-height: 0; grid-template-columns: 1fr; grid-auto-rows: minmax(190px, auto); }.map-toolbar, .map-edit-panel { align-items: stretch; flex-direction: column; }.map-actions { justify-content: stretch; }.map-actions button { flex: 1; }.map-edit-panel p { margin-left: 0; }.virtual-map { height: 410px; }.map-node b, .map-room-activity { display: none; }.heat-legend { grid-template-columns: auto 1fr auto; }.heat-legend b { display: none; }.indoor-facts, .context-metrics { grid-template-columns: 1fr; }.budget-row { grid-template-columns: 100px 1fr 62px; }.big-battery { grid-template-columns: 1fr; gap: 28px; text-align: center; }.forecast-facts { justify-content: center; }.coverage-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }.privacy-panel, .ai-policy { align-items: flex-start; }.service-card { display: grid; }.service-card p { max-width: none; text-align: left; }.section-heading { align-items: flex-start; flex-direction: column; }.app-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
}

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