:root {
  color-scheme: light;
  --primary: #087a57;
  --primary-strong: #066545;
  --primary-soft: #d8f6e8;
  --primary-text: #0a4f3a;
  --on-primary: #ffffff;
  --background: #f4f7f5;
  --surface: #ffffff;
  --surface-muted: #e7ede9;
  --text: #17201c;
  --text-muted: #5b6861;
  --outline: #d8e0db;
  --danger: #ba1a1a;
  --warning: #a56600;
  --success: #16835a;
  --shadow: 0 18px 50px rgba(26, 54, 42, .10);
  --soft-shadow: 0 7px 22px rgba(26, 54, 42, .07);
  --topbar-height: 76px;
  --topbar-safe-area-top: env(safe-area-inset-top);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #2fa6b4;
  --primary-strong: #58b8c3;
  --primary-soft: #20393d;
  --primary-text: #59b7c2;
  --on-primary: #111416;
  --background: #17171a;
  --surface: #212124;
  --surface-muted: #2b2b2f;
  --text: #d0cfd2;
  --text-muted: #98979d;
  --outline: #3d3d43;
  --danger: #e6a39c;
  --warning: #d5b56f;
  --success: #69b895;
  --shadow: 0 18px 50px rgba(0, 0, 0, .20);
  --soft-shadow: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #2fa6b4;
    --primary-strong: #58b8c3;
    --primary-soft: #20393d;
    --primary-text: #59b7c2;
    --on-primary: #111416;
    --background: #17171a;
    --surface: #212124;
    --surface-muted: #2b2b2f;
    --text: #d0cfd2;
    --text-muted: #98979d;
    --outline: #3d3d43;
    --danger: #e6a39c;
    --warning: #d5b56f;
    --success: #69b895;
    --shadow: 0 18px 50px rgba(0, 0, 0, .20);
    --soft-shadow: none;
  }
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--background); }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--text);
  overflow-x: hidden;
}
body.config-open { overflow: hidden; }
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
body::before { opacity: .82; }
body::after { opacity: .52; }
:root[data-background-style="minimal"] body::before,
:root[data-background-style="minimal"] body::after,
:root[data-background-style="minimal"] .config-dialog::before,
:root[data-background-style="minimal"] .config-dialog::after,
:root[data-background-style="minimal"] .ambient { display: none; }
:root[data-background-style="orbits"] body::before,
:root[data-background-style="orbits"] .config-dialog::before {
  background:
    radial-gradient(circle at 9% 24%, transparent 0 118px, color-mix(in srgb, var(--primary) 18%, transparent) 119px 121px, transparent 122px),
    radial-gradient(circle at 88% 72%, transparent 0 185px, color-mix(in srgb, var(--primary) 14%, transparent) 186px 188px, transparent 189px),
    linear-gradient(118deg, transparent 0 62%, color-mix(in srgb, var(--primary) 9%, transparent) 62.1% 62.3%, transparent 62.4%);
}
:root[data-background-style="orbits"] body::after,
:root[data-background-style="orbits"] .config-dialog::after {
  background: radial-gradient(circle at 79% 8%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 32%);
}
:root[data-background-style="lines"] body::before,
:root[data-background-style="lines"] .config-dialog::before {
  background: repeating-linear-gradient(118deg, transparent 0 91px, color-mix(in srgb, var(--primary) 16%, transparent) 92px 94px, transparent 95px 176px);
}
:root[data-background-style="lines"] body::after,
:root[data-background-style="lines"] .config-dialog::after {
  background: linear-gradient(145deg, transparent 12%, color-mix(in srgb, var(--primary) 18%, transparent) 12.2%, transparent 12.7% 74%, color-mix(in srgb, var(--primary) 13%, transparent) 74.2%, transparent 74.7%);
}
:root[data-background-style="grid"] body::before,
:root[data-background-style="grid"] .config-dialog::before {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--primary) 12%, transparent) 0 1px, transparent 1px 64px);
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}
:root[data-background-style="grid"] body::after,
:root[data-background-style="grid"] .config-dialog::after {
  background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%);
}
:root[data-background-style="glow"] body::before,
:root[data-background-style="glow"] .config-dialog::before {
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--primary) 32%, transparent), transparent 34%),
    radial-gradient(circle at 84% 74%, color-mix(in srgb, var(--primary-strong) 24%, transparent), transparent 36%);
  filter: blur(12px);
}
:root[data-background-style="glow"] body::after,
:root[data-background-style="glow"] .config-dialog::after { display: none; }
:root[data-background-style="balloons"] body::before,
:root[data-background-style="balloons"] .config-dialog::before {
  opacity: .54;
  background:
    radial-gradient(ellipse 28px 36px at 42px 48px, color-mix(in srgb, #f06f9f 42%, transparent) 0 96%, transparent 100%) 0 0 / 238px 258px,
    radial-gradient(ellipse 24px 31px at 146px 105px, color-mix(in srgb, #67b7e8 38%, transparent) 0 96%, transparent 100%) 0 0 / 274px 244px,
    radial-gradient(ellipse 26px 34px at 214px 28px, color-mix(in srgb, #f2bc4e 38%, transparent) 0 96%, transparent 100%) 0 0 / 326px 286px;
}
:root[data-background-style="balloons"] body::after,
:root[data-background-style="balloons"] .config-dialog::after {
  opacity: .28;
  background:
    repeating-linear-gradient(77deg, transparent 0 74px, color-mix(in srgb, var(--primary) 18%, transparent) 75px 76px, transparent 77px 156px),
    radial-gradient(circle, color-mix(in srgb, #f06f9f 38%, transparent) 0 2px, transparent 3px) 18px 16px / 92px 84px,
    radial-gradient(circle, color-mix(in srgb, #67b7e8 34%, transparent) 0 2px, transparent 3px) 56px 51px / 114px 102px;
}
:root[data-background-style="ice"] body::before,
:root[data-background-style="ice"] .config-dialog::before {
  opacity: .46;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 27deg, color-mix(in srgb, #72c9ee 26%, transparent) 28deg 30deg, transparent 31deg 60deg) 0 0 / 190px 190px,
    radial-gradient(circle at 18% 22%, color-mix(in srgb, #a8e7ff 34%, transparent), transparent 32%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, #8c8fe8 24%, transparent), transparent 36%);
}
:root[data-background-style="ice"] body::after,
:root[data-background-style="ice"] .config-dialog::after {
  opacity: .25;
  background:
    linear-gradient(120deg, transparent 0 44%, color-mix(in srgb, #d5f5ff 42%, transparent) 44.4% 45%, transparent 45.4%) 0 0 / 164px 142px,
    linear-gradient(60deg, transparent 0 46%, color-mix(in srgb, #80cce9 30%, transparent) 46.4% 47%, transparent 47.4%) 36px 22px / 190px 166px;
}
:root[data-background-style="snowmen"] body::before,
:root[data-background-style="snowmen"] .config-dialog::before {
  opacity: .36;
  background:
    radial-gradient(circle at 52px 50px, color-mix(in srgb, var(--text) 72%, transparent) 0 2px, transparent 2.6px) 0 0 / 208px 212px,
    radial-gradient(circle at 66px 50px, color-mix(in srgb, var(--text) 72%, transparent) 0 2px, transparent 2.6px) 0 0 / 208px 212px,
    radial-gradient(circle at 59px 57px, color-mix(in srgb, #e99235 76%, transparent) 0 2.5px, transparent 3px) 0 0 / 208px 212px,
    radial-gradient(circle at 59px 91px, color-mix(in srgb, var(--primary) 52%, transparent) 0 2.5px, transparent 3px) 0 0 / 208px 212px,
    radial-gradient(circle at 59px 107px, color-mix(in srgb, var(--primary) 52%, transparent) 0 2.5px, transparent 3px) 0 0 / 208px 212px,
    radial-gradient(circle at 59px 55px, color-mix(in srgb, var(--surface) 90%, #fff) 0 20px, color-mix(in srgb, #a9ddec 38%, transparent) 20.5px 22px, transparent 22.5px) 0 0 / 208px 212px,
    radial-gradient(circle at 59px 101px, color-mix(in srgb, var(--surface) 92%, #fff) 0 34px, color-mix(in srgb, #a9ddec 34%, transparent) 34.5px 36px, transparent 36.5px) 0 0 / 208px 212px;
}
:root[data-background-style="snowmen"] body::after,
:root[data-background-style="snowmen"] .config-dialog::after {
  opacity: .28;
  background: radial-gradient(circle, color-mix(in srgb, #d8f4ff 68%, transparent) 0 3px, transparent 3.5px) 0 0 / 54px 62px;
}
:root[data-theme="dark"][data-background-style="snowmen"] body::before,
:root[data-theme="dark"][data-background-style="snowmen"] .config-dialog::before { opacity: .46; }
:root[data-theme="dark"][data-background-style="snowmen"] body::after,
:root[data-theme="dark"][data-background-style="snowmen"] .config-dialog::after { opacity: .16; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-background-style="snowmen"] body::before,
  :root:not([data-theme="light"])[data-background-style="snowmen"] .config-dialog::before { opacity: .46; }
  :root:not([data-theme="light"])[data-background-style="snowmen"] body::after,
  :root:not([data-theme="light"])[data-background-style="snowmen"] .config-dialog::after { opacity: .16; }
}
:root[data-background-style="lines"] .ambient,
:root[data-background-style="grid"] .ambient { opacity: .16; }
:root[data-background-style="glow"] .ambient { opacity: .52; filter: blur(26px); }
:root[data-background-style="balloons"] .ambient { opacity: .18; }
:root[data-background-style="ice"] .ambient,
:root[data-background-style="snowmen"] .ambient { opacity: .24; }

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { width: 1.5rem; height: 1.5rem; fill: currentColor; display: block; }
[hidden] { display: none !important; }

.ambient {
  position: fixed;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  opacity: .4;
}
.ambient-one { right: -17rem; top: -17rem; background: var(--primary-soft); }
.ambient-two { left: -22rem; bottom: -23rem; background: color-mix(in srgb, var(--primary) 28%, #dceef9); opacity: .25; }
:root[data-theme="dark"] .ambient-two { background: color-mix(in srgb, var(--primary) 28%, #202940); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ambient-two { background: color-mix(in srgb, var(--primary) 28%, #202940); }
}

.app-shell { position: relative; z-index: 1; min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: calc(var(--topbar-height) + var(--topbar-safe-area-top));
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: var(--topbar-safe-area-top) clamp(1rem, 3vw, 2.5rem) 0;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--outline) 65%, transparent);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--primary-text);
  background: var(--primary-soft);
}
.brand-mark svg { width: 24px; height: 24px; }
.brand span:last-child { display: flex; min-width: 0; flex-direction: column; }
.brand strong { font-size: 1.05rem; letter-spacing: -.025em; }
.brand small { margin-top: 1px; color: var(--text-muted); font-size: .72rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .45rem; }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}
.icon-button:hover { background: var(--surface-muted); }
.icon-button:active { transform: scale(.94); }
.icon-button svg { width: 21px; height: 21px; }

.connection-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: .4rem .72rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--success) 11%, transparent);
  color: var(--success);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}
.connection-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.connection-pill.waiting { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.connection-pill.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.connection-pill.discovering i { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.72); } }


.content { width: min(1120px, 100%); margin: 0 auto; padding: 1.8rem clamp(1rem, 3vw, 2.5rem) 4rem; }

.hero {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  margin: .4rem 0 1.5rem;
}
.hero-copy { min-width: 0; flex: 1; }
.eyebrow { color: var(--primary); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.hero h1 { margin: .3rem 0 .4rem; font-size: clamp(2rem, 7vw, 3.25rem); line-height: 1.02; letter-spacing: -.055em; }
.hero p { margin: 0; color: var(--text-muted); }
.room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.room-card, .room-hero {
  --room-color: #15956a;
  --room-soft: color-mix(in srgb, var(--room-color) 15%, var(--surface));
  --room-end: color-mix(in srgb, var(--room-color) 24%, var(--surface));
  --room-accent: color-mix(in srgb, var(--room-color) 78%, var(--text));
  --room-ink: color-mix(in srgb, var(--room-color) 38%, var(--text));
}
.room-card {
  position: relative;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--room-accent) 10%, transparent);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--room-soft), var(--room-end));
  color: var(--room-ink);
  box-shadow: var(--soft-shadow);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
:root[data-theme="dark"] .room-card, :root[data-theme="dark"] .room-hero {
  --room-soft: color-mix(in srgb, var(--room-color) 18%, var(--surface));
  --room-end: color-mix(in srgb, var(--room-color) 27%, var(--surface));
  --room-accent: color-mix(in srgb, var(--room-color) 54%, var(--text));
  --room-ink: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .room-card, :root:not([data-theme="light"]) .room-hero {
    --room-soft: color-mix(in srgb, var(--room-color) 18%, var(--surface));
    --room-end: color-mix(in srgb, var(--room-color) 27%, var(--surface));
    --room-accent: color-mix(in srgb, var(--room-color) 54%, var(--text));
    --room-ink: var(--text);
  }
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.room-card:active { transform: scale(.985); }
.room-card::after { content: ""; position: absolute; right: -40px; top: -55px; width: 150px; height: 150px; border: 26px solid color-mix(in srgb, var(--room-accent) 8%, transparent); border-radius: 50%; }
.room-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; background: color-mix(in srgb, var(--room-accent) 13%, transparent); color: var(--room-accent); }
.room-icon svg { width: 40px; height: 40px; }
.room-card h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.room-card p { margin: .3rem 0 0; opacity: .72; font-size: .82rem; }
.room-card .chevron { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: color-mix(in srgb, var(--room-accent) 12%, transparent); color: var(--room-accent); font-size: 1.2rem; }

.empty-home { padding: 4rem 1.5rem; border: 1px dashed var(--outline); border-radius: 28px; text-align: center; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.empty-home svg { width: 54px; height: 54px; margin: 0 auto 1rem; color: var(--primary); }
.empty-home h2 { margin: 0 0 .5rem; }
.empty-home p { margin: 0 auto 1.2rem; max-width: 520px; color: var(--text-muted); }

.room-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: 1.25rem;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--room-soft), color-mix(in srgb, var(--room-end) 70%, var(--surface)));
  color: var(--room-ink);
}
.room-hero .room-icon { flex: 0 0 72px; width: 72px; height: 72px; color: var(--room-accent); background: color-mix(in srgb, var(--room-accent) 13%, transparent); }
.room-hero-copy { min-width: 0; flex: 1; }
.room-hero h1 { margin: 0; font-size: clamp(1.65rem, 6vw, 2.3rem); letter-spacing: -.04em; }
.room-hero p { margin: .2rem 0 0; opacity: .75; }
.layout-edit-bar { display: flex; align-items: center; gap: 1rem; margin: -0.65rem 0 1.25rem; padding: .8rem 1rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--outline)); border-radius: 18px; background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface)); box-shadow: var(--soft-shadow); }
.layout-edit-bar > div { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
.layout-edit-bar > div > svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--primary-text); }
.layout-edit-bar strong, .layout-edit-bar small { display: block; }
.layout-edit-bar strong { color: var(--text); font-size: .82rem; }
.layout-edit-bar small { margin-top: .12rem; color: var(--text-muted); font-size: .7rem; }
.layout-edit-actions { display: flex; align-items: center; gap: .45rem; }
.layout-edit-actions button { min-height: 40px; padding: .55rem .8rem; }

.device-section { margin-top: 1.5rem; }
.device-section-header { display: flex; align-items: center; margin-bottom: .65rem; }
.device-section-header h2 { margin: 0; font-size: 1.05rem; }
.count-badge { margin-left: auto; min-width: 28px; padding: .24rem .55rem; border-radius: 99px; background: var(--surface-muted); color: var(--text-muted); text-align: center; font-size: .72rem; font-weight: 800; }
.device-list { display: grid; gap: .65rem; }
.device-list.layout-drop-zone { min-height: 78px; padding: .3rem; border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--outline)); border-radius: 24px; background: color-mix(in srgb, var(--primary) 3%, transparent); }
.device-card {
  position: relative;
  padding: 1rem;
  border: 1px solid var(--outline);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}
.device-card.layout-editing { border-style: dashed; border-color: color-mix(in srgb, var(--device-color, var(--primary)) 45%, var(--outline)); cursor: grab; user-select: none; -webkit-user-select: none; }
.device-card.layout-editing:active { cursor: grabbing; }
.device-card.layout-editing .device-main { padding-right: 2.8rem; }
.device-card.layout-dragging { z-index: 3; opacity: .5; border-style: solid; border-color: var(--device-color, var(--primary)); box-shadow: var(--shadow); transform: scale(.985); }
.device-drag-handle { position: absolute; z-index: 4; right: .65rem; top: .65rem; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid color-mix(in srgb, var(--device-color, var(--primary)) 25%, var(--outline)); border-radius: 12px; background: color-mix(in srgb, var(--device-color, var(--primary)) 10%, var(--surface)); color: var(--device-color, var(--primary)); cursor: grab; touch-action: none; }
.device-drag-handle:active { cursor: grabbing; }
.device-drag-handle:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px; }
.device-drag-handle svg { width: 22px; height: 22px; }
.device-card[data-long-press-action] { position: relative; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.device-card[data-long-press-action]::after { content: ""; position: absolute; z-index: 2; left: 0; bottom: 0; width: 0; height: 4px; background: var(--device-color, var(--primary)); pointer-events: none; }
.device-card.long-press-holding { border-color: color-mix(in srgb, var(--device-color, var(--primary)) 48%, var(--outline)); transform: scale(.985); }
.device-card.long-press-holding::after { animation: long-press-progress .65s linear forwards; }
.device-card.long-press-triggered { border-color: var(--device-color, var(--primary)); background: color-mix(in srgb, var(--device-color, var(--primary)) 7%, var(--surface)); }
@keyframes long-press-progress { from { width: 0; } to { width: 100%; } }
.device-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.device-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 16px; background: var(--surface-muted); color: var(--text-muted); }
.device-icon.active { background: color-mix(in srgb, var(--device-color, var(--primary)) 14%, transparent); color: var(--device-color, var(--primary)); }
.device-icon.warning { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.device-icon svg { width: 27px; height: 27px; }
.device-copy { min-width: 0; flex: 1; }
.device-copy strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .96rem; }
.device-meta-row { display: flex; align-items: center; gap: .4rem; min-width: 0; margin-top: .18rem; }
.device-action-indicator { display: inline-flex; align-items: center; gap: .36rem; min-width: 0; color: var(--device-color, var(--primary-text)); font-size: .7rem; font-weight: 780; white-space: nowrap; }
.device-action-indicator i { width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: busy-indicator-spin .72s linear infinite; }
.device-group-badge { flex: 0 0 auto; padding: .22rem .42rem; border-radius: 7px; background: color-mix(in srgb, var(--device-color, var(--primary)) 12%, transparent); color: var(--device-color, var(--primary)); font-size: .56rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.device-pin-badge { display: inline-flex; align-items: center; gap: .22rem; flex: 0 0 auto; padding: .22rem .42rem; border-radius: 7px; background: color-mix(in srgb, #d88b00 13%, transparent); color: #8a5700; font-size: .56rem; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
:root[data-theme="dark"] .device-pin-badge { color: #ffd27a; }
.device-pin-badge svg { width: 11px; height: 11px; }
.device-copy small { display: block; min-width: 0; overflow: hidden; color: var(--text-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.device-value { font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
.device-card[data-type="light"] { --device-color: #b87300; }
.device-card[data-type="socket"] { --device-color: #1873a5; }
.device-card[data-type="blind"] { --device-color: #7051a8; }
.device-card[data-type="climate"] { --device-color: #a94732; }
.device-card[data-type="sensor"] { --device-color: #147c75; }
.device-card[data-type="logic"] { --device-color: #7a4db3; }
.device-card[data-device-class="illuminance"] { --device-color: #b87300; }
:root[data-theme="dark"] .device-card[data-type="light"] { --device-color: #ffcf70; }
:root[data-theme="dark"] .device-card[data-type="socket"] { --device-color: #8dccf4; }
:root[data-theme="dark"] .device-card[data-type="blind"] { --device-color: #c8b4f3; }
:root[data-theme="dark"] .device-card[data-type="climate"] { --device-color: #f3a58f; }
:root[data-theme="dark"] .device-card[data-type="sensor"] { --device-color: #85d7d0; }
:root[data-theme="dark"] .device-card[data-type="logic"] { --device-color: #d0b3f3; }
:root[data-theme="dark"] .device-card[data-device-class="illuminance"] { --device-color: #ffcf70; }

.switch { position: relative; width: 48px; height: 28px; flex: 0 0 48px; border: 0; border-radius: 99px; background: var(--surface-muted); cursor: pointer; transition: background .18s; }
.switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: transform .18s, background .18s; }
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(20px); background: #fff; }
.switch:disabled, .control-button:disabled, input:disabled { opacity: .42; cursor: not-allowed; }
.device-card.action-pending .switch:disabled, .device-card.action-pending .control-button:disabled, .device-card.action-pending .round-control:disabled, .device-card.action-pending .rgb-color-panel:disabled, .device-card.action-pending input:disabled { opacity: .65; cursor: default; }
.controls-row { display: flex; gap: .55rem; margin-top: .85rem; }
.blind-progress { height: 8px; margin-top: .85rem; overflow: hidden; border-radius: 99px; background: var(--surface-muted); }
.blind-progress span { display: block; height: 100%; border-radius: inherit; background: var(--device-color, var(--primary)); transition: width .2s linear; }
.blind-setpoint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(105px, auto); align-items: end; gap: .7rem; margin-top: .8rem; padding: .65rem .75rem; border-radius: 14px; background: var(--background); }
.blind-setpoint label { min-width: 0; }
.blind-setpoint input { min-height: 30px; padding: 0; accent-color: var(--device-color, var(--primary)); }
.blind-setpoint output { padding-bottom: .25rem; color: var(--text-muted); font-size: .72rem; font-weight: 760; text-align: right; }
.illuminance-meter { height: 8px; margin-top: .85rem; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, #1b4f72 28%, var(--surface-muted)), color-mix(in srgb, #f4c95d 30%, var(--surface-muted))); }
.illuminance-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b82a0, #e4a900); transition: width .2s ease; }
.rgb-color-panel { display: block; width: 100%; height: 104px; margin-top: .8rem; padding: 0; border: 4px solid var(--surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--outline), inset 0 0 20px rgba(0, 0, 0, .08); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.rgb-color-panel:hover:not(:disabled), .rgb-color-panel:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 0 20px rgba(0, 0, 0, .08); outline: none; }
.rgb-color-panel:disabled { opacity: .42; cursor: not-allowed; }
.control-button { flex: 1; min-height: 44px; border: 0; border-radius: 14px; background: var(--surface-muted); cursor: pointer; font-weight: 720; }
.control-button:hover { background: color-mix(in srgb, var(--primary) 15%, var(--surface-muted)); }
.logic-execute-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid color-mix(in srgb, var(--device-color) 32%, var(--outline)); color: var(--device-color); }
.logic-execute-button svg { width: 19px; height: 19px; }
.group-power-controls { margin-top: .75rem; }
.group-power-controls .control-button { border: 1px solid var(--outline); }
.group-power-on.selected { border-color: color-mix(in srgb, var(--success) 55%, var(--outline)); background: color-mix(in srgb, var(--success) 17%, var(--surface)); color: var(--success); }
.group-power-off.selected { border-color: color-mix(in srgb, var(--text-muted) 45%, var(--outline)); background: var(--surface-muted); color: var(--text); }
.range-row { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; color: var(--text-muted); font-size: .75rem; }
.range-row input { flex: 1; accent-color: var(--primary); }
.thermostat-control { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .9rem; }
.round-control { width: 48px; height: 48px; border: 0; border-radius: 15px; background: var(--primary-soft); color: var(--primary-text); cursor: pointer; font-size: 1.35rem; }
.target-temperature { min-width: 85px; text-align: center; font-size: 2rem; font-weight: 820; letter-spacing: -.04em; }
.state-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border-radius: 99px; background: color-mix(in srgb, var(--success) 11%, transparent); color: var(--success); font-size: .72rem; font-weight: 800; }
.state-tag.open { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.state-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

dialog { color: var(--text); }
dialog::backdrop { background: color-mix(in srgb, var(--background) 64%, transparent); backdrop-filter: blur(7px); }
.login-dialog { width: min(440px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 30px; background: transparent; box-shadow: var(--shadow); }
.login-card { display: flex; flex-direction: column; align-items: stretch; padding: clamp(1.5rem, 6vw, 2.5rem); border-radius: 30px; background: var(--surface); text-align: center; }
.login-icon { display: grid; place-items: center; width: 92px; height: 92px; margin: 0 auto 1.3rem; border-radius: 29px; background: var(--primary-soft); color: var(--primary-text); box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 16%, transparent); }
.login-icon svg { width: 51px; height: 51px; }
.login-card h1 { margin: .45rem 0 .5rem; font-size: 1.8rem; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 1.4rem; color: var(--text-muted); font-size: .9rem; }
.login-card #passwordLogin, .login-card #tokenLogin { display: grid; gap: .75rem; }
.login-submit-button + #scanQrLoginButton { margin-top: .8rem; }
.login-mode-button { margin-top: .65rem; border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: .78rem; font-weight: 750; }
.login-mode-button:hover { text-decoration: underline; }
.login-app-download { width: 100%; min-width: 0; margin-top: .9rem; box-shadow: none; text-align: left; }
.button-with-icon { gap: .5rem; }
.button-with-icon svg { width: 20px; height: 20px; }

.qr-login-dialog { width: min(430px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: var(--shadow); }
.qr-login-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.6rem; border: 1px solid var(--outline); border-radius: 28px; background: var(--surface); text-align: center; }
.qr-login-close { position: absolute; top: .8rem; right: .8rem; }
.qr-login-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: .75rem; border-radius: 19px; background: var(--primary-soft); color: var(--primary-text); }
.qr-login-icon svg { width: 32px; height: 32px; }
.qr-login-card h2 { margin: .35rem 2.5rem .35rem; font-size: 1.35rem; letter-spacing: -.03em; }
.qr-login-card > p { margin: 0 0 1rem; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
.qr-login-image-frame { display: grid; place-items: center; width: min(320px, 100%); aspect-ratio: 1; overflow: hidden; padding: .35rem; border: 1px solid var(--outline); border-radius: 22px; background: #fff; }
.qr-login-image { display: grid; place-items: center; width: 100%; height: 100%; transition: opacity .2s ease, filter .2s ease; }
.qr-login-image svg { display: block; width: 100%; height: 100%; }
.qr-login-image.expired { opacity: .22; filter: grayscale(1); }
.qr-login-card .qr-login-expiry { margin: .8rem 0; color: var(--primary-text); font-weight: 760; }
.qr-login-card .form-error { width: 100%; margin: 0 0 .6rem; }
.qr-login-card > .secondary-button { width: 100%; }
.qr-scanner-video { width: 100%; max-height: 42dvh; border-radius: 16px; object-fit: cover; background: #000; }
#qrScannerDialog .secondary-button + .secondary-button { margin-top: .6rem; }
#qrScannerStatus { margin: .8rem 0; }

.qr-display-dialog { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #151518; }
.qr-display-dialog::backdrop { background: #fff; backdrop-filter: none; }
.qr-display-card { position: relative; display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 4vmin, 3rem); background: #fff; text-align: center; }
.qr-display-close { position: fixed; z-index: 2; right: max(1rem, env(safe-area-inset-right)); top: max(1rem, env(safe-area-inset-top)); border-color: #d9dde0; background: #f4f6f7; color: #151518; }
.qr-display-card .eyebrow { color: #53606a; }
.qr-display-card h2 { max-width: 900px; margin: .4rem 4rem .25rem; color: #151518; font-size: clamp(1.35rem, 4vmin, 2.5rem); letter-spacing: -.04em; }
.qr-display-card > p { margin: 0; color: #53606a; font-size: clamp(.8rem, 2vmin, 1.05rem); }
.qr-display-code { display: grid; place-items: center; width: min(70vmin, 720px); max-width: calc(100vw - 2rem); margin: clamp(.8rem, 2.5vmin, 1.5rem) auto; padding: clamp(.35rem, 1vmin, .75rem); background: #fff; }
.qr-display-code svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }

.account-dialog { width: min(1040px, calc(100% - 2rem)); max-width: none; max-height: min(92vh, 900px); padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: var(--shadow); }
.account-card { position: relative; display: flex; max-height: min(92vh, 900px); flex-direction: column; align-items: stretch; overflow-y: auto; padding: 1.5rem; border: 1px solid var(--outline); border-radius: 28px; background: var(--surface); text-align: left; }
.account-close { position: absolute; right: 1rem; top: 1rem; }
.account-identity { display: flex; align-items: center; gap: 1rem; padding-right: 3.4rem; }
.account-avatar { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 23px; background: var(--primary-soft); color: var(--primary-text); }
.account-avatar svg { width: 42px; height: 42px; }
.account-card h2 { margin: .35rem 0 .25rem; font-size: 1.45rem; letter-spacing: -.035em; }
.account-identity p { margin: 0; color: var(--text-muted); font-size: .83rem; }
.account-appearance { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--outline); border-radius: 22px; background: var(--background); }
.account-appearance .appearance-color-card, .account-appearance .background-choice { background-color: var(--surface); }
.account-appearance .section-title { margin-bottom: .8rem; }
.account-hint { margin: 1.2rem 0 0; padding: .9rem; border-radius: 15px; background: var(--primary-soft); color: var(--primary-text); font-size: .78rem; line-height: 1.5; }
.account-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1rem; }
.account-card .danger-button { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--outline)); }
.theme-mode-setting { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-mode-setting legend { padding: 0; color: var(--text); font-size: .86rem; font-weight: 800; }
.theme-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .55rem; }
.theme-choice { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); color: var(--text); cursor: pointer; font-size: .78rem; font-weight: 760; }
.theme-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.theme-choice input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--primary); }
.choice-dialog { width: min(540px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: var(--shadow); }
.choice-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.7rem; border: 1px solid var(--outline); border-radius: 28px; background: var(--surface); text-align: center; }
.choice-close { position: absolute; right: 1rem; top: 1rem; }
.choice-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: .9rem; border-radius: 23px; background: var(--primary-soft); color: var(--primary-text); }
.choice-icon svg { width: 38px; height: 38px; }
.choice-card h2 { max-width: 390px; margin: .4rem 0 .55rem; font-size: 1.35rem; letter-spacing: -.03em; }
.choice-card > p:not(.choice-warning) { max-width: 440px; margin: 0 0 1.1rem; color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.choice-actions { display: grid; width: 100%; gap: .55rem; }
.choice-actions button { width: 100%; }
.choice-warning { margin: .9rem 0 0; color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.pin-dialog { width: min(390px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: var(--shadow); }
.pin-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.7rem; border-radius: 28px; background: var(--surface); }
.pin-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto .25rem; border-radius: 22px; background: var(--primary-soft); color: var(--primary-text); }
.pin-icon svg { width: 34px; height: 34px; }
.pin-card h2 { margin: 0; text-align: center; font-size: 1.45rem; }
.pin-card > p:not(.form-error) { margin: -.25rem 0 .25rem; color: var(--text-muted); text-align: center; font-size: .8rem; }
.pin-card input { font-size: 1.25rem; letter-spacing: .35em; text-align: center; }
.pin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.color-dialog { width: min(640px, calc(100% - 1rem)); max-width: none; padding: 0; border: 0; border-radius: 30px; background: transparent; box-shadow: var(--shadow); }
.color-card { display: grid; gap: 1rem; padding: clamp(1rem, 4vw, 1.6rem); border: 1px solid var(--outline); border-radius: 30px; background: var(--surface); }
.color-header { display: flex; align-items: flex-start; gap: 1rem; }
.color-header > div { flex: 1; }
.color-header h2 { margin: .15rem 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.color-header p { margin: .2rem 0 0; color: var(--text-muted); font-size: .78rem; }
.color-field { --picker-hue: #ff0000; position: relative; width: 100%; height: clamp(260px, 48vh, 360px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline) 72%, transparent); border-radius: 22px; background: linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, transparent), var(--picker-hue); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); cursor: crosshair; touch-action: none; }
.color-field:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 3px; }
.color-cursor { position: absolute; left: 100%; top: 0; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%, -50%); pointer-events: none; }
.hue-setting { gap: .55rem; }
.hue-slider { width: 100%; min-height: 30px; padding: 0; border: 0; border-radius: 99px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; appearance: none; }
.hue-slider::-webkit-slider-runnable-track { height: 18px; border-radius: 99px; background: transparent; }
.hue-slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -5px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 1px 6px rgba(0,0,0,.65); appearance: none; }
.hue-slider::-moz-range-track { height: 18px; border: 0; border-radius: 99px; background: transparent; }
.hue-slider::-moz-range-thumb { width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 1px 6px rgba(0,0,0,.65); }
.color-presets { display: grid; grid-template-columns: repeat(10, minmax(32px, 1fr)); gap: .55rem; }
.color-presets button { aspect-ratio: 1; min-width: 0; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--surface-muted); box-shadow: 0 0 0 1px var(--outline); cursor: pointer; transition: transform .15s ease; }
.color-presets button:hover, .color-presets button:focus-visible { transform: scale(1.12); outline: 2px solid var(--primary); outline-offset: 2px; }
.color-result { width: 100%; min-height: 68px; border: 3px solid var(--surface); border-radius: 17px; background: #ffffff; box-shadow: 0 0 0 1px var(--outline), inset 0 0 18px rgba(0, 0, 0, .08); transition: background-color .08s linear; }
.color-actions { display: flex; justify-content: flex-end; gap: .55rem; }
.icon-picker-dialog { width: min(920px, calc(100% - 1rem)); max-width: none; height: min(88vh, 780px); max-height: none; padding: 0; border: 0; border-radius: 28px; background: transparent; box-shadow: var(--shadow); }
.icon-picker-card { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--outline); border-radius: 28px; background: var(--surface); }
.icon-picker-header { display: flex; align-items: flex-start; gap: 1rem; }
.icon-picker-header > div { flex: 1; min-width: 0; }
.icon-picker-header h2 { margin: .15rem 0 0; font-size: 1.45rem; }
.icon-picker-header p { margin: .2rem 0 0; color: var(--text-muted); font-size: .78rem; }
.icon-picker-search { max-width: 520px; }
.icon-picker-grid { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .65rem; padding: .15rem .25rem .5rem 0; align-content: start; }
.icon-library-item { min-width: 0; min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; padding: .8rem .55rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--background); color: var(--text); cursor: pointer; text-align: center; }
.icon-library-item:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline)); background: var(--primary-soft); }
.icon-library-item.selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.icon-library-item > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--surface); color: currentColor; }
.icon-library-item svg { width: 34px; height: 34px; }
.icon-library-item strong { font-size: .75rem; line-height: 1.25; }
.icon-picker-empty { grid-column: 1 / -1; }
.icon-picker-footer { display: flex; justify-content: flex-end; }

label { display: flex; flex-direction: column; gap: .4rem; color: var(--text-muted); font-size: .74rem; font-weight: 720; text-align: left; }
input, select {
  width: 100%;
  min-height: 47px;
  padding: .7rem .8rem;
  border: 1px solid var(--outline);
  border-radius: 13px;
  outline: none;
  background: var(--background);
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.check-label { flex-direction: row; align-items: center; gap: .65rem; }
.check-label input { width: 19px; min-height: 19px; accent-color: var(--primary); }
.check-label span { color: var(--text); font-weight: 570; }

.primary-button, .secondary-button, .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 780;
  cursor: pointer;
}
.primary-button { border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); }
.secondary-button { border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--outline)); background: var(--primary-soft); color: var(--primary-text); }
.ghost-button { border: 1px solid var(--outline); background: transparent; color: var(--text); }
.primary-button:hover, .secondary-button:hover { filter: brightness(.97); }
.primary-button:disabled, .secondary-button:disabled { opacity: .5; cursor: wait; }
.ghost-button:disabled { opacity: .5; cursor: not-allowed; }
.button-busy, .primary-button.button-busy:disabled, .secondary-button.button-busy:disabled, .ghost-button.button-busy:disabled { gap: .55rem; opacity: .82; cursor: default; }
.button-busy::before { content: ""; width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor; border-radius: 50%; animation: busy-indicator-spin .72s linear infinite; }
.button-busy > svg { display: none; }
@keyframes busy-indicator-spin { to { transform: rotate(360deg); } }
.form-error { min-height: 1.1rem; margin: .55rem 0; color: var(--danger) !important; font-size: .78rem !important; }

.config-dialog { position: fixed; z-index: 40; inset: 0; width: 100%; height: 100dvh; background: var(--background); overflow: hidden; }
.config-dialog::before, .config-dialog::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.config-dialog::before { opacity: .82; }
.config-dialog::after { opacity: .52; }
.config-sheet { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.sheet-header, .sheet-footer { display: flex; align-items: center; gap: 1rem; padding: 1.05rem clamp(1rem, 3vw, 1.5rem); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.sheet-header { border-bottom: 1px solid var(--outline); }
.sheet-header > div { flex: 1; }
.sheet-header h2 { margin: .15rem 0 0; font-size: 1.35rem; letter-spacing: -.03em; }
.sheet-footer { position: relative; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--outline); }
.sheet-footer .form-error { flex: 1; margin: 0; }
.config-navigation { position: relative; min-width: 0; background: var(--surface); }
.config-menu-toggle { display: none; }
.config-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .65rem clamp(.8rem, 3vw, 1.5rem); border-bottom: 1px solid var(--outline); background: var(--surface); scrollbar-width: thin; }
.config-tab { flex: 0 0 auto; min-height: 42px; padding: .62rem .95rem; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .8rem; font-weight: 780; white-space: nowrap; }
.config-tab:hover { background: var(--surface-muted); color: var(--text); }
.config-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--primary) 30%, var(--outline)); background: var(--primary-soft); color: var(--primary-text); }
.config-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 1px; }
.config-content { min-height: 0; overflow-y: auto; padding: 1.2rem clamp(.8rem, 3vw, 2rem) 2rem; }
.config-tab-panel { width: min(980px, 100%); margin: 0 auto; }
.config-tab-panel-wide { width: min(1500px, 100%); }
.config-tab-panel > .settings-card:last-child { margin-bottom: 0; }
.config-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-bottom: .8rem; }
.config-summary-item { min-width: 0; padding: .85rem .6rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--surface); text-align: center; }
.config-summary-item strong { display: block; color: var(--text); font-size: 1.3rem; line-height: 1.15; }
.config-summary-item span { color: var(--text-muted); font-size: .7rem; }
.settings-card { margin-bottom: .8rem; padding: 1rem; border: 1px solid var(--outline); border-radius: 22px; background: var(--surface); }
.section-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.section-title > div:nth-child(2) { min-width: 0; flex: 1; }
.section-title h3 { margin: 0; font-size: 1rem; }
.section-title p { margin: .18rem 0 0; color: var(--text-muted); font-size: .73rem; }
.section-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-text); }
.section-icon svg { width: 22px; height: 22px; }
.form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; }
.form-grid .wide { grid-column: 1 / -1; }
.appearance-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.appearance-subheading { margin: 1.1rem 0 .65rem; }
.appearance-subheading h4 { margin: 0; color: var(--text); font-size: .88rem; }
.appearance-subheading p { margin: .2rem 0 0; color: var(--text-muted); font-size: .7rem; }
.appearance-color-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-width: 0; padding: .9rem; border: 1px solid var(--outline); border-radius: 17px; background: var(--background); }
.appearance-color-copy { min-width: 0; }
.appearance-color-copy strong, .appearance-color-copy small { display: block; }
.appearance-color-copy strong { color: var(--text); font-size: .86rem; }
.appearance-color-copy small { margin-top: .22rem; color: var(--text-muted); font-size: .69rem; font-weight: 550; line-height: 1.35; }
.appearance-color-control { display: grid; grid-template-columns: 70px auto; align-items: center; gap: .6rem; }
.accent-color-setting input, .room-color-input { width: 100%; min-height: 44px; padding: 3px; cursor: pointer; }
.accent-color-setting output { color: var(--text); font-size: .82rem; font-weight: 800; }
.background-style-setting { min-width: 0; margin: 1rem 0 0; padding: 0; border: 0; }
.background-style-setting legend { padding: 0; color: var(--text); font-size: .86rem; font-weight: 800; }
.background-style-setting > p { margin: .2rem 0 .7rem; color: var(--text-muted); font-size: .7rem; }
.background-style-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: .6rem; }
.background-choice { position: relative; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .55rem; padding: .45rem .45rem .65rem; border: 1px solid var(--outline); border-radius: 16px; background: var(--background); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.background-choice:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 42%, var(--outline)); }
.background-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.background-choice input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--primary); }
.background-choice strong, .background-choice small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-choice strong { color: var(--text); font-size: .75rem; }
.background-choice small { grid-column: 1 / -1; margin: .4rem .2rem 0; color: var(--text-muted); font-size: .62rem; }
.background-preview { position: relative; grid-column: 1 / -1; height: 76px; margin-bottom: .55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--outline) 75%, transparent); border-radius: 12px; background-color: var(--surface); }
.background-preview-orbits { background: radial-gradient(circle at 20% 35%, transparent 0 20px, color-mix(in srgb, var(--primary) 38%, transparent) 21px 22px, transparent 23px), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 40%); }
.background-preview-lines { background: repeating-linear-gradient(118deg, var(--surface) 0 16px, color-mix(in srgb, var(--primary) 22%, var(--surface)) 17px, var(--surface) 18px 31px); }
.background-preview-grid { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--primary) 15%, transparent) 0 1px, var(--surface) 1px 18px); }
.background-preview-glow { background: radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--primary) 46%, transparent), transparent 40%), radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--primary-strong) 28%, transparent), transparent 42%), var(--surface); }
.background-preview-balloons { background: radial-gradient(ellipse 13px 17px at 20% 32%, color-mix(in srgb, #f06f9f 64%, transparent) 0 96%, transparent 100%), radial-gradient(ellipse 12px 16px at 53% 54%, color-mix(in srgb, #67b7e8 58%, transparent) 0 96%, transparent 100%), radial-gradient(ellipse 13px 17px at 82% 27%, color-mix(in srgb, #f2bc4e 60%, transparent) 0 96%, transparent 100%), repeating-linear-gradient(78deg, transparent 0 28px, color-mix(in srgb, var(--primary) 24%, transparent) 29px 30px, transparent 31px 62px), var(--surface); }
.background-preview-ice { background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 27deg, color-mix(in srgb, #72c9ee 42%, transparent) 28deg 30deg, transparent 31deg 60deg) 0 0 / 72px 72px, radial-gradient(circle at 75% 25%, color-mix(in srgb, #a8e7ff 50%, transparent), transparent 42%), var(--surface); }
.background-preview-snowmen { background: radial-gradient(circle at 31px 25px, color-mix(in srgb, var(--text) 72%, transparent) 0 1.5px, transparent 2px) 0 0 / 104px 92px, radial-gradient(circle at 41px 25px, color-mix(in srgb, var(--text) 72%, transparent) 0 1.5px, transparent 2px) 0 0 / 104px 92px, radial-gradient(circle at 36px 29px, color-mix(in srgb, var(--surface) 90%, #fff) 0 13px, color-mix(in srgb, #a9ddec 42%, transparent) 13.5px 14px, transparent 14.5px) 0 0 / 104px 92px, radial-gradient(circle at 36px 60px, color-mix(in srgb, var(--surface) 92%, #fff) 0 22px, color-mix(in srgb, #a9ddec 38%, transparent) 22.5px 23px, transparent 23.5px) 0 0 / 104px 92px, radial-gradient(circle, color-mix(in srgb, #d8f4ff 68%, transparent) 0 2px, transparent 2.5px) 0 0 / 28px 30px, var(--surface); }
.discovery-actions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.discovery-progress { margin-top: .4rem; padding: .9rem; border-radius: 15px; background: var(--background); }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-muted); }
.progress-track span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--primary); animation: progress 1.2s ease-in-out infinite alternate; }
@keyframes progress { from { transform: translateX(-30%); } to { transform: translateX(220%); } }
.discovery-progress p { margin: .55rem 0 0; color: var(--text-muted); font-size: .75rem; }
.discovery-summary { color: var(--text-muted); font-size: .8rem; }

.rooms-editor, .resources-editor { display: grid; gap: .55rem; }
.resource-filters { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(170px, 1fr) minmax(180px, 1fr) auto; gap: .55rem; align-items: end; margin: -.15rem 0 .8rem; padding: .75rem; border-radius: 16px; background: var(--background); }
.resource-filters label { display: grid; gap: .3rem; color: var(--muted); font-size: .7rem; font-weight: 700; }
.resource-filters input, .resource-filters select { min-height: 42px; padding: .55rem .7rem; font-size: .82rem; }
.resource-filters .ghost-button { min-height: 42px; }
.resource-filter-summary { grid-column: 1 / -1; color: var(--text-muted); font-size: .72rem; }
.room-editor-row { display: grid; grid-template-columns: minmax(200px, 1.8fr) minmax(220px, 1.3fr) .65fr auto auto; gap: .5rem; align-items: end; padding: .7rem; border-radius: 16px; background: var(--background); }
.room-icon-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.config-field-label { color: var(--text-muted); font-size: .74rem; font-weight: 720; }
.room-icon-choice { width: 100%; min-width: 0; min-height: 47px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: .45rem; padding: 0 .55rem 0 0; border: 1px solid var(--outline); border-radius: 13px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.room-icon-preview { display: grid; place-items: center; width: 42px; height: 47px; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface); color: var(--primary-text); }
.room-icon-preview svg { width: 25px; height: 25px; }
.room-icon-choice strong, .room-icon-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-icon-choice strong { font-size: .72rem; }
.room-icon-choice small { margin-top: .1rem; color: var(--text-muted); font-size: .62rem; }
.room-order-actions { display: flex; align-items: center; gap: .3rem; min-height: 47px; }
.room-order-actions button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--outline); border-radius: 12px; background: var(--surface); color: var(--primary-text); cursor: pointer; }
.room-order-actions button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline)); background: var(--primary-soft); }
.room-order-actions button:disabled { opacity: .32; cursor: default; }
.room-order-actions svg { width: 19px; height: 19px; }
.room-order-actions .move-up-icon { transform: rotate(90deg); }
.room-order-actions .move-down-icon { transform: rotate(-90deg); }
.remove-button { width: 42px; height: 47px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--outline)); border-radius: 13px; background: transparent; color: var(--danger); cursor: pointer; font-size: 1.1rem; }
.resource-row { display: grid; grid-template-columns: auto 48px minmax(130px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(150px, 1fr) minmax(118px, .7fr); gap: .55rem; align-items: center; padding: .7rem; border: 1px solid var(--outline); border-radius: 16px; background: var(--background); }
.resource-enabled { width: 20px; min-height: 20px; accent-color: var(--primary); }
.resource-icon-choice { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); color: var(--primary-text); cursor: pointer; }
.resource-icon-choice:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.resource-icon-choice:disabled { opacity: .42; cursor: not-allowed; }
.resource-icon-choice svg { width: 27px; height: 27px; }
.resource-identity { min-width: 0; }
.resource-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.resource-identity small { display: block; margin-top: .15rem; color: var(--text-muted); font-size: .67rem; }
.hidden-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; width: max-content; margin-top: .4rem; color: var(--text-muted); font-size: .68rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.resource-row .hidden-toggle input { width: 16px; min-height: 16px; padding: 0; accent-color: var(--primary); }
.resource-row input, .resource-row select { min-height: 42px; padding: .55rem .65rem; font-size: .8rem; }

.account-notifications { margin-top: 1rem; padding: 1rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--surface-muted); }
.notification-account-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .85rem; }
.notification-provider-status { margin: .75rem 0 0; color: var(--text-muted); font-size: .86rem; }
.notification-rules-editor { display: grid; gap: .85rem; margin-top: 1rem; }
.notification-rule-row { overflow: hidden; border: 1px solid var(--outline); border-radius: 18px; background: var(--surface-muted); }
.notification-rule-summary { display: flex; width: 100%; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; border: 0; padding: .9rem 1rem; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.notification-rule-summary:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.notification-rule-summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: -3px; }
.notification-rule-summary-copy { display: grid; min-width: 0; gap: .25rem; }
.notification-rule-summary-copy strong { overflow: hidden; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-rule-summary-copy small { overflow: hidden; color: var(--text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.notification-rule-summary-meta { display: flex; flex: 0 0 auto; align-items: center; gap: .7rem; }
.notification-rule-state { border-radius: 999px; padding: .25rem .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.notification-rule-state.active { background: var(--primary-soft); color: var(--primary-text); }
.notification-rule-state.inactive { background: var(--surface); color: var(--text-muted); }
.notification-rule-action { color: var(--primary-text); font-size: .76rem; font-weight: 800; }
.notification-rule-editor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .7rem; padding: 1rem; border-top: 1px solid var(--outline); background: var(--surface); }
.notification-rule-editor[hidden] { display: none; }
.notification-rule-editor > label { grid-column: span 3; }
.notification-rule-editor > label.wide { grid-column: span 6; }
.notification-rule-editor > label.full, .notification-rule-editor > .full { grid-column: 1 / -1; }
.notification-rule-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.notification-rule-heading .check-label { margin: 0; }
.notification-recipient-field { min-width: 0; margin: 0; border: 1px solid var(--outline); border-radius: 14px; padding: .75rem; }
.notification-recipient-field legend { padding: 0 .35rem; color: var(--text-muted); font-size: .72rem; font-weight: 750; }
.notification-recipient-field legend small { font-weight: 600; }
.notification-recipient-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.notification-recipient { min-height: 40px; margin: 0; border: 1px solid var(--outline); border-radius: 12px; padding: .55rem .7rem; background: var(--surface-muted); }
.notification-recipient-empty { color: var(--text-muted); font-size: .8rem; }
.settings-hint { color: var(--text-muted); font-size: .83rem; line-height: 1.5; }
.notification-events-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--outline); }
.notification-events-heading h4, .notification-events-heading p { margin: 0; }
.notification-events-heading p { margin-top: .25rem; color: var(--text-muted); font-size: .8rem; }
.notification-events { display: grid; gap: .55rem; margin-top: .75rem; }
.notification-event-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); }
.notification-event-row > div { display: grid; min-width: 0; gap: .25rem; }
.notification-event-row strong, .notification-event-row small { color: var(--text-muted); font-size: .72rem; }
.notification-event-row code { overflow: hidden; color: var(--text); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
  .notification-rule-editor > label, .notification-rule-editor > label.wide { grid-column: 1 / -1; }
  .notification-event-row { align-items: stretch; flex-direction: column; }
}
.resource-main-field { display: grid; align-self: stretch; align-content: center; gap: .25rem; min-width: 0; color: var(--text-muted); font-size: .7rem; font-weight: 700; }
.resource-main-field > span { min-height: .85rem; line-height: .85rem; }
.display-mode { color: var(--text-muted); }
.display-mode select { width: 100%; color: var(--text); }
.logic-mode strong { display: flex; align-items: center; min-height: 42px; color: var(--text); font-size: .8rem; }
.resource-order-field { display: grid; align-self: stretch; align-content: center; gap: .25rem; min-width: 0; }
.resource-order-field > span { min-height: .85rem; color: var(--text-muted); font-size: .7rem; font-weight: 700; line-height: .85rem; }
.resource-order-actions { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: .3rem; }
.resource-order-actions button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--outline); border-radius: 11px; background: var(--surface); color: var(--primary-text); cursor: pointer; }
.resource-order-actions button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 45%, var(--outline)); background: var(--primary-soft); }
.resource-order-actions button:disabled { opacity: .28; cursor: default; }
.resource-order-actions strong { min-width: 2.7rem; color: var(--text-muted); font-size: .68rem; text-align: center; }
.resource-order-actions svg { width: 18px; height: 18px; }
.resource-order-actions .move-up-icon { transform: rotate(90deg); }
.resource-order-actions .move-down-icon { transform: rotate(-90deg); }
.resource-row.disabled { opacity: .62; }
.presentation-settings { display: grid; grid-template-columns: minmax(220px, 360px); grid-column: 3 / -1; gap: .55rem; padding-top: .55rem; border-top: 1px dashed var(--outline); }
.presentation-settings label { gap: .3rem; }
.presentation-settings label > span { color: var(--text-muted); font-size: .68rem; font-weight: 760; }
.blind-settings { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); grid-column: 3 / -1; gap: .55rem; }
.blind-calibration { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: 1 / -1; gap: .65rem; margin-top: .15rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--outline)); border-radius: 16px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.blind-calibration-heading { display: grid; gap: .2rem; }
.blind-calibration-heading strong { color: var(--text); font-size: .78rem; }
.blind-calibration-heading small, .blind-measure-hint { color: var(--text-muted); font-size: .68rem; line-height: 1.45; }
.blind-measure-actions { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: .5rem; }
.blind-measure-button { min-height: 44px; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--outline)); border-radius: 12px; background: var(--surface); color: var(--primary-text); font-size: .7rem; font-weight: 780; cursor: pointer; }
.blind-measure-button:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.blind-measure-button:disabled { opacity: .42; cursor: not-allowed; }
.blind-measure-running { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .7fr); align-items: stretch; gap: .65rem; padding-top: .65rem; border-top: 1px dashed var(--outline); }
.blind-measure-running > div { display: grid; align-content: center; gap: .15rem; min-width: 0; padding: .6rem .75rem; border-radius: 13px; background: var(--background); }
.blind-measure-running span { color: var(--text-muted); font-size: .68rem; font-weight: 760; }
.blind-measure-running strong { color: var(--text); font-size: clamp(1.75rem, 4vw, 2.45rem); font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: .025em; }
.blind-measure-running small { margin-top: .2rem; overflow: hidden; color: var(--text-muted); font-size: .65rem; line-height: 1.35; text-overflow: ellipsis; }
.blind-measure-stop { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 78px; padding: .8rem 1rem; border: 0; border-radius: 15px; background: var(--danger); color: #fff; box-shadow: 0 9px 24px color-mix(in srgb, var(--danger) 28%, transparent); cursor: pointer; font-size: 1.15rem; font-weight: 900; letter-spacing: .08em; }
.blind-measure-stop:hover:not(:disabled) { filter: brightness(.94); }
.blind-measure-stop:focus-visible { outline: 3px solid color-mix(in srgb, var(--danger) 38%, transparent); outline-offset: 3px; }
.blind-measure-stop:disabled { opacity: .68; cursor: default; }
.blind-measure-stop svg { width: 28px; height: 28px; flex: 0 0 28px; }
.blind-measure-stop span { color: inherit; font-size: inherit; font-weight: inherit; }
.blind-measure-result { margin: 0; padding: .55rem .65rem; border-radius: 11px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-size: .7rem; }
.blind-measure-hint { margin: 0; }
.pin-settings { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(145px, auto) minmax(150px, 1fr) minmax(145px, auto); grid-column: 3 / -1; gap: .55rem; align-items: end; padding-top: .55rem; border-top: 1px dashed var(--outline); }
.pin-settings .pin-clear { flex-direction: row; align-items: center; min-height: 42px; color: var(--text-muted); font-size: .68rem; }
.pin-settings .pin-clear input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--primary); }
.logic-settings { grid-template-columns: minmax(210px, 1.3fr) minmax(170px, 1fr) minmax(165px, auto); }
.logic-settings .logic-confirm { color: var(--text); }
.resource-empty { padding: 1.4rem; border: 1px dashed var(--outline); border-radius: 16px; color: var(--text-muted); text-align: center; font-size: .82rem; }

.users-editor { display: grid; gap: .55rem; }
#usersSettings { width: min(1120px, 100%); margin-inline: auto; }
.user-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-items: end; padding: .8rem; border: 1px solid var(--outline); border-radius: 16px; background: var(--background); }
.user-password-field { grid-column: 1 / 3; }
.user-field-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.user-row-controls { display: flex; grid-column: 3; align-items: stretch; gap: .5rem; min-width: 0; }
.user-row .check-label { min-width: 0; min-height: 47px; flex: 1; justify-content: flex-start; padding: 0 .35rem; }
.user-row .check-label span { font-size: .72rem; }
.user-row-actions { display: flex; gap: .5rem; }
.user-row-actions .remove-button { width: 47px; min-width: 47px; padding: 0; }
.user-qr-button { width: 47px; min-width: 47px; padding: 0; }
.user-qr-button svg { width: 21px; height: 21px; }
.users-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .8rem; }
.users-footer .form-error { flex: 1; margin: 0; }
.user-self { color: var(--primary); font-size: .65rem; font-weight: 800; }

.qr-access-heading .qr-settings-button { flex: 0 0 44px; width: 44px; height: 44px; }
.qr-settings-button.active { border-color: color-mix(in srgb, var(--primary) 34%, var(--outline)); background: var(--primary-soft); color: var(--primary-text); }
.qr-launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.qr-launcher-grid[hidden], .qr-code-definitions[hidden] { display: none; }
.qr-launcher-card { display: flex; min-width: 0; flex-direction: column; gap: .9rem; padding: 1rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--background); }
.qr-launcher-card > div:first-child { flex: 1; }
.qr-launcher-card h4, .qr-home-definition h4 { margin: 0; color: var(--text); font-size: .92rem; }
.qr-launcher-card p { margin: .25rem 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
.qr-action-list { display: grid; gap: .55rem; }
.qr-action-list .button-with-icon { justify-content: flex-start; }
.qr-wifi-actions { display: contents; }
.qr-actions-empty { margin: 0; padding: .7rem .8rem; border: 1px dashed var(--outline); border-radius: 13px; color: var(--text-muted); font-size: .7rem; }
.qr-action-list a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.qr-code-definitions { padding-top: .2rem; }
.qr-home-definition { margin-bottom: 1.2rem; padding: 1rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--background); }
.qr-home-definition label { margin-top: .7rem; }
.qr-network-heading { margin-top: 1.3rem; }
.wifi-networks-editor { display: grid; gap: .6rem; }
.wifi-network-row { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(150px, 1.1fr) minmax(165px, 1.2fr) minmax(150px, 1fr) auto auto; gap: .55rem; align-items: end; padding: .75rem; border: 1px solid var(--outline); border-radius: 17px; background: var(--background); }
.wifi-network-row .wifi-hidden-setting { align-self: center; justify-content: center; min-height: 47px; padding-top: 1.15rem; }
.wifi-network-row .wifi-hidden-setting span { font-size: .69rem; white-space: nowrap; }
.qr-security-note { margin: .8rem 0 0; padding: .75rem .85rem; border-radius: 14px; background: var(--primary-soft); color: var(--text-muted); font-size: .7rem; line-height: 1.45; }
.qr-security-note strong { color: var(--primary-text); }

.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.backup-action-card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; padding: 1rem; border: 1px solid var(--outline); border-radius: 18px; background: var(--background); }
.backup-action-card > div:first-child { flex: 1; }
.backup-action-card h4 { margin: 0; color: var(--text); font-size: .9rem; }
.backup-action-card p { margin: .35rem 0 0; color: var(--text-muted); font-size: .74rem; line-height: 1.5; }
.backup-action-card button { min-height: 44px; }
.backup-restore-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.backup-file-status { width: 100%; margin: -.25rem 0 0 !important; overflow-wrap: anywhere; }
.backup-warning { margin: .8rem 0 0; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--outline)); border-radius: 15px; background: color-mix(in srgb, var(--danger) 7%, var(--surface)); color: var(--text-muted); font-size: .72rem; line-height: 1.5; }
.backup-warning strong { color: var(--danger); }

.app-version-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.app-version-card { min-width: 0; padding: .9rem; border: 1px solid var(--outline); border-radius: 17px; background: var(--background); }
.app-version-card span { display: block; margin-bottom: .35rem; color: var(--text-muted); font-size: .69rem; line-height: 1.35; }
.app-version-card strong { display: block; overflow-wrap: anywhere; color: var(--text); font-size: .95rem; }
.android-update-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding: .9rem; border: 1px solid var(--outline); border-radius: 17px; background: var(--background); }
.android-update-status[data-state="update"] { border-color: color-mix(in srgb, var(--primary) 42%, var(--outline)); background: var(--primary-soft); }
.android-update-status > div { min-width: 0; }
.android-update-status strong { color: var(--text); font-size: .84rem; }
.android-update-status p { margin: .3rem 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
.android-update-status .primary-button { flex: 0 0 auto; text-decoration: none; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); max-width: calc(100% - 2rem); padding: .8rem 1rem; border: 1px solid var(--outline); border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .22s ease; font-size: .84rem; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.error { border-color: #8f1915; background: #b3261e; color: #fff; box-shadow: 0 12px 32px rgba(125, 20, 16, .3); }
.blind-measure-stop-bar { position: fixed; z-index: 140; inset: max(.5rem, env(safe-area-inset-top)) .5rem max(.5rem, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: .65rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--outline)); border-radius: 24px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 52px rgba(40, 12, 10, .28); backdrop-filter: blur(16px); }
.blind-measure-stop-bar[hidden] { display: none; }
.blind-measure-stop-bar > div { display: flex; align-items: baseline; justify-content: center; gap: .8rem; min-width: 0; padding: .25rem .55rem; }
.blind-measure-stop-bar > div span { overflow: hidden; color: var(--text-muted); font-size: .78rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.blind-measure-stop-bar > div strong { color: var(--text); font-size: clamp(1.7rem, 5vw, 2.5rem); font-variant-numeric: tabular-nums; letter-spacing: .025em; }
.blind-measure-stop-bar button { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 0; padding: 1rem; border: 0; border-radius: 18px; background: var(--danger); color: #fff; cursor: pointer; font-size: clamp(2.2rem, 10vw, 5rem); font-weight: 900; letter-spacing: .08em; }
.blind-measure-stop-bar button:disabled { opacity: .7; cursor: default; }
.blind-measure-stop-bar svg { width: clamp(48px, 12vw, 96px); height: clamp(48px, 12vw, 96px); }
.home-gesture { display: none; }
.home-gesture[hidden] { display: none; }

@media (min-width: 760px) {
  .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .device-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  :root { --topbar-height: 68px; }
  .topbar { padding-inline: .8rem; }
  .brand small { display: none; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .brand strong { font-size: .96rem; }
  .connection-pill { width: 34px; min-width: 34px; padding: 0; justify-content: center; }
  .connection-pill span { display: none; }
  .content { padding-top: 1.2rem; }
  .app-shell.room-view .content { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .home-gesture { position: fixed; z-index: 24; left: 50%; bottom: calc(.65rem + env(safe-area-inset-bottom)); display: flex; min-width: 94px; min-height: 42px; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .85rem; transform: translateX(-50%); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--outline)); border-radius: 99px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--primary-text); box-shadow: 0 10px 28px rgba(13, 35, 31, .22); backdrop-filter: blur(16px); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
  .home-gesture svg { width: 19px; height: 19px; }
  .home-gesture span { font-size: .72rem; font-weight: 820; letter-spacing: .025em; }
  .home-gesture:active { transform: translate(-50%, -7px); }
  .hero { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .room-card { min-height: 185px; padding: 1rem; border-radius: 24px; }
  .room-icon { width: 58px; height: 58px; border-radius: 19px; }
  .room-icon svg { width: 34px; height: 34px; }
  .room-card h2 { font-size: 1.2rem; }
  .room-hero { flex-wrap: wrap; }
  .layout-edit-bar { align-items: stretch; flex-direction: column; }
  .layout-edit-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sheet-header { padding-top: calc(1rem + env(safe-area-inset-top)); }
  .backup-grid { grid-template-columns: 1fr; }
  .app-version-grid { grid-template-columns: 1fr; }
  .android-update-status { align-items: stretch; flex-direction: column; }
  .android-update-status .primary-button { justify-content: center; }
  .qr-launcher-grid { grid-template-columns: 1fr; }
  .wifi-network-row { grid-template-columns: 1fr 1fr auto; }
  .wifi-network-row label:nth-child(1), .wifi-network-row label:nth-child(2), .wifi-network-row label:nth-child(3), .wifi-network-row label:nth-child(4) { grid-column: 1 / 3; }
  .wifi-network-row .wifi-hidden-setting { grid-column: 1 / 3; justify-content: flex-start; padding-top: 0; }
  .wifi-network-row .remove-button { grid-column: 3; grid-row: 1 / 6; align-self: center; }
  .config-navigation { padding: .55rem .8rem; border-bottom: 1px solid var(--outline); }
  .config-menu-toggle { display: flex; width: 100%; min-height: 48px; align-items: center; gap: .8rem; padding: .55rem .7rem; border: 1px solid var(--outline); border-radius: 15px; background: var(--surface-muted); color: var(--text); text-align: left; cursor: pointer; }
  .config-menu-toggle > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: .1rem; }
  .config-menu-toggle small { color: var(--text-muted); font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .config-menu-toggle strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
  .hamburger-lines { display: grid; flex: 0 0 22px; width: 22px; gap: 4px; }
  .hamburger-lines i { display: block; height: 2px; border-radius: 99px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .config-menu-chevron { flex: 0 0 auto; font-size: 1.25rem; transition: transform .18s ease; }
  .config-menu-toggle[aria-expanded="true"] .hamburger-lines i:first-child { transform: translateY(6px) rotate(45deg); }
  .config-menu-toggle[aria-expanded="true"] .hamburger-lines i:nth-child(2) { opacity: 0; }
  .config-menu-toggle[aria-expanded="true"] .hamburger-lines i:last-child { transform: translateY(-6px) rotate(-45deg); }
  .config-menu-toggle[aria-expanded="true"] .config-menu-chevron { transform: rotate(180deg); }
  .config-tabs { position: absolute; z-index: 12; top: calc(100% - .2rem); left: .8rem; right: .8rem; display: none; max-height: min(62dvh, 430px); flex-direction: column; gap: .2rem; overflow-x: hidden; overflow-y: auto; padding: .5rem; border: 1px solid var(--outline); border-radius: 17px; background: var(--surface); box-shadow: 0 18px 42px rgba(13, 35, 31, .24); }
  .config-tabs.open { display: flex; }
  .config-tab { width: 100%; min-height: 44px; flex: 0 0 auto; padding: .65rem .8rem; text-align: left; }
  .sheet-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .sheet-footer .form-error { position: absolute; left: 1rem; right: 1rem; bottom: 4.3rem; text-align: right; }
  .account-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
  .account-card { max-height: calc(100vh - 1rem); padding: 1rem; }
  .account-identity { padding-right: 2.8rem; }
  .account-avatar { flex-basis: 60px; width: 60px; height: 60px; border-radius: 19px; }
  .account-avatar svg { width: 34px; height: 34px; }
  .account-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .appearance-color-grid { grid-template-columns: 1fr; }
  .background-style-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .discovery-heading, .editor-heading { flex-wrap: wrap; }
  .discovery-actions { width: 100%; justify-content: stretch; }
  .discovery-actions > * { flex: 1; }
  .room-editor-row { grid-template-columns: 1fr 1fr auto; }
  .room-editor-row label:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .room-editor-row .room-icon-field { grid-column: 1; grid-row: 2; }
  .room-editor-row label:nth-child(3) { grid-column: 2; grid-row: 2; }
  .room-editor-row .room-order-actions { grid-column: 3; grid-row: 1; justify-content: center; }
  .room-editor-row .remove-button { grid-column: 3; grid-row: 2; align-self: end; }
  .resource-row { grid-template-columns: auto 48px 1fr; }
  .resource-filters { grid-template-columns: 1fr 1fr; }
  .resource-filters .resource-name-filter { grid-column: 1 / -1; }
  .resource-filters .ghost-button { align-self: end; }
  .resource-row > .resource-main-field { grid-column: 2 / -1; }
  .resource-row > .resource-order-field { grid-column: 2 / -1; }
  .presentation-settings { grid-column: 2 / -1; grid-template-columns: 1fr; }
  .blind-settings { grid-column: 2 / -1; grid-template-columns: 1fr; }
  .blind-measure-actions { grid-template-columns: 1fr; }
  .blind-measure-running { grid-template-columns: 1fr; }
  .blind-measure-stop { min-height: 72px; }
  .pin-settings { grid-column: 2 / -1; grid-template-columns: 1fr; }
  #usersSettings .section-title { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  #usersSettings .section-title > #addUserButton { grid-column: 1 / -1; width: 100%; }
  .user-row { grid-template-columns: minmax(0, 1fr); }
  .user-login-field, .user-display-field, .user-role-field, .user-password-field, .user-row-controls { grid-column: 1; }
}

@media (max-width: 430px) {
  .brand strong { display: none; }
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .room-card { min-height: 210px; padding: .85rem; border-radius: 21px; }
  .room-card > div:last-of-type { padding-right: .5rem; }
  .room-card .room-icon { width: 54px; height: 54px; border-radius: 17px; }
  .room-card .room-icon svg { width: 32px; height: 32px; }
  .room-card h2 { font-size: 1rem; line-height: 1.12; }
  .room-card p { font-size: .67rem; line-height: 1.3; }
  .room-card .chevron { right: .7rem; bottom: .7rem; width: 29px; height: 29px; border-radius: 10px; }
  .room-hero { padding: 1rem; }
  .room-hero .room-icon { width: 62px; height: 62px; flex-basis: 62px; }
  .device-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .device-card { min-height: 178px; padding: .75rem; border-radius: 18px; }
  .device-card-wide { grid-column: 1 / -1; min-height: auto; }
  .device-card:not(.device-card-wide) .device-main { align-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
  .device-card:not(.device-card-wide) .device-copy { order: 3; flex: 0 0 100%; padding-top: .7rem; }
  .device-card:not(.device-card-wide) .device-copy strong { font-size: .84rem; }
  .device-card:not(.device-card-wide) .device-meta-row { align-items: flex-start; flex-wrap: wrap; gap: .25rem; }
  .device-card:not(.device-card-wide) .device-copy small { flex: 0 0 100%; font-size: .65rem; white-space: normal; line-height: 1.25; }
  .device-card:not(.device-card-wide) .device-value { margin-left: auto; font-size: 1rem; }
  .device-card:not(.device-card-wide) .state-tag { margin-left: auto; padding: .38rem .48rem; font-size: .62rem; }
  .device-card:not(.device-card-wide) .switch { margin-left: auto; }
  .settings-card { padding: .8rem; }
  .theme-mode-grid { grid-template-columns: 1fr; }
  .account-actions { grid-template-columns: 1fr; }
  .appearance-color-card { grid-template-columns: 1fr; }
  .appearance-color-control { grid-template-columns: 1fr auto; }
  .resource-filters { grid-template-columns: 1fr; }
  .resource-filters .resource-name-filter, .resource-filters .resource-filter-summary { grid-column: 1; }
  .sheet-footer { gap: .45rem; }
  .sheet-footer button { padding-inline: .8rem; }
  .color-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .icon-picker-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .icon-picker-card { border-radius: 0; }
  .color-card { min-height: 100%; align-content: center; border: 0; border-radius: 0; padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .color-field { height: min(42vh, 330px); border-radius: 18px; }
  .color-presets { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 360px) {
  .topbar { gap: .35rem; padding-inline: .45rem; }
  .app-shell.room-view .brand { display: none; }
  .topbar-actions { gap: .25rem; }
  .topbar .icon-button { width: 40px; height: 40px; flex-basis: 40px; border-radius: 14px; }
  .connection-pill { width: 30px; min-width: 30px; }
}

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