/* HOMEL Frosted Glass. Adapted glass geometry/reflections from Wessam Lauf's
   Frosted Glass 1.4.0 (MIT, see THIRD_PARTY/Frosted-Glass-LICENSE.txt).
   HOMEL palettes use graphite and warm porcelain; no external fonts or images. */
:root {
  color-scheme: dark;
  --fg-base:#141416; --fg-surface:#242426; --fg-surface-rgb:36,36,38;
  --fg-ink-rgb:244,242,237; --fg-text:#f4f2ed; --fg-muted:#bcb9b3;
  --fg-card:rgba(40,40,42,.36); --fg-control:rgba(255,255,255,.065);
  --fg-control-hover:rgba(255,255,255,.12); --fg-field:rgba(12,12,14,.42);
  --fg-line:rgba(244,242,237,.19); --fg-line-strong:rgba(244,242,237,.38);
  --fg-accent:#ecd5a3; --fg-accent-rgb:236,213,163;
  --fg-success:#9ce0bf; --fg-success-rgb:156,224,191;
  --fg-danger:#ffb4b4; --fg-danger-rgb:255,180,180;
  --fg-info:#a5c8ef; --fg-info-rgb:165,200,239;
  --fg-purple:#cab6ed; --fg-on-primary:#20201e;
  --fg-primary:#e9e5dc; --fg-primary-hover:#fffaf0;
  --fg-popup:rgba(28,28,30,.82); --fg-scrim:rgba(0,0,0,.50);
  --fg-chrome:rgba(24,24,26,.52); --fg-menu:#252527;
  --fg-plan:#202124; --fg-plan-grid:rgba(255,255,255,.10);
  --fg-card-filter:blur(10px) saturate(1.25);
  --fg-popup-filter:blur(18px) saturate(1.2);
  --fg-chrome-filter:blur(20px) saturate(1.3);
  --fg-reflection:3px 3px .5px -3.5px rgba(255,255,255,.30) inset,-2px -2px .5px -2px rgba(255,255,255,.20) inset,0 0 8px 1px rgba(255,255,255,.06) inset,0 0 2px 0 rgba(0,0,0,.18);
  --fg-depth:0 14px 38px rgba(0,0,0,.24),0 2px 10px rgba(0,0,0,.16);
  --fg-popup-shadow:0 24px 64px rgba(0,0,0,.48),0 4px 18px rgba(0,0,0,.28);
  --fg-radius:18px; --fg-wallpaper:radial-gradient(ellipse at 78% 2%,rgba(148,138,114,.20),transparent 44%),radial-gradient(ellipse at 5% 78%,rgba(105,105,112,.18),transparent 52%),linear-gradient(145deg,#222224 0%,#141416 50%,#1c1c1f 100%);
  --background:var(--fg-base); --foreground:var(--fg-text); --card:var(--fg-card);
  --primary:var(--fg-primary); --border:var(--fg-line); --material-accent:var(--fg-accent);
  --home-ink:var(--fg-text); --home-muted:var(--fg-muted); --home-line:var(--fg-line); --home-active:var(--fg-accent);
}
:root[data-theme=light] {
  color-scheme:light;
  --fg-base:#f0ede8; --fg-surface:#f9f6f1; --fg-surface-rgb:249,246,241;
  --fg-ink-rgb:38,37,35; --fg-text:#262523; --fg-muted:#625e58;
  --fg-card:rgba(255,252,247,.38); --fg-control:rgba(255,255,255,.38);
  --fg-control-hover:rgba(255,255,255,.70); --fg-field:rgba(255,255,255,.56);
  --fg-line:rgba(67,59,48,.17); --fg-line-strong:rgba(67,59,48,.38);
  --fg-accent:#795314; --fg-accent-rgb:121,83,20;
  --fg-success:#246446; --fg-success-rgb:36,100,70;
  --fg-danger:#a52c3b; --fg-danger-rgb:165,44,59;
  --fg-info:#2b5c91; --fg-info-rgb:43,92,145;
  --fg-purple:#725198; --fg-on-primary:#fffdf8;
  --fg-primary:#343432; --fg-primary-hover:#161616;
  --fg-popup:rgba(254,249,242,.86); --fg-scrim:rgba(28,26,24,.30);
  --fg-chrome:rgba(254,249,242,.48); --fg-menu:#faf7f2;
  --fg-plan:#eeebe5; --fg-plan-grid:rgba(45,42,38,.15);
  --fg-card-filter:blur(8px) saturate(1.25);
  --fg-reflection:3px 3px .5px -3.5px rgba(255,255,255,.70) inset,-2px -2px .5px -2px rgba(255,255,255,.55) inset,0 0 8px 1px rgba(255,255,255,.14) inset,0 0 2px 0 rgba(0,0,0,.10);
  --fg-depth:0 10px 32px rgba(42,37,30,.08),0 2px 8px rgba(42,37,30,.05);
  --fg-popup-shadow:0 24px 60px rgba(42,37,30,.20),0 4px 16px rgba(42,37,30,.10);
  --fg-wallpaper:radial-gradient(ellipse at 82% 0%,rgba(212,190,160,.40),transparent 48%),radial-gradient(ellipse at 2% 75%,rgba(205,205,213,.35),transparent 55%),linear-gradient(145deg,#f8f5f0,#eae5dc 65%,#f5f1eb);
}
html {background:var(--fg-base)}
body {background:var(--fg-wallpaper);background-attachment:fixed;color:var(--fg-text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
button {color:inherit}
button:disabled {opacity:.48}
label,.fine,.muted,.eyebrow {color:var(--fg-muted)}
h1,h2,h3,strong {color:inherit}
input,select,textarea {color:var(--fg-text);background:var(--fg-field);border:1px solid var(--fg-line);border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.08)}
input::placeholder,textarea::placeholder {color:var(--fg-muted);opacity:.85}
select option {color:var(--fg-text);background:var(--fg-menu)}
input[type=range],input[type=checkbox] {accent-color:var(--fg-accent)}
input[type=range] {box-shadow:none;background:transparent;cursor:pointer}
input[type=color] {padding:5px;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {outline:2px solid var(--fg-accent);outline-offset:3px}
::selection {background:rgba(var(--fg-accent-rgb),.28);color:var(--fg-text)}
/* Single glass layer: avoid nested filters, so menus and drag ghosts keep coordinates. */
.glass,.home-room,.device-card,.room-device,.dashboard-widget,
.modular-grid .modular-card,.grid-ghost.modular-card {
  background:var(--fg-card);color:var(--fg-text);border:.5px solid var(--fg-line);
  border-radius:var(--fg-radius);box-shadow:var(--fg-reflection),var(--fg-depth);
  backdrop-filter:var(--fg-card-filter);-webkit-backdrop-filter:var(--fg-card-filter);
}
.home-room,.device-card,.room-device,.dashboard-widget {transition:background-color .2s,border-color .2s,box-shadow .2s}
.home-room.is-on,.device-card.is-on,.dashboard-widget.is-on,.room-device.is-on,.modular-card.is-on {
  background:linear-gradient(135deg,rgba(var(--fg-accent-rgb),.075),transparent 65%),var(--fg-card);
  border-color:rgba(var(--fg-accent-rgb),.32);
}
.is-offline {border-style:dashed}
.device-icon,.widget-symbol,.home-room-symbol,.scene-symbol,.home-symbol,.brand>svg {
  color:var(--fg-muted);background:var(--fg-control);border:1px solid var(--fg-line);border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.10);
}
.widget-symbol {color:var(--widget-color,var(--fg-muted))}
.is-on :is(.device-icon,.widget-symbol,.home-room-symbol) {color:var(--fg-accent);background:rgba(var(--fg-accent-rgb),.13);border-color:rgba(var(--fg-accent-rgb),.25);box-shadow:none}
.home-room {min-height:82px;padding:13px;gap:4px 11px}
.home-room strong {font-size:14px;line-height:1.3}
.home-room-count {color:var(--fg-muted)}
.home-room-symbol {width:36px;height:36px}
.widget-symbol svg,.device-icon svg {stroke-width:1.7}
.widget-device-heading h3,.device-card h3 {font-weight:550}
.widget-reading strong,.device-reading strong,.temperature-values strong {font-weight:450;font-variant-numeric:tabular-nums}
.widget-device-heading p,.widget-reading small,.widget-values,.widget-values strong,.live-actual {color:var(--fg-muted)}
.widget-values strong {color:var(--fg-text)}
.primary {background:var(--fg-primary);color:var(--fg-on-primary);border-color:transparent;box-shadow:0 3px 10px rgba(0,0,0,.12);border-radius:12px}
.primary:hover {background:var(--fg-primary-hover)}
.soft,.icon-button,.chip,.quick-button,.device-open,.shutter-stop,.climate-step,.climate-power,.reqnet-power,
.climate-choices>button,.reqnet-modes>button,.weather-tabs button,.plan-room-device,.suggestion-device {
  background:var(--fg-control);border:1px solid var(--fg-line);color:var(--fg-text);box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.soft,.quick-button,.device-open,.climate-choices>button {border-radius:12px}
.text-button {color:var(--fg-muted)}
.text-button:hover {color:var(--fg-text)}
.danger {color:var(--fg-danger);background:rgba(var(--fg-danger-rgb),.10);border-color:rgba(var(--fg-danger-rgb),.25)}
.chip.active,.soft.active,.quick-button[aria-pressed=true],.climate-choices>button[aria-pressed=true],
.climate-power[aria-pressed=true],.reqnet-power[aria-pressed=true],.weather-tabs button[aria-pressed=true],.reqnet-mode[aria-pressed=true] {
  background:rgba(var(--fg-accent-rgb),.15);border-color:rgba(var(--fg-accent-rgb),.45);color:var(--fg-accent);
}
.quick-switch {display:flex;justify-content:center;align-items:center;gap:7px}
.quick-switch::after {display:none!important}
.quick-blinds .quick-button {display:flex;align-items:center;justify-content:center}
.quick-button:active:not(:disabled),.icon-button:active:not(:disabled) {transform:scale(.96)}
.live-setting,.weather-metric,.reqnet-metric {background:var(--fg-control);border:1px solid var(--fg-line);border-radius:12px;box-shadow:none}
.live-setting-head strong,.shutter-status,.shutter-percent,.shutter-slider output {color:var(--fg-accent)}
.pending-message {color:var(--fg-muted)}
.error-text,.pending-message.error,.pending-message.unconfirmed {color:var(--fg-danger)}
.pending-message.confirmed,.connection-status.connected {color:var(--fg-success)}
.connection-status.connected .small-dot {background:var(--fg-success);box-shadow:0 0 8px rgba(var(--fg-success-rgb),.24)}
/* Navigation uses the same glass as the cards, with a floating phone dock. */
.sidebar,.topbar,.bottom-nav {background:var(--fg-chrome);border-color:var(--fg-line);backdrop-filter:var(--fg-chrome-filter);-webkit-backdrop-filter:var(--fg-chrome-filter);box-shadow:none}
.sidebar {padding-top:24px}
.sidebar nav {gap:6px}
.nav-item {border-radius:14px;color:var(--fg-muted);min-height:46px}
.nav-item.active,.bottom-nav>button.active {color:var(--fg-text);background:var(--fg-control-hover);border-color:var(--fg-line);box-shadow:var(--fg-reflection)}
.brand>svg {color:var(--fg-text)}
.brand small,.sidebar-foot,.sidebar-foot small,.house-label,.breadcrumb,.connection-status {color:var(--fg-muted)}
.breadcrumb strong,.profile {color:var(--fg-text)}
.profile>span:first-child {background:var(--fg-control-hover);color:var(--fg-text);border:1px solid var(--fg-line)}
.topbar {min-height:60px;padding:8px 24px}
.top-actions {gap:9px}
.page-heading h1 {font-weight:550;font-size:25px;letter-spacing:-.7px}
.page-footer {align-items:center;color:var(--fg-muted);border-color:var(--fg-line);padding:12px 24px}
.page-footer>.text-button {font-size:11px;min-height:36px;letter-spacing:0;padding:6px 10px}
.page-footer .footer-version {display:inline;font-size:10px}
/* Dialogs remain legible on top of any card or imported plan. */
.control-dialog,.form-dialog,.tile-dialog,.plan-expanded {
  color:var(--fg-text);background:var(--fg-popup);border:1px solid var(--fg-line-strong);border-radius:28px;
  box-shadow:var(--fg-reflection),var(--fg-popup-shadow);backdrop-filter:var(--fg-popup-filter);-webkit-backdrop-filter:var(--fg-popup-filter);
}
.control-dialog::backdrop,.form-dialog::backdrop,.tile-dialog::backdrop {background:var(--fg-scrim);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.control-unit,.reqnet-unit,.climate-unit {color:var(--fg-text);background:var(--fg-control);border-color:var(--fg-line);border-radius:18px;box-shadow:none}
.control-unit .glass,.tile-dialog .tile-expanded,.tile-expanded>.widget-content,.tile-expanded>.room-card-body {background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.toast {background:var(--fg-menu);color:var(--fg-text);border-color:var(--fg-line);box-shadow:var(--fg-popup-shadow)}
.raw-details pre,.remote-config {background:var(--fg-field);color:var(--fg-text);border:1px solid var(--fg-line)}
.assignment-row,.permission-row,.audit-row,.sensor-value,.solar-row {border-color:var(--fg-line)}
.control-value,.reqnet-temperature strong,.climate-target-value {color:var(--fg-text)}
/* Climate and ventilation artwork keeps distinct warm/cool semantic readings. */
.climate-panel {--air-color:var(--fg-info)}
.climate-panel[data-mode=heat] {--air-color:var(--fg-accent)}
.climate-hero,.reqnet-diagram {background:var(--fg-control);border-color:var(--fg-line);box-shadow:inset 0 1px rgba(255,255,255,.10)}
.climate-ac {background:linear-gradient(170deg,var(--fg-primary),var(--fg-muted));border-color:var(--fg-line-strong);box-shadow:0 8px 18px rgba(0,0,0,.16)}
.climate-ac-vent {background:#28282a;border-color:#18181a}
.climate-ac-led {background:#74746e}.is-running .climate-ac-led {background:#83ecc0}
.reqnet-stream {--flow-color:var(--fg-success)}
.reqnet-stream.extract {--flow-color:var(--fg-accent)}
.reqnet-fan {background:var(--fg-menu);border-color:var(--fg-line)}
/* Independent slat rotation and height clipping remain driven by live values. */
.shutter-window {background:linear-gradient(145deg,rgba(var(--fg-info-rgb),.14),transparent),var(--fg-field);border-color:var(--fg-muted);box-shadow:inset 0 0 22px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.10)}
.shutter-window::after {background:var(--fg-primary);box-shadow:0 2px 5px rgba(0,0,0,.22)}
.shutter-slat {background:linear-gradient(var(--fg-primary),var(--fg-muted) 68%,var(--fg-primary));box-shadow:0 2px 3px rgba(0,0,0,.22)}
.shutter-graphic.position-unknown .shutter-window {background:repeating-linear-gradient(135deg,var(--fg-control) 0 8px,transparent 8px 16px),var(--fg-field)}
.shutter-graphic.is-moving .shutter-window {box-shadow:0 0 0 1px rgba(var(--fg-accent-rgb),.45),0 4px 22px rgba(var(--fg-accent-rgb),.12)}
/* Plan artwork is untouched; only its stage, labels and controls are themed. */
.plan-viewport,.mini-plan {background:radial-gradient(var(--fg-plan-grid) .8px,transparent .8px),var(--fg-plan);background-size:18px 18px;box-shadow:inset 0 0 30px rgba(0,0,0,.06);border-color:var(--fg-line)}
.plan-room-shape {stroke:var(--fg-muted)}
.plan-room-shape[data-room-id]:hover {fill:var(--fg-accent)}
.plan-room-draft polyline {stroke:var(--fg-text)}
.plan-room-draft circle {fill:var(--fg-accent)}
.fp-marker-face>button,.mini-plan-device,.plan-room-label>button,.plan-blind-controls {color:var(--fg-text);background:var(--fg-popup);border-color:var(--fg-line-strong);box-shadow:var(--fg-reflection),0 5px 15px rgba(0,0,0,.15);backdrop-filter:var(--fg-card-filter);-webkit-backdrop-filter:var(--fg-card-filter)}
.fp-marker.is-on .fp-marker-face>button,.mini-plan-device.is-on {background:var(--fg-menu);border-color:var(--fg-accent);box-shadow:0 0 0 2px rgba(var(--fg-accent-rgb),.15);color:var(--fg-accent)}
.fp-marker.selected .fp-marker-face>button {outline-color:var(--fg-accent)}
.marker-label,.marker-value {background:var(--fg-menu);color:var(--fg-text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.marker-value {color:var(--fg-accent)}
.plan-tool-notice {background:var(--fg-menu);color:var(--fg-text);border-color:var(--fg-accent)}
.plan-viewport .empty {background:var(--fg-plan);color:var(--fg-muted)}
.plan-blind-controls .plan-blind-action {background:var(--fg-control-hover)}
.plan-layout.plan-expanded {background:var(--fg-menu)}
.widget-icon-preview,#marker-icon-preview {background:var(--fg-control);border:1px solid var(--fg-line)}
/* SVG chart tokens change immediately, even while a cached chart is displayed. */
.energy-chart {background:var(--fg-control);border:1px solid var(--fg-line);border-radius:14px}
.energy-chart text {fill:var(--fg-muted)}
.energy-chart line {stroke:var(--fg-line)}
.energy-chart path:nth-of-type(1) {stroke:var(--fg-success)}
.energy-chart path:nth-of-type(2) {stroke:var(--fg-accent)}
.energy-chart path:nth-of-type(3) {stroke:var(--fg-purple)}
.energy-live strong {color:var(--fg-text)}
.camera-frame {background:#0b0b0d}
.weather-summary>svg,.weather-hero>svg {color:var(--fg-accent)}
.weather-summary>small,.weather-summary>span {color:var(--fg-muted)}
.weather-metric strong,.weather-day strong {color:var(--fg-text)}
/* Grid geometry stays owned by the layout engine, independently of appearance. */
.modular-grid .modular-card,.grid-ghost.modular-card {border-radius:18px}
.dashboard-editing .modular-card>.widget-content,.modular-card.layout-editing>.room-card-body {opacity:.78}
.modular-card.selected,.modular-card:focus-within {border-color:var(--fg-accent)}
.modular-card.selected {box-shadow:var(--fg-reflection),0 0 0 1px rgba(var(--fg-accent-rgb),.30)}
.modular-grid .grid-placeholder {background:rgba(var(--fg-accent-rgb),.07);border:1px dashed var(--fg-accent);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.grid-ghost.modular-card {border-color:var(--fg-accent);background:var(--fg-menu);box-shadow:var(--fg-popup-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.modular-card :is(.widget-toolbar,.room-card-toolbar,.widget-resize,.room-card-resize),.tile-size {color:var(--fg-text);background:var(--fg-menu);border-color:var(--fg-line-strong);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tile-expand {color:var(--fg-muted)}
.tile-expand:hover {background:var(--fg-control-hover);color:var(--fg-text)}
.modular-card .widget-device-heading p {color:var(--fg-muted)}
.modular-card[data-kind=clock] .widget-content>svg {color:var(--fg-muted)}
.modular-grid.grid-in-motion {background-image:radial-gradient(circle,var(--fg-line-strong) 1px,transparent 1px)}
.modular-card .scene-card,.dashboard-widget .scene-card {border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Appearance is reachable before login, in the header and in the footer. */
.theme-toggle svg {height:19px;width:19px}
.theme-moon {display:none}:root[data-theme=light] .theme-sun {display:none}:root[data-theme=light] .theme-moon {display:block}
.auth-appearance {position:absolute;right:24px;top:20px;z-index:2;display:flex;align-items:center;gap:8px}
body:has(#auth[hidden])>.auth-appearance {display:none}
.auth-copy .brand {margin-bottom:55px}
.auth-card {box-shadow:var(--fg-reflection),var(--fg-popup-shadow);border-radius:28px}
.theme-dialog {width:460px}
.theme-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.theme-option {min-width:0;display:flex;flex-direction:column;gap:10px;align-items:center;border:1px solid var(--fg-line);border-radius:16px;background:var(--fg-control);padding:10px 8px;font-size:12px;color:var(--fg-text)}
.theme-option[aria-pressed=true] {border-color:var(--fg-accent);box-shadow:0 0 0 1px var(--fg-accent);background:rgba(var(--fg-accent-rgb),.09)}
.theme-sample {display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;height:62px;border-radius:9px;padding:9px;border:1px solid rgba(128,128,128,.2)}
.theme-sample span {border:1px solid rgba(255,255,255,.45);border-radius:5px;background:rgba(255,255,255,.16);box-shadow:0 2px 4px rgba(0,0,0,.06)}
.theme-sample span:first-child {grid-row:span 2}
.sample-light {background:linear-gradient(140deg,#f8f3ea,#d6c8b8)}
.sample-dark {background:linear-gradient(140deg,#494845,#161618)}
.sample-system {background:linear-gradient(115deg,#e6ded2 50%,#242426 50%)}
.theme-lite-label {display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--fg-line);padding:18px 0;margin:0 0 8px;font-size:13px;color:var(--fg-text)}
.theme-lite-label small {display:block;font-size:11px;color:var(--fg-muted);margin-top:4px}
.theme-lite-label input {flex:none;width:22px;height:22px}
.offline-page {margin:0;min-height:100svh;display:grid;place-items:center;padding:20px;box-sizing:border-box}
.offline-card {max-width:420px;padding:30px;line-height:1.6}
.offline-card img {border-radius:18px}.offline-card h1 {font-size:27px;line-height:1.2;margin:22px 0 12px}
.offline-card p {color:var(--fg-muted);font-size:14px;margin:0 0 24px}
.offline-card a {display:inline-flex;padding:11px 18px;text-decoration:none;font-size:14px}
:root[data-glass=lite] {--fg-card-filter:none;--fg-popup-filter:none;--fg-chrome-filter:none;--fg-popup:var(--fg-menu);--fg-chrome:var(--fg-menu)}
:root[data-glass=lite] :is(.glass,.modular-card,.plan-room-label>button,.fp-marker-face>button,.plan-tool-notice,.plan-expanded),
:root[data-glass=lite] dialog::backdrop {backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root {--fg-card:var(--fg-surface);--fg-popup:var(--fg-menu);--fg-chrome:var(--fg-menu)}
}
@media(hover:hover) {
  .home-room:hover,.device-card:hover,.dashboard-widget:hover,.room-device:hover {background-color:var(--fg-control-hover);border-color:var(--fg-line-strong);box-shadow:var(--fg-reflection),var(--fg-depth)}
  .home-room:hover {background-image:none}
  .soft:hover:not(:disabled),.icon-button:hover:not(:disabled),.quick-button:hover:not(:disabled),.widget-symbol:hover:not(:disabled),.suggestion-device:hover:not(:disabled) {background:var(--fg-control-hover)}
}
@media(max-width:700px) {
  .workspace main {padding:12px 10px 18px}
  .topbar {padding:8px 10px;min-height:56px}
  .top-actions {gap:5px}
  .top-actions .theme-toggle {width:36px;min-width:36px}
  .topbar #fullscreen {display:none}
  .connection-status {font-size:9px;max-width:95px}
  #status-label {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-left:before {font-size:15px;letter-spacing:1.5px}
  .page-heading h1 {font-size:22px}
  .home-room {min-height:70px;padding:10px;grid-template-columns:30px minmax(0,1fr);gap:3px 9px}
  .home-room-symbol {width:30px;height:30px;border-radius:11px}
  .home-room strong {font-size:12px}
  .home-room-count {font-size:10px}
  .modular-grid .modular-card {border-radius:18px}
  .bottom-nav {bottom:max(8px,env(safe-area-inset-bottom));left:10px;right:10px;border:.5px solid var(--fg-line-strong);border-radius:22px;padding:5px;box-shadow:var(--fg-reflection),var(--fg-depth);gap:2px}
  .bottom-nav>button {min-height:48px;border-radius:16px;padding:6px 2px;color:var(--fg-muted);font-size:9px;min-width:0;flex:1}
  .bottom-nav>button svg {width:19px;height:19px}
  .page-footer {padding:8px 12px calc(90px + env(safe-area-inset-bottom));gap:8px}
  .page-footer .footer-version {font-size:9px}
  .page-footer>.text-button {font-size:10px}
  .control-dialog,.form-dialog,.tile-dialog {max-height:calc(100dvh - 24px);max-width:calc(100vw - 16px);border-radius:24px}
  .plan-layout.plan-expanded {border-radius:0}
  .auth-appearance {top:12px;right:14px}
  .auth-page {padding-top:76px}
  .auth-copy .brand {margin-bottom:20px}
  .theme-options {gap:7px}.theme-option {font-size:11px;padding:8px 6px}
  .theme-sample {height:56px;padding:7px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}