/* ============================================================================
   AURA Lighting Console — visual system
   Matches the approved reference design: dark navy shell, glass cards, a
   left rail with icon+label nav, glowing accent gradients per category,
   circular gauges, bar/line charts, tables with status pills, and a modal
   system for record creation.
   ========================================================================== */

:root {
  --bg: #05070d;
  --bg-2: #070a13;
  --panel: #0c1119;
  --panel-2: #0e1420;
  --panel-solid: #0a0e17;
  --sidebar-bg: #080b13;
  --line: rgba(255, 255, 255, 0.07);
  --line-bright: rgba(255, 255, 255, 0.16);
  --txt: #f3f6fc;
  --txt-dim: #99a3b8;
  --txt-faint: #5c6579;
  --accent: #4f7fff;
  --accent-2: #a855f7;
  --accent-pink: #ec4899;
  --accent-orange: #f7931e;
  --accent-cyan: #22d3ee;
  --good: #22c55e;
  --warn: #f5a623;
  --bad: #ef4444;
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SF Mono", monospace;
  --sidebar-w: 240px;
}

/* The native hidden state must win over component display declarations.
   Without this, retired sidebar tabs and conditional form controls can remain
   visible because rules such as `.side-nav .tab { display:flex }` outrank the
   browser stylesheet. */
[hidden] { display: none !important; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 560px at 14% -10%, rgba(79, 127, 255, 0.16), transparent 60%),
    radial-gradient(760px 560px at 96% 0%, rgba(168, 85, 247, 0.13), transparent 62%),
    radial-gradient(1000px 640px at 50% 115%, rgba(34, 197, 94, 0.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.shell { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ================= Sidebar ================= */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); height: 100dvh; z-index: 50; display: flex; flex-direction: column; padding: 22px 14px; background: var(--sidebar-bg); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 28px; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(140deg, var(--accent), var(--accent-2)); display: grid; place-items: center; box-shadow: 0 0 26px rgba(79, 127, 255, 0.5); font-size: 18px; transform: rotate(-6deg); }
.brand h1 { font-size: 16px; font-weight: 800; letter-spacing: 0.06em; }
.brand span { display: block; font-size: 9.5px; color: var(--txt-faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1px; }

/* 14 nav items + footer must fit a laptop viewport. At 10px vertical padding
   the list overflowed and silently hid "Settings" behind an inner scrollbar
   most people never notice. Tightened padding so the full list fits, and gave
   the scrollbar a visible style for the genuinely short viewports where it
   still has to scroll. */
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav .tab { display: flex; align-items: center; gap: 12px; width: 100%; font-family: inherit; font-size: 13px; font-weight: 550; text-align: left; padding: 8px 13px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--txt-dim); cursor: pointer; transition: all .15s ease; }
.side-nav .tab i { font-style: normal; font-size: 15px; width: 18px; text-align: center; color: var(--txt-faint); flex-shrink: 0; }
.side-nav .tab:hover { color: var(--txt); background: rgba(255, 255, 255, 0.04); }
.side-nav .tab.active { color: #fff; background: linear-gradient(120deg, rgba(79,127,255,.22), rgba(168,85,247,.10)); border-color: rgba(79,127,255,.35); box-shadow: inset 0 0 0 1px rgba(79,127,255,.08); }
.side-nav .tab.active i { color: #8fb0ff; }

.side-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }
.side-status { display: flex; align-items: center; gap: 9px; padding: 4px 10px; font-size: 11.5px; color: var(--txt-dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px currentColor; flex-shrink: 0; }
.dot.online { background: var(--good); }

.profile-card { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); margin-top: 4px; }
.profile-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.profile-card b { display: block; font-size: 12.5px; }
.profile-card span { font-size: 10.5px; color: var(--txt-faint); }

/* ================= Main / Topbar ================= */
.main { grid-column: 2; width: 100%; min-width: 0; padding: 22px 30px 70px; max-width: 1440px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: linear-gradient(var(--bg) 82%, transparent); z-index: 40; padding-top: 4px; }
#page-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
#page-sub { display: block; font-size: 12.5px; color: var(--txt-faint); margin-top: 3px; }
.topbar-spacer { flex: 1; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-faint); font-size: 12.5px; min-width: 230px; margin-left: 18px; }
.search-box input { background: none; border: none; padding: 0; width: 100%; font-size: 12.5px; color: var(--txt); }
.search-box input::placeholder { color: var(--txt-faint); }
.topbar-pills { display: flex; align-items: center; gap: 10px; }
.pill-info { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 11.5px; color: var(--txt-dim); white-space: nowrap; }
.pill-info b { color: var(--txt); font-weight: 650; }
.pill-info.good { color: #86efac; border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); }
.weather-pill span:first-child { font-size: 13px; }
.weather-pill b { font-family: var(--mono); }
.bell-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-dim); cursor: pointer; font-size: 15px; flex-shrink: 0; }
.bell-btn .badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--sidebar-bg); }
.bell-btn .badge:empty, .bell-btn .badge[data-zero] { display: none; }
.clock { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); }
#clock-time { font-size: 15px; font-weight: 650; color: var(--txt); }
#clock-date { font-size: 10.5px; color: var(--txt-faint); margin-top: 1px; }

/* ================= Buttons ================= */
.btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 17px; border-radius: var(--radius-sm); border: 1px solid var(--line-bright); background: rgba(255, 255, 255, 0.05); color: var(--txt); cursor: pointer; transition: transform .12s ease, background .18s ease, border-color .18s ease; white-space: nowrap; }
.btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #7c5cff); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(79, 127, 255, 0.34); }
.btn.primary:hover { box-shadow: 0 10px 28px rgba(79, 127, 255, 0.46); }
.btn.gradient { background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink)); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(236, 72, 153, 0.3); }
.btn.ghost { background: transparent; border-color: var(--line-bright); }
.btn.danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.42); color: #fca5a5; }
.btn.danger:hover { background: rgba(239, 68, 68, 0.24); }
.btn.good-outline { background: transparent; border-color: rgba(34,197,94,.4); color: #86efac; }
.btn.sm { padding: 7px 12px; font-size: 12px; }
.btn.block { width: 100%; display: flex; align-items: center; justify-content: center; }

/* ================= Pages / Panels ================= */
.page { display: none; animation: fade .25s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel { background: linear-gradient(165deg, rgba(255,255,255,.025), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.page > .panel:last-child, .page .stack > .panel:last-child, .page .grid > .panel:last-child { margin-bottom: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.panel-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.panel-head .hint { font-size: 11.5px; color: var(--txt-faint); }
.panel-link { font-size: 11.5px; color: var(--accent); text-decoration: none; cursor: pointer; white-space: nowrap; font-weight: 600; }
.panel-link:hover { text-decoration: underline; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; display: block; }

.grid { display: grid; gap: 18px; }
.studio-grid { grid-template-columns: minmax(320px, 380px) 1fr; align-items: start; }
/* A CSS Grid track never shrinks below its content's min-content width unless
   you say so. The Quick-effects row is a non-wrapping flex strip of 8 fixed
   128px buttons, so its min-content width (~1140px) hijacked the 1.4fr track
   and squeezed the Live-output column down to 222px. That column then wrapped
   its ring + orb onto two rows, doubling its height and leaving a large empty
   void beside the effects panel. min-width:0 lets the tracks honour the real
   1.4fr / 1fr ratio; the effects strip scrolls horizontally instead. */
.dash-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.dash-grid > * { min-width: 0; }
.cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
@media (max-width: 1080px) { .studio-grid, .dash-grid, .cols-2 { grid-template-columns: 1fr; } }

/* ================= Hero (Dashboard) ================= */
.hero { padding: 6px 4px 22px; }
.hero .eyebrow-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--txt-dim); margin-bottom: 8px; }
.hero h1 { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; background: linear-gradient(90deg, #ffb020, #ff6a3d, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--txt-dim); font-size: 13.5px; margin-top: 8px; max-width: 460px; }
.search-row { display: flex; align-items: center; gap: 10px; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-faint); font-size: 12.5px; min-width: 220px; }

/* ================= Stat cards ================= */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card { padding: 18px; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.stat-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: rgba(79, 127, 255, 0.14); color: var(--accent); }
.stat-icon.orange { background: rgba(247,147,30,.15); color: var(--accent-orange); }
.stat-icon.purple { background: rgba(168,85,247,.16); color: var(--accent-2); }
.stat-icon.green { background: rgba(34,197,94,.15); color: var(--good); }
.stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--txt-faint); font-weight: 700; }
.stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.stat-delta { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.stat-delta.up { color: var(--good); }
.stat-delta.down { color: var(--bad); }
.stat-sub { font-size: 10.5px; color: var(--txt-faint); }
.stat-card .stat-delta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt-dim); font-weight: 600; }
.stat-card .stat-delta .d2 { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px currentColor; flex-shrink: 0; }
.stat-card .stat-delta .d2.good { background: var(--good); }
.gauge-card .stat-value.muted { font-size: 15px; color: var(--txt-faint); font-weight: 600; }

/* ================= Room / zone tiles (photo-style) ================= */
.rooms-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-dim); cursor: pointer; }
.chip.active { background: rgba(79,127,255,.18); border-color: rgba(79,127,255,.4); color: #fff; }
.cc-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); flex-wrap: wrap; }
.cc-row input[type="text"] { flex: 1; min-width: 120px; }
.cc-row select { width: auto; min-width: 78px; flex: 0 0 auto; }
.cc-row .cc-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-bright); background: rgba(239,68,68,.1); color: #fca5a5; cursor: pointer; font-size: 13px; }
.chip.pin-chip { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.chip.pin-chip button { border: none; background: none; color: var(--txt-faint); cursor: pointer; font-size: 12px; padding: 0; }
.chip.pin-chip button:hover { color: #fca5a5; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle .vt { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-faint); cursor: pointer; font-size: 13px; }
.view-toggle .vt.active { background: rgba(79,127,255,.18); border-color: rgba(79,127,255,.4); color: #fff; }
.room-grid.list-view { grid-template-columns: 1fr; }
.room-grid.list-view .room-tile { height: 72px; display: flex; align-items: center; }
.room-grid.list-view .room-tile .rt-body { position: static; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.room-grid.list-view .room-tile .rt-meta { display: none; }
.room-grid.list-view .room-tile .rt-slider { width: 140px; }
.room-grid.list-view .room-tile .rt-toggle { position: static; margin: 0 14px; }

/* auto-FILL reserves empty phantom columns: with 3 zones on a 1334px row it
   laid out 5 tracks and left ~540px of dead space to the right of the last
   tile, which reads as the grid failing to fill its container. auto-FIT
   collapses the unused tracks so the real tiles share the full width. */
.room-grid, .rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.room-tile { position: relative; height: 168px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); cursor: default; isolation: isolate; }
.room-tile .rt-bg { position: absolute; inset: 0; z-index: 0; }
.room-tile .rt-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,7,13,.15) 0%, rgba(5,7,13,.25) 45%, rgba(5,7,13,.92) 100%); }
.room-tile .rt-toggle { position: absolute; top: 12px; left: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(8,11,18,.55); backdrop-filter: blur(6px); color: #fff; font-size: 14px; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.room-tile .rt-toggle.on { background: rgba(255,255,255,.92); color: #05070d; }
.room-tile .rt-body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.room-tile .rt-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.room-tile .rt-pct-inline { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.75); font-family: var(--mono); margin-left: 4px; }
.room-tile .rt-meta { font-size: 10.5px; color: rgba(255,255,255,.65); margin-bottom: 9px; font-family: var(--mono); }
.room-tile .rt-slider { width: 100%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.22); appearance: none; -webkit-appearance: none; outline: none; }
.room-tile .rt-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.room-tile .rt-color { position: absolute; inset: 0; z-index: 2; opacity: 0; width: 32px; height: 32px; top: 12px; left: 12px; cursor: pointer; }
.room-tile.effects .rt-name::after { content: " · FX"; opacity: .6; font-weight: 500; font-size: 10px; }

/* Ambient gradients simulating room photography per accent */
.rt-amber { background: radial-gradient(120% 100% at 20% 10%, #4a2f12 0%, #2a1c10 45%, #14100c 100%); }
.rt-blue { background: radial-gradient(120% 100% at 80% 0%, #14243f 0%, #101a2c 45%, #0a0f18 100%); }
.rt-purple { background: radial-gradient(120% 100% at 30% 0%, #2b1740 0%, #1c1230 45%, #100a1c 100%); }
.rt-green { background: radial-gradient(120% 100% at 70% 100%, #0f2a1c 0%, #0d1e16 45%, #0a1410 100%); }
.rt-pink { background: radial-gradient(120% 100% at 50% 0%, #3a1230 0%, #240f22 45%, #150a16 100%); }
.rt-off { background: linear-gradient(160deg, #10131c, #0a0d14); }

/* ================= Scenes & Modes ================= */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
.category-card { padding: 20px 18px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); text-align: left; cursor: pointer; transition: all .18s ease; }
.category-card:hover { border-color: var(--line-bright); transform: translateY(-2px); }
/* The inactive state was so dim these read as disabled controls rather than
   clickable filters. Lifted icon and label contrast; the active state still
   clearly outranks them. */
.category-card .cc-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; margin-bottom: 24px; background: rgba(255,255,255,.10); color: var(--txt); }
.category-card b { display: block; font-size: 14px; margin-bottom: 3px; color: var(--txt); }
.category-card span { font-size: 11.5px; color: var(--txt-dim); }
.category-card:hover .cc-icon { background: rgba(255,255,255,.16); }
.category-card.active { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), 0 16px 40px rgba(168,85,247,.22); background: linear-gradient(165deg, rgba(168,85,247,.14), rgba(255,255,255,0)), var(--panel); }
.category-card.active .cc-icon { background: rgba(168,85,247,.22); color: #e9d5ff; }

.builder-grid { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 1000px) { .builder-grid { grid-template-columns: 1fr; } }
.step-list { display: flex; flex-direction: column; }
.step-row { display: flex; gap: 14px; padding: 10px 0; position: relative; }
.step-row .step-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(79,127,255,.16); border: 1px solid rgba(79,127,255,.4); color: #9db8ff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; z-index: 1; }
.step-row:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 34px; bottom: -10px; width: 1px; background: var(--line-bright); }
.step-row .step-body { flex: 1; padding-top: 2px; }
.step-row .step-body b { font-size: 12.5px; display: block; }
.step-row .step-body span { font-size: 11px; color: var(--txt-faint); }
.step-add { margin-top: 6px; padding: 10px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-bright); background: transparent; color: var(--txt-dim); font-size: 12.5px; cursor: pointer; text-align: center; }

.preview-panel { border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg,#2b1740,#150a1c); min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; margin-bottom: 12px; }
.preview-panel b { font-size: 14px; }
.preview-panel span { font-size: 11px; color: rgba(255,255,255,.7); }
.accent-row { display: flex; gap: 9px; }
.accent-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.accent-dot.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.scene-bar.has-accent { position: relative; }

/* ================= Party & Events ================= */
.party-hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; padding: 34px 30px; margin-bottom: 18px; background:
    radial-gradient(60% 120% at 15% 20%, rgba(236,72,153,.35), transparent 60%),
    radial-gradient(70% 120% at 85% 80%, rgba(79,127,255,.3), transparent 60%),
    linear-gradient(160deg, #1a1030, #0c0a16); border: 1px solid var(--line); }
.party-hero h1 { font-size: 30px; font-weight: 800; background: linear-gradient(90deg, #ec4899, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.party-hero p { color: var(--txt-dim); margin: 8px 0 18px; font-size: 13.5px; }

.eq-row { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin: 4px 0 6px; }
.eq-bar { flex: 1; height: 100%; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 3px; animation: eq 1.1s ease-in-out infinite; transform-origin: bottom; }
@keyframes eq { 0%,100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }

/* The chips huddled at the far left of a full-width panel, leaving ~470px of
   empty space that read as a half-built container. Let them share the row. */
.zone-chip-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.zone-chip { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1 1 0; min-width: 72px; max-width: 140px; }
.zone-chip .zc-dot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; cursor: pointer; border: 2px solid transparent; }
.zone-chip span { font-size: 10.5px; color: var(--txt-dim); }
.zone-chip .zc-dot.add { background: transparent; border: 1.5px dashed var(--line-bright); color: var(--txt-faint); }

/* ---- Shared row/card action buttons (edit + delete) ----
   Every list item that can be edited or removed uses this same pair, so the
   add / edit / remove workflow looks and behaves identically everywhere. */
.card-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ic-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; font-size: 13px; line-height: 1; border-radius: 7px; background: rgba(255,255,255,.05); border: 1px solid var(--line-bright); color: var(--txt-dim); cursor: pointer; transition: all .15s ease; }
.ic-btn:hover { background: rgba(255,255,255,.12); color: var(--txt); }
.ic-btn.danger:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.45); color: #fca5a5; }
/* These sit over the scene's colour bar, which can be bright, so give them an
   opaque dark backdrop instead of the default translucent one. */
.scene .card-actions { position: absolute; top: 10px; right: 10px; opacity: 0; transition: opacity .15s ease; }
.scene .card-actions .ic-btn { background: rgba(6,9,16,.82); border-color: rgba(255,255,255,.22); color: #e6ebf5; backdrop-filter: blur(3px); }
.scene .card-actions .ic-btn:hover { background: rgba(6,9,16,.95); }
.scene .card-actions .ic-btn.danger:hover { background: rgba(239,68,68,.55); border-color: rgba(239,68,68,.7); color: #fff; }
.scene:hover .card-actions, .scene:focus-within .card-actions { opacity: 1; }

.guest-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-lg); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.qr-thumb { width: 66px; height: 66px; border-radius: 12px; background: #fff; flex-shrink: 0; padding: 6px; overflow: hidden; }
/* qrcodejs emits BOTH a <canvas> and an <img>. Sizing only canvas/svg let the
   img render at its natural 128px inside this 66px box, spilling out and
   covering the text beside it. Constrain every child it can produce. */
.qr-thumb canvas, .qr-thumb svg, .qr-thumb img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; }
.qr-thumb img:not([src]), .qr-thumb img[src=""] { display: none; }

/* ================= Automations (when → then) ================= */
.autotabs { display: flex; gap: 6px; margin-bottom: 16px; }
.autotabs button { padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: transparent; border: 1px solid var(--line); color: var(--txt-dim); cursor: pointer; }
.autotabs button.active { background: rgba(79,127,255,.16); border-color: rgba(79,127,255,.4); color: #fff; }

.flow-list { display: flex; flex-direction: column; gap: 10px; }
.flow-row { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: center; gap: 10px; }
.flow-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.flow-card .fc-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; background: rgba(79,127,255,.15); color: #9db8ff; }
.flow-card.then .fc-icon { background: rgba(168,85,247,.16); color: #d8b4fe; }
.flow-card b { display: block; font-size: 12.5px; }
.flow-card span { font-size: 10.5px; color: var(--txt-faint); }
.flow-arrow { text-align: center; color: var(--txt-faint); font-size: 16px; }
.create-automation { margin-top: 4px; padding: 14px; border-radius: var(--radius-md); border: 1.5px dashed var(--line-bright); text-align: center; color: var(--txt-dim); font-size: 12.5px; cursor: pointer; background: transparent; width: 100%; }

.rule-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rule-form input, .rule-form select { width: auto; min-width: 120px; padding: 8px 10px; font-size: 12.5px; }

/* ================= Devices & Hub ================= */
.controller-brain-panel{padding:16px;background:radial-gradient(circle at 12% 4%,rgba(48,103,255,.11),transparent 28%),linear-gradient(145deg,rgba(7,15,31,.98),rgba(4,9,20,.98))}.controller-brain-panel>.panel-head{margin-bottom:13px}.controller-brain-panel>.panel-head h2{margin:3px 0 2px}
.brain-summary{display:grid;grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(120px,.62fr));gap:8px;margin-bottom:10px}.brain-summary article{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:10px 13px;border:1px solid rgba(116,145,220,.15);border-radius:12px;background:rgba(11,21,40,.72)}.brain-summary b,.brain-summary strong{font-size:14px}.brain-summary strong{font-family:var(--mono);color:#90a9ff}.brain-summary span{margin-top:3px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.07em}
.brain-workspace{display:grid;grid-template-columns:minmax(350px,.72fr) minmax(520px,1.28fr);gap:10px;min-height:370px}.brain-board-wrap,.brain-circuits{min-width:0;padding:12px;border:1px solid rgba(116,145,220,.15);border-radius:14px;background:rgba(5,12,26,.76)}.brain-board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.brain-board-head h3{margin:3px 0 0;font-size:13px}.brain-board-head>span{color:var(--muted);font-size:9px}
.brain-board{display:grid;grid-template-columns:minmax(132px,1fr) 112px minmax(132px,1fr);gap:8px;align-items:stretch}.brain-pin-column{display:grid;grid-auto-rows:minmax(34px,1fr);gap:4px}.brain-pin{position:relative;display:grid;grid-template-columns:35px 1fr 12px;gap:5px;align-items:center;min-width:0;padding:5px 7px;border:1px solid rgba(107,132,196,.14);border-radius:8px;background:#0b162b;color:#dce5ff;text-align:left;cursor:pointer}.brain-pin:hover{transform:translateY(-1px);border-color:rgba(93,127,255,.48)}.brain-pin b{font:700 9px var(--mono)}.brain-pin span{overflow:hidden;color:#93a1bd;font-size:7px;white-space:nowrap;text-overflow:ellipsis}.brain-pin i{font-style:normal;color:#53617c}.brain-pin.assigned{border-color:rgba(96,115,255,.28);background:linear-gradient(135deg,rgba(48,73,152,.3),rgba(10,22,44,.9))}.brain-pin.assigned i{color:#6f8cff;text-shadow:0 0 9px #496cff}.brain-pin.free i{color:#55d69b}.brain-pin-column.right .brain-pin{grid-template-columns:12px 1fr 35px;text-align:right}.brain-pin-column.right .brain-pin i{grid-column:1;grid-row:1}.brain-pin-column.right .brain-pin span{grid-column:2;grid-row:1}.brain-pin-column.right .brain-pin b{grid-column:3;grid-row:1}
.brain-board-core{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px;border:1px solid rgba(73,103,177,.3);border-radius:13px;background:radial-gradient(circle at 50% 30%,rgba(52,99,220,.22),transparent 42%),linear-gradient(160deg,#101b31,#070d1a);box-shadow:inset 0 0 0 4px rgba(255,255,255,.018),0 18px 40px rgba(0,0,0,.24)}.brain-board-core i{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#bd262e;color:#fff;font-style:normal;font-weight:900}.brain-board-core b{margin-top:12px;font:700 12px var(--mono)}.brain-board-core span{margin-top:3px;color:#7787a7;font-size:8px;letter-spacing:.12em;text-transform:uppercase}.brain-board-core small{margin-top:auto;margin-bottom:14px;padding:5px 7px;border-radius:6px;background:#18223a;color:#8090b2;font-size:7px}.brain-legend{display:flex;justify-content:center;gap:14px;margin-top:8px;color:var(--muted);font-size:8px}.brain-legend span{display:flex;align-items:center;gap:5px}.brain-legend i{width:7px;height:7px;border-radius:50%}.brain-legend i.assigned{background:#657cff;box-shadow:0 0 8px #536cff}.brain-legend i.free{background:#50d49b}
.brain-pin{min-height:40px;touch-action:manipulation}.brain-pin:active{transform:scale(.98);background:#172a52}.brain-pin:focus-visible{outline:2px solid #7187ff;outline-offset:2px}.brain-pin b{padding:3px;border-radius:5px;background:rgba(91,111,209,.13);text-align:center}
.brain-circuit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:330px;overflow:auto;padding-right:2px;scrollbar-width:thin}.brain-circuit{display:flex;flex-direction:column;min-width:0;padding:10px;border:1px solid rgba(110,137,205,.14);border-radius:11px;background:linear-gradient(145deg,rgba(13,25,47,.9),rgba(8,16,32,.96))}.brain-circuit.lighting{border-color:rgba(112,93,255,.24)}.brain-circuit header{display:flex;align-items:center;gap:8px}.brain-circuit header>i{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:rgba(91,101,255,.15);color:#a9a0ff;font-style:normal}.brain-circuit header div{min-width:0}.brain-circuit header span,.brain-circuit header h3{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.brain-circuit header span{color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em}.brain-circuit header h3{margin:2px 0 0;font-size:10px}.brain-circuit header em{margin-left:auto;padding:4px 6px;border-radius:999px;background:rgba(64,197,135,.1);color:#6bdca3;font-size:7px;font-style:normal;white-space:nowrap}.brain-circuit-pins{display:flex;gap:5px;margin:9px 0}.brain-circuit-pins>span{flex:1;padding:5px 6px;border:1px solid rgba(108,132,196,.12);border-radius:7px;background:rgba(3,9,20,.45)}.brain-circuit-pins small,.brain-circuit-pins b{display:block}.brain-circuit-pins small{color:#71809d;font-size:6px}.brain-circuit-pins b{margin-top:2px;font:700 9px var(--mono)}.brain-circuit>p{display:flex;gap:4px;flex-wrap:wrap;min-height:20px;margin:0}.brain-circuit>p span{padding:3px 5px;border-radius:6px;background:rgba(77,102,170,.1);color:#9dacce;font-size:7px}.brain-shared-note{color:#7885a1;font-size:7px;line-height:1.35}.brain-circuit footer{display:flex;gap:5px;margin-top:auto;padding-top:8px}.brain-circuit footer .btn{height:26px;padding:0 7px;font-size:7px}.brain-notice{display:flex;align-items:center;gap:9px;margin-top:9px;padding:9px 11px;border:1px solid rgba(255,179,66,.18);border-radius:10px;background:rgba(255,163,43,.055)}.brain-notice>i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(255,176,54,.12);color:#ffb852;font-style:normal}.brain-notice b,.brain-notice small{display:block}.brain-notice b{font-size:9px}.brain-notice small{margin-top:2px;color:#9d907b;font-size:7px}
.raf-shared-source{border-color:rgba(112,93,255,.36)!important;background:linear-gradient(135deg,rgba(67,76,191,.13),rgba(10,20,39,.86))!important}.raf-shared-source em{color:#b7a7ff!important}
.circuit-manager{max-width:1060px}.cm-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.6fr);gap:12px}.cm-card,.cm-wiring{padding:14px;border:1px solid rgba(112,137,205,.16);border-radius:13px;background:rgba(7,15,31,.72)}.cm-card+.cm-card{margin-top:10px}.cm-card>h3,.cm-wiring>h3{margin:4px 0 8px}.cm-card>p,.cm-wiring>p{color:var(--muted);font-size:9px;line-height:1.55}.cm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.cm-head h3{margin:3px 0 0}.cm-member-list{display:grid;gap:6px}.cm-member-list article{display:grid;grid-template-columns:30px minmax(130px,1fr) minmax(150px,.7fr) auto auto;gap:6px;align-items:center;padding:8px;border:1px solid rgba(110,136,205,.12);border-radius:9px;background:#0c172c}.cm-member-list article>i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(112,93,255,.13);font-style:normal}.cm-member-list b,.cm-member-list span{display:block}.cm-member-list b{font-size:9px}.cm-member-list span{margin-top:2px;color:var(--muted);font-size:7px}.cm-member-list select{height:28px;font-size:7px}.cm-member-list .btn{height:28px;padding:0 7px;font-size:7px}.cm-add{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}.cm-add label>span{display:block;margin-bottom:5px;color:var(--muted);font-size:8px}.cm-add select,.cm-add input{height:34px}.cm-add .btn{height:34px}.cm-wiring>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.cm-wiring>div span{padding:9px;border:1px solid rgba(112,137,205,.14);border-radius:9px;background:#0c172c}.cm-wiring small,.cm-wiring b{display:block}.cm-wiring small{color:var(--muted);font-size:7px}.cm-wiring b{margin-top:3px;font:700 11px var(--mono)}
.pin-inspector{margin-top:12px;padding:14px;border:1px solid rgba(110,137,205,.16);border-radius:14px;background:linear-gradient(155deg,rgba(8,17,34,.96),rgba(4,10,22,.98));box-shadow:0 18px 50px rgba(0,0,0,.15)}.pin-inspector-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px 2px 12px}.pin-inspector-head h3{margin:3px 0 2px;font-size:15px}.pin-inspector-head p{max-width:680px;margin:0;color:var(--muted);font-size:9px;line-height:1.5}.pin-inspector-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;color:#8492ad;font-size:7px;white-space:nowrap}.pin-inspector-legend span{display:flex;align-items:center;gap:5px}.pin-inspector-legend i,.pin-state-dot{width:7px;height:7px;border-radius:50%;background:#60708f}.pin-inspector-legend i.high,.pin-state-dot.high{background:#5cde9d;box-shadow:0 0 8px rgba(92,222,157,.72)}.pin-inspector-legend i.low,.pin-state-dot.low{background:#7390ff}.pin-inspector-legend i.unknown,.pin-state-dot.unknown{background:#f0aa49}.pin-inspector-legend i.free,.pin-state-dot.free{background:#53617c}.pin-inspector-filters{display:flex;align-items:center;gap:6px;overflow:auto;padding:0 2px 12px;scrollbar-width:none}.pin-inspector-filters button{display:flex;align-items:center;gap:7px;height:29px;padding:0 10px;border:1px solid rgba(112,137,205,.15);border-radius:8px;background:#0b162a;color:#91a0bc;font:600 8px var(--font);cursor:pointer;white-space:nowrap}.pin-inspector-filters button b{display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:6px;background:rgba(119,142,204,.11);color:#b9c7e5;font:700 7px var(--mono)}.pin-inspector-filters button:hover,.pin-inspector-filters button.active{border-color:rgba(102,125,255,.48);background:linear-gradient(135deg,rgba(66,84,193,.3),rgba(12,24,48,.96));color:#f2f5ff}.pin-inspector-filters button.warn b{background:rgba(255,170,62,.13);color:#ffbd65}.pin-conflict-banner{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px;border:1px solid rgba(255,165,56,.24);border-radius:10px;background:rgba(255,154,44,.065)}.pin-conflict-banner>i{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:rgba(255,169,57,.14);color:#ffb653;font-style:normal;font-weight:900}.pin-conflict-banner>span{min-width:0;flex:1}.pin-conflict-banner b,.pin-conflict-banner small{display:block}.pin-conflict-banner b{font-size:9px}.pin-conflict-banner small{margin-top:2px;color:#a5957d;font-size:7px}.pin-inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pin-inspector-card{overflow:hidden;border:1px solid rgba(111,137,204,.15);border-radius:11px;background:linear-gradient(145deg,rgba(13,26,49,.93),rgba(8,17,34,.98));transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;cursor:pointer}.pin-inspector-card:hover{transform:translateY(-1px);border-color:rgba(101,126,255,.4);box-shadow:0 10px 24px rgba(0,0,0,.16)}.pin-inspector-card.conflict{border-color:rgba(255,166,62,.48);box-shadow:inset 3px 0 0 #f0a43c}.pin-inspector-card.free{background:rgba(7,15,30,.74)}.pin-inspector-card>header{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(108,132,196,.1)}.pin-inspector-number{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:40px;border:1px solid rgba(101,126,255,.25);border-radius:8px;background:rgba(65,80,180,.12)}.pin-inspector-number span{color:#7182a6;font-size:5px;letter-spacing:.1em}.pin-inspector-number b{margin-top:1px;font:800 12px var(--mono);color:#e6ebff}.pin-inspector-card.free .pin-inspector-number{border-color:rgba(82,213,156,.18);background:rgba(57,190,131,.06)}.pin-inspector-identity{min-width:0}.pin-inspector-identity span,.pin-inspector-identity strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pin-inspector-identity span{color:#7f8fab;font:600 7px var(--mono)}.pin-inspector-identity strong{margin-top:3px;color:#e4e9f7;font-size:9px}.pin-state{padding:4px 6px;border-radius:6px;background:rgba(97,114,149,.12);color:#9aa8c2;font:700 6px var(--mono);letter-spacing:.05em}.pin-state.high{background:rgba(67,208,141,.11);color:#6ce1a8}.pin-state.low{background:rgba(84,111,229,.13);color:#90a6ff}.pin-state.unknown{background:rgba(238,166,64,.1);color:#eeb463}.pin-state.free{color:#71809b}.pin-inspector-body{display:grid;grid-template-columns:minmax(145px,.85fr) minmax(190px,1.15fr);gap:10px;padding:10px}.pin-inspector-purpose{display:flex;align-items:center;gap:9px;min-width:0}.pin-inspector-purpose>i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:rgba(93,105,255,.13);color:#afa7ff;font-style:normal}.pin-inspector-card.input .pin-inspector-purpose>i{background:rgba(47,186,206,.1);color:#5bd8ea}.pin-inspector-card.free .pin-inspector-purpose>i{background:rgba(75,199,143,.08);color:#61d6a0}.pin-inspector-purpose>div{min-width:0}.pin-inspector-purpose span,.pin-inspector-purpose b,.pin-inspector-purpose small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pin-inspector-purpose span{color:#8291ad;font-size:6px;text-transform:uppercase;letter-spacing:.06em}.pin-inspector-purpose b{margin-top:2px;color:#dfe6f8;font-size:8px}.pin-inspector-purpose small{margin-top:2px;color:#74839e;font-size:6px}.pin-inspector-links{min-width:0;padding-left:10px;border-left:1px solid rgba(108,132,196,.1)}.pin-inspector-links>label{display:block;color:#71809d;font-size:6px;letter-spacing:.08em}.pin-inspector-links>div{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.pin-inspector-links>div>span{max-width:100%;overflow:hidden;padding:4px 6px;border-radius:6px;background:rgba(84,106,175,.1);color:#aab7d0;font-size:6px;white-space:nowrap;text-overflow:ellipsis}.pin-inspector-links>div>span i{margin-right:4px;color:#7d8eff;font-style:normal}.pin-inspector-links>div>small{color:#687690;font-size:7px}.pin-inspector-card>footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:6px 9px;background:rgba(3,9,20,.34)}.pin-inspector-card>footer>span{display:flex;align-items:center;gap:6px;min-width:0;color:#75839d;font-size:6px}.pin-inspector-card>footer>div{display:flex;gap:5px}.pin-inspector-card>footer .btn{height:24px;padding:0 7px;font-size:6px}.pin-inspector-empty{grid-column:1/-1;display:flex;min-height:150px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed rgba(112,137,205,.18);border-radius:11px;color:#7d8aa4;text-align:center}.pin-inspector-empty>i{font-size:22px;font-style:normal}.pin-inspector-empty>b{margin-top:7px;color:#cdd6ea;font-size:10px}.pin-inspector-empty>span{margin:3px 0 9px;font-size:7px}
@media(max-width:1100px){.brain-workspace{grid-template-columns:1fr}.brain-circuit-grid{max-height:260px}.brain-summary{grid-template-columns:1fr 1fr}.cm-layout{grid-template-columns:1fr}.cm-member-list article{grid-template-columns:30px 1fr auto}.cm-member-list select{grid-column:2/4}.cm-add{grid-template-columns:1fr}}
@media(max-width:820px){.pin-inspector-head{align-items:flex-start;flex-direction:column}.pin-inspector-legend{justify-content:flex-start}.pin-inspector-grid{grid-template-columns:1fr}.pin-inspector-card>footer{align-items:flex-start;flex-direction:column}.pin-inspector-card>footer>div{width:100%;justify-content:flex-end}}
.hub-card { display: flex; align-items: center; gap: 20px; }
.hub-illustration { width: 84px; height: 84px; border-radius: var(--radius-md); background: linear-gradient(160deg,#1a2030,#0c0f18); border: 1px solid var(--line-bright); display: grid; place-items: center; font-size: 30px; flex-shrink: 0; }
.hub-row { display: flex; gap: 30px; flex-wrap: wrap; }
.hub-stat { display: flex; flex-direction: column; gap: 4px; }
.hub-stat b { font-size: 15px; font-weight: 700; font-family: var(--mono); }

table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data-table th { text-align: left; padding: 10px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--txt-faint); font-weight: 700; border-bottom: 1px solid var(--line); }
table.data-table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--txt-dim); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table .cell-primary { color: var(--txt); font-weight: 600; }
.row-avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; margin-right: 9px; vertical-align: middle; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.pill.good { background: rgba(34,197,94,.14); color: #86efac; }
.pill.warn { background: rgba(245,166,35,.14); color: #fbbf6e; }
.pill.bad { background: rgba(239,68,68,.14); color: #fca5a5; }
.pill.neutral { background: rgba(255,255,255,.06); color: var(--txt-dim); }
.pill .dot2 { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ================= Security ================= */
.gate-panel { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.gate-info { min-width: 180px; }
.gate-info h2 { font-size: 22px; font-weight: 800; margin: 4px 0 6px; }
.gate-status-txt { font-size: 13px; font-weight: 700; color: var(--good); margin-bottom: 10px; }
.gate-info .muted-line { font-size: 11.5px; color: var(--txt-faint); line-height: 1.6; }
.gate-ring { position: relative; width: 128px; height: 128px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--good) 0deg 360deg, rgba(255,255,255,.08) 0); box-shadow: 0 0 40px rgba(34,197,94,.25); }
.gate-ring.closed { background: conic-gradient(var(--good) 0deg 360deg, rgba(255,255,255,.08) 0); }
.gate-ring.open { background: conic-gradient(var(--warn) 0deg 360deg, rgba(255,255,255,.08) 0); box-shadow: 0 0 40px rgba(245,166,35,.25); }
.gate-ring-inner { position: absolute; inset: 8px; border-radius: 50%; background: var(--panel-solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.gate-ring-inner .glyph { font-size: 22px; }
.gate-ring-inner b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.gate-illustration { flex: 1; min-width: 180px; height: 108px; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; }

.cam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cam-tile { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(160deg,#151a26,#0a0d14); border: 1px solid var(--line); }
.cam-tile.empty { border: 1.5px dashed var(--line-bright); display: grid; place-items: center; color: var(--txt-faint); font-size: 12px; background: rgba(255,255,255,.015); }
.cam-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; color: #fff; }
.cam-live { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #fca5a5; background: rgba(8,11,18,.6); padding: 3px 8px; border-radius: 999px; }
.cam-live .r { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.cam-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }

.alert-list { display: flex; flex-direction: column; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.alert-row:last-child { border-bottom: none; }
.alert-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.alert-row .a-txt { flex: 1; font-family: var(--mono); font-size: 11.5px; color: var(--txt); }
.alert-row .a-time { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); text-align: right; margin-right: 6px; }

/* ================= Pool gauges ================= */
.pool-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gauge-ring { position: relative; width: 118px; height: 118px; margin: 6px 0 8px; }
.gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-ring .g-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9; }
.gauge-ring .g-fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.gauge-ring .g-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-ring .g-center b { font-size: 21px; font-weight: 800; }
.gauge-ring .g-center span { font-size: 9.5px; color: var(--txt-faint); }
.gauge-range { font-size: 10.5px; color: var(--txt-faint); margin-bottom: 6px; }
.spark { width: 100%; height: 30px; }

.pump-card { padding: 15px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.pump-card .pc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pump-card .pc-icon { font-size: 20px; }
.relay-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; }
.relay-status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--txt-dim); font-family: var(--mono); }
.relay-btn { min-width: 84px; font-weight: 700; }
.relay-btn.on { background: linear-gradient(135deg, var(--good), #16a34a); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(34,197,94,.34); }

.wf-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.wf-row:last-child { border-bottom: none; }
.wf-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(34,211,238,.14); color: var(--accent-cyan); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.wf-row b { font-size: 12.5px; display: block; }
.wf-row span { font-size: 10.5px; color: var(--txt-faint); }

.env-card { display: flex; align-items: center; gap: 16px; }
.env-ring { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(34,197,94,.4); display: grid; place-items: center; font-size: 20px; color: var(--good); flex-shrink: 0; animation: pulse-ring 2.4s ease-in-out infinite; }
@keyframes pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.28); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

/* ================= Toggle switch ================= */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: rgba(255,255,255,.12); border-radius: 999px; transition: background .18s; cursor: pointer; }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; }
.switch input:checked + .track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* ================= Modals ================= */
.modal-overlay { position: fixed; inset: 0; background: rgba(3,4,8,.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line-bright); border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 24px; }
.modal.wide { max-width: 780px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.modal-head h2 { font-size: 17px; font-weight: 800; }
.modal-head p { font-size: 12px; color: var(--txt-faint); margin-top: 4px; }
.modal-close { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: var(--txt-dim); cursor: pointer; font-size: 14px; flex-shrink: 0; }
.field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-faint); font-weight: 700; margin-bottom: 7px; display: block; }
.tile-select { display: flex; gap: 8px; flex-wrap: wrap; }
.tile-select .tile { flex: 1; min-width: 66px; padding: 12px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,.03); text-align: center; cursor: pointer; font-size: 11px; color: var(--txt-dim); }
.tile-select .tile .ti { display: block; font-size: 17px; margin-bottom: 6px; }
.tile-select .tile.active { border-color: var(--accent); background: rgba(79,127,255,.14); color: #fff; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.upload-box { width: 100%; height: 80px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line-bright); display: grid; place-items: center; color: var(--txt-faint); font-size: 11.5px; cursor: pointer; }
.avatar-upload { width: 84px; height: 84px; border-radius: 50%; border: 2px dashed var(--line-bright); display: grid; place-items: center; color: var(--txt-faint); font-size: 11px; margin: 0 auto 16px; cursor: pointer; text-align: center; }

.event-pass-card { border-radius: var(--radius-lg); padding: 22px; text-align: center; background: linear-gradient(165deg, #2b1740, #150a1c); border: 1px solid rgba(168,85,247,.35); }
.event-pass-card .ep-badge { font-size: 10px; letter-spacing: .12em; color: #d8b4fe; text-transform: uppercase; font-weight: 700; }
.event-pass-card h3 { font-size: 19px; font-weight: 800; background: linear-gradient(90deg,#ec4899,#a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 8px 0 4px; }
.event-pass-card .ep-qr { width: 150px; height: 150px; background: #fff; border-radius: 14px; margin: 16px auto; padding: 10px; overflow: hidden; }
.event-pass-card .ep-qr canvas, .event-pass-card .ep-qr svg, .event-pass-card .ep-qr img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; }
.event-pass-card .ep-qr img:not([src]), .event-pass-card .ep-qr img[src=""] { display: none; }
.event-pass-card .ep-id { font-family: var(--mono); font-size: 11px; color: var(--txt-faint); margin-top: 6px; }

/* ================= Studio / zone / effects (functional pages) ================= */
.zone-panel { margin-bottom: 18px; }
.zone-grid { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 11px; }
.zone-card { position: relative; overflow: hidden; padding: 14px; border-radius: var(--radius-md); text-align: left; cursor: pointer; color: var(--txt); background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.zone-card:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.zone-card.active { background: rgba(79,127,255,.14); border-color: var(--accent); }
.zone-color { position: absolute; inset: 0 0 auto 0; height: 4px; }
.zone-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.zone-title b { font-size: 13.5px; }
.zone-state { color: var(--txt-faint); font: 10px var(--mono); text-transform: uppercase; }
.zone-meta { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); text-transform: uppercase; margin: -2px 0 9px; }
.zone-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.zone-pins span { padding: 6px; border-radius: 7px; text-align: center; font: 10.5px var(--mono); background: rgba(0,0,0,.25); }
.zone-pins .r { color: #fca5a5; } .zone-pins .g { color: #86efac; } .zone-pins .b { color: #93c5fd; }
.link-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-dim); cursor: pointer; }
.link-toggle input { accent-color: var(--accent); }
.wiring-note { margin-top: 12px; padding: 10px 12px; border-radius: 9px; color: var(--txt-dim); font-size: 11.5px; line-height: 1.55; background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.18); }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.room-card { cursor: default; }
.room-card .mini-range { flex: 1; }
.room-card .mini-val { font-family: var(--mono); font-size: 11px; color: var(--txt-dim); width: 34px; text-align: right; }
.room-card .mini-color { width: 34px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line-bright); background: none; cursor: pointer; flex-shrink: 0; }

.picker-wrap { display: flex; flex-direction: column; gap: 14px; }
#sv-canvas { width: 100%; height: 190px; border-radius: 12px; cursor: crosshair; display: block; border: 1px solid var(--line); }
#hue-canvas { width: 100%; height: 22px; border-radius: 999px; cursor: pointer; display: block; }
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.swatch { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: transform .12s ease; }
.swatch:hover { transform: scale(1.14); }

.stage { position: relative; display: grid; place-items: center; min-height: 260px; border-radius: 14px; background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.03), transparent 70%), #05080f; border: 1px solid var(--line); overflow: hidden; }
/* A fully-off orb is pure black on a near-black stage, which reads as a broken
   or empty container. A faint rim keeps it legible as "this light is off". */
.orb { width: 150px; height: 150px; border-radius: 50%; background: #5b8cff; box-shadow: 0 0 0 1px rgba(255,255,255,.10); transition: background .12s linear, box-shadow .12s linear, transform .12s linear; }
.stage-meta { position: absolute; bottom: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--txt-faint); }
.stage.sm { min-height: 140px; flex: 0 1 200px; min-width: 150px; }
.orb.sm { width: 96px; height: 96px; }
.dash-ring-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring { position: relative; width: 108px; height: 108px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, 0.08) 0); transition: background .25s ease; }
.ring-inner { position: absolute; inset: 9px; border-radius: 50%; background: var(--panel-solid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ring-inner b { font-size: 18px; font-weight: 700; }
.ring-inner span { font-size: 9px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: 0.07em; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: flex; align-items: baseline; justify-content: space-between; }
.field label { font-size: 12.5px; color: var(--txt-dim); font-weight: 550; }
.field .val { font-family: var(--mono); font-size: 12.5px; color: var(--txt); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.55); border: 3px solid var(--accent); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: 3px solid var(--accent); }
/* url, email and password were missing here, so any field using them fell back
   to the browser default: a white box with black text, visibly foreign to the
   rest of the dark UI. */
input[type="text"], input[type="number"], input[type="time"], input[type="date"],
input[type="url"], input[type="email"], input[type="password"], input[type="search"],
select, textarea { font-family: inherit; font-size: 13px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); border: 1px solid var(--line-bright); color: var(--txt); width: 100%; }

/* Chrome paints autofilled fields with its own near-white background and dark
   text, which on a dark UI looks like a broken or foreign control. The colour
   cannot be set directly, so the standard workaround is an inset shadow large
   enough to cover the field, plus text-fill-color for the caret and value. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #171d29 inset;
  box-shadow: 0 0 0 1000px #171d29 inset;
  -webkit-text-fill-color: var(--txt);
  caret-color: var(--txt);
  border: 1px solid var(--line-bright);
  transition: background-color 9999s ease-in-out 0s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select option { background: var(--panel-solid); }
textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* auto-fit, not auto-fill: auto-fill keeps empty phantom tracks, so a short
   list leaves dead space instead of filling its container. */
.fx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 11px; }
.fx { position: relative; overflow: hidden; padding: 15px 14px; border-radius: 12px; text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt); cursor: pointer; font-family: inherit; transition: all .18s ease; }
.fx:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.fx.active { border-color: var(--accent); background: rgba(79,127,255,.16); box-shadow: 0 0 0 1px rgba(79,127,255,.3); }
.fx b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.fx small { font-size: 11px; color: var(--txt-faint); line-height: 1.4; display: block; }
.fx-ico { font-size: 17px; margin-bottom: 8px; display: block; }
/* Wrap rather than scroll: a horizontal scrollbar hid half the effects behind
   an affordance most people never drag. Wrapping keeps all 8 reachable. */
.dash-fx-row { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.dash-fx-row .fx { flex: 1 1 120px; min-width: 110px; padding: 12px; }
.dash-fx-row .fx-ico { font-size: 15px; margin-bottom: 6px; }
.dash-fx-row .fx b { font-size: 12.5px; }
.dash-fx-row .fx small { display: none; }

/* auto-fit, not auto-fill: auto-fill keeps empty phantom tracks, so a short
   list leaves dead space instead of filling its container. */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; }
.scene { padding: 14px; border-radius: 12px; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.04); transition: all .18s ease; position: relative; }
.scene:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.scene-bar { height: 42px; border-radius: 8px; margin-bottom: 11px; }
.scene b { font-size: 13px; display: block; margin-bottom: 2px; }
.scene small { font-size: 11px; color: var(--txt-faint); }
.scene .x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(0,0,0,.5); color: var(--txt-dim); cursor: pointer; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s; }
.scene:hover .x { opacity: 1; }

.dmx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 3px; max-height: 380px; overflow-y: auto; padding-right: 6px; }
.ch { aspect-ratio: 1; border-radius: 5px; display: grid; place-items: center; font-family: var(--mono); font-size: 9px; cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid transparent; color: var(--txt-faint); transition: all .12s; }
.ch:hover { border-color: var(--accent); color: var(--txt); }
.ch.lit { color: #fff; }

/* auto-fit, not auto-fill: auto-fill keeps empty phantom tracks, so a short
   list leaves dead space instead of filling its container. */
.pin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.pin { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.pin-name { font-weight: 620; font-size: 13px; }
.pin-role { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); margin-bottom: 10px; }
.pin-btns { display: flex; gap: 6px; }
.pin-btns button { flex: 1; font-family: inherit; font-size: 11px; font-weight: 600; padding: 6px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line-bright); background: rgba(255,255,255,.04); color: var(--txt-dim); }
.pin-btns button.on { background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.5); color: #86efac; }
.pin-btns button.hi { background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.5); color: #fcd34d; }

.board-port-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.port-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.port-table { min-width: 590px; }
.port-table th, .port-table td { white-space: nowrap; }
.port-table td { padding: 9px 10px; }
.port-table code { font-family: var(--mono); color: var(--txt); font-size: 11.5px; }
.port-footnote { margin-top: 12px; color: var(--txt-faint); font-size: 11px; line-height: 1.55; }
@media (max-width: 1180px) { .board-port-tables { grid-template-columns: 1fr; } }

.log { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; height: 240px; overflow-y: auto; padding: 12px; background: #05080f; border-radius: 12px; border: 1px solid var(--line); }
.log div { display: flex; gap: 9px; }
.log .t { color: var(--txt-faint); flex-shrink: 0; }
.log .tx { color: var(--accent); }
.log .rx { color: var(--good); }
.log .err { color: var(--bad); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,173,220,.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148,173,220,.35); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack .panel { margin-bottom: 0; }
.muted { color: var(--txt-faint); font-size: 12px; line-height: 1.6; }
.divider { height: 1px; background: var(--line); margin: 4px 0; }
.banner { padding: 11px 15px; border-radius: var(--radius-sm); font-size: 12.5px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); color: #fcd34d; }

.insight-row { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 6px; }
.insight-stat { display: flex; flex-direction: column; gap: 4px; }
.insight-stat b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ins-canvas { width: 100%; height: 90px; display: block; margin: 14px 0 12px; border-radius: 10px; background: rgba(255,255,255,.02); }
.fx-usage { display: flex; flex-direction: column; gap: 9px; }
.fx-usage-row { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--txt-dim); }
.fx-usage-row .fx-name { width: 66px; flex-shrink: 0; }
.fx-usage-row .track { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.fx-usage-row .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s ease; }
.fx-usage-row .cnt { width: 22px; text-align: right; font-family: var(--mono); color: var(--txt-faint); flex-shrink: 0; }

.seq-grid { grid-template-columns: 320px 1fr; }
@media (max-width: 1080px) { .seq-grid { grid-template-columns: 1fr; } }
.seq-list { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; }
.seq-item { padding: 12px 13px; border-radius: 11px; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.035); transition: all .15s ease; position: relative; }
.seq-item:hover { border-color: var(--line-bright); }
.seq-item.active { border-color: var(--accent); background: rgba(79,127,255,.14); }
.seq-item b { display: block; font-size: 13px; margin-bottom: 2px; }
.seq-item small { color: var(--txt-faint); font-size: 11px; }
.seq-item .x { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 6px; border: none; background: rgba(0,0,0,.5); color: var(--txt-dim); cursor: pointer; font-size: 12px; line-height: 1; opacity: 0; transition: opacity .15s; }
.seq-item:hover .x { opacity: 1; }
.seq-steps { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.seq-step { display: grid; grid-template-columns: 26px 78px 1fr 96px 92px 60px; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.seq-step .idx { font-family: var(--mono); color: var(--txt-faint); font-size: 11px; text-align: center; }
.seq-step select, .seq-step input[type="number"] { padding: 7px 8px; font-size: 11.5px; }
.seq-step input[type="color"] { width: 100%; height: 32px; border: 1px solid var(--line-bright); border-radius: 7px; background: none; padding: 2px; cursor: pointer; }
.seq-step-actions { display: flex; gap: 4px; justify-self: end; }
.seq-step-actions button { width: 25px; height: 25px; border-radius: 6px; border: 1px solid var(--line-bright); background: rgba(255,255,255,.04); color: var(--txt-dim); cursor: pointer; font-size: 11px; line-height: 1; }
.seq-step-actions button:hover { color: var(--txt); background: rgba(255,255,255,.09); }
@media (max-width: 640px) { .seq-step { grid-template-columns: 1fr 1fr; } }

.rules-list { display: flex; flex-direction: column; gap: 8px; }
.rule-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 12.5px; }
.rule-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; background: rgba(79,127,255,.16); color: #9db8ff; margin-right: 6px; }
.rule-tag.then { background: rgba(168,85,247,.18); color: #d8b4fe; }
.rule-arrow { color: var(--txt-faint); }
.rule-card .x { width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(0,0,0,.4); color: var(--txt-dim); cursor: pointer; font-size: 13px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .main { grid-column: 1; }
  .sidebar { position: relative; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { flex-direction: row; margin-top: 0; border-top: none; padding-top: 0; }
  .side-foot .btn.block { width: auto; }
}

/* ================= Covers (curtains / blinds) & dimmers ================= */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cover-card, .dimmer-card { padding: 14px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.cover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cover-head b { font-size: 13px; }
.cover-track { position: relative; height: 74px; border-radius: 10px; background: linear-gradient(180deg, #0a0f18, #0d1420); border: 1px solid var(--line); overflow: hidden; }
/* Fill grows downward from the top like real fabric closing across a window. */
.cover-fill { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(79,127,255,.45), rgba(168,85,247,.30)); transition: height .12s linear; }
.cover-btns { display: flex; gap: 6px; }
.cover-btns .btn { flex: 1; padding: 6px 0; }
.cover-slider, .dimmer-slider { width: 100%; }
.cover-note { font-size: 10.5px; color: var(--txt-faint); line-height: 1.4; }

/* ================= Music sync bands ================= */
.music-bands { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.music-bands .mb { display: flex; align-items: center; gap: 10px; }
.music-bands .mb span { width: 46px; font-size: 11px; color: var(--txt-dim); flex-shrink: 0; }
.music-bands .mb-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.music-bands .mb-bar i { display: block; height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .06s linear; }
.pill.warn { background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.4); color: #fbd38d; }

/* ================= Image pickers (click or drop) ================= */
.img-picker { position: relative; cursor: pointer; background-size: cover; background-position: center; transition: border-color .15s ease, box-shadow .15s ease; }
.img-picker:hover { border-color: var(--accent); }
.img-picker.drag { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,127,255,.25); }
.img-picker .img-hint { pointer-events: none; }
.img-picker.has-image .img-hint { background: rgba(5,7,13,.72); padding: 3px 8px; border-radius: 6px; font-size: 10.5px; }
.img-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(5,7,13,.8); color: #fca5a5; font-size: 11px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.img-del:hover { background: rgba(239,68,68,.55); color: #fff; }

.upload-box { min-height: 92px; border: 2px dashed var(--line-bright); border-radius: var(--radius-md); display: grid; place-items: center; text-align: center; color: var(--txt-faint); font-size: 12px; padding: 12px; }
.avatar-upload.has-image { border-style: solid; color: transparent; }

/* Party banner picker sits over the hero art */
.party-hero { position: relative; }
.hero-img-btn { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(5,7,13,.6); color: #e6ebf5; font-size: 11.5px; font-family: inherit; cursor: pointer; backdrop-filter: blur(4px); min-width: 120px; min-height: 32px; }
.hero-img-btn:hover { background: rgba(5,7,13,.85); }
.hero-img-btn.has-image { background-image: none !important; }

/* Image library (Settings) */
.img-lib { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.img-lib-card { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: rgba(255,255,255,.03); }
.img-lib-card .ilc-thumb { height: 92px; background-size: cover; background-position: center; }
.img-lib-card .ilc-meta { padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.img-lib-card .ilc-meta b { font-size: 11.5px; word-break: break-all; }

/* ================= Animated estate gate (Security) ================= */
.gate-stage { position: relative; flex: 1 1 340px; min-width: 300px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #05070d; }
.gate-art { display: block; width: 100%; height: auto; }

/* Leaves swing away from their hinge. Scaling toward the hinge post reads as a
   gate swinging into the driveway, and stays cheap enough to animate smoothly. */
.gate-art .leaf { transition: transform 2.4s cubic-bezier(.45,.05,.25,1), opacity 2.4s ease; }
.gate-art .leaf-l { transform-origin: 118px 178px; }
.gate-art .leaf-r { transform-origin: 502px 178px; }
.gate-stage.is-open .leaf-l { transform: scaleX(.10) skewY(-1.5deg); opacity: .55; }
.gate-stage.is-open .leaf-r { transform: scaleX(.10) skewY(1.5deg);  opacity: .55; }

/* Lamps: dark and cold when off, warm and haloed when on. */
.gate-art .lamp-bulb { fill: #39435a; transition: fill .5s ease, filter .5s ease; }
.gate-art .lamp-halo { opacity: 0; transition: opacity .6s ease; }
.gate-art .gate-spill { opacity: 0; transition: opacity .6s ease; }
.gate-stage.lamps-on .lamp-bulb { fill: #ffd89b; filter: drop-shadow(0 0 8px rgba(255,190,110,.95)); }
.gate-stage.lamps-on .lamp-halo { opacity: 1; }
.gate-stage.lamps-on .gate-spill { opacity: .85; }

/* Travel indicator while the motor is running */
.gate-motion { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #ffd89b; opacity: 0; transition: opacity .3s ease; white-space: nowrap; }
.gate-stage.is-moving .gate-motion { opacity: 1; animation: gatePulse 1.1s ease-in-out infinite; }
@keyframes gatePulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

.gate-light-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.gate-light-row select { max-width: 190px; }

/* ================= Rooms 2.0 ================= */
.rooms-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-search { min-width: 190px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt); font-size: 12.5px; font-family: inherit; }
.room-summary { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 18px; }
.rs-item { font-size: 11.5px; color: var(--txt-dim); }
.rs-item b { color: var(--txt); font-size: 14px; margin-right: 4px; }

.floor-sec { margin-bottom: 22px; }
.floor-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.floor-head h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-dim); }

.room-card { cursor: pointer; }
.room-card .rc-type { position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: rgba(5,7,13,.7); border: 1px solid var(--line-bright); color: var(--txt-dim); }
.room-card.is-on { border-color: rgba(79,127,255,.4); }

.unassigned-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.una-card { padding: 12px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px dashed var(--line-bright); display: flex; flex-direction: column; gap: 8px; }
.una-top { display: flex; align-items: center; gap: 8px; }
.una-top b { font-size: 12.5px; }
.una-ico { font-size: 15px; }
.una-type { display: block; font-size: 10.5px; color: var(--txt-faint); }
.una-assign { font-size: 11.5px; padding: 6px 8px; }

/* Drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(3,4,8,.6); backdrop-filter: blur(3px); display: none; z-index: 210; }
.drawer-overlay.open { display: block; }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 94vw); background: var(--panel-2); border-left: 1px solid var(--line-bright); padding: 22px; overflow-y: auto; box-shadow: -30px 0 80px rgba(0,0,0,.6); animation: drawerIn .22s ease; }
@keyframes drawerIn { from { transform: translateX(28px); opacity: .4 } to { transform: none; opacity: 1 } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.drawer-head h2 { font-size: 19px; font-weight: 800; margin: 2px 0; }
.rd-master { padding: 14px; border-radius: var(--radius-md); background: rgba(79,127,255,.07); border: 1px solid rgba(79,127,255,.22); margin-bottom: 20px; }
.rd-master-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.drawer-sec { margin-bottom: 22px; }
.drawer-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.drawer-sec-head h3 { font-size: 13px; font-weight: 700; }
.rd-dev { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.rd-dev-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-dev-main b { font-size: 12.5px; display: block; }
.rd-dev-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 260px; flex-wrap: wrap; }
.rd-dev-color { width: 38px; height: 32px; padding: 2px; border-radius: 8px; }
.rd-dev-fx { width: 112px; min-width: 100px; }
.rd-dev-level { width: 74px; }
.rd-dev.zone-device { align-items: stretch; flex-direction: column; }
.rd-dev.zone-device .rd-dev-main { width: 100%; }
.rd-dev.zone-device .rd-dev-ctl { display: grid; grid-template-columns: 38px minmax(105px,1fr) minmax(72px,.8fr) auto auto; width: 100%; flex: none; }
.rd-dev.zone-device .rd-dev-fx, .rd-dev.zone-device .rd-dev-level { width: 100%; }
.rd-scene { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.rd-scene b { font-size: 12.5px; }
.drawer-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Room editor device picker */
.mre-devs { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.mre-dev { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; }
.mre-dev:hover { border-color: var(--line-bright); }
.mre-dev-txt { flex: 1; min-width: 0; }
.mre-dev-txt b { font-size: 12.5px; display: block; }

/* ================= YouTube music panel ================= */
.yt-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #05070d; border: 1px solid var(--line); }
.yt-wrap iframe, .yt-wrap > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.yt-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #0b1220; }
.yt-meta { flex: 1; min-width: 0; }
.yt-meta b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-select { grid-template-columns: repeat(2, 1fr); }

/* Board capability chips */
.cap-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-issues.cc-note { color: #fbd38d; border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.08); }
.chip.pin-in-only { opacity: .65; border-style: dashed; }

/* ================= Setup wizard ================= */
.wiz-overlay { position: fixed; inset: 0; background: rgba(3,4,8,.75); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 300; padding: 24px; }
.wiz-overlay.open { display: flex; }
.wiz { width: 100%; max-width: 980px; max-height: 90vh; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--line-bright); border-radius: var(--radius-xl); box-shadow: 0 30px 90px rgba(0,0,0,.65); padding: 26px; }
.wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.wiz-head h2 { font-size: 21px; font-weight: 800; margin: 4px 0 2px; }
.wiz-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.wiz-step { font-size: 10.5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--txt-faint); white-space: nowrap; }
.wiz-step.active { background: rgba(79,127,255,.16); border-color: rgba(79,127,255,.45); color: #cddcff; }
.wiz-step.done { color: #86efac; border-color: rgba(34,197,94,.3); }
.wiz-body { min-height: 220px; }
.wiz-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.wiz-card { text-align: left; padding: 16px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; font-family: inherit; color: var(--txt); }
.wiz-card:hover { border-color: var(--line-bright); }
.wiz-card.sel { border-color: var(--accent); background: rgba(79,127,255,.10); box-shadow: 0 0 0 1px var(--accent); }
.wiz-card b { display: block; font-size: 13.5px; margin-bottom: 5px; }
.wiz-card span { font-size: 11.5px; color: var(--txt-dim); line-height: 1.45; }
.wiz-info { padding: 13px 15px; border-radius: var(--radius-md); background: rgba(255,255,255,.03); border: 1px solid var(--line); margin-bottom: 12px; }
.wiz-info h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-faint); margin-bottom: 6px; }
.wiz-info p, .wiz-info li { font-size: 12.5px; line-height: 1.6; color: var(--txt-dim); }
.wiz-info ul { padding-left: 18px; }
.wiz-info code { background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 11.5px; }
.wiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.wiz-pin-head, .wiz-pin-row { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(220px,1.15fr) minmax(150px,.9fr) minmax(210px,1fr); gap: 10px; align-items: center; }
.wiz-pin-head { padding: 0 12px 7px; color: var(--txt-faint); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.wiz-pin-list { gap: 7px; max-height: 48vh; overflow-y: auto; padding: 2px; }
.wiz-pin-row { padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); transition: border-color .15s, background .15s; }
.wiz-pin-row.inactive { opacity: .68; }
.wiz-pin-row.focus { opacity: 1; border-color: var(--accent); background: rgba(79,127,255,.12); box-shadow: 0 0 0 2px rgba(79,127,255,.18); }
.wiz-pin-id b { display: block; font: 700 12px var(--mono); color: var(--txt); }
.wiz-pin-id span { display: block; margin-top: 3px; font-size: 10px; color: var(--txt-faint); }
.wiz-pin-row select, .wiz-pin-row input { min-width: 0; width: 100%; }

/* ================= Pin map ================= */
.pinmap td, .pinmap th { vertical-align: middle; }
.pinmap .pm-free td { opacity: .55; }
.pinmap .pm-conflict { background: rgba(239,68,68,.10); }
.pinmap .pm-conflict td:first-child { color: #fca5a5; font-weight: 700; }
.pinmap .pill { font-size: 9.5px; padding: 2px 7px; }
.pinmap-actions { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.mp-claim { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mp-claim b { font-size: 13px; display: block; }
.mp-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pin-detail-modal{width:min(930px,calc(100vw - 32px));max-width:930px;padding:20px;background:radial-gradient(circle at 8% 0,rgba(73,99,232,.14),transparent 30%),linear-gradient(150deg,#0d1629,#080f1e);border-color:rgba(113,139,207,.25)}.pin-detail-modal .modal-head{margin-bottom:13px}.pin-detail-modal .modal-head h2{margin:3px 0 2px;font-size:20px}.pin-detail-modal .modal-head p{font-size:10px}.mp-pin-hero{display:grid;grid-template-columns:108px minmax(220px,1fr) minmax(205px,.65fr);gap:10px;align-items:stretch;margin-bottom:11px}.mp-pin-badge,.mp-pin-summary,.mp-live{min-width:0;border:1px solid rgba(111,137,204,.16);border-radius:12px;background:rgba(7,15,30,.72)}.mp-pin-badge{display:flex;min-height:86px;flex-direction:column;align-items:center;justify-content:center;border-color:rgba(102,125,255,.34);background:linear-gradient(145deg,rgba(74,91,204,.2),rgba(10,20,40,.9))}.mp-pin-badge small,.mp-pin-summary>span,.mp-live small{color:#7483a1;font-size:7px;letter-spacing:.09em}.mp-pin-badge strong{margin:2px 0;font:800 24px var(--mono);color:#f1f4ff}.mp-pin-badge span{max-width:92px;overflow:hidden;color:#99a9c7;font:600 7px var(--mono);text-overflow:ellipsis;white-space:nowrap}.mp-pin-summary{display:flex;flex-direction:column;justify-content:center;padding:13px}.mp-pin-summary b{margin-top:5px;overflow:hidden;color:#eef2ff;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.mp-pin-summary small{margin-top:4px;color:#8391aa;font-size:8px}.mp-live{display:flex;align-items:center;gap:10px;padding:12px}.mp-live>i{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#f0aa49;box-shadow:0 0 12px rgba(240,170,73,.5)}.mp-live>span{min-width:0}.mp-live small,.mp-live b,.mp-live em{display:block}.mp-live b{margin-top:2px;font:800 11px var(--mono);text-transform:uppercase}.mp-live em{margin-top:3px;overflow:hidden;color:#7f8da8;font-size:7px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.mp-live.high>i{background:#5cde9d;box-shadow:0 0 13px rgba(92,222,157,.7)}.mp-live.high b{color:#6ee3ab}.mp-live.low>i{background:#7390ff;box-shadow:0 0 13px rgba(115,144,255,.65)}.mp-live.low b{color:#93a8ff}.mp-live.free>i{background:#55627c;box-shadow:none}.mp-live.free b{color:#8a97ae}.mp-warning{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:9px 10px;border:1px solid rgba(255,166,62,.25);border-radius:10px;background:rgba(255,157,48,.07)}.mp-warning>i{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:rgba(255,171,61,.14);color:#ffb75d;font-style:normal;font-weight:900}.mp-warning b,.mp-warning small{display:block}.mp-warning b{font-size:9px}.mp-warning small{margin-top:2px;color:#a6967f;font-size:7px}.mp-destinations{padding:12px;border:1px solid rgba(111,137,204,.16);border-radius:12px;background:rgba(4,11,24,.56)}.mp-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.mp-section-head h3{margin:0;font-size:11px}.mp-section-head p{margin-top:2px;color:#7c89a2;font-size:7px}.mp-section-head>span{padding:4px 7px;border-radius:6px;background:rgba(91,109,174,.12);color:#9aa9c6;font-size:7px;white-space:nowrap}.mp-route-list{display:grid;gap:7px;max-height:285px;overflow:auto;scrollbar-width:thin}.mp-route{border:1px solid rgba(110,136,203,.14);border-radius:10px;background:linear-gradient(145deg,rgba(14,27,50,.9),rgba(8,17,34,.94))}.mp-route-flow{display:grid;grid-template-columns:minmax(145px,.8fr) 16px minmax(180px,1fr) 16px minmax(165px,.9fr);gap:5px;align-items:center;padding:9px}.mp-route-flow>em{color:#526382;font-size:12px;font-style:normal;text-align:center}.mp-route-node{display:flex;align-items:center;gap:8px;min-width:0;padding:8px;border-radius:8px;background:rgba(5,12,27,.58)}.mp-route-node>i{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:rgba(90,104,255,.13);color:#aaa6ff;font-style:normal}.mp-route-node.room>i{background:rgba(54,147,220,.11);color:#68c4f1}.mp-route-node.function>i{background:rgba(67,200,142,.09);color:#62d8a0}.mp-route-node>span{min-width:0}.mp-route-node small,.mp-route-node b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mp-route-node small{color:#6f7e9b;font-size:6px;letter-spacing:.07em}.mp-route-node b{margin-top:3px;color:#dce4f6;font-size:8px}.mp-route>footer{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:6px 9px;border-top:1px solid rgba(109,133,197,.09);background:rgba(3,9,20,.26)}.mp-route>footer .btn{height:25px;padding:0 8px;font-size:7px}.mp-unassigned{margin-right:auto;color:#76839c;font-size:7px}.mp-route-empty{display:flex;align-items:center;gap:11px;min-height:74px;padding:13px;border:1px dashed rgba(91,208,153,.24);border-radius:10px;background:rgba(50,186,126,.035)}.mp-route-empty>i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(63,201,139,.09);color:#5dd69d;font-style:normal;font-size:18px}.mp-route-empty b,.mp-route-empty span{display:block}.mp-route-empty b{font-size:10px}.mp-route-empty span{margin-top:3px;color:#78869f;font-size:7px}.mp-primary-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;margin-top:10px}.mp-primary-actions .btn{justify-content:center;height:35px;font-size:8px}.mp-safety-note{display:flex;align-items:flex-start;gap:8px;margin-top:9px;padding:8px 10px;border-radius:9px;background:rgba(85,105,169,.07);color:#7f8da7;font-size:7px;line-height:1.45}.mp-safety-note>i{display:grid;place-items:center;width:18px;height:18px;flex:0 0 18px;border-radius:6px;background:rgba(91,108,174,.13);color:#9aaeff;font-style:normal}.mp-safety-note b{color:#aab6cf}.pin-detail-modal .modal-foot{margin-top:11px}.pin-detail-modal .modal-foot>span{font-size:7px}
.mp-live.sensor>i{background:#49c9e8;box-shadow:0 0 13px rgba(73,201,232,.65)}
.mp-live.sensor b{color:#68d9f1}
.modal-overlay#modal-pin{padding:12px;overflow:hidden}.pin-detail-modal{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.mp-feedback{display:none;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border:1px solid transparent;border-radius:9px;font-size:8px}.mp-feedback:not(:empty){display:flex}.mp-feedback>i{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:6px;font-style:normal;font-weight:800}.mp-feedback.working{border-color:rgba(94,121,255,.25);background:rgba(73,96,222,.08);color:#b9c6ff}.mp-feedback.working>i{background:rgba(92,111,235,.17);animation:pulse-ring 1s infinite}.mp-feedback.success{border-color:rgba(77,212,150,.25);background:rgba(57,191,130,.075);color:#80dfad}.mp-feedback.success>i{background:rgba(67,204,141,.16)}.mp-feedback.error{border-color:rgba(247,104,111,.28);background:rgba(218,64,75,.08);color:#ff9da4}.mp-feedback.error>i{background:rgba(235,76,87,.16)}
.btn.sm.danger { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.42); color: #fca5a5; }
.btn.sm.danger:hover { background: rgba(239,68,68,.26); }
.pm-row { cursor: pointer; }
.pm-row:hover { background: rgba(255,255,255,.04); }
@media (max-width: 760px) {
  .wiz-pin-head { display: none; }
  .wiz-pin-row { grid-template-columns: 1fr 1fr; }
  .wiz-pin-id { grid-column: 1 / -1; }
  .mp-pin-hero{grid-template-columns:88px 1fr}.mp-live{grid-column:1/-1}.mp-route-flow{grid-template-columns:1fr}.mp-route-flow>em{transform:rotate(90deg)}.mp-primary-actions{grid-template-columns:1fr}.pin-detail-modal{padding:14px}
}

/* ======================= Looks =========================================== */
/* One library replacing Scenes, Party, Sequences and Studio. Cards carry the
   look's own accent so a glance at the grid reads as a set of moods rather
   than a list of records. */
.look-card { position: relative; display: flex; flex-direction: column; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; transition: border-color .15s, transform .15s; min-width: 0; }
.look-card:hover { border-color: var(--line-bright); transform: translateY(-1px); }
.look-card .lc-bar { height: 4px; background: var(--look-accent, #5B8CFF); }
.look-card .lc-body { padding: 14px 16px 10px; flex: 1; min-width: 0; }
.look-card .lc-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 6px; }
.look-card .lc-name { font-size: 13.5px; font-weight: 700; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.look-card .lc-mode { flex-shrink: 0; font-size: 10px; }
/* Two lines then ellipsis: a look touching twelve fixtures must not make its
   card three times taller than its neighbours and break the grid rhythm. */
.look-card .lc-summary { font-size: 11.5px; line-height: 1.45; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.look-card .lc-broken { margin-top: 8px; display: inline-block; font-size: 10px; }
.look-card .lc-foot { display: flex; gap: 8px; padding: 10px 16px 14px; }
.look-card .lc-foot .btn { flex: 1; }

/* .chip-row and .chip already exist above — no second definition. */

/* --- editor --- */
.mode-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-opt { padding: 10px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--txt-dim); cursor: pointer;
  font-family: inherit; font-size: 11.5px; text-align: center; }
.mode-opt.active { border-color: var(--accent); background: rgba(91,140,255,.14); color: var(--txt); }

.lk-rows { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto;
  padding-right: 4px; }
.lk-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lk-step-no { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
/* The target select must be allowed to shrink or a long fixture name pushes the
   controls off the right edge of the dialog. */
.lk-target { flex: 1 1 180px; min-width: 0; width: auto; }
.lk-onoff { flex-shrink: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--txt-faint); font-family: inherit; font-size: 11.5px; cursor: pointer; }
.lk-onoff.on { background: rgba(58,196,138,.16); border-color: #3AC48A; color: #7BE3B4; }
.lk-controls { display: flex; align-items: center; gap: 8px; flex: 2 1 200px; min-width: 0; }
.lk-colour { width: 34px; height: 30px; padding: 2px; flex-shrink: 0; }
.lk-level { flex: 1; min-width: 60px; }
.lk-level-val { font-family: var(--mono); font-size: 11px; color: var(--txt-dim);
  flex-shrink: 0; min-width: 40px; }
.lk-hold { width: 74px; flex-shrink: 0; }
.lk-tools { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--txt-dim); cursor: pointer; font-size: 12px;
  display: grid; place-items: center; font-family: inherit; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.danger:hover { border-color: #FF5B7A; color: #FF8FA3; }

/* --- System hub tiles --- */
.sys-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .15s, transform .15s; }
.sys-tile:hover { border-color: var(--line-bright); transform: translateY(-1px); }
.sys-tile i { font-size: 20px; font-style: normal; margin-bottom: 4px; }
.sys-tile b { font-size: 13.5px; color: var(--txt); }
.sys-tile span { font-size: 11.5px; color: var(--txt-faint); }

/* A running look needs to be obvious at a glance — you cannot stop something
   you cannot find. */
.look-card.running { border-color: var(--accent); }
.look-card.running .lc-bar { animation: lc-live 1.6s ease-in-out infinite; }
@keyframes lc-live { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ======================= Look Studio ===================================== */
.st-modal { max-width: 860px; }
.st-stage-wrap { background: #0d1117; border-radius: var(--radius-lg); padding: 14px; }
.st-stage { display: flex; gap: 6px; height: 72px; align-items: flex-end; }
/* No transition on the bars: at 60fps the browser's own interpolation fights
   the engine's and the movement reads as mush rather than a travelling wave.

   The floor is 45% rather than 0 so an unlit fixture still reads as a fixture
   that is off, not as empty space. A chase leaves most of the strip dark at any
   instant, and a stage that empties out looks broken rather than dramatic. */
.st-bar { flex: 1; min-width: 0; border-radius: 5px; background: #111; height: 45%;
  border: 1px solid rgba(255,255,255,.05); }
.st-names { display: flex; gap: 6px; margin-top: 8px; }
.st-name { flex: 1; min-width: 0; font-size: 9.5px; color: var(--txt-faint);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name.imaginary { font-style: italic; opacity: .6; }

.st-out { float: right; font-family: var(--mono); color: var(--txt-dim); font-weight: 400; }
.st-pal-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.st-pal-row select { flex: 1; min-width: 0; }
.st-pal-swatch { width: 64px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-bright); flex-shrink: 0; }

.st-params { display: flex; flex-direction: column; gap: 10px; }
.st-param { display: block; }
.st-param-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt-faint); font-weight: 700; display: block; margin-bottom: 5px; }
.st-param-val { float: right; font-family: var(--mono); text-transform: none;
  letter-spacing: 0; color: var(--txt-dim); font-weight: 400; }

.st-timeline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-step { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: grab; }
.st-step.dragging { opacity: .4; }
.st-step.over { border-color: var(--accent); }
.st-step.selected { border-color: var(--line-bright); }
/* The step currently playing, so you can see where you are in the sequence. */
.st-step.playing { border-color: var(--accent); background: rgba(91,140,255,.12); }
.st-step-sw { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.st-step-n { font-size: 10.5px; color: var(--txt-faint); font-family: var(--mono); }
.st-step-fx { font-size: 11.5px; }
.st-step-ms { width: 62px; font-size: 11px; padding: 4px 6px; }
.st-paused { display: inline-block; margin-bottom: 10px; font-size: 11px; }

/* ===================== Controllers ===================================== */
/* Reuses the app's existing .panel, .btn, .pill and .muted rather than
   inventing a parallel set — a previous pass invented class names that were
   not in this stylesheet at all, and the result was an unstyled modal
   floating over the page. */

.ctl-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ctl-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ctl-found {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border, #23262E);
}
.ctl-found:first-of-type { border-top: 0; }

.ctl-chan-grid { display: grid; gap: 10px; }

.ctl-chan {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 12px;
}

.ctl-chan-name { font-weight: 600; }

.ctl-chan select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border, #30363d);
  background: var(--bg-input, #0E1116);
  color: inherit;
  font: inherit;
}

/* One column at phone width, so the pin dropdown is not squeezed to nothing. */
@media (max-width: 620px) {
  .ctl-chan { grid-template-columns: 1fr; gap: 6px; }
  .ctl-found { flex-direction: column; align-items: flex-start; }
}
/* Room workspace: local music playlist, live spectrum and frame editor. */
.rd-eq{height:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:end;padding:8px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.18)}
.rd-eq i{display:block;height:4%;min-height:3px;border-radius:6px;background:linear-gradient(180deg,#7c6cff,#27d9ff);transition:height 55ms linear}
.rd-targets{display:flex;gap:7px;flex-wrap:wrap}.rd-targets label{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;font-size:11px;background:rgba(255,255,255,.025)}
.rd-playlist{display:grid;gap:6px;max-height:150px;overflow:auto;margin-top:10px}.rd-track{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025)}.rd-track.active{border-color:var(--accent);background:rgba(87,109,255,.12)}.rd-track b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
#rd-audio{height:38px;color-scheme:dark;filter:invert(1) hue-rotate(180deg);opacity:.78}
.rd-seq-frames{display:grid;gap:8px}.rd-seq-frame{display:grid;grid-template-columns:28px 46px minmax(90px,1fr) minmax(88px,.8fr) 88px 58px 30px;gap:7px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}.rd-seq-frame input[type=color]{width:42px;height:34px;padding:2px}.rd-seq-frame input,.rd-seq-frame select{min-width:0}.rd-seq-num{font:600 11px var(--mono);color:var(--muted)}.rd-frame-order{display:flex;gap:3px}.rd-frame-order .ic-btn{width:26px;height:28px}
@media(max-width:760px){.rd-seq-frame{grid-template-columns:24px 42px 1fr 1fr}.rd-seq-frame .rd-duration{grid-column:3}.rd-seq-frame .rd-frame-order{grid-column:4}}
.rd-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 18px;position:sticky;top:0;z-index:4;background:rgba(10,15,27,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.rd-tabs button{border:1px solid transparent;background:transparent;color:var(--muted);padding:8px 10px;border-radius:9px;font-size:11px;white-space:nowrap;cursor:pointer}.rd-tabs button.active{color:#fff;border-color:rgba(104,121,255,.5);background:linear-gradient(135deg,rgba(69,112,255,.22),rgba(167,80,255,.16))}
.rd-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.rd-metric{padding:11px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}.rd-metric span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.rd-metric b{display:block;font-size:17px;margin-top:4px}.rd-metric small{color:var(--muted);font-size:9px}
.rd-insight{padding:13px;border:1px solid rgba(91,132,255,.35);border-radius:13px;background:linear-gradient(135deg,rgba(46,95,255,.12),rgba(162,73,255,.08));line-height:1.5;font-size:11px}.rd-insight b,.rd-insight span{display:block}.rd-insight span{color:var(--muted);margin-top:3px}.rd-preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.rd-preset{position:relative;overflow:hidden;padding:11px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025);cursor:pointer;color:var(--text);font-size:10px;text-align:left;transition:.18s ease}.rd-preset:hover{transform:translateY(-2px);border-color:var(--preset)}.rd-preset:before{content:"";position:absolute;right:-10px;bottom:-18px;width:55px;height:55px;border-radius:50%;background:var(--preset);filter:blur(17px);opacity:.26}.rd-preset i{display:block;color:var(--preset);font-size:18px;font-style:normal;line-height:1}.rd-preset b,.rd-preset span{display:block;position:relative}.rd-preset b{margin-top:6px}.rd-preset span{color:var(--muted);font-size:8px;margin-top:2px}
.rd-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rd-layout-item{display:grid;grid-template-columns:28px 25px 1fr;align-items:center;padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}.rd-layout-item>div b,.rd-layout-item>div small{display:block}.rd-layout-item>div small{color:var(--muted);font-size:9px}.rd-layout-item select{grid-column:1/-1;margin-top:7px;font-size:10px}.rd-layout-item .ic-btn.active{color:#ffd052;border-color:rgba(255,208,82,.45)}
.rd-history{padding:9px;margin-top:10px;border:1px solid var(--border);border-radius:11px;background:rgba(0,0,0,.14)}.rd-history-head{display:flex;justify-content:space-between;font-size:9px;margin-bottom:7px}.rd-history-head span{color:var(--muted)}.rd-history-bars{height:58px;display:flex;align-items:flex-end;gap:3px}.rd-history-bars i{flex:1;min-height:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5f83ff,#9b56ff);opacity:.8}
.rd-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.rd-feature-grid label{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.025);font-size:10px}.rd-feature-grid input{width:auto;margin-top:2px}.rd-feature-grid b,.rd-feature-grid small{display:block}.rd-feature-grid small{color:var(--muted);font-size:8px;margin-top:2px}
.rd-alert{padding:9px 10px;border-radius:10px;font-size:10px}.rd-alert.good{color:#7ce3b2;background:rgba(43,191,123,.1);border:1px solid rgba(43,191,123,.22)}.rd-alert.warn{color:#ffc46d;background:rgba(255,166,55,.1);border:1px solid rgba(255,166,55,.22)}.rd-ok{border-color:rgba(42,213,145,.28);background:rgba(42,213,145,.07)}
.rd-empty{grid-column:1/-1;padding:17px;border:1px dashed var(--border);border-radius:11px;text-align:center}.rd-empty b,.rd-empty span{display:block}.rd-empty span{color:var(--muted);font-size:9px;margin-top:4px}.rd-schedule{display:grid;grid-template-columns:28px 105px 1fr 1fr 30px;gap:7px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}.rd-service-row,.rd-activity-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.02)}.rd-service-row>div,.rd-activity-row>div{min-width:0;flex:1}.rd-service-row b,.rd-service-row small,.rd-activity-row b,.rd-activity-row small{display:block}.rd-service-row small,.rd-activity-row small{color:var(--muted);font-size:9px}.rd-activity-row>i{width:7px;height:7px;border-radius:50%;background:#6e87ff}.rd-activity-row.good>i{background:#35cf8d}.rd-activity-row.bad>i{background:#ff5576}.rd-metric b.ok{color:#54dda0}.rd-metric b.bad{color:#ff637e}
@media(max-width:620px){.rd-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-preset-grid{grid-template-columns:repeat(2,1fr)}.rd-feature-grid,.rd-layout{grid-template-columns:1fr}.rd-tabs{padding-left:12px;padding-right:12px}}
@media(max-width:620px){.rd-schedule{grid-template-columns:28px 1fr 30px}.rd-schedule select{grid-column:2}.rd-schedule .ic-btn{grid-column:3;grid-row:1}}

/* ================= Client-approved room workspace ======================== */
body.room-open{overflow:hidden}
#room-drawer.drawer-overlay{inset:0 0 0 var(--sidebar-w);z-index:45;background:#060b18;backdrop-filter:none;overflow:hidden}
#room-drawer .room-workspace.drawer{position:absolute;inset:0;width:auto;height:100%;padding:0;background:radial-gradient(circle at 35% 0,rgba(45,57,128,.12),transparent 35%),#060b18;border:0;box-shadow:none;overflow-y:auto;animation:roomPageIn .24s ease}
@keyframes roomPageIn{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd-page-head{min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 26px 15px;border-bottom:1px solid rgba(132,151,219,.08);background:rgba(5,10,24,.94)}
.rd-back{border:0;background:none;color:#93a0bd;font-size:11px;cursor:pointer;padding:0 0 7px}.rd-back:first-letter{font-size:19px}.rd-title-row{display:flex;align-items:center;gap:12px}.rd-title-row h2{font-size:25px;line-height:1.15;letter-spacing:-.025em}.rd-title-row>span{color:#8d9ab5}.rd-page-meta{display:flex;align-items:center;gap:10px;color:#9aa7c2;font-size:10px;margin-top:9px}.rd-page-meta i{width:4px;height:4px;border-radius:50%;background:#7f8aa4}.rd-head-actions{display:flex;align-items:center;gap:10px}.rd-head-actions .ic-btn{font-size:20px;width:38px;height:38px}.rd-head-actions .btn{height:38px}
.rd-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;padding:0 12px 18px}.rd-primary{min-width:0}.rd-right-rail{display:grid;align-content:start;gap:11px;padding-top:12px}
.rd-page-grid.rd-page-grid-full{grid-template-columns:minmax(0,1fr)!important}
.rd-hero{height:350px;position:relative;overflow:hidden;border:1px solid rgba(118,142,218,.16);border-radius:14px 14px 0 0;background:#0a1021 url('img/room-executive-lounge.png') center/cover no-repeat;isolation:isolate}.rd-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,7,18,.38),transparent 35%,rgba(3,7,18,.06)),linear-gradient(0deg,rgba(2,6,15,.35),transparent 45%);z-index:-1}
.rd-hero-hotspots{position:absolute;inset:0}.rd-hotspot{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(139,158,231,.32);border-radius:11px;background:rgba(5,11,28,.82);box-shadow:0 8px 24px rgba(0,0,0,.24);backdrop-filter:blur(9px);color:#eef3ff;cursor:pointer;min-width:108px}.rd-hotspot:before{content:'♧';display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px solid currentColor;color:#cdd7ff}.rd-hotspot.on:before{color:#bc62ff;box-shadow:0 0 15px rgba(162,74,255,.55)}.rd-hotspot b,.rd-hotspot span{display:block;font-size:9px;text-align:left}.rd-hotspot span{color:#aab5cf;margin-top:2px}.rd-hotspot:nth-child(1){left:38%;top:13%}.rd-hotspot:nth-child(2){right:18%;top:24%}.rd-hotspot:nth-child(3){left:28%;bottom:14%}.rd-hotspot:nth-child(4){right:8%;bottom:13%}.rd-hotspot:nth-child(5){left:50%;bottom:8%}
.rd-master{position:absolute;left:22px;top:31px;width:200px;padding:17px;background:rgba(5,11,28,.88);border:1px solid rgba(120,142,216,.25);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.38);backdrop-filter:blur(12px);z-index:3}.rd-master>b{font-size:13px}.rd-master-ring{--level:0;display:grid;place-content:center;width:132px;height:132px;border-radius:50%;margin:16px auto 10px;background:radial-gradient(circle at center,#081024 59%,transparent 61%),conic-gradient(from 210deg,#316eff 0deg,#a82cff calc(var(--level)*2.2deg),#ff6f76 calc(var(--level)*3.1deg),#ffb15c calc(var(--level)*3.6deg),rgba(73,87,125,.28) 0)}.rd-master-ring strong,.rd-master-ring span{display:block;text-align:center}.rd-master-ring strong{font-size:26px}.rd-master-ring span{font-size:9px;color:#a7b2ca}.rd-master>input[type=range]{position:absolute;width:132px;left:34px;top:59px;height:132px;opacity:0;cursor:pointer}.rd-master-actions{display:flex;justify-content:space-between}.rd-master-actions button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(121,144,219,.2);background:#101a34;color:#dbe3f7;font-size:20px;cursor:pointer}.rd-master-actions button:nth-child(2){color:#477cff}
.rd-tabs{position:sticky;top:0;padding:0 20px;height:47px;background:#091126;z-index:8;border:1px solid rgba(119,142,219,.12);border-top:0}.rd-tabs button{height:47px;padding:0 15px;border-radius:0;font-size:10px}.rd-tabs button.active{border:0;border-bottom:2px solid #795cff;background:none;color:#fff}
.rd-panel-area{background:#071023;border:1px solid rgba(119,142,219,.12);border-top:0;border-radius:0 0 14px 14px;min-height:288px}.rd-panel-area>[data-room-panel]{padding:14px}.rd-control-grid{display:grid;grid-template-columns:1.05fr 1.25fr .88fr;gap:12px}.rd-panel-area .drawer-sec,.rd-ambience,.rd-rail-card{margin:0;padding:14px;border:1px solid rgba(112,137,218,.14);border-radius:12px;background:rgba(7,15,34,.74)}.rd-control-grid>.drawer-sec{border:0;border-radius:0;background:transparent;padding:0}.rd-control-grid>.drawer-sec+.drawer-sec{border-left:1px solid rgba(112,137,218,.12);padding-left:12px}.drawer-sec-head h3{font-size:12px}
.rd-zone-list{gap:6px!important}.rd-zone-list .rd-dev{display:block;padding:8px;border-radius:8px;background:#0d1831;border-color:rgba(113,138,215,.1)}.rd-zone-list .rd-dev-main{margin-bottom:7px}.rd-zone-list .rd-dev-main .una-ico{width:24px;height:24px}.rd-zone-list .rd-dev-main b{font-size:10px}.rd-zone-list .rd-dev-main .una-type{font-size:8px}.rd-zone-list .rd-dev-ctl{display:grid;grid-template-columns:34px minmax(55px,1fr) minmax(60px,1fr) auto;gap:6px}.rd-zone-list .rd-dev-color{width:32px!important;height:29px!important}.rd-zone-list .rd-dev-fx{height:29px;padding:4px;font-size:8px}.rd-zone-list .rd-dev-level{min-width:55px}.rd-zone-list .rd-dev-ctl .btn{height:29px;padding:0 7px}.rd-zone-list .rd-dev-ctl .danger{display:none}
.rd-mode-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}.rd-mode-choices button{display:flex;align-items:center;gap:7px;min-height:56px;border:1px solid rgba(121,144,218,.16);border-radius:9px;background:#0d1831;color:#eaf0ff;padding:8px;text-align:left;font-size:17px;cursor:pointer}.rd-mode-choices button.active{border-color:#7261ff;background:linear-gradient(140deg,rgba(45,103,255,.14),rgba(141,53,255,.12))}.rd-mode-choices span,.rd-mode-choices small{display:block;font-size:9px}.rd-mode-choices small{color:#8f9bb5;font-size:7px;margin-top:2px}
.rd-color-console{position:relative;border:1px solid rgba(112,137,218,.16);border-radius:10px;background:#09142c;padding:0 11px 11px;margin-bottom:9px}.rd-color-tabs{height:34px;display:flex;align-items:center;justify-content-around;border-bottom:1px solid rgba(112,137,218,.14);font-size:9px}.rd-color-console>input[type=color]{position:absolute;left:11px;right:11px;top:42px;width:calc(100% - 22px)!important;height:52px!important;opacity:0;cursor:crosshair;z-index:2}.rd-colour-spectrum{height:52px;margin-top:9px;border-radius:7px;background:linear-gradient(90deg,#ff3232,#ffb029,#ffe628,#27dd75,#28d9e5,#2386ff,#772bff,#f729ba)}.rd-colour-swatches{display:flex;gap:10px;margin-top:10px}.rd-colour-swatches button{width:18px;height:18px;border:0;border-radius:6px;background:var(--swatch);cursor:pointer}.rd-colour-swatches button:nth-child(1){background:#ff2e3e}.rd-colour-swatches button:nth-child(2){background:#ff8a2a}.rd-colour-swatches button:nth-child(3){background:#ffd51e}.rd-colour-swatches button:nth-child(4){background:#35d26f}.rd-colour-swatches button:nth-child(5){background:#68dff2}.rd-colour-swatches button:nth-child(6){background:#1485ff}.rd-colour-swatches button:nth-child(7){background:#8e29ef}.rd-colour-swatches button:nth-child(8){background:#f32dc9}.rd-effect-controls{display:grid;grid-template-columns:1fr 1.3fr;gap:8px}.rd-effect-controls select{height:34px}.rd-mode-panel>#rd-fx-apply{width:100%;margin-top:8px}
.rd-sequence-list{gap:6px!important}.rd-sequence-list .rd-scene{padding:8px}.rd-seq-frames{max-height:120px;overflow:auto;margin-top:8px}.rd-effects-panel .rd-seq-frame{grid-template-columns:20px 30px 1fr}.rd-effects-panel .rd-seq-frame>*:nth-child(n+4){display:none}.rd-effects-panel>#rd-seq-name{height:34px}.rd-wide-panel{max-width:920px}.rd-wide-panel>.grid{gap:10px;margin-top:12px}.rd-music-actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.rd-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.rd-overview-grid>.rd-wide-panel{grid-column:1/-1}
.rd-ambience{margin:14px 0 0!important}.rd-ambience .drawer-sec-head>.row{gap:6px}.rd-ambience #rd-scene-name{width:150px;height:32px}.rd-ambience .rd-preset-grid{grid-template-columns:repeat(8,minmax(90px,1fr));overflow-x:auto;padding-bottom:4px}.rd-ambience .rd-preset{min-height:84px}.rd-scene-strip{display:flex;gap:8px;overflow-x:auto;margin-top:9px}.rd-scene-strip .rd-scene{min-width:180px}
.rd-rail-card{padding:14px!important}.rd-right-rail .drawer-sec-head{margin-bottom:10px}.rd-right-rail .rd-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-right-rail .rd-metric{border:0;background:transparent;padding:7px}.rd-right-rail .rd-metric b{font-size:14px}.rd-right-rail .rd-metric span{font-size:8px}.rd-right-rail .rd-metric small{font-size:8px}.rd-right-rail .rd-empty{padding:10px}.rd-right-rail .rd-schedule{grid-template-columns:24px 76px 1fr 26px}.rd-right-rail .rd-schedule [data-f=preset]{display:none}.rd-right-rail .link-toggle{font-size:9px;margin:5px 0}.rd-right-rail #rd-schedules{margin-top:8px!important}.rd-rail-sensor{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;background:#0d1831;margin-top:6px}.rd-rail-sensor>span:first-child{font-size:16px}.rd-rail-sensor div{flex:1}.rd-rail-sensor b,.rd-rail-sensor small{display:block;font-size:9px}.rd-rail-sensor small{color:#8d99b2;margin-top:2px}.rd-rail-sensor>i{font-style:normal;color:#44d491}.rd-safety-state{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(37,208,135,.3);border-radius:10px;background:rgba(20,176,114,.08)}.rd-safety-state>strong{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:rgba(38,201,132,.16);color:#54e2a0;font-size:22px}.rd-safety-state b,.rd-safety-state span{display:block}.rd-safety-state b{font-size:16px}.rd-safety-state span{font-size:9px;color:#94a2bc;margin-top:3px}.rd-safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.rd-safety-grid>div{display:flex;gap:7px;padding:9px;border:1px solid rgba(112,137,218,.13);border-radius:8px}.rd-safety-grid span,.rd-safety-grid small{display:block;font-size:8px}.rd-safety-grid small{color:#8e9ab3;margin-top:2px}
@media(max-width:1400px){.rd-page-grid{grid-template-columns:minmax(0,1fr) 270px}.rd-control-grid{grid-template-columns:1fr 1.2fr}.rd-effects-panel{grid-column:1/-1;border-left:0!important;padding-left:0!important;border-top:1px solid rgba(112,137,218,.12)!important;padding-top:12px!important}.rd-sequence-list{display:grid;grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){#room-drawer.drawer-overlay{left:0;z-index:210}.rd-page-grid{grid-template-columns:1fr}.rd-right-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-hero{height:310px}.rd-head-actions .btn.ghost{display:none}}
@media(max-width:720px){.rd-page-head{padding:14px}.rd-title-row h2{font-size:20px}.rd-head-actions .ic-btn{display:none}.rd-head-actions .btn{font-size:0}.rd-head-actions .btn:after{content:'＋';font-size:17px}.rd-page-grid{padding:0 7px 12px}.rd-hero{height:270px}.rd-master{left:12px;top:16px;transform:scale(.82);transform-origin:top left}.rd-hotspot{transform:scale(.82)}.rd-control-grid,.rd-overview-grid{grid-template-columns:1fr}.rd-control-grid>.drawer-sec+.drawer-sec{border-left:0;padding-left:0;border-top:1px solid rgba(112,137,218,.12);padding-top:12px}.rd-right-rail{grid-template-columns:1fr}.rd-ambience .rd-preset-grid{grid-template-columns:repeat(8,110px)}.rd-tabs{overflow-x:auto;padding:0 8px}.rd-tabs button{padding:0 11px}}

/* Room music player: the same analysed spectrum drives this preview and RGB. */
.rd-player{--music-color:#3478ff;--music-color-2:#ff2f85;--beat:.04;position:relative;overflow:hidden;border:1px solid rgba(109,133,224,.22);border-radius:16px;background:radial-gradient(circle at 18% 24%,color-mix(in srgb,var(--music-color) 26%,transparent),transparent 34%),linear-gradient(145deg,#0a1531,#071023 68%);padding:18px;margin-bottom:14px;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.rd-player:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 38%,color-mix(in srgb,var(--music-color-2) calc(var(--beat)*32%),transparent),transparent 36%);pointer-events:none}.rd-player.playing{box-shadow:0 18px 55px color-mix(in srgb,var(--music-color) 18%,transparent)}
.rd-player-visual{position:relative;display:flex;align-items:center;gap:18px;min-height:104px}.rd-beat-orb{position:relative;z-index:2;display:grid;place-items:center;width:82px;height:82px;flex:0 0 82px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 2%,var(--music-color) 20%,color-mix(in srgb,var(--music-color) 35%,#080d20) 70%);box-shadow:0 0 calc(16px + var(--beat)*34px) color-mix(in srgb,var(--music-color) 70%,transparent);transform:scale(calc(.94 + var(--beat)*.14));transition:transform 45ms linear}.rd-beat-orb span{font-size:28px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.rd-beat-rings{position:absolute;left:41px;top:52px}.rd-beat-rings i{position:absolute;inset:0;width:82px;height:82px;margin:-41px;border-radius:50%;border:1px solid color-mix(in srgb,var(--music-color) 60%,transparent);opacity:calc(var(--beat)*.7);transform:scale(calc(1 + var(--beat)*.45))}.rd-beat-rings i:nth-child(2){transform:scale(calc(1.15 + var(--beat)*.65));opacity:calc(var(--beat)*.42)}.rd-beat-rings i:nth-child(3){transform:scale(calc(1.32 + var(--beat)*.8));opacity:calc(var(--beat)*.25)}
.rd-player-copy{position:relative;z-index:2;min-width:0}.rd-player-copy span,.rd-player-copy b,.rd-player-copy small{display:block}.rd-player-copy span{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#8999bc}.rd-player-copy b{font-size:18px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-player-copy small{font-size:9px;color:#9ba9c8;margin-top:5px}
.rd-player-copy em{display:block;margin-top:8px;color:color-mix(in srgb,var(--music-color) 72%,#fff);font-size:11px;font-style:normal;font-weight:700;letter-spacing:.02em}
.rd-music-sequence-preview{position:relative;z-index:2;display:grid;grid-template-columns:minmax(180px,.36fr) minmax(0,1fr);align-items:center;gap:14px;margin:8px 0 10px;padding:11px 12px;border:1px solid rgba(116,142,220,.18);border-radius:12px;background:rgba(5,13,30,.58)}
.rd-music-sequence-head span,.rd-music-sequence-head b,.rd-music-sequence-head small{display:block}.rd-music-sequence-head span{color:#7788aa;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.rd-music-sequence-head b{margin-top:3px;font-size:13px}.rd-music-sequence-head small{margin-top:3px;color:#8291ad;font-size:9px}.rd-music-sequence-steps{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;padding:4px}.rd-music-sequence-steps article{position:relative;display:flex;align-items:center;gap:6px;min-width:78px;padding:7px;border:1px solid rgba(124,145,207,.14);border-radius:10px;background:#0b152a;opacity:.55;transition:.16s ease}.rd-music-sequence-steps article:after{content:"";position:absolute;left:100%;top:50%;width:8px;height:1px;background:rgba(128,147,204,.28)}.rd-music-sequence-steps article:last-child:after{display:none}.rd-music-sequence-steps article.active{opacity:1;border-color:color-mix(in srgb,var(--step-color) 65%,#6e7eff);box-shadow:0 0 0 2px color-mix(in srgb,var(--step-color) 18%,transparent),0 7px 18px color-mix(in srgb,var(--step-color) 15%,transparent);transform:translateY(-1px)}.rd-music-sequence-steps article>i{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--step-color);box-shadow:0 0 14px color-mix(in srgb,var(--step-color) 55%,transparent)}.rd-music-sequence-steps span b,.rd-music-sequence-steps span small{display:block}.rd-music-sequence-steps span b{font-size:10px}.rd-music-sequence-steps span small{margin-top:2px;color:#91a0bc;font-size:8px;text-transform:capitalize}.rd-music-sequence-empty b,.rd-music-sequence-empty span{display:block}.rd-music-sequence-empty span{margin-top:3px;color:#8291ad;font-size:10px}
.rd-player.playing[data-effect="breathe"] .rd-beat-orb{animation:musicEffectBreathe 2.4s ease-in-out infinite}.rd-player.playing[data-effect="pulse"] .rd-beat-orb{animation:musicEffectPulse .55s ease-out infinite}.rd-player.playing[data-effect="strobe"] .rd-player-visual{animation:musicEffectStrobe .18s steps(2) infinite}.rd-player.playing[data-effect="twinkle"] .rd-waveform i:nth-child(3n){animation:musicEffectTwinkle .7s steps(2) infinite}.rd-player.playing[data-effect="chase"] .rd-waveform i{animation:musicEffectChase .8s ease-in-out infinite;animation-delay:calc(var(--bar,1)*-.06s)}.rd-player.playing[data-effect="rainbow"]{animation:musicEffectRainbow 3s linear infinite}
@keyframes musicEffectBreathe{50%{transform:scale(calc(.8 + var(--beat)*.12));filter:brightness(.72)}}@keyframes musicEffectPulse{20%{transform:scale(calc(1 + var(--beat)*.2))}70%{transform:scale(.9)}}@keyframes musicEffectStrobe{50%{filter:brightness(calc(.35 + var(--beat)*1.4))}}@keyframes musicEffectTwinkle{50%{opacity:.16;transform:scaleY(.28)}}@keyframes musicEffectChase{50%{transform:translateY(-8px);opacity:.35}}@keyframes musicEffectRainbow{to{filter:hue-rotate(360deg)}}
.rd-waveform{position:relative;z-index:2;height:90px;display:flex;align-items:center;justify-content:center;gap:3px;padding:10px 0}.rd-waveform i{width:4px;min-height:4px;height:8%;border-radius:4px;background:linear-gradient(180deg,var(--music-color-2),var(--music-color));box-shadow:0 0 8px color-mix(in srgb,var(--music-color) 45%,transparent);transition:height 55ms linear;opacity:.85}
.rd-player-progress{position:relative;z-index:2;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;font:9px var(--mono);color:#91a0bf}.rd-player-progress input{width:100%}.rd-transport-controls{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:10px;margin:12px 0}.rd-transport-controls button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(125,147,223,.25);background:#111d39;color:#dae4ff;cursor:pointer}.rd-transport-controls button.primary{width:48px;height:48px;background:linear-gradient(145deg,#477dff,#9e43ff);border:0;box-shadow:0 8px 22px rgba(82,90,255,.35)}
.rd-band-meters{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.rd-band-meters label{display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:6px;font-size:8px;color:#9aa9c8}.rd-band-meters i{height:5px;border-radius:6px;background:#121d37;overflow:hidden}.rd-band-meters b{display:block;width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--music-color),var(--music-color-2));transition:width 55ms linear}.rd-band-meters span{text-align:right;font:8px var(--mono)}
.rd-music-config{gap:10px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.rd-music-config input[type=color]{height:40px;width:100%}.rd-music-config label{min-width:0;transition:opacity .18s ease}.rd-music-config select{width:100%;min-width:0}.rd-music-config label.inactive{opacity:.38}.rd-music-config label.inactive input,.rd-music-config label.inactive select{cursor:not-allowed}.rd-music-actions{align-items:center}.rd-targets label{border:1px solid rgba(105,130,215,.18);border-radius:9px;background:#0c1730;padding:8px 10px}.rd-player.offline .rd-player-copy small{color:#ffb766}
@media(max-width:720px){.rd-player{padding:12px}.rd-player-visual{min-height:86px}.rd-beat-orb{width:66px;height:66px;flex-basis:66px}.rd-beat-rings{left:33px;top:43px}.rd-beat-rings i{width:66px;height:66px;margin:-33px}.rd-waveform{height:68px;gap:2px}.rd-waveform i{width:3px}.rd-band-meters{grid-template-columns:1fr 1fr}.rd-music-config{grid-template-columns:1fr!important}}
@media(max-width:720px){.rd-music-sequence-preview{grid-template-columns:1fr}.rd-music-sequence-steps article{min-width:72px}}

/* Music routing is light-first: selection and each fixture's authored sequence
   are visible before playback. The room may scroll so controls never crop. */
#room-drawer #rd-music-sec:not([hidden]){display:block;max-width:none;height:auto;overflow:visible}
#room-drawer #rd-music-sec>*{margin-top:12px}
#room-drawer #rd-music-sec>.drawer-sec-head{margin-top:0}
.rd-music-routing{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:14px;padding:14px;border:1px solid rgba(105,130,215,.2);border-radius:16px;background:linear-gradient(145deg,rgba(17,30,58,.88),rgba(7,15,33,.92));box-shadow:0 14px 34px rgba(0,0,0,.16)}
.rd-music-routing>.rd-music-step-head{grid-column:1;grid-row:1;margin-bottom:0}.rd-music-routing>.rd-music-light-list{grid-column:1;grid-row:2}.rd-music-routing>.rd-music-route-mode{grid-column:2;grid-row:1/span 2}
.rd-music-step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.rd-music-step-head>span{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:9px;background:linear-gradient(135deg,#4c7dff,#8c4fff);color:white;font-weight:800;box-shadow:0 7px 18px rgba(84,91,255,.28)}.rd-music-step-head b,.rd-music-step-head small{display:block}.rd-music-step-head b{font-size:14px}.rd-music-step-head small{margin-top:2px;color:#8fa1c3;font-size:11px;line-height:1.35}
.rd-music-light-list{display:grid;gap:8px}.rd-music-light{display:grid;grid-template-columns:minmax(180px,1fr) minmax(190px,.8fr);align-items:center;gap:10px;padding:10px;border:1px solid rgba(116,140,209,.16);border-radius:12px;background:#0a152c;opacity:.66;transition:.18s ease}.rd-music-light.selected{opacity:1;border-color:rgba(101,105,255,.56);box-shadow:inset 3px 0 #735cff,0 8px 20px rgba(0,0,0,.12)}.rd-music-light>label:first-child{display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer}.rd-music-light>label:first-child span b,.rd-music-light>label:first-child span small{display:block}.rd-music-light>label:first-child span small{margin-top:2px;color:#7f91b2;font-size:10px}.rd-music-light-icon{display:grid!important;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:rgba(88,104,255,.14);color:#88a7ff}.rd-light-sequence span{display:block;margin-bottom:4px;color:#8192b2;font-size:9px;text-transform:uppercase;letter-spacing:.06em}.rd-light-sequence select{width:100%;min-width:0;height:34px}
.rd-music-route-mode{min-width:0;padding-left:14px;border-left:1px solid rgba(117,139,202,.15)}.rd-route-options{display:grid;gap:8px}.rd-route-options>label{display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid rgba(114,136,204,.16);border-radius:11px;background:#0a152c;cursor:pointer}.rd-route-options input{margin-top:3px}.rd-route-options span b,.rd-route-options span small{display:block}.rd-route-options span b{font-size:12px}.rd-route-options span small{margin-top:3px;color:#8192b2;font-size:10px;line-height:1.35}.rd-route-options label:has(input:checked){border-color:#6f65ff;background:rgba(83,79,211,.13);box-shadow:0 0 0 2px rgba(102,88,255,.1)}#rd-music-override-field{display:none;margin-top:10px}#rd-music-override-field.visible{display:block}#rd-music-override-field select{width:100%;margin-top:5px}
.rd-music-sequence-preview.multi-route{display:block}.rd-music-route-lane{display:grid;grid-template-columns:minmax(180px,.34fr) minmax(0,1fr);align-items:center;gap:12px;padding:7px 0}.rd-music-route-lane+.rd-music-route-lane{border-top:1px solid rgba(117,139,202,.13)}
.rd-music-empty{padding:16px;border:1px dashed rgba(116,140,209,.26);border-radius:12px;text-align:center}.rd-music-empty b,.rd-music-empty span{display:block}.rd-music-empty span{margin-top:4px;color:#8192b2;font-size:11px}
@media(max-width:900px){.rd-music-routing{grid-template-columns:1fr}.rd-music-routing>.rd-music-step-head,.rd-music-routing>.rd-music-light-list,.rd-music-routing>.rd-music-route-mode{grid-column:1;grid-row:auto}.rd-music-route-mode{padding-left:0;padding-top:12px;border-left:0;border-top:1px solid rgba(117,139,202,.15)}.rd-music-light{grid-template-columns:1fr}.rd-music-route-lane{grid-template-columns:1fr}}

/* Tab panels carry the native hidden attribute. This must override the grid
   display declarations above or every room feature appears at once. */
#room-drawer [hidden]{display:none!important}

/* ================= Commercial visual pass (build 82+) ====================
   Visual layers only: navigation, control IDs and controller behavior remain
   untouched. Uploaded room/banner images still win through inline styles. */
#page-dashboard .hero{position:relative;isolation:isolate;min-height:224px;display:flex;flex-direction:column;justify-content:center;padding:30px 34px;border:1px solid rgba(119,142,219,.16);border-radius:20px;overflow:hidden;background-image:linear-gradient(90deg,rgba(4,8,18,.94) 0%,rgba(5,9,20,.76) 38%,rgba(5,9,20,.12) 76%),url('img/aura-dashboard-ambient-v1.png');background-size:cover;background-position:center 58%;box-shadow:0 22px 60px rgba(0,0,0,.28);margin-bottom:18px}
#page-dashboard .hero:after{content:"";position:absolute;inset:auto -5% -55% 35%;height:80%;z-index:-1;background:radial-gradient(ellipse,rgba(73,96,255,.22),transparent 68%);pointer-events:none}
#page-dashboard .hero h1{font-size:clamp(34px,4vw,52px);max-width:560px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
#page-dashboard .hero p{color:#bdc8df;font-size:14px}.stat-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);border-color:rgba(119,142,219,.28);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.room-tile .rt-bg{background-size:cover!important;background-position:center!important;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease}.room-tile:hover .rt-bg{transform:scale(1.045);filter:saturate(1.08) brightness(1.06)}.room-tile{cursor:pointer}.room-tile .rc-type{position:absolute;top:13px;right:13px;z-index:3;padding:5px 9px;border-radius:999px;background:rgba(4,8,18,.58);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);font-size:9px;color:#d9e3f8}
.party-hero{min-height:258px;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;background-image:linear-gradient(90deg,rgba(6,7,18,.93),rgba(8,8,22,.42) 56%,rgba(8,8,22,.18)),url('img/aura-party-ambient-v1.png');background-size:cover;background-position:center 46%;box-shadow:0 22px 55px rgba(0,0,0,.28)}
.party-hero h1{font-size:40px;position:relative;z-index:1}.party-hero p,.party-hero>.row{position:relative;z-index:1;max-width:650px}.party-hero .hero-img-btn{z-index:3}
.pool-visual-hero{position:relative;isolation:isolate;min-height:245px;margin-bottom:18px;padding:28px 30px;border-radius:20px;border:1px solid rgba(87,170,255,.22);overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;background-image:linear-gradient(90deg,rgba(3,10,24,.9),rgba(4,16,34,.35) 65%,rgba(4,16,34,.16)),url('img/aura-pool-night-v1.png');background-size:cover;background-position:center 56%;box-shadow:0 22px 58px rgba(0,0,0,.3)}
.pool-visual-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 44%,rgba(2,9,22,.7));pointer-events:none}.pool-visual-hero h2{font-size:28px;margin:7px 0}.pool-visual-hero p{font-size:12px;color:#b8c7e4}.pool-hero-state{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(3,10,24,.68);border:1px solid rgba(108,190,255,.24);backdrop-filter:blur(9px);font-size:10px;color:#c7dcf6;white-space:nowrap}.pool-hero-state i{width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 12px #22d3ee}
.security-hero-panel{position:relative;isolation:isolate;overflow:hidden;min-height:330px}.security-hero-panel:before{content:"";position:absolute;z-index:-2;inset:0;background-image:url('img/aura-security-gate-v1.png');background-size:cover;background-position:center;opacity:.3;filter:saturate(.85) contrast(1.08)}.security-hero-panel:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(5,9,18,.96),rgba(5,9,18,.62) 48%,rgba(5,9,18,.86)),linear-gradient(180deg,rgba(5,9,18,.15),rgba(5,9,18,.8));pointer-events:none}.security-hero-panel .gate-panel,.security-hero-panel .panel-head{position:relative;z-index:1}.security-hero-panel .gate-stage{background:rgba(4,8,16,.72);box-shadow:0 16px 42px rgba(0,0,0,.3)}
#page-security .cam-tile.empty{place-items:end start;padding:14px;background-image:linear-gradient(180deg,rgba(5,9,18,.3),rgba(5,9,18,.92)),url('img/aura-security-gate-v1.png');background-size:cover;background-position:center;border-style:solid;color:#cbd7ef}#page-security .cam-tile.empty:nth-child(2n){background-position:35% center}#page-security .cam-tile.empty:before{content:"●  Awaiting camera";font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#90a4c8}
@media(max-width:720px){#page-dashboard .hero{min-height:190px;padding:24px;background-position:62% center}#page-dashboard .hero h1{font-size:34px}.party-hero{min-height:230px;padding:24px}.party-hero h1{font-size:32px}.pool-visual-hero{min-height:220px;padding:22px;align-items:flex-start;flex-direction:column;justify-content:flex-end}.pool-hero-state{align-self:flex-start}.security-hero-panel{min-height:0}}

/* Let the approved photographic gate treatment read clearly while preserving
   the existing interactive SVG gate animation above it. */
.security-hero-panel .gate-stage{
  background-image:linear-gradient(180deg,rgba(4,8,16,.25),rgba(4,8,16,.68)),url('img/aura-security-gate-v1.png');
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 42px rgba(0,0,0,.3)
}
.security-hero-panel .gate-art{opacity:.34;mix-blend-mode:screen}

/* ================= Rooms visual direction (build 88) =====================
   The navigation and room controls stay unchanged; this pass gives the room
   overview the architectural-photography hierarchy approved for the product. */
.rooms-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:3px 2px 20px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.rooms-overview-head h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;margin-bottom:6px}.rooms-overview-head p{font-size:12.5px;color:var(--txt-dim);max-width:630px;line-height:1.55}
.rooms-overview-key{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025)}
.rooms-overview-key span{display:flex;align-items:center;gap:6px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-faint)}.rooms-overview-key i,.rc-status i{width:7px;height:7px;border-radius:50%;background:#6b7280}.rooms-overview-key i.active,.rc-status.active i{background:#32d98b;box-shadow:0 0 10px rgba(50,217,139,.75)}.rooms-overview-key i.offline,.rc-status.offline i{background:#ff5964;box-shadow:0 0 9px rgba(255,89,100,.55)}
#page-rooms>.panel:first-child{padding:24px;background:linear-gradient(155deg,rgba(19,32,61,.52),rgba(7,11,20,.9) 40%),var(--panel)}
#page-rooms .rooms-toolbar{padding:11px 12px;margin-bottom:12px;border:1px solid rgba(112,137,218,.12);border-radius:13px;background:rgba(5,10,23,.52)}
#page-rooms .room-summary{gap:8px;margin:12px 0 20px}.room-summary .rs-item{padding:8px 11px;border:1px solid rgba(112,137,218,.12);border-radius:9px;background:rgba(8,15,31,.72)}
#page-rooms .room-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
#page-rooms .room-card{height:232px;border-color:rgba(135,155,219,.18);box-shadow:0 16px 38px rgba(0,0,0,.34)}
#page-rooms .room-card:after{content:"Open room  →";position:absolute;right:15px;bottom:16px;z-index:4;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(223,231,252,.68);opacity:0;transform:translateX(-5px);transition:.2s ease}
#page-rooms .room-card:hover:after{opacity:1;transform:none}
#page-rooms .room-card .rt-scrim{background:linear-gradient(180deg,rgba(4,8,18,.08) 0%,rgba(4,8,18,.12) 37%,rgba(4,8,18,.92) 76%,rgba(4,8,18,.98) 100%)}
#page-rooms .room-card .rt-toggle{top:14px;left:14px;width:34px;height:34px;border:1px solid rgba(255,255,255,.17);background:rgba(3,8,18,.66);box-shadow:0 8px 18px rgba(0,0,0,.24)}
#page-rooms .room-card .rt-toggle.on{background:rgba(241,246,255,.94);color:#07101f}
.rc-status{position:absolute;z-index:4;top:14px;right:14px;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(3,8,18,.7);backdrop-filter:blur(9px);font-size:9px;color:#cbd6eb}.rc-status.active{color:#82efbd;border-color:rgba(50,217,139,.28)}.rc-status.offline{color:#ffabb1;border-color:rgba(255,89,100,.26)}
#page-rooms .room-card .rt-body{left:15px;right:15px;bottom:14px}.room-card .rt-name{font-size:17px;letter-spacing:-.015em;margin-bottom:3px}.rc-location{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#aebbd3}.rc-location i{width:3px;height:3px;border-radius:50%;background:#72809c}.rc-metrics{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 10px}.rc-metrics span{padding:4px 7px;border-radius:6px;background:rgba(255,255,255,.075);font-size:8.5px;color:#aeb9ce}.rc-metrics b{color:#eef3ff;font-weight:700}
#page-rooms .room-card .rt-slider{height:4px;background:rgba(255,255,255,.18)}#page-rooms .room-card .rt-slider::-webkit-slider-thumb{width:12px;height:12px;box-shadow:0 0 0 3px rgba(86,103,255,.18),0 2px 8px rgba(0,0,0,.45)}
#page-rooms .room-card[data-room-id="r1"] .rt-bg{background-position:center 54%!important}#page-rooms .room-card[data-room-id="r2"] .rt-bg{background-position:center 50%!important}#page-rooms .room-card[data-room-id="r3"] .rt-bg{background-position:center 48%!important}#page-rooms .room-card[data-room-id="r4"] .rt-bg{background-position:center 52%!important}
#page-rooms .room-grid.list-view .room-card{height:88px}.room-grid.list-view .room-card .rc-location{display:none}.room-grid.list-view .room-card .rc-metrics{margin:0 12px}.room-grid.list-view .room-card:after{display:none}
@media(max-width:760px){.rooms-overview-head{align-items:flex-start;flex-direction:column}.rooms-overview-key{border-radius:12px}.rooms-tools,.room-search{width:100%}.room-search{min-width:0}#page-rooms .room-grid{grid-template-columns:1fr}#page-rooms .room-card{height:225px}}

/* ================= Visual room catalogue (build 89) ===================== */
.modal.wide.room-editor-modal{max-width:1120px;max-height:92vh;overflow:auto}
.room-editor-modal .modal-head{position:sticky;top:-22px;z-index:5;margin:-22px -22px 20px;padding:22px;background:linear-gradient(180deg,#101725 82%,rgba(16,23,37,.88));border-bottom:1px solid rgba(125,145,185,.12)}
.room-editor-modal .modal-head h2{margin-top:4px}.room-editor-grid{grid-template-columns:minmax(0,1.28fr) minmax(310px,.72fr)!important;align-items:start}
.room-category-head,.room-photo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:2px 0 9px}.room-category-head p,.room-photo-head p{margin:3px 0 0;color:var(--txt-faint);font-size:11px}.room-category-head>span{color:#9eb7ff;font-size:10px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.room-type-catalogue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:365px;overflow:auto;padding:2px 4px 2px 2px;scrollbar-width:thin}
.room-type-choice{position:relative;min-width:0;padding:0;overflow:hidden;border:1px solid rgba(126,146,187,.18);border-radius:12px;background:#0b1220;color:var(--txt);cursor:pointer;text-align:left;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.room-type-choice:hover{transform:translateY(-2px);border-color:rgba(109,134,255,.58)}.room-type-choice.active{border-color:#755bff;box-shadow:0 0 0 2px rgba(93,79,255,.22),0 8px 24px rgba(28,21,91,.3)}
.room-type-thumb{display:block;height:66px;background-image:linear-gradient(180deg,transparent 38%,rgba(4,8,16,.72)),var(--room-thumb);background-size:cover;background-position:center}.room-type-label{display:block;padding:8px 9px 9px}.room-type-label b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-type-label small{display:block;margin-top:3px;color:var(--txt-faint);font-size:8.5px}.room-type-choice>i{position:absolute;right:7px;top:7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#6b55ff;color:#fff;font-size:10px;font-style:normal;opacity:0;transform:scale(.75);transition:.16s}.room-type-choice.active>i{opacity:1;transform:scale(1)}
.room-photo-head{margin-top:17px;align-items:center}.room-cover-picker{height:150px!important;position:relative;overflow:hidden;border-color:rgba(111,135,184,.3)!important;background-size:cover!important;background-position:center!important}.room-cover-picker:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,16,.05),rgba(3,7,16,.72));pointer-events:none}.room-cover-picker .img-hint{position:relative;z-index:1;max-width:88%;padding:7px 11px!important;border:1px solid rgba(255,255,255,.12);background:rgba(4,8,17,.72)!important;border-radius:8px!important;color:#eef3ff;backdrop-filter:blur(7px)}.room-cover-picker .img-del{z-index:2;width:auto;min-width:78px;height:28px;padding:0 9px;border-radius:8px;color:#fff;background:rgba(7,12,24,.86);border-color:rgba(255,255,255,.24)}.room-cover-picker .img-del:hover{background:rgba(94,76,235,.9)}.room-cover-picker.has-image{border-style:solid}.room-editor-modal .mre-devs{max-height:610px}
@media(max-width:900px){.room-editor-grid{grid-template-columns:1fr!important}.room-type-catalogue{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}.room-editor-modal .mre-devs{max-height:320px}}@media(max-width:560px){.room-type-catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}.room-type-thumb{height:74px}}

/* ================= Room category templates (build 90) =================== */
.room-template-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px}.room-template-head p{margin:3px 0 0;color:var(--txt-faint);font-size:10px;line-height:1.45}.room-template-head .btn{white-space:nowrap}
.mre-features{max-height:315px;overflow:auto;padding-right:4px;scrollbar-width:thin}.mre-feature-group{margin-bottom:11px}.mre-feature-group h4{margin:0 0 6px;color:#8796b6;font-size:8px;text-transform:uppercase;letter-spacing:.12em}.mre-feature-group>label{margin-bottom:5px}
.mre-feature{position:relative;display:grid;grid-template-columns:16px 26px minmax(0,1fr) auto 24px;align-items:center;gap:7px;padding:8px 9px;border:1px solid rgba(112,137,218,.12);border-radius:9px;background:rgba(9,17,36,.72);cursor:pointer}.mre-feature:has(input:checked){border-color:rgba(95,111,255,.34);background:linear-gradient(100deg,rgba(66,86,230,.12),rgba(9,17,36,.78))}.mre-feature>input{width:14px;height:14px;margin:0}.mre-feature>span{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;background:#121f40;color:#aebfff;font-size:10px}.mre-feature>b{font-size:10px}.mre-feature>small{font-size:8px;color:#73819e}.mre-feature>button{width:22px;height:22px;padding:0;border:0;border-radius:6px;background:rgba(239,68,68,.1);color:#f59aa2;cursor:pointer}.mre-feature:not(.custom)>button{display:none}.room-editor-modal .mre-devs{max-height:270px}
.rd-planned-setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.rd-plan-group{padding:10px;border:1px solid rgba(112,137,218,.12);border-radius:10px;background:#0b1630}.rd-plan-group h4{margin:0 0 7px;color:#8999bb;font-size:8px;text-transform:uppercase;letter-spacing:.11em}.rd-plan-group>div{display:flex;flex-direction:column;gap:5px}.rd-plan-group article{display:grid;grid-template-columns:24px 1fr;column-gap:7px;align-items:center;padding:6px;border-radius:7px;background:rgba(255,255,255,.025)}.rd-plan-group article>span{grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#142246;color:#b7c5ff;font-size:9px}.rd-plan-group article>b{font-size:9px}.rd-plan-group article>small{font-size:7px;color:#7584a2}.rd-wide-panel#rd-category-setup{grid-column:1/-1}
.pool-room-context{margin-bottom:18px}.pool-room-empty,.pool-linked-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid rgba(83,163,255,.18);border-radius:15px;background:linear-gradient(120deg,rgba(12,32,64,.74),rgba(6,15,31,.88))}.pool-room-empty h3,.pool-linked-head h3{margin:4px 0;font-size:17px}.pool-room-empty p,.pool-linked-head p{margin:0;color:#91a3c2;font-size:10px;max-width:690px;line-height:1.5}.pool-linked-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-top:10px}.pool-linked-card{overflow:hidden;display:grid;grid-template-columns:150px 1fr;min-height:178px;border:1px solid rgba(80,164,255,.18);border-radius:14px;background:#09152b}.pool-linked-cover{position:relative;background-image:linear-gradient(180deg,transparent,rgba(3,9,20,.72)),var(--pool-cover);background-size:cover;background-position:center}.pool-linked-cover span{position:absolute;left:10px;bottom:10px;padding:5px 7px;border-radius:6px;background:rgba(3,9,20,.72);font-size:8px;color:#d8e6ff}.pool-linked-body{padding:13px}.pool-linked-body>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.pool-linked-body h4{margin:0;font-size:14px}.pool-linked-body>p{margin:7px 0;color:#8192b2;font-size:8.5px}.pool-linked-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.pool-linked-tags span{padding:4px 6px;border-radius:6px;background:#102142;color:#a9bde1;font-size:7.5px}
@media(max-width:720px){.room-template-head,.pool-room-empty,.pool-linked-head{align-items:flex-start;flex-direction:column}.mre-feature{grid-template-columns:16px 26px minmax(0,1fr) 24px}.mre-feature>small{display:none}.pool-linked-card{grid-template-columns:105px 1fr}.rd-planned-setup{grid-template-columns:1fr}}

/* ================= Pool construction & operations workspace ============== */
.pool-command-hero{align-items:center}.pool-hero-copy{max-width:650px}.pool-hero-actions{position:relative;z-index:1;display:grid;gap:7px;min-width:300px;padding:14px;border:1px solid rgba(105,183,255,.24);border-radius:14px;background:rgba(3,11,25,.76);backdrop-filter:blur(14px)}.pool-hero-actions>label{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#8ea5c9}.pool-hero-actions select{width:100%;height:38px}.pool-hero-actions>div{display:flex;gap:7px}.pool-hero-actions>div .btn{flex:1}.pool-hero-actions .pool-hero-state{justify-self:stretch;justify-content:center;padding:6px 9px;font-size:8px}
.pool-asset-strip{display:flex;align-items:center;gap:14px;padding:12px 15px;border:1px solid rgba(64,192,255,.2);border-radius:12px;background:linear-gradient(90deg,rgba(9,33,61,.9),rgba(7,20,40,.82))}.pool-asset-strip>span{flex:none;padding:5px 7px;border-radius:6px;background:rgba(41,190,255,.12);color:#5ed8ff;font-size:7px;letter-spacing:.12em}.pool-asset-strip p{flex:1;margin:0;color:#9fb0cd;font-size:9px}.pool-asset-strip b{color:#e4edff}
.pool-workspace-tabs{display:flex;gap:4px;margin:14px 0;padding:5px;border:1px solid rgba(100,151,229,.15);border-radius:12px;background:#081326;overflow-x:auto}.pool-workspace-tabs button{flex:1;min-width:max-content;padding:9px 13px;border:0;border-radius:8px;background:transparent;color:#8496b7;font:inherit;font-size:9px;cursor:pointer}.pool-workspace-tabs button:hover{color:#dce8ff;background:rgba(88,129,255,.08)}.pool-workspace-tabs button.active{color:#fff;background:linear-gradient(135deg,rgba(45,119,255,.35),rgba(113,61,242,.36));box-shadow:inset 0 0 0 1px rgba(101,136,255,.35)}
.pool-workspace-content{display:grid;gap:14px}.pool-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pool-summary-grid>article{padding:15px;border:1px solid rgba(94,146,224,.16);border-radius:13px;background:linear-gradient(145deg,#0b1930,#081225)}.pool-summary-grid span,.pool-summary-grid small{display:block;color:#7f92b3;font-size:8px}.pool-summary-grid b{display:block;margin:7px 0 5px;font-size:24px;color:#eef5ff}.pool-dashboard-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:14px}.pool-workspace-content .panel{margin:0}.pool-workspace-content .panel-head h2{margin:3px 0 0;font-size:15px}
.pool-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pool-metric-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-metric{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:13px;border:1px solid rgba(92,146,225,.15);border-radius:12px;background:#09162b}.pool-metric-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(36,180,255,.1);color:#65d6ff;font-size:10px}.pool-metric small,.pool-metric em{display:block;color:#8092b0;font-size:8px;font-style:normal}.pool-metric b{display:block;margin:2px 0;font-size:20px}.pool-metric footer{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font-size:7.5px}.pool-metric footer span{color:#667a9b}.pool-metric footer strong{color:#acbfdf}.pool-metric.is-live{border-color:rgba(45,211,154,.23)}.pool-metric.is-live .pool-metric-icon{background:rgba(45,211,154,.1);color:#43dfa6}.pool-metric.is-waiting b{color:#647796}
.pool-equipment-list{display:grid;gap:7px}.pool-equipment-card{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 11px;border:1px solid rgba(91,143,221,.14);border-radius:10px;background:#09162a}.pool-equipment-card>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(48,118,255,.11);color:#6db5ff}.pool-equipment-card b,.pool-equipment-card small{display:block}.pool-equipment-card b{font-size:10px}.pool-equipment-card small{margin-top:2px;color:#7184a4;font-size:7.5px}.pool-equipment-card>em{color:#86a0c5;font-size:8px;font-style:normal}.pool-empty-state{padding:24px;border:1px dashed rgba(101,149,222,.22);border-radius:11px;text-align:center}.pool-empty-state b,.pool-empty-state span{display:block}.pool-empty-state b{font-size:11px}.pool-empty-state span{max-width:560px;margin:6px auto 0;color:#788ba9;font-size:8.5px;line-height:1.5}
.pool-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}.pool-plan-grid>article{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:10px;border:1px solid rgba(103,146,213,.14);border-radius:10px;background:rgba(8,19,38,.75)}.pool-plan-grid>article>span{color:#5fbdff}.pool-plan-grid b,.pool-plan-grid small{display:block}.pool-plan-grid b{font-size:9px}.pool-plan-grid small{margin-top:2px;color:#7284a2;font-size:7px}.pool-complete-note{margin:0;padding:13px;border:1px solid rgba(45,211,154,.18);border-radius:10px;background:rgba(32,174,123,.06);color:#7bd9b5;font-size:9px}
.pool-stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.pool-stage{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:11px;border:1px solid rgba(100,145,215,.15);border-radius:10px;background:#08152a}.pool-stage>span{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#122748;color:#76a8f4;font-size:8px}.pool-stage b,.pool-stage small{display:block}.pool-stage b{font-size:9px}.pool-stage small{margin-top:2px;color:#7083a1;font-size:7px}.pool-stage em{grid-column:2;color:#f2b55c;font-size:7px;font-style:normal;text-transform:uppercase}.pool-stage.ready{border-color:rgba(45,211,154,.2)}.pool-stage.ready>span{background:rgba(45,211,154,.12);color:#4be0ac}.pool-stage.ready em{color:#4be0ac}
.pool-target-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pool-target-grid label{color:#899bb9;font-size:8px}.pool-target-grid input{width:100%;margin-top:5px}.pool-safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}.pool-safety-grid>article{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:12px;border:1px solid rgba(95,145,220,.15);border-radius:10px;background:#09162a}.pool-safety-grid b,.pool-safety-grid small{display:block}.pool-safety-grid b{font-size:9px}.pool-safety-grid small{color:#7e91af;font-size:7.5px}.pool-safety-grid em{font-size:7px;font-style:normal}.pool-safety-grid .unknown{border-color:rgba(245,166,35,.2)}.pool-safety-grid .unknown em{color:#f2b456}.pool-safety-grid .reporting{border-color:rgba(45,211,154,.2)}.pool-safety-grid .reporting em{color:#48dba7}
.pool-profile-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.pool-profile-grid label{color:#899bb9;font-size:8px}.pool-profile-grid input,.pool-profile-grid select{width:100%;margin-top:5px}.pool-project-profile{background:linear-gradient(135deg,rgba(11,26,50,.96),rgba(7,17,34,.98))}
.pool-maintenance-list{display:grid;gap:8px}.pool-maintenance-list article{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(95,145,220,.14);border-radius:10px;background:#09162a}.pool-maintenance-list article>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(52,196,151,.1);color:#49dca8}.pool-maintenance-list b,.pool-maintenance-list small{display:block}.pool-maintenance-list b{font-size:9.5px}.pool-maintenance-list small{margin-top:3px;color:#7689a8;font-size:7.5px}.pool-empty-workspace{display:grid;place-items:center;min-height:320px;padding:40px;border:1px dashed rgba(95,155,235,.2);border-radius:16px;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(28,125,222,.12),transparent 48%),#071326}.pool-empty-workspace>span{font-size:48px;color:#4fc8ff}.pool-empty-workspace h2{margin:10px 0 4px}.pool-empty-workspace p{max-width:600px;color:#8093b3;font-size:9px;line-height:1.6}
.pool-home-status{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}.pool-home-status>article{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:11px;padding:15px;border:1px solid rgba(91,145,224,.16);border-radius:13px;background:linear-gradient(145deg,#0a1930,#071326)}.pool-home-status>article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(70,127,255,.11);color:#77b5ff;font-size:16px}.pool-home-status article.water>span{background:rgba(38,200,233,.1);color:#4ed8ef}.pool-home-status small,.pool-home-status b,.pool-home-status em{display:block}.pool-home-status small{color:#7689a9;font-size:7.5px;text-transform:uppercase;letter-spacing:.08em}.pool-home-status b{margin:3px 0;font-size:13px}.pool-home-status em{color:#7285a5;font-size:7.5px;font-style:normal}
.pool-mood-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.pool-mood-grid button{display:grid;grid-template-columns:38px 1fr;text-align:left;gap:2px 10px;padding:12px;border:1px solid rgba(96,142,222,.18);border-radius:11px;background:linear-gradient(145deg,#0d1c35,#09152a);color:#e9f1ff;cursor:pointer}.pool-mood-grid button:hover{transform:translateY(-1px);border-color:rgba(99,132,255,.5);box-shadow:0 10px 26px rgba(0,0,0,.2)}.pool-mood-grid button>span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(39,104,255,.2),rgba(196,50,255,.15));color:#8bb3ff;font-size:15px}.pool-mood-grid b{align-self:end;font-size:10px}.pool-mood-grid small{color:#7184a4;font-size:7.5px}.pool-mood-grid.large button{min-height:76px}
.pool-schedule-list,.pool-activity-list{display:grid;gap:8px}.pool-schedule-list article,.pool-activity-list article{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(92,143,220,.14);border-radius:10px;background:#09162a}.pool-schedule-list article>span,.pool-activity-list article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(64,119,255,.11);color:#7da8ff}.pool-schedule-list b,.pool-schedule-list small,.pool-activity-list b,.pool-activity-list small{display:block}.pool-schedule-list b,.pool-activity-list b{font-size:9.5px}.pool-schedule-list small,.pool-activity-list small{margin-top:3px;color:#7689a8;font-size:7.5px}
.pool-schedule-list article.pool-schedule-edit{grid-template-columns:32px minmax(0,1fr) auto auto}.pool-schedule-name{width:100%;padding:8px 10px;border:1px solid rgba(92,143,220,.18);border-radius:8px;background:#0c1b31;color:#edf4ff;font-weight:700}.pool-schedule-fields{display:grid;grid-template-columns:115px minmax(150px,1fr) minmax(110px,.7fr);gap:7px;margin-top:7px}.pool-schedule-fields input,.pool-schedule-fields select{min-width:0;padding:7px 8px;border:1px solid rgba(92,143,220,.18);border-radius:8px;background:#0b1729;color:#dce8ff}.pool-schedule-delete{width:30px;height:30px;border:1px solid rgba(255,97,121,.25);border-radius:8px;background:rgba(102,22,39,.18);color:#ff8195}.pool-schedule-delete:hover{background:rgba(152,31,55,.3)}
@media(max-width:1050px){.pool-command-hero{align-items:flex-end}.pool-summary-grid,.pool-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-dashboard-grid{grid-template-columns:1fr}.pool-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-home-status{grid-template-columns:1fr}.pool-mood-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pool-command-hero{align-items:stretch}.pool-hero-actions{min-width:0;width:100%}.pool-asset-strip{align-items:flex-start;flex-direction:column}.pool-summary-grid,.pool-stage-grid,.pool-metric-grid,.pool-metric-grid.compact,.pool-target-grid,.pool-profile-grid,.pool-mood-grid{grid-template-columns:1fr}.pool-equipment-card{grid-template-columns:30px 1fr auto}.pool-equipment-card>em{grid-column:2}.pool-workspace-tabs button{flex:none}.pool-plan-grid{grid-template-columns:1fr}.pool-schedule-list article.pool-schedule-edit{grid-template-columns:32px minmax(0,1fr) auto}.pool-schedule-fields{grid-template-columns:1fr}.pool-schedule-delete{grid-column:3}}

/* ================= Rooms catalogue polish (build 91) ====================
   The approved right-side preview was intentionally omitted: one click opens
   the complete room workspace, keeping a single source of live control state. */
.rooms-command-page{max-width:1680px;margin:0 auto}.rooms-master-panel{padding:22px!important}.rooms-inventory-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:14px;margin:14px 0}.rooms-inventory-grid>.panel{margin:0;min-width:0}
#room-filter-chips .chip{display:flex;align-items:center;gap:6px}#room-filter-chips .chip span{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.07);font:8px var(--mono);color:#9eabc4}#room-filter-chips .chip.active span{background:rgba(91,111,255,.23);color:#dfe6ff}
.rooms-free-pins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.rooms-free-pin{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(112,137,218,.12);border-radius:9px;background:rgba(8,16,34,.74)}.rooms-free-pin>span{display:grid;place-items:center;height:32px;border-radius:8px;background:rgba(76,93,230,.13);color:#b7c5ff;font:10px var(--mono)}.rooms-free-pin b,.rooms-free-pin small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rooms-free-pin b{font:9px var(--mono);color:#dbe4f8}.rooms-free-pin small{margin-top:2px;font-size:7.5px;color:#42cf91}.rooms-all-pins{grid-column:1/-1;width:100%;margin-top:2px}
#page-rooms .room-card{outline:0 solid transparent}#page-rooms .room-card:focus-visible{outline:2px solid #7664ff;outline-offset:2px}#page-rooms .room-card:after{content:"Open room  →";opacity:.78;transform:none}#page-rooms .room-card:hover:after{color:#fff}
@media(max-width:980px){.rooms-inventory-grid{grid-template-columns:1fr}.rooms-free-pins{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.rooms-free-pins{grid-template-columns:1fr}.rooms-master-panel{padding:15px!important}}

/* ================= Guided commissioning (build 92) ===================== */
.commission-overview{margin:0 0 14px;padding:16px 18px;border:1px solid rgba(103,126,255,.22);border-radius:15px;background:linear-gradient(120deg,rgba(16,24,53,.94),rgba(6,14,30,.95));box-shadow:0 18px 42px rgba(0,0,0,.16)}
.co-head,.rcm-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.co-head h3,.rcm-head h3{margin:4px 0;font-size:17px}.co-head p,.rcm-head p{margin:0;color:#8d9cba;font-size:9px;line-height:1.5}.workflow-mode{display:flex;padding:3px;border:1px solid rgba(128,148,190,.18);border-radius:9px;background:#071022}.workflow-mode button{padding:7px 13px;border:0;border-radius:7px;background:transparent;color:#8290ab;font-size:9px;cursor:pointer}.workflow-mode button.active{background:linear-gradient(100deg,#465de4,#744ddc);color:#fff;box-shadow:0 5px 16px rgba(72,65,215,.3)}
.co-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.co-metrics article{padding:10px 12px;border:1px solid rgba(113,137,189,.12);border-radius:10px;background:rgba(7,15,32,.72)}.co-metrics b,.co-metrics span{display:block}.co-metrics b{font:15px var(--mono);color:#e9eeff}.co-metrics span{margin-top:3px;color:#71809d;font-size:7.5px;text-transform:uppercase;letter-spacing:.08em}.co-metrics article.ok b{color:#41d890}.co-metrics article.offline b{color:#ff8f75}
.co-task-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:10px}.co-task-list>button{position:relative;display:grid;grid-template-columns:1fr 18px;gap:3px;padding:10px;border:1px solid rgba(115,137,183,.12);border-radius:9px;background:#09162d;color:#e7edff;text-align:left;cursor:pointer}.co-task-list>button:hover{border-color:rgba(105,103,255,.5);transform:translateY(-1px)}.co-task-list .eq-state{grid-column:1}.co-task-list b{font-size:9px}.co-task-list small{color:#7787a6;font-size:7.5px}.co-task-list>button>i{grid-column:2;grid-row:1/4;align-self:center;font-style:normal;color:#8395ff}.co-task-list>p,.co-live-note{grid-column:1/-1;margin:0;padding:10px 12px;border-radius:9px;background:rgba(38,185,125,.08);color:#77dbac;font-size:9px}.co-live-note{margin-top:10px}.co-live-note.warn{background:rgba(255,125,86,.08);color:#ffac92}
.eq-state{display:inline-flex;width:max-content;padding:3px 6px;border-radius:999px;background:rgba(124,140,180,.11);color:#8999ba;font-size:6.5px;text-transform:uppercase;letter-spacing:.09em}.eq-state.allocated{background:rgba(70,116,255,.13);color:#83a7ff}.eq-state.wired{background:rgba(163,92,255,.13);color:#c193ff}.eq-state.tested{background:rgba(251,176,57,.12);color:#ffc667}.eq-state.live{background:rgba(41,203,132,.12);color:#58dfa0}
.room-commission-badge{position:absolute;left:12px;right:12px;bottom:9px;z-index:3;display:flex;align-items:center;gap:7px;pointer-events:none}.room-commission-badge>span{flex:1;height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.15)}.room-commission-badge>span i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#486df5,#8b52ee,#34d89a)}.room-commission-badge>b{font-size:6.5px;color:#d6e0f7;text-shadow:0 1px 4px #000}.room-card:has(.room-commission-badge):after{bottom:20px!important}
#rd-commissioning{grid-column:1/-1}.room-commission{padding:15px;border:1px solid rgba(103,126,255,.19);border-radius:13px;background:linear-gradient(120deg,rgba(11,23,48,.95),rgba(7,15,31,.96))}.rcm-ring{--ready:0;width:62px;height:62px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at center,#0b1730 61%,transparent 63%),conic-gradient(#61d9b2 calc(var(--ready)*1%),rgba(255,255,255,.08) 0)}.rcm-ring b{font:11px var(--mono)}.rcm-stepper{display:grid;grid-template-columns:repeat(5,1fr);margin:14px 0}.rcm-stepper span{position:relative;display:flex;align-items:center;gap:6px;color:#65728d;font-size:7.5px}.rcm-stepper span:after{content:"";position:absolute;left:24px;right:4px;top:10px;height:1px;background:#26334e}.rcm-stepper span:last-child:after{display:none}.rcm-stepper i{z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#111d36;font-style:normal}.rcm-stepper span.done{color:#cdd7f0}.rcm-stepper span.done i{background:#4c5fe4;color:#fff}.rcm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:8px}.rcm-groups>div{padding:9px;border:1px solid rgba(113,135,181,.11);border-radius:9px;background:rgba(7,14,30,.66)}.rcm-groups h4{display:flex;justify-content:space-between;margin:0 0 6px;color:#8795b2;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.rcm-groups h4 b{color:#c3cee5}.rcm-groups button{display:grid;width:100%;grid-template-columns:1fr 12px;gap:2px;padding:7px;border:0;border-top:1px solid rgba(255,255,255,.04);background:transparent;color:#e1e8f8;text-align:left;cursor:pointer}.rcm-groups button span{font-size:8.5px}.rcm-groups button small{font-size:6.5px;color:#73829e}.rcm-groups button i{grid-column:2;grid-row:1/3;align-self:center;color:#7189ff;font-style:normal}
.modal-overlay#modal-commission-equipment{z-index:10050}.modal.wide.commissioning-modal{width:min(1180px,calc(100vw - 32px));max-width:1180px;height:min(820px,calc(100dvh - 32px));max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:linear-gradient(145deg,#08111f 0%,#0b1424 60%,#11122a 100%)}.commissioning-modal>#ce-body{min-height:0;overflow:hidden}.ce-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:stretch}.ce-layout>main,.ce-layout>aside{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.ce-layout>main{padding-right:4px}.ce-layout>aside{padding-right:2px}.ce-progress{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:12px}.ce-progress>div{position:relative;text-align:center;color:#61708c;font-size:7px}.ce-progress>div:after{content:"";position:absolute;left:60%;right:-40%;top:13px;height:1px;background:#273551}.ce-progress>div:last-child:after{display:none}.ce-progress i{position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;margin:0 auto 5px;border-radius:50%;background:#101b32;font-style:normal}.ce-progress .done{color:#b9c7e4}.ce-progress .done i{background:#465cdf;color:#fff}.ce-progress .current i{box-shadow:0 0 0 4px rgba(92,94,246,.16),0 0 22px rgba(92,94,246,.45)}
.ce-card,.ce-summary,.ce-safety{margin-bottom:10px;padding:13px;border:1px solid rgba(111,135,184,.14);border-radius:11px;background:#09152a}.ce-card h3{margin:6px 0;font-size:14px}.ce-card p,.ce-summary p,.ce-safety p{color:#8493af;font-size:8.5px;line-height:1.55}.ce-card select{width:100%;margin-top:9px}.ce-actions{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin:10px -2px -2px;padding:12px 2px 2px;border-top:1px solid rgba(111,135,184,.12);background:linear-gradient(180deg,rgba(9,21,42,.72),#09152a 28%)}.ce-actions .btn{max-width:100%;white-space:normal}.ce-summary h3{margin:10px 0 2px}.ce-summary dl{margin:12px 0 0}.ce-summary dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);font-size:8px}.ce-summary dt{color:#70809d}.ce-summary dd{margin:0;color:#dce5f7;text-align:right}.ce-summary dd.ok{color:#48d895}.ce-summary dd.bad{color:#ff987e}.ce-safety{border-color:rgba(250,179,67,.18);background:rgba(91,56,11,.13)}.ce-safety b{font-size:9px;color:#ffc568}.ce-history>div{display:flex;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.04)}.ce-history>div>i{width:6px;height:6px;margin-top:4px;border-radius:50%;background:#5a70f1;box-shadow:0 0 8px #5a70f1}.ce-history b,.ce-history small{display:block}.ce-history b{font-size:8px}.ce-history small{margin-top:2px;color:#6f7f9c;font-size:6.5px}.ce-history>p{margin:6px 0}
@media(max-width:850px){.co-task-list{grid-template-columns:1fr 1fr}.ce-layout{grid-template-columns:1fr}.ce-layout aside{display:grid;grid-template-columns:1fr 1fr;gap:9px}.co-metrics{grid-template-columns:1fr 1fr}}@media(max-width:600px){.co-head,.rcm-head{align-items:flex-start;flex-direction:column}.workflow-mode{width:100%}.workflow-mode button{flex:1}.co-task-list{grid-template-columns:1fr}.rcm-stepper span{font-size:0}.ce-layout aside{grid-template-columns:1fr}.ce-progress span{display:none}}

/* ================= Bootstrap 5.1-style room insight rail (build 98) =====
   Component styles are deliberately scoped to the room rail. This keeps the
   familiar Bootstrap card/grid/form rhythm without allowing framework-wide
   .btn, .row or modal rules to alter the hardware console. */
.bs51-room-rail{--bs-gutter-x:12px;--rail-border:rgba(123,151,221,.16);--rail-surface:rgba(8,18,40,.92);--rail-muted:#8292b1;gap:12px!important}
.bs51-room-rail .rail-glass-card{position:relative;overflow:hidden;padding:0!important;border:1px solid var(--rail-border)!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(10,23,49,.96),rgba(6,14,31,.97))!important;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.bs51-room-rail .rail-glass-card:before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(131,156,255,.32),transparent);pointer-events:none}
.rail-card-head{min-height:61px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid rgba(119,142,203,.1);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}
.rail-heading{display:flex;align-items:center;min-width:0;gap:9px}.rail-heading h3,.rail-heading small{display:block;margin:0}.rail-heading h3{font-size:11px;letter-spacing:.01em}.rail-heading small{margin-top:2px;color:var(--rail-muted);font-size:7px}.rail-heading-icon{display:grid;place-items:center;width:31px;height:31px;flex:0 0 31px;border:1px solid currentColor;border-radius:10px;font-size:13px}.rail-heading-icon.blue{color:#63a4ff;background:rgba(43,119,255,.1);box-shadow:inset 0 0 16px rgba(35,115,255,.09)}.rail-heading-icon.violet{color:#b47cff;background:rgba(145,78,255,.1)}.rail-heading-icon.amber{color:#ffbb62;background:rgba(255,163,46,.1)}.rail-heading-icon.green{color:#4add9a;background:rgba(44,203,127,.1)}
.rail-icon-button,.rail-add-button{border:1px solid rgba(118,144,207,.17);border-radius:8px;background:#0c1932;color:#9eb0d1;cursor:pointer;transition:.18s}.rail-icon-button{width:29px;height:29px;font-size:13px}.rail-icon-button:hover,.rail-add-button:hover{border-color:#6d7dff;color:#fff;background:#17244c}.rail-add-button{padding:6px 9px;font-size:8px}.rail-live-badge,.rail-secure-label{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;font-size:6.5px;letter-spacing:.06em;text-transform:uppercase}.rail-live-badge{color:#63dfa2;background:rgba(37,190,118,.1);border:1px solid rgba(44,213,137,.16)}.rail-live-badge i{width:5px;height:5px;border-radius:50%;background:#38dc91;box-shadow:0 0 8px #38dc91}.rail-secure-label{color:#6ee2aa;background:rgba(41,194,125,.08)}
.rail-environment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:11px}.rail-env-metric{position:relative;min-height:78px;display:grid;grid-template-columns:29px 1fr;align-items:center;gap:7px;overflow:hidden;padding:9px;border:1px solid rgba(119,144,201,.11);border-radius:10px;background:linear-gradient(145deg,rgba(15,29,58,.85),rgba(8,18,37,.9))}.rail-env-metric:after{content:"";position:absolute;width:44px;height:44px;right:-16px;top:-18px;border-radius:50%;background:currentColor;filter:blur(22px);opacity:.15}.rail-env-metric.blue{color:#70a8ff}.rail-env-metric.cyan{color:#54d9f4}.rail-env-metric.violet{color:#c383ff}.rail-env-metric.amber{color:#ffc064}.rail-env-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent);border:1px solid color-mix(in srgb,currentColor 25%,transparent);font-size:12px}.rail-env-metric div{min-width:0}.rail-env-metric b,.rail-env-metric small{display:block}.rail-env-metric b{font:12px var(--mono);color:#eaf1ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-env-metric small{margin-top:3px;color:#7888a7;font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-mini-wave{position:absolute;left:8px;right:8px;bottom:6px;height:8px;display:flex;align-items:end;gap:2px;opacity:.32}.rail-mini-wave em{flex:1;height:35%;border-radius:2px;background:currentColor}.rail-mini-wave em:nth-child(2){height:75%}.rail-mini-wave em:nth-child(3){height:45%}.rail-mini-wave em:nth-child(4){height:90%}.rail-mini-wave em:nth-child(5){height:55%}.rail-alerts{padding:0 11px 11px}.rail-alerts:empty{display:none}
.rail-sensor-list{padding:7px 10px 11px}.bs51-room-rail .rd-rail-sensor{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 23px;gap:9px;align-items:center;margin:5px 0;padding:8px;border:1px solid rgba(112,139,202,.1);border-radius:9px;background:rgba(14,28,55,.72);transition:.18s}.bs51-room-rail .rd-rail-sensor:hover{transform:translateX(2px);border-color:rgba(105,128,255,.34)}.rd-rail-sensor .sensor-graphic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,rgba(91,101,255,.18),rgba(133,68,255,.1));color:#a9b8ff;font-size:14px}.bs51-room-rail .rd-rail-sensor b{font-size:8.5px}.bs51-room-rail .rd-rail-sensor small{font:7px var(--mono);color:#8595b4}.bs51-room-rail .rd-rail-sensor>i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(42,201,130,.11);color:#51dda0;font-size:9px}.bs51-room-rail .rd-rail-sensor.waiting>i{background:rgba(255,174,58,.09);color:#ffc36d}
.rail-automation-quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:11px}.rail-automation-quick>label{position:relative;min-width:0;padding:9px;border:1px solid rgba(111,137,197,.11);border-radius:10px;background:rgba(13,27,53,.76);cursor:pointer}.rail-automation-quick label>span{display:grid;grid-template-columns:23px 1fr;align-items:center;column-gap:6px}.rail-automation-quick label i{grid-row:1/3;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:rgba(96,107,255,.12);color:#a9b5ff;font-style:normal}.rail-automation-quick label b,.rail-automation-quick label small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rail-automation-quick label b{font-size:7.5px}.rail-automation-quick label small{color:#7585a3;font-size:5.8px;margin-top:2px}.rail-automation-quick input{position:absolute;opacity:0}.rail-automation-quick label>em{display:block;width:27px;height:14px;margin:8px 0 0 auto;border-radius:99px;background:#26324d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:.18s}.rail-automation-quick label>em:after{content:"";display:block;width:10px;height:10px;margin:2px;border-radius:50%;background:#8390a9;transition:.18s}.rail-automation-quick input:checked+em{background:linear-gradient(90deg,#466dff,#8354f2)}.rail-automation-quick input:checked+em:after{transform:translateX(13px);background:#fff;box-shadow:0 0 8px rgba(255,255,255,.45)}
.rail-schedule-list{padding:0 10px 11px}.bs51-room-rail .rd-schedule{position:relative;display:grid;grid-template-columns:29px minmax(0,1fr) 26px;gap:8px;align-items:center;margin-top:6px;padding:9px;border:1px solid rgba(112,138,198,.11);border-radius:10px;background:rgba(13,27,52,.78)}.schedule-graphic{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:rgba(255,174,58,.1);color:#ffbd62}.schedule-copy{min-width:0}.schedule-copy>b,.schedule-copy>small{display:block}.schedule-copy>b{font-size:8px}.schedule-copy>small{margin-top:2px;color:#7788a8;font-size:6.5px}.schedule-fields{display:grid;grid-template-columns:66px 1fr;gap:5px;margin-top:7px}.schedule-fields input,.schedule-fields select{height:25px!important;min-width:0;padding:2px 5px!important;border-radius:6px!important;font-size:6.5px!important}.schedule-fields [data-f=preset]{grid-column:1/-1}.rail-switch{position:absolute;right:9px;top:9px}.rail-switch input{position:absolute;opacity:0}.rail-switch em{display:block;width:24px;height:13px;border-radius:99px;background:#28334c;cursor:pointer}.rail-switch em:after{content:"";display:block;width:9px;height:9px;margin:2px;border-radius:50%;background:#7f8ca5;transition:.15s}.rail-switch input:checked+em{background:#5c61ed}.rail-switch input:checked+em:after{transform:translateX(11px);background:#fff}.schedule-delete{position:absolute;right:8px;bottom:8px;width:20px;height:20px;border:0;border-radius:6px;background:rgba(242,72,93,.08);color:#ed8291;cursor:pointer}.rail-schedule-list .rail-empty{margin-top:0}
.bs51-room-rail .rd-schedule [data-f=preset]:not([hidden]){display:block}
.bs51-room-rail .rd-safety-card{border-color:rgba(45,205,132,.17)!important}.bs51-room-rail .rd-safety-state{margin:11px 11px 8px;padding:12px;border-radius:11px;background:linear-gradient(120deg,rgba(27,153,101,.16),rgba(11,45,39,.19));box-shadow:inset 0 0 24px rgba(31,199,126,.04)}.bs51-room-rail .rd-safety-state>strong{width:42px;height:42px;border:1px solid rgba(78,223,158,.23);background:radial-gradient(circle,rgba(62,211,145,.22),rgba(35,156,104,.08));box-shadow:0 0 22px rgba(46,202,133,.12)}.bs51-room-rail .rd-safety-state b{font-size:13px}.bs51-room-rail .rd-safety-state span{font-size:7px}.bs51-room-rail .rd-safety-state.danger{border-color:rgba(255,76,102,.35);background:linear-gradient(120deg,rgba(194,43,74,.2),rgba(67,15,29,.22))}.bs51-room-rail .rd-safety-state.danger>strong{color:#ff7186;background:rgba(242,62,91,.15);border-color:rgba(255,89,113,.3)}.bs51-room-rail .rd-safety-grid{margin:0;padding:0 11px 11px}.bs51-room-rail .rd-safety-grid>div{position:relative;align-items:center;padding:8px;background:rgba(13,28,52,.7)}.safety-symbol{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;font-style:normal}.safety-symbol.fire{color:#ffb357;background:rgba(255,150,44,.1)}.safety-symbol.water{color:#6eb5ff;background:rgba(50,131,255,.1)}.bs51-room-rail .rd-safety-grid b{font-size:7.5px}.bs51-room-rail .rd-safety-grid small{font-size:6.2px;color:#55d99b}.bs51-room-rail .rd-safety-grid em{margin-left:auto;color:#51da9a;font-size:8px;font-style:normal}
.bs51-room-rail .rail-empty{margin:11px;padding:14px 9px;border:1px dashed rgba(116,143,207,.16);background:linear-gradient(145deg,rgba(13,27,53,.5),rgba(7,16,34,.5))}.rail-empty-graphic{display:grid!important;place-items:center;width:38px;height:38px;margin:0 auto 8px;border-radius:12px;background:linear-gradient(145deg,rgba(74,99,238,.17),rgba(148,76,244,.1));color:#9cabff;font-size:16px!important}.bs51-room-rail .rail-empty b{font-size:8.5px}.bs51-room-rail .rail-empty>span:last-child{font-size:6.7px;line-height:1.45}
@media(max-width:980px){.bs51-room-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.bs51-room-rail .rail-glass-card{height:max-content}}@media(max-width:620px){.bs51-room-rail{grid-template-columns:1fr}.rail-environment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ================= Unified setup-dialog typography (build 109) ==========
   Add Light and its commissioning continuation are one customer journey.
   Keep a single type scale and rhythm even though separate modules render
   the fitting, wiring, test and live stages. */
.modal.wide.room-add-modal,.modal.wide.commissioning-modal{
  --setup-title:20px;
  --setup-section:16px;
  --setup-body:12px;
  --setup-label:11px;
  --setup-meta:10px;
  --setup-leading:1.5;
  font-size:var(--setup-body);
  line-height:var(--setup-leading);
}
.room-add-modal>.modal-head,.commissioning-modal>.modal-head{
  min-height:78px;
  margin:0 0 14px;
  padding:0 0 14px;
  align-items:flex-start;
  border-bottom:1px solid rgba(126,150,197,.14);
}
.room-add-modal>.modal-head h2,.commissioning-modal>.modal-head h2{
  margin:3px 0 4px;
  color:#f4f7ff;
  font-size:var(--setup-title);
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.02em;
}
.room-add-modal>.modal-head p,.commissioning-modal>.modal-head p{
  margin:0;
  max-width:760px;
  color:#8796b2;
  font-size:var(--setup-body);
  line-height:var(--setup-leading);
}
.room-add-modal .eyebrow,.commissioning-modal .eyebrow{
  margin:0 0 5px;
  color:#7393ff;
  font-size:var(--setup-meta);
  font-weight:750;
  line-height:1.25;
  letter-spacing:.1em;
}
.room-add-modal h3,.commissioning-modal h3,
.room-add-modal .raf-section h3,.room-add-modal .raf-wiring h3,
.commissioning-modal .ce-card h3,.commissioning-modal .ce-summary h3{
  margin:4px 0 6px;
  color:#f1f5ff;
  font-size:var(--setup-section);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.012em;
}
.room-add-modal p,.commissioning-modal p,
.commissioning-modal .ce-card p,.commissioning-modal .ce-summary p,
.commissioning-modal .ce-safety p{
  color:#8796b2;
  font-size:var(--setup-body);
  line-height:var(--setup-leading);
}
.room-add-modal label,.commissioning-modal label,
.room-add-modal .raf-field,.commissioning-modal .ce-look-grid label{
  color:#aebbd2;
  font-size:var(--setup-label);
  font-weight:650;
  line-height:1.35;
}
.room-add-modal small,.commissioning-modal small,
.room-add-modal .raf-type small,.room-add-modal .raf-source small,
.room-add-modal .raf-profile-state small,.room-add-modal .raf-wire-visual small,
.commissioning-modal .ce-history small{
  color:#8796b2;
  font-size:var(--setup-meta);
  line-height:1.45;
}
.room-add-modal button,.commissioning-modal button,
.room-add-modal input,.room-add-modal select,
.commissioning-modal input,.commissioning-modal select{
  font-size:var(--setup-body);
  line-height:1.25;
}
.room-add-modal .btn,.commissioning-modal .btn{
  min-height:38px;
  padding:9px 14px;
  font-size:var(--setup-body);
  font-weight:650;
  line-height:1.2;
}
.room-add-modal input,.room-add-modal select,
.commissioning-modal input,.commissioning-modal select{
  min-height:40px;
  padding:9px 11px;
}
.room-add-modal .raf-progress span,.commissioning-modal .ce-progress>div{
  font-size:var(--setup-meta);
  font-weight:650;
  line-height:1.25;
}
.commissioning-modal .ce-progress span{font-size:var(--setup-meta);line-height:1.25}
.room-add-modal .raf-section,.room-add-modal .raf-wiring,
.commissioning-modal .ce-card,.commissioning-modal .ce-summary,
.commissioning-modal .ce-safety{
  border-radius:14px;
  padding:16px;
}
.room-add-modal .raf-section-head{margin-bottom:14px}
.room-add-modal .raf-type b,.room-add-modal .raf-source b{
  font-size:var(--setup-body);
  line-height:1.3;
}
.room-add-modal .raf-type em,.room-add-modal .raf-source em{
  font-size:var(--setup-meta);
  line-height:1.25;
}
.room-add-modal .raf-pin-picks label span{
  font-size:var(--setup-label);
  line-height:1.3;
}
.room-add-modal .raf-wiring ol{
  font-size:var(--setup-meta);
  line-height:1.55;
}
.room-add-modal .raf-safety b,.room-add-modal .raf-profile-state b,
.commissioning-modal .ce-safety b,.commissioning-modal .ce-history b{
  font-size:var(--setup-label);
  line-height:1.35;
}
.room-add-modal .raf-safety span{
  font-size:var(--setup-meta);
  line-height:1.5;
}
.commissioning-modal .ce-summary dl>div{
  padding:8px 0;
  font-size:var(--setup-meta);
  line-height:1.4;
}
.commissioning-modal .ce-history>div{padding:8px 0}
.commissioning-modal .ce-actions,.room-add-modal .raf-actions{min-height:51px}

@media(max-width:620px){
  .modal.wide.room-add-modal,.modal.wide.commissioning-modal{
    --setup-title:18px;
    --setup-section:15px;
    --setup-body:12px;
    --setup-label:11px;
    --setup-meta:10px;
  }
}

/* ================= Preset-first room effect studio (build 99) =========== */
.rd-control-grid>.rd-mode-panel{grid-column:2/-1}.rd-control-grid>.rd-effects-panel{grid-column:1/-1!important;border-left:0!important;border-top:1px solid rgba(112,137,218,.12)!important;padding:14px 0 0!important;margin-top:2px!important}
.rd-effects-panel .drawer-sec-head{align-items:flex-start;margin-bottom:10px}.rd-effects-panel .drawer-sec-head h3{font-size:13px}.rd-effects-panel .drawer-sec-head .hint{display:block;margin-top:3px;font-size:7px}.rd-seq-featured{padding:10px;border:1px solid rgba(111,137,201,.12);border-radius:11px;background:linear-gradient(145deg,rgba(11,24,49,.72),rgba(7,15,32,.78))}.seq-featured-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;color:#7f8fac;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.seq-featured-head b{color:#9babca;font-size:6.5px}.rd-seq-featured>div:last-child{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.seq-preset-mini{position:relative;min-width:0;display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px;border:1px solid rgba(112,138,202,.11);border-radius:9px;background:rgba(13,27,53,.82);color:#eaf0ff;text-align:left;cursor:pointer;transition:.17s}.seq-preset-mini:hover{transform:translateY(-1px);border-color:rgba(104,113,255,.42)}.seq-preset-mini>i{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--p1),var(--p2));box-shadow:0 5px 14px color-mix(in srgb,var(--p1) 20%,transparent)}.seq-preset-mini b,.seq-preset-mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seq-preset-mini b{font-size:7.5px}.seq-preset-mini small{margin-top:2px;color:#7788a8;font-size:5.8px}.seq-preset-mini em{color:#91a4ff;font-size:6.5px;font-style:normal}
.rd-sequence-list{display:flex!important;gap:6px!important;overflow-x:auto;margin:9px 0}.rd-sequence-list>p{font-size:7px;margin:2px 0}.rd-sequence-list .rd-scene{min-width:230px;display:grid;grid-template-columns:1fr auto;gap:3px;align-items:center;padding:7px 8px!important;border-radius:8px}.rd-sequence-list .rd-scene>b{font-size:8px}.rd-sequence-list .rd-scene>.muted{font-size:6px}.rd-sequence-list .rd-scene>.row{grid-column:2;grid-row:1/3}
.rd-sequence-builder-head{display:grid;grid-template-columns:minmax(180px,1fr) 105px 90px auto;gap:7px;align-items:end;margin:10px 0 7px;padding-top:10px;border-top:1px solid rgba(112,137,198,.1)}.rd-sequence-builder-head label>span{display:block;margin:0 0 4px;color:#7f8fac;font-size:6.5px;text-transform:uppercase;letter-spacing:.08em}.rd-sequence-builder-head input,.rd-sequence-builder-head select{height:31px!important;padding:4px 8px!important;font-size:8px!important}.rd-sequence-builder-head>.btn{height:31px}
.rd-effects-panel .rd-seq-frames{max-height:260px!important;overflow:auto;gap:6px}.rd-effects-panel .rd-seq-frame{min-width:790px;display:grid!important;grid-template-columns:20px 36px 82px minmax(115px,1fr) 72px 72px 79px 58px 24px!important;gap:6px;padding:7px;border-radius:9px;background:rgba(11,23,47,.82);border-color:rgba(110,137,202,.11)}.rd-effects-panel .rd-seq-frame>*:nth-child(n+4){display:flex!important}.rd-effects-panel .rd-seq-frame>select,.rd-effects-panel .rd-seq-frame>input{height:30px!important;min-width:0;font-size:7px}.rd-effects-panel .rd-seq-frame>input[type=color]{width:34px!important;padding:2px}.rd-frame-field{min-width:0;display:flex!important;flex-direction:column;justify-content:center;gap:3px}.rd-frame-field>span{color:#7b8aa6;font-size:5.8px;text-transform:uppercase}.rd-frame-field input{width:100%;min-width:0;height:16px!important;padding:1px 4px!important;font-size:6.5px!important}.rd-frame-field input[type=range]{padding:0!important}.rd-effects-panel .rd-frame-order{display:flex!important;gap:3px}.rd-effects-panel .rd-frame-order .ic-btn{width:26px;height:29px}.rd-effects-panel .rd-frame-del{display:grid!important;width:24px;height:29px}.rd-sequence-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.effect-library-modal{width:min(1160px,94vw);max-width:1160px;max-height:91vh;overflow:hidden;padding:0!important}.effect-library-modal>.modal-head{margin:0;padding:18px 20px;border-bottom:1px solid rgba(118,143,205,.12);background:linear-gradient(180deg,#101a32,#0b1428)}.effect-library-modal>.modal-head h2{margin:4px 0 2px}.effect-library-modal>.modal-head p{margin:0;color:#8392ad;font-size:8px}.fx-library-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(116,140,199,.1);background:#091326}.fx-library-tools>div{display:flex;gap:5px;overflow-x:auto}.fx-library-tools button{padding:6px 9px;border:1px solid rgba(116,139,194,.13);border-radius:7px;background:#0e1b35;color:#8392ae;font-size:7px;white-space:nowrap;cursor:pointer}.fx-library-tools button.active{border-color:#6c68f5;background:rgba(85,82,229,.16);color:#fff}.fx-library-tools>label{width:235px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1px solid rgba(116,140,197,.16);border-radius:8px;background:#0b1730;color:#7889aa}.fx-library-tools input{height:31px;border:0!important;background:transparent!important;font-size:8px!important}
.fx-library-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:565px;max-height:calc(91vh - 138px)}.fx-library-layout>main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;overflow:auto;padding:13px}.fx-preset-card{--p1:#5575ff;--p2:#9755ff;--p3:#2dcfff;min-width:0;overflow:hidden;padding:0;border:1px solid rgba(111,138,204,.13);border-radius:11px;background:#0b1730;color:#eaf0ff;text-align:left;cursor:pointer;transition:.18s}.fx-preset-card:hover{transform:translateY(-2px);border-color:rgba(105,115,255,.42);box-shadow:0 10px 24px rgba(0,0,0,.22)}.fx-preset-card.active{border-color:#7368ff;box-shadow:0 0 0 2px rgba(105,92,255,.15),0 12px 30px rgba(0,0,0,.25)}.fx-preset-visual{height:62px;display:flex;align-items:center;justify-content:center;gap:4px;background:radial-gradient(circle at 20% 40%,color-mix(in srgb,var(--p1) 28%,transparent),transparent 38%),linear-gradient(135deg,#0b1429,#111a37)}.fx-preset-visual i{width:5px;border-radius:5px;background:linear-gradient(180deg,var(--p2),var(--p1));box-shadow:0 0 9px color-mix(in srgb,var(--p2) 50%,transparent);animation:fxPresetBeat 1.5s ease-in-out infinite}.fx-preset-visual i:nth-child(1){height:14px}.fx-preset-visual i:nth-child(2){height:34px;animation-delay:-.9s}.fx-preset-visual i:nth-child(3){height:22px;animation-delay:-.4s}.fx-preset-visual i:nth-child(4){height:43px;animation-delay:-1.2s}.fx-preset-visual i:nth-child(5){height:18px;animation-delay:-.7s}@keyframes fxPresetBeat{50%{transform:scaleY(.45);filter:hue-rotate(30deg)}}.fx-preset-copy{display:block;padding:9px}.fx-preset-copy small,.fx-preset-copy b,.fx-preset-copy em{display:block}.fx-preset-copy small{color:#7b8cab;font-size:5.8px;text-transform:uppercase;letter-spacing:.09em}.fx-preset-copy b{margin-top:3px;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-preset-copy em{margin-top:3px;color:#71819e;font-size:6px;font-style:normal}
.fx-library-layout>aside{overflow:auto;padding:14px;border-left:1px solid rgba(117,141,199,.11);background:linear-gradient(160deg,#0a1630,#071022)}.fx-detail-preview{height:135px;display:grid;place-items:center;margin-bottom:13px;overflow:hidden;border:1px solid rgba(125,148,211,.15);border-radius:13px;background:radial-gradient(circle at 20% 50%,color-mix(in srgb,var(--p1) 35%,transparent),transparent 42%),radial-gradient(circle at 80% 35%,color-mix(in srgb,var(--p2) 30%,transparent),transparent 42%),#09142c}.fx-detail-preview>div{display:flex;align-items:center;gap:5px}.fx-detail-preview i{width:6px;height:45px;border-radius:7px;background:linear-gradient(180deg,var(--p3),var(--p1));box-shadow:0 0 15px color-mix(in srgb,var(--p2) 60%,transparent);animation:fxPresetBeat 1.2s ease-in-out infinite}.fx-detail-preview i:nth-child(2n){height:78px;animation-delay:-.5s}.fx-detail-preview i:nth-child(3n){height:30px;animation-delay:-.8s}.fx-library-layout>aside h3{margin:5px 0;font-size:17px}.fx-library-layout>aside>p{color:#8797b5;font-size:8px;line-height:1.55}.fx-detail-palette{display:flex;gap:5px;margin:10px 0}.fx-detail-palette i{width:27px;height:27px;border-radius:8px;box-shadow:0 5px 12px rgba(0,0,0,.22)}.fx-library-layout dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.fx-library-layout dl>div{padding:7px;border:1px solid rgba(113,138,195,.1);border-radius:8px;background:rgba(13,27,53,.7)}.fx-library-layout dt,.fx-library-layout dd{margin:0}.fx-library-layout dt{color:#7483a0;font-size:5.8px;text-transform:uppercase}.fx-library-layout dd{margin-top:3px;font:8px var(--mono)}.fx-step-preview{max-height:140px;overflow:auto;margin:10px 0}.fx-step-preview>span{display:grid;grid-template-columns:19px 1fr;column-gap:7px;padding:6px;border-top:1px solid rgba(255,255,255,.045)}.fx-step-preview>span>i{grid-row:1/3;width:19px;height:19px;border-radius:6px}.fx-step-preview b{font-size:7px}.fx-step-preview small{color:#72819d;font-size:5.8px}.fx-safe-note{display:block;margin-top:7px;color:#7685a2;font-size:6.2px;line-height:1.5;text-align:center}
@media(max-width:1050px){.fx-library-layout>main{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-seq-featured>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.rd-control-grid>.rd-mode-panel{grid-column:1}.rd-sequence-builder-head{grid-template-columns:1fr 1fr}.rd-sequence-builder-head>label:first-child{grid-column:1/-1}.fx-library-layout{grid-template-columns:1fr;overflow:auto}.fx-library-layout>main{overflow:visible}.fx-library-layout>aside{border-left:0;border-top:1px solid rgba(117,141,199,.11)}.fx-library-tools{align-items:stretch;flex-direction:column}.fx-library-tools>label{width:auto}.effect-library-modal{overflow:auto}.rd-seq-featured>div:last-child{grid-template-columns:1fr}}

/* ================= Room environment dashboard + type alignment (100) ==== */
.room-workspace{--room-title:#eef3ff;--room-copy:#8e9db9;--room-faint:#6e7d99}.room-workspace h2,.room-workspace h3,.room-workspace h4,.room-workspace b,.room-workspace strong{letter-spacing:-.012em}.room-workspace .drawer-sec-head{min-height:32px;align-items:center}.room-workspace .drawer-sec-head h3{margin:0;color:var(--room-title);font-size:11px;font-weight:650;line-height:1.2}.room-workspace .drawer-sec-head .hint{color:var(--room-copy);font-size:7px;line-height:1.35}.room-workspace .field-label{display:flex;align-items:center;justify-content:space-between;min-height:14px;color:#8290aa;font-size:6.5px;line-height:1.3;text-transform:uppercase;letter-spacing:.085em}.room-workspace input,.room-workspace select,.room-workspace button{font-family:Inter,system-ui,sans-serif}.room-workspace input,.room-workspace select{line-height:1.2}.room-workspace .muted{color:var(--room-copy);line-height:1.5}.room-workspace .pill{display:inline-flex;align-items:center;justify-content:center;min-height:19px;line-height:1;padding:4px 7px;font-size:6px;letter-spacing:.05em;text-transform:uppercase}.room-workspace .btn.sm{min-height:28px;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:5px 9px;font-size:7px}.room-workspace .rd-page-meta{line-height:1.2}.room-workspace .rd-tabs button{display:flex;align-items:center;justify-content:center;line-height:1;font-weight:500;letter-spacing:.005em}
.rd-environment-dashboard{grid-template-columns:1fr!important}.rd-environment-dashboard>.env-dashboard-card{grid-column:1/-1;padding:0!important;overflow:hidden;border:1px solid rgba(107,137,211,.15)!important;border-radius:14px!important;background:linear-gradient(150deg,rgba(10,23,49,.94),rgba(6,14,31,.96))!important;box-shadow:0 13px 32px rgba(0,0,0,.16)}.env-section-head{min-height:67px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(112,140,202,.1);background:linear-gradient(180deg,rgba(255,255,255,.018),transparent)}.env-section-title{display:flex;align-items:center;gap:10px;min-width:0}.env-section-title h3,.env-section-title small{display:block;margin:0}.env-section-title h3{font-size:12px;color:#edf3ff}.env-section-title small{margin-top:3px;color:#7f8fad;font-size:7px}.env-section-icon{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;border:1px solid currentColor;border-radius:11px;font-size:15px}.env-section-icon.energy{color:#ffb95c;background:rgba(255,160,44,.1);box-shadow:inset 0 0 18px rgba(255,159,42,.07)}.env-section-icon.sensors{color:#8d83ff;background:rgba(105,91,255,.1)}.env-status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(98,147,255,.16);border-radius:999px;background:rgba(53,101,213,.08);color:#92b2ff;font-size:6.5px;letter-spacing:.07em;text-transform:uppercase}.env-status-pill i{width:5px;height:5px;border-radius:50%;background:#6395ff;box-shadow:0 0 8px #6395ff}.env-refresh-button{height:29px;padding:0 10px;border:1px solid rgba(113,140,205,.17);border-radius:8px;background:#0d1a34;color:#aab8d3;font-size:7px;cursor:pointer}.env-refresh-button:hover{border-color:#7169f5;color:#fff;background:#17254a}
.env-energy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:13px}.env-energy-metric{position:relative;min-height:150px;overflow:hidden;padding:12px;border:1px solid rgba(111,138,202,.12);border-radius:12px;background:linear-gradient(145deg,rgba(16,32,62,.9),rgba(8,19,39,.92))}.env-energy-metric:after{content:"";position:absolute;right:-30px;top:-36px;width:95px;height:95px;border-radius:50%;filter:blur(32px);opacity:.13}.env-energy-metric.load:after{background:#ffaf46}.env-energy-metric.usage:after{background:#4e8dff}.env-energy-metric.cost:after{background:#8a63ff}.env-metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.env-metric-top>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:rgba(106,124,255,.1);color:#a4b2ff}.env-energy-metric.load .env-metric-top>span{background:rgba(255,168,49,.1);color:#ffbd66}.env-energy-metric.cost .env-metric-top>span{background:rgba(145,88,255,.1);color:#be92ff}.env-metric-top>em{color:#71819f;font-size:5.8px;font-style:normal;text-transform:uppercase;letter-spacing:.08em}.env-energy-metric>strong{display:flex;align-items:baseline;gap:5px;margin-top:11px;color:#f0f5ff;font:22px var(--mono)}.env-energy-metric>strong small{color:#8a9ab8;font:7px Inter,sans-serif}.env-energy-metric>b{display:block;margin-top:3px;color:#b9c5da;font-size:7.5px}.env-energy-metric>p{margin:3px 0 0;color:#71809e;font-size:6.2px}.env-metric-chart{position:absolute;left:12px;right:12px;bottom:10px;height:25px;display:flex;align-items:end;gap:4px}.env-metric-chart u{flex:1;height:22%;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#ffbf62,#c87b25);opacity:.45;text-decoration:none}.env-metric-chart u:nth-child(2){height:48%}.env-metric-chart u:nth-child(3){height:31%}.env-metric-chart u:nth-child(4){height:70%}.env-metric-chart u:nth-child(5){height:46%}.env-metric-chart u:nth-child(6){height:82%}.env-metric-chart u:nth-child(7){height:58%}.env-metric-progress{position:absolute;left:12px;right:12px;bottom:15px;height:5px;overflow:hidden;border-radius:99px;background:#17233c}.env-metric-progress u{display:block;height:100%;min-width:3px;border-radius:inherit;background:linear-gradient(90deg,#477cff,#77b4ff);box-shadow:0 0 9px rgba(74,127,255,.35);text-decoration:none}.env-energy-metric.cost .env-metric-progress u{background:linear-gradient(90deg,#7658ec,#c36aff)}
.env-model-panel{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 13px 13px}.env-model-panel>div{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:9px;border:1px solid rgba(111,138,202,.11);border-radius:11px;background:rgba(12,25,50,.72)}.env-model-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(92,105,238,.11);color:#a3b0ff;font-size:13px}.env-model-panel label{display:grid;grid-template-columns:1fr 105px;grid-template-rows:auto auto;column-gap:10px;align-items:center}.env-model-panel label b{grid-column:1;grid-row:1;font-size:7.5px}.env-model-panel label small{grid-column:1;grid-row:2;margin-top:2px;color:#7484a3;font-size:6px}.env-model-panel input{grid-column:2;grid-row:1/3;height:31px!important;padding:5px 8px!important;text-align:right;font:9px var(--mono)!important}
.env-history-card .rd-history{margin:0;padding:13px;border:0;border-radius:0;background:transparent}.env-history-empty{min-height:118px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px dashed rgba(110,138,203,.16);border-radius:11px;background:linear-gradient(145deg,rgba(13,27,53,.55),rgba(7,16,34,.58))}.env-history-empty>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,rgba(83,100,235,.17),rgba(141,76,240,.1));color:#a1adff;font-size:17px}.env-history-empty b,.env-history-empty small{display:block}.env-history-empty b{font-size:9px}.env-history-empty small{max-width:330px;margin-top:4px;color:#7888a6;font-size:6.8px;line-height:1.5}.env-history-card .rd-history-head{align-items:center;margin:0 0 10px;font-size:7px}.env-history-card .rd-history-head b{font-size:8px}.env-history-card .rd-history-bars{height:105px;padding:10px 8px 0;border-radius:9px;background:linear-gradient(180deg,rgba(49,70,128,.08),transparent),repeating-linear-gradient(180deg,rgba(112,137,198,.07) 0 1px,transparent 1px 25%)}.env-history-card .rd-history-bars i{background:linear-gradient(180deg,#68a2ff,#7758ed);box-shadow:0 0 8px rgba(87,110,246,.18)}
@media(max-width:760px){.env-energy-grid{grid-template-columns:1fr}.env-energy-metric{min-height:132px}.env-model-panel{grid-template-columns:1fr}.env-model-panel label{grid-template-columns:1fr 90px}}@media(max-width:480px){.env-model-panel label{display:block}.env-model-panel input{width:100%;margin-top:7px;text-align:left}.env-history-empty{align-items:flex-start;flex-direction:column;padding:14px}}

/* ================= Room equipment assignment + light targeting (101) ==== */
.rd-zone-list .rd-dev-ctl{grid-template-columns:34px minmax(58px,1fr) auto minmax(58px,1fr) auto!important}.rd-dev-sequence{color:#aebcff!important;border-color:rgba(102,112,255,.24)!important;background:rgba(82,83,225,.1)!important}.rd-dev-sequence:hover{border-color:#756cff!important;background:rgba(91,83,233,.2)!important}
.rd-sequence-target-bar{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:10px;margin:9px 0;padding:9px 10px;border:1px solid rgba(111,138,202,.11);border-radius:10px;background:rgba(10,22,45,.72)}.rd-sequence-target-bar>div:first-child>span,.rd-sequence-target-bar>div:first-child>small{display:block}.rd-sequence-target-bar>div:first-child>span{font-size:8px;font-weight:600}.rd-sequence-target-bar>div:first-child>small{margin-top:3px;color:#7686a4;font-size:6px;line-height:1.4}.rd-seq-targets{display:flex;justify-content:flex-end;gap:5px;overflow-x:auto}.rd-seq-targets>button,.rd-seq-targets>label{position:relative;display:grid;grid-template-columns:1fr;min-width:105px;padding:7px 8px;border:1px solid rgba(110,137,198,.12);border-radius:8px;background:#0c1932;color:#8999b7;text-align:left;cursor:pointer}.rd-seq-targets>button{display:flex;align-items:center;justify-content:space-between;min-width:100px}.rd-seq-targets>button b{display:grid;place-items:center;min-width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.06);font-size:6px}.rd-seq-targets>label input{position:absolute;opacity:0}.rd-seq-targets>label span{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-seq-targets>label small{margin-top:2px;color:#6f7f9d;font-size:5.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-seq-targets>.active,.rd-seq-targets>label.active{border-color:#6f68ef;background:linear-gradient(135deg,rgba(74,96,231,.16),rgba(133,74,230,.11));color:#f0f3ff;box-shadow:0 0 0 1px rgba(103,92,245,.08)}
.room-equipment-modal{width:min(1040px,94vw);max-width:1040px;max-height:91vh;overflow:hidden;padding:0!important}.room-equipment-modal>.modal-head{margin:0;padding:18px 20px;border-bottom:1px solid rgba(115,141,203,.12);background:linear-gradient(180deg,#101a32,#0b1428)}.room-equipment-modal>.modal-head h2{margin:4px 0 2px}.room-equipment-modal>.modal-head p{margin:0;color:#8190ac;font-size:8px}.re-workflow{display:grid;grid-template-columns:repeat(4,1fr);padding:11px 18px;border-bottom:1px solid rgba(113,139,201,.1);background:#091327}.re-workflow>span{position:relative;display:flex;align-items:center;gap:7px;color:#65738e;font-size:7px}.re-workflow>span:after{content:"";position:absolute;left:27px;right:7px;top:11px;height:1px;background:#273550}.re-workflow>span:last-child:after{display:none}.re-workflow i{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#14203a;font-style:normal}.re-workflow .done{color:#dbe4f8}.re-workflow .done i{background:#5263e6;color:#fff;box-shadow:0 0 14px rgba(78,92,226,.25)}
.re-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px}.re-toolbar>div{display:flex;gap:5px}.re-toolbar [data-re-filter]{padding:6px 10px;border:1px solid rgba(112,138,198,.13);border-radius:7px;background:#0d1931;color:#7f8eaa;font-size:7px;cursor:pointer}.re-toolbar [data-re-filter].active{border-color:#7168f3;background:rgba(90,82,228,.15);color:#fff}.re-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 14px 10px}.re-summary article{padding:9px;border:1px solid rgba(111,137,197,.1);border-radius:9px;background:rgba(12,25,50,.68)}.re-summary b,.re-summary span{display:block}.re-summary b{font:14px var(--mono)}.re-summary span{margin-top:2px;color:#71809d;font-size:6px;text-transform:uppercase;letter-spacing:.07em}
.re-device-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;min-height:315px;max-height:480px;overflow:auto;padding:3px 14px 14px}.re-device-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-content:start;gap:9px;min-height:180px;padding:11px;border:1px solid rgba(112,138,202,.12);border-radius:12px;background:linear-gradient(145deg,rgba(14,29,57,.9),rgba(8,18,38,.92))}.re-device-card.available:hover{border-color:rgba(102,113,255,.42);box-shadow:0 12px 28px rgba(0,0,0,.2)}.re-device-card.occupied{opacity:.56}.re-device-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,rgba(73,99,238,.17),rgba(146,72,240,.1));color:#b0bdff;font-size:17px}.re-device-copy{min-width:0}.re-device-kind{color:#7d8da9;font-size:5.8px;text-transform:uppercase;letter-spacing:.09em}.re-device-copy h3{margin:3px 0 2px;font-size:10px}.re-device-copy p{margin:0;color:#7786a3;font-size:6.5px}.re-device-copy dl{grid-column:1/-1;margin:9px 0 0}.re-device-copy dl>div{display:flex;justify-content:space-between;gap:9px;padding:5px 0;border-top:1px solid rgba(255,255,255,.045);font-size:6.3px}.re-device-copy dt{color:#70809e}.re-device-copy dd{margin:0;color:#c8d3e8;text-align:right}.re-device-card>.btn,.re-device-card>.re-card-state{grid-column:1/-1;align-self:end;margin-top:9px}.re-card-state{display:flex;align-items:center;justify-content:center;height:28px;border-radius:7px;background:rgba(112,129,174,.08);color:#7c8ba8;font-size:7px}.re-card-state.good{background:rgba(42,199,130,.09);color:#56d99c}.re-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-top:1px solid rgba(114,140,201,.1);background:#091326}.re-footer>span{display:flex;align-items:center;gap:6px;color:#7e8da9;font-size:6.5px}.re-footer>span i{width:6px;height:6px;border-radius:50%;background:#42d492;box-shadow:0 0 8px #42d492}.re-empty{grid-column:1/-1;align-self:center;justify-self:center;max-width:390px;padding:28px;text-align:center}.re-empty>span{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:15px;background:linear-gradient(145deg,rgba(76,98,235,.17),rgba(145,74,238,.1));color:#a8b5ff;font-size:20px}.re-empty h3{margin:0;font-size:13px}.re-empty p{color:#7c8ba8;font-size:7.5px;line-height:1.5}.re-empty .btn{margin-top:6px}
@media(max-width:850px){.re-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-sequence-target-bar{grid-template-columns:1fr}.rd-seq-targets{justify-content:flex-start}}@media(max-width:560px){.re-device-grid{grid-template-columns:1fr}.re-toolbar{align-items:stretch;flex-direction:column}.re-toolbar>div{overflow-x:auto}.re-summary{grid-template-columns:1fr 1fr}.re-workflow>span{font-size:0}.re-footer{align-items:flex-start;flex-direction:column}.re-footer .btn{width:100%}.rd-zone-list .rd-dev-ctl{grid-template-columns:34px 1fr auto!important}.rd-dev-sequence{grid-column:1/-1}}
/* Controller platform ----------------------------------------------------- */
.controller-platform-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:30px;margin-bottom:16px;border:1px solid rgba(79,118,255,.26);border-radius:22px;background:radial-gradient(circle at 88% 18%,rgba(76,60,255,.22),transparent 34%),linear-gradient(135deg,rgba(8,18,39,.98),rgba(7,11,24,.98));box-shadow:0 22px 70px rgba(0,0,0,.26)}
.controller-platform-hero:after{content:"";position:absolute;inset:auto -8% -70% 43%;height:210px;background:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899,#f59e0b);filter:blur(46px);opacity:.18;transform:rotate(-8deg);pointer-events:none}
.controller-platform-hero>div{position:relative;z-index:1}.controller-platform-hero h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.035em;margin:7px 0 8px;max-width:760px}.controller-platform-hero p{max-width:820px;color:var(--muted);line-height:1.65;margin:0}.controller-platform-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;min-width:280px}
.controller-contract-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.controller-contract-strip article{display:flex;gap:12px;align-items:center;min-height:80px;padding:15px 16px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(150deg,rgba(16,29,54,.92),rgba(7,15,29,.92))}.controller-contract-strip article>i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(86,95,255,.15);border:1px solid rgba(105,111,255,.34);color:#94a3ff;font:700 11px/1 ui-monospace,monospace}.controller-contract-strip span{display:flex;flex-direction:column;gap:3px;min-width:0}.controller-contract-strip small{color:var(--muted);line-height:1.35}
.controller-workflow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:13px 2px 20px}.controller-workflow-steps>span{position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}.controller-workflow-steps>span:not(:last-child):after{content:"";position:absolute;left:39px;right:8px;top:16px;height:1px;background:linear-gradient(90deg,rgba(99,102,241,.65),rgba(99,102,241,.08));transform:translateX(34px)}.controller-workflow-steps i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#121d38;border:1px solid #394d82;color:#afc1ff;font-style:normal;font-weight:800;z-index:1}.controller-workflow-steps b{font-size:13px}.controller-workflow-steps small{color:var(--muted);font-size:11px;margin-top:2px}
.controller-adapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.controller-adapter-card{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid var(--border);border-radius:13px;background:rgba(4,12,25,.58)}.controller-adapter-card>i{width:10px;height:10px;border-radius:50%;margin-top:5px;background:#64748b;box-shadow:0 0 0 4px rgba(100,116,139,.1)}.controller-adapter-card.ready>i{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}.controller-adapter-card>span{display:flex;flex-direction:column;gap:3px}.controller-adapter-card small{color:var(--muted);line-height:1.4}.ctl-card{position:relative;overflow:hidden}.ctl-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:#475569}.ctl-card[data-compat="compatible"]:before{background:#22c55e}.ctl-card[data-compat="unknown"]:before,.ctl-card[data-compat="upgrade_required"]:before,.ctl-card[data-compat="gateway_upgrade_required"]:before{background:#f59e0b}.ctl-card[data-compat="unsupported"]:before,.ctl-card[data-compat="profile_mismatch"]:before{background:#ef4444}.ctl-identity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}.ctl-identity-grid span{padding:10px;border:1px solid var(--border);border-radius:10px;background:rgba(4,10,22,.5)}.ctl-identity-grid small,.ctl-identity-grid b{display:block}.ctl-identity-grid small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}.ctl-identity-grid b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ctl-compat-note{margin:10px 0 0;padding:9px 11px;border-radius:9px;background:rgba(245,158,11,.08);color:#d9c49a;font-size:12px}.ctl-compat-note.good{background:rgba(34,197,94,.08);color:#9bd3ad}
@media(max-width:1100px){.controller-platform-hero{align-items:flex-start;flex-direction:column}.controller-platform-actions{justify-content:flex-start}.controller-contract-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.controller-workflow-steps{grid-template-columns:1fr;gap:8px}.controller-workflow-steps>span:not(:last-child):after{left:16px;right:auto;top:34px;width:1px;height:18px;transform:none}.controller-adapter-grid{grid-template-columns:1fr}.ctl-identity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.controller-contract-strip,.ctl-identity-grid{grid-template-columns:1fr}.controller-platform-hero{padding:22px}.controller-platform-actions{min-width:0}}

/* Controller board guide -------------------------------------------------- */
.controller-guide-modal{width:min(1240px,96vw);max-height:94vh;overflow:auto;background:linear-gradient(150deg,#071225,#050b17)}
.controller-guide-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:2px 0 16px}
.controller-guide-summary article{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(18,34,63,.94),rgba(6,15,30,.94))}
.controller-guide-summary i{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:11px;background:rgba(86,95,255,.15);border:1px solid rgba(105,111,255,.32);color:#aab8ff;font-style:normal;font-weight:800}
.controller-guide-summary span,.controller-guide-summary small{display:block}.controller-guide-summary small{color:var(--muted);line-height:1.35;margin-top:3px}
.controller-guide-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.75fr);gap:14px}
.controller-guide-layout>section,.controller-guide-layout>aside{padding:16px;border:1px solid var(--border);border-radius:16px;background:rgba(5,14,29,.76)}
.guide-board{display:grid;grid-template-columns:minmax(145px,1fr) minmax(180px,1.15fr) minmax(145px,1fr);gap:14px;align-items:stretch}
.guide-header-col{display:grid;gap:4px}.guide-header-col span{display:grid;grid-template-columns:38px 1fr;align-items:center;min-height:25px;padding:3px 7px;border-radius:7px;border:1px solid rgba(110,132,175,.13);background:rgba(12,24,45,.78)}
.guide-header-col span.assignable{border-color:rgba(34,211,238,.3);background:rgba(8,91,116,.14)}.guide-header-col span.power{border-color:rgba(245,158,11,.24)}.guide-header-col span.board{opacity:.72}.guide-header-col small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.guide-board-core{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:520px;border:1px solid rgba(92,112,255,.42);border-radius:22px;background:radial-gradient(circle at 50% 24%,rgba(37,99,235,.3),transparent 26%),linear-gradient(155deg,#102246,#071226 60%,#0e1930);box-shadow:inset 0 0 38px rgba(67,56,202,.12),0 18px 50px rgba(0,0,0,.25)}
.guide-board-core:before{content:"USB DEBUG";position:absolute;top:18px;padding:7px 12px;border:1px solid #52617f;border-radius:5px;color:#9caccc;font:700 9px/1 ui-monospace,monospace;letter-spacing:.08em}.guide-board-core b{font-size:24px;letter-spacing:.04em}.guide-board-core span{color:#8ba8ff;font-weight:700}.guide-board-core small{margin-top:8px;color:var(--muted)}.guide-board-core i{position:absolute;bottom:20px;font-style:normal;font-weight:900;color:#fb304f}
.controller-guide-layout aside h3{margin:0 0 12px}.controller-guide-layout aside ol{margin:0;padding-left:20px;color:#cbd5e1;line-height:1.55}.controller-guide-layout aside li+li{margin-top:9px}
.guide-safety{margin-top:12px;padding:13px 14px;border:1px solid rgba(245,158,11,.3);border-radius:12px;background:rgba(245,158,11,.07)}.guide-safety b{color:#f6c66b}.guide-safety p{margin:5px 0 0;color:#d5c7a9;line-height:1.5}
.guide-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.guide-legend span,.guide-pin-state{display:inline-flex;padding:4px 8px;border:1px solid var(--border);border-radius:999px;font-size:10px;color:var(--muted)}
.guide-legend .assignable,.guide-pin-state.assignable{color:#67e8f9;border-color:rgba(34,211,238,.36);background:rgba(6,182,212,.08)}.guide-legend .assigned,.guide-pin-state.assigned{color:#86efac;border-color:rgba(34,197,94,.36);background:rgba(34,197,94,.08)}.guide-legend .power,.guide-pin-state.power{color:#fcd34d;border-color:rgba(245,158,11,.35)}.guide-legend .board,.guide-pin-state.board{color:#c4b5fd;border-color:rgba(139,92,246,.32)}
.guide-table-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:22px 0 10px}.guide-table-head h3{margin:4px 0 0}.guide-filters{display:flex;gap:6px;flex-wrap:wrap}.guide-filters button{padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:#0a1427;color:var(--muted)}.guide-filters button.active{color:#fff;border-color:#596cff;background:rgba(79,70,229,.2)}
.guide-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:13px}.controller-pin-table{width:100%;border-collapse:collapse;min-width:820px}.controller-pin-table th,.controller-pin-table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(104,128,169,.12);vertical-align:middle}.controller-pin-table th{position:sticky;top:0;background:#0b172b;color:#8fa1be;font-size:10px;text-transform:uppercase;letter-spacing:.07em;z-index:1}.controller-pin-table td{font-size:12px}.controller-pin-table td small{display:block;color:var(--muted);margin-top:2px}.controller-pin-table tr:hover td{background:rgba(67,91,143,.08)}.guide-source{color:var(--muted);font-size:11px;margin:10px 2px 0}
@media(max-width:900px){.controller-guide-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.controller-guide-layout{grid-template-columns:1fr}.guide-board-core{min-height:480px}}
@media(max-width:560px){.controller-guide-summary{grid-template-columns:1fr}.guide-board{grid-template-columns:1fr 1fr}.guide-board-core{display:none}.guide-table-head{align-items:flex-start;flex-direction:column}}
/* Room-centred equipment creation ----------------------------------------- */
.modal.wide.room-add-modal{width:min(1180px,calc(100vw - 32px));max-width:1180px;height:min(820px,calc(100dvh - 32px));max-height:none;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;background:linear-gradient(145deg,#08111f 0%,#0b1424 60%,#11122a 100%)}
.raf-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px;padding:0 2px}.room-add-modal>#raf-body{min-height:0;overflow:hidden}
.raf-progress span{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(135,156,200,.18);border-radius:11px;color:#7888a5;font-size:12px;font-weight:700;background:rgba(8,16,30,.58)}
.raf-progress span i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#17213a;color:#8da0c6;font-style:normal}
.raf-progress span.active{color:#fff;border-color:rgba(91,124,255,.52);background:linear-gradient(135deg,rgba(48,83,199,.24),rgba(153,48,211,.14))}
.raf-progress span.active i{background:linear-gradient(135deg,#2677ff,#9138e9);color:#fff}
.raf-layout{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:16px;align-items:stretch}.raf-layout main{min-width:0;min-height:0;display:grid;align-content:start;gap:14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}.raf-section,.raf-wiring{border:1px solid rgba(126,150,197,.18);background:rgba(5,13,26,.72);border-radius:16px;padding:18px}
.raf-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:15px}.raf-section h3,.raf-wiring h3{margin:3px 0 0;font-size:18px;color:#f5f7ff}.raf-room-pill{padding:6px 10px;border-radius:999px;background:#17264a;color:#a9c2ff;font-size:11px;font-weight:700}
.raf-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:15px}.raf-type{min-height:88px;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;border:1px solid rgba(126,150,197,.18);border-radius:13px;background:#0c1728;color:#e9efff;cursor:pointer;position:relative}.raf-type:hover:not(:disabled){border-color:#467dff;transform:translateY(-1px)}.raf-type.active{border-color:#745cff;box-shadow:0 0 0 1px rgba(116,92,255,.22),0 12px 30px rgba(55,48,160,.16);background:linear-gradient(145deg,#102044,#18173e)}.raf-type:disabled{opacity:.48;cursor:not-allowed}.raf-type>i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#17264a;color:#6bb7ff;font-style:normal;font-size:18px}.raf-type span{display:grid;gap:4px}.raf-type b{font-size:12px}.raf-type small{font-size:10px;color:#8f9db8;line-height:1.35}.raf-type em{position:absolute;right:8px;top:7px;color:#8ea6ff;font-size:9px;font-style:normal;text-transform:uppercase;letter-spacing:.08em}
.raf-field{display:grid;gap:7px;color:#b8c4da;font-size:11px;font-weight:700}.raf-field input,.raf-pin-picks select{width:100%;border:1px solid rgba(126,150,197,.24);border-radius:10px;background:#0c1628;color:#f4f7ff;padding:11px}.raf-inline{display:flex;align-items:center;gap:10px}.raf-inline input{max-width:130px}.raf-inline small{color:#7f90ad}
.raf-source-grid{display:grid;gap:8px}.raf-source{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid rgba(126,150,197,.18);border-radius:12px;background:#0b1627;cursor:pointer}.raf-source:has(input:checked){border-color:#4a7dff;background:linear-gradient(135deg,rgba(39,82,188,.22),rgba(111,48,174,.12))}.raf-source span{display:grid;gap:3px}.raf-source b{font-size:12px;color:#f2f6ff}.raf-source small{font-size:10px;color:#8999b6}.raf-source em{font-size:9px;font-style:normal;text-transform:uppercase;color:#5fd49b}.raf-new-source em{color:#a899ff}.raf-unavailable{display:grid;gap:5px;padding:13px;border:1px dashed rgba(255,178,87,.32);border-radius:12px;background:rgba(115,69,10,.12)}.raf-unavailable b{font-size:12px;color:#ffc274}.raf-unavailable span{font-size:10px;color:#9da9be;line-height:1.45}
.raf-pin-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border-radius:12px;background:rgba(13,24,44,.7)}.raf-pin-picks label{display:grid;gap:6px}.raf-pin-picks label span{font-size:10px;color:#90a0bb}
.raf-layout>aside{position:relative;top:auto;min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.raf-wiring{position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.raf-wire-visual{display:flex;align-items:center;gap:7px;margin:15px 0;padding:14px;border-radius:13px;background:radial-gradient(circle at 20% 20%,rgba(48,91,194,.2),transparent 60%),#091321}.raf-wire-visual i{display:grid;place-items:center;min-width:38px;height:38px;border-radius:10px;font-style:normal;font-size:10px;font-weight:800}.raf-wire-visual i.red{background:#5f1820;color:#ff8290}.raf-wire-visual i.green{background:#123d2b;color:#69eba8}.raf-wire-visual i.blue{background:#142d62;color:#7fb0ff}.raf-wire-visual i.white{background:#263149;color:#e9f0ff}.raf-wire-visual strong{color:#667999}.raf-wire-visual div{display:grid;gap:3px;min-width:0}.raf-wire-visual b{font:600 11px/1.4 'JetBrains Mono',monospace;color:#fff}.raf-wire-visual small{font-size:9px;color:#7f90ad}.raf-wiring ol{display:grid;gap:9px;margin:0;padding-left:18px;color:#9ba9c1;font-size:10px;line-height:1.55}.raf-safety{display:grid;gap:5px;margin-top:15px;padding:12px;border:1px solid rgba(56,201,139,.23);border-radius:11px;background:rgba(18,103,71,.12)}.raf-safety b{font-size:11px;color:#65e2a7}.raf-safety span{font-size:9px;color:#91a5b6;line-height:1.45}.raf-actions{position:static;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid rgba(126,150,197,.14);background:linear-gradient(180deg,rgba(8,17,31,.7),#08111f 35%)}.raf-actions .btn{max-width:100%;white-space:normal}
.raf-profile-state{display:flex;align-items:center;gap:9px;margin:12px 0;padding:10px;border-radius:11px;border:1px solid}.raf-profile-state>i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-weight:800}.raf-profile-state span{display:grid;gap:2px}.raf-profile-state b{font-size:10px}.raf-profile-state small{font-size:9px;line-height:1.35}.raf-profile-state.verified{border-color:rgba(60,216,147,.25);background:rgba(21,113,77,.12);color:#70e5ac}.raf-profile-state.verified>i{background:#174f39}.raf-profile-state.unverified{border-color:rgba(255,178,87,.3);background:rgba(117,70,12,.13);color:#ffc274}.raf-profile-state.unverified>i{background:#503815}
@media(max-width:900px){.modal.wide.room-add-modal,.commissioning-modal{height:calc(100dvh - 20px);width:calc(100vw - 20px)}.raf-layout{grid-template-columns:1fr;overflow-y:auto}.raf-layout main{overflow:visible;padding-right:0}.raf-layout>aside{position:static;display:block;overflow:visible}.raf-wiring{overflow:visible;margin-top:0}.raf-actions{position:sticky;bottom:0;z-index:3;padding:11px 0 2px}.raf-type-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.raf-progress{grid-template-columns:repeat(2,1fr)}.raf-type-grid,.raf-pin-picks{grid-template-columns:1fr}}

/* Capability-aware room operations --------------------------------------- */
.rd-controls-dashboard{align-items:start}.rd-category-operations{overflow:hidden;background:radial-gradient(circle at 90% 0,rgba(31,105,228,.2),transparent 42%),linear-gradient(145deg,rgba(9,22,42,.96),rgba(12,17,34,.96))!important}
.rd-ops-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.rd-ops-head h3{margin:4px 0 5px;font-size:19px;color:#f3f7ff}.rd-ops-head p{max-width:720px;margin:0;color:#8e9db8;font-size:11px;line-height:1.55}
.rd-ops-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}.rd-ops-metrics article{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid rgba(117,148,199,.16);border-radius:13px;background:rgba(7,15,29,.62)}.rd-ops-metrics article>i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#142c5b,#172044);color:#6db7ff;font-style:normal;font-weight:800}.rd-ops-metrics span{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:6px}.rd-ops-metrics b{font-size:19px;color:#f4f7ff}.rd-ops-metrics small{font-size:9px;color:#a0aec6}.rd-ops-metrics em{grid-column:1/-1;font-size:8px;font-style:normal;color:#637795;text-transform:uppercase;letter-spacing:.06em}
.rd-control-groups{display:grid;gap:13px}.rd-control-groups>section{display:grid;gap:7px}.rd-control-groups h4{margin:0;color:#91a3c2;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.rd-control-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(117,148,199,.15);border-radius:12px;background:#0b1627}.rd-control-card>span{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#17284a;color:#73afff}.rd-control-card>div{display:grid;gap:3px}.rd-control-card b{font-size:11px;color:#edf3ff}.rd-control-card small{font-size:9px;color:#7f90ac}.rd-control-card input[type=range]{width:120px}
.rd-planned-controls,.rd-monitoring-plan{display:grid;gap:7px}.rd-planned-controls article,.rd-monitoring-plan article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border:1px solid rgba(117,148,199,.14);border-radius:11px;background:rgba(9,19,35,.76)}.rd-planned-controls article>span,.rd-monitoring-plan article>i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#172541;color:#8aaeff;font-style:normal;font-size:10px;font-weight:700}.rd-planned-controls article>div,.rd-monitoring-plan article>span{display:grid;gap:2px}.rd-planned-controls b,.rd-monitoring-plan b{font-size:10px;color:#eaf1ff}.rd-planned-controls small,.rd-monitoring-plan small{font-size:8px;color:#7f8da8}.rd-planned-controls article>em,.rd-monitoring-plan article>em{font-size:8px;font-style:normal;color:#7c91b4}.rd-planned-controls article.connected,.rd-monitoring-plan article.connected{border-color:rgba(61,212,145,.22)}.rd-planned-controls article.connected>em,.rd-monitoring-plan article.connected>em{color:#65daa5}
.rd-monitor-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}.rd-monitor-summary article{display:grid;gap:3px;padding:13px;border-radius:12px;border:1px solid rgba(111,151,212,.15);background:rgba(8,17,32,.66)}.rd-monitor-summary b{font-size:20px;color:#eef5ff}.rd-monitor-summary span{font-size:9px;color:#8697b3}
@media(max-width:850px){.rd-ops-metrics,.rd-monitor-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rd-ops-head{display:grid}.rd-ops-metrics,.rd-monitor-summary{grid-template-columns:1fr}}

/* ============ Overflow and small-screen corrections (pre-release) ========= */

/* The hero's apparent overflow was a FALSE ALARM: `.controller-platform-hero`
   has a deliberately oversized `:after` glow that `overflow:hidden` clips on
   purpose, and a naive scrollWidth check counts it. Its real children were
   verified to fit. flex-wrap is kept anyway because it is correct at narrow
   widths, but it was never the bug.

   The genuine overflow was the five-step workflow strip: five equal grid
   columns each containing a 34px badge plus a text column, where the text
   could not shrink below its content width. Each step spilled ~26px past its
   own box and over its neighbour. */
.controller-platform-hero { flex-wrap: wrap; }
.controller-platform-hero > div { min-width: 0; }
.controller-platform-hero h2,
.controller-platform-hero p { max-width: 100%; overflow-wrap: anywhere; }
.controller-platform-actions { min-width: 0; }

.hero { min-width: 0; }
.hero h1,
.hero .eyebrow-line { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- phones -- */
/* Below 860px the sidebar became a wrapped row: eight nav items plus Sign out,
   Blackout all, Emergency stop and Reset safety latch strung across the top,
   pushing the actual content below the fold. Worse, Emergency stop ended up
   adjacent to ordinary navigation, where it is easy to hit by accident.

   Instead: navigation becomes a single horizontally-scrolling strip pinned to
   the top, and the destructive controls move to the end of the page where they
   cannot be brushed while navigating. */
@media (max-width: 860px) {
  .sidebar {
    position: sticky;
    inset: auto;
    width: 100%;
    top: 0;
    z-index: 40;
    gap: 0;
    padding: 8px 0 0;
    background: var(--bg-panel, #0B0E14);
    border-bottom: 1px solid var(--border, #23262E);
  }

  .side-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 10px 8px;
    gap: 6px;
  }
  .side-nav::-webkit-scrollbar { display: none; }

  .side-nav .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 14px;
    /* 44px is the smallest comfortable touch target. */
    min-height: 44px;
  }

  /* Destructive actions out of the navigation strip entirely. */
  .side-foot {
    order: 99;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border, #23262E);
  }
  .side-foot .btn { min-height: 44px; }

  .brand { padding: 0 12px 8px; }
}

/* Each step is its own grid; without min-width:0 the text column refuses to
   shrink below its longest word and overflows the column it was given. */
.controller-workflow-steps > span { min-width: 0; }
.controller-workflow-steps > span > * { min-width: 0; overflow-wrap: anywhere; }

/* Five columns stop being readable long before the sidebar collapses. */
@media (max-width: 1200px) {
  .controller-workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .controller-workflow-steps > span:not(:last-child):after { display: none; }
}
@media (max-width: 560px) {
  .controller-workflow-steps { grid-template-columns: 1fr; }
}

/* Light commissioning stays a four-stage customer workflow. */
.ce-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-dev-pending { border-style:dashed!important; border-color:rgba(255,177,66,.42)!important; background:linear-gradient(90deg,rgba(255,165,48,.08),rgba(78,91,255,.05))!important; }
.rd-dev-pending .pill { white-space:nowrap; }
.rd-dev-pending .rd-dev-main b:after { content:" · setup required"; color:#f5b65d; font-size:9px; font-weight:600; }
.rd-mode-panel button:disabled,.rd-sequence-actions button:disabled { opacity:.58; cursor:not-allowed; filter:saturate(.55); }
.ce-inline-note { flex:1; color:#7f8da8; font-size:9px; line-height:1.45; }
.ce-look-grid { display:grid; grid-template-columns:minmax(0,1.6fr) 100px minmax(130px,.8fr); gap:10px; margin-top:10px; }
.ce-look-grid label { display:grid; gap:6px; color:#8f9db8; font-size:8px; }
.ce-look-grid select,.ce-look-grid input { width:100%; min-height:38px; }
.ce-look-grid input[type="color"] { padding:4px; border-radius:8px; }
@media (max-width:760px) { .ce-look-grid { grid-template-columns:1fr 90px; } .ce-look-grid label:first-child { grid-column:1/-1; } }
/* Dedicated zone inventory: the bridge between controller wiring and rooms. */
.zone-management-page{display:none;gap:16px}.zone-management-page.active{display:block}
.zone-platform-hero{margin-bottom:16px}.zone-workflow{margin-bottom:16px}
.zone-stat-grid{margin-bottom:16px}
.zone-toolbar{margin-bottom:16px}.zone-page-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.zone-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,rgba(16,27,49,.96),rgba(7,14,28,.98));padding:17px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.zone-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--zone-color,#566fff);box-shadow:0 0 22px var(--zone-color,#566fff)}
.zone-card-head,.zone-card-live,.zone-card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zone-card-title{display:flex;align-items:center;gap:11px;min-width:0}.zone-card-title>i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--zone-color) 18%,transparent);color:var(--zone-color);font-style:normal;font-size:20px}
.zone-card-title b{display:block;font-size:15px}.zone-card-title small{display:block;color:var(--muted);margin-top:3px}
.zone-card-live{margin:15px 0;padding:12px;border:1px solid rgba(122,151,210,.14);border-radius:13px;background:rgba(4,10,22,.52)}
.zone-color-preview{width:58px;height:58px;border-radius:50%;background:var(--zone-color);box-shadow:0 0 25px color-mix(in srgb,var(--zone-color) 58%,transparent)}
.zone-live-copy{flex:1}.zone-live-copy b,.zone-live-copy span{display:block}.zone-live-copy span{font-size:12px;color:var(--muted);margin-top:4px}
.zone-pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.zone-pin-grid span{padding:10px;border-radius:11px;background:rgba(9,19,36,.78);border:1px solid rgba(122,151,210,.13)}
.zone-pin-grid i,.zone-pin-grid b,.zone-pin-grid small{display:block}.zone-pin-grid i{font-style:normal;font-size:10px;text-transform:uppercase;color:var(--muted)}.zone-pin-grid b{margin:4px 0;font-size:13px}.zone-pin-grid small{font-size:10px;color:var(--muted);line-height:1.35}
.zone-assignment{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.zone-assignment label span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.zone-assignment select,.zone-assignment input{width:100%}
.zone-capabilities{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.zone-capabilities span{font-size:10px;padding:5px 8px;border-radius:999px;background:rgba(92,110,255,.12);border:1px solid rgba(112,130,255,.2);color:#b8c4ff}
.zone-card-actions{justify-content:flex-end;border-top:1px solid rgba(122,151,210,.12);padding-top:12px}.zone-card-actions .btn:first-child{margin-right:auto}
.zone-name-input{width:min(100%,310px);padding:2px 0;border:0;background:transparent;color:var(--txt);font-size:15px;font-weight:750;box-shadow:none}.zone-name-input:focus{outline:0;border-bottom:1px solid var(--zone-color);border-radius:0}
.zone-fixture-list{display:grid;gap:10px;margin:15px 0}.zone-fixture{padding:13px;border:1px solid rgba(122,151,210,.15);border-radius:14px;background:rgba(4,10,22,.56)}
.zone-fixture-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.zone-fixture-head b,.zone-fixture-head small{display:block}.zone-fixture-head small{margin-top:4px;color:var(--muted);font-size:11px}.zone-fixture-swatch{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--fixture-color,#fff);box-shadow:0 0 18px color-mix(in srgb,var(--fixture-color,#fff) 55%,transparent)}
.zone-pin-grid.compact{margin:10px 0}.zone-pin-grid.compact span{padding:8px}.zone-pin-grid.compact b{font-size:12px}.zone-pin-grid.compact small{font-size:9px}
.zone-fixture-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.zone-fixture-fields label span{display:block;margin-bottom:5px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}.zone-fixture-fields input,.zone-fixture-fields select{width:100%}
.zone-fixture-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.zone-empty-fixtures{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px dashed rgba(122,151,210,.2);border-radius:13px;text-align:center;color:var(--muted)}.zone-empty-fixtures b{color:var(--txt)}
.available-output-list{display:grid;gap:9px;margin-top:14px}.available-output-list>article{display:grid;grid-template-columns:1fr minmax(170px,.7fr);align-items:center;gap:12px;padding:12px;border:1px solid rgba(122,151,210,.14);border-radius:13px;background:rgba(4,10,22,.5)}.available-output-list b,.available-output-list small{display:block}.available-output-list small{margin-top:4px;color:var(--muted)}
.zone-create-modal{max-width:520px}.zone-create-modal .field{margin-top:14px}
.zone-empty{grid-column:1/-1;padding:32px;text-align:center;border:1px dashed rgba(122,151,210,.25);border-radius:16px;color:var(--muted)}
.zone-architecture-note{margin-top:16px;display:grid;grid-template-columns:minmax(230px,.7fr) 1.3fr;gap:28px;align-items:center}.zone-architecture-note p{margin:0;color:var(--muted);line-height:1.7}
@media(max-width:760px){.zone-page-grid{grid-template-columns:1fr}.zone-assignment,.zone-architecture-note,.zone-fixture-fields,.available-output-list>article{grid-template-columns:1fr}.zone-pin-grid{grid-template-columns:1fr}.zone-card-actions{flex-wrap:wrap}}

/* Unified Experiences workspace: one customer journey, distinct internal
   concepts. Control Groups contain references only and never resemble rooms. */
.experience-page{--exp-purple:#7857ff;--exp-pink:#ff4d9d;--exp-blue:#3c8cff}
.experience-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,.6fr);gap:22px;align-items:center;padding:28px;margin-bottom:16px;border:1px solid rgba(116,104,255,.28);border-radius:22px;background:radial-gradient(circle at 86% 20%,rgba(180,58,255,.2),transparent 34%),radial-gradient(circle at 8% 110%,rgba(37,112,255,.18),transparent 36%),linear-gradient(135deg,rgba(15,25,48,.98),rgba(16,10,35,.98));box-shadow:0 24px 60px rgba(0,0,0,.22)}
.experience-hero h2{margin:7px 0 9px;font-size:clamp(22px,2.2vw,34px);line-height:1.16}.experience-hero p{margin:0;color:var(--muted);line-height:1.65}.experience-hero p b{color:#d6dcff}
.experience-hero-status{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.experience-hero-status>span{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;padding:13px;border:1px solid rgba(127,143,210,.16);border-radius:14px;background:rgba(3,9,21,.55)}.experience-hero-status i{grid-row:1/3;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(112,88,255,.16);color:#a798ff;font-style:normal}.experience-hero-status b{font-size:17px}.experience-hero-status small{color:var(--muted);font-size:9px}
.experience-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:16px;padding:7px;border:1px solid var(--border);border-radius:18px;background:rgba(5,11,24,.75)}.experience-nav>button{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--muted);text-align:left}.experience-nav>button:hover{background:rgba(255,255,255,.035);color:var(--txt)}.experience-nav>button.active{border-color:rgba(112,102,255,.38);background:linear-gradient(135deg,rgba(72,93,255,.17),rgba(183,54,255,.12));color:var(--txt);box-shadow:0 8px 24px rgba(65,45,180,.14)}.experience-nav i{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border-radius:10px;background:rgba(105,91,255,.14);color:#ad9eff;font-style:normal}.experience-nav b,.experience-nav small{display:block}.experience-nav b{font-size:12px}.experience-nav small{margin-top:3px;color:var(--muted);font-size:9px;white-space:normal}
.experience-view{display:none}.experience-view.active{display:block}.experience-group-intro,.experience-music-target{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:14px;padding:21px}.experience-group-intro h2,.experience-music-target h2{margin:4px 0 7px}.experience-group-intro p,.experience-music-target p{margin:0;color:var(--muted);line-height:1.55;max-width:760px}.experience-music-target label{min-width:270px}.experience-music-target label>span{display:block;margin-bottom:7px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.experience-music-target select{width:100%}
.experience-quick-start{display:flex;align-items:center;gap:18px;margin-bottom:14px;padding:16px 18px;background:linear-gradient(135deg,rgba(25,38,69,.96),rgba(17,12,39,.96))}.experience-chain{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.experience-chain>span{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:center;min-width:0}.experience-chain i{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(114,93,255,.18);color:#b7abff;font-style:normal;font-size:10px}.experience-chain b,.experience-chain small{display:block;white-space:nowrap}.experience-chain b{font-size:11px}.experience-chain small{color:var(--muted);font-size:8px}.experience-chain em{color:#655c91;font-size:20px;font-style:normal}.experience-quick-start>.btn{flex:0 0 auto}
.experience-advanced{margin-bottom:14px;border:1px solid rgba(123,141,203,.14);border-radius:15px;background:rgba(5,11,24,.55)}.experience-advanced>summary{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;list-style:none}.experience-advanced>summary::-webkit-details-marker{display:none}.experience-advanced>summary:before{content:'›';width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:rgba(111,94,255,.13);color:#ad9eff;transition:transform .18s}.experience-advanced[open]>summary:before{transform:rotate(90deg)}.experience-advanced>summary span{font-weight:700;font-size:11px}.experience-advanced>summary small{color:var(--muted);font-size:9px}.experience-advanced .experience-nav{margin:0 7px 7px;border:0;border-top:1px solid rgba(123,141,203,.11);border-radius:0;background:transparent}
.quick-experience-modal{max-width:920px}.quick-experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.quick-experience-grid>label,.quick-schedule>label{display:block}.quick-experience-grid .wide{grid-column:1/-1}.quick-experience-grid label>span{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#dce3ff;font-size:10px;font-weight:700}.quick-experience-grid label>span i{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(114,93,255,.17);color:#b7abff;font-style:normal;font-size:9px}.quick-experience-grid input:not([type="checkbox"]):not([type="hidden"]),.quick-experience-grid select{width:100%}.quick-experience-grid input[type="checkbox"]{width:auto;flex:0 0 auto}.quick-experience-grid label>small{display:block;margin-top:6px;color:var(--muted);font-size:9px}.quick-schedule{display:none;grid-template-columns:1fr 1fr;gap:12px;padding:13px;border:1px solid rgba(123,141,203,.14);border-radius:13px;background:rgba(5,11,24,.5)}.quick-schedule.active{display:grid}
.quick-experience-modal{max-height:90vh;overflow:auto}.quick-progress{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px 0 16px}.quick-progress span{display:flex;align-items:center;gap:6px;color:#66718f;font-size:9px;font-weight:700}.quick-progress span i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(91,106,155,.16);font-style:normal}.quick-progress span.active{color:#e5e9ff}.quick-progress span.active i{background:linear-gradient(135deg,#4f79ff,#ab48ef);box-shadow:0 0 18px rgba(105,79,255,.34)}.quick-progress span.done{color:#82d9af}.quick-progress span.done i{background:rgba(69,187,130,.18)}.quick-progress em{width:58px;height:1px;background:rgba(114,132,190,.18)}.quick-step{display:none;min-height:330px;padding:18px;border:1px solid rgba(123,141,203,.14);border-radius:15px;background:rgba(5,11,24,.42)}.quick-step.active{display:block}.quick-step>header{display:flex;align-items:center;gap:10px;margin-bottom:17px}.quick-step>header>i{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border-radius:10px;background:linear-gradient(135deg,rgba(81,103,255,.22),rgba(202,66,255,.18));color:#c2b9ff;font-style:normal;font-weight:800}.quick-step>header b,.quick-step>header small{display:block}.quick-step>header b{font-size:15px}.quick-step>header small{margin-top:4px;color:var(--muted);font-size:10px}.quick-preset-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.quick-preset-grid button{display:grid;place-items:center;gap:5px;min-width:0;padding:16px 7px;border:1px solid rgba(124,145,205,.14);border-radius:13px;background:rgba(13,22,40,.78);color:var(--muted)}.quick-preset-grid button:hover,.quick-preset-grid button.active{border-color:rgba(112,96,255,.54);background:linear-gradient(145deg,rgba(70,85,225,.2),rgba(168,54,220,.15));color:var(--txt)}.quick-preset-grid button>i{font-size:21px;font-style:normal}.quick-preset-grid button>b{font-size:11px}.quick-preset-grid button>small{font-size:8px}.quick-name{display:block;margin-top:16px}.quick-name>span,.quick-options label>span,.quick-customize label>span{display:block;margin-bottom:6px;color:var(--muted);font-size:9px}.quick-name input{border:1px solid rgba(123,141,203,.2);background:rgba(13,22,40,.9);color:var(--txt)}.quick-fixture-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;max-height:280px;overflow:auto;padding-right:3px}.quick-fixture-picker .control-group-room label{justify-content:flex-start}.quick-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-customize{margin-top:14px;border-top:1px solid rgba(123,141,203,.12);padding-top:10px}.quick-customize>summary{cursor:pointer;color:#9faee0;font-size:9px}.quick-customize>label{display:block;margin-top:9px}.quick-experience-summary{margin-top:16px;padding:13px 14px;border:1px solid rgba(90,183,255,.17);border-radius:12px;background:rgba(37,113,190,.08);color:#cbdcff;font-size:11px;line-height:1.5}.experience-diagnostics{margin-bottom:12px}.experience-diagnostics>summary{cursor:pointer;color:var(--muted);font-size:10px}.experience-diagnostics>div{margin-top:9px}
.experience-group-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:13px}.experience-group-card{padding:17px;border:1px solid rgba(125,143,205,.17);border-radius:18px;background:linear-gradient(145deg,rgba(15,25,45,.96),rgba(7,13,27,.98));box-shadow:0 18px 44px rgba(0,0,0,.17)}.experience-group-card.selected{border-color:rgba(126,101,255,.52);box-shadow:0 18px 46px rgba(70,45,190,.2)}
.experience-group-head{display:flex;align-items:center;gap:11px}.experience-group-head>i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,rgba(88,102,255,.2),rgba(236,55,174,.17));color:#b5a8ff;font-style:normal;font-size:18px}.experience-group-head span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.experience-group-head h3{margin:3px 0 0}.experience-group-head em{margin-left:auto;padding:5px 8px;border-radius:999px;background:rgba(88,214,154,.12);color:#74e1ac;font-size:9px;font-style:normal}.experience-group-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.experience-group-metrics>span{padding:10px;border:1px solid rgba(122,151,210,.12);border-radius:11px;background:rgba(4,10,22,.42)}.experience-group-metrics b,.experience-group-metrics small{display:block}.experience-group-metrics b{font-size:16px}.experience-group-metrics small{margin-top:3px;color:var(--muted);font-size:9px}.experience-group-card>p{min-height:31px;margin:0 0 13px;color:var(--muted);font-size:11px;line-height:1.45}.experience-group-actions{display:flex;gap:7px;flex-wrap:wrap;border-top:1px solid rgba(122,151,210,.11);padding-top:12px}.experience-group-actions .btn.primary{margin-left:auto}
.control-group-rule{padding:14px;border:1px solid rgba(112,97,255,.22);border-radius:13px;background:rgba(77,60,190,.09)}.control-group-rule p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.55}.control-group-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px;max-height:44vh;overflow:auto;margin-top:18px;padding-right:3px}.control-group-room{border:1px solid rgba(122,151,210,.15);border-radius:14px;background:rgba(4,10,22,.44);overflow:hidden}.control-group-room header{padding:11px 12px;background:rgba(90,105,170,.08);border-bottom:1px solid rgba(122,151,210,.12)}.control-group-room label{display:flex;align-items:center;gap:9px}.control-group-room label span,.control-group-room label b,.control-group-room label small{display:block}.control-group-room label small{margin-top:3px;color:var(--muted);font-size:9px}.control-group-room>div{display:grid;gap:4px;padding:8px}.control-group-fixture{padding:9px;border-radius:10px}.control-group-fixture:hover{background:rgba(255,255,255,.035)}.control-group-modal #exp-group-msg{min-height:18px;margin-top:10px;color:#ff9f9f}
@media(max-width:1100px){.experience-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.experience-hero{grid-template-columns:1fr}.experience-hero-status{max-width:600px}.experience-chain{display:grid;grid-template-columns:repeat(3,1fr)}.experience-chain em{display:none}.experience-chain>span{grid-template-columns:1fr}.experience-chain i{grid-row:auto}.experience-chain small{white-space:normal}.quick-preset-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.experience-nav{grid-template-columns:1fr 1fr}.experience-hero-status{grid-template-columns:1fr}.experience-group-intro,.experience-music-target{align-items:stretch;flex-direction:column}.experience-music-target label{min-width:0;width:100%}.experience-group-actions .btn.primary{margin-left:0}.experience-quick-start{align-items:stretch;flex-direction:column}.experience-chain{grid-template-columns:1fr}.quick-experience-grid{grid-template-columns:1fr}.quick-experience-grid .wide{grid-column:auto}.quick-schedule,.quick-options{grid-template-columns:1fr}.quick-preset-grid{grid-template-columns:repeat(2,1fr)}}

/* Automation is one customer-facing workspace. Presets describe the result,
   Rules decide when it runs, and Activity provides an honest execution trail. */
.automation-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:14px;padding:4px 2px}.automation-workspace-head h2{margin:4px 0 5px;font-size:28px}.automation-workspace-head p{margin:0;color:var(--muted);font-size:13px}
.automation-primary-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px;padding:7px;border:1px solid rgba(126,145,207,.17);border-radius:17px;background:rgba(5,11,24,.76)}
.automation-primary-nav button{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);text-align:left}.automation-primary-nav button:hover{background:rgba(255,255,255,.035);color:var(--txt)}.automation-primary-nav button.active{border-color:rgba(107,102,255,.46);background:linear-gradient(135deg,rgba(71,96,255,.2),rgba(184,59,255,.14));color:var(--txt);box-shadow:0 10px 28px rgba(50,36,150,.18)}
.automation-primary-nav i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(108,91,255,.16);color:#b9adff;font-style:normal}.automation-primary-nav b,.automation-primary-nav small{display:block}.automation-primary-nav b{font-size:13px}.automation-primary-nav small{margin-top:2px;color:var(--muted);font-size:10px}
.experience-advanced .experience-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.automation-activity-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.automation-activity-summary article{display:flex;align-items:center;gap:12px;padding:18px;border:1px solid rgba(124,145,207,.16);border-radius:16px;background:linear-gradient(145deg,rgba(15,25,45,.96),rgba(7,13,27,.98))}.automation-activity-summary i{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(88,103,255,.17);color:#a99dff;font-style:normal}.automation-activity-summary b,.automation-activity-summary small{display:block}.automation-activity-summary b{font-size:21px}.automation-activity-summary small{margin-top:3px;color:var(--muted);font-size:10px}
.automation-activity-list{display:grid;gap:8px}.automation-activity-list>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid rgba(124,145,207,.13);border-radius:13px;background:rgba(6,13,27,.55)}.automation-activity-list b,.automation-activity-list small{display:block}.automation-activity-list small{margin-top:3px;color:var(--muted);font-size:10px}.automation-activity-list time{color:var(--muted);font-size:11px}.automation-activity-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(62,195,128,.13);color:#72dda9}.automation-empty{display:grid;place-items:center;padding:42px;text-align:center;color:var(--muted)}.automation-empty i{font-size:25px;color:#9d91ff;font-style:normal}.automation-empty b{margin-top:8px;color:var(--txt)}.automation-empty p{margin:5px 0 0;font-size:11px}

/* Approved Automation Canvas — visual explanation backed by the real rule,
   preset, fixture and execution stores rather than illustrative demo data. */
.automation-canvas-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px}.automation-search{display:flex;align-items:center;gap:8px;min-width:210px;padding:0 10px;border:1px solid rgba(122,145,204,.17);border-radius:10px;background:rgba(4,10,22,.7)}.automation-search span{color:#8fa3d7}.automation-search input{min-width:0;padding:9px 0;border:0;background:transparent;box-shadow:none}.automation-filter{display:flex;gap:5px;padding:3px;border:1px solid rgba(122,145,204,.13);border-radius:10px;background:rgba(4,10,22,.46)}.automation-filter button{padding:7px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-size:10px}.automation-filter button.active{border-color:rgba(83,117,255,.45);background:rgba(53,84,214,.2);color:#dbe4ff}.automation-filter b{margin-left:4px;color:#9eb3ff}.automation-canvas-toolbar select{margin-left:auto;max-width:270px}
.automation-canvas-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}.automation-canvas-main{min-width:0}.automation-flow-panel{position:relative;min-height:365px;padding:30px 24px;border:1px solid rgba(94,128,202,.2);border-radius:18px;overflow:auto;background-color:#061021;background-image:radial-gradient(rgba(114,142,199,.14) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(31,78,147,.11),transparent 52%);background-size:18px 18px,100% 100%;box-shadow:inset 0 0 55px rgba(0,0,0,.2)}
.automation-flow{display:grid;grid-template-columns:minmax(135px,1fr) 28px minmax(145px,1fr) 28px minmax(150px,1fr) 28px minmax(150px,1fr) 28px minmax(150px,1fr);align-items:center;min-width:960px;min-height:300px}.automation-node{display:flex;flex-direction:column;align-self:stretch;min-height:245px;border:1px solid var(--node-color);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--node-color) 11%,#091426),rgba(5,12,25,.96));box-shadow:0 0 24px color-mix(in srgb,var(--node-color) 13%,transparent)}.automation-node.trigger{--node-color:#2f6dff}.automation-node.condition{--node-color:#9b4dff}.automation-node.action{--node-color:#ef448d}.automation-node.targets{--node-color:#17bdd0}.automation-node.feedback{--node-color:#288d72}.automation-node.feedback.confirmed{--node-color:#26d186}.automation-node header{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid color-mix(in srgb,var(--node-color) 34%,transparent);text-transform:uppercase}.automation-node header i{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--node-color) 22%,transparent);color:color-mix(in srgb,var(--node-color) 70%,white);font-style:normal}.automation-node header b{font-size:9px;letter-spacing:.06em}.automation-node>div{padding:13px}.automation-node small,.automation-node strong,.automation-node p{display:block}.automation-node small{color:var(--muted);font-size:9px}.automation-node strong{margin-top:5px;font-size:12px;line-height:1.35}.automation-node p{margin:8px 0 0;color:#8d99b6;font-size:9px;line-height:1.5}.automation-node footer{margin-top:auto;padding:10px 13px;border-top:1px solid color-mix(in srgb,var(--node-color) 25%,transparent);color:color-mix(in srgb,var(--node-color) 55%,white);font-size:9px}.automation-link{position:relative;height:1px;background:#38d69a;font-style:normal}.automation-link i{position:absolute;left:50%;top:50%;width:18px;height:18px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #30d490;border-radius:50%;background:#07172a;color:#49e2a6;font-size:9px;font-style:normal}.automation-target-list{display:grid!important;gap:6px}.automation-target-list>span{display:grid;grid-template-columns:auto 1fr;gap:1px 7px;padding:8px;border:1px solid rgba(61,201,218,.13);border-radius:8px;background:rgba(5,20,34,.55)}.automation-target-list i{grid-row:1/3;color:#44d4e5;font-style:normal}.automation-target-list b,.automation-target-list small{display:block}.automation-target-list b{font-size:9px}.automation-target-list small{font-size:8px}.automation-flow-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted)}.automation-flow-empty i{font-size:30px;color:#7f75ff;font-style:normal}.automation-flow-empty b{margin-top:9px;color:var(--txt)}.automation-flow-empty p{max-width:340px;margin:5px 0 0;font-size:11px;line-height:1.55}
.automation-canvas-lower{display:grid;grid-template-columns:1.25fr 1fr .72fr;gap:12px;margin-top:12px}.automation-mini-panel{min-width:0;padding:14px}.automation-mini-panel .panel-head{margin-bottom:10px}.text-action{border:0;background:transparent;color:#6594ff;font-size:10px}.text-action:hover{color:#9ebcff}.automation-preset-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.automation-preset-card{min-width:0;padding:0 0 9px;overflow:hidden;border:1px solid rgba(118,141,201,.13);border-radius:10px;background:rgba(7,15,29,.75);color:var(--txt);text-align:left}.automation-preset-card.active{border-color:#4f78ff;box-shadow:0 0 0 1px rgba(79,120,255,.24)}.automation-preset-card>span{height:48px;display:grid;place-items:center}.automation-preset-card>span i{font-style:normal;color:white;text-shadow:0 2px 12px #000}.automation-preset-card>b,.automation-preset-card>small{display:block;padding:0 8px}.automation-preset-card>b{margin-top:8px;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.automation-preset-card>small{margin-top:3px;color:var(--muted);font-size:8px}.automation-execution-strip{display:grid;gap:5px}.automation-execution-strip article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px;border-bottom:1px solid rgba(120,143,197,.1)}.automation-execution-strip i{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:rgba(39,201,128,.12);color:#4ed999;font-style:normal}.automation-execution-strip b,.automation-execution-strip small{display:block}.automation-execution-strip b{font-size:9px}.automation-execution-strip small,.automation-execution-strip time{color:var(--muted);font-size:8px}.automation-priority-strip{display:grid;gap:6px;margin-bottom:10px}.automation-priority-strip button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(119,143,198,.14);border-radius:9px;background:rgba(7,15,29,.65);color:var(--txt);text-align:left}.automation-priority-strip button>i{width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(100,128,205,.3);border-radius:6px;color:#b9c8ec;font-style:normal;font-size:9px}.automation-priority-strip b,.automation-priority-strip small{display:block}.automation-priority-strip b{font-size:9px}.automation-priority-strip small{margin-top:2px;color:var(--muted);font-size:8px}.automation-priority-strip em{color:#6f81ac;font-style:normal}.automation-compact-empty{grid-column:1/-1;padding:20px;text-align:center;color:var(--muted)}.automation-compact-empty b,.automation-compact-empty small{display:block}.automation-compact-empty b{color:var(--txt);font-size:10px}.automation-compact-empty small{margin-top:4px;font-size:8px}
.automation-inspector{position:sticky;top:10px;min-height:589px;padding:16px}.automation-inspector .panel-head h2{margin-top:4px}.automation-inspector-section{padding:14px 2px;border-top:1px solid rgba(119,143,198,.12)}.automation-inspector-section>span,.automation-inspector-section>b,.automation-inspector-section>small{display:block}.automation-inspector-section>span{color:#8ea1cf;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.automation-inspector-section>b{margin-top:6px;font-size:11px;line-height:1.4}.automation-inspector-section>small{margin-top:4px;color:var(--muted);font-size:9px;line-height:1.45}.automation-inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.automation-inspector-empty{display:grid;place-items:center;padding:55px 12px;text-align:center}.automation-inspector-empty i{font-size:30px;color:#7f75ff;font-style:normal}.automation-inspector-empty h2{margin:11px 0 3px}.automation-inspector-empty p{margin:0 0 16px;color:var(--muted);font-size:10px;line-height:1.55}
@media(max-width:1350px){.automation-canvas-layout{grid-template-columns:1fr}.automation-inspector{position:static;min-height:0}.automation-canvas-lower{grid-template-columns:1fr 1fr}.priority-panel{grid-column:1/-1}.automation-priority-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.automation-canvas-toolbar{align-items:stretch;flex-wrap:wrap}.automation-search{flex:1}.automation-canvas-toolbar select{margin-left:0;max-width:none;flex:1}.automation-canvas-lower{grid-template-columns:1fr}.priority-panel{grid-column:auto}.automation-primary-nav{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.automation-workspace-head{align-items:flex-start;flex-direction:column}.automation-primary-nav,.automation-activity-summary{grid-template-columns:1fr}.automation-primary-nav button{padding:10px 12px}}


/* ================= Rooms — the homeowner's screen ======================== */
/* The photo is what tells someone which room this is, so it gets the space.
   Name, state and the power button live together in one row at the bottom —
   the earlier version put the name bottom-left and the button top-right, which
   gave the card three anchors and no shared edge. */

#page-rooms .room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}

#page-rooms .room-tile {
  position: relative;
  aspect-ratio: 4 / 3;            /* a photograph's shape, not a text box's */
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: #11151F;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              box-shadow .18s ease, border-color .18s ease;
}
#page-rooms .room-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0,0,0,.40);
  border-color: rgba(255,255,255,.16);
}
.room-tile:focus-visible { outline: 2px solid #6C7BFF; outline-offset: 3px; }

#page-rooms .room-tile .rt-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.room-tile:hover .rt-bg { transform: scale(1.05); }

/* Weighted to the bottom third only, so the photo stays a photo. */
#page-rooms .room-tile .rt-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(8,11,19,0) 40%, rgba(8,11,19,.55) 72%, rgba(8,11,19,.92) 100%);
}

/* ------------------------------------------------------------ the one row -- */
#page-rooms .room-tile .rt-body {
  position: relative;
  left: auto; right: auto; bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px 17px;
}

/* min-width:0 lets a long room name ellipsis instead of shoving the button. */
.room-tile .rt-text { min-width: 0; }

#page-rooms .room-tile .rt-name {
  font-size: 20px; font-weight: 650; letter-spacing: -.015em;
  color: #fff; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
#page-rooms .room-tile .rt-state {
  margin-top: 3px; font-size: 13.5px; line-height: 1.3;
  color: rgba(255,255,255,.76);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#page-rooms .room-tile .rt-toggle {
  /* The earlier block pins this to the top-left corner absolutely. It has to be
     put back into normal flow explicitly, or it would keep floating there. */
  position: static;
  top: auto; left: auto; right: auto; margin: 0;
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease,
              transform .12s ease, box-shadow .16s ease;
}
#page-rooms .room-tile .rt-toggle:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.5);
}
#page-rooms .room-tile .rt-toggle:active { transform: scale(.94); }
#page-rooms .room-tile .rt-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* On is warm and unmistakable, and the whole card picks it up. */
#page-rooms .room-tile.is-on .rt-toggle {
  background: #FFB020; border-color: #FFC048; color: #2A1A02;
  box-shadow: 0 0 0 5px rgba(255,176,32,.20), 0 6px 18px rgba(255,176,32,.34);
}
#page-rooms .room-tile.is-on { border-color: rgba(255,176,32,.42); }
#page-rooms .room-tile.is-on .rt-scrim {
  background: linear-gradient(180deg,
    rgba(8,11,19,0) 38%, rgba(30,18,4,.52) 72%, rgba(24,14,2,.93) 100%);
}

/* Only ever shown when something is wrong, so it should read as a flag. */
#page-rooms .room-tile .rc-status {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(8,11,19,.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
#page-rooms .room-tile .rc-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFB020; flex: 0 0 auto;
}
.room-tile .rc-status.offline i { background: #FF6B6B; }

/* --------------------------------------------------------- setup section -- */
.rooms-advanced { margin-top: 24px; }
#page-rooms .rooms-advanced > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  color: #9AA3B2; font-size: 13.5px;
}
.rooms-advanced > summary::-webkit-details-marker { display: none; }
.rooms-advanced > summary:hover { color: #E6EAF2; border-color: rgba(255,255,255,.2); }
.rooms-advanced > summary::before { content: '⚙'; font-size: 14px; }
.rooms-advanced[open] > summary { margin-bottom: 16px; }

@media (max-width: 620px) {
  .room-grid { grid-template-columns: 1fr; gap: 16px; }
  .room-tile { aspect-ratio: 16 / 10; min-height: 172px; }
  .room-tile .rt-name { font-size: 19px; }
}

/* ================= One-screen room operations (build 83+) ===============
   The room is an operating surface, not a long settings document. Detailed
   commissioning remains available from the Room setup action in the header. */
@media (min-width: 981px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .main {
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 14px 22px;
    overflow: hidden;
  }
  .main > .topbar {
    height: 58px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    position: relative;
  }
  .main > .page.active {
    height: calc(100vh - 82px);
    min-height: 0;
    overflow: hidden;
  }
  #room-drawer .room-workspace.drawer {
    overflow: hidden;
  }
  #room-drawer .rd-page-head {
    height: 78px;
    min-height: 78px;
    padding: 10px 22px;
  }
  #room-drawer .rd-back {
    padding-bottom: 3px;
  }
  #room-drawer .rd-title-row h2 {
    font-size: 21px;
  }
  #room-drawer .rd-page-meta {
    margin-top: 5px;
  }
  #room-drawer .rd-page-grid {
    display: block;
    height: calc(100vh - 78px);
    padding: 8px 10px 10px;
  }
  #room-drawer .rd-primary {
    display: grid;
    grid-template-rows: clamp(190px, 27vh, 250px) 38px minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  #room-drawer .rd-right-rail,
  #room-drawer .rd-ambience {
    display: none !important;
  }
  #room-drawer .rd-hero {
    height: auto;
    min-height: 0;
    border-radius: 13px 13px 0 0;
  }
  #room-drawer .rd-master {
    left: 16px;
    top: 15px;
    width: 168px;
    padding: 12px;
  }
  #room-drawer .rd-master > b {
    font-size: 10px;
  }
  #room-drawer .rd-master-ring {
    width: 94px;
    height: 94px;
    margin: 7px auto 5px;
  }
  #room-drawer .rd-master-ring strong {
    font-size: 20px;
  }
  #room-drawer .rd-master > input[type=range] {
    width: 94px;
    height: 94px;
    left: 37px;
    top: 35px;
  }
  #room-drawer .rd-master-actions button {
    width: 29px;
    height: 29px;
    font-size: 15px;
  }
  #room-drawer .rd-tabs {
    position: relative;
    top: auto;
    height: 38px;
    padding: 0 8px;
    overflow: hidden;
  }
  #room-drawer .rd-tabs button {
    height: 38px;
    padding: 0 14px;
    font-size: 9px;
  }
  #room-drawer .rd-panel-area {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #room-drawer .rd-panel-area > [data-room-panel] {
    height: 100%;
    min-height: 0;
    padding: 10px;
    /* The workspace stays one screen tall, while long editors remain usable
       inside their panel instead of being clipped below the viewport. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(111, 103, 255, .65) transparent;
  }
  #room-drawer .rd-control-grid {
    grid-template-columns: minmax(270px, .9fr) minmax(390px, 1.25fr) minmax(270px, .9fr);
    gap: 10px;
  }
  #room-drawer .rd-control-grid > .drawer-sec {
    min-height: 0;
    overflow: hidden;
  }
  #room-drawer .rd-zone-list,
  #room-drawer .rd-sequence-list,
  #room-drawer .rd-control-groups,
  #room-drawer .rd-history,
  #room-drawer .rd-playlist {
    max-height: calc(100% - 40px);
    overflow: auto;
    scrollbar-width: thin;
  }
  #room-drawer .rd-effects-panel {
    overflow: auto;
    scrollbar-width: thin;
  }
  #room-drawer .rd-effects-panel .rd-seq-featured {
    margin-bottom: 8px;
  }
  #room-drawer .rd-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
  }
  #room-drawer .rd-overview-grid > .drawer-sec {
    min-height: 0;
    padding: 11px;
    overflow: auto;
    scrollbar-width: thin;
  }
  #room-drawer #rd-music-sec {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    gap: 7px 14px;
    overflow: hidden;
  }
  #room-drawer #rd-music-sec > .drawer-sec-head {
    grid-column: 1 / -1;
  }
  #room-drawer #rd-music-sec > .rd-player {
    grid-column: 1;
    grid-row: 2 / 7;
    min-height: 0;
    margin: 0;
    padding: 12px;
  }
  #room-drawer #rd-music-sec > .rd-music-actions,
  #room-drawer #rd-music-sec > .rd-music-config,
  #room-drawer #rd-music-sec > .field-label,
  #room-drawer #rd-music-sec > input[type=range],
  #room-drawer #rd-music-sec > .rd-targets,
  #room-drawer #rd-music-sec > .rd-playlist {
    grid-column: 2;
    margin: 0;
  }
  #room-drawer .rd-player-visual {
    min-height: 76px;
  }
  #room-drawer .rd-waveform {
    height: 66px;
  }
  #room-drawer .rd-transport-controls {
    margin: 6px 0;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  #room-drawer .rd-control-grid {
    grid-template-columns: minmax(250px, .9fr) minmax(370px, 1.2fr);
    overflow: auto;
    scrollbar-width: thin;
  }
  #room-drawer .rd-effects-panel {
    display: block;
    grid-column: 1 / -1;
  }
}

/* ================= Fixed-canvas UI refinement (build 84+) ===============
   Dashboard, Rooms and Room operation are composed to the available screen.
   Detailed editors remain in dialogs/dedicated pages instead of extending the
   main canvas vertically. */
@media (min-width: 981px) {
  .main:has(#page-dashboard.active),
  .main:has(#page-rooms.active) {
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 14px 22px;
    overflow: hidden;
  }
  .main:has(#page-dashboard.active) .topbar,
  .main:has(#page-rooms.active) .topbar {
    height: 58px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    position: relative;
  }

  /* Dashboard keeps only summary information. Effects and scene editing have
     dedicated destinations and no longer push the overview below the fold. */
  #page-dashboard.active {
    display: grid;
    grid-template-rows: clamp(132px, 20vh, 190px) 92px minmax(0, 1fr);
    gap: 10px;
    height: calc(100vh - 82px);
    min-height: 0;
    overflow: hidden;
  }
  #page-dashboard .hero {
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 20px 28px;
    border-radius: 16px;
  }
  #page-dashboard .hero h1 {
    font-size: clamp(28px, 3vw, 42px);
  }
  #page-dashboard .hero p {
    margin-top: 4px;
    font-size: 12px;
  }
  #page-dashboard .stat-grid {
    height: 92px;
    gap: 10px;
    margin: 0;
  }
  #page-dashboard .stat-card {
    min-height: 0;
    padding: 10px 13px;
    gap: 3px;
    border-radius: 13px;
  }
  #page-dashboard .stat-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 12px;
  }
  #page-dashboard .stat-label { font-size: 8px; }
  #page-dashboard .stat-value { font-size: 18px; }
  #page-dashboard .stat-sub,
  #page-dashboard .stat-delta { font-size: 8px; }
  #page-dashboard > .panel:has(#dash-room-grid) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    margin: 0;
    padding: 12px;
    border-radius: 15px;
    overflow: hidden;
  }
  #page-dashboard > .panel:has(#dash-room-grid) .panel-head {
    margin-bottom: 8px;
  }
  #page-dashboard > .dash-grid,
  #page-dashboard > .panel:last-child {
    display: none;
  }
  #dash-room-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    overflow: hidden;
  }
  #dash-room-grid .room-tile {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
  }
  #dash-room-grid .room-tile .rt-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
  }
  #dash-room-grid .room-tile .rt-text { min-width: 0; }
  #dash-room-grid .room-tile .rt-name {
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #dash-room-grid .room-tile .rt-state {
    margin-top: 2px;
    color: rgba(255,255,255,.72);
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #dash-room-grid .room-tile .rt-toggle {
    position: static;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(7,12,24,.68);
    font-size: 14px;
  }
  #dash-room-grid .room-tile .rc-status {
    top: 9px;
    left: 9px;
    right: auto;
    width: max-content;
    max-width: calc(100% - 18px);
    padding: 4px 7px;
    font-size: 8px;
  }

  /* Rooms inventory is one screen: three columns and two rows at the common
     six-room installation size. Additional rooms remain reachable by filter
     and search without changing the card geometry. */
  #page-rooms.active {
    height: calc(100vh - 82px);
    min-height: 0;
    overflow: hidden;
  }
  #page-rooms > .rooms-master-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 12px;
    overflow: hidden;
  }
  #page-rooms .rooms-command-bar {
    display: grid;
    grid-template-columns: auto minmax(330px,1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(112,137,218,.12);
    border-radius: 13px;
    background: rgba(5,10,23,.52);
  }
  #page-rooms .rooms-overview-head,
  #page-rooms .rooms-toolbar,
  #page-rooms .room-summary {
    margin: 0;
  }
  #page-rooms .rooms-overview-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.05;
  }
  #page-rooms .rooms-overview-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 9px;
    white-space: nowrap;
  }
  #page-rooms .chip-row {
    flex-wrap: nowrap;
    gap: 5px;
  }
  #page-rooms .chip {
    min-height: 32px;
    padding: 0 10px;
    font-size: 9px;
  }
  #page-rooms .rooms-tools {
    display: grid;
    grid-template-columns: minmax(150px,1fr) auto auto auto auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  #page-rooms .room-search {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 11px;
    font-size: 9px;
  }
  #page-rooms .view-toggle,
  #page-rooms .view-toggle .vt,
  #page-rooms #btn-add-room {
    height: 34px;
  }
  #page-rooms .room-summary {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    white-space: nowrap;
  }
  #page-rooms .room-summary .rs-item {
    padding: 5px 7px;
    font-size: 8px;
  }
  #page-rooms .rooms-advanced {
    display: none;
  }
  #page-rooms #rooms-by-floor {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }
  #page-rooms .rooms-page-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
  }
  #page-rooms .rooms-page-controls[hidden] { display: none; }
  #page-rooms .rooms-page-controls button {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(112,137,218,.17);
    border-radius: 8px;
    background: rgba(12,25,50,.9);
    color: #9eadc9;
    cursor: pointer;
  }
  #page-rooms .rooms-page-controls button.active {
    border-color: #7069f1;
    background: linear-gradient(135deg,rgba(69,91,230,.35),rgba(139,60,225,.24));
    color: #fff;
  }
  #page-rooms .room-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    height: 100%;
    min-height: 0;
  }
  #page-rooms .room-tile {
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
    border-radius: 13px;
  }
  #page-rooms .room-tile .rt-body {
    display: block;
    padding: 13px 12px;
  }
  #page-rooms .room-tile .rt-name { font-size: 15px; }
  #page-rooms .room-tile .rt-state { font-size: 10px; }
  #page-rooms .room-tile .rt-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    bottom: auto;
    z-index: 4;
    width: 34px;
    height: 34px;
    font-size: 14px;
    background: rgba(6,11,23,.72);
  }
  #page-rooms .room-tile .rc-status {
    left: 10px;
    right: auto;
    width: max-content;
    max-width: calc(100% - 62px);
  }
  #page-rooms .room-card:after {
    display: none;
    content: none;
  }

  /* Every live RGB row has exactly five controls. No implicit grid column is
     allowed, so the power control cannot wrap onto names or image content. */
  #room-drawer .rd-zone-list .rd-dev {
    padding: 10px;
    border-radius: 10px;
  }
  #room-drawer .rd-zone-list .rd-dev-ctl {
    display: grid;
    grid-template-columns: 36px minmax(96px, 1.1fr) auto minmax(82px, 1fr) 34px !important;
    align-items: center;
    gap: 7px;
    width: 100%;
  }
  #room-drawer .rd-dev-color {
    width: 36px !important;
    height: 32px !important;
  }
  #room-drawer .rd-dev-sequence {
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 9px !important;
  }
  #room-drawer .rd-dev-level {
    width: 100%;
    min-width: 0;
  }
  #room-drawer .rd-dev-power {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(129,148,210,.24);
    border-radius: 50%;
    background: #111c35;
    color: #8190ad;
    cursor: pointer;
    transition: .16s ease;
  }
  #room-drawer .rd-dev-power:hover {
    color: #fff;
    border-color: rgba(126,110,255,.58);
    background: #172446;
  }
  #room-drawer .rd-dev-power.on {
    color: #fff;
    border-color: #7466ff;
    background: linear-gradient(145deg,#4f7fff,#8d52ef);
    box-shadow: 0 0 0 3px rgba(99,91,255,.12),0 7px 16px rgba(68,69,210,.24);
  }
  #room-drawer .rd-dev-ctl > .danger {
    display: none;
  }

  /* Primary pages share one visual rhythm. Their operational summaries stay
     on the canvas; deeper configuration opens from their existing tabs and
     dialogs instead of extending the document. */
  #page-looks.active {
    overflow: hidden;
  }
  #page-looks .experience-hero {
    min-height: 0;
    margin-bottom: 10px;
    padding: 18px 22px;
  }
  #page-looks .experience-hero h2 {
    margin: 4px 0 6px;
    font-size: clamp(23px,2vw,31px);
  }
  #page-looks .experience-hero p {
    font-size: 11px;
    line-height: 1.45;
  }
  #page-looks .experience-quick-start,
  #page-looks .experience-advanced,
  #page-looks .looks-toolbar {
    margin-bottom: 10px;
  }

  #page-pool.active {
    display: grid;
    grid-template-rows: 148px 44px 40px minmax(0,1fr);
    gap: 8px;
  }
  #page-pool .pool-visual-hero {
    min-height: 0;
    height: 148px;
    margin: 0;
    padding: 16px 22px;
    border-radius: 16px;
  }
  #page-pool .pool-visual-hero h2 {
    margin: 4px 0;
    font-size: 24px;
  }
  #page-pool .pool-visual-hero p { margin: 0; }
  #page-pool .pool-hero-actions {
    min-width: 280px;
    padding: 9px;
    gap: 5px;
  }
  #page-pool .pool-hero-actions select { height: 32px; }
  #page-pool .pool-room-context { margin: 0; min-height: 0; }
  #page-pool .pool-asset-strip,
  #page-pool .pool-linked-head,
  #page-pool .pool-room-empty {
    height: 44px;
    padding: 7px 12px;
  }
  #page-pool .pool-workspace-tabs {
    height: 40px;
    margin: 0;
    padding: 4px;
  }
  #page-pool .pool-workspace-tabs button { padding: 6px 11px; }
  #page-pool .pool-workspace-content {
    min-height: 0;
    height: 100%;
    gap: 8px;
    overflow: hidden;
  }
  #page-pool .pool-home-status { gap: 8px; }
  #page-pool .pool-home-status > article { padding: 9px 11px; }
  #page-pool .pool-dashboard-grid { gap: 8px; min-height: 0; }
  #page-pool .pool-workspace-content .panel { padding: 12px; min-height: 0; }
  #page-pool .pool-metric-grid { gap: 7px; }
  #page-pool .pool-metric { padding: 9px; }

  #page-security.active {
    display: grid;
    grid-template-rows: 42px minmax(0,1fr);
    gap: 10px;
  }
  #page-security .security-workspace-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 5px;
    border: 1px solid rgba(112,137,218,.13);
    border-radius: 12px;
    background: rgba(5,10,23,.7);
  }
  #page-security .security-workspace-tabs button {
    height: 30px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8f9db8;
    font-size: 9px;
    cursor: pointer;
  }
  #page-security .security-workspace-tabs button.active {
    border-color: rgba(98,118,255,.35);
    background: linear-gradient(135deg,rgba(49,89,211,.34),rgba(121,53,211,.24));
    color: #fff;
  }
  #page-security > [data-security-panel] { display: none; }
  #page-security > [data-security-panel].active { display: block; height: 100%; }
  #page-security > .panel {
    min-height: 0;
    margin: 0;
    padding: 13px 15px;
    overflow: hidden;
  }
  #page-security .security-hero-panel { min-height: 0; }
  #page-security .security-hero-panel .panel-head { margin-bottom: 6px; }
  #page-security .gate-panel { height: calc(100% - 28px); gap: 16px; flex-wrap: nowrap; }
  #page-security .gate-ring { width: 112px; height: 112px; }
  #page-security .gate-stage { min-width: 260px; height: 100%; }
  #page-security .gate-art { width: 100%; height: 100%; object-fit: cover; }
  #page-security .cam-grid {
    height: calc(100% - 31px);
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
  }
  #page-security .cam-tile { height: 100%; aspect-ratio: auto; }

  #page-insights.active {
    display: grid;
    grid-template-rows: 122px minmax(210px,1fr) minmax(145px,.65fr);
    gap: 10px;
  }
  #page-insights > .stat-grid,
  #page-insights > .panel { min-height: 0; margin: 0; }
  #page-insights > .panel { padding: 14px; overflow: hidden; }
  #page-insights .ins-canvas { height: calc(100% - 32px); }

  #page-system.active {
    display: grid;
    place-items: start stretch;
    background: radial-gradient(circle at 20% 5%,rgba(69,93,255,.08),transparent 32%),
                radial-gradient(circle at 86% 18%,rgba(205,61,255,.06),transparent 30%);
  }
  #page-system .rooms-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
  }
  #page-system .sys-tile {
    min-height: 150px;
    padding: 20px;
  }
  #page-system .sys-tile i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border: 1px solid rgba(115,126,255,.2);
    border-radius: 13px;
    background: linear-gradient(145deg,rgba(71,102,255,.15),rgba(178,61,236,.1));
    color: #aeb9ff;
    box-shadow: 0 10px 26px rgba(39,37,142,.12);
  }
}

@media (min-width: 981px) and (max-width: 1450px) {
  #page-rooms .rooms-command-bar {
    grid-template-columns: auto minmax(0,1fr);
  }
  #page-rooms .rooms-overview-head { display: none; }
  #page-rooms .room-summary { display: none; }
}

/* Reachable inline editor for adding a room feature without browser prompts. */
.mre-custom-feature-editor {
  display: grid;
  grid-template-columns: minmax(180px,1fr) 130px auto auto;
  gap: 7px;
  align-items: center;
  margin: 9px 0 10px;
  padding: 9px;
  border: 1px solid rgba(112,137,218,.16);
  border-radius: 10px;
  background: rgba(8,18,37,.82);
}
.mre-custom-feature-editor[hidden] { display: none; }
.mre-custom-feature-editor input,
.mre-custom-feature-editor select { min-width: 0; height: 34px; }

@media (max-width: 760px) {
  .mre-custom-feature-editor { grid-template-columns: 1fr 1fr; }
  .mre-custom-feature-editor input { grid-column: 1 / -1; }
}

.pra-create {
  display: grid;
  grid-template-columns: minmax(130px,.8fr) minmax(190px,1.2fr) minmax(220px,1.4fr) 160px auto auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  padding: 11px;
  border: 1px solid rgba(112,137,218,.16);
  border-radius: 11px;
  background: rgba(8,18,37,.82);
}
.pra-create[hidden] { display: none; }
.pra-create input,.pra-create select { min-width: 0; height: 36px; }
.access-choice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
.access-choice-grid label,
.pra-access-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(112,137,218,.13);
  border-radius: 8px;
  background: rgba(12,25,50,.62);
  color: #a8b5cd;
  font-size: 9px;
}
.pra-access-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px;margin-top:8px; }

@media (min-width: 981px) {
  body.single-room-scope #page-dashboard.active {
    grid-template-rows: minmax(0,1fr);
  }
  body.single-room-scope #page-dashboard > .hero,
  body.single-room-scope #page-dashboard > .stat-grid { display:none; }
  body.single-room-scope #page-dashboard > .panel:has(#dash-room-grid) { padding:14px; }
  body.single-room-scope #page-dashboard > .panel:has(#dash-room-grid) .panel-head a { display:none; }
  body.single-room-scope #dash-room-grid {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr);
  }
  body.single-room-scope #dash-room-grid .room-tile .rt-name { font-size:22px; }
  body.single-room-scope #dash-room-grid .room-tile .rt-state { font-size:11px; }
}

@media (max-width: 1050px) {
  .pra-create { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 981px) and (max-width: 1240px) {
  #page-dashboard.active {
    grid-template-rows: 126px 86px minmax(0, 1fr);
  }
  #page-dashboard .stat-grid { height: 86px; }
  #room-drawer .rd-zone-list .rd-dev-ctl {
    grid-template-columns: 34px minmax(74px, 1fr) 34px !important;
  }
  #room-drawer .rd-zone-list .rd-dev-sequence {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  #room-drawer .rd-zone-list .rd-dev-level {
    grid-column: 3;
    grid-row: 2;
  }
  #room-drawer .rd-zone-list .rd-dev-power {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ================= Natural document scrolling (build 85+) ==============
   Product pages may grow with the customer's rooms, fixtures and sensors.
   The desktop shell therefore scrolls as one document; no information is
   hidden merely to make a page fit into a single viewport. */
@media (min-width: 981px) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
  }

  .shell {
    min-height: 100vh;
    align-items: start;
  }

  .main,
  .main:has(#page-dashboard.active),
  .main:has(#page-rooms.active) {
    width: 100%;
    max-width: none;
    height: auto !important;
    min-height: 100vh;
    padding: 18px 24px 70px;
    overflow: visible !important;
  }

  .main > .topbar,
  .main:has(#page-dashboard.active) .topbar,
  .main:has(#page-rooms.active) .topbar {
    height: auto;
    min-height: 58px;
    margin: 0 0 14px;
    padding: 0 0 12px;
  }

  .main > .page.active,
  #page-dashboard.active,
  #page-rooms.active,
  #page-looks.active,
  #page-pool.active,
  #page-security.active,
  #page-insights.active,
  #page-system.active {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
  }

  /* Dashboard: restore the complete overview and let room cards wrap. */
  #page-dashboard.active {
    display: block;
  }
  #page-dashboard .hero {
    min-height: 224px;
    height: auto;
    margin-bottom: 18px;
    padding: 30px 34px;
  }
  #page-dashboard .stat-grid {
    height: auto;
    margin-bottom: 18px;
  }
  #page-dashboard > .panel:has(#dash-room-grid) {
    display: block;
    height: auto;
    margin-bottom: 18px;
    overflow: visible;
  }
  #page-dashboard > .dash-grid,
  #page-dashboard > .panel:last-child {
    display: grid;
  }
  #page-dashboard > .panel:last-child {
    display: block;
  }
  #dash-room-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
    overflow: visible;
  }
  #dash-room-grid .room-tile {
    height: 170px;
    min-height: 170px;
  }

  /* Rooms: show the full inventory, guidance and commissioning details. */
  #page-rooms > .rooms-master-panel {
    display: block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 18px !important;
    overflow: visible;
  }
  #page-rooms .rooms-overview-head {
    display: flex !important;
  }
  #page-rooms .room-summary {
    display: flex !important;
    flex-wrap: wrap;
  }
  #page-rooms .rooms-advanced {
    display: block;
  }
  #page-rooms #rooms-by-floor {
    display: block;
    height: auto;
    overflow: visible;
  }
  #page-rooms .rooms-page-controls {
    display: none !important;
  }
  #page-rooms .room-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    height: auto;
    min-height: 0;
  }
  #page-rooms .room-tile {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: auto;
    min-height: 190px;
  }

  /* Operational pages grow naturally instead of clipping their panels. */
  #page-pool.active,
  #page-security.active,
  #page-insights.active {
    display: block;
  }
  #page-pool .pool-visual-hero {
    height: auto;
    min-height: 220px;
    margin-bottom: 14px;
  }
  #page-pool .pool-room-context,
  #page-pool .pool-asset-strip,
  #page-pool .pool-linked-head,
  #page-pool .pool-room-empty,
  #page-pool .pool-workspace-tabs,
  #page-pool .pool-workspace-content {
    height: auto;
    min-height: 0;
  }
  #page-pool .pool-workspace-content {
    overflow: visible;
  }
  #page-security .security-workspace-tabs {
    margin-bottom: 12px;
  }
  #page-security > [data-security-panel].active,
  #page-security > .panel,
  #page-security .gate-panel,
  #page-security .gate-stage,
  #page-security .cam-grid,
  #page-security .cam-tile {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #page-security > .panel {
    margin-bottom: 14px;
  }
  #page-security .gate-stage {
    min-height: 210px;
  }
  #page-security .cam-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  #page-security .cam-tile {
    aspect-ratio: 16 / 10;
  }
  #page-insights > .stat-grid,
  #page-insights > .panel {
    height: auto;
    min-height: 0;
    margin-bottom: 14px;
    overflow: visible;
  }
  #page-insights .ins-canvas {
    height: 300px;
  }

  /* A room remains a full-screen overlay, but the overlay itself scrolls. */
  #room-drawer .room-workspace.drawer {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #room-drawer .rd-page-head {
    height: auto;
    min-height: 78px;
  }
  #room-drawer .rd-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    height: auto;
    min-height: 0;
    padding: 8px 12px 26px;
  }
  #room-drawer .rd-primary {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  #room-drawer .rd-right-rail {
    display: grid !important;
  }
  #room-drawer .rd-ambience {
    display: block !important;
  }
  #room-drawer .rd-hero {
    height: clamp(320px, 45vh, 470px);
    min-height: 320px;
  }
  #room-drawer .rd-tabs {
    height: auto;
    min-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #room-drawer .rd-panel-area,
  #room-drawer .rd-panel-area > [data-room-panel] {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #room-drawer .rd-panel-area > [data-room-panel] {
    padding: 12px;
  }
  #room-drawer .rd-control-grid > .drawer-sec,
  #room-drawer .rd-overview-grid,
  #room-drawer .rd-overview-grid > .drawer-sec,
  #room-drawer .rd-effects-panel,
  #room-drawer #rd-music-sec {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #room-drawer .rd-zone-list,
  #room-drawer .rd-sequence-list,
  #room-drawer .rd-control-groups,
  #room-drawer .rd-history,
  #room-drawer .rd-playlist {
    max-height: none;
    overflow: visible;
  }
  #room-drawer .rd-overview-grid {
    grid-auto-rows: auto;
  }
  #room-drawer #rd-music-sec {
    display: block;
  }
  #room-drawer #rd-music-sec > * {
    margin-top: 9px;
  }

  /* Long commissioning editors use the viewport safely without cropping. */
  .effect-library-modal,
  .room-equipment-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}

@media (min-width: 981px) and (max-width: 1400px) {
  #room-drawer .rd-page-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

/* ================= Fitting lifecycle controls (build 86+) ============== */
.fixture-manage-modal {
  width: min(720px, 94vw);
  max-width: 720px;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
}
.rfm-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(119, 143, 207, .17);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(18, 31, 57, .92), rgba(8, 16, 32, .94));
}
.rfm-summary > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(74, 116, 255, .22), rgba(194, 65, 232, .16));
  font-size: 22px;
}
.rfm-summary b,
.rfm-summary small { display: block; }
.rfm-summary small { margin-top: 4px; color: var(--muted); }
.rfm-summary em { color: #77dbad; font-size: 9px; font-style: normal; text-transform: uppercase; }
.rfm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.rfm-grid label,
.rfm-field { display: grid; gap: 7px; color: #9eacc6; font-size: 10px; }
.rfm-field { margin-top: 12px; }
.rfm-grid input,
.rfm-grid select,
.rfm-field select { width: 100%; }
.rfm-wiring,
.rfm-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(116, 139, 204, .16);
  border-radius: 13px;
  background: rgba(7, 15, 30, .68);
}
.rfm-wiring > i {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(90deg, #55202b, #17452f, #173466);
  color: #fff;
  font: 700 10px var(--mono);
}
.rfm-wiring b,
.rfm-wiring small,
.rfm-note b,
.rfm-note span { display: block; }
.rfm-wiring small,
.rfm-note span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.rfm-note { align-items: flex-start; border-color: rgba(104, 90, 255, .24); background: rgba(81, 64, 193, .09); }
.rfm-note b { white-space: nowrap; color: #b8adff; }
.rd-dev-manage { color: #bac5ff !important; border-color: rgba(112, 106, 255, .28) !important; }

@media (min-width: 981px) {
  #room-drawer .rd-zone-list .zone-device .rd-dev-ctl {
    grid-template-columns: 36px minmax(88px, 1fr) auto minmax(74px, 1fr) 34px auto !important;
  }
}
@media (max-width: 620px) {
  .rfm-grid { grid-template-columns: 1fr; }
  .rfm-summary { grid-template-columns: 42px minmax(0, 1fr); }
  .rfm-summary em { grid-column: 2; }
}

/* ================= Unified Light Designer + lifecycle shell (build 110) = */
.rd-control-grid>.rd-light-designer{grid-column:1/-1!important;min-width:0;padding:16px!important;border:1px solid rgba(112,137,218,.15)!important;border-radius:15px!important;background:linear-gradient(145deg,rgba(9,21,43,.96),rgba(7,14,31,.97))!important}
.rd-designer-head{align-items:center!important;margin-bottom:12px!important}.rd-designer-head h3{margin:2px 0 3px!important;font-size:15px!important}.rd-designer-head .eyebrow{margin:0 0 3px;font-size:7px}.rd-designer-head .hint{font-size:8px!important}
.rd-designer-targets{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:12px;margin:0 0 12px;padding:10px 11px;border:1px solid rgba(113,139,201,.12);border-radius:11px;background:rgba(9,19,39,.72)}.rd-designer-targets>div:first-child span,.rd-designer-card-head span{display:block;color:#eaf0ff;font-size:9px;font-weight:700}.rd-designer-targets>div:first-child small,.rd-designer-card-head small{display:block;margin-top:2px;color:#7989a7;font-size:6.5px;line-height:1.35}
.rd-designer-targets .rd-seq-targets{margin:0!important;padding:0!important;border:0!important;background:transparent!important}.rd-designer-targets .rd-seq-targets>button,.rd-designer-targets .rd-seq-targets>label{min-height:34px!important;padding:6px 8px!important}
.rd-designer-workspace{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(340px,1.1fr);gap:10px;margin-bottom:10px}.rd-designer-preview-card,.rd-designer-quick{min-width:0;padding:11px;border:1px solid rgba(112,139,204,.13);border-radius:12px;background:linear-gradient(145deg,rgba(13,27,54,.9),rgba(8,17,35,.92))}.rd-designer-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}.rd-designer-card-head em{padding:4px 7px;border:1px solid rgba(104,117,255,.23);border-radius:999px;background:rgba(79,76,225,.12);color:#aeb8ff;font-size:6.5px;font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.rd-designer-preview{--preview-color:#ffffff;--preview-speed:1400ms;position:relative;height:126px;overflow:hidden;border:1px solid rgba(119,143,207,.13);border-radius:10px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--preview-color) 22%,transparent),transparent 62%),linear-gradient(180deg,#081225,#050b17)}.rd-preview-ambient{position:absolute;inset:0;background:linear-gradient(110deg,transparent,color-mix(in srgb,var(--preview-color) 12%,transparent),transparent);animation:designerSweep var(--preview-speed) ease-in-out infinite}.rd-preview-lights{position:absolute;inset:22px 15px 28px;display:flex;align-items:center;justify-content:center;gap:18px}.rd-preview-light{display:grid;justify-items:center;gap:8px;min-width:42px}.rd-preview-light i{display:block;width:26px;height:26px;border:3px solid rgba(255,255,255,.75);border-radius:50%;background:var(--preview-color);transition:background .2s,box-shadow .2s;animation-delay:var(--delay)}.rd-preview-light small{max-width:74px;color:#9ba9c2;font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rd-preview-wave{position:absolute;left:18px;right:18px;bottom:9px;height:15px;display:flex;align-items:center;justify-content:center;gap:3px}.rd-preview-wave i{width:3px;height:calc(var(--bar)*2px + 3px);border-radius:3px;background:var(--preview-color);box-shadow:0 0 7px color-mix(in srgb,var(--preview-color) 50%,transparent);opacity:.72;animation:designerBars var(--preview-speed) ease-in-out infinite alternate}.rd-designer-preview-card>p{margin:7px 2px 0;color:#71819f;font-size:6.5px;line-height:1.4}
.rd-designer-preview[data-effect=breathe] .rd-preview-light i{animation:designerBreathe var(--preview-speed) ease-in-out infinite}.rd-designer-preview[data-effect=pulse] .rd-preview-light i{animation:designerPulse var(--preview-speed) ease-out infinite}.rd-designer-preview[data-effect=twinkle] .rd-preview-light i{animation:designerTwinkle var(--preview-speed) steps(2) infinite}.rd-designer-preview[data-effect=strobe] .rd-preview-light i{animation:designerStrobe var(--preview-speed) steps(2) infinite}.rd-designer-preview[data-effect=chase] .rd-preview-light i{animation:designerChase var(--preview-speed) ease-in-out infinite;animation-delay:var(--delay)}.rd-designer-preview[data-effect=rainbow]{animation:designerRainbow var(--preview-speed) linear infinite}
@keyframes designerSweep{50%{transform:translateX(24%)}}@keyframes designerBars{to{transform:scaleY(.35);opacity:.35}}@keyframes designerBreathe{50%{transform:scale(.65);opacity:.45;box-shadow:0 0 8px var(--preview-color)!important}}@keyframes designerPulse{15%{transform:scale(1.25)}65%{transform:scale(.8);opacity:.55}}@keyframes designerTwinkle{50%{opacity:.25;transform:scale(.72)}}@keyframes designerStrobe{50%{opacity:.05}}@keyframes designerChase{50%{transform:translateY(-8px);opacity:.45}}@keyframes designerRainbow{to{filter:hue-rotate(360deg)}}
.rd-designer-fields{display:grid;grid-template-columns:64px minmax(100px,.7fr) minmax(120px,1fr);gap:8px;align-items:end}.rd-designer-fields label{display:grid;gap:5px;color:#8e9db9;font-size:6.5px}.rd-designer-fields label>span{display:flex;justify-content:space-between;gap:4px;text-transform:uppercase;letter-spacing:.06em}.rd-designer-fields label>span b{color:#a8b6d0;font-weight:600}.rd-designer-fields input,.rd-designer-fields select{height:34px!important;min-width:0;font-size:8px!important}.rd-designer-fields input[type=color]{width:100%;padding:3px!important}.rd-designer-swatches{display:flex!important;gap:5px;margin:9px 0!important}.rd-designer-swatches button{width:22px!important;height:22px!important;border:2px solid rgba(255,255,255,.16)!important}.rd-designer-quick-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}.rd-designer-quick-actions .btn{min-height:31px;padding:6px 10px;font-size:7.5px}
.rd-designer-library{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);gap:9px;align-items:start}.rd-designer-library .rd-seq-featured{margin:0}.rd-designer-library .rd-sequence-list{margin:0!important;max-height:104px;overflow:auto!important;display:grid!important}.rd-designer-library .rd-sequence-list .rd-scene{min-width:0!important}
.rd-sequence-advanced{margin-top:10px;border:1px solid rgba(112,138,202,.13);border-radius:11px;background:rgba(8,17,35,.72)}.rd-sequence-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;cursor:pointer;list-style:none}.rd-sequence-advanced>summary::-webkit-details-marker{display:none}.rd-sequence-advanced>summary span{display:grid;gap:2px}.rd-sequence-advanced>summary b{font-size:8.5px}.rd-sequence-advanced>summary small{color:#7787a5;font-size:6.5px}.rd-sequence-advanced>summary em{color:#9daaff;font-size:7px;font-style:normal}.rd-sequence-advanced[open]>summary{border-bottom:1px solid rgba(112,138,202,.1)}.rd-sequence-advanced>.rd-sequence-builder-head,.rd-sequence-advanced>.rd-seq-frames,.rd-sequence-advanced>.rd-sequence-actions{margin-left:10px;margin-right:10px}.rd-sequence-advanced>.rd-sequence-actions{margin-bottom:10px}
#room-drawer .rd-zone-list .zone-device .rd-dev-ctl{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:flex-end;gap:7px}.rd-dev-sequence{color:#b8c2ff!important;border-color:rgba(110,105,255,.3)!important;background:rgba(78,74,214,.1)!important}

/* Add, Manage and Resume use one product shell. */
.modal.wide.room-add-modal,.modal.wide.commissioning-modal,.modal.wide.fixture-manage-modal{width:min(1100px,calc(100vw - 32px));max-width:1100px;height:min(720px,calc(100dvh - 32px));max-height:none;overflow:hidden;background:linear-gradient(145deg,#08111f 0%,#0b1424 60%,#11122a 100%)}
.modal.wide.fixture-manage-modal{display:grid;grid-template-rows:auto minmax(0,1fr)}.fixture-manage-modal>#rfm-body{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.rfm-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px}.rfm-layout>main,.rfm-layout>aside{min-width:0;min-height:0;overflow-y:auto;padding:2px}.rfm-layout>aside{padding:16px;border:1px solid rgba(117,143,205,.14);border-radius:14px;background:rgba(7,15,31,.66)}.fixture-manage-modal .modal-foot{margin:14px 0 0;padding:13px 0 0;border-top:1px solid rgba(119,144,204,.13)}
.fixture-manage-modal{--setup-title:20px;--setup-section:16px;--setup-body:12px;--setup-label:11px;--setup-meta:10px;font-size:var(--setup-body);line-height:1.5}.fixture-manage-modal>.modal-head{min-height:78px;margin:0 0 14px;padding:0 0 14px;align-items:flex-start;border-bottom:1px solid rgba(126,150,197,.14)}.fixture-manage-modal>.modal-head h2{margin:3px 0 4px;font-size:var(--setup-title);line-height:1.2}.fixture-manage-modal>.modal-head p{margin:0;color:#8796b2;font-size:var(--setup-body)}.fixture-manage-modal .eyebrow{margin:0 0 5px;font-size:var(--setup-meta)}.fixture-manage-modal label{font-size:var(--setup-label);font-weight:650}.fixture-manage-modal input,.fixture-manage-modal select,.fixture-manage-modal .btn{font-size:var(--setup-body)}.fixture-manage-modal input,.fixture-manage-modal select{min-height:40px;padding:9px 11px}.fixture-manage-modal .btn{min-height:38px;padding:9px 14px}.fixture-manage-modal .rfm-grid label,.fixture-manage-modal .rfm-field{font-size:var(--setup-label)}.fixture-manage-modal .rfm-summary small,.fixture-manage-modal .rfm-wiring small,.fixture-manage-modal p{font-size:var(--setup-meta);line-height:1.5}.fixture-manage-modal .rfm-summary em{font-size:var(--setup-meta)}
.raf-more,.rfm-more,.ce-history-disclosure,.ce-technical{margin-top:12px;border:1px solid rgba(117,141,199,.13);border-radius:10px;background:rgba(10,21,42,.72)}.raf-more>summary,.rfm-more>summary,.ce-history-disclosure>summary,.ce-technical>summary{padding:9px 10px;color:#a7b5ce;font-size:10px;font-weight:650;cursor:pointer}.raf-more[open]>summary,.rfm-more[open]>summary,.ce-history-disclosure[open]>summary,.ce-technical[open]>summary{border-bottom:1px solid rgba(117,141,199,.1)}.raf-more ol{margin:10px 12px 12px!important}.rfm-more p,.ce-history-disclosure .ce-history,.ce-technical dl{margin:0!important;padding:10px}.ce-history-disclosure{margin-bottom:10px}.ce-history-disclosure .ce-history>div:first-child{border-top:0}.ce-technical dl>div:first-child{border-top:0}

@media(max-width:900px){.rd-designer-workspace,.rd-designer-library{grid-template-columns:1fr}.rd-designer-targets{grid-template-columns:1fr}.rfm-layout{grid-template-columns:1fr;overflow-y:auto}.rfm-layout>main,.rfm-layout>aside{overflow:visible}.modal.wide.room-add-modal,.modal.wide.commissioning-modal,.modal.wide.fixture-manage-modal{width:calc(100vw - 20px);height:calc(100dvh - 20px)}}
@media(max-width:620px){.rd-designer-fields{grid-template-columns:64px 1fr}.rd-designer-fields label:last-child{grid-column:1/-1}.rd-designer-quick-actions{flex-direction:column}.rd-designer-quick-actions .btn{width:100%}.rd-designer-preview{height:112px}.rfm-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rd-designer-preview *{animation:none!important}}

/* ================= Readable product typography + sequential Light Designer (build 111) = */
:root{
  --type-meta:.75rem;
  --type-label:.8125rem;
  --type-body:.875rem;
  --type-control:.875rem;
  --type-section:1.0625rem;
  --type-page:1.5rem;
  --type-leading:1.5;
}
html{font-size:16px}
body{font-size:var(--type-body);line-height:var(--type-leading)}
button,input,select,textarea{font-size:var(--type-control)!important;line-height:1.35}
.sidebar .nav-item,.room-workspace .rd-tabs button{font-size:var(--type-label)!important}
#page-title,.rd-title-row h2{font-size:var(--type-page)!important;line-height:1.2}
.page h2,.drawer-sec-head h3,.room-workspace h3{font-size:var(--type-section)!important;line-height:1.3}
.hint,.muted,small,.room-workspace .hint,.room-workspace small{font-size:var(--type-meta)!important;line-height:1.45!important}
.eyebrow,.field-label,.room-workspace label>span{font-size:var(--type-meta)!important;line-height:1.4}
.data-table th{font-size:var(--type-meta)!important}.data-table td{font-size:var(--type-label)!important}
.pill,.status-chip,.badge{font-size:.6875rem!important}
.btn{min-height:36px;font-size:var(--type-label)!important;line-height:1.25}
.btn.sm{min-height:32px;font-size:var(--type-meta)!important}
.ic-btn{min-width:32px;min-height:32px}

/* Keep important room information readable instead of compressing it into 6–9px text. */
.rd-page-meta,.rd-hotspot b,.rd-hotspot span,.rd-master-ring span,.rd-mode-choices span,
.rd-mode-choices small,.rd-color-tabs,.rd-zone-list .rd-dev-main b,.rd-zone-list .rd-dev-main .una-type,
.rd-zone-list .rd-dev-fx,.rd-right-rail .rd-metric span,.rd-right-rail .rd-metric small,
.rd-right-rail .link-toggle,.rd-rail-sensor b,.rd-rail-sensor small,.rd-safety-state span,
.rd-safety-grid span,.rd-safety-grid small{font-size:var(--type-meta)!important;line-height:1.4}
.rd-tabs{height:auto;min-height:50px;overflow-x:auto}.rd-tabs button{min-height:50px;height:auto}
.rd-hotspot{min-width:126px}.rd-master>b{font-size:var(--type-body)}
.rd-zone-list .rd-dev-ctl{grid-template-columns:38px minmax(88px,1fr) minmax(86px,1fr) auto}
.rd-zone-list .rd-dev-fx{min-height:34px;height:auto;padding:6px}

/* The designer reads as a three-stage landscape workflow. */
.rd-designer-head h3{font-size:1.125rem!important}
.rd-designer-head .eyebrow,.rd-designer-head .hint,
.rd-designer-targets>div:first-child span,.rd-designer-card-head span{font-size:var(--type-label)!important;line-height:1.35}
.rd-designer-targets>div:first-child small,.rd-designer-card-head small,
.rd-designer-card-head em,.rd-designer-preview-card>p{font-size:var(--type-meta)!important;line-height:1.45}
.rd-designer-targets{grid-template-columns:230px minmax(0,1fr);padding:14px;margin-bottom:14px}
.rd-designer-targets .rd-seq-targets>button,.rd-designer-targets .rd-seq-targets>label{min-height:42px!important;padding:8px 10px!important}
.rd-designer-workspace{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;margin-bottom:14px}
.rd-designer-preview-card,.rd-designer-quick,.rd-designer-presets{min-width:0;padding:16px;border:1px solid rgba(112,139,204,.13);border-radius:14px;background:linear-gradient(145deg,rgba(13,27,54,.9),rgba(8,17,35,.92))}
.rd-designer-presets .rd-seq-featured{margin:0 0 10px}.rd-designer-presets .rd-sequence-list{max-height:180px;overflow:auto}
.rd-designer-fields{grid-template-columns:76px minmax(130px,.75fr) minmax(160px,1fr);gap:12px}
.rd-designer-fields label,.rd-designer-fields input,.rd-designer-fields select{font-size:var(--type-label)!important}
.rd-designer-fields input,.rd-designer-fields select{min-height:40px!important;height:40px!important}
.rd-designer-quick-actions .btn{min-height:38px;font-size:var(--type-label)!important}
.rd-sequence-advanced{margin:0 0 14px}.rd-sequence-advanced>summary{min-height:52px;padding:12px 14px}
.rd-sequence-advanced>summary b{font-size:var(--type-label)}
.rd-sequence-advanced>summary small,.rd-sequence-advanced>summary em{font-size:var(--type-meta)}
.rd-sequence-advanced .rd-seq-frames{display:flex;gap:10px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:2px 0 12px;scroll-snap-type:x proximity}
.rd-sequence-advanced .rd-seq-frame{flex:0 0 min(760px,calc(100vw - 110px));scroll-snap-align:start;cursor:grab;transition:opacity .15s,transform .15s,border-color .15s}
.rd-sequence-advanced .rd-seq-frame:active{cursor:grabbing}.rd-sequence-advanced .rd-seq-frame.dragging{opacity:.48;transform:scale(.985);border-color:#766cff}
.rd-designer-final{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head head" "preview actions";gap:12px;margin-top:0}
.rd-designer-final>.rd-designer-card-head{grid-area:head;margin:0}.rd-designer-final>.rd-designer-preview{grid-area:preview;height:164px}
.rd-designer-final-bar{grid-area:actions;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:14px;border:1px solid rgba(112,139,204,.11);border-radius:11px;background:rgba(5,13,28,.42)}
.rd-designer-final-bar p{margin:0;color:#9aa8c0;font-size:var(--type-label);line-height:1.5}
.rd-designer-final-bar .rd-sequence-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rd-designer-final-bar .rd-sequence-actions .btn{width:100%;min-width:0!important;white-space:normal;padding-left:10px;padding-right:10px}.rd-designer-final-bar #rd-seq-play,.rd-designer-final-bar #rd-fx-apply{grid-column:1/-1}
.rd-preview-light small{font-size:var(--type-meta)!important}

/* All three configuration dialogs use the same readable scale. */
.modal.wide.room-add-modal,.modal.wide.commissioning-modal,.modal.wide.fixture-manage-modal{
  --setup-title:1.375rem;--setup-section:1.0625rem;--setup-body:.875rem;--setup-label:.8125rem;--setup-meta:.75rem;
  font-size:var(--setup-body);line-height:1.5
}
.modal.wide.room-add-modal .eyebrow,.modal.wide.commissioning-modal .eyebrow,.modal.wide.fixture-manage-modal .eyebrow,
.raf-more>summary,.rfm-more>summary,.ce-history-disclosure>summary,.ce-technical>summary{font-size:var(--setup-meta)!important}

@media(max-width:1050px){
  .rd-designer-workspace,.rd-designer-final{grid-template-columns:1fr;grid-template-areas:none}
  .rd-designer-final>*{grid-area:auto!important}.rd-designer-targets{grid-template-columns:1fr}
}
@media(max-width:620px){
  :root{--type-body:1rem;--type-control:1rem;--type-label:.875rem;--type-meta:.8125rem}
  .rd-designer-fields{grid-template-columns:76px 1fr}.rd-designer-final-bar .rd-sequence-actions{grid-template-columns:1fr}
}

/* ================= Room containment and fixture layout (build 116) =====
   Every room component owns its width. Controls wrap inside their card and
   never use negative or intrinsic widths that can escape the panel. */
#room-drawer .rd-primary,
#room-drawer .rd-panel-area,
#room-drawer .rd-control-grid,
#room-drawer .drawer-sec,
#room-drawer .rd-zone-list,
#room-drawer .rd-dev,
#room-drawer .rd-dev-main,
#room-drawer .rd-dev-main>div,
#room-drawer .rd-dev-ctl{min-width:0;max-width:100%;box-sizing:border-box}
#room-drawer .rd-panel-area>[data-room-panel="lighting"].rd-control-grid{grid-template-columns:minmax(0,1fr)!important}
#room-drawer .rd-panel-area>[data-room-panel="lighting"]>.rd-zone-panel,
#room-drawer .rd-panel-area>[data-room-panel="lighting"]>.rd-light-designer{grid-column:1/-1!important;width:100%}

#room-drawer #rd-devices.rd-zone-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:stretch;
  gap:12px!important;
  width:100%;
}
#room-drawer #rd-devices .rd-dev{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  min-height:142px;
  padding:14px;
  overflow:hidden;
  border-radius:12px;
}
#room-drawer #rd-devices .rd-dev-main{width:100%;margin:0;align-items:flex-start}
#room-drawer #rd-devices .rd-dev-main>div{overflow:hidden}
#room-drawer #rd-devices .rd-dev-main b,
#room-drawer #rd-devices .rd-dev-main .una-type{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#room-drawer #rd-devices .rd-dev-main b{white-space:nowrap}
#room-drawer #rd-devices .rd-dev-main .una-type{display:block;margin-top:3px;white-space:normal;overflow-wrap:anywhere}

#room-drawer #rd-devices .zone-device .rd-dev-ctl{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:stretch;
  gap:8px;
  width:100%;
}
#room-drawer #rd-devices .zone-device .rd-dev-level{
  grid-column:1/-1;
  grid-row:1;
  width:100%!important;
  min-width:0;
}
#room-drawer #rd-devices .zone-device .rd-dev-sequence{grid-column:1;grid-row:2;justify-self:start;min-width:82px}
#room-drawer #rd-devices .zone-device .rd-dev-power{grid-column:2;grid-row:2}
#room-drawer #rd-devices .zone-device .rd-dev-manage{grid-column:3;grid-row:2}

#room-drawer #rd-devices .rd-dev-pending .rd-dev-ctl{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch;
  gap:8px;
  width:100%;
}
#room-drawer #rd-devices .rd-dev-pending .pill{
  position:static!important;
  inset:auto!important;
  grid-column:1/-1;
  width:100%;
  max-width:100%;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:6px 9px;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
}
#room-drawer #rd-devices .rd-dev-pending .btn{width:100%;min-width:0;white-space:normal}

/* Pending fittings are a compact commissioning queue, not oversized fixture
   tiles. Keep identity on the left and the next action together on the right. */
#room-drawer #rd-devices .rd-dev-pending{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto;
  align-items:center;
  gap:12px;
}
#room-drawer #rd-devices .rd-dev-pending .rd-dev-main{align-self:center}
#room-drawer #rd-devices .rd-dev-pending .rd-dev-ctl{
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  width:auto;
  gap:8px;
}
#room-drawer #rd-devices .rd-dev-pending .pill{
  width:auto;
  max-width:180px;
  flex:0 1 auto;
  padding:6px 9px;
  white-space:nowrap;
}
#room-drawer #rd-devices .rd-dev-pending .btn{width:auto;min-width:92px;white-space:nowrap}

/* Keep the utility rail readable at its real 270–300px desktop width. */
#room-drawer .bs51-room-rail .rail-automation-quick,
#room-drawer .bs51-room-rail .rd-safety-grid{grid-template-columns:1fr!important}
#room-drawer .bs51-room-rail .rail-automation-quick>label,
#room-drawer .bs51-room-rail .rd-safety-grid>div{width:100%;min-width:0;box-sizing:border-box}
#room-drawer .bs51-room-rail .rd-safety-grid b,
#room-drawer .bs51-room-rail .rd-safety-grid small{font-size:var(--type-meta)!important;line-height:1.4;overflow-wrap:anywhere}
#room-drawer .bs51-room-rail .rd-safety-grid em{flex:0 0 auto}
#room-drawer .bs51-room-rail .rail-empty{max-width:100%;box-sizing:border-box;overflow:hidden}

@media(max-width:760px){
  #room-drawer #rd-devices.rd-zone-list{grid-template-columns:1fr}
  #room-drawer #rd-devices .zone-device .rd-dev-ctl{grid-template-columns:minmax(0,1fr) auto!important}
  #room-drawer #rd-devices .zone-device .rd-dev-sequence{grid-column:1}
  #room-drawer #rd-devices .zone-device .rd-dev-power{grid-column:2}
  #room-drawer #rd-devices .zone-device .rd-dev-manage{grid-column:1/-1;grid-row:3;width:100%}
  #room-drawer #rd-devices .rd-dev-pending{grid-template-columns:1fr}
  #room-drawer #rd-devices .rd-dev-pending .rd-dev-ctl{width:100%;flex-wrap:wrap;justify-content:flex-start}
}

/* Final cascade guard: music uses the product-wide scroll-safe room policy. */
#room-drawer #rd-music-sec:not([hidden]){display:block!important;grid-template-columns:none!important;grid-template-rows:none!important;height:auto!important;min-height:0!important;max-width:none!important;overflow:visible!important}
#room-drawer #rd-music-sec>.rd-player,#room-drawer #rd-music-sec>.rd-music-routing,#room-drawer #rd-music-sec>.rd-music-actions,#room-drawer #rd-music-sec>.rd-music-config,#room-drawer #rd-music-sec>.rd-playlist{width:100%;max-width:100%;box-sizing:border-box;margin-top:12px;grid-column:auto;grid-row:auto}
/* A room tab owns exactly one operational panel. Component display rules must
   never override the native hidden state applied by the tab controller. */
#room-drawer .rd-panel-area>[data-room-panel][hidden]{display:none!important}

/* Pool v1 — logical equipment first. Customer controls never expose raw GPIO;
   commissioning and desired/reported configuration stay in Setup. */
#page-pool .pool-workspace-tabs{padding:6px;gap:6px;background:rgba(5,14,31,.92);border-color:rgba(101,138,218,.2)}
#page-pool .pool-workspace-tabs button{min-height:38px;padding:9px 14px;font-size:12px;font-weight:650;letter-spacing:.01em}
#page-pool .pool-workspace-content{gap:16px}
#page-pool .pool-workspace-content .panel{padding:20px;border-radius:16px;border-color:rgba(96,145,224,.18);background:linear-gradient(145deg,rgba(10,25,48,.97),rgba(6,16,34,.98))}
#page-pool .pool-workspace-content .panel-head h2{font-size:19px;line-height:1.25}
#page-pool .pool-workspace-content .panel-head .hint{max-width:720px;margin-top:6px;font-size:12px;line-height:1.5}
.pool-assurance-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(255,178,75,.26);border-radius:14px;background:linear-gradient(100deg,rgba(92,52,17,.26),rgba(8,19,38,.94))}
.pool-assurance-banner>div{display:flex;align-items:center;gap:12px}.pool-assurance-banner>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,172,57,.13);color:#ffbd62;font-size:17px;font-weight:800}.pool-assurance-banner b,.pool-assurance-banner small{display:block}.pool-assurance-banner b{font-size:14px}.pool-assurance-banner small{margin-top:3px;color:#9baccc;font-size:11px;line-height:1.45}.pool-assurance-banner.ready{border-color:rgba(43,219,154,.25);background:linear-gradient(100deg,rgba(14,76,57,.24),rgba(8,19,38,.94))}.pool-assurance-banner.ready>div>span{background:rgba(43,219,154,.12);color:#42dfa6}
#page-pool .pool-home-status>article{padding:16px}.pool-home-status small{font-size:10px}.pool-home-status b{font-size:15px}.pool-home-status em{font-size:11px;line-height:1.4}
#page-pool .pool-metric{grid-template-columns:44px 1fr;padding:14px}.pool-metric-icon{width:44px;height:44px;font-size:11px}.pool-metric small,.pool-metric em{font-size:10px}.pool-metric b{font-size:22px}.pool-metric footer{font-size:10px}
.pool-equipment-stack{gap:10px}.pool-equipment-card.pool-equipment-pro{grid-template-columns:42px minmax(190px,1fr) minmax(118px,auto) auto auto;gap:12px;padding:13px 14px;border-radius:13px}.pool-equipment-card.pool-equipment-pro>span{width:42px;height:42px;border-radius:11px;font-size:17px}.pool-equipment-copy b{font-size:14px}.pool-equipment-copy small{font-size:10px;line-height:1.4}.pool-inhibit{display:block;margin-top:5px;color:#ffb250;font-size:10px;font-weight:650}.pool-command-state{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:7px 9px;border-radius:999px;background:rgba(93,117,157,.12);color:#9cb0cf;font-size:9px;font-weight:750;letter-spacing:.06em;white-space:nowrap}.pool-command-state i{width:7px;height:7px;border-radius:50%;background:currentColor}.pool-command-state.confirmed{color:#43dfa6;background:rgba(43,219,154,.1)}.pool-command-state.commanded{color:#6db5ff;background:rgba(60,126,255,.1)}.pool-command-state.sending{color:#d2a6ff;background:rgba(153,82,242,.11)}.pool-command-state.fault{color:#ff8b69;background:rgba(255,91,72,.1)}
.pool-mode-control{display:flex;padding:3px;border:1px solid rgba(103,140,208,.2);border-radius:10px;background:#071327}.pool-mode-control button{min-height:29px;padding:6px 8px;border:0;border-radius:7px;background:transparent;color:#7186a9;font:inherit;font-size:9px;font-weight:700;cursor:pointer}.pool-mode-control button.active{color:#fff;background:linear-gradient(135deg,#315fd8,#7257df)}.pool-mode-control button:disabled{opacity:.34;cursor:not-allowed}
.pool-info-strip{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid rgba(82,154,243,.18);border-radius:14px;background:rgba(8,21,42,.82)}.pool-info-strip>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(57,130,255,.13);color:#73baff;font-weight:800}.pool-info-strip b,.pool-info-strip small{display:block}.pool-info-strip b{font-size:13px}.pool-info-strip small{margin-top:3px;color:#8da2c5;font-size:11px}
.pool-tank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pool-tank{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:16px;padding:18px;border:1px solid rgba(91,144,221,.18);border-radius:15px;background:#08162c}.pool-tank-vessel{position:relative;width:66px;height:108px;border:2px solid rgba(119,156,219,.32);border-radius:11px 11px 17px 17px;overflow:hidden;background:rgba(1,8,20,.75)}.pool-tank-vessel:before{content:"";position:absolute;top:-7px;left:15px;width:32px;height:7px;border:2px solid rgba(119,156,219,.32);border-bottom:0;border-radius:5px 5px 0 0}.pool-tank-vessel i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#37d1f4,#2479ee);box-shadow:0 -6px 20px rgba(39,170,255,.22)}.pool-tank.unknown .pool-tank-vessel i{height:0!important}.pool-tank-vessel span{position:absolute;inset:0;display:grid;place-items:center;color:#eaf5ff;font-size:17px;font-weight:800;text-shadow:0 2px 8px #031027}.pool-tank small,.pool-tank b,.pool-tank em{display:block}.pool-tank small{color:#7187aa;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.pool-tank b{margin:4px 0;font-size:16px}.pool-tank em{color:#91a6c8;font-size:11px;font-style:normal}.pool-tank footer{display:flex;gap:10px;margin-top:12px;color:#7388aa;font-size:9px}
.pool-setup-panel .pool-stage-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pool-config-state{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.pool-config-state article{padding:16px;border:1px solid rgba(98,140,214,.16);border-radius:13px;background:#08162c}.pool-config-state small,.pool-config-state b,.pool-config-state em{display:block}.pool-config-state small{color:#768cab;font-size:10px}.pool-config-state b{margin:5px 0;font-size:21px}.pool-config-state em{color:#8da2c4;font-size:10px;font-style:normal}.pool-config-state article.match{border-color:rgba(43,219,154,.25)}.pool-config-state article.mismatch{border-color:rgba(255,178,75,.25)}.pool-safety-boundary{display:grid;gap:9px;margin:0;padding:0;list-style:none}.pool-safety-boundary li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:11px;border-radius:11px;background:#08162c}.pool-safety-boundary b{font-size:12px}.pool-safety-boundary span{color:#8ca0c1;font-size:11px;line-height:1.4}
@media(max-width:1200px){.pool-equipment-card.pool-equipment-pro{grid-template-columns:42px minmax(170px,1fr) auto auto}.pool-equipment-card.pool-equipment-pro>.pool-command-state{grid-column:2}.pool-equipment-card.pool-equipment-pro>.pool-mode-control{grid-column:3}.pool-setup-panel .pool-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.pool-assurance-banner{align-items:flex-start;flex-direction:column}.pool-tank-grid{grid-template-columns:1fr}.pool-equipment-card.pool-equipment-pro{grid-template-columns:42px 1fr}.pool-equipment-card.pool-equipment-pro>.pool-command-state,.pool-equipment-card.pool-equipment-pro>.pool-mode-control,.pool-equipment-card.pool-equipment-pro>[data-pool-toggle]{grid-column:2;justify-self:start}.pool-setup-panel .pool-stage-grid{grid-template-columns:1fr}.pool-config-state{grid-template-columns:1fr}.pool-config-state>span{transform:rotate(90deg);justify-self:center}}

/* Pool reliability v2 — explicit dependencies, handover and scroll-safe views. */
.pool-controller-status{padding:15px 17px;border:1px solid rgba(84,140,229,.24);border-radius:16px;background:radial-gradient(circle at 96% 0,rgba(57,96,219,.13),transparent 35%),linear-gradient(145deg,rgba(8,23,46,.97),rgba(5,15,31,.98))}.pool-controller-status>header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.pool-controller-status>header b,.pool-controller-status>header small{display:block}.pool-controller-status>header b{margin-top:3px;font-size:15px}.pool-controller-status>header small{margin-top:3px;color:#8296b8;font-size:10px}.pool-controller-status>header em{padding:7px 10px;border-radius:999px;background:rgba(101,121,160,.12);color:#9eacc5;font-size:9px;font-style:normal;font-weight:800;letter-spacing:.04em}.pool-controller-status>header em.good{background:rgba(43,219,154,.11);color:#46dfa7}.pool-controller-status>header em.warn{background:rgba(255,178,75,.11);color:#ffc16d}.pool-controller-status>header em.bad{background:rgba(255,91,72,.11);color:#ff917d}.pool-controller-status>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.pool-controller-status article{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:center;min-height:55px;padding:9px 10px;border:1px solid rgba(103,139,205,.14);border-radius:11px;background:rgba(6,17,35,.67)}.pool-controller-status article>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(104,125,168,.12);color:#9fb0ce;font-weight:800}.pool-controller-status article b,.pool-controller-status article small{display:block}.pool-controller-status article b{font-size:11px}.pool-controller-status article small{margin-top:3px;color:#7f92b2;font-size:9px;line-height:1.35}.pool-controller-status article.good{border-color:rgba(43,219,154,.2)}.pool-controller-status article.good>span{background:rgba(43,219,154,.1);color:#43dfa6}.pool-controller-status article.warn{border-color:rgba(255,178,75,.2)}.pool-controller-status article.warn>span{background:rgba(255,178,75,.1);color:#ffc16d}.pool-controller-status article.bad{border-color:rgba(255,91,72,.2)}.pool-controller-status article.bad>span{background:rgba(255,91,72,.1);color:#ff907d}.pool-command-state.unknown{color:#f5b75f;background:rgba(245,183,95,.1)}
.pool-dependency-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.pool-dependency-grid article{display:grid;grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:start;padding:13px;border:1px solid rgba(106,140,204,.17);border-radius:12px;background:#08162c}.pool-dependency-grid article>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,174,74,.12);color:#ffc16a;font-weight:800}.pool-dependency-grid b,.pool-dependency-grid small{display:block}.pool-dependency-grid b{font-size:12px}.pool-dependency-grid small{margin-top:4px;color:#879aba;font-size:10px;line-height:1.45}.pool-dependency-grid em{grid-column:2;color:#f4b45a;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.07em}.pool-dependency-grid article.ready{border-color:rgba(43,219,154,.22)}.pool-dependency-grid article.ready>span{background:rgba(43,219,154,.1);color:#43dfa6}.pool-dependency-grid article.ready em{color:#43dfa6}
.pool-handover-progress{height:7px;margin:14px 0 18px;border-radius:999px;background:#071326;overflow:hidden}.pool-handover-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3177f4,#7b55ed,#37d9a1)}.pool-handover-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pool-handover-grid>section{display:grid;align-content:start;gap:8px}.pool-handover-grid h3{margin:0 0 4px;font-size:13px}.pool-handover-grid article,.pool-handover-grid label{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:62px;padding:11px 12px;border:1px solid rgba(104,139,204,.17);border-radius:12px;background:#08162c}.pool-handover-grid article>span,.pool-handover-grid label>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,174,74,.12);color:#ffc16a;font-weight:800}.pool-handover-grid b,.pool-handover-grid small{display:block}.pool-handover-grid b{font-size:12px}.pool-handover-grid small{margin-top:3px;color:#879aba;font-size:10px;line-height:1.4}.pool-handover-grid em{color:#f4b45a;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.06em}.pool-handover-grid .done{border-color:rgba(43,219,154,.23)}.pool-handover-grid .done>span{background:rgba(43,219,154,.1);color:#43dfa6}.pool-handover-grid .done em{color:#43dfa6}.pool-handover-grid label{cursor:pointer}.pool-handover-grid input{position:absolute;opacity:0;pointer-events:none}.pool-handover-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(104,139,204,.14)}.pool-handover-panel>footer small{max-width:680px;color:#8498b8;font-size:10px;line-height:1.45}.pool-render-failure{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;border-color:rgba(255,115,87,.34)!important}.pool-render-failure>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,94,76,.12);color:#ff8c75;font-size:20px;font-weight:800}.pool-render-failure h2{margin:4px 0}.pool-render-failure p,.pool-render-failure small{display:block;color:#94a6c5;font-size:11px}
#page-pool.active{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}#page-pool .pool-workspace-content{display:grid!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}#page-pool .pool-workspace-content>[hidden]{display:none!important}
@media(max-width:1100px){.pool-dependency-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.pool-dependency-grid,.pool-handover-grid{grid-template-columns:1fr}.pool-handover-panel>footer{align-items:stretch;flex-direction:column}.pool-render-failure{grid-template-columns:42px 1fr}.pool-render-failure>.btn{grid-column:1/-1}}
@media(max-width:980px){.pool-controller-status>div{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.pool-controller-status>header{align-items:flex-start;flex-direction:column}.pool-controller-status>div{grid-template-columns:1fr}}

/* Pool ambience — the same circuit → sequence → music flow used by Rooms. */
.pool-ambience-actions{display:flex;gap:8px;flex-wrap:wrap}.pool-ambience-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:16px}.pool-ambience-flow>article{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;min-height:62px;padding:11px;border:1px solid rgba(100,137,202,.16);border-radius:12px;background:#08162c}.pool-ambience-flow>article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(104,124,168,.12);color:#91a4c4;font-weight:800}.pool-ambience-flow b,.pool-ambience-flow small{display:block}.pool-ambience-flow b{font-size:12px}.pool-ambience-flow small{margin-top:3px;color:#8295b5;font-size:9px}.pool-ambience-flow>article.active{border-color:rgba(89,111,255,.38)}.pool-ambience-flow>article.active>span{background:linear-gradient(145deg,#3279ef,#7956e9);color:#fff}.pool-ambience-flow>i{color:#647899;font-style:normal}.pool-ambience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.pool-ambience-circuits,.pool-sequence-library,.pool-music-routing-summary{display:grid;gap:8px}.pool-ambience-circuits article,.pool-music-routing-summary article{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid rgba(104,139,204,.15);border-radius:11px;background:#08162c}.pool-ambience-circuits article>span,.pool-music-routing-summary article>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(90,116,187,.13);color:#9db4e8}.pool-ambience-circuits b,.pool-ambience-circuits small,.pool-music-routing-summary b,.pool-music-routing-summary small{display:block}.pool-ambience-circuits b,.pool-music-routing-summary b{font-size:11px}.pool-ambience-circuits small,.pool-music-routing-summary small{margin-top:3px;color:#7e92b2;font-size:9px}.pool-ambience-circuits em{font-size:8px;font-style:normal;font-weight:800}.pool-ambience-circuits em.on{color:#42dfa6}.pool-ambience-circuits em.off{color:#91a4c4}.pool-ambience-circuits em.unknown{color:#ffc16d}.pool-music-routing-summary article.selected{border-color:rgba(104,90,245,.35)}.pool-sequence-library{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-sequence-library article{min-width:0;padding:10px;border:1px solid rgba(104,139,204,.15);border-radius:11px;background:#08162c}.pool-sequence-library b,.pool-sequence-library small{display:block}.pool-sequence-library b{margin-top:7px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.pool-sequence-library small{margin-top:3px;color:#7e92b2;font-size:9px}.pool-sequence-palette{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#111d35}.pool-sequence-palette i{flex:1;background:var(--swatch);font-style:normal}
@media(max-width:1100px){.pool-ambience-grid{grid-template-columns:1fr 1fr}.pool-ambience-grid>section:last-child{grid-column:1/-1}}@media(max-width:720px){.pool-ambience-flow{grid-template-columns:1fr}.pool-ambience-flow>i{display:none}.pool-ambience-grid{grid-template-columns:1fr}.pool-ambience-grid>section:last-child{grid-column:auto}}

/* Connection planner — equipment intent first, physical points second. */
.controller-connection-planner{padding:20px!important;background:radial-gradient(circle at 92% 0,rgba(76,67,210,.13),transparent 31%),linear-gradient(150deg,rgba(10,23,46,.98),rgba(5,13,28,.98))!important}
.controller-connection-planner>.panel-head{align-items:flex-start;margin-bottom:16px}.controller-connection-planner>.panel-head h2{margin:4px 0 3px;font-size:20px}.controller-connection-planner>.panel-head .hint{font-size:12px;line-height:1.45}.controller-connection-planner>.panel-head>.pill{padding:7px 10px;font-size:10px}
#connection-guide-groups{display:grid;gap:16px}.connection-guide-group>header{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}.connection-guide-group>header span{font-size:13px;font-weight:750}.connection-guide-group>header small{color:#7588a8;font-size:10px}
.connection-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.connection-guide-card{display:flex;flex-direction:column;min-width:0;min-height:250px;padding:13px;border:1px solid rgba(108,142,207,.16);border-radius:14px;background:linear-gradient(150deg,rgba(13,28,54,.94),rgba(7,16,34,.97));box-shadow:0 12px 30px rgba(0,0,0,.11)}
.connection-guide-title{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center}.connection-guide-title>i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,rgba(67,113,239,.2),rgba(137,75,228,.14));color:#b7c8ff;font-size:15px;font-style:normal}.connection-guide-title b,.connection-guide-title span{display:block}.connection-guide-title b{font-size:12px;line-height:1.25}.connection-guide-title span{margin-top:3px;color:#8193b1;font-size:9px}.connection-guide-title em{align-self:start;padding:5px 7px;border-radius:999px;background:rgba(103,123,164,.1);color:#9aaac6;font-size:8px;font-style:normal;white-space:nowrap}.connection-guide-title em.good{background:rgba(52,211,153,.1);color:#68dba9}.connection-guide-title em.warn{background:rgba(251,169,58,.1);color:#ffc068}.connection-guide-title em.bad{background:rgba(244,94,94,.1);color:#ff8f8f}
.connection-guide-card>p{min-height:45px;margin:11px 0 9px;color:#93a4c1;font-size:10px;line-height:1.5}.connection-guide-points{padding:9px;border:1px solid rgba(105,137,197,.11);border-radius:10px;background:rgba(4,12,26,.5)}.connection-guide-points>label{display:block;margin-bottom:6px;color:#677b9e;font-size:7px;font-weight:750;letter-spacing:.08em}.connection-guide-points>div{display:flex;flex-wrap:wrap;gap:5px}.connection-guide-points span{padding:5px 6px;border:1px solid rgba(106,137,199,.12);border-radius:7px;background:#0e1d38;color:#b7c5dd;font:700 8px var(--mono)}.connection-guide-points span small{display:block;margin-top:2px;color:#7183a3;font:7px var(--font)}.connection-guide-points span.free{border-color:rgba(52,211,153,.2);color:#72ddaF}.connection-guide-points span.assigned{border-color:rgba(102,112,255,.23);color:#aab7ff}.connection-guide-points span.firmware,.connection-guide-points span.shared{border-color:rgba(251,169,58,.18);color:#e8b566}.connection-guide-points span.none{font-family:var(--font);font-weight:500;color:#7d8da9}.connection-guide-points span.more{font-family:var(--font);color:#8798b5}
.connection-guide-warning{display:flex;gap:7px;align-items:flex-start;margin-top:8px;color:#8697b4;font-size:9px;line-height:1.4}.connection-guide-warning>i{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:rgba(70,124,232,.13);color:#79adff;font-size:8px;font-style:normal}.connection-guide-card>footer{margin-top:auto;padding-top:10px}.connection-guide-card>footer .btn{width:100%;min-height:32px;font-size:9px}
@media(max-width:1320px){.connection-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:980px){.connection-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.connection-guide-grid{grid-template-columns:1fr}.connection-guide-card{min-height:0}.connection-guide-card>p{min-height:0}}

/* Connection planner v2 — one decision at a time. */
.connection-guide-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px;padding:5px;border:1px solid rgba(108,142,207,.13);border-radius:14px;background:rgba(3,10,23,.5)}
.connection-guide-tabs button{display:flex;align-items:center;gap:10px;min-height:56px;padding:9px 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:#8293b1;text-align:left;cursor:pointer}.connection-guide-tabs button:hover{background:rgba(65,89,155,.1);color:#c5d1e7}.connection-guide-tabs button.active{border-color:rgba(103,112,255,.38);background:linear-gradient(135deg,rgba(52,83,190,.31),rgba(117,57,185,.21));color:#fff;box-shadow:0 8px 22px rgba(14,18,58,.24)}.connection-guide-tabs button>i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:rgba(76,104,185,.13);color:#93b8ff;font-size:15px;font-style:normal}.connection-guide-tabs button.active>i{background:rgba(103,112,255,.22);color:#d6dcff}.connection-guide-tabs b,.connection-guide-tabs small{display:block}.connection-guide-tabs b{font-size:12px}.connection-guide-tabs small{margin-top:2px;color:#7587a7;font-size:9px}.connection-guide-tabs button.active small{color:#aab8d3}
.connection-guide-focus{display:grid;grid-template-columns:minmax(220px,.56fr) minmax(0,1.44fr);gap:12px}.connection-guide-focus>aside{padding:13px;border:1px solid rgba(108,142,207,.13);border-radius:14px;background:rgba(5,14,30,.62)}.connection-guide-step{display:block;margin:0 0 9px;color:#7e91b1;font-size:9px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.connection-guide-choices{display:grid;gap:7px}.connection-guide-choices button{display:grid;grid-template-columns:36px minmax(0,1fr) 8px;gap:9px;align-items:center;min-height:58px;padding:9px;border:1px solid rgba(106,136,195,.12);border-radius:11px;background:#0a1931;color:#aebbd1;text-align:left;cursor:pointer}.connection-guide-choices button:hover{border-color:rgba(96,124,232,.38);transform:translateX(2px)}.connection-guide-choices button.active{border-color:rgba(105,98,245,.55);background:linear-gradient(135deg,rgba(54,80,186,.32),rgba(105,54,172,.2));color:#fff;box-shadow:inset 3px 0 0 #7268f5}.connection-guide-choices button>i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(80,107,187,.13);font-size:15px;font-style:normal}.connection-guide-choices b,.connection-guide-choices small{display:block}.connection-guide-choices b{font-size:11px;line-height:1.25}.connection-guide-choices small{margin-top:3px;color:#7e90ae;font-size:9px}.connection-guide-choices em{width:7px;height:7px;border-radius:50%;background:#64748b}.connection-guide-choices em.good{background:#43d49a;box-shadow:0 0 8px rgba(67,212,154,.55)}.connection-guide-choices em.warn{background:#f5ad50}.connection-guide-choices em.bad{background:#ef6b6b}
.connection-guide-detail{display:flex;flex-direction:column;min-width:0;padding:16px;border:1px solid rgba(112,143,205,.17);border-radius:14px;background:radial-gradient(circle at 95% 5%,rgba(75,66,203,.15),transparent 32%),linear-gradient(145deg,rgba(12,27,53,.96),rgba(6,15,32,.98))}.connection-guide-detail-head{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:start}.connection-guide-hero-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:linear-gradient(145deg,rgba(62,113,234,.24),rgba(141,75,229,.18));color:#c2d2ff;font-size:20px}.connection-guide-detail-head small{color:#7489ad;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.connection-guide-detail-head h3{margin:3px 0 3px;font-size:18px}.connection-guide-detail-head p{max-width:760px;margin:0;color:#93a5c3;font-size:11px;line-height:1.5}.connection-guide-detail-head>em{padding:6px 9px;border-radius:999px;background:rgba(104,124,163,.11);color:#9eacc4;font-size:9px;font-style:normal;white-space:nowrap}.connection-guide-detail-head>em.good{background:rgba(53,211,153,.1);color:#65dbaa}.connection-guide-detail-head>em.warn{background:rgba(245,171,69,.11);color:#ffc16e}.connection-guide-detail-head>em.bad{background:rgba(239,91,91,.11);color:#ff9090}
.connection-guide-recommend{margin-top:14px;padding:12px;border:1px solid rgba(107,138,200,.13);border-radius:12px;background:rgba(3,11,24,.55)}.connection-guide-recommend>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.connection-guide-recommend>header span{font-size:11px;font-weight:700}.connection-guide-recommend>header small{color:#8294b3;font-size:9px}.connection-guide-recommend>div{display:flex;flex-wrap:wrap;gap:7px}.connection-guide-recommend>div>span{min-width:105px;padding:8px 9px;border:1px solid rgba(109,139,200,.13);border-radius:9px;background:#0c1c37}.connection-guide-recommend>div>span b,.connection-guide-recommend>div>span small{display:block}.connection-guide-recommend>div>span b{font:750 10px var(--mono)}.connection-guide-recommend>div>span small{margin-top:3px;color:#7688a7;font-size:8px}.connection-guide-recommend>div>span.free{border-color:rgba(52,211,153,.2)}.connection-guide-recommend>div>span.free b{color:#6edcab}.connection-guide-recommend>div>span.assigned{border-color:rgba(103,112,255,.25)}.connection-guide-recommend>div>span.assigned b{color:#b3bcff}.connection-guide-recommend>div>span.firmware,.connection-guide-recommend>div>span.shared{border-color:rgba(245,171,69,.2)}.connection-guide-recommend>div>span.firmware b,.connection-guide-recommend>div>span.shared b{color:#eab96e}.connection-guide-no-point{display:flex!important;align-items:center;gap:9px;min-width:100%!important}.connection-guide-no-point>i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(239,91,91,.1);color:#ff8e8e;font-style:normal}.connection-guide-no-point span b,.connection-guide-no-point span small{display:block}.connection-guide-no-point span b{font-size:10px}.connection-guide-no-point span small{margin-top:2px;color:#8393ae;font-size:9px}
.connection-guide-safety{display:flex;align-items:flex-start;gap:9px;margin-top:10px;padding:10px 11px;border:1px solid rgba(69,143,245,.14);border-radius:11px;background:rgba(31,86,169,.075)}.connection-guide-safety>i{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:rgba(65,135,238,.13);color:#78b3ff;font-style:normal}.connection-guide-safety b,.connection-guide-safety small{display:block}.connection-guide-safety b{font-size:10px}.connection-guide-safety small{margin-top:3px;color:#8fa1bf;font-size:9px;line-height:1.45}.connection-guide-detail>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:13px}.connection-guide-detail>footer>span b,.connection-guide-detail>footer>span small{display:block}.connection-guide-detail>footer>span b{font-size:11px}.connection-guide-detail>footer>span small{margin-top:2px;color:#788aa9;font-size:9px}.connection-guide-detail>footer .btn{min-height:38px;padding:0 17px;font-size:10px}
@media(max-width:980px){.connection-guide-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.connection-guide-focus{grid-template-columns:1fr}.connection-guide-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){.connection-guide-tabs{grid-template-columns:1fr 1fr}.connection-guide-tabs button{min-height:48px}.connection-guide-tabs small{display:none}.connection-guide-choices{grid-template-columns:1fr}.connection-guide-detail-head{grid-template-columns:44px 1fr}.connection-guide-detail-head>em{grid-column:2;justify-self:start}.connection-guide-detail>footer{align-items:stretch;flex-direction:column}.connection-guide-detail>footer .btn{width:100%}}
.topbar .clock{min-width:86px;flex:0 0 auto}.topbar #clock-time,.topbar #clock-date{white-space:nowrap}
/* Devices & Hub is a controller-aware workspace, not one continuous board form. */
.device-hub-hero{display:grid;grid-template-columns:minmax(260px,1.25fr) minmax(210px,.7fr);gap:16px;padding:20px;border:1px solid rgba(112,137,255,.24);border-radius:18px;background:radial-gradient(circle at 90% 0,rgba(102,83,255,.16),transparent 38%),linear-gradient(145deg,rgba(18,29,55,.96),rgba(8,16,32,.96));box-shadow:0 18px 48px rgba(0,0,0,.2)}
.device-hub-identity{min-width:0}.device-hub-title-row{display:flex;align-items:center;gap:13px;margin-top:7px}.device-hub-title-row h2{margin:0;font-size:22px}.device-hub-title-row p{margin:3px 0 0;color:var(--muted);font-size:13px}.device-hub-title-row .pill{margin-left:auto;white-space:nowrap}.device-hub-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;font-size:22px;background:linear-gradient(145deg,#2e7aff,#845cff);box-shadow:0 10px 28px rgba(67,95,255,.3)}
.device-hub-controller-picker{display:flex;flex-direction:column;justify-content:center;gap:9px}.device-hub-controller-picker label>span{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.device-hub-controller-picker select{width:100%;min-height:43px}.device-hub-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.device-hub-quick-actions .btn{min-height:38px}
.device-hub-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.device-hub-metrics article{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 14px;border:1px solid rgba(131,151,218,.16);border-radius:13px;background:rgba(6,14,30,.55)}.device-hub-metrics article i{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:10px;background:rgba(96,105,255,.15);color:#9aa8ff;font-style:normal}.device-hub-metrics article b{display:block;font-size:17px}.device-hub-metrics article span{display:block;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.device-hub-nav{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:8px;margin:14px 0}.device-hub-nav button{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(11,21,42,.8);color:var(--text);text-align:left;cursor:pointer}.device-hub-nav button>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(121,130,190,.09);color:#9ba8cf}.device-hub-nav button b{font-size:13px}.device-hub-nav button small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.device-hub-nav button:hover,.device-hub-nav button.active{border-color:rgba(112,103,255,.7);background:linear-gradient(135deg,rgba(43,67,146,.5),rgba(82,43,158,.4))}.device-hub-nav button.active>span{background:linear-gradient(135deg,#347cff,#8054ff);color:#fff}
.hub-service-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}.hub-service-nav button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 9px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;background:#0a172d;color:var(--text);text-align:left;cursor:pointer}.hub-service-nav button>span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(99,117,176,.1);color:#94a5cb}.hub-service-nav button b{font-size:11px}.hub-service-nav button small{color:var(--muted);font-size:9px}.hub-service-nav button.active{border-color:rgba(108,99,255,.65);background:linear-gradient(135deg,rgba(40,68,147,.48),rgba(79,45,149,.4))}.hub-service-nav button.active>span{background:linear-gradient(135deg,#357cff,#8055ff);color:#fff}
.connection-guide-modal-head{display:flex;justify-content:flex-end;padding:0 18px 8px}.controller-connection-planner.modal{width:min(1120px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto}.controller-connection-planner.modal #connection-guide-groups{padding:0 18px 18px}
.hub-profile-assignments{margin-top:16px;border:1px solid rgba(112,139,211,.18);border-radius:14px;background:rgba(7,17,35,.68);overflow:hidden}.hub-profile-assignments>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}.hub-profile-assignments>summary::-webkit-details-marker{display:none}.hub-profile-assignments>summary b,.hub-profile-assignments>summary small{display:block}.hub-profile-assignments>summary b{font-size:12px}.hub-profile-assignments>summary small{margin-top:3px;color:var(--muted);font-size:9px}.hub-profile-assignments>summary em{color:#9aa9ff;font-size:10px;font-style:normal;font-weight:750}.hub-profile-assignments[open]>summary{border-bottom:1px solid rgba(112,139,211,.15);background:rgba(42,64,129,.16)}.hub-profile-assignments[open]>summary em:after{content:" · expanded"}.hub-profile-assignments-body{padding:16px}
#page-advanced [data-hub-section][hidden]{display:none!important}
@media(max-width:900px){.device-hub-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-service-nav{grid-template-columns:1fr}}
@media(max-width:620px){.device-hub-hero{grid-template-columns:1fr}.device-hub-controller-picker,.device-hub-metrics{grid-column:1}.device-hub-nav{grid-template-columns:1fr}.device-hub-title-row .pill{margin-left:0}.device-hub-title-row{flex-wrap:wrap}.device-hub-quick-actions{grid-template-columns:1fr}}
/* Exact TI CC3220SF-LAUNCHXL physical board view (SWAU124 page 2). */
.brain-board-wrap.exact-cc3220{grid-column:1/-1;min-width:0}.brain-board-wrap.exact-cc3220+.brain-circuits{grid-column:1/-1}
.cc3220-board-map{display:grid;grid-template-columns:minmax(210px,1fr) 250px minmax(210px,1fr);grid-template-rows:auto auto;gap:20px 16px;align-items:stretch;padding:18px;border:1px solid rgba(148,163,214,.15);border-radius:18px;background:linear-gradient(145deg,rgba(5,12,25,.92),rgba(10,20,40,.76));overflow:hidden}
.cc-board-quadrant{display:grid;gap:4px}.cc-board-quadrant.top{grid-row:1}.cc-board-quadrant.bottom{grid-row:2;padding-top:12px;border-top:1px dashed rgba(151,166,211,.18)}.cc-board-quadrant.left{grid-column:1}.cc-board-quadrant.right{grid-column:3}
.cc-header-pin{display:grid;grid-template-columns:44px 10px minmax(0,1fr);gap:7px;align-items:center;min-height:32px;padding:3px 7px;border:1px solid rgba(125,145,201,.13);border-radius:8px;background:rgba(10,21,42,.72);color:var(--text);text-align:left}.cc-header-pin.right{grid-template-columns:minmax(0,1fr) 44px 10px;text-align:right}.cc-header-pin:not(:disabled){cursor:pointer}.cc-header-pin:not(:disabled):hover{z-index:2;border-color:#7885ff;transform:translateY(-1px);box-shadow:0 7px 18px rgba(42,62,140,.25)}
.cc-pin-number{font:800 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#dbe2ff}.cc-header-pin i{width:9px;height:9px;border:2px solid #d5a31b;border-radius:50%;background:#1a1c21;box-shadow:0 0 0 2px rgba(255,192,38,.08)}.cc-pin-copy{min-width:0}.cc-pin-copy strong,.cc-pin-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-pin-copy strong{font:750 10px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace}.cc-pin-copy small{margin-top:2px;color:#72809f;font-size:8px}
.cc-header-pin.assigned{border-color:rgba(116,91,255,.7);background:linear-gradient(90deg,rgba(75,67,176,.38),rgba(14,29,56,.82))}.cc-header-pin.assigned i{border-color:#a985ff;background:#7f5cff;box-shadow:0 0 10px rgba(131,91,255,.8)}.cc-header-pin.available{border-color:rgba(49,213,163,.28)}.cc-header-pin.available i{border-color:#43d7ae;background:#123b36}.cc-header-pin.reserved{border-color:rgba(255,175,70,.3);background:rgba(70,43,15,.28)}.cc-header-pin.reserved .cc-pin-copy strong{color:#ffc56f}.cc-header-pin.reserved i{border-color:#f0a63e;background:#4b3012}.cc-header-pin.shared{border-color:rgba(87,182,242,.25);background:rgba(16,53,78,.25)}.cc-header-pin.shared .cc-pin-copy strong{color:#70d0ff}.cc-header-pin.shared i{border-color:#55bde9;background:#123c50}.cc-header-pin.optional{border-style:dashed;border-color:rgba(217,153,67,.27)}.cc-header-pin.optional .cc-pin-copy strong{color:#d6ac70}.cc-header-pin.optional i{border-color:#b58a4a;background:#352b1a}.cc-header-pin.firmware{border-color:rgba(174,127,255,.28);background:rgba(54,31,86,.25)}.cc-header-pin.firmware .cc-pin-copy strong{color:#bd9bff}.cc-header-pin.firmware i{border-color:#9b74e6;background:#332552}.cc-header-pin.power .cc-pin-copy strong{color:#ffcf6a}.cc-header-pin.ground .cc-pin-copy strong{color:#aab3ca}.cc-header-pin.onboard .cc-pin-copy strong{color:#64d9ff}.cc-header-pin.system .cc-pin-copy strong{color:#ff9aa9}.cc-header-pin.starred{opacity:.76}.cc-header-pin:disabled{cursor:default}
.cc3220-pcb{position:relative;grid-column:2;grid-row:1/3;align-self:stretch;min-height:540px;border:4px solid #8a3429;border-radius:17px;background:radial-gradient(circle at 20% 20%,#e0694c 0 2px,transparent 3px),radial-gradient(circle at 80% 66%,#efa16f 0 1px,transparent 2px),linear-gradient(145deg,#c9573d,#963827 65%,#7b2b24);box-shadow:inset 0 0 0 2px rgba(255,192,146,.24),0 18px 35px rgba(0,0,0,.35);overflow:hidden}
.cc3220-pcb:before,.cc3220-pcb:after{content:"";position:absolute;left:12px;right:12px;height:18px;border-top:2px dotted rgba(255,212,139,.45);border-bottom:2px dotted rgba(255,212,139,.28)}.cc3220-pcb:before{top:88px}.cc3220-pcb:after{bottom:82px}.cc-usb{position:absolute;top:-4px;left:50%;width:62px;height:42px;transform:translateX(-50%);border:2px solid #c5cbd0;border-radius:0 0 7px 7px;background:linear-gradient(#eef1f3,#838d96);box-shadow:0 5px 8px rgba(0,0,0,.3)}.cc-usb i{display:block;width:38px;height:13px;margin:8px auto;border-radius:2px;background:#333}.cc-usb span{position:absolute;top:46px;left:50%;transform:translateX(-50%);color:#ffd5bd;font:700 7px ui-monospace,monospace;white-space:nowrap}
.cc-antenna{position:absolute;top:14px;right:13px;width:52px;height:66px;border:3px solid rgba(255,218,159,.85);border-left:0;border-radius:0 24px 24px 0}.cc-antenna:after{content:"";position:absolute;inset:7px;border:2px solid rgba(255,218,159,.65);border-left:0;border-radius:0 18px 18px 0}.cc-ti{position:absolute;top:70px;left:16px;color:#fff4ec;font:900 22px/1 Arial}.cc-board-name{position:absolute;top:69px;right:14px;color:#ffe3cf;font:800 8px/1.2 ui-monospace,monospace;text-align:right}.cc-chip{position:absolute;border:3px solid #24292e;border-radius:4px;background:repeating-linear-gradient(90deg,#282d31 0 4px,#13171b 4px 7px);box-shadow:0 0 0 1px rgba(255,214,174,.25),7px 8px 0 -5px rgba(255,208,136,.5)}.cc-chip.main{top:145px;left:50%;width:76px;height:76px;transform:translateX(-50%)}.cc-chip.network{top:255px;left:27px;width:56px;height:50px}.cc-chip.debug{top:330px;right:28px;width:48px;height:44px}.cc-traces{position:absolute;inset:108px 15px 35px;background:repeating-linear-gradient(30deg,transparent 0 13px,rgba(255,212,133,.19) 14px 15px,transparent 16px 25px);opacity:.65}.cc-led,.cc-switch,.cc-reset{position:absolute;z-index:2;display:grid;place-items:center;color:#fff;font:800 7px ui-monospace,monospace}.cc-led{bottom:57px;width:18px;height:18px;border-radius:50%;border:2px solid #ffd6a1}.cc-led.red{left:38px;background:#f44545}.cc-led.yellow{left:66px;background:#d8ad28}.cc-led.green{left:94px;background:#38bf71}.cc-switch{bottom:16px;width:34px;height:21px;border:1px solid #dcb697;border-radius:4px;background:#252a2c}.cc-switch.sw2{left:25px}.cc-switch.sw3{right:25px}.cc-reset{right:22px;bottom:58px;width:29px;height:18px;border:1px solid #e7baa0;border-radius:4px;background:#3d2724}.cc3220-pcb>small{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);color:#ffe3d1;font:700 7px ui-monospace,monospace;white-space:nowrap}
.brain-legend{flex-wrap:wrap}.brain-legend i.reference{background:#6e7890}.brain-legend i.reserved{background:#f0a63e}.brain-legend i.shared{background:#55bde9}.brain-legend i.optional{background:#b58a4a}.brain-legend span>b{color:#ffca5d}
.brain-notice.firmware{border-color:rgba(115,103,255,.32);background:linear-gradient(90deg,rgba(51,79,169,.16),rgba(101,57,172,.12))}.brain-notice.firmware>i{background:rgba(105,101,255,.17);color:#a9a4ff}.brain-notice.firmware small{color:#9ba9cc}
@media(max-width:1050px){.cc3220-board-map{grid-template-columns:minmax(170px,1fr) 210px minmax(170px,1fr);gap:14px 9px}.cc3220-pcb{min-height:510px}.cc-pin-copy small{display:none}}
@media(max-width:760px){.cc3220-board-map{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}.cc3220-pcb{grid-column:1/3;grid-row:1;min-height:320px}.cc-board-quadrant.top{grid-row:2}.cc-board-quadrant.bottom{grid-row:3}.cc-board-quadrant.left{grid-column:1}.cc-board-quadrant.right{grid-column:2}.cc-pin-copy small{display:block}.cc3220-pcb .cc-chip.main{top:120px}.cc3220-pcb .cc-chip.network{top:195px}.cc3220-pcb .cc-chip.debug{top:230px}}

/* Controller-package metadata and scalable physical board renderer. */
.controller-package-summary{display:grid;gap:12px;margin:0 0 20px}.controller-package-meta{padding:16px;border:1px solid rgba(100,135,255,.2);border-radius:16px;background:linear-gradient(135deg,rgba(33,58,119,.17),rgba(4,12,28,.64))}.controller-package-meta h3{margin:4px 0 14px;font-size:18px}.controller-package-meta h3 small{color:var(--muted);font-size:13px;font-weight:650}.controller-package-meta>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px}.controller-package-meta>div>span{display:flex;min-width:0;flex-direction:column;gap:3px;padding:10px 11px;border:1px solid rgba(119,147,220,.14);border-radius:11px;background:rgba(5,13,29,.56)}.controller-package-meta b{overflow:hidden;color:#eef4ff;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.controller-package-meta small{color:#7483a4;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.controller-package-summary details{border:1px solid rgba(119,147,220,.16);border-radius:13px;background:rgba(5,12,25,.46)}.controller-package-summary summary{cursor:pointer;padding:13px 15px;color:#b8c7ec;font-size:12px;font-weight:800}.controller-package-summary ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0;padding:2px 22px 16px 38px;color:#8e9bbb;font-size:11px;line-height:1.45}
.controller-package-preview{display:grid;grid-template-columns:auto minmax(180px,280px) auto;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:18px;border:1px solid rgba(72,145,255,.22);border-radius:16px;background:radial-gradient(circle at 50% 45%,rgba(30,118,255,.15),transparent 45%),#050d1d}.controller-preview-bank{display:grid;gap:4px}.controller-preview-bank i{display:block;width:9px;height:9px;border:1px solid #89a3cc;border-radius:2px;background:#20334f;box-shadow:0 0 6px rgba(91,152,255,.24)}.controller-preview-pcb{display:flex;min-height:108px;flex-direction:column;align-items:center;justify-content:center;border:2px solid rgba(34,211,238,.48);border-radius:15px;background:linear-gradient(145deg,#063238,#071b2d 58%,#04111f);box-shadow:inset 0 0 28px rgba(0,0,0,.32),0 12px 28px rgba(0,0,0,.25);text-align:center}.controller-preview-pcb span{color:#54dcea;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.controller-preview-pcb b{margin:6px 0;color:#f2f7ff;font:850 15px ui-monospace,monospace}.controller-preview-pcb small{color:#8297b7;font-size:10px}

.adaptive-board-map{position:relative;display:grid;grid-template-columns:minmax(210px,1fr) minmax(250px,330px) minmax(210px,1fr);align-items:center;gap:20px;min-height:440px;padding:24px;border:1px solid color-mix(in srgb,var(--board-accent) 25%,transparent);border-radius:22px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--board-accent) 13%,transparent),transparent 36%),linear-gradient(150deg,rgba(7,18,38,.94),rgba(3,9,20,.98));overflow:hidden}.adaptive-board-map:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(110,142,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(110,142,210,.035) 1px,transparent 1px);background-size:24px 24px}.adaptive-pin-bank{position:relative;z-index:2;display:grid;gap:7px}.adaptive-board-pin{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:7px 10px;border:1px solid rgba(111,137,199,.2);border-radius:10px;background:rgba(7,17,37,.92);color:#dce8ff;text-align:left;transition:.18s ease}.adaptive-board-pin:after{content:"";position:absolute;top:50%;width:21px;height:1px;background:rgba(110,137,199,.34)}.adaptive-board-pin.left:after{right:-21px}.adaptive-board-pin.right:after{left:-21px}.adaptive-board-pin:hover{z-index:3;border-color:var(--board-accent);transform:translateY(-1px);box-shadow:0 0 17px color-mix(in srgb,var(--board-accent) 22%,transparent)}.adaptive-board-pin.assigned{border-color:color-mix(in srgb,var(--board-accent) 52%,transparent);background:linear-gradient(115deg,color-mix(in srgb,var(--board-accent) 12%,rgba(7,17,37,.96)),rgba(7,17,37,.96))}.adaptive-board-pin span{display:flex;min-width:0;flex-direction:column;gap:2px}.adaptive-board-pin b{font:850 11px/1.2 ui-monospace,monospace}.adaptive-board-pin small{overflow:hidden;color:#7182a7;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.adaptive-board-pin i{display:grid;flex:0 0 18px;width:18px;height:18px;place-items:center;border-radius:50%;background:rgba(85,112,185,.2);color:#8297c9;font-size:10px;font-style:normal}.adaptive-board-pin.assigned i{background:color-mix(in srgb,var(--board-accent) 20%,transparent);color:var(--board-accent)}
.adaptive-pcb{position:relative;z-index:2;align-self:stretch;min-height:390px;border:2px solid color-mix(in srgb,var(--board-accent) 54%,#0e2636);border-radius:24px;background:linear-gradient(155deg,color-mix(in srgb,var(--board-accent) 12%,#062b2e),#061b23 52%,#04131b);box-shadow:inset 0 0 0 7px rgba(0,0,0,.16),inset 0 0 45px rgba(0,0,0,.35),0 18px 45px rgba(0,0,0,.38)}.adaptive-pcb:before,.adaptive-pcb:after{content:"";position:absolute;top:18px;bottom:18px;width:12px;border:2px solid rgba(222,198,141,.65);border-radius:6px;background:repeating-linear-gradient(180deg,#c6aa6c 0 5px,#111b22 5px 12px)}.adaptive-pcb:before{left:12px}.adaptive-pcb:after{right:12px}.adaptive-board-connector{position:absolute;top:-2px;left:50%;display:grid;transform:translateX(-50%);place-items:center}.adaptive-board-connector i{width:62px;height:26px;border:2px solid #a9bad2;border-top:0;border-radius:0 0 9px 9px;background:linear-gradient(#77859a,#273344)}.adaptive-board-connector span{margin-top:5px;color:#7d8aa5;font:750 8px ui-monospace,monospace}.adaptive-board-antenna{position:absolute;top:51px;left:50%;display:flex;width:108px;height:58px;align-items:flex-end;justify-content:space-around;transform:translateX(-50%);overflow:hidden}.adaptive-board-antenna i{width:20px;height:44px;border:2px solid color-mix(in srgb,var(--board-accent) 72%,#d7b96b);border-radius:50% 50% 0 0;border-bottom:0}.adaptive-board-antenna i:nth-child(2){height:58px}.adaptive-board-brand{position:absolute;top:128px;left:0;right:0;color:var(--board-accent);font:900 29px/1 Arial;text-align:center;letter-spacing:.2em;text-shadow:0 0 18px color-mix(in srgb,var(--board-accent) 52%,transparent)}.adaptive-board-model{position:absolute;top:166px;left:0;right:0;color:#edf8ff;font:850 11px/1.3 ui-monospace,monospace;text-align:center;letter-spacing:.12em}.adaptive-board-chip{position:absolute;top:222px;left:50%;display:grid;width:112px;height:92px;transform:translateX(-50%);place-items:center;border:3px solid #19252d;border-radius:7px;background:repeating-linear-gradient(90deg,#17252b 0 6px,#071116 6px 10px);box-shadow:0 0 0 1px color-mix(in srgb,var(--board-accent) 28%,transparent),0 0 28px rgba(0,0,0,.42)}.adaptive-board-chip span{max-width:86px;color:#99afbe;font:750 8px/1.3 ui-monospace,monospace;text-align:center}.adaptive-board-traces{position:absolute;inset:108px 34px 44px;opacity:.35;background:repeating-linear-gradient(28deg,transparent 0 14px,color-mix(in srgb,var(--board-accent) 35%,transparent) 15px 16px,transparent 17px 28px)}.adaptive-board-status{position:absolute;right:43px;bottom:48px;display:grid;place-items:center;color:#6f819b;font:750 7px ui-monospace,monospace}.adaptive-board-status i{width:13px;height:13px;margin-bottom:3px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px #22c55e}.adaptive-pcb>small{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);color:#70829a;font:700 8px ui-monospace,monospace;white-space:nowrap}.adaptive-board-map.dense{grid-template-columns:minmax(240px,1fr) 250px minmax(240px,1fr)}.adaptive-board-map.dense .adaptive-pin-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.adaptive-board-map.dense .adaptive-board-pin{min-width:0}.adaptive-board-map.dense .adaptive-board-pin small{display:none}
@media(max-width:1000px){.adaptive-board-map{grid-template-columns:1fr 1fr}.adaptive-pcb{grid-column:1/3;grid-row:1;min-height:310px}.adaptive-pin-bank{grid-row:2}.adaptive-board-brand{top:96px}.adaptive-board-model{top:134px}.adaptive-board-chip{top:176px;height:72px}.adaptive-board-antenna{display:none}.adaptive-board-map.dense .adaptive-pin-bank{grid-template-columns:1fr}}
@media(max-width:640px){.controller-package-summary ol{grid-template-columns:1fr}.controller-package-preview{grid-template-columns:auto minmax(140px,1fr) auto;padding:12px}.adaptive-board-map{grid-template-columns:1fr;padding:14px}.adaptive-pcb{grid-column:1;min-height:280px}.adaptive-pin-bank{grid-column:1}.adaptive-pin-bank.left{grid-row:2}.adaptive-pin-bank.right{grid-row:3}.adaptive-board-pin:after{display:none}}

/* Client-approved Pool workspace: asset-led, honest telemetry and user-built inventory. */
#page-pool{--pool-line:rgba(82,133,220,.22);--pool-card:#07162d;--pool-muted:#8297ba}
#page-pool .pool-command-hero{min-height:220px;border-radius:18px;background-position:center 58%;box-shadow:inset 0 -100px 90px rgba(2,9,21,.78)}
#page-pool .pool-command-hero:after{background:linear-gradient(90deg,rgba(2,9,21,.9) 0%,rgba(2,9,21,.26) 55%,rgba(2,9,21,.72) 100%)}
#page-pool .pool-workspace-tabs{position:sticky;top:0;z-index:9;grid-template-columns:repeat(9,minmax(88px,1fr));overflow-x:auto;scrollbar-width:thin}
#page-pool .pool-workspace-tabs button{white-space:nowrap}
#page-pool .pool-controller-status{padding:10px 13px;border-radius:13px}
#page-pool .pool-controller-status>header{margin:0}
#page-pool .pool-controller-status>header small{display:inline;margin-left:8px}
#page-pool .pool-controller-status>div{display:none}
.pool-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pool-equipment-filters{display:flex;gap:8px;margin:16px 0;overflow-x:auto;padding-bottom:2px}
.pool-equipment-filters button{min-height:34px;padding:7px 12px;border:1px solid var(--pool-line);border-radius:10px;background:#08162c;color:#91a5c5;font:inherit;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}
.pool-equipment-filters button.active{border-color:#5575ef;background:linear-gradient(135deg,rgba(47,103,223,.45),rgba(100,62,210,.42));color:#fff}
.pool-equipment-filters button:disabled{opacity:.35;cursor:not-allowed}
.pool-equipment-workspace .pool-equipment-stack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pool-equipment-workspace .pool-equipment-card.pool-equipment-pro{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;gap:10px;min-height:205px;padding:15px;border:1px solid var(--pool-line);border-radius:14px;background:radial-gradient(circle at 90% 0,rgba(66,106,232,.12),transparent 36%),linear-gradient(145deg,#091a34,#061226)}
.pool-equipment-workspace .pool-equipment-card.pool-equipment-pro>.pool-equipment-copy{min-width:0}
.pool-equipment-copy>em{display:block;margin-bottom:3px;color:#55a5ff;font-size:8px;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pool-equipment-workspace .pool-equipment-card>.pool-command-state{grid-column:1/-1;justify-self:stretch;justify-content:flex-start}
.pool-equipment-workspace .pool-equipment-card>.pool-mode-control{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
.pool-equipment-workspace .pool-equipment-card>[data-pool-toggle]{grid-column:1/-1;width:100%}
.pool-equipment-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid rgba(99,138,205,.14);color:#8195b4;font-size:9px}.pool-equipment-legend .good{color:#42dfa6}.pool-equipment-legend .info{color:#65b5ff}.pool-equipment-legend .warn{color:#ffc16d}.pool-equipment-legend .bad{color:#ff8d78}
.pool-water-lower{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:16px}
.pool-sensor-table{display:grid;gap:7px}.pool-sensor-table article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 11px;border:1px solid rgba(96,139,211,.14);border-radius:11px;background:#08162c}.pool-sensor-table article>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(59,134,245,.12);color:#68b7ff}.pool-sensor-table b,.pool-sensor-table small{display:block}.pool-sensor-table b{font-size:11px}.pool-sensor-table small{margin-top:3px;color:var(--pool-muted);font-size:9px}.pool-sensor-table strong{font-size:10px}.pool-sensor-table strong.live{color:#43dfa6}.pool-sensor-table strong.unknown{color:#f5bb67}
.pool-quality-summary{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center}.pool-quality-summary .pool-water-drop{display:grid;place-items:center;width:74px;height:74px;border:1px solid rgba(46,196,246,.35);border-radius:50%;background:radial-gradient(circle,rgba(33,179,234,.27),rgba(10,73,137,.12));color:#50d8f7;font-size:30px;box-shadow:0 0 35px rgba(32,166,240,.18)}.pool-quality-summary h2{margin:13px 0 5px}.pool-quality-summary p{max-width:300px;margin:0;color:var(--pool-muted);font-size:10px;line-height:1.5}.pool-status-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:17px;color:#93a7c5;font-size:9px;text-align:left}.pool-status-legend .live{color:#43dfa6}.pool-status-legend .warn{color:#ffc16d}.pool-status-legend .bad{color:#ff8473}
.pool-tanks-workspace .pool-tank-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pool-tanks-workspace .pool-tank{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.pool-tanks-workspace .pool-tank>div:last-child{width:100%}.pool-tanks-workspace .pool-tank footer{justify-content:center}.pool-tanks-workspace .pool-tank .btn{margin-top:10px}.pool-tank-empty{grid-column:1/-1;min-height:220px}.pool-tank-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:15px}.pool-tank-summary article{padding:12px;border:1px solid rgba(96,139,211,.14);border-radius:11px;background:#08162c;text-align:center}.pool-tank-summary b,.pool-tank-summary span{display:block}.pool-tank-summary b{font-size:18px}.pool-tank-summary span{margin-top:3px;color:#8499ba;font-size:9px}.pool-tank-summary .good b{color:#43dfa6}.pool-tank-summary .warn b{color:#ffc16d}.pool-tank-summary .bad b{color:#ff7f70}
.pool-tank-modal{width:min(780px,calc(100vw - 28px));max-height:min(880px,calc(100vh - 28px));overflow:auto}.pool-tank-form{display:grid;gap:13px;padding:18px}.pool-tank-form>section{display:grid;gap:12px;padding:15px;border:1px solid rgba(99,139,208,.16);border-radius:13px;background:rgba(6,18,39,.72)}.pool-tank-form label>span{display:block;margin-bottom:6px;color:#96a9c7;font-size:10px;font-weight:700}.pool-tank-form input,.pool-tank-form select{width:100%;min-height:42px;border:1px solid rgba(99,139,208,.22);border-radius:10px;background:#08162b;color:#edf4ff;padding:9px 11px;font:inherit}.pool-field-help{display:block;margin-top:6px;color:#748aaa;font-size:9px;line-height:1.45}.pool-rule-enable{display:flex!important;align-items:center;gap:11px;padding:11px;border:1px solid rgba(91,124,238,.25);border-radius:11px;background:rgba(62,82,190,.09)}.pool-rule-enable>input{width:18px!important;min-height:18px!important;accent-color:#6d5dfc}.pool-rule-enable b,.pool-rule-enable small{display:block}.pool-rule-enable small{margin-top:3px;color:#7f94b6;font-size:9px;line-height:1.4}.pool-rule-example{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:11px;border-radius:10px;background:rgba(38,174,214,.07);color:#8097b9;font-size:9px;line-height:1.45}.pool-rule-example b{color:#77c9ed}.pool-tank-rule{display:grid;gap:3px;margin-top:10px;padding:8px;border-radius:9px;background:rgba(94,118,159,.1);text-align:left}.pool-tank-rule strong{font-size:9px;color:#97abd0}.pool-tank-rule span{font-size:8px;color:#6f85a8;line-height:1.35}.pool-tank-rule.armed strong{color:#43dfa6}.pool-tank-rule.waiting strong{color:#ffc16d}.pool-tank-rules{display:grid;gap:9px}.pool-tank-rules>article{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:11px;padding:12px;border:1px solid rgba(96,139,211,.15);border-radius:12px;background:#08162c}.pool-tank-rules>article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(53,126,238,.12);color:#69b9ff}.pool-tank-rules b,.pool-tank-rules small,.pool-tank-rules em{display:block}.pool-tank-rules small,.pool-tank-rules em{margin-top:3px;color:#768caf;font-size:9px;font-style:normal}.pool-tank-rules strong{color:#9aadd0;font-size:9px}.pool-tank-rules .armed strong{color:#43dfa6}.pool-tank-rules .waiting strong{color:#ffc16d}
.rd-control-card.setup-pending,.rp-device.setup-pending{border-color:rgba(255,181,77,.34);background:rgba(255,160,42,.06)}
.pool-equipment-card.setup-pending{border-color:rgba(255,181,77,.34)!important;background:linear-gradient(145deg,rgba(43,31,22,.92),#071326)!important}
.rd-control-card.setup-pending>em,.rp-device.setup-pending>em{color:#ffc16d;font-size:10px;font-style:normal;font-weight:800;white-space:nowrap}
.rd-control-pending{display:grid;gap:8px}.rd-control-pending>h4{color:#ffc16d}
.raf-pool-catalog{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:13px 0}.raf-pool-catalog .raf-field{margin:0}.raf-pool-catalog small{display:block;margin-top:6px;color:#7f94b5;font-size:9px;line-height:1.4}
@media(max-width:1250px){.pool-equipment-workspace .pool-equipment-stack{grid-template-columns:repeat(3,minmax(0,1fr))}.pool-tanks-workspace .pool-tank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.pool-equipment-workspace .pool-equipment-stack{grid-template-columns:repeat(2,minmax(0,1fr))}.pool-water-lower{grid-template-columns:1fr}.pool-tanks-workspace .pool-tank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.raf-pool-catalog{grid-template-columns:1fr}}
@media(max-width:900px){.pool-tank-form .cols-3{grid-template-columns:1fr}.pool-tank-rules>article{grid-template-columns:34px minmax(0,1fr) auto}.pool-tank-rules>article>.btn{grid-column:2/-1;justify-self:start}}
@media(max-width:600px){.pool-equipment-workspace .pool-equipment-stack,.pool-tanks-workspace .pool-tank-grid,.pool-tank-summary{grid-template-columns:1fr}.pool-head-actions{width:100%}.pool-head-actions .btn{flex:1}.pool-tank-rules>article{grid-template-columns:34px 1fr}.pool-tank-rules>article>strong,.pool-tank-rules>article>.btn{grid-column:2}.pool-rule-example{grid-template-columns:1fr}}

/* Gate Control — customer operation and installer commissioning. */
.topbar>div:first-child{flex:0 0 260px;min-width:0}.topbar #page-title{white-space:nowrap}.topbar #page-sub{display:block;max-width:260px;line-height:1.35}
@media(max-width:1250px){.topbar>.search-box{display:none}}
#page-security{--gate-line:rgba(97,132,211,.18);--gate-card:#08162c;display:none;gap:12px}
#page-security.active{display:grid!important;grid-template-rows:auto auto auto!important;height:auto!important;overflow:visible!important}
.gate-command-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:5px 4px}.gate-command-header h2{margin:3px 0 2px;font-size:23px}.gate-command-header p{margin:0;color:#8293b1;font-size:11px}.gate-command-health{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#page-security .security-workspace-tabs{position:sticky;top:0;z-index:12;display:flex;gap:7px;min-height:46px;padding:6px;border:1px solid var(--gate-line);border-radius:13px;background:rgba(5,12,26,.95);backdrop-filter:blur(14px)}#page-security .security-workspace-tabs button{min-height:32px;padding:0 16px;border:1px solid transparent;border-radius:9px;background:transparent;color:#8495b2;font:700 10px var(--font);cursor:pointer}#page-security .security-workspace-tabs button.active{border-color:rgba(103,121,255,.42);background:linear-gradient(135deg,rgba(55,96,220,.4),rgba(126,55,215,.32));color:#fff}
#page-security [data-security-panel]{display:none!important}#page-security [data-security-panel].active{display:grid!important;height:auto!important;overflow:visible!important}.security-control-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,.55fr);gap:12px}.security-control-grid>.panel{min-height:510px}.gate-side-stack{display:grid;align-content:start;gap:12px}.gate-side-stack>.panel{margin:0;padding:16px}
#page-security .security-hero-panel{position:relative;min-height:510px!important;padding:18px!important;overflow:hidden!important}.security-hero-panel .gate-panel{display:grid!important;grid-template-columns:minmax(180px,.55fr) 112px minmax(360px,1.5fr) auto;align-items:center;height:100%!important;gap:18px!important}.security-hero-panel .gate-info{align-self:start;padding-top:12px}.security-hero-panel .gate-stage{position:relative;min-width:0!important;height:440px!important;border-radius:16px;overflow:hidden}.security-hero-panel .gate-actions{align-self:center}.security-hero-panel .gate-actions .btn{min-width:118px}
.gate-camera-player{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(3,9,19,.72);color:#7f91af;text-align:center}.gate-camera-player>span{font-size:24px;color:#5a76c9}.gate-camera-player>b{color:#dbe5f8;font-size:12px}.gate-camera-player>small{max-width:230px;font-size:9px}.gate-camera-player iframe,.gate-camera-player img{width:100%;height:100%;border:0;object-fit:cover;background:#030811}.gate-camera-live-label{position:absolute!important;top:12px;left:12px;padding:5px 8px;border-radius:999px;background:rgba(3,8,17,.75);color:#fff!important;font-size:8px!important}.gate-camera-expand{position:absolute;right:12px;bottom:12px;z-index:8;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(4,10,22,.78);color:#fff;font:700 8px var(--font);cursor:pointer}
.security-camera-workspace.active{display:grid!important;gap:12px}.security-camera-head{padding:14px 4px}.security-camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.security-camera-card{display:grid!important;gap:12px;margin:0!important;padding:14px!important}.security-camera-feed,.security-camera-test-preview{position:relative;min-height:230px;overflow:hidden;border:1px solid rgba(104,139,206,.18);border-radius:13px;background:radial-gradient(circle at 50% 35%,rgba(54,89,170,.16),transparent 45%),#030a16}.security-camera-feed iframe,.security-camera-feed img,.security-camera-test-preview iframe,.security-camera-test-preview img{width:100%;height:100%;min-height:230px;border:0;object-fit:cover;background:#030811}.security-camera-feed>span{position:absolute;inset:0;display:grid;place-items:center;color:#7689a8;font-size:10px}.security-camera-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.security-camera-meta h3{margin:3px 0;font-size:15px}.security-camera-meta p{margin:0;color:#7e91b0;font-size:9px}.security-camera-actions{display:flex;gap:7px}.security-camera-actions .danger{margin-left:auto;color:#ff8179}.security-camera-empty{grid-column:1/-1;display:flex;min-height:360px;flex-direction:column;align-items:center;justify-content:center;border:1px dashed rgba(105,135,205,.28);border-radius:16px;background:rgba(8,20,40,.6);text-align:center}.security-camera-empty>span{font-size:32px;color:#6f85d8}.security-camera-empty>b{margin-top:10px;font-size:16px}.security-camera-empty>p{max-width:430px;color:#7e90ad;font-size:10px}.security-camera-editor{display:grid!important;gap:10px;margin:0!important;padding:17px!important}.security-camera-editor label{display:block}.security-camera-editor label>span{display:block;margin:0 0 5px;color:#91a3bf;font-size:8px;font-weight:700}.security-camera-editor input,.security-camera-editor select{width:100%;min-height:39px;border:1px solid rgba(104,139,206,.22);border-radius:9px;background:#08162c;color:#e9effc;padding:8px 10px;font:inherit;font-size:10px}.security-camera-editor-actions{display:flex;align-items:center;gap:8px}.security-camera-editor-actions .spacer{flex:1}.security-camera-test-preview{min-height:280px}.security-camera-test-preview iframe,.security-camera-test-preview img{min-height:280px}
.security-camera-editor[hidden],.security-camera-test-preview[hidden]{display:none!important}
.gate-safety-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.gate-safety-chips span{padding:5px 7px;border:1px solid rgba(110,134,194,.15);border-radius:7px;background:rgba(73,93,142,.1);color:#8897b1;font-size:7px;font-weight:700}.gate-safety-chips .clear{border-color:rgba(52,213,146,.23);background:rgba(44,190,128,.09);color:#60dba2}.gate-safety-chips .blocked{border-color:rgba(255,102,91,.28);background:rgba(221,62,54,.1);color:#ff887e}
#page-security .gate-ring.open{background:conic-gradient(#ffad48 0 360deg,rgba(255,255,255,.08) 0)}#page-security .gate-ring.opening,#page-security .gate-ring.closing{background:conic-gradient(#5a8cff 0 260deg,rgba(255,255,255,.08) 260deg);animation:gate-status-spin 1.4s linear infinite}#page-security .gate-ring.fault{background:conic-gradient(#ff635c 0 360deg,rgba(255,255,255,.08) 0);box-shadow:0 0 38px rgba(255,73,68,.25)}#page-security .gate-ring.unknown,#page-security .gate-ring.between{background:conic-gradient(#6b7894 0 210deg,rgba(255,255,255,.07) 210deg);box-shadow:none}@keyframes gate-status-spin{to{transform:rotate(360deg)}}
.gate-light-mode{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.gate-light-mode button{height:36px;border:1px solid var(--gate-line);border-radius:9px;background:#0a1931;color:#8496b4;font:700 9px var(--font);cursor:pointer}.gate-light-mode button.active{border-color:#6575f5;background:linear-gradient(135deg,#284da8,#6230a6);color:#fff}.gate-light-card>p{margin:0;color:#7e90ad;font-size:9px;line-height:1.55}
.gate-history-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(104,133,194,.1)}.gate-history-row:last-child{border:0}.gate-history-row>i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(75,105,206,.12);color:#83a2ff;font-style:normal}.gate-history-row.bad>i{background:rgba(221,65,57,.1);color:#ff8177}.gate-history-row.good>i{background:rgba(45,195,133,.1);color:#5adba1}.gate-history-row b,.gate-history-row span{display:block}.gate-history-row b{font-size:9px}.gate-history-row span{margin-top:2px;color:#7184a4;font-size:7px}.gate-history-row time{color:#71809b;font-size:7px;white-space:nowrap}.security-history-panel{display:none}.security-history-panel.active{display:block!important;min-height:460px!important}.security-history-list{display:grid}.security-empty{display:flex;min-height:320px;flex-direction:column;align-items:center;justify-content:center;color:#7487a5;text-align:center}.security-empty>span{font-size:30px}.security-empty>b{margin-top:9px;color:#dbe4f5}.security-empty>p{font-size:10px}
.security-setup.active{display:grid!important;gap:12px}.security-setup-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px;border:1px solid var(--gate-line);border-radius:15px;background:radial-gradient(circle at 90% 0,rgba(80,71,223,.14),transparent 35%),#07152b}.security-setup-intro h2{margin:4px 0}.security-setup-intro p{max-width:760px;margin:0;color:#8497b7;font-size:10px;line-height:1.55}.security-setup-progress{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.security-setup-progress>span{display:flex;gap:5px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(95,114,158,.1);color:#8090ae;font-size:7px;font-weight:700}.security-setup-progress>span.done{background:rgba(43,198,133,.1);color:#58d99f}.security-setup-progress>b{width:100%;color:#f1b861;font-size:8px;text-align:right}
.security-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.security-setup-card{position:relative;display:grid!important;grid-template-columns:34px minmax(0,1fr);gap:12px;margin:0!important;padding:16px!important;overflow:visible!important}.security-setup-card.camera{grid-column:1/-1}.security-setup-card.compulsory{border-color:rgba(255,174,72,.25)}.setup-number{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2c55bc,#7039b7);color:#fff;font:800 11px var(--mono)}.security-setup-card h3{margin:2px 0 4px;font-size:14px}.security-setup-card p{margin:0 0 12px;color:#7e91b0;font-size:9px;line-height:1.5}.security-setup-card label{display:block;margin-top:10px}.security-setup-card label>span{display:block;margin-bottom:5px;color:#91a3bf;font-size:8px;font-weight:700}.security-setup-card input,.security-setup-card select{width:100%;min-height:39px;border:1px solid rgba(104,139,206,.22);border-radius:9px;background:#08162c;color:#e9effc;padding:8px 10px;font:inherit;font-size:10px}.security-inline-unit{display:grid;grid-template-columns:1fr auto;align-items:center}.security-inline-unit input{border-radius:9px 0 0 9px}.security-inline-unit small{height:39px;padding:11px 10px;border:1px solid rgba(104,139,206,.22);border-left:0;border-radius:0 9px 9px 0;background:#0b1a32;color:#778aa8;font-size:8px}.security-setup-footer{position:sticky;bottom:8px;z-index:11;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center;padding:13px 15px;border:1px solid rgba(105,131,215,.25);border-radius:13px;background:rgba(6,14,29,.96);box-shadow:0 14px 38px rgba(0,0,0,.35);backdrop-filter:blur(14px)}.security-setup-footer b,.security-setup-footer span{display:block}.security-setup-footer b{font-size:10px}.security-setup-footer span{margin-top:3px;color:#7588a7;font-size:8px}
@media(max-width:1250px){.security-control-grid{grid-template-columns:1fr}.gate-side-stack{grid-template-columns:1fr 1fr}.security-hero-panel .gate-panel{grid-template-columns:minmax(180px,.55fr) 100px minmax(330px,1.45fr) auto}}
@media(max-width:900px){.security-hero-panel .gate-panel{grid-template-columns:1fr}.security-hero-panel .gate-ring{display:none}.security-hero-panel .gate-stage{height:340px!important}.security-hero-panel .gate-actions{display:grid;grid-template-columns:repeat(2,1fr)}.security-hero-panel .gate-actions .btn{width:100%}.security-setup-grid,.security-camera-grid{grid-template-columns:1fr}.security-setup-card.camera{grid-column:auto}.security-setup-intro{align-items:flex-start;flex-direction:column}.security-setup-progress{justify-content:flex-start}.security-setup-progress>b{text-align:left}.gate-side-stack{grid-template-columns:1fr}}
@media(max-width:620px){.gate-command-header{align-items:flex-start;flex-direction:column}.gate-command-health{justify-content:flex-start}.security-setup-footer{grid-template-columns:1fr}.security-control-grid>.panel{min-height:0}.security-hero-panel .gate-stage{height:260px!important}}

/* Premium AURA navigation rail — approved compact/glowing direction. */
@property --aura-rail-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.shell{transition:grid-template-columns .24s ease}
.sidebar{inset:10px auto 10px 10px;width:calc(var(--sidebar-w) - 20px);height:calc(100dvh - 20px);padding:16px 12px;border:1px solid rgba(84,119,238,.28);border-radius:15px;background:radial-gradient(circle at 50% 0,rgba(29,74,155,.14),transparent 26%),linear-gradient(180deg,#061022,#050b17 58%,#07101e);box-shadow:0 20px 58px rgba(0,0,0,.38),0 0 32px rgba(47,92,211,.08);overflow:hidden}
.sidebar::before{content:"";position:absolute;inset:-1px;z-index:3;padding:1px;border-radius:16px;background:conic-gradient(from var(--aura-rail-angle),transparent 0 15%,#53c8ff 22%,#615cff 30%,transparent 39% 67%,#b34cff 75%,#43d8ff 82%,transparent 91%);pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:auraRailOrbit 7s linear infinite;filter:drop-shadow(0 0 5px rgba(76,156,255,.9))}
.sidebar::after{content:"";position:absolute;top:-24%;right:-1px;z-index:4;width:2px;height:22%;border-radius:99px;background:linear-gradient(180deg,transparent,#7de4ff,#715cff,transparent);box-shadow:0 0 12px #5abfff;pointer-events:none;animation:auraRailRun 4.2s ease-in-out infinite}
@keyframes auraRailOrbit{to{--aura-rail-angle:360deg}}
@keyframes auraRailRun{0%{top:-24%;opacity:0}12%{opacity:1}78%{opacity:1}100%{top:102%;opacity:0}}
.brand{position:relative;justify-content:center;gap:9px;min-height:78px;padding:3px 28px 15px 4px;border-bottom:1px solid rgba(111,137,206,.12)}
.brand-mark{width:44px;height:44px;border-radius:0;background:linear-gradient(155deg,#38dcff 5%,#2784ff 48%,#7755ff 92%);font-size:29px;font-weight:900;line-height:1;color:#071225;clip-path:polygon(50% 0,100% 100%,71% 88%,50% 42%,29% 88%,0 100%);transform:none;box-shadow:none;filter:drop-shadow(0 0 11px rgba(48,164,255,.7))}
.brand-copy{min-width:0}.brand h1{font-size:17px;letter-spacing:.16em}.brand span{font-size:6.5px;letter-spacing:.19em;white-space:nowrap}
.sidebar-toggle{position:absolute;top:4px;right:0;z-index:6;display:grid;place-items:center;width:27px;height:27px;border:1px solid rgba(112,141,218,.2);border-radius:50%;background:#101a36;color:#b9c8e8;font:700 20px/1 var(--font);cursor:pointer;transition:transform .24s ease,background .2s ease,box-shadow .2s ease}.sidebar-toggle:hover{background:#192852;box-shadow:0 0 16px rgba(84,126,255,.36)}
.side-nav{position:relative;z-index:5;gap:3px;padding:10px 0 6px}.side-nav .tab{position:relative;min-height:38px;padding:7px 12px;border-radius:9px;color:#c1cadc;font-size:12px;font-weight:500;overflow:hidden}.side-nav .tab i{width:22px;color:#a7b4cb;font-size:17px}.side-nav .tab:hover{border-color:rgba(73,126,255,.2);background:rgba(35,71,139,.15)}
.side-nav .tab.active{border-color:#417dff;background:linear-gradient(100deg,rgba(34,83,199,.8),rgba(48,42,139,.44));box-shadow:inset 3px 0 0 #42caff,0 0 18px rgba(46,104,255,.3);text-shadow:0 0 12px rgba(255,255,255,.16)}
.side-nav .tab.active::after{content:"";position:absolute;inset:0;transform:translateX(-125%);background:linear-gradient(105deg,transparent 34%,rgba(102,215,255,.2) 48%,transparent 62%);animation:auraNavSweep 3.8s ease-in-out infinite}.side-nav .tab.active i{color:#dce9ff;filter:drop-shadow(0 0 5px #6c9dff)}
@keyframes auraNavSweep{0%,35%{transform:translateX(-125%)}75%,100%{transform:translateX(125%)}}
.side-foot{position:relative;z-index:5;gap:8px;margin-top:7px;padding-top:11px;border-color:rgba(112,139,207,.14)}
.sidebar-controller-card{padding:10px;border:1px solid rgba(92,124,204,.2);border-radius:10px;background:linear-gradient(145deg,rgba(13,28,57,.92),rgba(6,15,31,.96));box-shadow:inset 0 1px rgba(255,255,255,.025)}.sidebar-controller-card>span,.sidebar-controller-card>b{display:block}.sidebar-controller-card>span{color:#7587aa;font-size:7px;text-transform:uppercase;letter-spacing:.12em}.sidebar-controller-card>b{margin-top:4px;font-size:10px}.sidebar-controller-card .side-status{padding:6px 0 0;font-size:8px}.sidebar-controller-card .dot{width:6px;height:6px}
.sidebar-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 10px!important;border-radius:8px!important;font-size:9px!important;text-transform:uppercase;letter-spacing:.04em}.sidebar-action i{display:grid;place-items:center;width:18px;font-size:15px;font-style:normal}.sidebar-action.blackout{border-color:rgba(249,129,34,.65);background:rgba(109,47,13,.16);color:#ffae45;box-shadow:inset 0 0 12px rgba(255,116,24,.06)}.sidebar-action.emergency{border-color:#ff263d;background:linear-gradient(180deg,rgba(132,16,34,.5),rgba(75,8,21,.55));color:#ff7080;box-shadow:0 0 16px rgba(255,35,57,.24),inset 0 0 15px rgba(255,35,57,.12)}
.sidebar #btn-reset-estop:disabled{display:none!important}
.profile-card{min-height:51px;border-color:rgba(100,128,195,.18);background:rgba(8,18,37,.86)}.profile-avatar{box-shadow:0 0 15px rgba(84,94,255,.32)}.profile-copy{min-width:0}.profile-copy b,.profile-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell.sidebar-collapsed{grid-template-columns:88px 1fr}.shell.sidebar-collapsed .sidebar{width:68px}.shell.sidebar-collapsed .brand{justify-content:center;min-height:62px;padding:0 0 13px}.shell.sidebar-collapsed .brand-mark{width:36px;height:36px;font-size:24px}.shell.sidebar-collapsed .brand-copy,.shell.sidebar-collapsed .side-nav .tab b,.shell.sidebar-collapsed .sidebar-controller-card>span,.shell.sidebar-collapsed .sidebar-controller-card>b,.shell.sidebar-collapsed .side-status span,.shell.sidebar-collapsed .sidebar-action span,.shell.sidebar-collapsed .profile-copy{display:none}.shell.sidebar-collapsed .sidebar-toggle{top:-6px;right:-4px;transform:rotate(180deg)}.shell.sidebar-collapsed .side-nav .tab{justify-content:center;padding:9px}.shell.sidebar-collapsed .side-nav .tab i{width:22px}.shell.sidebar-collapsed .sidebar-controller-card{display:grid;place-items:center;min-height:43px;padding:8px}.shell.sidebar-collapsed .sidebar-controller-card .side-status{padding:0}.shell.sidebar-collapsed .sidebar-action{width:42px;min-width:42px;margin-inline:auto;padding:8px!important}.shell.sidebar-collapsed .profile-card{justify-content:center;padding:8px}.shell.sidebar-collapsed .profile-avatar{width:34px;height:34px}
@media(prefers-reduced-motion:reduce){.sidebar::before,.sidebar::after,.side-nav .tab.active::after{animation:none}}
@media(max-width:860px){.shell.sidebar-collapsed{grid-template-columns:1fr}.shell.sidebar-collapsed .sidebar{width:100%}.sidebar{inset:auto;width:100%;height:auto;border-radius:0}.sidebar::before,.sidebar::after,.sidebar-toggle{display:none}.brand{justify-content:flex-start;min-height:0;border:0}.brand-mark{width:34px;height:34px;font-size:21px}.shell.sidebar-collapsed .brand-copy,.shell.sidebar-collapsed .side-nav .tab b,.shell.sidebar-collapsed .profile-copy{display:block}.shell.sidebar-collapsed .side-nav .tab{justify-content:flex-start;padding:9px 14px}.sidebar-controller-card{display:none}}

/* Unified AURA canvas palette — the navigation rail and every destination now
   sit on the same navy-black foundation. Blue remains an interaction accent,
   rather than changing the perceived background from page to page. */
:root{
  --bg:#050b17;
  --bg-2:#06101f;
  --panel:#091426;
  --panel-2:#0a172a;
  --panel-solid:#071221;
  --sidebar-bg:#061022;
  --aura-canvas:#050b17;
  --aura-canvas-deep:#030812;
  --aura-surface:#091426;
}
body{
  background:var(--aura-canvas-deep);
}
body::before{
  background:
    radial-gradient(820px 520px at 8% -8%,rgba(45,102,205,.105),transparent 62%),
    radial-gradient(760px 520px at 94% 0%,rgba(104,73,201,.07),transparent 64%),
    linear-gradient(180deg,var(--aura-canvas),var(--aura-canvas-deep));
}
.main{
  background:
    radial-gradient(900px 520px at 12% -10%,rgba(45,102,205,.07),transparent 64%),
    linear-gradient(180deg,var(--aura-canvas),var(--aura-canvas-deep));
}
.topbar{
  background:linear-gradient(180deg,rgba(5,11,23,.98) 0%,rgba(5,11,23,.94) 82%,rgba(5,11,23,0) 100%);
}
.sidebar{
  background:
    radial-gradient(circle at 50% 0,rgba(29,74,155,.105),transparent 27%),
    linear-gradient(180deg,var(--aura-canvas),var(--aura-canvas-deep) 62%,var(--aura-canvas));
}
.main>.page,
.main>.page.active,
#page-system.active{
  background:transparent;
}
.panel,
.stat-card,
.rooms-master-panel,
.automation-mini-panel{
  border-color:rgba(94,128,202,.15);
}
@media(max-width:860px){
  .main{background:linear-gradient(180deg,var(--aura-canvas),var(--aura-canvas-deep))}
}

/* One professional line-icon family for the complete navigation rail. */
.side-nav .tab i{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  flex:0 0 25px;
  border:1px solid transparent;
  border-radius:7px;
  background:rgba(99,126,184,.035);
  font-size:0;
}
.side-nav .tab i svg{
  width:19.5px;
  height:19.5px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.side-nav .tab:hover i{border-color:rgba(105,139,212,.12);background:rgba(74,103,169,.08)}
.side-nav .tab.active i{border-color:rgba(105,152,255,.2);background:rgba(78,116,230,.14)}
.side-nav .tab.active i svg{stroke-width:1.85}

/* Pool visual-system alignment. Water cyan identifies readings and live
   telemetry only; containers use the same neutral AURA surfaces as Rooms,
   Security and Automation. */
#page-pool{
  --pool-line:rgba(94,128,202,.15);
  --pool-card:var(--aura-surface);
  --pool-muted:#8796b1;
}
#page-pool .pool-workspace-tabs{
  border-color:rgba(94,128,202,.15);
  background:rgba(7,15,29,.9);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
#page-pool .pool-workspace-tabs button{
  color:#929eb5;
}
#page-pool .pool-workspace-tabs button:hover{
  color:#e4eaf6;
  background:rgba(79,127,255,.07);
}
#page-pool .pool-workspace-tabs button.active{
  border:1px solid rgba(92,113,255,.38);
  background:linear-gradient(135deg,rgba(55,82,190,.36),rgba(109,55,189,.28));
  box-shadow:inset 0 0 0 1px rgba(115,139,255,.08);
}
#page-pool .pool-workspace-content .panel,
#page-pool .pool-controller-status,
#page-pool .pool-summary-grid>article,
#page-pool .pool-home-status>article,
#page-pool .pool-metric,
#page-pool .pool-equipment-card,
#page-pool .pool-equipment-card.pool-equipment-pro,
#page-pool .pool-tank,
#page-pool .pool-tank-summary article,
#page-pool .pool-tank-rules>article,
#page-pool .pool-ambience-flow>article,
#page-pool .pool-ambience-circuits article,
#page-pool .pool-music-routing-summary article,
#page-pool .pool-sequence-library article{
  border-color:rgba(94,128,202,.15);
  background:
    linear-gradient(150deg,rgba(255,255,255,.022),transparent 58%),
    var(--aura-surface);
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}
#page-pool .pool-controller-status{
  background:
    radial-gradient(circle at 96% 0,rgba(79,99,209,.075),transparent 36%),
    var(--aura-surface);
}
#page-pool .pool-equipment-filters button,
#page-pool .pool-mode-control,
#page-pool .pool-mode-control button,
#page-pool .pool-tank-form input,
#page-pool .pool-tank-form select{
  border-color:rgba(94,128,202,.16);
  background:#081426;
}
#page-pool .pool-equipment-filters button.active,
#page-pool .pool-mode-control button.active{
  border-color:rgba(92,113,255,.4);
  background:linear-gradient(135deg,rgba(55,82,190,.44),rgba(109,55,189,.34));
}
#page-pool .pool-command-hero{
  border-color:rgba(94,128,202,.18);
}
#page-pool .pool-hero-actions{
  border-color:rgba(94,128,202,.18);
  background:rgba(5,12,25,.82);
}
#page-pool .pool-room-empty,
#page-pool .pool-linked-head,
#page-pool .pool-linked-card,
#page-pool .pool-asset-strip,
#page-pool .pool-empty-workspace,
#page-pool .pool-maintenance-list article{
  border-color:rgba(94,128,202,.15);
  background:
    linear-gradient(150deg,rgba(255,255,255,.02),transparent 60%),
    var(--aura-surface);
}
#page-pool .pool-empty-workspace{
  box-shadow:0 16px 36px rgba(0,0,0,.15);
}
#page-pool .pool-empty-workspace>span{
  color:#73a7ff;
  filter:drop-shadow(0 0 12px rgba(73,111,255,.28));
}

/* Pool shell convergence — preserve the approved pool photograph, but make
   the hierarchy, density and chroma match the other operational pages. */
#page-pool.active{
  display:block!important;
}
#page-pool .pool-command-hero{
  min-height:148px;
  margin:0 0 12px;
  padding:20px 22px;
  border:1px solid rgba(94,128,202,.15);
  border-radius:16px;
  background-image:
    linear-gradient(90deg,rgba(4,9,20,.96) 0%,rgba(5,11,23,.82) 42%,rgba(5,11,23,.52) 70%,rgba(5,11,23,.76) 100%),
    url('img/aura-pool-night-v1.png');
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
#page-pool .pool-command-hero:after{
  background:linear-gradient(180deg,transparent 48%,rgba(3,8,18,.66));
}
#page-pool .pool-command-hero h2{
  margin:5px 0;
  font-size:21px;
  letter-spacing:-.015em;
}
#page-pool .pool-command-hero p{
  color:#a2aec3;
  font-size:11px;
}
#page-pool .pool-hero-actions{
  min-width:285px;
  padding:11px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
#page-pool .pool-room-context{
  margin:0 0 12px;
}
#page-pool .pool-room-empty{
  display:none;
}
#page-pool .pool-room-empty,
#page-pool .pool-linked-head{
  min-height:76px;
  padding:14px 16px;
  border-radius:13px;
}
#page-pool .pool-room-empty h3,
#page-pool .pool-linked-head h3{
  margin:3px 0;
  font-size:16px;
}
#page-pool .pool-workspace-tabs{
  position:relative;
  top:auto;
  min-height:46px;
  margin:0 0 12px;
  padding:6px;
  border-radius:13px;
  backdrop-filter:blur(14px);
}
#page-pool .pool-workspace-tabs button{
  min-height:32px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:10px;
  font-weight:700;
}
#page-pool .pool-workspace-tabs button.active{
  border-color:rgba(103,121,255,.42);
  background:linear-gradient(135deg,rgba(55,96,220,.4),rgba(126,55,215,.32));
}
#page-pool .pool-workspace-content{
  gap:12px;
}
#page-pool .pool-empty-workspace{
  min-height:245px;
  padding:30px;
  border-radius:15px;
}
#page-pool .pool-empty-workspace>span{
  font-size:34px;
}
#page-pool .pool-empty-workspace h2{
  margin:8px 0 4px;
  font-size:18px;
}
@media(max-width:720px){
  #page-pool .pool-command-hero{min-height:220px;padding:18px}
  #page-pool .pool-hero-actions{min-width:0;width:100%}
}

/* System is deliberately template-first. Manual pin editing is an installer
   recovery/custom path, never a competing customer setup choice. */
#page-system.active{display:block!important}
.system-command-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
  padding:20px 22px;
  border:1px solid rgba(94,128,202,.15);
  border-radius:16px;
  background:
    radial-gradient(circle at 92% 0,rgba(92,78,214,.1),transparent 34%),
    var(--aura-surface);
}
.system-command-header h2{margin:5px 0 4px;font-size:22px}
.system-command-header p{max-width:760px;margin:0;color:#8795ae;font-size:11px;line-height:1.5}
.system-primary-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px}
.system-destination{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:1fr auto;
  gap:12px;
  min-height:190px;
  padding:18px;
  overflow:hidden;
  border:1px solid rgba(94,128,202,.15);
  border-radius:15px;
  background:
    linear-gradient(150deg,rgba(255,255,255,.024),transparent 58%),
    var(--aura-surface);
  color:var(--txt);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.system-destination:hover{transform:translateY(-2px);border-color:rgba(101,128,238,.42);box-shadow:0 18px 42px rgba(0,0,0,.22)}
.system-destination.primary{border-color:rgba(81,117,255,.38);background:radial-gradient(circle at 88% 8%,rgba(68,100,255,.24),transparent 42%),linear-gradient(145deg,rgba(12,30,61,.98),rgba(8,16,34,.98));box-shadow:inset 0 0 40px rgba(48,76,216,.06)}
.system-destination.primary>i{border-color:rgba(101,139,255,.46);background:linear-gradient(145deg,rgba(49,104,234,.34),rgba(119,58,210,.25));box-shadow:0 0 26px rgba(67,96,255,.2)}
.system-destination.service{opacity:.88}
.system-destination>i{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(105,129,220,.2);border-radius:13px;background:rgba(78,96,211,.12);color:#9cb3ff;font-style:normal}
.system-destination>i svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.system-destination>span{min-width:0}.system-destination small,.system-destination b,.system-destination em{display:block}.system-destination small{color:#7185aa;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.system-destination b{margin-top:7px;font-size:17px}.system-destination em{margin-top:7px;color:#8b9ab4;font-size:10px;font-style:normal;line-height:1.5}.system-destination>strong{grid-column:1/-1;align-self:end;padding-top:12px;border-top:1px solid rgba(103,130,193,.12);color:#8ba9ff;font-size:9px}
.system-installer-entry{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;margin-top:12px;padding:13px 16px;border:1px solid rgba(94,128,202,.13);border-radius:13px;background:rgba(8,17,33,.78);color:var(--txt);text-align:left;cursor:pointer}.system-installer-entry:hover{border-color:rgba(103,128,230,.34);background:rgba(10,22,43,.9)}.system-installer-entry b,.system-installer-entry small{display:block}.system-installer-entry b{font-size:12px}.system-installer-entry small{margin-top:3px;color:#7788a5;font-size:9px}.system-installer-entry strong{color:#8ca7e8;font-size:9px}

/* Hardware & I/O is a single workflow: connect, assign, then service. */
.device-hub-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.hardware-connection-view{display:grid;gap:14px}
.hardware-connection-view .controller-platform-hero{margin:0}
.controller-catalog-panel{margin:0;padding:18px}.controller-catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.controller-catalog-card{display:grid;grid-template-rows:auto auto auto auto;gap:14px;min-width:0;padding:17px;border:1px solid rgba(91,122,196,.2);border-radius:17px;background:linear-gradient(150deg,rgba(13,28,53,.94),rgba(5,13,28,.96));transition:.18s ease}.controller-catalog-card:hover,.controller-catalog-card.selected{border-color:rgba(88,111,255,.58);box-shadow:0 12px 34px rgba(4,9,24,.32),inset 0 0 28px rgba(62,88,255,.06)}.controller-catalog-card header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}.controller-catalog-card header>div:nth-child(2){min-width:0}.controller-catalog-mark{display:grid;width:42px;height:42px;place-items:center;border:1px solid rgba(91,123,255,.42);border-radius:12px;background:linear-gradient(145deg,rgba(37,99,235,.3),rgba(124,58,237,.22));color:#dce8ff;font-size:12px;font-weight:900}.controller-catalog-card header span{color:#7189ba;font-size:8px;font-weight:900;letter-spacing:.12em}.controller-catalog-card header h3{overflow:hidden;margin:4px 0 2px;color:#f1f5ff;font-size:16px;text-overflow:ellipsis;white-space:nowrap}.controller-catalog-card header p{overflow:hidden;margin:0;color:#8795b2;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.controller-catalog-card header>i{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:rgba(78,96,211,.14);color:#8fa8ff;font-style:normal}.controller-catalog-board{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:9px;min-height:76px;padding:10px;border:1px solid rgba(91,122,196,.14);border-radius:13px;background:radial-gradient(circle at 50% 45%,rgba(28,138,198,.14),transparent 55%),rgba(3,10,22,.62)}.controller-catalog-board>strong{display:grid;min-height:52px;place-items:center;border:2px solid rgba(34,211,238,.35);border-radius:10px;background:linear-gradient(145deg,#073039,#071827);color:#d9f7ff;font:850 11px ui-monospace,monospace;text-align:center}.controller-catalog-pins{display:grid;gap:2px}.controller-catalog-pins i{display:block;width:6px;height:6px;border-radius:1px;background:#6981a9}.controller-catalog-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0}.controller-catalog-card dl>div{min-width:0;padding:8px 9px;border:1px solid rgba(97,126,192,.12);border-radius:9px;background:rgba(5,14,29,.56)}.controller-catalog-card dt{color:#6f819f;font-size:8px;font-weight:800;text-transform:uppercase}.controller-catalog-card dd{overflow:hidden;margin:4px 0 0;color:#dce7fb;font-size:10px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.controller-catalog-card>.btn{width:100%;justify-content:center}
.hardware-connection-view .controller-contract-strip{margin:0}
.hardware-connection-view .controller-workflow{margin:0}
#page-controllers{display:none!important}
@media(max-width:900px){.system-primary-grid{grid-template-columns:1fr 1fr}.system-destination.primary{grid-column:1/-1}.device-hub-nav,.controller-catalog-grid{grid-template-columns:1fr}}
@media(max-width:620px){.system-command-header{align-items:flex-start;flex-direction:column}.system-primary-grid{grid-template-columns:1fr}.system-destination.primary{grid-column:auto}.controller-catalog-card dl{grid-template-columns:1fr 1fr}.controller-catalog-card header h3{white-space:normal}}
.wifi-commission-modal{max-width:900px}.wifi-commission-progress{display:flex;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid var(--border,#263755)}.wifi-commission-progress span{display:flex;align-items:center;gap:8px;color:#7182a2;font-size:13px;font-weight:700}.wifi-commission-progress span i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#15223a;font-style:normal}.wifi-commission-progress span.active{color:#fff}.wifi-commission-progress span.active i{background:linear-gradient(135deg,#328cff,#875cff);box-shadow:0 0 20px #526dff88}.wifi-commission-progress span.done{color:#59dc9b}.wifi-commission-progress span.done i{background:#123c31}.wifi-commission-progress em{height:1px;flex:1;background:#243451}.wifi-commission-step{display:none;padding:30px}.wifi-commission-step.active{display:block}.wifi-commission-visual{display:flex;gap:18px;align-items:center}.wifi-commission-visual>strong{display:grid;place-items:center;min-width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,#172d54,#291c58);border:1px solid #496cc0;color:#a9d8ff;font-size:26px}.wifi-commission-visual span{display:flex;flex-direction:column;gap:6px}.wifi-commission-visual b{font-size:20px;color:#f4f7ff}.wifi-commission-visual small,.wifi-commission-help{color:#8e9db9;line-height:1.5}.wifi-network-card{margin-top:24px;padding:18px;border:1px solid #294365;border-radius:15px;background:#0b1629;display:grid;gap:5px}.wifi-network-card span{color:#7e91b1;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.wifi-network-card b{font-size:22px}.wifi-network-card code{color:#9ccfff}.wifi-commission-note{margin-top:18px;border-radius:12px;padding:14px;background:#111d31;color:#aebbd0;line-height:1.5}.wifi-commission-note.good{border:1px solid #1c7459;color:#74e6b0}.wifi-open-controller{display:flex;margin:25px auto 0;max-width:360px;align-items:center;justify-content:center;text-decoration:none}.wifi-commission-help{text-align:center}.wifi-commission-result{margin-top:18px;padding:14px;border-radius:12px;background:#111d31;color:#aebbd0}.wifi-commission-result.working{color:#8ccfff}.wifi-commission-result.good{color:#68e0a4;border:1px solid #236e58}.wifi-commission-result.warn{color:#ffd078;border:1px solid #775e24}.wifi-commission-result.bad{color:#ff909c;border:1px solid #7d303a}@media(max-width:760px){.wifi-commission-progress span{font-size:0}.wifi-commission-progress span i{font-size:13px}.wifi-commission-step{padding:22px 16px}.wifi-commission-visual{align-items:flex-start}}

/* Live firmware/connection verification is intentionally separate from the
   editable controller profile: reported truth must never look like saved data. */
.controller-runtime-summary{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.controller-runtime-summary span{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #253856;border-radius:12px;background:#0a1426;color:#9dadc8;font-size:13px}.controller-runtime-summary span.good{border-color:#1d7657;color:#6be3aa}.controller-runtime-summary span.bad{border-color:#71323e;color:#ff909d}.controller-runtime-summary i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}.controller-runtime-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.controller-runtime-grid>section{min-width:0;padding:16px;border:1px solid #213451;border-radius:16px;background:linear-gradient(145deg,#0a1528,#08111f)}.controller-runtime-grid header{display:flex;align-items:center;gap:10px;margin-bottom:14px}.controller-runtime-grid header>i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#122442;color:#78bdff;font-style:normal}.controller-runtime-grid header div{display:flex;flex-direction:column}.controller-runtime-grid header small{color:#7888a4}.controller-runtime-grid dl{margin:0}.controller-runtime-grid dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid #172741}.controller-runtime-grid dt{color:#7586a3}.controller-runtime-grid dd{min-width:0;margin:0;color:#e8efff;font-family:var(--mono,monospace);overflow-wrap:anywhere}.controller-flash-workflow{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.25fr);gap:16px;margin-top:14px;padding:18px;border:1px solid #2a3c5d;border-radius:16px;background:#091426}.controller-flash-workflow h3{margin:5px 0}.controller-flash-workflow p{margin:0;color:#8d9bb6;line-height:1.5}.controller-flash-workflow label{display:flex;flex-direction:column;gap:7px}.controller-flash-workflow input{width:100%}.controller-flash-actions{grid-column:2;display:flex;justify-content:flex-end;gap:8px}.controller-flash-status{grid-column:1/-1;display:flex;gap:11px;align-items:center;padding:12px;border-radius:12px;background:#111d31;color:#aab9d1}.controller-flash-status>i{width:10px;height:10px;border-radius:50%;background:#7184a6}.controller-flash-status>span{display:flex;flex-direction:column}.controller-flash-status small{color:#7f90ad}.controller-flash-status.working>i{background:#68baff;box-shadow:0 0 15px #54a8ff}.controller-flash-status.good>i{background:#57dda0;box-shadow:0 0 15px #57dda0}.controller-flash-status.bad>i{background:#ff6678;box-shadow:0 0 15px #ff6678}@media(max-width:980px){.controller-runtime-grid{grid-template-columns:1fr}.controller-flash-workflow{grid-template-columns:1fr}.controller-flash-actions{grid-column:1}.controller-flash-status{grid-column:1}}
.controller-runtime-grid dd a{color:#78bdff;text-decoration:none}.controller-runtime-grid dd a:hover{text-decoration:underline}

/* Guided controller configuration. The primary path is intentionally visual
   and template-first; raw pins remain in Hardware & I/O for installers who
   need a custom allocation. */
#page-settings.active{display:block!important}
.setup-command-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px;padding:20px 22px;border:1px solid rgba(92,126,205,.17);border-radius:16px;background:radial-gradient(circle at 88% 0,rgba(72,94,230,.16),transparent 34%),linear-gradient(145deg,#09152a,#07101f);box-shadow:0 18px 46px rgba(0,0,0,.2)}
.setup-command-header h2{margin:5px 0 4px;font-size:22px;letter-spacing:-.02em}.setup-command-header p{max-width:820px;margin:0;color:#92a2bd;font-size:12px;line-height:1.55}.setup-command-header .btn{flex:0 0 auto}
.setup-progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:11px 16px;border:1px solid rgba(92,126,205,.14);border-radius:14px;background:rgba(7,15,30,.9)}.setup-progress>span{display:grid;grid-template-columns:28px auto;grid-template-rows:auto auto;column-gap:9px;min-width:130px;color:#72819d}.setup-progress>span i{grid-row:1/3;display:grid;width:28px;height:28px;place-items:center;border:1px solid #2a3b5c;border-radius:50%;background:#101c31;color:#91a0bb;font-size:10px;font-style:normal;font-weight:850}.setup-progress>span b{font-size:11px}.setup-progress>span small{font-size:9px}.setup-progress>span.active{color:#dfe8ff}.setup-progress>span.active i{border-color:#6686ff;background:linear-gradient(135deg,#2555d2,#783ed3);box-shadow:0 0 20px rgba(87,103,255,.42)}.setup-progress>span.done{color:#67dda7}.setup-progress>span.done i{border-color:#278a68;background:#123b31}.setup-progress>em{height:1px;flex:1;background:#223250}
.setup-workspace{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(380px,1.22fr);gap:12px}.setup-workspace>section,.setup-apply-bar{min-width:0;border:1px solid rgba(92,126,205,.16);border-radius:16px;background:linear-gradient(150deg,rgba(255,255,255,.025),transparent 55%),#081326}.setup-workspace section>header{display:flex;align-items:center;gap:12px;padding:16px 17px;border-bottom:1px solid rgba(92,126,205,.12)}.setup-workspace section>header>div{min-width:0;flex:1}.setup-workspace section>header h3{margin:3px 0;font-size:16px}.setup-workspace section>header p{margin:0;color:#8291ab;font-size:10px;line-height:1.45}.setup-step-number{display:grid;width:32px;height:32px;flex:0 0 32px;place-items:center;border:1px solid rgba(99,128,255,.42);border-radius:10px;background:rgba(54,78,190,.16);color:#a9bdff;font-size:11px;font-weight:900}.setup-controller-card>header>em{padding:5px 8px;border-radius:8px;font-size:9px;font-style:normal;font-weight:800}.setup-controller-card>header>em.good{background:rgba(48,202,132,.12);color:#6ee2a9}.setup-controller-card>header>em.warn{background:rgba(255,178,70,.1);color:#f5c56f}
.setup-board-options{display:grid;gap:8px;padding:12px}.setup-board-options button{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid #223552;border-radius:11px;background:#09182d;color:#dce7fb;text-align:left;cursor:pointer}.setup-board-options button small{color:#7f90ad}.setup-board-options button.selected{border-color:#6179f2;background:linear-gradient(135deg,rgba(50,82,204,.28),rgba(99,50,184,.2));box-shadow:inset 3px 0 #7588ff}.setup-board-options button:disabled{opacity:.42;cursor:not-allowed}.setup-controller-note{display:flex;flex-direction:column;gap:4px;margin:0 12px 12px;padding:11px 12px;border:1px solid rgba(78,118,220,.16);border-radius:10px;background:rgba(36,67,145,.08)}.setup-controller-note b{color:#dbe7ff;font-size:10px}.setup-controller-note span{color:#8292ae;font-size:9px;line-height:1.5}
.setup-template-card{grid-column:2}.setup-role-filters{display:flex;gap:6px;overflow:auto;padding:12px 12px 4px}.setup-role-filters button{padding:7px 10px;border:1px solid #223653;border-radius:9px;background:#09162a;color:#8191ae;font-size:10px;white-space:nowrap;cursor:pointer}.setup-role-filters button.active{border-color:#5f76ee;background:#182755;color:#dbe6ff}.setup-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:278px;overflow:auto;padding:8px 12px 12px}.setup-template-grid>button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:68px;padding:10px;border:1px solid #1f3250;border-radius:11px;background:#08172b;color:#dce7f9;text-align:left;cursor:pointer}.setup-template-grid>button>i{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:rgba(70,91,205,.16);color:#91adff;font-style:normal}.setup-template-grid>button span{min-width:0}.setup-template-grid>button b,.setup-template-grid>button small{display:block}.setup-template-grid>button b{font-size:11px}.setup-template-grid>button small{margin-top:4px;overflow:hidden;color:#7788a5;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.setup-template-grid>button>em{color:#667897;font-size:9px;font-style:normal}.setup-template-grid>button:hover,.setup-template-grid>button.selected{border-color:#6179f2;background:linear-gradient(135deg,rgba(46,74,190,.3),rgba(91,45,174,.18));box-shadow:0 10px 24px rgba(0,0,0,.16)}.setup-template-grid>button.selected>em{color:#88a8ff}
.setup-wiring-card{grid-column:1/-1}.setup-wiring-card>header .btn{margin-left:auto}.setup-validation{display:flex;align-items:center;gap:10px;margin:12px;padding:10px 12px;border-radius:11px}.setup-validation>span{display:grid;width:26px;height:26px;place-items:center;border-radius:50%}.setup-validation b,.setup-validation small{display:block}.setup-validation small{margin-top:3px;font-size:9px}.setup-validation.good{border:1px solid rgba(45,192,128,.28);background:rgba(31,151,105,.08);color:#82e5b5}.setup-validation.good>span{background:rgba(45,192,128,.15)}.setup-validation.bad{border:1px solid rgba(244,78,101,.28);background:rgba(171,37,63,.09);color:#ff9eaa}.setup-wiring-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-height:360px;overflow:auto;margin:0 12px 12px;border:1px solid rgba(89,122,190,.12);border-radius:12px;background:rgba(78,106,169,.1)}.setup-wiring-list article{display:grid;grid-template-columns:26px minmax(120px,.85fr) minmax(120px,.85fr) minmax(160px,1.3fr);align-items:center;gap:9px;min-width:0;padding:10px;background:#081426}.setup-wiring-list article>i{display:grid;width:23px;height:23px;place-items:center;border-radius:7px;background:#13213c;color:#8299c6;font-size:9px;font-style:normal}.setup-wiring-list article>div>b,.setup-wiring-list article>div>small{display:block}.setup-wiring-list article>div>b{font-size:10px}.setup-wiring-list article>div>small{margin-top:3px;color:#71809c;font-size:8px}.setup-wiring-list article>div>b em{margin-left:5px;padding:2px 5px;border-radius:5px;background:#85334b;color:#ffc3cc;font-size:7px;font-style:normal}.setup-wiring-list article>p{margin:0;color:#8999b5;font-size:9px;line-height:1.4}.setup-pin-stack{display:flex;gap:4px;flex-wrap:wrap}.setup-pin-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid rgba(98,132,234,.24);border-radius:7px;background:rgba(55,85,187,.14);color:#bdd0ff;font:700 9px ui-monospace,monospace}.setup-pin-badge b{color:#78d7ff;font-size:8px}
.setup-apply-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}.setup-apply-bar>.setup-step-number{flex:0 0 32px}.setup-apply-bar>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}.setup-apply-bar small{color:#70819d;font-size:9px;line-height:1.45}.setup-apply-status{color:#d7e2f6;font-size:11px;font-weight:700}.setup-apply-status.good{color:#66dda5}.setup-apply-status.warn{color:#f0bf69}.setup-apply-status.bad{color:#ff8d9c}.setup-apply-status.working{color:#7cc6ff}.setup-apply-bar .btn{min-width:220px;justify-content:center}
.setup-secondary{margin-top:12px;padding:0;overflow:hidden}.setup-secondary>summary{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;list-style:none}.setup-secondary>summary::-webkit-details-marker{display:none}.setup-secondary>summary span b,.setup-secondary>summary span small{display:block}.setup-secondary>summary span b{font-size:12px}.setup-secondary>summary span small{margin-top:3px;color:#7788a4;font-size:9px}.setup-secondary>summary strong{color:#8aa8f4;font-size:10px}.setup-secondary[open]>summary{border-bottom:1px solid rgba(91,124,192,.14)}.setup-secondary-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:12px;padding:14px}.setup-secondary-grid>section{min-width:0;padding:14px;border:1px solid rgba(91,124,192,.13);border-radius:13px;background:#081426}.setup-secondary-grid .img-lib{max-height:210px;overflow:auto}
@media(max-width:1100px){.setup-workspace{grid-template-columns:1fr}.setup-template-card,.setup-wiring-card,.setup-apply-bar{grid-column:1}.setup-secondary-grid{grid-template-columns:1fr 1fr}.setup-danger-zone{grid-column:1/-1}.setup-wiring-list{grid-template-columns:1fr}}
@media(max-width:720px){.setup-command-header{align-items:flex-start;flex-direction:column}.setup-progress>span{min-width:0;grid-template-columns:28px}.setup-progress>span b,.setup-progress>span small{display:none}.setup-template-grid{grid-template-columns:1fr}.setup-wiring-list article{grid-template-columns:24px 1fr}.setup-wiring-list article>p,.setup-pin-stack{grid-column:2}.setup-apply-bar{align-items:stretch;flex-direction:column}.setup-apply-bar .btn{width:100%}.setup-secondary-grid{grid-template-columns:1fr}.setup-danger-zone{grid-column:auto}}

/* Responsive stability pass: every operational control stays inside its
   owning surface. Scrolling is allowed for page content, but never sideways
   for the document itself. */
html,body,.shell,.main,.page,.panel{max-width:100%;min-width:0}
html,body{overflow-x:hidden}
.main *{min-width:0}
img,video,canvas{max-width:100%}
.btn,.chip,.pill{max-width:100%}

@media (min-width:981px) and (max-width:1180px){
  #page-rooms .rooms-command-bar{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"filters summary" "tools tools";
  }
  #page-rooms .chip-row{grid-area:filters;overflow-x:auto;scrollbar-width:none}
  #page-rooms .chip-row::-webkit-scrollbar{display:none}
  #page-rooms .rooms-tools{grid-area:tools;grid-template-columns:minmax(160px,1fr) auto auto auto auto}
  #page-rooms .room-summary{grid-area:summary;justify-self:end}
}

@media (max-width:980px){
  #page-rooms.active{height:auto;overflow:visible}
  #page-rooms>.rooms-master-panel{height:auto;overflow:visible}
  #page-rooms .rooms-command-bar{display:grid;grid-template-columns:1fr;gap:9px}
  #page-rooms .chip-row{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  #page-rooms .chip-row::-webkit-scrollbar{display:none}
  #page-rooms .rooms-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px}
  #page-rooms .room-search{grid-column:1/-1}
  #page-rooms .room-summary{overflow-x:auto;scrollbar-width:none}
  #page-rooms #rooms-by-floor{overflow:visible}
}

@media (max-width:1200px){
  #page-security .security-hero-panel .gate-panel{min-width:0!important}
  #page-security .security-hero-panel .gate-panel{grid-template-columns:1fr!important}
  #page-security .security-hero-panel .gate-ring{display:none!important}
  #page-security .security-hero-panel .gate-stage{height:320px!important}
  #page-security .security-hero-panel .gate-actions{display:grid!important;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-security .security-hero-panel .gate-actions .btn{min-width:0;white-space:normal}
}

@media (max-width:1200px){
  #page-pool .pool-workspace-tabs{
    position:relative!important;display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;overflow:visible!important;scrollbar-width:none!important;
  }
  #page-pool .pool-workspace-tabs button{
    width:100%!important;min-width:0!important;min-height:40px!important;
    padding:7px 4px!important;white-space:normal!important;line-height:1.15!important;
  }
  #page-security .security-workspace-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
  #page-security .security-workspace-tabs button{min-width:0;padding:0 6px;white-space:normal}
}

@media (max-width:520px){
  #page-rooms .rooms-tools{grid-template-columns:1fr 1fr}
  #page-rooms .room-search{grid-column:1/-1}
  #page-rooms .view-toggle{justify-self:start}
  #page-rooms #rooms-manage-hardware,#page-rooms #btn-add-room{width:100%;justify-content:center}
  #page-security .security-workspace-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-height:760px) and (min-width:861px){
  .sidebar{padding-top:12px;padding-bottom:12px}
  .brand{min-height:54px;padding-bottom:9px}
  .side-nav{min-height:0;padding-top:5px}
  .side-nav .tab{min-height:34px;padding-top:5px;padding-bottom:5px}
  .side-foot{gap:5px;margin-top:3px;padding-top:7px}
  .sidebar-controller-card{padding:7px 9px}
  .sidebar-action{min-height:34px!important;padding:7px 9px!important}
  .profile-card{padding:7px 9px}
}