/* ── Zensys app prototype · design tokens ── */
:root {
  --ink: #171B2B;
  --navy: #1E2761;
  --deep: #111944;
  --mut: #5B6374;
  --grey: #667089;
  --greyline: #8C96A9;
  --lime: #76C400;
  --lime-dk: #457F00;
  --lime-bg: #F0F9E2;
  --fill1: #E9EEF8;
  --fill2: #DCE3FA;
  --bg: #F3F5FA;
  --card: #FFFFFF;
  --line: #E4E9F4;
  --amber: #E8A13D;
  --amber-dk: #A06A12;
  --amber-bg: #FDF3E3;
  --locked-bg: #EDF0F7;
  --locked-line: #B9C2D8;
  --knockout: #D7DEEC;
  --disp: "Sora", "Trebuchet MS", sans-serif;
  --ui: "Manrope", "Avenir Next", system-ui, sans-serif;
  /* wall / dark surface */
  --wbg: #0E1233;
  --wpanel: #171D4E;
  --wpanel2: #1D2560;
  --wline: rgba(233, 238, 248, 0.09);
  --wline2: rgba(233, 238, 248, 0.12);
  --wtext: #EDF1FB;
  --wmut: #9FA8CC;
  --wfaint: #8D96C2;
  --wlime: #9FE034;
}

/* dark theme — the wall palette applied app-wide */
body[data-theme="dark"] {
  --ink: #EDF1FB;
  --navy: #C7D0F2;
  --mut: #A9B2D6;
  --grey: #8D96C2;
  --greyline: #5E6890;
  --lime-dk: #9FE034;
  --lime-bg: rgba(118, 196, 0, 0.16);
  --fill1: #1B2158;
  --fill2: #232B66;
  --bg: #0E1233;
  --card: #171D4E;
  --line: rgba(233, 238, 248, 0.10);
  --amber-dk: #F2BE6C;
  --amber-bg: rgba(232, 161, 61, 0.16);
  --locked-bg: #141A44;
  --locked-line: #3A4478;
  --knockout: #2A3370;
  color-scheme: dark;
}
body[data-theme="dark"] .pill.on, body[data-theme="dark"] .seg button.on, body[data-theme="dark"] .mini-pill.on { background: var(--lime); border-color: var(--lime); color: #111944; }
body[data-theme="dark"] .pill.on svg { stroke: #111944; }
body[data-theme="dark"] .btn.primary, body[data-theme="dark"] .act-pill.keep, body[data-theme="dark"] .chat-chip:not(.ghost) { background: var(--lime); color: #111944; }
body[data-theme="dark"] .msg.user { background: #232B66; }
body[data-theme="dark"] .zen-bar, body[data-theme="dark"] .toast { border: 1px solid rgba(159, 224, 52, 0.35); }
body[data-theme="dark"] .wbar .fill { background: var(--navy); }
body[data-theme="dark"] .wbar:hover .fill { background: #EDF1FB; }
body[data-theme="dark"] .wbar .tip, body[data-theme="dark"] .modal-actions .btn.primary { background: var(--lime); color: #111944; }
body[data-theme="dark"] :focus-visible { outline-color: var(--wlime); }
body[data-theme="dark"] a:hover { color: var(--ink); }
body[data-theme="dark"] .mode-card.on { border-color: var(--lime); }
body[data-theme="dark"] .mode-card.on .radio { border-color: var(--lime); background: var(--lime); }
body[data-theme="dark"] .mode-card.on .radio svg { stroke: #111944; }
body[data-theme="light"] { color-scheme: light; }
body[data-theme="dark"] .tab.active { color: var(--ink); }
body[data-theme="dark"] .tab.active svg { stroke: var(--lime-dk); }
body[data-theme="dark"] .wbar.today .dlab { color: var(--ink); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.45; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--deep); }
button { font-family: var(--ui); cursor: pointer; border: 0; background: none; padding: 0; color: inherit; font-size: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.wall :focus-visible, .voice-sheet :focus-visible, .overlay :focus-visible { outline-color: var(--wlime); }
.chat-input:focus-within { border-color: var(--navy); box-shadow: 0 0 0 2px var(--fill2); }
.proto-banner { display: block; background: var(--fill2); border-radius: 12px; padding: 8px 14px; font-size: 10px; font-weight: 700; color: var(--navy); margin-bottom: 14px; text-align: center; line-height: 1.5; letter-spacing: 0.2px; }
h1, h2, h3 { margin: 0; font-family: var(--disp); }
[hidden] { display: none !important; }

/* ── app shell ── */
.shell { min-height: 100vh; }
.content { padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px; max-width: 640px; margin: 0 auto; }

/* sidebar (tablet + desktop) */
.sidebar { display: none; }
/* bottom tab bar (phone) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; min-height: 44px; justify-content: center; color: var(--grey); font-size: 10px; font-weight: 600; }
.tab svg { stroke: var(--grey); }
.tab.active { color: var(--deep); font-weight: 700; }
.tab.active svg { stroke: var(--deep); }
.tab-zen { width: 52px; height: 52px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 4px 12px rgba(118, 196, 0, 0.35); }
.tab-zen svg { stroke: var(--deep); }

body.bp-tab .tabbar { display: none; }
body.bp-tab .sidebar {
  display: flex; flex-direction: column; gap: 4px;
  position: fixed; top: 0; left: 0; bottom: 0; width: 224px; z-index: 40;
  background: var(--card); border-right: 1px solid var(--line); padding: 22px 14px;
}
.brand { font-family: var(--disp); font-weight: 700; font-size: 20px; letter-spacing: -0.3px; padding: 0 10px 14px 10px; }
.brand .dotmark { color: var(--lime-dk); }
.side-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--mut); min-height: 44px; }
.side-link svg { stroke: var(--grey); flex-shrink: 0; }
.side-link:hover { background: var(--bg); color: var(--ink); }
.side-link.active { background: var(--fill1); color: var(--deep); font-weight: 700; }
.side-link.active svg { stroke: var(--deep); }
body[data-theme="dark"] .side-link.active { color: var(--ink); }
body[data-theme="dark"] .side-link.active svg { stroke: var(--lime-dk); }
.side-zen { margin-top: auto; display: flex; align-items: center; gap: 10px; background: var(--deep); color: #fff; border-radius: 999px; padding: 11px 16px; font-weight: 700; font-size: 13.5px; }
body[data-theme="dark"] .side-zen { border: 1px solid rgba(159, 224, 52, 0.35); }
.side-zen .mic-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.side-zen .mic-dot svg { stroke: var(--deep); }
.side-note { font-size: 10px; color: var(--grey); font-weight: 600; padding: 10px 12px 0 12px; line-height: 1.5; }
.side-display { display: flex; flex-direction: column; gap: 7px; padding: 12px 10px 4px 10px; border-top: 1px solid var(--line); margin-top: 10px; }
.side-display .seg { align-self: flex-start; flex-wrap: wrap; }
.side-display .seg button { padding: 11px 11px; min-height: 44px; font-size: 10px; }
body.bp-tab .content { margin-left: 224px; max-width: 760px; padding: 28px 28px 60px 28px; }
body.bp-desk .content { max-width: 1020px; margin-left: auto; margin-right: auto; padding-left: 252px; }

/* forced viewport frames (View: Phone / Tablet on a wide window) */
body[data-view="phone"] .shell, body[data-view="tablet"] .shell {
  margin: 20px auto; height: calc(100vh - 40px); min-height: 0; border: 1px solid var(--greyline);
  border-radius: 24px; overflow: hidden; box-shadow: 0 14px 44px rgba(17, 25, 68, 0.28);
  display: flex; background: var(--bg);
}
body[data-view="phone"] .overlay { align-items: center; }
body[data-view="phone"] .voice-sheet { border-radius: 24px; }
body[data-view="phone"] .toast { max-width: 360px; }
/* the wall route is a full-window surface — never framed, never clipped */
body.wall-route .shell, body.wall-route[data-view="phone"] .shell, body.wall-route[data-view="tablet"] .shell { display: block; width: auto; height: auto; min-height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
body.wall-route .view-exit-chip { display: none; }
body[data-view="phone"] .shell { width: 390px; flex-direction: column; }
body[data-view="phone"] .content { flex: 1; overflow-y: auto; width: 100%; }
body[data-view="phone"] .tabbar { position: static; }
body[data-view="phone"] .chat-input { bottom: 10px; }
body[data-view="phone"] .voice-sheet, body[data-view="phone"] .modal-card { max-width: 390px; }
body[data-view="tablet"] .shell { width: 768px; flex-direction: row; }
body[data-view="tablet"] .sidebar { position: static; flex-shrink: 0; height: auto; }
body[data-view="tablet"] .content { flex: 1; overflow-y: auto; margin-left: 0; }

/* ── shared components ── */
.sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sc-title { font-size: 23px; font-weight: 700; letter-spacing: -0.3px; }
.sc-sub { font-size: 12.5px; color: var(--mut); font-weight: 600; margin: -8px 0 14px 0; line-height: 1.5; }
.back-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.back-btn svg { stroke: var(--ink); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 11.5px; font-weight: 600; color: var(--mut); }
.tag-vision { background: var(--fill2); border-radius: 999px; padding: 5px 11px; font-size: 9px; font-weight: 800; letter-spacing: 0.6px; color: var(--navy); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.good { background: var(--lime); }
.dot.fair { background: var(--amber); }
.dot.off { background: #C6CEDD; }
.label { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--mut); }
.microlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; color: var(--grey); }

.btn { border-radius: 12px; padding: 12px 18px; font-weight: 800; font-size: 13px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: var(--deep); color: #fff; }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--mut); font-weight: 700; }
.btn.lime { background: var(--lime); color: var(--deep); }

.pill { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; font-size: 12.5px; font-weight: 700; color: var(--mut); }
.pill.on { background: var(--deep); border-color: var(--deep); color: #fff; }
.pill.on svg { stroke: var(--lime); }
.pillrow { display: flex; gap: 6px; }

.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { padding: 11px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--mut); min-height: 44px; }
.seg button.on { background: var(--deep); color: #fff; }
.seg button:disabled { opacity: 0.45; cursor: not-allowed; }

.toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--knockout); position: relative; flex-shrink: 0; transition: background 0.15s; }
.toggle::before { content: ""; position: absolute; inset: -9px 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.toggle.on { background: var(--lime); }
.toggle.on::after { left: 21px; }

.ribbon { background: var(--fill2); border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; }
.safety-strip { background: var(--fill2); border-radius: 12px; padding: 11px 14px; display: flex; align-items: flex-start; gap: 9px; font-size: 11px; font-weight: 600; color: var(--navy); line-height: 1.5; }
.safety-strip svg { flex-shrink: 0; margin-top: 1px; stroke: var(--navy); }
.safety-strip.dark { background: var(--deep); color: #C9D2EE; }
.safety-strip.dark svg { stroke: var(--lime); }

.meter { height: 6px; border-radius: 999px; background: var(--card); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--lime); }

.demo-note { font-size: 10.5px; color: var(--grey); font-weight: 600; text-align: center; padding: 22px 12px 4px 12px; line-height: 1.5; }

/* ── home ── */
.statgrid { display: flex; align-items: center; }
.statgrid .stat { flex: 1; display: flex; flex-direction: column; gap: 3px; padding-left: 16px; }
.statgrid .stat:first-child { padding-left: 0; }
.statgrid .vdiv { width: 1px; height: 32px; background: var(--line); }
.stat-v { font-family: var(--disp); font-size: 18px; font-weight: 700; }
.zen-bar { width: 100%; text-align: left; background: var(--deep); border-radius: 999px; padding: 11px 14px; display: flex; align-items: center; gap: 11px; }
.zen-bar .mic-dot, .mic-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mic-dot svg { stroke: var(--deep); }
.zen-bar span { font-size: 13.5px; font-weight: 600; color: #C9D2EE; }
.roomgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.bp-tab .roomgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.room-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
.room-card:hover { border-color: var(--grey); }
.room-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.room-name { font-size: 13px; font-weight: 700; }
.presence { display: flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: var(--lime-dk); }
.presence.empty { color: var(--grey); }
.presence .dot { width: 6px; height: 6px; }
.room-temp { display: flex; align-items: baseline; gap: 6px; }
.room-temp b { font-family: var(--disp); font-size: 24px; font-weight: 700; }
.room-temp span { font-size: 11px; font-weight: 600; color: var(--grey); }
.room-line { font-size: 10.5px; font-weight: 600; color: var(--mut); }
.room-air { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--grey); }
.teaser { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.teaser .grow { flex: 1; }

/* ── room detail ── */
.detail-cols { display: flex; flex-direction: column; gap: 14px; }
body.bp-tab .detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.detail-col { display: flex; flex-direction: column; gap: 14px; }
.temp-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px 16px 16px; }
.temp-now { font-family: var(--disp); font-size: 56px; font-weight: 700; line-height: 1; }
.set-row { margin-top: 10px; display: flex; align-items: center; gap: 16px; }
.step-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.step-btn.minus { background: var(--bg); border: 1px solid var(--line); color: var(--navy); }
.step-btn.plus { background: var(--deep); color: #fff; }
.set-val { font-family: var(--disp); font-size: 26px; font-weight: 700; color: var(--navy); min-width: 64px; text-align: center; }
.slider-row { display: flex; align-items: center; gap: 12px; }
input[type="range"] { flex: 1; accent-color: var(--lime); height: 44px; }
.aq-grid { display: flex; margin-top: 10px; }
.aq-grid .stat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding-left: 14px; }
.aq-grid .stat:first-child { padding-left: 0; }
.aq-grid .vdiv { width: 1px; background: var(--line); }
.badge { border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; }
.badge.good { background: var(--lime-bg); color: var(--lime-dk); }
.badge.fair { background: var(--amber-bg); color: var(--amber-dk); }
.rowlink { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.rowlink svg.chev { margin-left: auto; stroke: var(--grey); }

/* ── settings lists ── */
.setrow { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.setrow:first-of-type { border-top: 0; }
.setrow .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.setrow .t { font-size: 13px; font-weight: 700; }
.setrow .d { font-size: 10.5px; font-weight: 600; color: var(--grey); line-height: 1.4; }
.subfield { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 10px; padding: 9px 12px; font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.subfield .end { margin-left: auto; color: var(--grey); font-weight: 600; font-size: 10.5px; }
.chips-inline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mini-pill { border-radius: 999px; padding: 12px 15px; min-height: 44px; font-size: 10.5px; font-weight: 700; background: var(--card); border: 1px solid var(--line); color: var(--grey); }
.mini-pill.on { background: var(--deep); border-color: var(--deep); color: #fff; }

/* ── autonomy ── */
.mode-card { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 14px 15px; display: flex; gap: 12px; align-items: flex-start; }
.mode-card.on { border: 2px solid var(--deep); box-shadow: 0 3px 10px rgba(17, 25, 68, 0.08); padding: 13px 14px; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C6CEDD; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.mode-card.on .radio { border-color: var(--deep); background: var(--deep); }
.mode-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mode-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mode-desc { font-size: 11.5px; font-weight: 600; color: var(--mut); line-height: 1.45; }
.tag-current { background: var(--lime-bg); border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--lime-dk); }
.tag-locked { background: var(--card); border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: var(--grey); }

/* ── zen chat ── */
.chat-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 210px); max-width: 640px; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.msg { max-width: 82%; padding: 11px 14px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--deep); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg.zen { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; display: flex; flex-direction: column; gap: 9px; }
.msg .chiprow { display: flex; gap: 7px; flex-wrap: wrap; }
.chat-chip { background: var(--lime); border-radius: 999px; padding: 12px 16px; min-height: 44px; font-size: 11px; font-weight: 800; color: var(--deep); }
.chat-chip.ghost { background: var(--bg); border: 1px solid var(--line); color: var(--mut); font-weight: 700; }
.chat-time { align-self: center; background: var(--fill1); border-radius: 999px; padding: 5px 13px; font-size: 10px; font-weight: 700; color: var(--mut); }
.chat-input { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 7px 7px 18px; position: sticky; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
body.bp-tab .chat-input { bottom: 16px; }
.chat-input input { flex: 1; border: 0; outline: none; font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: var(--ink); background: transparent; min-width: 0; }
.chat-input input::placeholder { color: var(--grey); }
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn svg { stroke: var(--lime); }

/* ── scenes ── */
.scene-row { width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.scene-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--fill1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.scene-ico svg { stroke: var(--navy); }
.step-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 13px; }
.step-row svg.ic { stroke: var(--navy); flex-shrink: 0; }
.step-row .grow { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.step-row .t { font-size: 12.5px; font-weight: 700; }
.step-row .d { font-size: 10px; font-weight: 600; color: var(--grey); }
.tag-auto { background: var(--lime-bg); border-radius: 999px; padding: 5px 10px; font-size: 9px; font-weight: 800; color: var(--lime-dk); white-space: nowrap; }
.tag-confirm { background: var(--fill2); border-radius: 999px; padding: 5px 10px; font-size: 9px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.step-state { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-state.todo { border: 2px solid var(--line); }
.step-state.run { border: 2px solid var(--lime); animation: pulse 1s infinite; }
.step-state.done { background: var(--lime); }
.step-state.done svg { stroke: var(--deep); }
.step-state.skip { background: var(--knockout); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── devices ── */
.devgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.bp-tab .devgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-card { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px; display: flex; flex-direction: column; gap: 8px; }
.dev-card:hover { border-color: var(--grey); }
.dev-top { display: flex; align-items: center; justify-content: space-between; }
.dev-top svg { stroke: var(--navy); }
.dev-name { font-size: 13px; font-weight: 700; }
.dev-state { font-size: 11px; font-weight: 700; color: var(--mut); }
.dev-state.good { color: var(--lime-dk); }
.dev-state.idle { color: var(--grey); }
.tag-proto { align-self: flex-start; border-radius: 999px; padding: 4px 9px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; }
.tag-proto.matter { background: var(--fill1); color: var(--navy); }
.tag-proto.zigbee { background: var(--amber-bg); color: var(--amber-dk); }
.tag-proto.ha { background: var(--locked-bg); color: var(--mut); }

/* ── learned ── */
.learn-card { display: flex; flex-direction: column; gap: 8px; }
.learn-head { display: flex; align-items: center; gap: 8px; }
.learn-title { font-size: 13.5px; font-weight: 700; }
.learn-ev { font-size: 11.5px; font-weight: 600; color: var(--mut); line-height: 1.5; }
.learn-status { font-size: 10.5px; font-weight: 700; color: var(--lime-dk); }
.learn-actions { display: flex; gap: 7px; align-items: center; }
.act-pill { border-radius: 999px; padding: 12px 18px; font-size: 11px; font-weight: 800; min-height: 44px; }
.act-pill.keep { background: var(--deep); color: #fff; }
.act-pill.approve { background: var(--lime); color: var(--deep); }
.act-pill.ghost { background: var(--bg); border: 1px solid var(--line); color: var(--mut); font-weight: 700; }
.practice-card { background: var(--locked-bg); border: 1px dashed var(--locked-line); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }

/* ── guests ── */
.guest-card { display: flex; flex-direction: column; gap: 10px; }
.guest-head { display: flex; align-items: center; gap: 11px; }
.guest-ava { width: 38px; height: 38px; border-radius: 12px; background: var(--fill1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guest-ava svg { stroke: var(--navy); }
.guest-name { font-size: 13.5px; font-weight: 700; }
.guest-via { font-size: 10.5px; font-weight: 600; color: var(--grey); }
.perm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.perm-name { font-size: 12px; font-weight: 700; flex: 1; min-width: 120px; }
.perm-note { font-size: 10px; font-weight: 600; color: var(--grey); width: 100%; }

/* ── energy ── */
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.hero-v { font-family: var(--disp); font-size: 40px; font-weight: 700; line-height: 1.1; }
.hero-d { font-size: 12px; font-weight: 600; color: var(--mut); }
.week-chart { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-top: 14px; }
.wbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; position: relative; }
.wbar .fill { width: 100%; max-width: 34px; background: var(--navy); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; }
.wbar:hover .fill { background: var(--deep); }
.wbar .dlab { font-size: 10px; font-weight: 700; color: var(--grey); }
.wbar .vlab { font-size: 10px; font-weight: 700; color: var(--ink); position: absolute; top: -18px; }
.wbar .tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--deep); color: #fff; font-size: 10px; font-weight: 700; border-radius: 7px; padding: 4px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 5; }
.wbar:hover .tip { opacity: 1; }
.wbar.today .dlab { color: var(--deep); font-weight: 800; }
.roombars { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.rbar { display: flex; align-items: center; gap: 10px; }
.rbar .n { width: 118px; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.rbar .track { flex: 1; height: 10px; border-radius: 999px; background: var(--fill1); overflow: hidden; }
.rbar .track > span { display: block; height: 100%; background: var(--navy); border-radius: 999px; }
.rbar .v { width: 58px; text-align: right; font-size: 11px; font-weight: 700; color: var(--mut); flex-shrink: 0; }
.energy-table { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.energy-table summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 4px 0; }
.energy-table table { border-collapse: collapse; margin-top: 6px; }
.energy-table td, .energy-table th { padding: 3px 12px 3px 0; text-align: left; font-weight: 600; }

/* ── wall dashboard ── */
.wall { background: var(--wbg); color: var(--wtext); min-height: 100vh; padding: 24px 22px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.wall a { color: var(--wlime); }
.wall-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wall-clock { font-family: var(--disp); font-size: 32px; font-weight: 700; line-height: 1; }
.wall-date { font-size: 12.5px; font-weight: 600; color: var(--wmut); margin-top: 4px; }
.wall-chips { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.wchip { display: flex; align-items: center; gap: 8px; background: var(--wpanel); border: 1px solid var(--wline); border-radius: 999px; padding: 9px 15px; font-size: 12px; font-weight: 700; }
.wchip svg { stroke: var(--wlime); }
.wall-main { display: flex; flex-direction: column; gap: 16px; flex: 1; }
body.bp-desk .wall-main { display: grid; grid-template-columns: 1fr 330px; align-items: start; }
.wall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.bp-tab .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wtile { border-radius: 18px; padding: 16px 17px; display: flex; flex-direction: column; gap: 7px; background: var(--wpanel); border: 1px solid var(--wline); }
.wtile.inuse { background: var(--wpanel2); border-color: var(--wline2); }
.wtile .nm { font-size: 13.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; color: #C6CDE8; }
.wtile.inuse .nm { color: var(--wtext); }
.wtile .tp { display: flex; align-items: baseline; gap: 8px; }
.wtile .tp b { font-family: var(--disp); font-size: 34px; font-weight: 700; line-height: 1; }
.wtile .tp span { font-size: 12px; font-weight: 600; color: var(--wfaint); }
.wtile .ln { font-size: 11.5px; font-weight: 600; color: var(--wmut); }
.wtile .ln.dim { color: var(--wfaint); }
.wtile .ln.warn { color: var(--amber); }
.wall-strip { grid-column: 1 / -1; background: var(--wpanel); border: 1px solid var(--wline); border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 0; }
.wall-strip .stat { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 3px; padding-left: 18px; }
.wall-strip .stat:first-child { padding-left: 0; }
.wall-strip .microlabel { color: var(--wfaint); }
.wall-strip .stat-v { color: var(--wtext); font-size: 18px; }
.wall-strip .stat-v.lime { color: var(--wlime); }
.wall-rail { display: flex; flex-direction: column; gap: 13px; }
.wzen { background: var(--deep); border: 1px solid rgba(159, 224, 52, 0.35); border-radius: 18px; padding: 16px 17px; display: flex; flex-direction: column; gap: 9px; width: 100%; text-align: left; }
.wzen .row { display: flex; align-items: center; gap: 11px; }
.wzen .row b { font-family: var(--disp); font-size: 16px; font-weight: 700; color: var(--wtext); }
.wzen .listen { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--wlime); }
.wzen .try { font-size: 12px; font-weight: 600; color: var(--wmut); line-height: 1.5; }
.wscenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.wscene { min-height: 60px; background: var(--wpanel); border: 1px solid var(--wline); border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--wtext); }
.wscene svg { stroke: var(--wmut); }
.wscene:hover { background: var(--wpanel2); }
.wcard { background: var(--wpanel); border: 1px solid var(--wline); border-radius: 18px; padding: 14px 17px; display: flex; flex-direction: column; gap: 9px; }
.wcard .li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; font-weight: 600; color: #C6CDE8; line-height: 1.5; }
.wcard .li .dot { margin-top: 5px; }
.wall-foot { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--wfaint); flex-wrap: wrap; }
.wall-foot .exit { margin-left: auto; font-weight: 700; }

/* ── voice overlay ── */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(14, 18, 51, 0.88); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
body.bp-tab .overlay { align-items: center; }
.voice-sheet { width: 100%; max-width: 520px; background: var(--wbg); border: 1px solid var(--wline2); border-radius: 24px 24px 0 0; padding: 24px 22px 30px 22px; color: var(--wtext); display: flex; flex-direction: column; gap: 16px; }
body.bp-tab .voice-sheet { border-radius: 24px; }
.voice-head { display: flex; align-items: center; gap: 12px; }
.voice-orb { width: 52px; height: 52px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.voice-orb svg { stroke: var(--deep); }
.voice-orb.listening { animation: orb 1.4s infinite; }
@keyframes orb { 0%, 100% { box-shadow: 0 0 0 0 rgba(159, 224, 52, 0.5); } 55% { box-shadow: 0 0 0 16px rgba(159, 224, 52, 0); } }
.voice-title { font-family: var(--disp); font-size: 18px; font-weight: 700; }
.voice-state { font-size: 11px; font-weight: 700; color: var(--wlime); letter-spacing: 0.6px; }
.voice-close { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--wpanel); display: flex; align-items: center; justify-content: center; }
.voice-close svg { stroke: var(--wmut); }
.voice-heard { font-size: 15px; font-weight: 700; color: var(--wtext); background: var(--wpanel); border-radius: 14px; padding: 12px 15px; }
.voice-heard span { color: var(--wmut); font-weight: 600; font-size: 11px; display: block; margin-bottom: 3px; letter-spacing: 0.6px; }
.trip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trip .hop { display: flex; align-items: center; gap: 6px; background: var(--wpanel); border: 1px solid var(--wline); border-radius: 999px; padding: 6px 11px; font-size: 10px; font-weight: 700; color: var(--wmut); }
.trip .hop.done { color: var(--wtext); border-color: rgba(159, 224, 52, 0.4); }
.trip .hop.done .hdot { background: var(--wlime); }
.trip .hop .hdot { width: 6px; height: 6px; border-radius: 50%; background: var(--wfaint); }
.trip .arr { color: var(--wfaint); font-size: 11px; }
.voice-reply { font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--wtext); }
.voice-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vchip { background: var(--wpanel); border: 1px solid var(--wline2); border-radius: 999px; padding: 12px 16px; font-size: 11.5px; font-weight: 700; color: var(--wtext); min-height: 44px; }
.vchip:hover { background: var(--wpanel2); }
.vchip.go { background: var(--lime); border-color: var(--lime); color: var(--deep); font-weight: 800; }
.voice-foot { font-size: 10px; font-weight: 600; color: var(--wfaint); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.voice-foot svg { flex-shrink: 0; margin-top: 1px; stroke: var(--wfaint); }

/* ── confirm modal ── */
.modal { position: fixed; inset: 0; z-index: 120; background: rgba(14, 18, 51, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.modal-title svg { stroke: var(--navy); }
.modal-body { font-size: 12.5px; font-weight: 600; color: var(--mut); line-height: 1.5; }
.modal-actions { display: flex; gap: 9px; }
.modal-actions .btn { flex: 1; }

.view-exit-chip { position: fixed; top: 14px; right: 14px; z-index: 90; display: flex; align-items: center; gap: 8px; background: var(--deep); color: #fff; border: 1px solid rgba(159, 224, 52, 0.4); border-radius: 999px; padding: 11px 16px; font-size: 11px; font-weight: 800; min-height: 44px; box-shadow: 0 6px 18px rgba(17, 25, 68, 0.3); }
.view-exit-chip .dotv { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* toast */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 130; background: var(--deep); color: #fff; border-radius: 999px; padding: 11px 18px; font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(17, 25, 68, 0.3); max-width: 90vw; text-align: center; }
body.bp-tab .toast { bottom: 32px; }