/* Orion — shared styles */
:root {
  --bg: #0d1117;
  --bg-2: #121821;
  --card: #161d27;
  --card-2: #1c2531;
  --line: #263142;
  --line-2: #314057;
  --text: #e8edf4;
  --text-2: #a9b4c4;
  --muted: #74819a;
  --accent: #6aa8ff;
  --accent-ink: #0b1a2e;
  --on: #ffc857;          /* light on */
  --on-soft: rgba(255, 200, 87, .14);
  --heat: #ff8a5b;
  --cool: #5bb8ff;
  --good: #3ecf8e;
  --warn: #f5b84a;
  --bad: #ff5a4e;
  --bad-soft: rgba(255, 90, 78, .14);
  --chart: #6aa8ff;
  --chart-fill: rgba(106, 168, 255, .16);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
  --r: 14px;
  --r-sm: 9px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f5f8; --bg-2: #eceff4; --card: #ffffff; --card-2: #f6f8fb; --line: #e1e6ee; --line-2: #cfd7e3;
    --text: #141a23; --text-2: #4a5568; --muted: #7a8699; --accent: #2f6fdb; --accent-ink: #fff;
    --on: #e09b00; --on-soft: rgba(224, 155, 0, .12); --heat: #e2622f; --cool: #2b8fd9;
    --good: #18a36a; --warn: #c98a0c; --bad: #d93a2f; --bad-soft: rgba(217, 58, 47, .1);
    --chart: #2f6fdb; --chart-fill: rgba(47, 111, 219, .12);
    --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f5f8; --bg-2: #eceff4; --card: #ffffff; --card-2: #f6f8fb; --line: #e1e6ee; --line-2: #cfd7e3;
  --text: #141a23; --text-2: #4a5568; --muted: #7a8699; --accent: #2f6fdb; --accent-ink: #fff;
  --on: #e09b00; --on-soft: rgba(224, 155, 0, .12); --heat: #e2622f; --cool: #2b8fd9;
  --good: #18a36a; --warn: #c98a0c; --bad: #d93a2f; --bad-soft: rgba(217, 58, 47, .1);
  --chart: #2f6fdb; --chart-fill: rgba(47, 111, 219, .12);
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sub { color: var(--text-2); }
.hidden { display: none !important; }

/* ---------- top bar */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 10px 22px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .14em; font-size: 15px; }
.brand .logo { width: 26px; height: 26px; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--text-2); text-decoration: none; padding: 6px 12px; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: var(--card); color: var(--text); }
.nav a.active { background: var(--card-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.top .spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; white-space: nowrap; }
.pill b { color: var(--text); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.dot.bad { background: var(--bad); }
.clock { font-weight: 600; font-size: 15px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); cursor: pointer; }
.icon-btn:hover { color: var(--text); border-color: var(--line-2); }

.banner { max-width: 1636px; margin: 14px auto 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--card); border: 1px dashed var(--line-2); color: var(--text-2); font-size: 13px; }
@media (max-width: 1680px) { .banner { margin: 14px 22px 0; } }
@media (max-width: 760px) { .banner { margin: 10px 12px 0; } }

/* ---------- layout */
main { padding: 18px 22px 40px; max-width: 1680px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: span 12; }
@media (max-width: 1280px) { .s2, .s3, .s4 { grid-column: span 6; } .s5, .s7, .s8, .s9 { grid-column: span 12; } }
@media (max-width: 760px) { .grid > * { grid-column: span 12 !important; } main { padding: 12px 12px 30px; } .top { padding: 10px 12px; gap: 10px; } .top .hide-sm { display: none; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.card-h h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--text-2); margin: 0; display: flex; align-items: center; gap: 7px; }
.card-h .spacer { flex: 1; }
.empty { color: var(--muted); padding: 18px 0; text-align: center; font-size: 13px; }

/* ---------- buttons & controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--card-2); color: var(--text); }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-2); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; font-weight: 500; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 0 0 1px var(--line); }

.switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px; background: var(--line-2); border: 0; cursor: pointer; transition: background .15s; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on { background: var(--on); }
.switch.on::after { transform: translateX(18px); }
.switch:disabled { opacity: .45; }
input[type=range] { accent-color: var(--on); width: 100%; height: 18px; }

/* ---------- weather */
.wx-now { display: flex; align-items: center; gap: 16px; }
.wx-now .big { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.wx-now svg.wx { width: 64px; height: 64px; }
.wx-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; margin-left: auto; font-size: 13px; color: var(--text-2); }
.wx-meta b { color: var(--text); font-weight: 600; display: block; font-size: 14px; }
.wx-hours { display: flex; gap: 4px; overflow-x: auto; margin: 16px -4px 4px; padding: 0 4px 6px; scrollbar-width: thin; }
.wx-hour { flex: none; width: 50px; text-align: center; font-size: 12px; color: var(--text-2); padding: 6px 0; border-radius: 8px; }
.wx-hour:first-child { background: var(--card-2); }
.wx-hour svg { width: 22px; height: 22px; margin: 4px auto; display: block; }
.wx-hour b { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.wx-hour .pop { color: var(--cool); font-size: 11px; min-height: 14px; }
.wx-days { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.wx-day { display: grid; grid-template-columns: 46px 26px 40px 1fr 36px 36px; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.wx-day svg { width: 22px; height: 22px; }
.wx-day .pop { color: var(--cool); font-size: 12px; }
.wx-day .lo { color: var(--muted); text-align: right; } .wx-day .hi { text-align: right; font-weight: 600; }
.range { height: 5px; border-radius: 9px; background: var(--bg-2); position: relative; }
.range span { position: absolute; top: 0; bottom: 0; border-radius: 9px; background: linear-gradient(90deg, var(--cool), var(--on), var(--heat)); }

/* ---------- energy */
.hero { display: flex; align-items: baseline; gap: 8px; }
.hero .v { font-size: 46px; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.hero .u { font-size: 18px; color: var(--text-2); }
.e-stats { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.e-stats b { color: var(--text); font-weight: 600; }
.chart { position: relative; margin-top: 12px; height: 130px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .axis-t { fill: var(--muted); font-size: 10.5px; }
.chart .tip { position: absolute; pointer-events: none; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; font-size: 12px; white-space: nowrap; box-shadow: var(--shadow); transform: translate(-50%, -110%); }
.chan { margin-top: 12px; display: grid; gap: 7px; }
.chan-row { display: grid; grid-template-columns: 96px 1fr 58px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.chan-row .bar { height: 7px; background: var(--bg-2); border-radius: 9px; overflow: hidden; }
.chan-row .bar span { display: block; height: 100%; background: var(--chart); border-radius: 0 4px 4px 0; transition: width .6s; }
.chan-row .w { text-align: right; color: var(--text); }

/* ---------- climate */
.tstat + .tstat { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }
.tstat-top { display: flex; align-items: center; gap: 10px; }
.tstat .temp { font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.tstat .status { font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.tstat .status.heating { color: var(--heat); } .tstat .status.cooling { color: var(--cool); }
.setpts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.setpt { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; display: flex; align-items: center; justify-content: space-between; }
.setpt .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.setpt.heat .lbl { color: var(--heat); } .setpt.cool .lbl { color: var(--cool); }
.setpt .val { font-size: 19px; font-weight: 600; }
.setpt .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
.sensors { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; }
.sensor { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 9px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); min-width: 0; line-height: 1.25; }
.sensor .sn { font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sensor.occ .sn::before { content: ''; display: inline-block; vertical-align: 1px; margin-right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.sensor .st { font-size: 16px; font-weight: 600; color: var(--text); flex: none; }
@media (max-width: 360px) { .sensors { grid-template-columns: 1fr; } }

/* ---------- garage */
.garage { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.garage + .garage { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.garage .gicon { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); }
.garage .gicon svg { width: 30px; height: 30px; }
.garage.open .gicon { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.garage.moving .gicon { color: var(--warn); }
.garage .state { font-size: 18px; font-weight: 600; text-transform: capitalize; }
.garage.open .state { color: var(--bad); }
.btn.confirm { background: var(--warn); color: #1a1200; border-color: transparent; }

.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.summary div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.summary b { display: block; font-size: 20px; font-weight: 600; }
.summary span { font-size: 11.5px; color: var(--text-2); }

/* ---------- cameras */
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cam { position: relative; border-radius: 11px; overflow: hidden; background: #000; aspect-ratio: 16/9; cursor: pointer; border: 1px solid var(--line); }
.cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam .cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 18px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: 12.5px; font-weight: 500; }
.cam .cap .spacer { flex: 1; }
.cam .badge { position: absolute; top: 8px; left: 8px; }
.cam.motion { outline: 2px solid var(--bad); outline-offset: -2px; }
.cam .light-btn { background: rgba(0,0,0,.45); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.cam .light-btn.on { background: var(--on); color: #1a1200; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bad); color: #fff; }
.tag.pulse::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1s infinite; }
.tag.off { background: rgba(0,0,0,.55); }
@keyframes pulse { 50% { opacity: .2; } }

/* ---------- spotlight (motion) */
.spot { grid-column: span 12; background: #05070a; border: 1px solid var(--bad); border-radius: var(--r); overflow: hidden; box-shadow: 0 0 0 4px var(--bad-soft), var(--shadow); animation: spotIn .25s ease-out; }
@keyframes spotIn { from { opacity: 0; transform: translateY(-8px); } }
.spot-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; background: #0c1016; flex-wrap: wrap; }
.spot-h h3 { margin: 0; font-size: 16px; font-weight: 600; }
.spot-h .chips { display: flex; gap: 6px; }
.spot-h .chip { border: 1px solid #2c3644; background: #141b25; color: #cbd5e1; border-radius: 99px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.spot-h .chip.on { border-color: var(--bad); color: #fff; }
.spot-h .icon-btn { background: #141b25; border-color: #2c3644; color: #cbd5e1; }
.spot-v { position: relative; aspect-ratio: 16/9; max-height: 68vh; width: 100%; background: #000; display: grid; place-items: center; }
.spot-v img, .spot-v iframe { width: 100%; height: 100%; object-fit: contain; border: 0; display: block; }

/* ---------- rooms & lights */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.room { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.room-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.room-h h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.room-h .count { font-size: 12px; color: var(--muted); }
.room-h .spacer { flex: 1; }
.dev { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.dev + .dev { border-top: 1px solid var(--line); }
.dev .di { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.dev.on .di { background: var(--on-soft); color: var(--on); border-color: transparent; }
.dev .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .meta { font-size: 12px; color: var(--muted); }
.dev .slider { grid-column: 2 / 4; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-top: -2px; }
.dev.offline { opacity: .55; }
.room-cams { display: grid; gap: 6px; margin: 2px 0 6px; }
.room-cams[data-n="2"] { grid-template-columns: 1fr 1fr; }
.room-cam { position: relative; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #000; cursor: pointer; border: 1px solid var(--line); }
.room-cam img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-cam img:not([src]), .room-cam img[src=""] { visibility: hidden; }
.room-cam-v { position: absolute; inset: 0; }
.room-cam-v:empty { display: none; }
.room-cam-v img, .room-cam-v iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; pointer-events: none; }
.room-cam-tag { position: absolute; top: 6px; left: 6px; display: none; pointer-events: none; }
.room-cam.live .room-cam-tag { display: block; }
.room-cam-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 7px 4px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.room-cam:focus-visible { outline: 2px solid var(--accent); }

/* ---------- toast */
.toasts { position: fixed; bottom: 18px; right: 18px; display: grid; gap: 8px; z-index: 100; }
.toast { background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); max-width: 380px; font-size: 13px; animation: spotIn .2s; }
.toast.err { border-color: var(--bad); }

/* ---------- admin */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button { border: 0; background: none; padding: 10px 14px; color: var(--text-2); cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--text); border-color: var(--accent); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.room-admin { margin-bottom: 16px; padding: 0; overflow: hidden; }
.room-admin .rh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.room-admin .rh h3 { margin: 0; font-size: 15px; }
.room-admin .rh .spacer { flex: 1; }
table.devs { width: 100%; border-collapse: collapse; }
table.devs td, table.devs th { padding: 9px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; }
table.devs th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
table.devs tr:last-child td { border-bottom: 0; }
table.devs td.act { text-align: right; white-space: nowrap; }
table.devs .nm { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.chip-s { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
@media (max-width: 760px) { table.devs .hide-sm { display: none; } table.devs td, table.devs th { padding: 8px 10px; } }

.form { display: grid; gap: 12px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 5px; }
.field > span { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.field small { color: var(--muted); font-size: 12px; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); outline: none; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.note { font-size: 12.5px; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.note code, code.c { font-family: var(--mono); font-size: 12px; background: var(--bg-2); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); word-break: break-all; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 760px) { .int-grid { grid-template-columns: 1fr; } }
.int-card h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.int-card .desc { color: var(--text-2); font-size: 13px; margin: 4px 0 14px; }
.int-card .actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.result { font-size: 12.5px; color: var(--text-2); }
.result.ok { color: var(--good); } .result.err { color: var(--bad); }
.pin { font-family: var(--mono); font-size: 26px; letter-spacing: .2em; font-weight: 700; color: var(--accent); }

dialog { border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--text); padding: 0; width: min(620px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(5, 8, 12, .6); backdrop-filter: blur(2px); }
dialog .dh { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
dialog .dh h3 { margin: 0; font-size: 16px; flex: 1; }
dialog .db { padding: 18px 20px; max-height: 68vh; overflow: auto; }
dialog .df { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); }

/* ---------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .card { width: min(360px, 100%); padding: 28px; }
.login h1 { margin: 12px 0 4px; font-size: 20px; letter-spacing: .12em; }
table.devs { table-layout: fixed; }
table.devs th:nth-child(1) { width: 30%; } table.devs th:nth-child(2) { width: 12%; } table.devs th:nth-child(3) { width: 20%; }
table.devs th:nth-child(4) { width: 15%; } table.devs th:nth-child(5) { width: 100px; } table.devs th:nth-child(6) { width: 190px; }
table.devs td { overflow: hidden; text-overflow: ellipsis; }
table.devs .switch.on { background: var(--accent); }
@media (max-width: 760px) { table.devs th:nth-child(1) { width: auto; } table.devs th:nth-child(4) { width: 90px; } table.devs th:nth-child(6) { width: 150px; } }
@media (max-width: 760px) {
  .wx-now { flex-wrap: wrap; }
  .wx-meta { margin-left: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }
  .spot-v { max-height: none; }
}
.chan-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-row { grid-template-columns: minmax(96px, 150px) 1fr 62px; }
.circ-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 24px; }
#circ-dlg { width: min(860px, calc(100vw - 24px)); }
.circ-unit { display: grid; gap: 6px; }
.circ-uh { display: flex; justify-content: space-between; font-size: 12.5px; }
.int-card.wide { grid-column: 1 / -1; }
.bt-conn { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1.2fr) 110px auto; gap: 10px; align-items: end; }
.bt-diag { grid-column: 1 / -1; }
.bt-diag:empty { display: none; }
.bt-diag .cam-status { margin: 0; }
.bt-raw { margin: 6px 0 0; max-height: 140px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.bt-fields { margin-top: 6px; font-size: 12px; color: var(--muted); } .bt-fields code { display: block; margin-top: 4px; word-break: break-all; font-size: 11.5px; }
.bt-hex { font-size: 11px; font-family: ui-monospace, monospace; word-break: break-all; margin-top: 4px; }
.bt-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 470px), 1fr)); gap: 12px; }
.bt-unit { padding: 12px 14px; box-shadow: none; background: var(--card-2); }
.bt-uh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bt-uh > input { flex: 1 1 160px; min-width: 0; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); font-weight: 600; }
.bt-serial { display: flex !important; align-items: center; gap: 6px; }
.bt-serial input { width: 90px !important; padding: 6px 8px !important; }
table.bt-ch { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bt-ch th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 4px 6px; }
table.bt-ch td { padding: 3px 6px; }
table.bt-ch td:nth-child(1) { width: 46px; } table.bt-ch td:nth-child(3), table.bt-ch td:nth-child(4), table.bt-ch td:nth-child(5) { width: 40px; text-align: center; }
table.bt-ch td:nth-child(6) { width: 44px; } table.bt-ch td:nth-child(7) { width: 64px; text-align: right; white-space: nowrap; }
table.bt-ch th:nth-child(3), table.bt-ch th:nth-child(4), table.bt-ch th:nth-child(5) { text-align: center; }
table.bt-ch input:not([type=checkbox]):not([type=color]) { width: 100%; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2); }
table.bt-ch input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
@media (max-width: 760px) { .bt-conn { grid-template-columns: 1fr 1fr; } .bt-units { grid-template-columns: 1fr; } }

/* ---------- live wall */
.wall { position: fixed; inset: 0; z-index: 50; background: #05070a; color: #e8edf4; display: flex; flex-direction: column; }
.wall-h { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #1c2531; }
.wall-h h3 { margin: 0; font-size: 16px; }
.wall-h .muted { color: #8a96a8; }
.wall-h .icon-btn, .wall-h .btn { background: #141b25; border-color: #2c3644; color: #cbd5e1; }
.wall-h .spacer { flex: 1; }
.wall-g { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: grid; gap: 10px; align-content: start;
  grid-auto-rows: max-content;   /* rows must not shrink to fit the screen (tiles overlapped on phones) */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.wall-g[data-n="1"] { grid-template-columns: 1fr; }
.wall-g[data-n="2"], .wall-g[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
.wall-g[data-n="3"], .wall-g[data-n="5"], .wall-g[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
.wall-c { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; cursor: pointer; outline: 1px solid #1c2531; }
.wall-c:focus-visible { outline: 2px solid var(--accent); }
.wall-c.motion { outline: 3px solid var(--bad); }
.wall-v { position: absolute; inset: 0; }
.wall-v img, .wall-v iframe { width: 100%; height: 100%; object-fit: contain; border: 0; display: block; }
.wall-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 7px; padding: 22px 10px 8px; font-size: 13px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.wall-cap .muted { color: #9aa6b8; font-size: 12px; }
.wall-cap .spacer { flex: 1; }
.wall-cap .light-btn { background: rgba(0,0,0,.45); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.wall-cap .light-btn.on { background: var(--on); color: #1a1200; }
/* focus mode: one camera large, the rest as a strip */
.wall.focus .wall-g { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
.wall.focus .wall-c.big { grid-column: 1 / -1; aspect-ratio: auto; height: calc(100vh - 64px - 150px); min-height: 240px; cursor: zoom-out; }
.wall.focus .wall-c:not(.big) .wall-cap { padding: 14px 8px 6px; font-size: 12px; }
.wall.focus .wall-c:not(.big) .wall-cap .muted, .wall.focus .wall-c:not(.big) [data-wfocus] { display: none; }
@media (max-width: 760px) {
  .wall-g, .wall-g[data-n] { grid-template-columns: 1fr !important; }
  .wall.focus .wall-c.big { height: auto; aspect-ratio: 16/9; }
  .wall-h h3 { font-size: 14px; }
  #wall-count { display: none; }
}

/* ---------- radar map */
.radar { position: relative; overflow: hidden; border-radius: 11px; background: #0f141b; height: 100%; min-height: 300px;
  touch-action: none; user-select: none; cursor: grab; border: 1px solid var(--line); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .radar { background: #e9edf2; } }
.radar.dragging { cursor: grabbing; }
.radar:fullscreen { border-radius: 0; }
.rd-world { position: absolute; left: 0; top: 0; will-change: transform; }
.rd-layer { position: absolute; left: 0; top: 0; transition: opacity .25s; }
.rd-layer img { position: absolute; width: 256px; height: 256px; max-width: none; opacity: 0; transition: opacity .2s; pointer-events: none; }
.rd-layer img.ok { opacity: 1; }
.rd-home { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; }
.rd-home::before { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.rd-home::after { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); opacity: .6; animation: rdPing 2s infinite; }
@keyframes rdPing { from { transform: scale(.4); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
.rd-ctl { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; z-index: 6; }
.rd-ctl button, .rd-play { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(13,17,23,.78); color: #e8edf4; cursor: pointer; backdrop-filter: blur(4px); padding: 0; }
.rd-ctl button:hover, .rd-play:hover { background: rgba(30,40,55,.9); }
.rd-bar { position: absolute; left: 10px; right: 10px; bottom: 26px; z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(13,17,23,.78); color: #e8edf4; backdrop-filter: blur(4px); }
.rd-bar input[type=range] { flex: 1; accent-color: var(--accent); min-width: 60px; }
.rd-play { width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.08); }
.rd-time { font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 112px; text-align: right; }
.rd-time span { color: #9aa6b8; font-weight: 500; margin-left: 4px; }
.rd-legend { position: absolute; left: 10px; top: 10px; z-index: 6; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #e8edf4;
  background: rgba(13,17,23,.7); padding: 4px 8px; border-radius: 7px; }
.rd-legend i { display: block; width: 90px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, #04e9e7, #019ff4, #02fd02, #01c501, #fdf802, #fd9500, #fd0000, #bc0000, #f800fd); }
.rd-legend i.rainviewer { background: linear-gradient(90deg, #88ddee, #0099cc, #0077aa, #005588, #ffee00, #ffaa00, #ff4400, #c10000, #ffaaff); }
.rd-attr { position: absolute; right: 6px; bottom: 4px; z-index: 6; font-size: 10px; color: #b8c2d0; background: rgba(13,17,23,.6); padding: 1px 6px; border-radius: 5px; }
.rd-attr a { color: inherit; }
.rd-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; z-index: 4; color: var(--text-2); font-size: 13px; pointer-events: none; }
#radar-card { display: flex; flex-direction: column; }
#radar-card .radar { flex: 1; }
@media (max-width: 760px) { .radar { min-height: 320px; } .rd-time { min-width: 0; } }

/* OpenStreetMap standard tiles are bright; dim them in dark mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .radar.bm-osm .rd-base { filter: brightness(.6) invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); } }

/* ---------- theme overrides for explicit choices (the toggle in the top bar) */
:root[data-theme="light"] .radar { background: #e9edf2; }
:root[data-theme="dark"] .radar.bm-osm .rd-base { filter: brightness(.6) invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
:root[data-theme="light"] .radar.bm-osm .rd-base { filter: none; }
/* Radar echoes on the dark map: stronger colours so light rain doesn't fade into the background */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rd-radar { filter: saturate(1.6) brightness(1.2) contrast(1.1); } }
:root[data-theme="dark"] .rd-radar { filter: saturate(1.6) brightness(1.2) contrast(1.1); }
:root[data-theme="light"] .rd-radar { filter: none; }

/* ---------- weather (touch-panel layout in the normal card theme) */
.wx-card, .wx-right { display: flex; flex-direction: column; min-height: 560px; }
.wxo-cur { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 6px 4px; }
.wxo-empty { padding: 30px; text-align: center; color: var(--muted); }
.wxo-badge { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 5px 14px 5px 6px; background: transparent; border: 0; }
.wxo-badge svg { width: 34px; height: 34px; }
.wxo-badge span { display: flex; flex-direction: column; line-height: 1.1; }
.wxo-badge b { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.wxo-badge small { font-size: 9px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.wxo-loc { margin-top: 12px; font-size: 18px; font-weight: 600; }
.wxo-upd { font-size: 14px; color: var(--text-2); }
.wxo-big { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 0; }
.wxo-temp { font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.wxo-temp sup { font-size: 28px; font-weight: 500; vertical-align: top; position: relative; top: 8px; margin-left: 4px; color: var(--text-2); }
.wxo-big .gwx { width: 150px; height: 150px; }
.wxo-cond { font-size: 20px; font-weight: 600; margin: 2px 0 12px; }
.wxo-det { display: grid; grid-template-columns: auto auto; gap: 5px 14px; margin: 0; font-size: 16px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; justify-content: center; }
.wxo-det dt { text-align: right; color: var(--text-2); }
.wxo-det dd { margin: 0; font-weight: 600; }

.wxo-pages { flex: 1; min-height: 0; position: relative; margin: 0 -6px; }
.wxo-page { position: absolute; inset: 0; display: none; }
.wxo-page.on { display: block; }
.wxo-page[data-page="radar"] { padding: 0 6px; }
.wxo-page #radar { height: 100%; min-height: 0; }
.wxo-list { height: 100%; overflow-y: auto; padding: 0 6px; scrollbar-width: thin; }
.wxo-item { display: grid; grid-template-columns: 104px 80px 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.wxo-item:hover { background: var(--card-2); }
.wxo-item.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.wxo-item .gwx { width: 80px; height: 80px; margin: -6px 0; }
.wxo-day { display: flex; flex-direction: column; font-size: 17px; line-height: 1.25; }
.wxo-day b { font-weight: 600; }
.wxo-day span { font-size: 15px; color: var(--text-2); }
.wxo-info { display: grid; text-align: center; font-size: 15.5px; line-height: 1.35; color: var(--text-2); }
.wxo-hl { justify-self: end; font-size: 16px; color: var(--text); }
.wxo-hl b { font-weight: 600; }
.wxo-pop { color: var(--cool); font-weight: 600; font-size: 14px; }
.wxo-hour { grid-template-columns: 84px 60px 1fr; padding: 5px 12px; }
.wxo-hour .gwx { width: 60px; height: 60px; margin: -4px 0; }
.wxo-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.wxo-nav span { font-size: 16px; font-weight: 600; }
.wxo-nav button { width: 44px; height: 38px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; border-radius: 8px; }
.wxo-nav button:hover { background: var(--card-2); }
.wxo-nav svg { width: 26px; height: 26px; fill: none; stroke: var(--text-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wxo-nav #wxo-next svg { stroke: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .wx-card .gwx, :root:not([data-theme="dark"]) .wx-right .gwx { filter: drop-shadow(0 1px 2px rgba(20,50,110,.35)); } }
:root[data-theme="light"] .wx-card .gwx, :root[data-theme="light"] .wx-right .gwx { filter: drop-shadow(0 1px 2px rgba(20,50,110,.35)); }
@media (max-width: 1280px) { .wx-card, .wx-right { min-height: 0; } .wx-right { height: 540px; } }
@media (max-width: 520px) {
  .wxo-temp { font-size: 68px; } .wxo-big .gwx { width: 116px; height: 116px; }
  .wxo-item { grid-template-columns: 80px 58px 1fr; padding: 8px 4px; gap: 6px; }
  .wxo-item .gwx { width: 58px; height: 58px; }
  .wxo-badge b { font-size: 14px; }
}

/* ---------- weather details + analog and digital clocks side by side */
.wx-bottom { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-evenly; gap: 10px 18px;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.wx-bottom .wxo-det { border-top: 0; padding-top: 0; width: auto; font-size: 15.5px; }
.aclock { display: contents; }
.clock-face { width: 128px; height: 128px; }
.cf-rim { fill: var(--card-2); stroke: var(--line-2); stroke-width: 1.5; }
.clock-face .tk { stroke: var(--muted); stroke-width: .6; opacity: .6; }
.clock-face .tk-major { stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; }
.clock-face text { font-size: 9px; font-weight: 600; fill: var(--text-2); text-anchor: middle; font-family: var(--font); }
.ch-h { stroke: var(--text); stroke-width: 3.6; stroke-linecap: round; }
.ch-m { stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }
.ch-s { stroke: var(--heat); stroke-width: 1; stroke-linecap: round; }
.ch-dot { fill: var(--heat); }
#ch-s { transition: transform .2s cubic-bezier(.4, 2.2, .5, 1); }
.clock-dig { text-align: center; }
.clock-time { font-size: 30px; font-weight: 300; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.clock-time span { font-size: 13px; font-weight: 600; color: var(--text-2); margin-left: 3px; }
.clock-date { font-size: 13px; color: var(--text-2); margin-top: 2px; }
@media (max-width: 640px) {
  .wx-bottom { grid-template-columns: 1fr 1fr; }
  .wx-bottom .wxo-det { grid-column: 1 / -1; justify-self: center; }
  .clock-face { width: 110px; height: 110px; justify-self: center; }
}

/* ---------- right column next to the weather: scrollable cameras above the thermostat */
.side-col { position: relative; min-width: 0; }
.side-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; }
.side-col #cams-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.side-col #climate-card { flex: none; }
.side-col .cams { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: 1fr; align-content: start; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; }
@media (max-width: 1280px) {
  .side-in { position: static; }
  .side-col .cams { max-height: 440px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.side-col .cams { grid-auto-rows: max-content; }
.side-col .cam { aspect-ratio: 16 / 9; }
.wx-card, .wx-right { min-height: 680px; }
.wx-right .wxo-item { grid-template-columns: 84px 66px 1fr; gap: 8px; padding: 8px 10px; }
.wx-right .wxo-item .gwx { width: 66px; height: 66px; margin: -4px 0; }
.wx-right .wxo-info { font-size: 14px; }
.wx-right .wxo-hl { font-size: 15px; }
.wx-right .wxo-day { font-size: 16px; } .wx-right .wxo-day span { font-size: 14px; }
.wx-right .wxo-hour { grid-template-columns: 70px 54px 1fr; }
.wx-right .wxo-hour .gwx { width: 54px; height: 54px; }
@media (max-width: 1280px) { .wx-card, .wx-right { min-height: 0; } }
.wx-card .wxo-cur { justify-content: center; }
@media (max-width: 1280px) {
  .side-col #cams-card { flex: none; }
  .side-col .cams { flex: none; }
}

/* ---------- compact top bar inside the weather card (dashboard) */
.card-h.has-top { margin: -4px -6px 10px; min-height: 0; }
.top.in-card { position: static; flex: 1; min-width: 0; padding: 0 0 10px; gap: 8px; background: none; backdrop-filter: none;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; row-gap: 6px; }
.top.in-card .brand { font-size: 14px; letter-spacing: .12em; }
.top.in-card .nav a { padding: 5px 10px; }
.top.in-card .pill { padding: 4px 9px; }
.top.in-card .icon-btn { width: 32px; height: 32px; }
@media (max-width: 760px) { .top.in-card .hide-sm { display: none; } }
@media (max-width: 440px) { .top.in-card .brand span { display: none; } .top.in-card { flex-wrap: nowrap; } }

/* import dialog */
#dlg:has(table.imp) { width: min(820px, calc(100vw - 24px)); }
table.imp td { vertical-align: top; }
table.imp th:nth-child(1) { width: 36px; } table.imp th:nth-child(2) { width: auto; } table.imp th:nth-child(3) { width: 130px; } table.imp th:nth-child(4) { width: 170px; }
table.imp input.imp-name, table.imp select { width: 100%; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-2); }
table.imp tr.muted input, table.imp tr.muted select { opacity: .55; }

/* ---------- current conditions scale with the card width (fills the empty space on wide screens) */
.wx-card { container-type: inline-size; container-name: wxcard; }
.wx-card .wxo-cur { justify-content: space-evenly; gap: clamp(4px, 1.6cqi, 18px); padding: clamp(6px, 2cqi, 22px) 6px; }
.wx-card .wxo-badge { gap: clamp(10px, 1.8cqi, 16px); padding: clamp(5px, 1cqi, 9px) clamp(14px, 2.6cqi, 22px) clamp(5px, 1cqi, 9px) clamp(6px, 1.2cqi, 10px); border-radius: 8px; }
.wx-card .wxo-badge svg { width: clamp(34px, 7cqi, 54px); height: clamp(34px, 7cqi, 54px); }
.wx-card .wxo-badge b { font-size: clamp(14px, 3.4cqi, 26px); }
.wx-card .wxo-badge small { font-size: clamp(9px, 1.7cqi, 13px); }
.wx-card .wxo-loc { margin-top: 0; font-size: clamp(18px, 4.4cqi, 32px); text-align: center; }
.wx-card .wxo-upd { font-size: clamp(14px, 2.9cqi, 21px); text-align: center; }
.wx-card .wxo-big { gap: clamp(12px, 3.5cqi, 36px); margin: 0; }
.wx-card .wxo-temp { font-size: clamp(68px, 22cqi, 168px); }
.wx-card .wxo-temp sup { font-size: clamp(24px, 6.5cqi, 50px); top: clamp(8px, 2cqi, 16px); }
.wx-card .wxo-big .gwx { width: clamp(116px, 34cqi, 260px); height: clamp(116px, 34cqi, 260px); margin: clamp(-24px, -2.5cqi, 0px) 0; }
.wx-card .wxo-cond { font-size: clamp(20px, 5.4cqi, 40px); margin: 0; text-align: center; }

/* ---------- ecobee sign-in */
.eco-box { display: grid; gap: 10px; }
.eco-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eco-status b.ok { color: var(--good); }
.eco-login { display: grid; gap: 8px; }
.eco-adv { border-top: 1px solid var(--line); padding-top: 10px; }
.eco-adv summary { cursor: pointer; color: var(--text-2); font-size: 13.5px; margin-bottom: 8px; }
.eco-adv[open] { display: grid; gap: 8px; }
.btn.busy { opacity: .6; pointer-events: none; }

/* side column: keep the cameras visible; with many ecobee sensors the climate card scrolls instead */
@media (min-width: 1281px) {
  .side-col #cams-card { min-height: 250px; }
  .side-col #climate-card { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .side-col #climate { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .side-col #climate-card .tstat { flex: none; }
}
.progress { height: 6px; border-radius: 3px; background: var(--card-2); overflow: hidden; margin: 10px 0 4px; border: 1px solid var(--line); }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s; }

/* ---------- forecast / radar pages: auto rotation toggle + slide */
.wxo-mid { display: flex; align-items: center; gap: 14px; }
.wxo-nav .wxo-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2); cursor: pointer; user-select: none; }
.wxo-auto input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.wxo-page.slide-l { animation: wx-slide-l .45s cubic-bezier(.2, .8, .2, 1); }
.wxo-page.slide-r { animation: wx-slide-r .45s cubic-bezier(.2, .8, .2, 1); }
.wxo-pages { overflow: hidden; }
@keyframes wx-slide-l { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wx-slide-r { from { transform: translateX(-28%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wxo-page.slide-l, .wxo-page.slide-r { animation: none; } }

/* ---------- thermostat: fan + humidifier (chips next to the temperature, controls in a pop-over) */
.tstat { position: relative; }
.tstat-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; min-width: 0; }
.tx-chips { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
.tx-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.tx-chip svg { width: 14px; height: 14px; flex: none; }
.tx-chip.plain { cursor: default; background: none; border-color: transparent; padding: 0 2px; }
.tx-chip:not(.plain):hover { border-color: var(--line-2); color: var(--text); }
.tx-chip.active { color: var(--text); } .tx-chip.active svg { color: var(--accent); }
.tx-chip.active[data-tx="fan"] svg { animation: tx-spin 2.4s linear infinite; }
.tx-chip.open { border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
@keyframes tx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tx-chip.active[data-tx="fan"] svg { animation: none; } }
.tx-pop { position: absolute; z-index: 6; top: 70px; left: 0; right: 0; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: linear-gradient(var(--card), var(--card)), var(--bg); box-shadow: 0 12px 32px rgba(0,0,0,.35); display: grid; gap: 9px; animation: tx-in .15s ease-out; }
@keyframes tx-in { from { opacity: 0; transform: translateY(-4px); } }
.tx-head { display: flex; align-items: center; justify-content: space-between; }
.tx-head b { font-size: 14px; } .tx-head .icon-btn { width: 28px; height: 28px; }
.tx-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--text-2); flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper b { font-size: 16px; font-weight: 600; color: var(--text); min-width: 64px; text-align: center; }
.stepper .icon-btn { width: 28px; height: 28px; border-radius: 7px; }
.tx-note { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }

.tabs.sm { margin: 0 0 12px; } .tabs.sm button { padding: 6px 12px; font-size: 13.5px; }

/* ---------- today's high / low, on the same line as the condition */
.wxo-condrow { display: flex; align-items: center; justify-content: center; gap: 6px clamp(14px, 4cqi, 30px); flex-wrap: wrap; }
.wxo-hilo { display: flex; gap: clamp(10px, 2.6cqi, 20px); align-items: center; padding-left: clamp(14px, 4cqi, 30px); border-left: 1px solid var(--line-2); }
.wxo-hilo span { display: inline-flex; align-items: center; gap: 2px; }
.wxo-hilo svg { width: clamp(16px, 3.6cqi, 26px); height: clamp(16px, 3.6cqi, 26px); stroke-width: 2.8; }
.wxo-hilo b { font-size: clamp(20px, 5.4cqi, 40px); font-weight: 600; }
.wxo-hilo .hi svg { color: var(--heat); } .wxo-hilo .lo svg { color: var(--cool); }

.imp-fail { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }

.cam-status { font-size: 13px; padding: 7px 10px; border-radius: 8px; margin: -4px 0 12px; border: 1px solid var(--line); }
.cam-status.ok { color: var(--good); } .cam-status.err { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.cam-status code { font-size: 12px; }

.cam-status.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

.wall-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.pop-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; margin-right: 8px; white-space: nowrap; }
.pop-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* Temperature in the other scale, shown small after the main value */
.alt-t { font-size: .5em; font-weight: 500; color: var(--muted); margin-left: .3em; letter-spacing: 0; white-space: nowrap; }
.wxo-temp .alt-t { font-size: .28em; vertical-align: super; margin-left: .15em; }
dd .alt-t, .wxo-hl .alt-t, .wxo-hilo .alt-t { font-size: .82em; margin-left: .15em; }
.setpt .val .alt-t { font-size: .42em; }
.tstat .temp .alt-t { font-size: .3em; vertical-align: super; margin-left: .2em; }
.wxo-temp .alt-t { margin-left: .3em; }
.sensor .alt-t { font-size: .72em; margin-left: .2em; }

.bt-color { width: 32px; height: 26px; padding: 2px; block-size: 26px; min-height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.bt-color::-webkit-color-swatch-wrapper { padding: 0; }
.bt-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.bt-color::-moz-color-swatch { border: 0; border-radius: 4px; }

/* ---------- energy history page */
.eh-page { display: grid; gap: 16px; max-width: 1400px; }
.eh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.eh-bar .spacer { flex: 1; }
.eh-nav { display: flex; align-items: center; gap: 6px; }
.eh-nav b { min-width: 170px; text-align: center; font-size: 14.5px; }
.eh-nav input[type=date] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13px; }
.eh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; margin-bottom: 12px; }
.eh-tile { border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; padding: 9px 12px; background: var(--card-2); min-width: 0; }
.eh-th { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 6px; min-width: 0; }
.eh-th b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.eh-th .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.eh-tv { display: flex; gap: 14px; flex-wrap: wrap; }
.eh-tv div { display: flex; flex-direction: column; }
.eh-tv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.eh-tv b { font-size: 17px; font-weight: 600; }
.eh-chart { position: relative; }   /* legend flows below the chart, however many channels are picked */
.eh-chart svg { width: 100%; height: 380px; display: block; overflow: visible; }
.eh-chart .grid-l { stroke: var(--line); stroke-width: 1; }
.eh-chart .axis-t { fill: var(--muted); font-size: 11px; }
.eh-chart .tip { position: absolute; pointer-events: none; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; box-shadow: var(--shadow); transform: translateX(-50%); z-index: 2; }
.eh-chart .tip i, .eh-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.eh-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); padding-top: 6px; }
.eh-note { font-size: 12.5px; min-height: 18px; margin-top: 4px; }
.eh-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.eh-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.eh-gh { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0 4px; }
.eh-gh input, .eh-ch input { accent-color: var(--accent); }
.eh-gh { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 4px; }
.eh-ch { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.eh-ch:hover { background: var(--card-2); }
.eh-ch.dim .nm { color: var(--muted); }
.eh-ch .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.eh-ch .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-ch .now { color: var(--muted); font-size: 12px; }
.tag-s { font-size: 10.5px; padding: 1px 6px; border-radius: 99px; background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); }
@media (max-width: 760px) {
  .eh-nav b { min-width: 0; flex: 1; font-size: 13px; }
  .eh-nav { flex-wrap: wrap; width: 100%; }
  .eh-chart svg { height: 300px; }
}
table.bt-ch input.bt-color { width: 32px !important; height: 26px !important; padding: 2px !important; min-width: 0; }

.e-warn { margin-top: 8px; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.e-warn .i { width: 14px; height: 14px; vertical-align: -2px; }

.eh-tiles.many { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.eh-tiles.many .eh-tile { padding: 6px 10px; }
.eh-tiles.many .eh-tv { gap: 10px; }
.eh-tiles.many .eh-tv b { font-size: 14px; }
.eh-tiles.many .eh-tv span { font-size: 10px; }

/* ---------- family (Life360) */
.family { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 14px; }
.family-map { min-height: 360px; height: 100%; }
.family-list { display: grid; gap: 6px; align-content: start; max-height: 460px; overflow: auto; }
.fam-p { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: inherit; cursor: pointer; font: inherit; }
.fam-p:hover, .fam-p.sel { border-color: var(--accent); }
.fam-pic { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bg-2); border: 2.5px solid var(--st, var(--muted)); }
.fam-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fam-pic b { font-size: 16px; color: var(--text-2); }
.fam-p.home { --st: var(--good); } .fam-p.away { --st: #3a86ff; } .fam-p.drive { --st: #f59f00; }
.fam-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fam-n { font-weight: 600; font-size: 14px; }
.fam-where { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-where .i { width: 13px; height: 13px; vertical-align: -2px; }
.fam-meta { font-size: 11.5px; color: var(--muted); }
.fam-issue { color: var(--warn); }
.fam-bat { font-size: 12px; color: var(--text-2); white-space: nowrap; } .fam-bat.low { color: var(--bad); font-weight: 600; }
.pmap .pm-marks { position: absolute; left: 0; top: 0; z-index: 5; }
.pm-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.pm-mark .pm-pic { position: absolute; left: -21px; top: -48px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: #1d2533; border: 3px solid var(--st); box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.pm-mark .pm-pic::after { content: ""; position: absolute; }
.pm-mark::before { content: ""; position: absolute; left: -6px; top: -9px; border: 6px solid transparent; border-top: 8px solid var(--st); }
.pm-mark .pm-pic img { width: 100%; height: 100%; object-fit: cover; }
.pm-mark .pm-pic b { color: #fff; font-size: 15px; }
.pm-mark .pm-name { position: absolute; left: 0; top: 2px; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: rgba(13,17,23,.75); color: #fff; white-space: nowrap; }
.pm-mark.home { --st: var(--good); } .pm-mark.away { --st: #3a86ff; } .pm-mark.drive { --st: #f59f00; }
.pm-mark.stale .pm-pic { opacity: .6; }
.pm-mark.sel { z-index: 2; } .pm-mark.sel .pm-pic { outline: 3px solid var(--accent); }
.pm-home { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pm-home .i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
@media (max-width: 900px) { .family { grid-template-columns: 1fr; } .family-map { min-height: 300px; } .family-list { max-height: none; } }

.l360-circles { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.eh-ch .kwh { color: var(--text-2); font-size: 12px; min-width: 64px; text-align: right; }
@media (max-width: 760px) { .card-h .hide-sm { display: none; } }
.eh-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 0 16px; }
.eh-ch .nm .unit { color: var(--muted); font-size: 12px; }
/* all circuits: one list sorted by power */
.circ-all { display: grid; grid-template-columns: 1fr; gap: 6px; }
.circ-all .circ-uh { flex-wrap: wrap; gap: 4px 10px; justify-content: flex-start; margin-bottom: 4px; }
.circ-all .chan-row { grid-template-columns: minmax(0, 42%) 1fr 64px; }
#reload-btn.spin .i { animation: reloadSpin .8s linear infinite; }
@keyframes reloadSpin { to { transform: rotate(360deg); } }
/* in-card header (dashboard): keep every button on one row; wrap the buttons as a group if space runs out */
.top.in-card { flex-wrap: wrap; row-gap: 6px; }
.top.in-card .icon-btn { width: 30px; height: 30px; flex: none; }
.top.in-card .nav { min-width: 0; }
@media (max-width: 440px) {
  .top.in-card { flex-wrap: wrap; gap: 6px; }
  .top.in-card .nav a { padding: 4px 7px; font-size: 13px; }
  .top.in-card .spacer { display: none; }
}
.top-btns { display: flex; gap: 8px; align-items: center; flex: none; }
.top.in-card .top-btns { gap: 6px; margin-left: auto; }
/* dashboard energy card: every circuit, scrollable */
.chan-scroll { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }

/* dashboard: the top bar docks to the top of the screen when its card scrolls away */
.top-dock { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: none; padding: 8px max(16px, calc((100vw - 1680px) / 2 + 22px));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.18); animation: dockIn .18s ease-out; }
.top-dock.on { display: block; }
.top-dock .top.in-card { border-bottom: 0; padding: 0; flex-wrap: nowrap; }
.top-dock .top.in-card .top-btns { margin-left: 0; }
@keyframes dockIn { from { transform: translateY(-100%); } to { transform: none; } }
@media (max-width: 760px) { .top-dock { padding: 6px 10px; } .top-dock .top.in-card { flex-wrap: wrap; } }

/* ---------- automations */
.au-list { display: grid; gap: 12px; }
.au-card { padding: 12px 14px; }
.au-card.off { opacity: .6; }
.au-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.au-h .spacer { flex: 1; }
.au-name { font-size: 15px; }
.au-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13px; margin: 4px 0; }
.au-sum i { font-style: normal; color: var(--muted); font-size: 12px; }
.au-k { width: 54px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; flex: none; }
.au-chip { padding: 2px 9px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); }
.au-chip.act { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.au-run-state { font-size: 12px; margin-top: 6px; }
.r-ran { color: var(--good); } .r-error { color: var(--bad); } .r-skipped { color: var(--muted); } .r-restarted { color: var(--warn); }
.au-log { max-height: 420px; overflow: auto; }
.au-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.au-tbl td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.au-tbl td:first-child { white-space: nowrap; }
dialog.au-dlg { width: min(860px, calc(100vw - 16px)); }
dialog.au-dlg .db { max-height: 74vh; }
.au-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.au-sec { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: var(--card-2); }
.au-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.au-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed var(--line); }
.au-row:first-of-type { border-top: 0; }
.au-row > select[data-type] { width: 190px; flex: none; }
.au-f { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; min-width: 0; }
.au-row select, .au-row input:not([type=checkbox]) { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 13px; max-width: 100%; }
.au-btns { display: flex; gap: 4px; flex: none; }
.au-days { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.au-days label { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; }
.au-for { color: var(--text-2); }
.au-tpls { display: grid; gap: 8px; }
.au-tpl { text-align: left; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: inherit; cursor: pointer; font: inherit; }
.au-tpl:hover { border-color: var(--accent); }
.au-tpl span { font-size: 12.5px; }
dialog .df .result { flex: 1; align-self: center; }
@media (max-width: 760px) {
  .au-top { grid-template-columns: 1fr; }
  .au-row { flex-wrap: wrap; } .au-row > select[data-type] { width: 100%; }
  .au-k { width: 100%; }
}

/* ---------- notification ticker (dashboard) */
.notif-bar { position: relative; margin: 0 0 12px; z-index: 35; }
.nb-main { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; cursor: pointer; text-align: left; overflow: hidden; }
.nb-main:hover { border-color: var(--line-2); }
.nb-ico { color: var(--accent); display: grid; place-items: center; flex: none; } .nb-ico .i { width: 16px; height: 16px; }
.nb-track { flex: 1; min-width: 0; overflow: hidden; height: 20px; position: relative; font-size: 13.5px; }
.nb-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }
.nb-item b { color: var(--text-2); font-weight: 600; margin-right: 6px; }
.nb-item.urgent span { color: var(--bad); font-weight: 600; }
.nb-item { animation: nbIn .45s ease-out; }
@keyframes nbIn { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.nb-count { flex: none; font-size: 11px; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); text-align: center; }
.nb-count:empty { display: none; }
.notif-bar.flash .nb-main { animation: nbFlash 1.6s ease-out; }
@keyframes nbFlash { 0%, 40% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } 100% { box-shadow: none; } }
.nb-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); max-height: 360px; overflow: auto; padding: 6px 0; }
.nb-lh { display: flex; align-items: center; padding: 4px 12px 8px; border-bottom: 1px solid var(--line); }
.nb-lh .spacer { flex: 1; }
.nb-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.nb-row:last-child { border-bottom: 0; }
.nb-row.urgent span:last-child { color: var(--bad); }
@media (max-width: 760px) { .nb-row { grid-template-columns: 78px 1fr; } }

/* ---------- motion & door/window sensors (Garage & home card) */
.sensors-list { display: grid; gap: 6px; margin: 10px 0 4px; }
.sensor-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; }
.sensor-row .si { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.sensor-row .si .i { width: 17px; height: 17px; }
.sensor-row .sn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sensor-row .sv { font-weight: 600; }
.sensor-row .st { font-size: 12px; white-space: nowrap; }
.sensor-row.active.contact { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.sensor-row.active.contact .si, .sensor-row.active.contact .sv { color: var(--bad); }
.sensor-row.active.motion { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.sensor-row.active.motion .si, .sensor-row.active.motion .sv { color: var(--warn); }
.sensor-row.active .si { animation: pulseSoft 1.6s ease-in-out infinite; }
@keyframes pulseSoft { 50% { opacity: .55; } }
.tag-s.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
@media (max-width: 440px) { .sensor-row { grid-template-columns: 30px minmax(0, 1fr) auto; } .sensor-row .st { grid-column: 2 / -1; } }

/* room tile: occupancy from ecobee room sensors / motion sensors */
.occ { font-size: 11.5px; color: var(--muted); padding: 1px 7px; border-radius: 99px; border: 1px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.occ:empty { display: none; }
.occ.on { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); font-weight: 600; }
.occ.on i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: pulseSoft 2s ease-in-out infinite; }
.room-h h3 { flex: 0 1 auto; min-width: 4.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-h .occ, .room-h button { flex: none; }
.room-h .count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ .i { width: 13px; height: 13px; stroke-width: 2.4; }
.occ.on { padding: 1px 7px 1px 5px; }
.occ-pick { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); max-height: 220px; overflow: auto; }

/* ---------- middle column: forecast/radar (shorter) above the 3D house tile */
.mid-col { position: relative; min-width: 0; }
.mid-in { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; }
.mid-col .wx-right { min-height: 0; flex: 1 1 0; }
.mid-col #house-card { flex: 0 0 270px; display: flex; flex-direction: column; padding-bottom: 10px; }
#house-card .card-h { margin-bottom: 4px; }
.h3-hint { font-size: 11.5px; margin-left: 6px; }
.house3d-tile { flex: 1; min-height: 0; }
@media (max-width: 1280px) { .mid-in { position: static; } .mid-col .wx-right { height: 460px; flex: none; } .mid-col #house-card { flex: none; height: 300px; } }

/* ---------- 3D house */
.h3d { position: relative; isolation: isolate; z-index: 0; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: grab; }
.h3d:active { cursor: grabbing; }
.h3d-tile { touch-action: pan-y; }
.h3d-full { touch-action: none; }
.h3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h3d-labels { position: absolute; inset: 0; pointer-events: none; }
.h3d-label { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
  font: 600 11px/1.2 inherit; font-family: inherit; color: var(--text); padding: 3px 7px; border-radius: 99px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(3px); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.h3d-label.lit { border-color: rgba(255,196,64,.7); }
.h3d-label.sel { outline: 2px solid var(--accent); }
.h3d-label.unlinked { border-style: dashed; color: var(--muted); font-weight: 500; }
.h3d-bits { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.h3d-bits span { display: inline-flex; align-items: center; gap: 1px; color: var(--muted); }
.h3d-bits .i { width: 12px; height: 12px; }
.h3d-bits .on { color: #f5b400; } .h3d-bits .bad { color: var(--bad); } .h3d-bits .mo { color: var(--good); } .h3d-bits .t { color: var(--text-2); }
.h3d-tile .h3d-label { font-size: 10px; padding: 2px 6px; }
.house-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.hf-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.hf-h h3 { margin: 0; font-size: 16px; } .hf-h .spacer { flex: 1; }
.hf-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.hf-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.house3d-full { min-height: 0; }
.hf-panel { border-left: 1px solid var(--line); padding: 14px 16px; overflow: auto; background: var(--card); }
.hf-panel h4 { margin: 0 0 4px; font-size: 16px; }
.hf-ph { display: flex; align-items: center; justify-content: space-between; }
.hf-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.hf-sum div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: grid; } .hf-sum b { font-size: 20px; } .hf-sum span { font-size: 11.5px; color: var(--muted); }
.hf-tags { display: flex; gap: 6px; margin: 8px 0; } .hf-tags span { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); }
.hf-dev { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.hf-dev .i { width: 18px; height: 18px; color: var(--muted); } .hf-dev .v { color: var(--text-2); font-size: 12.5px; }
.hf-panel .bad { color: var(--bad); } .hf-panel .mo { color: var(--good); }
@media (max-width: 860px) { .hf-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .hf-panel { border-left: 0; border-top: 1px solid var(--line); max-height: 40vh; } }
.hm-card { grid-column: 1 / -1; }
.hm-floor { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .hm-row { grid-template-columns: 1fr; } }
.h3d-full .h3d-label:has(.h3d-devs) { flex-wrap: wrap; justify-content: center; max-width: 170px; border-radius: 10px; row-gap: 3px; }
.h3d-devs { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; width: 100%; }
.h3d-devs i { font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; padding: 0 3px; border-radius: 4px; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
.h3d-devs i.on { color: #1a1300; background: #f5b400; } .h3d-devs i.bad { color: #fff; background: var(--bad); } .h3d-devs i.mo { color: #fff; background: var(--good); }
.hm-row { grid-template-columns: 1fr 90px 1fr 1fr !important; }
@media (max-width: 600px) { .hm-row { grid-template-columns: 1fr 80px !important; } .hm-row select { grid-column: 1 / -1; } }
/* Orion badge on the weather card; the data provider is credited small in the corner */
.wx-card .wxo-cur { position: relative; }
.wxo-badge .logo { width: 34px; height: 34px; flex: none; }
.wx-card .wxo-badge .logo { width: clamp(34px, 7cqi, 54px); height: clamp(34px, 7cqi, 54px); }
.wxo-badge b { letter-spacing: .16em; }
.wxo-src { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); text-decoration: none; opacity: .8; }
.wxo-src:hover { opacity: 1; color: var(--text-2); }
.wxo-src svg { width: 15px; height: 15px; }
/* Water leak sensors */
.sensor-row.active.leak { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card-2)); }
.sensor-row.active.leak .si, .sensor-row.active.leak .sv { color: var(--bad); }
.summary .leak-alert { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #fff; background: var(--bad); animation: leakPulse 1.4s ease-in-out infinite; }
.summary .leak-alert .i { width: 18px; height: 18px; } .summary .leak-alert b { display: inline; font-size: 14px; } .summary .leak-alert span { color: #fff; font-size: 13px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes leakPulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .leak-alert { animation: none; } }
.sensor-row.active.load { border-color: color-mix(in srgb, var(--on, #f5b400) 50%, var(--line)); }
.sensor-row.active.load .si, .sensor-row.active.load .sv { color: #e0a000; }
/* Net (generating) energy channels */
.chan-row.gen .bar span { background: #22a55a; }
.chan-row.gen .w, .eh-ch .now.gen { color: #1f9d55; }
:root[data-theme="dark"] .chan-row.gen .w, :root[data-theme="dark"] .eh-ch .now.gen { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chan-row.gen .w, :root:not([data-theme="light"]) .eh-ch .now.gen { color: #4ade80; } }
/* Front-of-house drawing: thumbnail next to the logo and full-page view */
.home-thumb { width: 46px; height: 27px; padding: 0; margin-left: 2px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line-2); background: #e6edf4; cursor: zoom-in; flex: none; display: inline-flex; }
.home-thumb svg { width: 100%; height: 100%; display: block; }
.home-thumb:hover { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.front-full { position: fixed; inset: 0; z-index: 80; background: var(--bg); display: flex; flex-direction: column; }
.front-full.hidden { display: none; }
.ff-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ff-head b { font-size: 16px; }
.ff-head .icon-btn { margin-left: auto; }
.ff-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.ff-body svg { width: 100%; height: 100%; max-height: calc(100vh - 90px); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
@media (max-width: 440px) { .top.in-card .home-thumb { width: 38px; height: 23px; } }
.h3d-label.noname { padding: 2px 6px; gap: 3px; }
.h3d-full .h3d-label.noname:has(.h3d-devs) { max-width: 150px; }
/* Energy chart legend: tick boxes to show / hide each channel */
.eh-legend label { display: inline-flex; align-items: center; gap: 0; cursor: pointer; user-select: none; }
.eh-legend input { margin: 0 6px 0 0; accent-color: var(--accent); }
.eh-legend label.off { opacity: .45; text-decoration: line-through; }
.eh-legend .btn { padding: 2px 8px; font-size: 12px; }
.h3d-bits .t.est { color: var(--muted); font-weight: 500; font-style: italic; }
.hm-map { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 12px; }
.hm-map th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.hm-map td { padding: 5px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hm-map .ok { color: var(--good); }
.bt-dev { margin: 8px 0; }
.bt-dev > summary { cursor: pointer; color: var(--text-2); font-size: 13.5px; }
.ecm-set td { vertical-align: top; }
.ecm-set select { max-width: 340px; }
table.ecm-set { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ecm-set th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 4px 6px; }
table.ecm-set td { padding: 5px 6px; border-top: 1px solid var(--line); }
table.ecm-set td:first-child { width: 70px; } table.ecm-set td:nth-child(2) { width: 34%; }
table.ecm-set input, table.ecm-set select { padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
table.ecm-set select { width: 100%; max-width: 420px; }
@media (max-width: 700px) { table.ecm-set td:nth-child(2) { width: auto; } }
.br-page { margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.br-page > summary { cursor: pointer; }
.br-form { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; padding: 8px 0; border-top: 1px dashed var(--line); }
.br-form .actions { width: 100%; }
.br-f { display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 120px; }
.br-f > span { color: var(--muted); font-size: 12px; }
.br-f input, .br-f select { padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.br-f.check { flex-direction: row; align-items: center; }
.br-radios { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.br-actions { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ecm-rep { font-size: 12.5px; margin: 0 0 8px; padding: 6px 8px; border-radius: 8px; background: var(--card-2, rgba(127,127,127,.08)); }
.ecm-trace pre, .br-raw pre { max-height: 260px; overflow: auto; font-size: 11.5px; white-space: pre-wrap; word-break: break-all; background: rgba(127,127,127,.1); padding: 8px; border-radius: 6px; }
.ecm-fw ol { padding-left: 18px; margin: 4px 0; }
/* Taps act at once (no double-tap-zoom wait) on touch screens */
button, a, label, summary, select, input, [role="button"], .tile, .chip { touch-action: manipulation; }
/* Admin: the page header, the tab row and the devices toolbar stay at the top while scrolling */
body.admin-page .tabs:not(.sm) { position: sticky; top: var(--top-h, 57px); z-index: 15; background: var(--bg); margin: -18px -22px 18px; padding: 8px 22px 0; }
body.admin-page section[data-panel="devices"] > .toolbar { position: sticky; top: calc(var(--top-h, 57px) + var(--tabs-h, 46px)); z-index: 14;
  background: var(--bg); margin: -18px -22px 16px; padding: 10px 22px; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
  body.admin-page .tabs:not(.sm) { overflow-x: auto; scrollbar-width: none; } body.admin-page .tabs:not(.sm) button { white-space: nowrap; }
  /* On a phone the toolbar wraps to several rows, so only the header and tabs stay put */
  body.admin-page section[data-panel="devices"] > .toolbar { position: static; border-bottom: 0; }
}
/* ---------- opening animation: from inside the O of ORION out to the logo in the header (one canvas, no images) */
#intro { position: fixed; inset: 0; z-index: 1000; overflow: hidden; transition: opacity .3s ease; pointer-events: auto; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#intro.intro-out { opacity: 0; pointer-events: none; }
/* ---------- pictures attached to notifications (motion → cameras in that room) */
.nb-row { grid-template-columns: 110px 1fr auto; align-items: center; }
.nb-row.urgent .nb-msg { color: var(--bad); }
.nb-row.has-snaps { cursor: pointer; } .nb-row.has-snaps:hover { background: var(--card-2, rgba(127,127,127,.08)); }
.nb-snaps { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--text-2); border-radius: 8px; padding: 2px 6px 2px 2px; font: inherit; font-size: 12px; cursor: pointer; }
.nb-snaps img { width: 44px; height: 28px; object-fit: cover; border-radius: 6px; display: block; }
.nb-snaps svg, .nb-cam svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nb-cam { display: inline-flex; align-items: center; gap: 2px; color: var(--text-2); font-size: 12px; margin-left: 6px; }
.snap-view { position: fixed; inset: 0; z-index: 900; background: rgba(5,8,12,.88); backdrop-filter: blur(6px); display: flex; flex-direction: column; padding: 16px; color: #e6edf3; }
.snap-view.hidden { display: none; }
.sv-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .sv-h .spacer { flex: 1; } .sv-h .muted { color: #9aa7b6; font-size: 13px; }
.sv-h .icon-btn { flex: none; }
.sv-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-content: start; }
.sv-grid figure { margin: 0; background: #0d1117; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.sv-grid img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.sv-grid figcaption { padding: 6px 10px; font-size: 13px; color: #c9d4e2; }
.snap-view.one .sv-grid { grid-template-columns: 1fr; } .snap-view.one figure:not(.big) { display: none; }
.snap-view.one figure.big { cursor: zoom-out; } .snap-view.one figure.big img { aspect-ratio: auto; max-height: calc(100vh - 140px); }
.sv-wait { padding: 30px; text-align: center; grid-column: 1 / -1; }
.sv-err { grid-column: 1 / -1; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
/* ---------- Garage & home: lights that are on */
.lights-on { margin-top: 12px; }
.lo-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.lo-h .i { width: 16px; height: 16px; color: var(--on, #f59e0b); }
.lo-list { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; -webkit-overflow-scrolling: touch; }
.lo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 6px 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 13px;
  border-left: 3px solid var(--on, #f59e0b); }
.lo-row .lo-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-row .btn { padding: 3px 10px; }
/* ---------- pan / tilt pad over a live camera view */
.ptz { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px) auto; gap: 4px;
  padding: 6px; border-radius: 16px; background: rgba(8,12,18,.45); backdrop-filter: blur(6px); touch-action: none; user-select: none; }
.ptz > button { border: 0; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.ptz > button:hover { background: rgba(255,255,255,.26); } .ptz > button:active, .ptz > button.busy { background: rgba(59,130,246,.75); }
.ptz > button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ptz [data-ptz="up"] { grid-area: 1 / 2; } .ptz [data-ptz="left"] { grid-area: 2 / 1; } .ptz [data-ptz="home"] { grid-area: 2 / 2; }
.ptz [data-ptz="right"] { grid-area: 2 / 3; } .ptz [data-ptz="down"] { grid-area: 3 / 2; }
.ptz [data-ptz="left"] svg { transform: rotate(-90deg); } .ptz [data-ptz="right"] svg { transform: rotate(90deg); } .ptz [data-ptz="down"] svg { transform: rotate(180deg); }
.ptz [data-ptz="home"] svg { width: 18px; height: 18px; stroke-width: 2; }
.ptz-opt { grid-column: 1 / -1; display: flex; gap: 4px; }
.ptz-opt button { flex: 1; border: 0; border-radius: 8px; background: rgba(255,255,255,.12); color: #e6edf3; font: inherit; font-size: 11.5px; padding: 4px 0; cursor: pointer; }
.ptz-opt button.on { background: rgba(59,130,246,.8); color: #fff; } .ptz-opt button.busy { opacity: .6; }
.wall-c:not(.big) .ptz { display: none; }
@media (max-width: 600px) { .ptz { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px) auto; right: 8px; bottom: 8px; } }
/* ORION lettering: solid 3D — an even face over one continuous darker side (several 1 px steps of the same colour
   towards the lower right merge into a single block), then a soft shadow under it */
.o3d { background: linear-gradient(180deg, var(--o3d-top, #f7f9fc) 0%, var(--o3d-bot, #d3dbe7) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(.35px 1px 0 var(--o3d-side, #6f7d95)) drop-shadow(.35px 1px 0 var(--o3d-side, #6f7d95)) drop-shadow(.35px 1px 0 var(--o3d-side2, #4a5568))
    drop-shadow(0 1.5px 1.5px rgba(0,0,0,.5)); }
:root[data-theme="light"] .o3d { --o3d-top: #2b3a50; --o3d-bot: #18243a; --o3d-side: #66748c; --o3d-side2: #44526a; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .o3d { --o3d-top: #2b3a50; --o3d-bot: #18243a; --o3d-side: #66748c; --o3d-side2: #44526a; } }
/* ---------- special-day animations: see-through, taps go to the page underneath */
.celebrate { position: fixed; inset: 0; z-index: 950; pointer-events: none; transition: opacity .6s ease; }
.celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebrate.cel-out { opacity: 0; }
.cel-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10,14,22,.5); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; pointer-events: auto; backdrop-filter: blur(4px); }
.cel-hit { position: absolute; pointer-events: none; cursor: pointer; border-radius: 16px; }
.cel-hit.on { pointer-events: auto; }
.cel-hit.on:focus-visible { outline: 2px solid rgba(255,255,255,.7); }
.cel-pop { position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; background: rgba(5,8,12,.45); padding: 16px; }
.cel-pc { width: min(460px, 100%); max-height: 86vh; overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--line-2, var(--line)); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: 14px 16px; }
.cel-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 15px; }
.cel-pr { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.cel-pi { font-size: 28px; line-height: 1; }
.cel-pr b { font-size: 16px; } .cel-pr .muted { font-size: 13px; margin-top: 2px; }
.cel-sep { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cel-pn { display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.cel-pf { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* Admin: special days */
.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sd-grid { grid-template-columns: 1fr; } }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); font-size: 13px; }
.sd-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.sd-list { display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow: auto; }
.sd-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); font-size: 13px; }
.sd-row.muted { opacity: .5; }
.sd-row .sd-when { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sd-row .sd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sd-day { display: grid; grid-template-columns: minmax(120px, 1.3fr) 86px 120px 110px 80px 110px auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.sd-day input, .sd-day select { width: 100%; }
@media (max-width: 760px) { .sd-day { grid-template-columns: 1fr 1fr; } .sd-row { grid-template-columns: 78px minmax(0, 1fr) auto; } .sd-row .sd-k { display: none; } }
.cel-names { font-size: 13px; margin-top: 6px; line-height: 1.45; }
.cel-story { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text-2); overflow: hidden; }
.cel-story img { float: right; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; margin: 2px 0 6px 10px; }
.cel-story p { margin: 0 0 6px; }
.cel-story a { font-size: 12.5px; }
/* name-day rows: the feast picker takes the place of the date and "yearly" */
.sd-day [data-f="feast"], .sd-day .sd-ndw { display: none; }
.sd-day.nd [data-f="date"], .sd-day.nd .check { display: none; }
.sd-day.nd [data-f="feast"] { display: block; } .sd-day.nd .sd-ndw { display: block; font-size: 12px; }
.sd-day.nd { grid-template-columns: minmax(120px, 1.3fr) 86px 120px minmax(160px, 1.2fr) 150px 110px auto; }
.sd-day.an [data-f="gender"] { visibility: hidden; }
/* Admin: backup */
.bk-pick { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); font-size: 13.5px; }
.bk-pick .field { margin-top: 6px; }
.bk-steps { margin: 4px 0 0; padding-left: 20px; line-height: 1.7; font-size: 13.5px; }
.bk-row { grid-template-columns: 150px minmax(0, 1fr) auto auto; }
.btn.danger { background: var(--bad); color: #fff; border-color: transparent; }
/* Integrations: dynamic DNS */
.dd-status { font-size: 13px; margin: 6px 0 4px; }
.dd-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.4fr) auto auto auto; gap: 6px; align-items: center; margin-bottom: 8px; }
.dd-row .dd-state { grid-column: 1 / -1; font-size: 12.5px; margin-top: -2px; }
.dd-row .good { color: var(--good); } .dd-row .bad, .dd-status .bad { color: var(--bad); }
@media (max-width: 600px) { .dd-row { grid-template-columns: 1fr 1fr; } }
.dd-acct { font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); margin: 6px 0 8px; line-height: 1.5; }
.dd-acct.warn { border-color: color-mix(in srgb, var(--warn, #f59e0b) 60%, transparent); }
.dd-acct.bad { border-color: var(--bad); }
.dd-acct-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dd-acct-a input[type=date] { padding: 2px 6px; }

/* ---------- Lite mode (Raspberry Pi and other slow screens; see LITE in common.js): no blur and no shadows - the
   see-through bars and panels get solid backgrounds instead */
html.lite *, html.lite *::before, html.lite *::after, html.lite dialog::backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; text-shadow: none !important; }
html.lite .gwx { filter: none !important; }
html.lite .o3d { filter: drop-shadow(.35px 1px 0 var(--o3d-side, #6f7d95)) drop-shadow(.35px 1px 0 var(--o3d-side2, #4a5568)) !important; }   /* keeps the solid lettering, without the soft shadow */
html.lite .top:not(.in-card), html.lite .top-dock { background: var(--bg); }
html.lite dialog::backdrop { background: rgba(5, 8, 12, .75); }
html.lite .rd-ctl button, html.lite .rd-play, html.lite .rd-bar { background: rgba(13, 17, 23, .94); }
html.lite .h3d-label { background: var(--card); }
html.lite .snap-view { background: rgba(5, 8, 12, .97); }
html.lite .ptz { background: rgba(8, 12, 18, .78); }
html.lite .cel-x { background: rgba(10, 14, 22, .85); }

/* shown instead of a blank page in browsers that are too old to run Orion (old iPads) */
.too-old { margin: 16px; padding: 16px 18px; border-radius: 12px; background: #3b1d1d; color: #ffe3e3; border: 1px solid #7f2d2d; font: 16px/1.45 -apple-system, system-ui, sans-serif; }

/* ---------- weather card: no logo, so the location and temperatures sit at the top and the clocks get the room below:
   the analog clock with the digital time and date under it, next to the weather details */
.wx-card .wxo-cur { justify-content: flex-start; gap: clamp(4px, 1.4cqi, 14px); padding-top: clamp(4px, 1.2cqi, 12px); }
.wx-card .wx-bottom { grid-template-columns: auto auto; justify-content: space-evenly; gap: 12px clamp(16px, 5cqi, 48px); padding-top: clamp(10px, 2cqi, 18px); }
.wx-card .aclock { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.2cqi, 10px); }
.wx-card .clock-face { width: clamp(150px, 34cqi, 250px); height: clamp(150px, 34cqi, 250px); }
.wx-card .clock-time { font-size: clamp(34px, 8.5cqi, 60px); font-weight: 600; }
.wx-card .clock-time span { font-size: .42em; }
.wx-card .clock-date { font-size: clamp(14px, 3cqi, 20px); }
@media (max-width: 640px) { .wx-card .wx-bottom { grid-template-columns: 1fr; } .wx-card .wx-bottom .wxo-det { grid-column: auto; } }

/* why a live view shows pictures instead of video (Wyze bridge down, go2rtc down) */
.live-note { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4; padding: 6px 10px; border-radius: 8px; background: rgba(120, 30, 30, .85); color: #ffe3e3; font-size: 13px; line-height: 1.35; pointer-events: none; }

/* ---------- house mode + scene buttons (strip above the dashboard cards) */
.mode-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.mb-modes { display: inline-flex; padding: 3px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; gap: 3px; }
.mb-mode { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); padding: 8px 14px; border-radius: 9px; cursor: pointer; font: 600 14px var(--font); min-height: 40px; }
.mb-mode svg { width: 18px; height: 18px; }
.mb-mode.on { color: #fff; background: var(--accent); }
.mb-mode.on.m-away { background: #b7791f; } .mb-mode.on.m-night { background: #4c51bf; } .mb-mode.on.m-vacation { background: #2f855a; }
.mb-mode:disabled { cursor: default; opacity: .85; }
.mb-scenes { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-scene { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 600 14px var(--font); cursor: pointer; transition: transform .12s, background .2s; }
.mb-scene svg { width: 18px; height: 18px; color: var(--accent); }
.mb-scene:active, .mb-scene.busy { transform: scale(.96); background: var(--on-soft, var(--card-2)); }
.mb-scene:disabled { cursor: default; opacity: .7; }
@media (max-width: 640px) { .mb-mode span { display: none; } .mb-mode { padding: 8px 12px; } }

/* ---------- automations: scene option */
.au-scene { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; margin-bottom: 12px; }
.au-scene .check svg { width: 16px; height: 16px; vertical-align: -3px; }
.au-icons { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.au-icons .icon-btn.on { background: var(--accent); color: #fff; }
.tag-s.scene { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.au-name svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }

/* ---------- vacation lights */
.vac-card .desc { margin-bottom: 10px; }
.vac-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); gap: 18px; }
.vac-k { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.vac-lights { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; }
.vac-plan { display: flex; flex-wrap: wrap; gap: 6px; }
.vac-step { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); }
.vac-step.on b { color: var(--warn); } .vac-step.done { opacity: .5; }
@media (max-width: 760px) { .vac-grid { grid-template-columns: 1fr; } }

/* ---------- accounts & lock-outs (Admin → Security) */
.acct-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.acct-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); font-size: 13.5px; }
.acct-row .bad { color: var(--bad); font-weight: 600; }

/* ---------- health (Admin → Health) and the top-bar badge */
.hl-sum { font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 99px; }
.hl-sum.ok { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.hl-sum.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.hl-sum.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.hl-group { margin-top: 14px; }
.hl-g { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 4px; }
.hl-row { display: grid; grid-template-columns: 14px minmax(140px, 220px) minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); align-self: center; }
.hl-row.warn .hl-dot { background: var(--warn); } .hl-row.bad .hl-dot { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.hl-row.bad b { color: var(--bad); }
.hl-d { color: var(--text-2); overflow-wrap: anywhere; }
.hl-s { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) { .hl-row { grid-template-columns: 14px 1fr; } .hl-d, .hl-s { grid-column: 2; } }
.hl-pill { text-decoration: none; }
.hl-pill.bad { color: #fff; background: var(--bad); border-color: var(--bad); }
.hl-pill.bad b { color: #fff; }
.hl-pill svg { width: 15px; height: 15px; }

/* ---------- energy insights */
.in-card .card-h { flex-wrap: wrap; gap: 6px 10px; }
.in-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.in-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); min-width: 0; }
.in-tile > span { font-size: 12px; color: var(--text-2); font-weight: 600; }
.in-tile > span svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--warn); }
.in-tile > b { font-size: 26px; font-weight: 700; line-height: 1.15; }
.in-tile small { font-size: 12px; color: var(--text-2); }
.in-tile.hi { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.in-tile.warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.in-tile.warn > b { color: var(--warn); }
.in-spark { width: 100%; height: 26px; margin: 2px 0; }
.in-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.in-circ { margin-top: 14px; }
.in-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 6px; }
.in-row { display: grid; grid-template-columns: minmax(110px, 200px) minmax(60px, 1fr) 80px 110px; align-items: center; gap: 10px; font-size: 13.5px; padding: 3px 0; }
.in-bar { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.in-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
@media (max-width: 640px) { .in-row { grid-template-columns: 1fr 70px 70px; } .in-bar { display: none; } }
.in-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.in-tou { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ---------- motion clips in the pictures viewer */
.sv-clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 12px; }
.sv-clip { margin: 0; }
.sv-clip video { width: 100%; max-height: 60vh; background: #000; border-radius: 10px; display: block; }
.sv-clip figcaption { font-size: 13px; color: #c9d4e2; margin-top: 4px; }
.sv-clip figcaption svg, .sv-wait svg { width: 14px; height: 14px; vertical-align: -2px; }
.nb-snaps svg + .num + svg { margin-left: 4px; }

/* ---------- weather alerts on the weather card */
.wx-alerts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wx-alert { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bad) 50%, var(--line)); background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--text); font-size: 13.5px; cursor: pointer; width: 100%; font-family: var(--font); }
.wx-alert.Minor, .wx-alert.Unknown { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 12%, var(--card)); }
.wx-alert svg { width: 18px; height: 18px; flex: none; color: var(--bad); }
.wx-alert small { display: block; color: var(--text-2); }
.hl-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; }