/* ============================================================
   Smart Home OS — Glass material + dashboard styling
   ============================================================ */

:root{
  /* tunable via Tweaks */
  --accent: #ffc24d;          /* primary accent (solar/lights amber) */
  --glass-blur: 22px;
  --glass-alpha: 0.07;        /* base white fill of glass */
  --radius: 26px;
  --anim-speed: 1;            /* multiplier (1 = normal) */
  --cell: 116px;              /* grid cell size for snap */
  --gap: 16px;

  /* fixed palette (matches reference) */
  --bg: #04050a;
  --solar:   #ffc24d;
  --grid-c:  #4f9cff;
  --battery: #36d399;
  --climate: #38bdf8;
  --plug:    #2dd4bf;
  --scene:   #b07cff;
  --water:   #8b7cff;

  --text: #eef2f8;
  --text-dim: #828a9a;
  --text-faint: #565d6c;
  --hairline: rgba(255,255,255,0.06);
  --glass-rgb: 210,224,255;
  --surface-2: rgba(255,255,255,0.03);
  --ambient-1: rgba(255,170,70,0.07); --ambient-2: rgba(79,156,255,0.075);
  --ambient-3: rgba(54,211,153,0.055); --ambient-4: rgba(176,124,255,0.06);
  --grain: 0.012;
  --refract: 0;
  --card-glow: 1;
}
/* light only refracts through the glass when the card is actually lit */
.tile.on .w-inner{ --refract: 0.34; }
/* device tiles: near-transparent so the dark background dominates — only the icon glows */
.tile .w-inner.glass{ background:transparent; --refract:0; box-shadow:inset 0 0 0 1px rgba(var(--glass-rgb),0.05); }
.tile .w-inner.glass::before{ background:linear-gradient(135deg, rgba(var(--glass-rgb),0.10) 0%, rgba(var(--glass-rgb),0.02) 30%, rgba(var(--glass-rgb),0.01) 70%, rgba(var(--glass-rgb),0.05) 100%); }

/* DARK scheme: glass is a translucent DARK pane (not a white frost) so cards melt into the background */
html[data-scheme="dark"] .glass.panel{ background:rgba(10,12,18,0.30); }
html[data-scheme="dark"] .tile .w-inner.glass{ background:rgba(10,12,18,0.16); box-shadow:inset 0 0 0 1px rgba(var(--glass-rgb),0.045); }
html[data-scheme="dark"] .glass{ backdrop-filter:blur(var(--glass-blur)) saturate(115%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(115%); }

html[data-scheme="light"] .tile .w-inner.glass{ background:linear-gradient(150deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.48) 100%); box-shadow:0 2px 10px rgba(30,40,60,0.1), inset 0 0 0 1px rgba(30,40,60,0.05); }

/* keep glass crisp & bright in the light scheme */
html[data-scheme="light"]{ --edge-strong: 0.9; --edge-soft: 0.5; }

/* ===== Theme-scheme adjustments ===== */
/* Light scheme: glass sits on a bright bg — deepen panel fills & soften shadows */
html[data-scheme="light"] .glass{
  box-shadow:
    0 2px 8px rgba(30,40,60,0.10),
    0 16px 44px rgba(30,40,60,0.14),
    inset 0 1px 0.5px rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(30,40,60,0.06),
    inset 0 -14px 28px -18px rgba(30,40,60,0.10);
}
html[data-scheme="light"] .glass.panel{
  box-shadow:
    0 1px 3px rgba(30,40,60,0.08),
    0 18px 50px rgba(30,40,60,0.12),
    inset 0 1px 0.5px rgba(255,255,255,0.8),
    inset 0 0 0 1px rgba(30,40,60,0.05);
}
html[data-scheme="light"] .main::-webkit-scrollbar-thumb,
html[data-scheme="light"] .controls::-webkit-scrollbar-thumb{ background:rgba(20,26,38,0.14); }
html[data-scheme="light"] #ambient::after{ opacity:0.02; }
html[data-scheme="light"] .tile .ic,
html[data-scheme="light"] .qtile .ic{ background:rgba(20,26,38,0.05); }
html[data-scheme="light"] .seg{ background:rgba(20,26,38,0.05); }
html[data-scheme="light"] .seg button.on{ background:rgba(255,255,255,0.9); }

/* ============================================================
   DAYLIGHT THEME POLISH (scoped to [data-theme="daylight"] only — never
   affects Nebula or other themes). A bright bloom has nothing to glow against
   on a light surface, so the "on" state casts a DEEP, SATURATED coloured
   shadow and tints the icon, which reads as a glow against white.
   ============================================================ */
html[data-theme="daylight"] .tile.on .ic,
html[data-theme="daylight"] .qtile.on .ic{
  background:radial-gradient(circle at 50% 36%,
    color-mix(in srgb, var(--c) calc(78% + 18% * var(--lvl,1)), white),
    color-mix(in srgb, var(--c) 46%, white));
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.5),
    0 8px 20px -5px color-mix(in srgb, var(--c) 88%, #0a0e1a),
    0 2px 7px -2px color-mix(in srgb, var(--c) 65%, transparent),
    0 0 0 1px color-mix(in srgb, var(--c) 60%, #0a0e1a);
}
/* white icon on the saturated chip → maximum contrast (like the dark theme's
   neon, but inverted for a light surface) */
html[data-theme="daylight"] .tile.on .ic svg,
html[data-theme="daylight"] .qtile.on .ic svg{
  color:#fff;
  filter:drop-shadow(0 1px 1.5px color-mix(in srgb, var(--c) 70%, #0a0e1a));
}
/* the icon's "moon dust" particles need a darker tint to register on white */
html[data-theme="daylight"] .tile.on .ic::after,
html[data-theme="daylight"] .tile.on .ic::before{
  filter:drop-shadow(0 0 calc(2px + 3px * var(--lvl,1)) color-mix(in srgb, var(--c) 62%, #0a0e1a));
}
/* card bloom: a deeper colour tint instead of a near-white wash */
html[data-theme="daylight"] .tile .bloom{
  background:radial-gradient(60% 60% at 28% 24%, color-mix(in srgb, var(--c) 34%, transparent), transparent 72%);
}
/* Energy Flow node icons (always-on, different class) — same saturated, legible
   treatment so the whole card reads on a light surface. */
html[data-theme="daylight"] .node .nic{
  background:color-mix(in srgb, var(--c) 26%, white);
  color:color-mix(in srgb, var(--c) 82%, #0a0e1a);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.6), 0 2px 8px -3px color-mix(in srgb, var(--c) 60%, #0a0e1a);
}

/* Flat Mono: kill the glass refraction + heavy specular for a calm matte UI */
html[data-theme="flatmono"] .glass::after{ display:none; }
html[data-theme="flatmono"] .glass{
  box-shadow:0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px var(--hairline);
}
html[data-theme="flatmono"] .glass::before{ opacity:0.4; }
html[data-theme="flatmono"] #ambient::before{ display:none; }
html[data-theme="flatmono"] #ambient::after{ opacity:0.02; }

/* card-glow token gates the device-on bloom intensity per theme */
html[data-theme="flatmono"] .tile.on .ic{ box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.2), 0 0 10px -4px var(--c); }
html[data-theme="flatmono"] .bloom{ display:none; }

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
}

/* ===== Ambient backdrop — glass needs something to refract ===== */
#ambient{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(60% 50% at 18% 12%, var(--ambient-1), transparent 70%),
    radial-gradient(55% 55% at 82% 18%, var(--ambient-2), transparent 70%),
    radial-gradient(70% 60% at 70% 90%, var(--ambient-3), transparent 72%),
    radial-gradient(60% 60% at 25% 88%, var(--ambient-4), transparent 72%),
    var(--bg);
}
#ambient::before{
  /* slow drifting nebula so refraction shimmers */
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(38% 38% at 30% 40%, rgba(255,194,77,0.18), transparent 60%),
    radial-gradient(34% 34% at 72% 62%, rgba(79,156,255,0.18), transparent 60%),
    radial-gradient(30% 30% at 50% 80%, rgba(54,211,153,0.14), transparent 60%);
  filter:blur(40px);
  animation:drift calc(38s / var(--anim-speed)) ease-in-out infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  100%{ transform:translate3d(4%,3%,0) scale(1.12) rotate(8deg); }
}
/* faint grain to break up gradients */
#ambient::after{
  content:""; position:absolute; inset:0; opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NEBULA WALLPAPER — drifting satellite view (Nebula theme, toggleable)
   Pitch-black void; dark-blue + purple-red clouds glide and breathe with a
   slow forward-zoom; the star field (canvas) streams past with parallax.
   The whole layer's opacity is the Settings "intensity" control.
   ============================================================ */
#root > .nebula-bg{ /* specificity so it stays the back layer */ }
.nebula-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:#000; pointer-events:none;
  opacity:var(--neb, 0.6);
  transition:opacity .4s ease;
}
/* Baked nebula texture (--neb-tex), shown as a soft cover-image that only
   pans/zooms — the compositor does the work, so it's effectively free. Two
   layers at different scale/drift give parallax depth. */
.neb-cloud-img{
  position:absolute; inset:-16%;
  background-image:var(--neb-tex, none);
  background-size:cover; background-position:50% 50%; background-repeat:no-repeat;
  filter:blur(10px) saturate(118%); mix-blend-mode:screen; will-change:transform;
  transform:translateZ(0);
  animation:neb-glide-a 96s ease-in-out infinite alternate;
}
.neb-cloud-2{
  inset:-26%; opacity:0.5;
  filter:blur(26px) saturate(110%);
  background-position:42% 56%;
  animation:neb-glide-b 132s ease-in-out infinite alternate;
}
.neb-stars{ position:absolute; inset:0; width:100%; height:100%; }
/* slow drifting + breathing zoom → the satellite glides through the cloud */
@keyframes neb-glide-a{ 0%{transform:translate3d(-3%,-2%,0) scale(1.05)} 100%{transform:translate3d(4%,3%,0) scale(1.2)} }
@keyframes neb-glide-b{ 0%{transform:translate3d(2%,3%,0) scale(1.15)} 100%{transform:translate3d(-4%,-3%,0) scale(1.02)} }
@media (prefers-reduced-motion: reduce){ .neb-cloud-img{ animation:none; } }

/* ============================================================
   THE GLASS MATERIAL
   ============================================================ */
.glass{
  position:relative;
  background:
    linear-gradient(135deg, rgba(var(--glass-rgb),calc(var(--glass-alpha) + 0.05)) 0%,
                            rgba(var(--glass-rgb),var(--glass-alpha)) 38%,
                            rgba(var(--glass-rgb),calc(var(--glass-alpha) * 0.5)) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  border-radius:var(--radius);
  box-shadow:
    /* outer depth */
    0 2px 6px rgba(0,0,0,0.30),
    0 14px 40px rgba(0,0,0,0.42),
    /* inner specular highlights — the glass thickness */
    inset 0 1px 0.5px rgba(var(--glass-rgb),0.28),
    inset 0 0 0 1px rgba(var(--glass-rgb),0.05),
    inset 0 -14px 28px -18px rgba(0,0,0,0.55),
    inset 0 22px 36px -28px rgba(var(--glass-rgb),0.2);
  isolation:isolate;
}
/* gradient hairline border, brighter top-left (where light hits) */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,
    rgba(var(--glass-rgb),var(--edge-strong, 0.22)) 0%, rgba(var(--glass-rgb),0.06) 22%,
    rgba(var(--glass-rgb),0.015) 50%, rgba(var(--glass-rgb),0.05) 82%,
    rgba(var(--glass-rgb),var(--edge-soft, 0.14)) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:2;
}
/* refraction layer — bends the backdrop at the surface */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  filter:url(#glass-refract);
  opacity:var(--refract, 0.5);
  pointer-events:none; z-index:0;
  -webkit-mask:radial-gradient(140% 140% at 50% 0%, #000 55%, transparent 100%);
          mask:radial-gradient(140% 140% at 50% 0%, #000 55%, transparent 100%);
}
.glass > *{ position:relative; z-index:1; }

/* a thinner / flatter glass for big panels */
.glass.panel{
  --glass-alpha:0.05;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.25),
    0 18px 50px rgba(0,0,0,0.40),
    inset 0 1px 0.5px rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.045),
    inset 0 -20px 40px -30px rgba(0,0,0,0.5);
}
.glass.panel::after{ display:none; } /* keep large panels crisp/readable */

/* moving specular sweep on hover for the tiles */
.glass.sheen::after{ mix-blend-mode:screen; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
#root{ position:relative; z-index:1; height:100vh; }

.os{
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  display:grid;
  grid-template-columns:84px 1fr 332px;
  height:100vh;
  gap:0;
}

/* ---- Left nav rail ---- */
.rail{
  display:flex; flex-direction:column; align-items:center;
  padding:22px 0 18px; gap:6px;
  z-index:5;
}
.rail .logo{
  width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:18px;
  color:var(--text);
}
.rail .logo svg{ width:24px; height:24px; }
.nav{ display:flex; flex-direction:column; gap:4px; align-items:center; flex:1; }
.nav-item{
  width:52px; height:52px; border-radius:16px;
  display:grid; place-items:center; color:var(--text-faint);
  cursor:pointer; transition:color .2s, background .2s; position:relative;
  border:none; background:transparent;
}
.nav-item svg{ width:22px; height:22px; }
.nav-item:hover{ color:var(--text-dim); }
.nav-item.active{ color:var(--text); }
.nav-item.active::before{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4), 0 6px 18px -8px var(--accent);
}
.nav-item.active::after{
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 12px 1px var(--accent);
}
.nav-label{
  font-size:9px; color:var(--text-faint); margin-top:-2px; letter-spacing:0;
}
.home-mode{
  width:60px; padding:10px 0; border-radius:18px; text-align:center; cursor:pointer;
  border:none; font-family:inherit; display:block;
}
.home-mode svg{ width:20px; height:20px; color:var(--c, var(--accent)); }
.home-mode .hm-t{ font-size:9.5px; font-weight:600; margin-top:4px; color:var(--text-dim); }
.home-mode .hm-s{ font-size:8.5px; color:var(--c, var(--accent)); font-weight:600; }

/* ---- Center scroll area ---- */
.main{ overflow-y:auto; overflow-x:hidden; padding:20px 22px 60px; }
.main::-webkit-scrollbar{ width:8px; }
.main::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:8px; }
.main::-webkit-scrollbar-track{ background:transparent; }

/* ---- Right control rail ---- */
.controls{ display:flex; flex-direction:column; gap:18px; overflow-y:auto; overflow-x:hidden; padding:20px 22px 60px 6px; }
.controls > .block-title{ margin-bottom:-6px; }
.controls::-webkit-scrollbar{ width:8px; }
.controls::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:8px; }

/* ===== Header ===== */
.topbar{ display:flex; align-items:center; gap:18px; margin-bottom:22px; }
/* Every topbar badge (icon buttons + chips) shares one height so the row reads
   as a clean, even line. Icon buttons stay square; chips size to their content. */
.topbar .icon-btn,
.topbar .chip{ height:44px; box-sizing:border-box; }
.topbar .icon-btn{ width:44px; }
.topbar .clock-chip{ white-space:nowrap; }
.topbar .clock-chip > *{ white-space:nowrap; line-height:1.15; }
.greet h1{ font-size:23px; font-weight:700; letter-spacing:-0.02em; }
.greet p{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.greet .sun{ display:inline-flex; vertical-align:-3px; margin-right:9px; color:var(--solar); }
.topbar .spacer{ flex:1; }
.chip{
  display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:14px;
  font-size:13px; color:var(--text-dim);
  border:none; font-family:inherit; -webkit-appearance:none; appearance:none;
}
button.chip{ cursor:pointer; }
.chip b{ color:var(--text); font-weight:600; }
.icon-btn{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  color:var(--text-dim); cursor:pointer; border:none; position:relative;
}
.icon-btn:hover{ color:var(--text); }
.icon-btn .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ===== Section heads ===== */
.sec-head{ display:flex; align-items:center; margin:0 4px 12px; }
.sec-head h2{ font-size:15px; font-weight:600; letter-spacing:-0.01em; }
.sec-head .sub{ font-size:12px; color:var(--text-faint); margin-left:10px; }
.sec-head .spacer{ flex:1; }
.seg{ display:flex; gap:2px; padding:3px; border-radius:11px; background:rgba(255,255,255,0.05); }
.seg button{
  border:none; background:transparent; color:var(--text-faint); cursor:pointer;
  font:inherit; font-size:12px; font-weight:500; padding:5px 12px; border-radius:8px;
}
.seg button.on{ background:rgba(255,255,255,0.10); color:var(--text);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4); }

/* ============================================================
   WIDGET / GRID
   ============================================================ */
.grid{ position:relative; }
.widget{
  position:absolute;
  transition:left .32s cubic-bezier(.22,.9,.3,1), top .32s cubic-bezier(.22,.9,.3,1),
             width .32s cubic-bezier(.22,.9,.3,1), height .32s cubic-bezier(.22,.9,.3,1);
  will-change:left,top,width,height;
}
.widget.dragging{ transition:none; z-index:50; cursor:grabbing; }
.widget.dragging .glass{ box-shadow:0 30px 80px rgba(0,0,0,0.6),
  inset 0 1px 0.5px rgba(255,255,255,0.6), inset 0 0 0 1px rgba(255,255,255,0.1); }
.widget .w-inner{ width:100%; height:100%; }

/* resize handle */
.resize-h{
  position:absolute; right:5px; bottom:5px; width:18px; height:18px;
  border-radius:6px; cursor:nwse-resize; z-index:6; opacity:0;
  transition:opacity .18s; color:var(--text-dim);
}
.widget:hover .resize-h{ opacity:0.6; }
.resize-h:hover{ opacity:1 !important; color:var(--text); }
.edit-mode .resize-h{ opacity:0.45; }

/* drop placeholder */
.drop-ghost{
  position:absolute; border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  border:1.5px dashed rgba(255,255,255,0.18);
  z-index:1; pointer-events:none;
  transition:left .2s, top .2s, width .2s, height .2s;
}

/* ============================================================
   DEVICE TILE
   ============================================================ */
.tile{
  position:relative; height:100%; cursor:pointer; border-radius:var(--radius);
  --c:var(--accent); overflow:hidden;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.os input, .os textarea, .term-body{ user-select:text; -webkit-user-select:text; }
.tile-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:16px; }
.tile .tile-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.tile .ic{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  color:var(--text-dim); position:relative; overflow:visible; transition:all .4s cubic-bezier(.3,.8,.3,1);
  background:rgba(255,255,255,0.04);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.25);
}
.tile .ic svg{ width:23px; height:23px; transition:all .4s; }
/* "moon dust" — a field of tiny particles below the icon, lit by the icon's glow when on */
.tile .ic::after{
  content:""; position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%);
  width:140px; height:74px; pointer-events:none; opacity:0; transition:opacity .55s ease;
  background:
    radial-gradient(2.6px 2.6px at 18% 26%, var(--c), transparent 62%),
    radial-gradient(2px 2px at 34% 64%, var(--c), transparent 62%),
    radial-gradient(3.2px 3.2px at 50% 34%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 62% 72%, var(--c), transparent 62%),
    radial-gradient(2.6px 2.6px at 74% 44%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 88% 60%, var(--c), transparent 62%),
    radial-gradient(2.2px 2.2px at 26% 84%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 46% 90%, var(--c), transparent 62%),
    radial-gradient(2.4px 2.4px at 70% 88%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 10% 56%, var(--c), transparent 62%),
    radial-gradient(2px 2px at 56% 56%, var(--c), transparent 62%),
    radial-gradient(1.6px 1.6px at 40% 46%, var(--c), transparent 62%);
  -webkit-mask:radial-gradient(80% 100% at 50% 0%, #000 10%, transparent 82%);
          mask:radial-gradient(80% 100% at 50% 0%, #000 10%, transparent 82%);
  filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 1px var(--c));
}
/* a second, offset particle layer that shimmers out of phase for a twinkle */
.tile .ic::before{
  content:""; position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%) scale(0.9);
  width:140px; height:74px; pointer-events:none; opacity:0; transition:opacity .55s ease; z-index:0;
  background:
    radial-gradient(2px 2px at 28% 40%, var(--c), transparent 62%),
    radial-gradient(2.4px 2.4px at 44% 74%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 60% 30%, var(--c), transparent 62%),
    radial-gradient(2.6px 2.6px at 80% 70%, var(--c), transparent 62%),
    radial-gradient(2px 2px at 14% 76%, var(--c), transparent 62%),
    radial-gradient(1.8px 1.8px at 92% 40%, var(--c), transparent 62%),
    radial-gradient(2.2px 2.2px at 36% 92%, var(--c), transparent 62%);
  -webkit-mask:radial-gradient(80% 100% at 50% 0%, #000 10%, transparent 82%);
          mask:radial-gradient(80% 100% at 50% 0%, #000 10%, transparent 82%);
  filter:drop-shadow(0 0 4px var(--c));
}
.tile.on .ic::after{ opacity:calc(0.35 + 0.65 * var(--lvl, 1)); animation:dustTwinkle calc(3.4s / var(--anim-speed)) ease-in-out infinite; filter:drop-shadow(0 0 calc(2px + 4px * var(--lvl, 1)) var(--c)) drop-shadow(0 0 1px var(--c)); }
.tile.on .ic::before{ animation:dustTwinkleB calc(2.6s / var(--anim-speed)) ease-in-out infinite; }
@keyframes dustTwinkle{ 0%,100%{ opacity:calc((0.35 + 0.65 * var(--lvl,1)) * 0.6); transform:translateX(-50%) scale(0.96); } 50%{ opacity:calc(0.35 + 0.65 * var(--lvl,1)); transform:translateX(-50%) scale(1.04); } }
@keyframes dustTwinkleB{ 0%,100%{ opacity:calc(0.85 * var(--lvl,1)); transform:translateX(-50%) scale(1.02); } 50%{ opacity:calc(0.2 * var(--lvl,1)); transform:translateX(-50%) scale(0.9); } }
.tile.on .ic{
  color:var(--c);
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) calc(20% + 24% * var(--lvl, 1)), transparent), rgba(255,255,255,0.04));
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4), 0 0 calc(8px + 18px * var(--lvl, 1)) -2px var(--c), 0 0 8px -2px var(--c);
}
.tile.on .ic svg{ filter:drop-shadow(0 0 calc(1px + 5px * var(--lvl, 1)) var(--c)); }
/* heat-haze: icon pulses + faintly blurs; intensity scales with --fx (0..1) */
.tile.fx-heat .ic svg{ animation:heatHaze calc(1.6s / var(--anim-speed)) ease-in-out infinite; transform-origin:50% 60%; }
@keyframes heatHaze{
  0%,100%{ filter:drop-shadow(0 0 calc(4px + 3px*var(--fx,1)) var(--c)) blur(0px); transform:translateY(0) scaleY(1) skewX(0deg); }
  25%{ filter:drop-shadow(0 0 calc(4px + 4px*var(--fx,1)) var(--c)) blur(calc(0.7px*var(--fx,1))); transform:translateY(calc(-0.5px*var(--fx,1))) scaleY(calc(1 + 0.04*var(--fx,1))) skewX(calc(0.9deg*var(--fx,1))); }
  50%{ filter:drop-shadow(0 0 calc(4px + 6px*var(--fx,1)) var(--c)) blur(calc(1.1px*var(--fx,1))); transform:translateY(calc(0.4px*var(--fx,1))) scaleY(calc(1 - 0.02*var(--fx,1))) skewX(calc(-0.7deg*var(--fx,1))); }
  75%{ filter:drop-shadow(0 0 calc(4px + 4px*var(--fx,1)) var(--c)) blur(calc(0.7px*var(--fx,1))); transform:translateY(calc(-0.3px*var(--fx,1))) scaleY(calc(1 + 0.03*var(--fx,1))) skewX(calc(0.6deg*var(--fx,1))); }
}
.tile.fx-heat .ic{ background:radial-gradient(circle at 50% 62%, color-mix(in srgb,var(--c) calc(30% + 12%*var(--fx,1)),transparent), rgba(255,255,255,0.04)); }
/* frost: cool shimmer + frosty rime ring; intensity scales with --fx */
.tile.fx-frost .ic svg{ animation:frostShiver calc(3.4s / var(--anim-speed)) ease-in-out infinite; }
@keyframes frostShiver{ 0%,100%{ filter:drop-shadow(0 0 calc(2px + 2px*var(--fx,1)) #bfe9ff); } 50%{ filter:drop-shadow(0 0 calc(2px + 6px*var(--fx,1)) #bfe9ff) brightness(calc(1 + 0.18*var(--fx,1))); } }
.tile.fx-frost .ic{ background:radial-gradient(circle at 50% 40%, rgba(190,233,255,calc(0.08 + 0.18*var(--fx,1))), rgba(255,255,255,0.05)); box-shadow:inset 0 0 0 1px rgba(190,233,255,calc(0.12 + 0.28*var(--fx,1))), 0 0 calc(6px + 12px*var(--fx,1)) -4px #7fd0ff; }
.tile.fx-frost .ic::before, .tile.fx-frost .ic::after{ filter:drop-shadow(0 0 3px #bfe9ff); }
/* thermostat dial heat/frost */
.k-thermostat.fx-heat .thermo-cur{ animation:heatHaze calc(1.8s / var(--anim-speed)) ease-in-out infinite; }
.k-thermostat.fx-frost .thermo-cur{ animation:none; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.k-thermostat.fx-heat .thermo-cur{ animation:none; }
/* notification bell — lights up + rings when there are notifications */
.bell-btn.has-notif{ color:var(--solar); }
.bell-btn.has-notif svg{ transform-origin:50% 8%; animation:bellRing 2.4s ease-in-out infinite; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--solar) 60%,transparent)); }
@keyframes bellRing{ 0%,72%,100%{ transform:rotate(0deg); } 76%{ transform:rotate(13deg); } 80%{ transform:rotate(-11deg); } 84%{ transform:rotate(8deg); } 88%{ transform:rotate(-6deg); } 92%{ transform:rotate(3deg); } 96%{ transform:rotate(-1deg); } }
/* inline page-tab rename */
.ptab-rename-in{ background:var(--surface-2); border:none; outline:none; color:var(--text); font:inherit; font-size:13px;
  font-weight:600; padding:3px 8px; border-radius:7px; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent);
  width:120px; }
.bell-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  font-size:10px; font-weight:800; color:#0a0a0a; background:var(--solar); display:grid; place-items:center; box-shadow:0 0 8px rgba(255,194,77,0.6); }
.bell-btn{ position:relative; }
/* notifications modal */
.notif-modal{ width:460px; max-width:100%; }
.notif-modal .modal-head h3{ display:flex; align-items:center; gap:9px; }
.notif-count{ font-size:11px; font-weight:800; color:#0a0a0a; background:var(--solar); border-radius:8px; padding:1px 7px; }
.notif-row{ display:flex; gap:13px; padding:13px 10px; border-radius:13px; cursor:pointer; position:relative; }
.notif-row:hover{ background:var(--surface-2); }
.notif-row.unread{ background:color-mix(in srgb,var(--accent) 6%,transparent); }
.notif-ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.notif-ic svg{ width:19px; height:19px; }
.notif-text{ flex:1; min-width:0; }
.notif-title{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.notif-dot{ width:7px; height:7px; border-radius:50%; background:var(--solar); box-shadow:0 0 7px var(--solar); flex:none; }
.notif-body{ font-size:12px; color:var(--text-dim); margin-top:2px; line-height:1.4; }
.notif-time{ font-size:11px; color:var(--text-faint); margin-top:4px; }
.notif-empty{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 0; color:var(--text-faint); }
.notif-empty svg{ width:34px; height:34px; opacity:.5; }
.notif-empty span{ font-size:13px; }
/* About panel — branding badge */
.about-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 4px 4px; }
/* desktop size kept as before; the gap shrank because the logo image was re-cropped
   tight to the glow (it had ~36% empty transparent padding below the wordmark). */
.about-logo{ width:420px; max-width:90%; height:auto; margin:0 0 8px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.4)); }
html[data-scheme="light"] .about-logo{ filter:drop-shadow(0 4px 12px rgba(30,40,60,0.18)); }
.about-rows{ width:100%; max-width:380px; }
.about-row{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:11px 0; border-bottom:1px solid var(--hairline); }
.about-row:last-child{ border-bottom:none; }
.about-row span{ font-size:12.5px; color:var(--text-faint); flex:none; }
.about-row b{ font-size:13.5px; font-weight:600; margin-left:auto; width:max-content; max-width:100%; flex-shrink:0; text-align:right; overflow-wrap:break-word; }
.about-credit{ font-size:11.5px; color:var(--text-faint); margin-top:18px; }
/* weather modal */
.wx-modal{ width:440px; max-width:100%; }
.wx-modal .modal-head h3{ display:flex; align-items:center; gap:9px; }
.wx-hero{ display:flex; align-items:center; gap:16px; padding:8px 0 18px; }
.wx-hero-ic{ width:64px; height:64px; flex:none; display:grid; place-items:center; color:var(--c); }
.wx-hero-ic svg{ width:46px; height:46px; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 50%,transparent)); }
.wx-hero-temp{ font-size:48px; font-weight:300; letter-spacing:-0.03em; line-height:1; }
.wx-hero-temp span{ font-size:20px; color:var(--text-faint); }
.wx-hero-meta{ margin-left:auto; text-align:right; }
.wx-hero-meta b{ font-size:14px; font-weight:600; display:block; }
.wx-hero-meta span{ font-size:12px; color:var(--text-faint); }
.wx-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:14px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.wx-stat{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.wx-stat svg{ width:17px; height:17px; color:var(--text-dim); }
.wx-stat b{ font-size:12.5px; font-weight:700; }
.wx-stat span{ font-size:10px; color:var(--text-faint); }
.wx-hourly{ display:flex; gap:6px; overflow-x:auto; padding:16px 0 2px; }
.wx-hour{ flex:none; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:52px; padding:10px 6px; border-radius:12px; background:var(--surface-2); }
.wxh-t{ font-size:11px; color:var(--text-faint); }
.wxh-ic svg{ width:20px; height:20px; }
.wx-hour b{ font-size:13px; font-weight:700; }
.wx-week{ display:flex; flex-direction:column; }
.wx-day{ display:flex; align-items:center; gap:14px; padding:11px 4px; border-bottom:1px solid var(--hairline); }
.wx-day:last-child{ border-bottom:none; }
.wxd-name{ width:54px; font-size:13px; font-weight:600; flex:none; }
.wxd-ic svg{ width:22px; height:22px; }
.wxd-pop{ width:54px; font-size:11px; color:#4f9cff; display:flex; align-items:center; gap:3px; flex:none; }
.wxd-pop svg{ width:11px; height:11px; }
.wxd-range{ flex:1; display:flex; align-items:center; gap:9px; }
.wxd-low{ font-size:12px; color:var(--text-faint); font-style:normal; width:26px; text-align:right; }
.wxd-high{ font-size:12.5px; font-weight:700; font-style:normal; width:26px; }
.wxd-bar{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,0.08); position:relative; }
.wxd-bar b{ position:absolute; top:0; bottom:0; border-radius:3px; background:linear-gradient(90deg,#4f9cff,#ffc24d,#ff7a5c); }
/* weather card */
.wx-card{ height:100%; display:flex; flex-direction:column; padding:18px; }
.wx-card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.wx-card-loc{ font-size:14px; font-weight:700; }
.wx-card-label{ font-size:12px; color:var(--text-faint); }
.wx-card-ic{ color:var(--c); }
.wx-card-ic svg{ width:36px; height:36px; filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 50%,transparent)); }
.wx-card-temp{ font-size:46px; font-weight:300; letter-spacing:-0.03em; line-height:1; margin:6px 0 2px; }
.wx-card-temp span{ font-size:20px; color:var(--text-faint); }
.wx-card-hl{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:4px; }
.wx-card-hl svg{ width:13px; height:13px; }
.wx-card-hours{ display:flex; gap:5px; margin-top:auto; padding-top:14px; }
.wxc-hour{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.wxc-hour span{ font-size:10px; color:var(--text-faint); }
.wxc-hour i svg{ width:17px; height:17px; }
.wxc-hour b{ font-size:12px; font-weight:700; }
.tile .toggle{
  width:46px; height:28px; border-radius:16px; position:relative; flex:none;
  background:rgba(255,255,255,0.10); transition:background .35s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.4);
}
.tile .toggle i{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#e9edf5; transition:transform .35s cubic-bezier(.5,1.6,.5,1), background .35s;
  box-shadow:0 2px 5px rgba(0,0,0,0.4);
}
.tile.on .toggle{ background:color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.2), 0 0 16px -3px var(--c); }
.tile.on .toggle i{ transform:translateX(18px); background:#fff; }

.tile .meta{ margin-top:auto; }
.tile .nm{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; }
.tile .rm{ font-size:11.5px; color:var(--text-dim); margin-top:1px; }
.tile.on .rm{ color:rgba(255,255,255,0.82); text-shadow:0 1px 3px rgba(0,0,0,0.4); }
.tile .st{ font-size:11.5px; color:var(--text-dim); margin-top:7px; display:flex; align-items:center; gap:6px; }
.tile.on .st{ color:var(--c); }

/* brightness / speed slider on bigger tiles */
.tile .ctl{ margin-top:12px; height:6px; border-radius:6px; background:rgba(255,255,255,0.08);
  position:relative; overflow:hidden; }
.tile .ctl span{ position:absolute; inset:0 auto 0 0; border-radius:6px;
  background:var(--c); box-shadow:0 0 12px -2px var(--c); transition:width .3s; }

/* glow bloom when a light turns on */
.tile .bloom{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(60% 60% at 28% 24%, color-mix(in srgb,var(--c) 30%,transparent), transparent 70%);
  transition:opacity .5s;
}
.tile.on .bloom{ opacity:1; }

/* ===== device-specific animation hooks ===== */
/* fan blades spin */
.fan-blades{ transform-origin:50% 50%; }
.tile.on .fan-blades{ animation:spin calc(1.4s / var(--anim-speed)) linear infinite; }
.tile.on.spd-1 .fan-blades{ animation-duration:calc(2.4s / var(--anim-speed)); }
.tile.on.spd-2 .fan-blades{ animation-duration:calc(1.5s / var(--anim-speed)); }
.tile.on.spd-3 .fan-blades{ animation-duration:calc(0.8s / var(--anim-speed)); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* light filament flicker-in */
@keyframes bulbOn{ 0%{ filter:brightness(1); } 30%{ filter:brightness(1.6); } 60%{ filter:brightness(1.1); } 100%{ filter:brightness(1.3); } }
.tile.lighttype.on .ic svg{ animation:bulbOn .6s ease both; }

/* plug pulse ring */
.plug-ring{ opacity:0; }
.tile.on .plug-ring{ animation:plugPulse calc(2.2s / var(--anim-speed)) ease-out infinite; }
@keyframes plugPulse{ 0%{ opacity:0.6; transform:scale(0.7); } 70%{ opacity:0; transform:scale(1.5); } 100%{ opacity:0; } }

/* switch rocker */
.rocker{ transition:transform .3s cubic-bezier(.5,1.5,.5,1); transform-origin:center; }
.tile.on .rocker{ transform:rotate(180deg); }

/* tap feedback */
.tile:active{ transform:scale(0.975); }
.widget.dragging .tile:active{ transform:none; }

/* ============================================================
   ENERGY FLOW
   ============================================================ */
.flow-wrap{ height:100%; padding:18px 20px; display:flex; flex-direction:column; }
.flow-stage{ position:relative; flex:1; min-height:0; }
.flow-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.node{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:18px;
  background:rgba(255,255,255,0.05); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.05);
  --c:var(--text-dim); white-space:nowrap;
}
.node .nic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.3); }
.node .nic svg{ width:21px; height:21px; }
.node .nv b{ font-size:15px; font-weight:700; display:block; line-height:1.1; }
.node .nv .lbl{ font-size:11px; color:var(--text-faint); }
.node .nv .sub{ font-size:10.5px; color:var(--c); font-weight:600; }
.node.right{ flex-direction:row-reverse; text-align:right; }

.home-node{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:108px; height:108px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 50px -6px var(--accent), 0 14px 40px rgba(0,0,0,0.5);
  text-align:center; backdrop-filter:blur(10px);
}
.home-node svg{ width:30px; height:30px; color:var(--text); }
.home-node .hv{ font-size:15px; font-weight:700; margin-top:3px; }
.home-node .hl{ font-size:9.5px; color:var(--text-faint); }
@keyframes flowDash{ to{ stroke-dashoffset:-8.1; } }
.flow-particles{ stroke-dashoffset:0; }

.home-node::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  animation:haloPulse calc(3s / var(--anim-speed)) ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{ transform:scale(1); opacity:.6; } 50%{ transform:scale(1.08); opacity:.15; } }

/* Phone: the stage's nodes are all absolutely positioned, so in the mobile
   stacked grid (height:auto) the card would collapse to the header height and
   the nodes pile up. Give the diagram a real height and shrink the home circle
   + nodes so the source→home→load row fits a narrow screen without overlapping. */
@media (max-width:760px){
  .flow-stage{ min-height:300px; }
  .home-node{ width:84px; height:84px; }
  .home-node svg{ width:24px; height:24px; }
  .home-node .hv{ font-size:13px; margin-top:2px; }
  .home-node .hl{ font-size:8.5px; }
  .node{ padding:7px 9px; gap:7px; border-radius:14px; }
  .node .nic{ width:30px; height:30px; border-radius:10px; }
  .node .nic svg{ width:17px; height:17px; }
  .node .nv b{ font-size:12.5px; }
  .node .nv .lbl{ font-size:9.5px; }
  .node .nv .sub{ font-size:9px; }
}

/* ============================================================
   OVERVIEW / RING / CHART
   ============================================================ */
.ov{ padding:20px; height:100%; display:flex; flex-direction:column; }
.ov .big{ font-size:40px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.ov .big small{ font-size:16px; font-weight:600; color:var(--text-dim); margin-left:4px; }
.ov .cap{ font-size:12.5px; color:var(--text-dim); margin-top:6px; }
.ov .delta{ font-size:12px; font-weight:600; color:var(--battery); display:inline-flex; gap:4px; align-items:center; }
.ring-wrap{ position:relative; width:140px; height:140px; flex:none; }
.ring-wrap .pct{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:3px; }
.ring-wrap .pct b{ font-size:26px; font-weight:700; line-height:1; white-space:nowrap; }
.ring-wrap .pct span{ font-size:10px; color:var(--text-faint); display:block; line-height:1.25; }
.src-row{ display:flex; gap:8px; margin-top:auto; padding-top:16px; }
.src{ flex:1; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,0.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); }
.src .d{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; }
.src .l{ font-size:11px; color:var(--text-faint); }
.src .v{ font-size:14px; font-weight:700; margin-top:3px; }

.chart-wrap{ padding:18px 20px; height:100%; display:flex; flex-direction:column; }
.chart-svg{ flex:1; width:100%; min-height:0; overflow:visible; }
.legend{ display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; }
.legend span{ font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
.legend i{ width:8px; height:8px; border-radius:50%; }

/* power source rows */
.psrc{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,0.035); margin-bottom:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); }
.psrc .pic{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb, var(--c) 14%, transparent); }
.psrc .pt b{ font-size:14px; font-weight:600; }
.psrc .pt .s{ font-size:11.5px; color:var(--text-faint); }
.psrc .spark{ flex:1; height:30px; }

/* ===== Right rail blocks ===== */
.cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qtile{ min-height:118px; max-height:160px; aspect-ratio:1; padding:14px; cursor:pointer; --c:var(--accent); }
.controls > .mb{ margin-bottom:0; }
.status-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; }
.status-row + .status-row{ border-top:1px solid var(--hairline); }
.status-row .si{ width:30px; color:var(--text-faint); display:grid; place-items:center; }
.status-row .sl{ font-size:13px; color:var(--text-dim); flex:1; }
.status-row .sv{ font-size:13.5px; font-weight:600; }

.scene-row{ display:flex; gap:10px; flex-wrap:wrap; }
.scene{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; width:62px; }
.scene .sc-ic{ width:54px; height:54px; border-radius:18px; display:grid; place-items:center; --c:var(--accent);
  color:var(--c); background:color-mix(in srgb,var(--c) 14%, transparent);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.3); transition:transform .2s; }
.scene:hover .sc-ic{ transform:translateY(-2px); }
.scene.active .sc-ic{ box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4), 0 0 20px -3px var(--c); }
.scene .sc-l{ font-size:10.5px; color:var(--text-dim); text-align:center; }
.scene .sc-ic svg{ width:26px; height:26px; }

.block-title{ font-size:14px; font-weight:600; margin:0 2px 13px; display:flex; align-items:center; }
.block-title .spacer{ flex:1; }
.room-content .spacer{ flex:1; }
.block-title .add{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,0.06); color:var(--text-dim); cursor:pointer; }

.pad{ padding:18px; }
.mb{ margin-bottom:22px; }

/* edit-mode banner */
.edit-banner{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:14px; padding:11px 16px 11px 20px; border-radius:16px;
  font-size:13px; color:var(--text); }
.edit-banner b{ color:var(--accent); }
.edit-banner button{ border:none; font:inherit; font-weight:600; font-size:13px; cursor:pointer;
  padding:8px 16px; border-radius:11px; background:var(--accent); color:#0a0a0a; }

.fab{ position:fixed; }

/* edit-mode jiggle (iOS-style) */
@keyframes jiggle{
  0%{ transform:rotate(-0.6deg); } 50%{ transform:rotate(0.6deg); } 100%{ transform:rotate(-0.6deg); }
}
.edit-mode .widget.jiggle:not(.dragging){ animation:jiggle .4s ease-in-out infinite; }
.edit-mode .widget.jiggle:nth-child(even){ animation-delay:-.2s; }
.edit-mode .widget{ cursor:grab; }
.edit-mode .tile{ cursor:grab; }
.edit-mode .tile:active{ transform:none; }

/* quick-control tiles */
.qtile-inner{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:14px; }
.qtile .ic{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:var(--text-dim);
  background:rgba(255,255,255,0.04); box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.25); transition:all .35s; }
.qtile .ic svg{ width:21px; height:21px; }
.qtile.on .ic{ color:var(--c);
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--c) 36%,transparent), rgba(255,255,255,0.04));
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4), 0 0 20px -2px var(--c); }
.qtile .qn{ font-size:13px; font-weight:600; margin-top:auto; }
.qtile .qs{ font-size:11px; color:var(--text-faint); }
.qtile.on .qs{ color:var(--c); }
.qtile .mini-toggle{ position:absolute; top:14px; right:14px; width:38px; height:23px; border-radius:14px;
  background:rgba(255,255,255,0.10); box-shadow:inset 0 1px 2px rgba(0,0,0,0.4); transition:background .35s; }
.qtile .mini-toggle i{ position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:50%;
  background:#e9edf5; transition:transform .35s cubic-bezier(.5,1.6,.5,1); box-shadow:0 2px 4px rgba(0,0,0,.4); }
.qtile.on .mini-toggle{ background:color-mix(in srgb,var(--c) 70%,transparent); }
.qtile.on .mini-toggle i{ transform:translateX(15px); }

/* On-state icon animations — mirror the device cards so quick tiles feel alive:
   the fan spins, plugs pulse, geysers glow, valves drip, and the icon itself
   gets the lit glow. Same keyframes the `.tile` cards use. */
.qtile .ic{ position:relative; overflow:visible; }
.qtile.on .ic svg{ filter:drop-shadow(0 0 5px var(--c)); transition:filter .4s; }
.qtile .fan-blades{ transform-origin:50% 50%; }
.qtile.k-fan.on .fan-blades{ animation:spin calc(1.4s / var(--anim-speed)) linear infinite; }
.qtile.on .plug-ring{ animation:plugPulse calc(2.2s / var(--anim-speed)) ease-out infinite; }
.qtile.k-geyser.on .heat-glow, .qtile.k-underfloor.on .heat-glow{ animation:heatPulse calc(2.4s / var(--anim-speed)) ease-in-out infinite; }
.qtile.k-geyser.on .heat-glow, .qtile.k-underfloor.on .heat-glow{ opacity:1; }
.qtile.k-valve.on .valve-stream{ opacity:1; }
.qtile.k-valve.on .valve-stream i{ animation:drip calc(1.1s / var(--anim-speed)) ease-in infinite; }

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width:1200px){
  .os{ grid-template-columns:76px 1fr; }
  .controls{ display:none; }
}

/* ============================================================
   RESPONSIVE — mobile (drastic reflow)
   ============================================================ */
@media (max-width:760px){
  /* Clip horizontal overflow at the CONTENT level only. overflow-x on <html>
     breaks position:fixed on iOS (the bottom nav anchored to the short page
     instead of the screen), so the guard lives on .main/.controls/.os instead. */
  body{ overflow-y:auto; }
  .os{ display:block; height:auto; min-height:100vh; padding-bottom:88px; max-width:100%; overflow-x:hidden; }
  .rail{ display:none; }
  .main, .controls{ overflow-x:hidden; max-width:100%; }
  /* mobile: logo width == .about-rows so left/right gaps match the row inset (symmetric) */
  .about-logo{ width:100%; max-width:380px; }
  .main{ padding:16px 14px 40px; height:auto; }
  /* device rows: drop the fixed 140px status block + badges so the row fits a
     phone instead of forcing horizontal overflow. */
  .dev-row{ gap:10px; padding:11px 12px; }
  .dev-row .dev-model{ display:none; }
  .dev-row .dev-meta{ display:none; }
  .dev-row .dev-status{ width:auto; min-width:0; }
  .dev-row .dev-status .ds-dot{ display:none; }
  /* room-assignment rows have an extra Assign menu — hide the (redundant) status
     and tighten so icon + name + Assign + toggle + ⋯ fit a phone. */
  .room-modal .dev-row{ gap:8px; padding:10px 10px; }
  .room-modal .dev-row .dev-status{ display:none; }
  .room-modal .assign-btn{ padding:7px 9px; }
  .topbar{ flex-wrap:wrap; gap:10px; }
  .topbar .greet{ width:100%; }
  .topbar .chip.weather{ order:3; }
  /* mobile bottom tab bar — Dashboard + Settings pinned to the corners, the
     remaining tabs live in a horizontally-swipeable strip so every tab is
     reachable on a phone. */
  .mobile-nav{ position:fixed; bottom:0; left:0; right:0; z-index:40;
    display:flex; align-items:stretch; gap:2px; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:rgba(10,11,16,0.7); backdrop-filter:blur(24px) saturate(160%);
    border-top:1px solid var(--hairline); }
  .mobile-nav button{ background:none; border:none; color:var(--text-faint); display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:3px; font:inherit;
    font-size:10px; cursor:pointer; padding:3px 2px; border-radius:12px; }
  .mobile-nav button.on{ color:var(--accent); }
  .mobile-nav button span{ white-space:nowrap; }
  .mobile-nav svg{ width:22px; height:22px; }
  .mobile-nav .mn-fixed{ flex:none; width:60px; }
  /* the swipeable middle strip */
  .mn-scroll{ flex:1; min-width:0; display:flex; gap:2px; overflow-x:auto;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask:linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .mn-scroll::-webkit-scrollbar{ display:none; }
  .mn-scroll button{ flex:0 0 auto; min-width:66px; scroll-snap-align:center; }
}
@media (min-width:761px){ .mobile-nav{ display:none; } }

/* the grid becomes a normal flow stack on mobile (positions handled in JS) */
.grid.stacked{ position:static; }
.grid.stacked .widget{ position:static !important; width:100% !important;
  height:auto !important; margin-bottom:14px; transition:none; }
.grid.stacked .drop-ghost,.grid.stacked .resize-h{ display:none; }
.grid.stacked .tile{ height:auto; min-height:120px; }
/* edit mode on phone: cards are draggable to reorder — claim the touch gesture
   (touch-action:none) so a drag isn't stolen for page scroll, and lift the one
   being dragged. */
.edit-mode .grid.stacked .widget{ touch-action:none; }
.grid.stacked .widget.dragging{ position:relative !important; z-index:30;
  opacity:0.92; transform:scale(1.03); box-shadow:0 16px 36px rgba(0,0,0,0.55);
  transition:transform .12s ease, box-shadow .12s ease; }

/* ============================================================
   v2 ADDITIONS
   ============================================================ */
/* ---- energy-flow wisps ---- */
.wisp-layer{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.wisp{ position:absolute; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:radial-gradient(circle, #fff 5%, var(--c) 50%, transparent 72%);
  box-shadow:0 0 8px 1px var(--c); will-change:transform,opacity; opacity:0; }

/* ---- device card v2 ---- */
.state-dot{ width:9px; height:9px; border-radius:50%; flex:none; margin-top:6px; transition:all .35s; }
.tile .st .watt{ font-size:12px; color:var(--text-dim); font-weight:500; }
.tile.on .st .watt{ color:rgba(255,255,255,0.85); text-shadow:0 1px 3px rgba(0,0,0,0.4); }
.tile .st{ display:flex; align-items:baseline; gap:7px; }
.tile .st b{ font-size:15px; font-weight:700; }
.popout-card .st b{ font-size:19px; }
.tile .meta .nm{ margin-top:auto; }
.k-missing .missing,.k-ac .x{ }
.missing{ margin:auto; color:var(--text-faint); font-size:13px; text-align:center; }
/* AC: no animation (static snowflake), just the active glow */
/* geyser keeps a subtle heat shimmer; water heater has none */
.uf-pump{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text-faint); margin-top:3px; }
.uf-pump .ufp-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.18); flex:none; }
.uf-pump.on{ color:var(--c); }
.uf-pump.on .ufp-dot{ background:var(--c); box-shadow:0 0 8px var(--c); animation:heatPulse calc(1.6s / var(--anim-speed)) ease-in-out infinite; }
.heat-glow{ position:absolute; inset:-2px; border-radius:14px; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 70%, color-mix(in srgb,var(--c) 50%,transparent), transparent 70%); }
.tile.k-geyser.on .heat-glow, .tile.k-underfloor.on .heat-glow{ animation:heatPulse calc(2.4s / var(--anim-speed)) ease-in-out infinite; }
@keyframes heatPulse{ 0%,100%{ opacity:.25; transform:scale(.9); } 50%{ opacity:.7; transform:scale(1.08); } }

/* ===== valve: streaming water droplets when open ===== */
.valve-stream{ position:absolute; left:50%; bottom:-6px; width:24px; height:26px; transform:translateX(-50%);
  pointer-events:none; opacity:0; }
.tile.k-valve.on .valve-stream,.drow.k-valve.on .valve-stream{ opacity:1; }
.valve-stream i{ position:absolute; top:0; width:4px; height:6px; border-radius:0 0 50% 50%/0 0 60% 60%;
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 70%,#fff), var(--c));
  box-shadow:0 0 6px var(--c); opacity:0; }
.valve-stream i:nth-child(1){ left:4px; }
.valve-stream i:nth-child(2){ left:10px; }
.valve-stream i:nth-child(3){ left:16px; }
.tile.k-valve.on .valve-stream i,.drow.k-valve.on .valve-stream i{ animation:drip calc(1.1s / var(--anim-speed)) ease-in infinite; }
.valve-stream i:nth-child(2){ animation-delay:calc(.36s / var(--anim-speed)); }
.valve-stream i:nth-child(3){ animation-delay:calc(.72s / var(--anim-speed)); }
@keyframes drip{
  0%{ transform:translateY(0) scaleY(.7); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:translateY(22px) scaleY(1.4); opacity:0; }
}
/* valve icon gentle "open" turn + glow */
.tile.k-valve.on .ic svg,.drow.k-valve.on .drow-ic svg{ filter:drop-shadow(0 0 5px var(--c)); }
.drow .valve-stream.sm{ bottom:-4px; height:20px; width:20px; }
.drow .valve-stream.sm i{ height:5px; }

/* control-card layout (adjustable) */
.tile-body{ display:flex; flex-direction:column; }
.ctl-main{ display:flex; flex-direction:column; flex:1; min-width:0; position:relative; }

/* drag-to-adjust: whole card body is the control; background fills to show level */
.tile-fill{ position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb,var(--c) 7%, transparent) 0%, color-mix(in srgb,var(--c) 13%, transparent) 100%);
  transition:height .18s cubic-bezier(.3,.8,.3,1); will-change:height; }
/* diffused top edge — soft glow instead of a hard line */
.tile-fill::before{ content:''; position:absolute; left:0; right:0; top:-6px; height:12px; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--c) 38%, transparent) 60%, transparent);
  filter:blur(2px); opacity:.85; }
/* during an active drag, follow the finger instantly (no smoothing lag) */
.tile-body:has(.ctl-main.dragging) ~ .tile-fill, .tile-fill.nofade{ transition:none; }
/* on release, glide to the target with a long ease-out (timelapse sunrise feel) */
.tile-fill.settle{ transition:height 1.15s cubic-bezier(.16,1,.3,1); }
/* off/0% — the fill is mounted (for smooth drag-up) but its top glow is hidden */
.tile-fill.off::before{ opacity:0; }
.ctl-main.dragging{ }
/* the device icon doubles as an on/off button on slider cards */
.ic.ic-tap{ cursor:pointer; }
.ic.ic-tap:hover{ filter:brightness(1.12); }
.ic.ic-tap:active{ transform:scale(.92); }
.ic{ transition:transform .12s ease, filter .15s ease; }
.tile.has-drag .tile-body{ z-index:1; }
.ctl-pct{ font-size:20px; font-weight:800; letter-spacing:-0.02em; color:var(--c); line-height:1; }
.ctl-pct span{ font-size:11px; font-weight:700; margin-left:1px; }
.drag-hint{ position:absolute; right:2px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column;
  align-items:center; gap:2px; opacity:0; transition:opacity .2s; pointer-events:none; color:var(--c); }
.tile.has-drag:hover .drag-hint{ opacity:.5; }
.drag-hint svg{ width:16px; height:16px; }

/* compact (1-unit) cards: icon + name only, tap to expand */
.tile.is-compact .st{ display:none; }
.tile.is-compact .rm{ display:none; }
.tile.is-compact .nm{ font-size:13px; }
.compact-cue{ position:absolute; top:10px; right:10px; z-index:2; color:var(--text-faint); opacity:.6; }
.compact-cue svg{ width:15px; height:15px; }

/* pop-out enlarged control */
.popout-scrim{ position:fixed; inset:0; z-index:90; background:rgba(4,5,9,0.55); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; overflow:auto; padding:24px; animation:fade .18s ease; }
.popout-card{ position:relative; width:236px; max-height:88vh; overflow-y:auto; border-radius:30px; display:flex; flex-direction:column;
  background:#12151c; box-shadow:0 40px 90px -24px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.1);
  animation:popScale .26s cubic-bezier(.2,.9,.3,1); }
@keyframes popScale{ from{ transform:scale(.85); opacity:0; } }
.popout-visual{ position:relative; height:206px; flex:none; border-radius:30px 30px 0 0; overflow:hidden; }
.popout-card .ctl-pct{ font-size:30px; }
.popout-card .nm{ font-size:18px; }
.popout-toggle{ margin:0 16px 16px; z-index:3; border:none; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:700; padding:12px; border-radius:14px; color:var(--text);
  background:rgba(255,255,255,0.1); }
.popout-card.on .popout-toggle{ color:#0a0a0a; background:var(--c); }
.popout-close{ position:absolute; top:14px; right:14px; z-index:5; width:30px; height:30px; border-radius:50%;
  border:none; cursor:pointer; display:grid; place-items:center; color:var(--text); background:rgba(0,0,0,0.35); }
.popout-close svg{ width:15px; height:15px; }
.popout-timer{ position:absolute; left:0; top:0; height:3px; z-index:6; background:var(--c); width:100%;
  transform-origin:left; animation:timerbar linear forwards; box-shadow:0 0 8px var(--c); }
@keyframes timerbar{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

/* light colour control (popout) */
.color-btn{ position:absolute; top:10px; right:10px; z-index:3; width:24px; height:24px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.7); cursor:pointer; box-shadow:0 0 12px -1px var(--c), 0 1px 4px rgba(0,0,0,0.5); padding:0; }
.lc{ padding:14px 16px 4px; display:flex; flex-direction:column; gap:10px; }
.lc-label{ font-size:11.5px; font-weight:600; color:var(--text-dim); }
.lc-rail{ position:relative; height:22px; border-radius:12px; cursor:pointer; touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.lc-hue{ background:linear-gradient(90deg, hsl(0 90% 55%), hsl(60 90% 55%), hsl(120 90% 55%), hsl(180 90% 55%), hsl(240 90% 55%), hsl(300 90% 55%), hsl(360 90% 55%)); }
.lc-sat{ background:linear-gradient(90deg, hsl(var(--h) 0% 65%), hsl(var(--h) 95% 52%)); }
.lc-cct{ background:linear-gradient(90deg, #ff9436, #ffb46b, #ffd9a8, #fff4e6, #eaf1ff, #cfe0ff); }
.lc-thumb{ position:absolute; top:50%; width:18px; height:18px; border-radius:50%; transform:translate(-50%,-50%);
  border:2.5px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,0.6); pointer-events:none; }
.lc-swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.lc-swatches button{ width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.2); cursor:pointer; padding:0; }
.lc-white{ background:#f4f6ff !important; color:#333; font-size:11px; font-weight:800; display:grid; place-items:center; }
.lc-cctends{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-faint); }

/* WLED effect chips (popout) */
.fx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fx-chip{ border:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:9px;
  color:var(--text-dim); background:rgba(255,255,255,0.06); }
.fx-chip.on{ color:#0a0a0a; background:var(--c); }

/* thermostat card */
.k-thermostat .thermo-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  align-items:center; padding:16px 14px; }
.thermo-head{ text-align:center; width:100%; }
.thermo-head .nm{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thermo-head .rm{ font-size:11.5px; color:var(--text-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thermo-dial{ position:relative; flex:1; width:100%; min-height:120px; display:grid; place-items:center; margin:6px 0; }
.thermo-dial svg{ width:100%; height:100%; max-height:170px; }
.thermo-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.thermo-cur{ font-size:34px; font-weight:800; letter-spacing:-0.03em; line-height:1; }
.thermo-cur span{ font-size:18px; font-weight:700; }
.thermo-state{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-top:4px; }
.thermo-set{ display:flex; align-items:center; gap:14px; }
.thermo-set button{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; font-size:22px; font-weight:600;
  line-height:1; color:var(--text); background:rgba(255,255,255,0.08); display:grid; place-items:center; }
.thermo-set button:hover{ background:rgba(255,255,255,0.14); }
.thermo-target{ display:flex; flex-direction:column; align-items:center; min-width:58px; }
.thermo-target b{ font-size:20px; font-weight:800; color:var(--c); }
.thermo-target span{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.thermo-onbtn{ border:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700; padding:10px 22px; border-radius:12px;
  color:var(--text); background:rgba(255,255,255,0.1); }

/* variant selector in the card editor */
.variant-seg{ display:flex; align-items:center; gap:12px; margin:2px 0 14px; }
.vs-label{ font-size:12.5px; color:var(--text-faint); flex:none; }
.variant-seg .seg{ flex:1; min-width:0; }
.variant-seg .seg button{ flex:1; min-width:0; }
/* Phone: stack the label above a full-width segmented control so the options
   never clip inside the (now correctly sized) modal. */
@media (max-width:760px){
  .variant-seg{ flex-direction:column; align-items:stretch; gap:7px; }
  .variant-seg .seg button{ white-space:nowrap; padding-left:6px; padding-right:6px; }
}

/* ---- room card ---- */
.room-card{ position:relative; height:100%; overflow:hidden; padding:0; }
.room-photo{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.room-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,7,11,0.10) 0%, rgba(6,7,11,0) 32%, rgba(6,7,11,0.55) 78%, rgba(6,7,11,0.82) 100%); }
.room-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  padding:18px; pointer-events:none; }
.room-top{ display:flex; align-items:center; justify-content:space-between; }
.room-name{ font-size:19px; font-weight:700; letter-spacing:-0.02em; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.room-go{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,0.14); backdrop-filter:blur(6px); }
.room-go svg{ width:16px; height:16px; }
.room-sub{ font-size:12.5px; color:rgba(255,255,255,0.8); margin-top:3px; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.room-sensors{ display:flex; gap:16px; }
.room-sensors span{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.room-sensors svg{ width:15px; height:15px; opacity:.85; }

/* ---- page tabs ---- */
.page-tabs{ display:flex; align-items:center; gap:8px; margin:0 2px 16px; flex-wrap:wrap; }
.ptab{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:13px; cursor:pointer;
  border:none; font:inherit; font-size:13px; font-weight:600; color:var(--text-dim); white-space:nowrap;
  background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); transition:all .2s; position:relative; }
.ptab svg{ width:16px; height:16px; }
.ptab:hover{ color:var(--text); }
.ptab.on{ color:var(--text); background:rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4), 0 6px 18px -10px var(--accent); }
.ptab.add{ padding:9px; color:var(--text-faint); }
.ptab-x{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,0.12); margin-left:2px; }
.ptab-x svg{ width:11px; height:11px; }
.add-card-btn{ display:flex; align-items:center; gap:6px; padding:9px 15px; border-radius:13px; cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); font:inherit; font-size:13px; font-weight:600;
  white-space:nowrap; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.add-card-btn svg{ width:16px; height:16px; }
.edit-pill{ font-size:11px; font-weight:600; color:var(--accent); padding:6px 10px; border-radius:9px;
  background:color-mix(in srgb,var(--accent) 14%,transparent); }
.empty-page{ text-align:center; color:var(--text-faint); padding:60px 0; font-size:14px; }
.empty-page b{ color:var(--accent); }

/* ---- card edit/delete tools ---- */
.card-tools{ position:absolute; top:8px; right:8px; z-index:8; display:flex; gap:6px; }
.card-tools button{ width:28px; height:28px; border-radius:9px; border:none; cursor:pointer;
  display:grid; place-items:center; color:var(--text); background:rgba(15,17,22,0.7);
  backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.card-tools button:hover{ background:rgba(30,33,40,0.9); }
.card-tools button svg{ width:15px; height:15px; }
.card-tools button:last-child:hover{ color:#ff7a8a; }
/* in customize mode, push each card's own header controls clear of the edit/trash tools */
body.edit-mode .sec-head,
body.edit-mode .block-title{ padding-right:72px; }
body.edit-mode .flow-wrap .sec-head,
body.edit-mode .ov .sec-head{ padding-right:72px; }

/* ---- modals ---- */
.modal-scrim{ position:fixed; inset:0; z-index:80; background:rgba(4,5,9,0.6);
  backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto; animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0; } }
.modal{ width:440px; max-width:100%; max-height:86vh; display:flex; flex-direction:column;
  border-radius:24px; overflow:hidden; animation:pop .26s cubic-bezier(.2,.9,.3,1);
  background:#14171f; box-shadow:0 30px 80px -20px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.08); }
.modal.wide{ width:760px; }
@keyframes pop{ from{ transform:scale(.95) translateY(8px); opacity:0; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; }
.modal-head h3{ font-size:17px; font-weight:700; }
.modal-body{ padding:4px 20px 20px; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.btn{ position:static; border:none; font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; padding:10px 20px;
  border-radius:12px; background:var(--accent); color:#0a0a0a; }
.btn.ghost{ background:rgba(255,255,255,0.07); color:var(--text); }

.cat-group{ margin-bottom:18px; }
.cat-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 10px; }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cat-card{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; cursor:pointer;
  border:none; font:inherit; text-align:left; border-radius:16px; color:var(--text); }
.cat-card:hover{ background:rgba(255,255,255,0.04); }
.cc-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent); }
.cc-ic svg{ width:20px; height:20px; }
.cc-l{ font-size:13px; font-weight:600; }
.cc-s{ font-size:11px; color:var(--text-faint); margin-top:-4px; }

.pick-hint{ font-size:12.5px; color:var(--text-faint); margin:6px 0 10px; }
.pick-list,.pick-scroll{ display:flex; flex-direction:column; gap:6px; }
.pick-scroll{ max-height:260px; overflow-y:auto; padding-right:4px; }
.pick-cols{ display:grid; grid-template-columns:1fr 1.3fr; gap:20px; }
.pick-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:13px; cursor:pointer;
  border:none; font:inherit; text-align:left; width:100%; color:var(--text); background:rgba(255,255,255,0.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); transition:all .15s; }
.pick-row:hover{ background:rgba(255,255,255,0.06); }
.pick-row.on{ background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent); }
.pr-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;
  color:var(--text-dim); background:rgba(255,255,255,0.05); }
.pr-ic svg{ width:18px; height:18px; }
.pick-row.on .pr-ic{ color:var(--accent); }
.pr-txt{ flex:1; display:flex; flex-direction:column; }
.pr-txt b{ font-size:13.5px; font-weight:600; }
.pr-txt span{ font-size:11.5px; color:var(--text-faint); }
.pr-mark{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  color:var(--accent); }
.pr-mark.box{ border-radius:7px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.18); }
.pick-row.on .pr-mark.box{ box-shadow:inset 0 0 0 1.5px var(--accent); background:color-mix(in srgb,var(--accent) 22%,transparent); }
.pr-mark svg{ width:15px; height:15px; }

/* searchable picker */
.searchbox{ display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:12px;
  background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); margin-bottom:10px; }
.searchbox svg{ width:17px; height:17px; color:var(--text-faint); flex:none; }
.searchbox input{ flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:13.5px; }
.searchbox input::placeholder{ color:var(--text-faint); }
.searchbox button{ border:none; background:rgba(255,255,255,0.1); color:var(--text-dim); cursor:pointer;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center; }
.searchbox button svg{ width:12px; height:12px; }
.kind-chips{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.kchip{ border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:7px 11px;
  border-radius:10px; color:var(--text-dim); background:rgba(255,255,255,0.05); }
.kchip.ic{ width:32px; height:32px; padding:0; display:grid; place-items:center; }
.kchip.ic svg{ width:17px; height:17px; }
.kchip:hover{ color:var(--text); }
.kchip.on{ color:var(--c, var(--accent)); background:color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 45%, transparent); }

/* source-entity groups in config */
.src-group{ margin-bottom:12px; }
.src-group-label{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:0 0 7px 2px; }
.src-group-label svg{ width:14px; height:14px; }
.src-group .pick-row{ margin-bottom:6px; }

/* room sensor fields */
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;
  border-top:1px solid rgba(255,255,255,0.08); padding-top:14px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field-lbl{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-dim); }
.field-lbl svg{ width:14px; height:14px; }

/* custom dropdown */
.dd{ position:relative; }
.dd-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:10px 12px; border-radius:11px; border:none; font:inherit; font-size:13px; cursor:pointer;
  color:var(--text); background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); text-align:left; }
.dd-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-btn span.ph{ color:var(--text-faint); }
.dd-btn svg{ width:14px; height:14px; flex:none; opacity:.6; }
.dd-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; border-radius:14px;
  background:#161a22; border:1px solid rgba(255,255,255,0.12); box-shadow:0 20px 50px -16px rgba(0,0,0,0.85);
  overflow:hidden; }
.dd-search{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid rgba(255,255,255,0.07); }
.dd-search svg{ width:15px; height:15px; color:var(--text-faint); }
.dd-search input{ flex:1; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:12.5px; }
.dd-list{ max-height:200px; overflow-y:auto; padding:5px; }
.dd-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 11px; border-radius:9px; border:none; font:inherit; font-size:12.5px; cursor:pointer;
  color:var(--text); background:none; text-align:left; }
.dd-item:hover{ background:rgba(255,255,255,0.06); }
.dd-item.on{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
.dd-val{ font-size:11.5px; color:var(--text-faint); flex:none; }
.dd-item.on .dd-val{ color:var(--accent); }

/* per-device options (rename / delete) */
.dev-row-menu{ flex:none; }
.dev-kebab{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none;
  border:none; border-radius:9px; cursor:pointer; color:var(--text-dim); background:rgba(255,255,255,0.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); }
.dev-kebab:hover{ color:var(--text); background:rgba(255,255,255,0.09); }
.dev-kebab svg{ width:16px; height:16px; }
.dd-pop.sm{ left:auto; right:0; min-width:172px; padding:5px; }
.dd-pop.sm .dd-item svg{ width:15px; height:15px; opacity:.75; }
.dd-item.danger{ color:#ff6b6b; }
.dd-item.danger:hover{ background:color-mix(in srgb,#ff6b6b 14%,transparent); }

.room-sensors .unset{ opacity:.5; }

/* ============================================================
   CONTAINER CARDS (Favorites / Devices / Rooms nest other cards)
   ============================================================ */
.fav-card,.devc,.roomsc{ height:100%; display:flex; flex-direction:column; padding:18px; overflow:hidden; }
.fav-head,.devc-head,.roomsc-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.fav-title{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; letter-spacing:-0.01em; }
.fav-title svg{ width:17px; height:17px; color:var(--accent); }
.fav-mode{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:8px; }
.fav-mode.auto{ color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }
.fav-mode.manual{ color:var(--text-dim); background:rgba(255,255,255,0.07); }
.fav-more{ width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; flex:none;
  display:grid; place-items:center; color:var(--text-dim); background:rgba(255,255,255,0.05); }
.fav-more:hover{ color:var(--text); background:rgba(255,255,255,0.1); }
.fav-more svg{ width:17px; height:17px; }

/* Favorites: horizontal strip of auto-scaling tiles */
.fav-row{ flex:1; min-height:0; display:flex; gap:14px; }
.fav-item{ flex:1 1 0; min-width:0; position:relative; }
.fav-item .tile{ height:100%; }
/* per-item "configure" button shown in customize mode */
.fav-item-edit{ position:absolute; top:7px; right:7px; z-index:9; width:26px; height:26px; border-radius:8px;
  border:none; cursor:pointer; display:grid; place-items:center; color:var(--text);
  background:rgba(20,23,30,0.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }
.fav-item-edit svg{ width:14px; height:14px; }
.fav-item-edit:hover{ background:rgba(30,33,42,0.95); }
/* vertical orientation — stacks tiles in a column (use as a right-side quick-controls strip) */
.fav-row.col{ flex-direction:column; overflow-y:auto; }
.fav-card.vertical .fav-row.col .fav-item{ flex:0 0 auto; }
.fav-card.vertical .fav-row.col .fav-item .tile{ height:auto; min-height:104px; }

/* Devices: responsive grid of compact rows */
.devc-tabs{ display:flex; gap:4px; }
.devc-tabs button{ border:none; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:6px 11px; border-radius:9px; color:var(--text-faint); background:transparent; }
.devc-tabs button:hover{ color:var(--text); }
.devc-tabs button.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.devc-grid{ flex:1; min-height:0; overflow-y:auto; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; align-content:start; }
.drow{ position:relative; overflow:hidden; min-height:60px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,0.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); transition:all .25s; }
.drow.on{ background:color-mix(in srgb,var(--c) 9%,rgba(255,255,255,0.02));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent); }
.drow-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  color:var(--text-dim); background:rgba(255,255,255,0.05); transition:all .25s; }
.drow-ic svg{ width:21px; height:21px; }
.drow.on .drow-ic{ color:var(--c); background:color-mix(in srgb,var(--c) 18%,transparent);
  box-shadow:0 0 16px -2px var(--c), inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent); }
.drow-ic{ position:relative; overflow:visible; }
/* fan blades spin (reuses the .fan-blades group inside the icon) */
.drow .fan-blades{ transform-origin:50% 50%; }
.drow.k-fan.on .fan-blades{ animation:spin calc(1.4s / var(--anim-speed)) linear infinite; }
.drow.k-fan.on.spd-1 .fan-blades{ animation-duration:calc(2.4s / var(--anim-speed)); }
.drow.k-fan.on.spd-2 .fan-blades{ animation-duration:calc(1.5s / var(--anim-speed)); }
.drow.k-fan.on.spd-3 .fan-blades{ animation-duration:calc(0.8s / var(--anim-speed)); }
/* light breathing glow + flicker-in */
.drow.k-light.on .drow-ic svg{ animation:bulbOn .6s ease both, rowBreathe calc(3.4s / var(--anim-speed)) ease-in-out .6s infinite; }
@keyframes rowBreathe{ 0%,100%{ filter:brightness(1.15); } 50%{ filter:brightness(1.55); } }
/* plug pulse ring */
.drow-plug-ring{ position:absolute; inset:-3px; border-radius:13px; border:2px solid var(--c); opacity:0; pointer-events:none; }
.drow.k-plug.on .drow-plug-ring{ animation:plugPulse calc(2.2s / var(--anim-speed)) ease-out infinite; }
/* geyser heat shimmer */
.drow-heat{ position:absolute; inset:-3px; border-radius:13px; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 50% 65%, color-mix(in srgb,var(--c) 55%,transparent), transparent 70%); }
.drow.k-geyser.on .drow-heat, .drow.k-underfloor.on .drow-heat{ animation:heatPulse calc(2.4s / var(--anim-speed)) ease-in-out infinite; }
.drow-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.drow-meta b{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drow-meta span{ font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; gap:6px; }
.drow-status .drs-dot{ width:7px; height:7px; border-radius:50%; flex:none; background:rgba(255,255,255,0.18); }
.drow-status.active{ color:var(--c); }
.drow-status.active .drs-dot{ background:var(--c); box-shadow:0 0 8px var(--c); }
.drow-ro{ font-size:10.5px; font-weight:600; color:var(--text-faint); padding:5px 10px; border-radius:8px; background:var(--surface-2); }
.drow-lockbtn{ display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:700; padding:7px 13px; border-radius:9px; color:#0a0a0a; background:var(--battery); }
.drow-lockbtn.locked{ color:var(--text-dim); background:var(--surface-2); }
.drow-lockbtn svg{ width:13px; height:13px; }
.drow-ctl{ flex:none; display:flex; align-items:center; gap:8px; z-index:1; }
.drow-fill{ position:absolute; left:0; top:0; bottom:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb,var(--c) 26%,transparent), color-mix(in srgb,var(--c) 14%,transparent));
  box-shadow:inset -1px 0 0 color-mix(in srgb,var(--c) 60%,transparent); transition:width .12s ease; }
.drow.slidable{ cursor:ew-resize; touch-action:none; }
.drow.slidable .drow-meta, .drow.slidable .drow-ic{ z-index:1; }
.drow.breathing .drow-ic{ animation:drowBreathe calc(3.4s / var(--anim-speed)) ease-in-out infinite; }
@keyframes drowBreathe{
  0%,100%{ box-shadow:0 0 10px -3px var(--c), inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent); opacity:0.82; }
  50%{ box-shadow:0 0 22px 1px var(--c), inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent); opacity:1; }
}
.drow-color{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); cursor:pointer; flex:none;
  box-shadow:0 0 10px -1px currentColor; }
.color-modal{ width:340px; max-width:100%; }
.cm-bright{ margin-bottom:16px; }
.cm-bright .field-lbl{ display:block; font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.cm-bright input[type=range]{ width:100%; accent-color:var(--accent); }
.pill{ width:46px; height:27px; border-radius:14px; border:none; cursor:pointer; padding:0; position:relative;
  background:rgba(255,255,255,0.12); transition:background .25s; }
.pill i{ position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff;
  transition:transform .25s, box-shadow .25s; }
.pill.on{ background:var(--c); }
.pill.on i{ transform:translateX(19px); box-shadow:0 0 12px var(--c); }
.stepper{ display:flex; align-items:center; gap:2px; background:rgba(255,255,255,0.06); border-radius:11px; padding:3px; }
.stepper button{ width:26px; height:26px; border-radius:8px; border:none; cursor:pointer; font-size:16px;
  color:var(--text); background:rgba(255,255,255,0.06); display:grid; place-items:center; }
.stepper button:hover{ background:var(--c); color:#0a0a0a; }
.stepper span{ min-width:34px; text-align:center; font-size:13px; font-weight:700; }
.count-field{ display:flex; align-items:center; gap:12px; margin:6px 0 14px; }
.count-field input{ flex:1; accent-color:var(--accent); }
.count-field b{ color:var(--accent); min-width:18px; text-align:center; }

/* Rooms strip */
.roomsc-tabs{ display:flex; gap:5px; margin-left:4px; }
.roomsc-tabs button{ border:none; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer;
  padding:5px 10px; border-radius:8px; color:var(--text-faint); background:rgba(255,255,255,0.05); }
.roomsc-tabs button.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); }
.roomsc-add{ width:30px; height:30px; border-radius:9px; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  cursor:pointer; flex:none; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); }
.roomsc-add svg{ width:16px; height:16px; }
.roomsc-row{ flex:1; min-height:0; display:flex; gap:14px; }
.roomsc-item{ flex:1 1 0; min-width:0; position:relative; }
.roomsc-item .room-card{ height:100%; }
.roomsc-del{ position:absolute; top:8px; right:8px; z-index:6; width:26px; height:26px; border-radius:8px;
  border:none; cursor:pointer; display:grid; place-items:center; color:#fff;
  background:rgba(10,12,16,0.7); backdrop-filter:blur(8px); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15); }
.roomsc-del:hover{ color:#ff7a8a; }
.roomsc-del svg{ width:14px; height:14px; }

/* page template picker */
.tpl-name{ width:100%; padding:10px 12px; border-radius:11px; border:none; font:inherit; font-size:13.5px;
  color:var(--text); background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08); }
.tpl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.tpl-card{ display:flex; flex-direction:column; gap:4px; padding:10px; cursor:pointer; border:none; text-align:left;
  border-radius:14px; color:var(--text); background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.tpl-card:hover{ background:rgba(255,255,255,0.06); }
.tpl-card.on{ background:color-mix(in srgb,var(--accent) 12%,transparent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.tpl-card b{ font-size:13px; font-weight:600; margin-top:4px; }
.tpl-card span{ font-size:11px; color:var(--text-faint); }
.tpl-prev{ position:relative; width:100%; height:74px; border-radius:9px; overflow:hidden;
  background:rgba(0,0,0,0.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); }
.tpl-prev i{ position:absolute; border-radius:3px; background:color-mix(in srgb,var(--accent) 35%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); transform:scale(.92); }
.tpl-card.on .tpl-prev i{ background:color-mix(in srgb,var(--accent) 50%,transparent); }
.tpl-empty{ position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:var(--text-faint); }

/* ============================================================
   Blinds glyph, contact chips, scenes, home status, scene editor
   ============================================================ */
.blinds-glyph{ width:100%; height:100%; }

/* room open/closed contact chip */
.room-contact{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#fff;
  padding:4px 9px; border-radius:9px; background:rgba(54,211,153,0.22); text-shadow:0 1px 4px rgba(0,0,0,.5); }
.room-contact svg{ width:13px; height:13px; }
.room-contact.open{ background:rgba(255,194,77,0.28); }

/* rail blocks: let card components size to content */
.glass-rail-block > .panel{ height:auto !important; }

/* scenes card — edit affordance shown only in customize mode */
.scene{ position:relative; }
.scene.editing{ cursor:pointer; }
.sc-badge{ position:absolute; top:-4px; right:-4px; width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; color:#0a0a0a; background:var(--accent);
  box-shadow:0 2px 6px rgba(0,0,0,0.4); }
.sc-badge svg{ width:11px; height:11px; }
.scene-edit-hint{ font-size:11px; color:var(--text-faint); margin-top:12px; text-align:center; }

/* home status */
.status-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.status-row:last-child{ border-bottom:none; }
.si{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none;
  color:var(--text-dim); background:rgba(255,255,255,0.05); }
.si svg{ width:17px; height:17px; }
.sl{ flex:1; font-size:13px; color:var(--text-dim); }
.sv{ font-size:13.5px; font-weight:700; }

/* scene editor modal */
.scene-meta{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.scene-meta .tpl-name{ flex:1; }
.scene-colors{ display:flex; gap:6px; }
.sc-color{ width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
.sc-color.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.25); }
.scene-icons{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.sc-iconpick{ width:38px; height:38px; border-radius:11px; border:none; cursor:pointer; display:grid; place-items:center;
  color:var(--text-dim); background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.sc-iconpick.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.sc-iconpick svg{ width:19px; height:19px; }
.act-list{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.act-row{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:13px;
  background:rgba(255,255,255,0.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.act-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.act-ic svg{ width:18px; height:18px; }
.act-meta{ display:flex; flex-direction:column; min-width:0; width:130px; flex:none; }
.act-meta b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-meta span{ font-size:11px; color:var(--text-faint); }
.act-ctl{ flex:1; display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.act-toggle{ border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700; padding:6px 14px; border-radius:9px;
  color:var(--text-dim); background:rgba(255,255,255,0.08); }
.act-toggle.on{ color:#0a0a0a; background:var(--accent); }
.act-range{ display:flex; align-items:center; gap:9px; flex:1; max-width:200px; }
.act-range input{ flex:1; accent-color:var(--accent); }
.act-range b{ font-size:12.5px; font-weight:700; min-width:54px; text-align:right; }
.act-note{ font-size:11.5px; color:var(--text-faint); font-style:italic; }
.act-del{ width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; flex:none; display:grid; place-items:center;
  color:var(--text-dim); background:rgba(255,255,255,0.06); }
.act-del:hover{ color:#ff7a8a; }
.act-del svg{ width:15px; height:15px; }
.add-dev-btn{ display:inline-flex; align-items:center; gap:6px; }
.add-dev-btn svg{ width:15px; height:15px; }
.act-add-pop{ border-radius:14px; padding:10px; background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); }
.btn.danger{ color:#ff7a8a; }
.chk-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-dim); cursor:pointer; margin-top:14px; }
.chk{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.18); color:var(--accent); }
.chk.on{ box-shadow:inset 0 0 0 1.5px var(--accent); background:color-mix(in srgb,var(--accent) 20%,transparent); }
.chk svg{ width:14px; height:14px; }

/* ============================================================
   FULL-PAGE TAB VIEWS (Devices, etc.)
   ============================================================ */
.tabview{ display:flex; flex-direction:column; gap:18px; padding-bottom:40px; }
.tabview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tabview-head h1{ font-size:26px; font-weight:700; letter-spacing:-0.02em; }
.tabview-head p{ font-size:13px; color:var(--text-dim); margin-top:3px; }
.tabview-tools{ display:flex; gap:10px; }
.searchbox.wide{ width:300px; max-width:60vw; margin:0; }

.kind-filter{ display:flex; gap:8px; flex-wrap:wrap; }
.kf{ display:flex; align-items:center; gap:6px; border:none; cursor:pointer; font:inherit; font-size:12.5px;
  font-weight:600; padding:8px 13px; border-radius:11px; color:var(--text-dim); --c:var(--accent);
  background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.kf svg{ width:15px; height:15px; }
.kf:hover{ color:var(--text); }
.kf.on{ color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent); }

.dev-group{ display:flex; flex-direction:column; gap:8px; }
.dev-group-head{ display:flex; align-items:center; gap:10px; margin:6px 2px 2px; }
.dgh-name{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.dgh-name svg{ width:16px; height:16px; color:var(--text-dim); }
.dgh-name.un{ color:var(--solar); }
.dgh-name.un svg{ color:var(--solar); }
.dgh-count{ font-size:11px; font-weight:700; color:var(--text-faint); background:rgba(255,255,255,0.06); padding:2px 9px; border-radius:20px; }
.dgh-hint{ font-size:11.5px; color:var(--text-faint); margin:2px 2px 0; font-style:italic; }
/* collapsible Hidden group */
.dev-group-head.as-btn{ width:100%; border:none; background:none; font:inherit; color:inherit; cursor:pointer; }
.dev-group-head .spacer{ flex:1; }
.dgh-chev{ width:16px; height:16px; color:var(--text-faint); transition:transform .2s; }
.dgh-chev.open{ transform:rotate(180deg); }
.hidden-group{ margin-top:18px; opacity:0.85; }
.hidden-group .dev-row{ opacity:0.6; }
.dev-list{ display:flex; flex-direction:column; gap:6px; }

.dev-row{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:15px; --c:var(--accent);
  background:rgba(255,255,255,0.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.dev-row.on{ background:color-mix(in srgb,var(--c) 7%, rgba(255,255,255,0.025)); }
.dev-ic{ width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; color:var(--text-dim);
  background:rgba(255,255,255,0.05); }
.dev-row.on .dev-ic{ color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); box-shadow:0 0 16px -4px var(--c); }
.dev-ic svg{ width:21px; height:21px; }
.dev-main{ flex:1; min-width:0; }
.dev-name{ font-size:14px; font-weight:600; }
.dev-model{ font-size:11.5px; color:var(--text-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dev-meta{ display:flex; align-items:center; gap:8px; flex:none; }
.proto{ font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:7px; text-transform:uppercase;
  color:#9aa3b2; background:rgba(255,255,255,0.06); }
.proto.zigbee{ color:#7dd3fc; background:rgba(125,211,252,0.12); }
.proto.wifi{ color:#86efac; background:rgba(134,239,172,0.12); }
.proto.wifiir{ color:#fcd34d; background:rgba(252,211,77,0.12); }
.proto.ble{ color:#c4b5fd; background:rgba(196,181,253,0.12); }
.proto.matter,.proto.thread{ color:#f0abfc; background:rgba(240,171,252,0.12); }
.batt{ display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--text-dim); }
.batt svg{ width:15px; height:15px; }
.batt.low{ color:#ff7a8a; }
.dev-watt{ font-size:11.5px; font-weight:700; color:var(--solar); }
.dev-status{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text-dim); width:140px; flex:none; }
.dev-status .ds-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:rgba(255,255,255,0.18); }
.dev-status.active{ color:var(--c); }
.dev-status.active .ds-dot{ background:var(--c); box-shadow:0 0 9px var(--c); }
.dev-toggle{ display:inline-flex; align-items:center; gap:6px; justify-content:center; border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700; padding:7px 16px; border-radius:10px;
  color:var(--text-dim); background:rgba(255,255,255,0.08); flex:none; min-width:58px; }
.dev-toggle.on{ color:#0a0a0a; background:var(--c); }
.dev-toggle.lock{ min-width:104px; }
.dev-toggle.lock svg{ width:13px; height:13px; }
.dev-toggle.lock.on{ color:#0a0a0a; background:var(--battery); }
.dev-toggle.ghost{ color:var(--text); background:rgba(255,255,255,0.08); }
.dev-toggle.ghost svg{ width:14px; height:14px; }
.dev-row.clickable .dev-ic,.dev-row.clickable .dev-main{ cursor:pointer; }
/* source-device (Modbus inverter/meter) details popup */
.dd-sub{ font-size:12px; color:var(--text-faint); margin:0 0 10px; }
.dd-aux{ margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline); }
.dd-aux-label{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.dd-aux-note{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.dev-ro{ font-size:11px; font-weight:600; color:var(--text-faint); padding:6px 12px; border-radius:9px; background:var(--surface-2); flex:none; min-width:58px; text-align:center; }
.dev-dot{ width:10px; height:10px; border-radius:50%; flex:none; background:rgba(255,255,255,0.15); }
.dev-dot.on{ background:var(--c); box-shadow:0 0 10px var(--c); }

/* Rooms tab */
.room-block{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:18px;
  background:rgba(255,255,255,0.022); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); margin-bottom:14px; }
.room-block.unassigned-block{ background:color-mix(in srgb, var(--solar) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--solar) 28%,transparent); }
.room-block-head{ display:flex; align-items:center; gap:12px; }
.rbh-title{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; white-space:nowrap; flex:none; }
.rbh-title svg{ width:18px; height:18px; color:var(--text-dim); }
.rbh-title.un{ color:var(--solar); }
.rbh-title.un svg{ color:var(--solar); }
.rbh-sensors{ display:flex; gap:12px; margin-left:6px; }
.rbh-sensors span{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--text-dim); }
.rbh-sensors svg{ width:14px; height:14px; opacity:.8; }
.room-del{ width:32px; height:32px; border-radius:9px; border:none; cursor:pointer; flex:none; display:grid; place-items:center;
  color:var(--text-dim); background:rgba(255,255,255,0.06); }
.room-del:hover{ color:#ff7a8a; background:rgba(255,122,138,0.12); }
.room-del svg{ width:16px; height:16px; }
.dev-kind{ text-transform:capitalize; }

/* assign menu */
.assign{ position:relative; flex:none; }
.assign-btn{ display:flex; align-items:center; gap:4px; border:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:600;
  padding:7px 11px; border-radius:10px; color:var(--text-dim); background:rgba(255,255,255,0.07); }
.assign-btn:hover{ color:var(--text); }
.assign-btn svg{ width:12px; height:12px; opacity:.6; }
.assign-pop{ position:absolute; top:calc(100% + 6px); right:0; z-index:30; min-width:150px; max-height:240px; overflow-y:auto;
  padding:5px; border-radius:12px; background:#161a22; border:1px solid rgba(255,255,255,0.12); box-shadow:0 20px 50px -16px rgba(0,0,0,0.85); }
.assign-pop button{ display:block; width:100%; text-align:left; border:none; cursor:pointer; font:inherit; font-size:12.5px;
  padding:9px 11px; border-radius:8px; color:var(--text); background:none; }
.assign-pop button:hover{ background:rgba(255,255,255,0.07); }
.assign-pop button.on{ color:var(--accent); }
.assign-pop button.unassign{ color:#ff7a8a; border-top:1px solid rgba(255,255,255,0.08); margin-top:4px; }

/* Rooms tab — tile grid */
.room-tile-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.room-tile{ display:flex; flex-direction:column; gap:0; text-align:left; border:none; cursor:pointer; font:inherit;
  color:var(--text); padding:18px; min-height:148px; border-radius:var(--radius); transition:transform .18s ease; }
.room-tile:hover{ transform:translateY(-3px); }
.rt-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rt-ic{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.rt-ic svg{ width:21px; height:21px; }
.rt-ic.un{ color:var(--solar); background:color-mix(in srgb,var(--solar) 14%,transparent); }
.rt-active{ font-size:11px; font-weight:700; color:var(--battery); padding:4px 9px; border-radius:8px;
  background:color-mix(in srgb,var(--battery) 14%,transparent); }
.rt-active.warn{ color:var(--solar); background:color-mix(in srgb,var(--solar) 16%,transparent); }
.rt-name{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.rt-counts{ display:flex; gap:14px; margin-top:6px; font-size:12px; color:var(--text-dim); }
.rt-counts b{ color:var(--text); font-weight:700; }
.rt-sensors{ display:flex; gap:14px; margin-top:auto; padding-top:12px; font-size:12.5px; color:var(--text-dim); }
.rt-sensors span{ display:flex; align-items:center; gap:5px; }
.rt-sensors svg{ width:14px; height:14px; opacity:.8; }
.unassigned-tile{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--solar) 26%,transparent); }

/* Room detail modal */
.room-modal{ max-width:560px; }
.room-modal .modal-head h3{ display:flex; align-items:center; gap:9px; }
.room-modal .modal-head h3 svg{ width:18px; height:18px; color:var(--text-dim); }
.rm-sensorbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.rm-sensor{ flex:1; min-width:96px; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:13px;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.rm-sensor svg{ width:16px; height:16px; color:var(--text-dim); }
.rm-sensor b{ font-size:17px; font-weight:700; margin-top:4px; }
.room-del.rename:hover{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.room-rename-input{ font-size:17px; font-weight:700; color:var(--text); background:var(--surface-2);
  border:none; box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 50%,transparent); border-radius:10px;
  padding:7px 12px; outline:none; font-family:inherit; min-width:240px; }
.period-seg button{ white-space:nowrap; }
/* per-panel period dropdown */
.pmenu{ position:relative; }
.pmenu-btn{ display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer; font:inherit; font-size:12px;
  font-weight:600; padding:6px 11px; border-radius:9px; color:var(--text-dim); background:var(--surface-2); }
.pmenu-btn:hover{ color:var(--text); }
.pmenu-btn svg{ width:12px; height:12px; opacity:.6; }
.pmenu-pop{ position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:140px; padding:5px; border-radius:11px;
  background:#161a22; border:1px solid rgba(255,255,255,0.12); box-shadow:0 18px 44px -16px rgba(0,0,0,0.85); }
.pmenu-pop button{ display:block; width:100%; text-align:left; border:none; cursor:pointer; font:inherit; font-size:12.5px;
  padding:8px 11px; border-radius:8px; color:var(--text); background:none; }
.pmenu-pop button:hover{ background:var(--surface-2); }
.pmenu-pop button.on{ color:var(--accent); }
.e-panel-head .e-est{ margin-left:auto; }
.room-hint{ display:flex; align-items:center; gap:7px; color:var(--battery); }
.room-hint svg{ width:14px; height:14px; flex:none; }
.tpl-card.room-tpl .tpl-prev.room-prev{ display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); }
.room-prev svg{ width:26px; height:26px; }
.ml-sub{ font-size:11.5px; color:var(--text-faint); margin-top:-2px; }
.auto-choose{ display:flex; flex-direction:column; gap:10px; }
.auto-choose-card{ display:flex; align-items:center; gap:14px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left;
  padding:16px; border-radius:15px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.auto-choose-card:hover{ background:rgba(255,255,255,0.06); }
.acc-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent); }
.acc-ic.motion{ color:#ffc24d; background:color-mix(in srgb,#ffc24d 14%,transparent); }
.acc-ic svg{ width:21px; height:21px; }
.acc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.acc-txt b{ font-size:14px; font-weight:700; }
.acc-txt span{ font-size:12px; color:var(--text-faint); }
.auto-choose-card > svg{ width:16px; height:16px; opacity:.5; flex:none; }
.ml-form{ display:flex; flex-direction:column; gap:18px; }
.ml-row{ display:flex; flex-direction:column; gap:8px; }
.ml-lbl{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; }
.ml-ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:none; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.ml-ic svg{ width:15px; height:15px; }
.ml-waits{ flex-wrap:wrap; }
.ml-waits button{ flex:1; min-width:60px; }
/* full automation editor */
.auto-block{ border-radius:16px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); padding:16px; margin-bottom:14px; }
.ab-head h4{ font-size:14.5px; font-weight:700; }
.ab-head h4 em{ font-style:normal; font-weight:500; color:var(--text-faint); }
.ab-head p{ font-size:11.5px; color:var(--text-faint); margin:3px 0 12px; line-height:1.45; }
.auto-item{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:13px; margin-bottom:8px;
  background:rgba(255,255,255,0.025); box-shadow:inset 0 0 0 1px var(--hairline); }
.ai-body{ flex:1; min-width:0; display:flex; gap:11px; }
.ai-tag{ font-size:10px; font-weight:800; letter-spacing:.05em; padding:4px 8px; border-radius:7px; flex:none; height:fit-content;
  color:#0a0a0a; background:var(--accent); }
.ai-tag.state{ background:#4f9cff; } .ai-tag.mqtt{ background:#b07cff; } .ai-tag.cond{ background:#36d399; } .ai-tag.then{ background:#ffc24d; } .ai-tag.time{ background:#4f9cff; } .ai-tag.sun{ background:#ffc24d; } .ai-tag.num{ background:#36d399; }
.dd-list.grouped{ max-height:300px; }
.dd-group-label{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:8px 12px 4px; }
.dd-ic{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); margin-right:2px; }
.dd-ic svg{ width:13px; height:13px; }
.dd-item .dd-ic + span{ flex:1; }
.attr-cond{ margin-top:8px; padding:10px; border-radius:10px; background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px var(--hairline); }

/* ============================================================
   Device discovery / adoption / replacement + Mothership + boundary
   ============================================================ */
.card-broken{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:18px; }
.card-broken .cb-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#ff9436; background:color-mix(in srgb,#ff9436 14%,transparent); margin-bottom:4px; }
.card-broken .cb-ic svg{ width:20px; height:20px; }
.card-broken b{ font-size:13.5px; }
.card-broken span{ font-size:11.5px; color:var(--text-faint); }
.card-broken button{ margin-top:8px; border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:7px 16px; border-radius:9px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }

/* header status buttons */
.ms-btn{ position:relative; }
.ms-btn .ms-dot{ position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 2px var(--bg); }
.ms-btn.ok .ms-dot{ background:var(--battery); box-shadow:0 0 0 2px var(--bg), 0 0 8px var(--battery); }
.ms-btn.off{ color:var(--text-faint); }
.ms-btn.off .ms-dot{ background:#ff5c5c; box-shadow:0 0 0 2px var(--bg), 0 0 8px #ff5c5c; }
/* connected: UFO gently hovers with a soft beam glow */
.ms-btn.ok svg{ animation:ufoHover 3.2s ease-in-out infinite; color:var(--battery); filter:drop-shadow(0 3px 6px color-mix(in srgb,var(--battery) 55%,transparent)); }
@keyframes ufoHover{ 0%,100%{ transform:translateY(-1px) rotate(-2deg); } 50%{ transform:translateY(2px) rotate(2deg); } }
/* disconnected: crashed — tilted, dropped, dim red, with a one-off crash jolt */
.ms-btn.off svg{ color:#ff6b6b; transform:rotate(-32deg) translateY(2px); opacity:.8; animation:ufoCrash 0.5s ease-out 1; }
@keyframes ufoCrash{ 0%{ transform:rotate(8deg) translateY(-8px); } 60%{ transform:rotate(-40deg) translateY(3px); } 80%{ transform:rotate(-26deg) translateY(1px); } 100%{ transform:rotate(-32deg) translateY(2px); } }

/* discovery modal */
.disc-modal{ width:440px; max-width:100%; }
.disc-found{ padding:22px 22px 18px; text-align:center; }
.disc-pulse{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); animation:discPulse 1.8s ease-in-out infinite; }
@keyframes discPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.prod-shot{ width:150px; height:150px; margin:16px auto 8px; border-radius:26px; position:relative; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--c) 20%,transparent), rgba(255,255,255,0.03)); box-shadow:inset 0 0 0 1px var(--hairline); overflow:hidden; }
.prod-glow{ position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, color-mix(in srgb,var(--c) 40%,transparent), transparent 60%); animation:discPulse 2.4s ease-in-out infinite; }
.prod-ic{ position:relative; color:var(--c); }
.prod-ic svg{ width:60px; height:60px; filter:drop-shadow(0 0 12px var(--c)); }
.disc-name{ font-size:20px; font-weight:700; letter-spacing:-0.02em; }
.disc-model{ font-size:13px; color:var(--text-dim); margin-top:3px; display:flex; align-items:center; gap:8px; justify-content:center; }
.disc-hint{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; margin:14px 0 0; padding:10px; border-radius:11px; }
.disc-hint.warn{ color:var(--solar); background:color-mix(in srgb,var(--solar) 12%,transparent); }
.disc-hint svg{ width:15px; height:15px; flex:none; }
.modal-foot.center{ justify-content:center; }
.disc-step{ padding:22px; }
.disc-step.center{ text-align:center; }
.disc-step h3{ font-size:17px; font-weight:700; margin-bottom:6px; }
.big-choice{ display:flex; align-items:center; gap:14px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left;
  padding:15px; border-radius:14px; margin-top:10px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.big-choice:hover{ background:rgba(255,255,255,0.06); }
.bc-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.bc-ic.alt{ color:#ffc24d; background:color-mix(in srgb,#ffc24d 14%,transparent); }
.bc-ic svg{ width:20px; height:20px; }
.big-choice > span:nth-child(2){ flex:1; display:flex; flex-direction:column; }
.big-choice b{ font-size:14px; }
.big-choice span span{ font-size:11.5px; color:var(--text-faint); }
.big-choice > svg{ width:16px; height:16px; opacity:.5; }
.room-pick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.room-chip{ border:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:11px; color:var(--text-dim); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.room-chip.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); box-shadow:inset 0 0 0 1.5px var(--accent); }
.newroom-row{ display:flex; gap:8px; }
.newroom-row .set-input{ flex:1; }
.type-pick{ display:flex; gap:12px; flex-wrap:wrap; }
.type-card{ flex:1 1 130px; min-width:120px; border:none; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px; border-radius:15px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.type-card.sm{ min-width:100px; padding:13px; flex:0 0 calc(50% - 6px); }
.type-card.on{ box-shadow:inset 0 0 0 1.5px var(--c, var(--accent)); background:color-mix(in srgb,var(--c, var(--accent)) 12%,transparent); }
.tc-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--c, var(--accent)); background:color-mix(in srgb,var(--c, var(--accent)) 16%,transparent); }
.tc-ic svg{ width:22px; height:22px; }
.type-card b{ font-size:13px; }
.reg-pick{ margin-top:14px; max-height:200px; overflow-y:auto; }
.reg-row{ display:flex; align-items:center; gap:10px; width:100%; border:none; cursor:pointer; font:inherit; font-size:13px; text-align:left;
  padding:9px 11px; border-radius:9px; color:var(--text); background:none; }
.reg-row:hover{ background:var(--surface-2); }
.reg-row.on{ color:var(--text); }
.cfg-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cfg-row > span{ font-size:12.5px; color:var(--text-dim); width:48px; flex:none; }
.cfg-row .set-input{ flex:1; }
.cfg-summary{ border-radius:13px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); padding:6px 14px; }
.cfg-line{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:13px; }
.cfg-line:last-child{ border-bottom:none; }
.cfg-line span{ color:var(--text-faint); }
.repl-list{ display:flex; flex-direction:column; gap:8px; }
.repl-row{ display:flex; align-items:center; gap:12px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left; padding:13px; border-radius:13px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.repl-row:hover{ background:rgba(255,255,255,0.06); }
.repl-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:#ff5c5c; box-shadow:0 0 8px #ff5c5c; }
.repl-meta{ flex:1; display:flex; flex-direction:column; }
.repl-meta b{ font-size:13.5px; }
.repl-meta span{ font-size:11.5px; color:var(--text-faint); }
.repl-row svg{ width:16px; height:16px; opacity:.5; }
.disc-done-ic{ width:56px; height:56px; border-radius:50%; margin:6px auto 12px; display:grid; place-items:center; color:#0a0a0a; background:var(--battery); box-shadow:0 0 20px var(--battery); }
.disc-done-ic svg{ width:28px; height:28px; }
.serial-mon{ margin:14px 0 0; border-radius:12px; overflow:hidden; background:#06070b; box-shadow:inset 0 0 0 1px var(--hairline); text-align:left; }
.sm-head{ display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:11.5px; font-weight:600; border-bottom:1px solid var(--hairline); }
.sm-body{ padding:8px 12px; font-family:ui-monospace,monospace; font-size:11.5px; min-height:120px; }
.sm-line{ display:flex; gap:10px; padding:2px 0; }
.sm-t{ color:var(--text-faint); } .sm-r{ color:var(--text-dim); flex:1; } .sm-v{ color:var(--battery); font-weight:600; }

/* mothership modal */
.ms-modal{ width:440px; max-width:100%; }
.ms-modal .modal-head h3{ display:flex; align-items:center; gap:9px; }
.ms-modal .modal-head svg{ width:19px; height:19px; }
.ms-status{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.ms-status .ms-led{ width:12px; height:12px; border-radius:50%; flex:none; }
.ms-status.ok .ms-led{ background:var(--battery); box-shadow:0 0 10px var(--battery); }
.ms-status.off .ms-led{ background:#ff5c5c; box-shadow:0 0 10px #ff5c5c; }
.ms-status b{ font-size:14px; display:block; } .ms-status span{ font-size:11.5px; color:var(--text-faint); }
.ms-block{ margin-top:16px; }
.ms-block-h{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; margin-bottom:8px; }
.ms-block-h svg{ width:15px; height:15px; color:var(--text-dim); }
.ms-fault{ display:flex; align-items:center; gap:9px; font-size:13px; padding:8px 0; }
.ms-fault em{ font-style:normal; color:var(--text-faint); font-size:11.5px; margin-left:auto; }
.proto-badge{ font-size:10px; font-weight:700; padding:3px 7px; border-radius:6px; background:rgba(255,255,255,0.08); color:var(--text-dim); }
.proto-badge.zig{ color:#b07cff; background:color-mix(in srgb,#b07cff 16%,transparent); }
.proto-badge.serial{ color:#36d399; background:color-mix(in srgb,#36d399 16%,transparent); }
.proto-badge.wifi{ color:#4f9cff; background:color-mix(in srgb,#4f9cff 16%,transparent); }
.dur-in.wide{ width:72px; }
/* battery indicator + modal */
.batt-btn{ position:relative; }
.batt-btn.alert{ color:#ff7a5c; }
.batt-badge{ position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  font-size:10px; font-weight:800; color:#0a0a0a; background:#ff5c5c; display:grid; place-items:center; box-shadow:0 0 8px rgba(255,92,92,0.6); }
.batt-modal{ width:440px; max-width:100%; }
.batt-group-label{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:14px 0 7px; }
.batt-group:first-child .batt-group-label{ margin-top:6px; }
.batt-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.batt-ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); }
.batt-ic svg{ width:17px; height:17px; }
.batt-meta{ width:150px; flex:none; min-width:0; }
.batt-meta b{ font-size:13px; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.batt-meta span{ font-size:11px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.batt-bar{ flex:1; height:8px; border-radius:5px; background:rgba(255,255,255,0.08); overflow:hidden; }
.batt-fill{ height:100%; border-radius:5px; transition:width .4s; }
.batt-pct{ font-size:13px; font-weight:700; width:42px; text-align:right; flex:none; }
.ai-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }
.ai-f{ display:flex; flex-direction:column; gap:6px; }
.ai-f > span{ font-size:11.5px; font-weight:600; color:var(--text-dim); }
.cond-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cond-is{ font-size:12.5px; color:var(--text-faint); }
.ai-del{ width:30px; height:30px; border-radius:9px; border:none; cursor:pointer; flex:none; display:grid; place-items:center;
  color:var(--text-dim); background:var(--surface-2); }
.ai-del:hover{ color:#ff7a8a; }
.ai-del svg{ width:15px; height:15px; }
.ai-add{ display:inline-flex; align-items:center; gap:6px; border:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600;
  padding:9px 14px; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.ai-add svg{ width:14px; height:14px; }
.ai-add-wrap{ position:relative; display:inline-block; }
.ai-add-menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:260px; padding:6px; border-radius:12px;
  background:#161a22; border:1px solid rgba(255,255,255,0.12); box-shadow:0 18px 44px -16px rgba(0,0,0,0.85); }
.ai-add-menu button{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; border:none; cursor:pointer;
  font:inherit; padding:10px 12px; border-radius:9px; color:var(--text); background:none; }
.ai-add-menu button:hover{ background:var(--surface-2); }
.ai-add-menu b{ font-size:12.5px; font-weight:600; }
.ai-add-menu span{ font-size:11px; color:var(--text-faint); }
.dur-field{ display:flex; align-items:center; gap:5px; }
.dur-in{ width:46px; text-align:center; background:var(--surface-2); border:none; color:var(--text); font:inherit; font-size:13px;
  padding:8px 6px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--hairline); -moz-appearance:textfield; }
.act-attrs{ display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline); }
.act-attr .chk-row.sm{ font-size:12.5px; margin-top:0; }
.aa-hint{ font-style:normal; color:var(--text-faint); font-size:11px; }
.aa-slider{ display:flex; align-items:center; gap:10px; margin:6px 0 2px 32px; }
.aa-slider input{ flex:1; accent-color:var(--accent); }
.aa-slider b{ font-size:12.5px; font-weight:700; min-width:52px; text-align:right; }
.seg.small.wrap{ flex-wrap:wrap; margin:6px 0 2px 32px; }
.dur-field span{ font-size:11.5px; color:var(--text-faint); margin-right:4px; }
.rm-sensor span{ font-size:11px; color:var(--text-faint); }
.prompt-modal{ width:420px; max-width:100%; }
.prompt-input{ width:100%; min-width:0; margin-bottom:4px; }
.prompt-modal .field-lbl{ display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:5px; }
.prompt-err{ font-size:12px; color:#ff7a8a; margin-top:8px; }
.gw-dialog-msg{ font-size:13.5px; line-height:1.5; color:var(--text-dim); margin:0 0 14px; }
.gw-dialog .modal-foot{ margin-top:4px; }
.act-del:disabled{ opacity:.3; cursor:not-allowed; }

/* settings current-user profile + sign out */
.settings-profile{ position:absolute; left:0; bottom:0; width:230px; padding:12px 0 0; }
.sp-btn{ display:flex; align-items:center; gap:11px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left;
  padding:10px 12px; border-radius:13px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.sp-btn:hover{ background:rgba(255,255,255,0.06); }
.sp-btn .user-av{ width:34px; height:34px; border-radius:10px; }
.sp-btn .user-meta{ flex:1; min-width:0; }
.sp-btn svg:last-child{ width:14px; height:14px; opacity:.5; }
.sp-menu{ margin-top:6px; padding:5px; border-radius:11px; background:#161a22; border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 18px 44px -16px rgba(0,0,0,0.85); }
.sp-menu button{ display:flex; align-items:center; gap:9px; width:100%; border:none; cursor:pointer; font:inherit; font-size:13px;
  padding:10px 12px; border-radius:8px; color:#ff7a8a; background:none; }
.sp-menu button:hover{ background:color-mix(in srgb,#ff7a8a 12%,transparent); }
.sp-menu button svg{ width:16px; height:16px; }
.settings-view{ position:relative; padding-bottom:80px; }

/* login screen */
.login-screen{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:radial-gradient(70% 60% at 50% 0%, var(--ambient-1), transparent 70%), var(--bg); }
.login-card{ width:380px; max-width:100%; padding:26px; border-radius:24px; }
.login-logo-wrap{ display:flex; justify-content:center; margin:4px 0 22px; }
.login-logo-img{ width:290px; max-width:86%; height:auto; display:block;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.4)); }
html[data-scheme="light"] .login-logo-img{ filter:drop-shadow(0 4px 12px rgba(30,40,60,0.18)); }
.login-brand{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.login-logo{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 16%,transparent); }
.login-logo svg{ width:24px; height:24px; }
.login-brand b{ font-size:17px; font-weight:700; display:block; }
.login-brand>div>span{ font-size:12.5px; color:var(--text-faint); }
.login-users{ display:flex; flex-direction:column; gap:8px; }
.login-user{ display:flex; align-items:center; gap:12px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left;
  padding:11px 13px; border-radius:14px; color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--hairline); }
.login-user:hover{ background:rgba(255,255,255,0.06); }
.login-user .user-av{ width:40px; height:40px; border-radius:12px; }
.login-user .user-meta{ flex:1; min-width:0; }
.login-user svg{ width:16px; height:16px; opacity:.5; }
.login-user.big{ margin-bottom:14px; cursor:default; }
.login-pw .set-input{ width:100%; min-width:0; }
.login-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.login-hint{ font-size:11px; color:var(--text-faint); margin-top:12px; text-align:center; }

/* Energy history chart — series picker + legend */
.e-series-btn-wrap{ position:relative; }
.series-btn{ display:inline-flex; align-items:center; gap:5px; }
.series-btn svg{ width:13px; height:13px; }
.eseries-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:280px; border-radius:14px;
  background:#12151c; border:1px solid rgba(255,255,255,0.12); box-shadow:0 24px 60px -18px rgba(0,0,0,0.85); overflow:hidden; }
.esp-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-size:12.5px; font-weight:700;
  border-bottom:1px solid var(--hairline); }
.esp-list{ max-height:320px; overflow-y:auto; padding:6px; }
.esp-item{ display:flex; align-items:center; gap:10px; width:100%; border:none; cursor:pointer; font:inherit; text-align:left;
  padding:9px 10px; border-radius:9px; color:var(--text); background:none; }
.esp-item:hover{ background:var(--surface-2); }
.esp-dot{ width:10px; height:10px; border-radius:3px; flex:none; }
.esp-name{ flex:1; font-size:12.5px; }
.esp-unit{ font-size:10.5px; color:var(--text-faint); }
.esp-check{ width:18px; height:18px; border-radius:6px; flex:none; display:grid; place-items:center; color:var(--accent);
  box-shadow:inset 0 0 0 1.5px var(--hairline); }
.esp-check.on{ box-shadow:inset 0 0 0 1.5px var(--accent); background:color-mix(in srgb,var(--accent) 18%,transparent); }
.esp-check svg{ width:12px; height:12px; }
.e-legend.wrap{ flex-wrap:wrap; gap:8px 14px; margin-bottom:10px; }
.e-legend.wrap span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); }
.e-legend.wrap em{ font-style:normal; color:var(--text-faint); font-size:10px; }
.leg-x{ display:inline-grid; place-items:center; width:15px; height:15px; border:none; cursor:pointer; border-radius:50%;
  background:var(--surface-2); color:var(--text-faint); margin-left:2px; }
.leg-x:hover{ color:#ff7a8a; }
.leg-x svg{ width:9px; height:9px; }

/* ============================================================
   Energy tab
   ============================================================ */
.energy-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.estat{ padding:16px 18px; border-radius:18px; background:rgba(255,255,255,0.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.estat::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); box-shadow:0 0 12px var(--c); }
.estat-ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); margin-bottom:12px; }
.estat-ic svg{ width:19px; height:19px; }
.estat-val{ font-size:27px; font-weight:800; letter-spacing:-0.02em; line-height:1; }
.estat-val span{ font-size:13px; font-weight:600; color:var(--text-faint); margin-left:3px; }
.estat-label{ font-size:13px; font-weight:600; margin-top:6px; }
.estat-sub{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }

.energy-grid{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.e-panel{ padding:18px; border-radius:18px; background:rgba(255,255,255,0.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.chart-panel{ grid-column:1; }
.today-panel{ grid-column:2; grid-row:1 / span 2; }
.e-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.e-panel-head h3{ font-size:15px; font-weight:700; }
.e-est{ font-size:11.5px; color:var(--text-faint); }
.e-legend{ display:flex; gap:14px; }
.e-legend span{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim); }
.e-legend i{ width:10px; height:10px; border-radius:3px; }
.e-chart{ width:100%; height:150px; display:block; }
.e-chart-x{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-faint); margin-top:6px; }

.e-ring-wrap{ position:relative; width:132px; height:132px; margin:6px auto 18px; }
.e-ring-c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.e-ring-c b{ font-size:30px; font-weight:800; color:#36d399; line-height:1; }
.e-ring-c span{ font-size:10.5px; color:var(--text-faint); margin-top:3px; line-height:1.2; }
.e-today-rows{ display:flex; flex-direction:column; gap:2px; }
.etr{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-dim); padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.etr:last-child{ border-bottom:none; }
.etr .d{ width:9px; height:9px; border-radius:50%; flex:none; }
.etr b{ margin-left:auto; font-size:13.5px; font-weight:700; color:var(--text); }

.e-bars{ display:flex; flex-direction:column; gap:13px; }
.ebar-top{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
.ebar-top b{ font-size:12.5px; font-weight:700; color:var(--text); }
.etop-name{ display:flex; align-items:center; gap:8px; }
.etop-name em{ font-style:normal; font-size:11px; color:var(--text-faint); margin-left:2px; }
.etop-ic{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.etop-ic svg{ width:13px; height:13px; }
.ebar-track{ height:7px; border-radius:5px; background:rgba(255,255,255,0.06); overflow:hidden; }
.ebar-fill{ height:100%; border-radius:5px; background:var(--accent); box-shadow:0 0 8px var(--accent);
  transition:width .5s cubic-bezier(.3,.8,.3,1); }

@media (max-width:1100px){
  .energy-stats{ grid-template-columns:repeat(2,1fr); }
  .energy-grid{ grid-template-columns:1fr; }
  .chart-panel,.today-panel{ grid-column:1; grid-row:auto; }
}

/* ============================================================
   Automations tab + rule editor
   ============================================================ */
.auto-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:16px; }
.auto-card{ padding:16px 18px; border-radius:18px; background:rgba(255,255,255,0.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); display:flex; flex-direction:column; gap:12px; }
.auto-card.off{ opacity:0.55; }
.auto-card-head{ display:flex; align-items:center; gap:12px; }
.auto-name{ font-size:15px; font-weight:700; flex:1; }
.auto-switch{ width:44px; height:26px; border-radius:13px; border:none; cursor:pointer; flex:none; position:relative;
  background:rgba(255,255,255,0.12); transition:background .2s; }
.auto-switch span{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .2s; }
.auto-switch.on{ background:var(--accent); }
.auto-switch.on span{ transform:translateX(18px); }
.auto-flow{ display:flex; flex-direction:column; gap:7px; }
.auto-seg{ display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,0.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04); font-size:12.5px; color:var(--text-dim); }
.seg-tag{ font-size:10px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:6px; flex:none;
  color:#4f9cff; background:rgba(79,156,255,0.15); }
.seg-tag.then-tag{ color:#36d399; background:rgba(54,211,153,0.15); }
.auto-seg.cond .seg-tag{ color:#ffc24d; background:rgba(255,194,77,0.15); }
.seg-ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; color:var(--c, var(--text-dim));
  background:color-mix(in srgb, var(--c, #888) 16%, transparent); }
.seg-ic svg{ width:15px; height:15px; }
.seg-txt{ flex:1; }
.seg-txt b{ color:var(--text); font-weight:700; }
.auto-actions{ display:flex; gap:8px; }
.auto-actions button{ display:flex; align-items:center; gap:6px; border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  padding:8px 13px; border-radius:10px; color:var(--text-dim); background:rgba(255,255,255,0.06); }
.auto-actions button:hover{ color:var(--text); background:rgba(255,255,255,0.1); }
.auto-actions button svg{ width:14px; height:14px; }
.auto-actions .danger{ margin-left:auto; }
.auto-actions .danger:hover{ color:#ff7a8a; background:rgba(255,122,138,0.12); }

/* rule editor */
.rule-sec{ display:flex; gap:12px; margin-bottom:12px; padding:14px; border-radius:14px; background:rgba(255,255,255,0.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.rule-tag{ font-size:11px; font-weight:800; letter-spacing:.06em; padding:5px 9px; border-radius:7px; flex:none; height:fit-content;
  color:#4f9cff; background:rgba(79,156,255,0.15); }
.rule-tag.then{ color:#36d399; background:rgba(54,211,153,0.15); }
.rule-tag.and{ color:#ffc24d; background:rgba(255,194,77,0.15); }
.rule-body{ flex:1; min-width:0; }
.rule-line{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-dim); flex-wrap:wrap; }
.rule-line .dd{ flex:1; min-width:140px; }
.status-chips{ display:flex; gap:7px; margin-top:10px; flex-wrap:wrap; }
.status-chip{ border:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700; padding:7px 14px; border-radius:9px;
  color:var(--text-dim); background:rgba(255,255,255,0.06); box-shadow:inset 0 0 0 1px transparent; }
.status-chip.on{ color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); box-shadow:inset 0 0 0 1.5px var(--c); }
.rule-action{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px; border-radius:11px;
  background:rgba(255,255,255,0.03); margin-bottom:9px; }
.rule-action .seg.small button{ padding:6px 11px; font-size:11.5px; }
.time-in{ background:rgba(255,255,255,0.06); border:none; color:var(--text); font:inherit; font-size:13px; padding:8px 11px;
  border-radius:9px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07); color-scheme:dark; }

/* ============================================================
   Scenes tab gallery
   ============================================================ */
.scenes-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.scene-tile{ padding:16px 18px; border-radius:18px; background:rgba(255,255,255,0.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); display:flex; flex-direction:column; gap:13px;
  position:relative; overflow:hidden; }
.scene-tile.active{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent), 0 10px 30px -16px var(--c); }
.scene-tile.active::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--c) 12%,transparent), transparent 60%); pointer-events:none; }
.scene-tile-head{ display:flex; align-items:center; gap:13px; cursor:pointer; }
.scene-tile-ic{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.scene-tile-ic svg{ width:24px; height:24px; }
.scene-tile-meta{ flex:1; min-width:0; }
.scene-tile-name{ font-size:16px; font-weight:700; }
.scene-tile-count{ font-size:12px; color:var(--text-faint); margin-top:1px; }
.scene-active-dot{ width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex:none; }
.scene-tile-acts{ display:flex; flex-direction:column; gap:6px; min-height:24px; }
.scene-act-chip{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scene-act-chip span{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; color:var(--c);
  background:color-mix(in srgb,var(--c) 16%,transparent); }
.scene-act-chip span svg{ width:13px; height:13px; }
.scene-tile-actions{ display:flex; gap:8px; }
.scene-tile-actions button{ display:flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; padding:9px 13px; border-radius:10px; color:var(--text-dim); background:rgba(255,255,255,0.06); }
.scene-tile-actions button svg{ width:14px; height:14px; }
.scene-activate{ flex:1; color:var(--c) !important; background:color-mix(in srgb,var(--c) 14%,transparent) !important; }
.scene-tile-actions button:hover{ color:var(--text); background:rgba(255,255,255,0.1); }
.scene-tile-actions .danger:hover{ color:#ff7a8a; background:rgba(255,122,138,0.12); }

/* ============================================================
   Security tab
   ============================================================ */
.sec-banner{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:18px; margin-bottom:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); flex-wrap:wrap; }
.sec-banner.ok{ background:color-mix(in srgb,#36d399 9%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,#36d399 30%,transparent); }
.sec-banner.warn{ background:color-mix(in srgb,#ff7a5c 9%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,#ff7a5c 30%,transparent); }
.sec-shield{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none; }
.sec-banner.ok .sec-shield{ color:#36d399; background:color-mix(in srgb,#36d399 16%,transparent); }
.sec-banner.warn .sec-shield{ color:#ff7a5c; background:color-mix(in srgb,#ff7a5c 16%,transparent); }
.sec-shield svg{ width:26px; height:26px; }
.sec-banner-txt{ display:flex; flex-direction:column; }
.sec-banner-txt b{ font-size:16px; font-weight:700; }
.sec-banner-txt span{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.sec-modes{ display:flex; gap:8px; margin-left:auto; }
.sec-mode{ display:flex; flex-direction:column; align-items:center; gap:5px; border:none; cursor:pointer; font:inherit;
  font-size:11px; font-weight:600; padding:10px 14px; border-radius:12px; color:var(--text-dim);
  background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px transparent; min-width:74px; }
.sec-mode svg{ width:19px; height:19px; }
.sec-mode.on{ color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent); box-shadow:inset 0 0 0 1.5px var(--c); }

.sec-section{ margin-bottom:22px; }
.sec-sec-head{ display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; margin-bottom:12px; color:var(--text-dim); }
.sec-sec-head svg{ width:17px; height:17px; }
.sec-sec-head span{ font-size:11px; font-weight:700; color:var(--text-faint); background:rgba(255,255,255,0.07); padding:2px 8px; border-radius:7px; }

.cam-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.cam-card{ position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:#0a0c10;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07); }
.cam-feed{ position:absolute; inset:0; width:100%; height:100%; }
.cam-card.offline .cam-feed{ opacity:0.25; }
.cam-offline-ic{ position:absolute; inset:0; display:grid; place-items:center; color:var(--text-faint); pointer-events:none; }
.cam-offline-ic svg{ width:34px; height:34px; opacity:.4; }
.cam-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:11px;
  background:linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 35%, transparent 60%, rgba(0,0,0,0.7) 100%); pointer-events:none; }
.cam-top{ display:flex; align-items:center; }
.cam-rec{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#fff;
  background:rgba(255,60,60,0.85); padding:3px 8px; border-radius:7px; }
.cam-rec i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:recblink 1.4s infinite; }
@keyframes recblink{ 50%{ opacity:0.25; } }
.cam-off{ font-size:10.5px; font-weight:700; color:#ff9aa6; background:rgba(0,0,0,0.5); padding:3px 8px; border-radius:7px; }
.cam-proto{ font-size:10px; font-weight:700; color:rgba(255,255,255,0.8); background:rgba(0,0,0,0.4); padding:3px 7px; border-radius:6px; }
.cam-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.cam-name{ font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.cam-name em{ display:block; font-style:normal; font-size:11px; font-weight:500; color:rgba(255,255,255,0.7); }
.cam-recbtn{ pointer-events:auto; border:none; cursor:pointer; font:inherit; font-size:11px; font-weight:700; padding:6px 11px;
  border-radius:9px; color:#fff; background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); }
.cam-recbtn.on{ background:rgba(255,60,60,0.8); }

.sec-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.lock-tile,.motion-tile,.contact-tile{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:15px;
  border:none; cursor:default; font:inherit; text-align:left; width:100%; color:var(--text);
  background:rgba(255,255,255,0.025); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); position:relative; }
.lock-tile{ cursor:pointer; }
.lock-ic,.motion-ic,.contact-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; }
.lock-ic svg,.motion-ic svg,.contact-ic svg{ width:20px; height:20px; }
.lock-tile.locked .lock-ic{ color:#36d399; background:color-mix(in srgb,#36d399 16%,transparent); }
.lock-tile.unlocked .lock-ic{ color:#ff7a5c; background:color-mix(in srgb,#ff7a5c 16%,transparent); }
.lock-meta{ flex:1; min-width:0; }
.lock-name{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lock-room{ font-size:11.5px; color:var(--text-faint); }
.lock-state,.motion-state,.contact-state{ font-size:12px; font-weight:700; flex:none; }
.lock-tile.locked .lock-state{ color:#36d399; }
.lock-tile.unlocked .lock-state{ color:#ff7a5c; }
.lock-batt{ position:absolute; top:9px; right:11px; display:flex; align-items:center; gap:3px; font-size:10.5px; color:var(--text-faint); }
.lock-batt svg{ width:13px; height:13px; }
.motion-tile .motion-ic{ color:var(--text-dim); background:rgba(255,255,255,0.05); }
.motion-tile.active .motion-ic{ color:#ffc24d; background:color-mix(in srgb,#ffc24d 16%,transparent); }
.motion-tile.active{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ffc24d 45%,transparent); }
.motion-state{ color:var(--text-faint); }
.motion-tile.active .motion-state{ color:#ffc24d; }
.contact-tile .contact-ic{ color:var(--text-dim); background:rgba(255,255,255,0.05); }
.contact-tile.open .contact-ic{ color:#ff7a5c; background:color-mix(in srgb,#ff7a5c 16%,transparent); }
.contact-state{ color:#36d399; }
.contact-tile.open .contact-state{ color:#ff7a5c; }
@media (max-width:760px){ .sec-modes{ margin-left:0; width:100%; } .sec-mode{ flex:1; } }

.coming-soon{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:80px 20px;
  color:var(--text-dim); }
.cs-ic{ width:72px; height:72px; border-radius:20px; display:grid; place-items:center; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent); box-shadow:0 0 40px -8px color-mix(in srgb,var(--accent) 60%,transparent); }
.cs-ic svg{ width:34px; height:34px; }
.coming-soon h2{ font-size:19px; font-weight:700; color:var(--text); }
.coming-soon p{ font-size:13.5px; max-width:440px; line-height:1.55; }

/* page-tab rename pencil */
.ptab-rename{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,0.12); margin-left:2px; }
.ptab-rename svg{ width:10px; height:10px; }
.ptab-rename:hover{ background:var(--accent); color:#0a0a0a; }

/* ---- sankey ---- */
.sk-lbl{ fill:var(--text); font-size:12px; font-family:inherit; paint-order:stroke;
  stroke:rgba(8,9,14,0.55); stroke-width:1.6px; stroke-linejoin:round; }
.sk-val{ fill:#fff; font-weight:700; }
.sk-home{ fill:var(--text); font-style:italic; opacity:0.9; font-size:13.5px; }
.sankey-empty{ position:absolute; inset:0; display:grid; place-items:center; color:var(--text-faint); font-size:13px; text-align:center; padding:20px; }
.sankey-foot{ font-size:11px; color:var(--text-faint); margin-top:8px; }
.card-edit{ border:none; background:rgba(255,255,255,0.06); color:var(--text-dim); cursor:pointer;
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; }
.card-edit svg{ width:15px; height:15px; }

/* sankey time-range picker */
.range{ position:relative; }
.range-btn{ display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:11px; cursor:pointer;
  border:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--text-dim);
  background:rgba(255,255,255,0.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); white-space:nowrap; }
.range-btn:hover{ color:var(--text); }
.range-btn svg{ width:15px; height:15px; flex:none; }
.range-btn svg:last-child{ width:13px; height:13px; opacity:.6; }
.range-pop{ position:absolute; top:calc(100% + 8px); right:0; z-index:80; width:290px; padding:12px;
  border-radius:18px; box-shadow:0 24px 60px -16px rgba(0,0,0,0.9);
  background:#12151c; border:1px solid rgba(255,255,255,0.14); isolation:isolate; }
.range-pop::before,.range-pop::after{ display:none; }
.range-presets{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:12px; }
.range-presets button{ border:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:9px 10px; border-radius:10px; color:var(--text-dim); text-align:left;
  background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05); }
.range-presets button:hover{ color:var(--text); background:rgba(255,255,255,0.07); }
.range-presets button.on{ color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent); }
.range-custom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:12px; display:flex; flex-direction:column; gap:8px; }
.rc-title{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.range-custom label{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--text-dim); }
.range-custom input[type=date]{ flex:1; max-width:160px; background:rgba(255,255,255,0.06); border:none; color:var(--text);
  font:inherit; font-size:12.5px; padding:7px 10px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
  color-scheme:dark; }
.rc-apply{ margin-top:4px; border:none; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  padding:9px; border-radius:10px; color:#0a0a0a; background:var(--accent); }

@media (max-width:760px){
  .pick-cols{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .modal.wide{ width:100%; }
  .page-tabs{ overflow-x:auto; flex-wrap:nowrap; }
}
/* "Unmetered" remainder row in the energy By-room breakdown */
.ebar-unmetered .ebar-top span{ color:var(--text-dim); font-style:italic; }
.ebar-unmetered .ebar-fill{ background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--text-dim) 30%, transparent) 0 6px, transparent 6px 12px); }
/* Essential / non-essential device tag + menu */
.supply-badge{ font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px; letter-spacing:.02em; }
.supply-badge.essential{ color:var(--battery, #36d399); background:color-mix(in srgb, var(--battery,#36d399) 14%, transparent); }
.supply-badge.nonessential{ color:#f5a35c; background:color-mix(in srgb,#f5a35c 14%, transparent); }
.dd-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:8px 12px 3px; }
.chk.sm{ width:16px; height:16px; border-radius:5px; }
.chk.sm svg{ width:11px; height:11px; }
/* Energy-flow home node branded by the connected inverter make */
/* Branded by inverter make: same soft "setting-sun" radiate as the default
   accent glow, just in the brand colour — no hard ring. */
.home-node.branded{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 50px -6px var(--inv),
    0 0 90px -4px color-mix(in srgb, var(--inv) 42%, transparent),
    0 14px 40px rgba(0,0,0,0.5);
}
.home-node.branded .home-brand{ position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--inv); }
.home-brand-logo{ display:block; height:24px; width:auto; max-width:150px; }
.home-brand-name{ display:inline-block; }   /* makes without a bundled logo (Deye/Sigenergy) */
/* Automation "last ran" footer */
.auto-foot{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim);
  padding:6px 2px 0; }
.auto-foot svg{ width:13px; height:13px; opacity:.7; }
.auto-foot.warn{ color:#ffb454; }

/* ============================================================
   PRESENCE / GEO-ZONES tab
   ============================================================ */
.geo-tab{ display:flex; flex-direction:column; gap:14px; }
.geo-head{ display:flex; align-items:flex-start; gap:12px; }
.geo-head h2{ margin:0; font-size:22px; }
.geo-sub{ margin:2px 0 0; opacity:.65; font-size:13px; max-width:60ch; }
.geo-head .btn{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.geo-head .btn svg{ width:16px; height:16px; }

.geo-paircode{ display:flex; align-items:center; gap:16px; padding:14px 18px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.gp-left{ display:flex; flex-direction:column; gap:4px; }
.gp-label{ font-size:12px; opacity:.7; }
.gp-code{ font-size:34px; font-weight:800; letter-spacing:.16em; font-variant-numeric:tabular-nums; color:var(--accent); }
.gp-timer{ margin-left:auto; font-size:13px; opacity:.7; font-variant-numeric:tabular-nums; }

.geo-layout{ display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start; }
.geo-map-wrap{ position:relative; border-radius:18px; overflow:hidden; padding:0; }
.geo-map{ width:100%; height:62vh; min-height:420px; background:#0b1016; }
.geo-map-tools{ position:absolute; left:12px; bottom:12px; z-index:500; display:flex; flex-direction:column; gap:8px; max-width:300px; }

.geo-draft{ padding:12px; border-radius:14px; width:280px; }
.gd-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gd-name{ width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:8px 10px; color:inherit; font-size:14px; }
.gd-radius span{ font-size:12px; opacity:.7; }
.gd-radius input[type=range]{ flex:1; accent-color:var(--accent); }
.gd-radius b{ font-size:12px; min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
.gd-hint{ font-size:11.5px; opacity:.6; margin-bottom:8px; }
.gd-actions{ display:flex; align-items:center; gap:8px; }
.gd-actions .spacer{ flex:1; }

.geo-side{ display:flex; flex-direction:column; gap:14px; }
.geo-panel{ padding:14px; border-radius:16px; }
.gp-title{ display:flex; align-items:center; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; opacity:.7; margin-bottom:10px; }
.gp-title .spacer{ flex:1; }
.gp-count{ opacity:.6; font-weight:600; }
.geo-empty{ font-size:13px; opacity:.6; line-height:1.5; }

.geo-person-row{ display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:11px; cursor:pointer; }
.geo-person-row:hover{ background:rgba(255,255,255,.05); }
.gpr-avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700;
  color:#05140e; background:linear-gradient(135deg,#4fe3a8,#2bbf86); flex-shrink:0; }
.gpr-main{ flex:1; min-width:0; }
.gpr-name{ font-weight:600; font-size:14.5px; }
.gpr-status{ font-size:12px; opacity:.7; display:flex; align-items:center; gap:6px; }
.gpr-dot{ width:7px; height:7px; border-radius:50%; background:#8a93a3; }
.gpr-dot.home{ background:#4fe3a8; }
.gpr-dot.zone{ background:#ffd166; }
.gpr-batt{ font-size:12px; opacity:.6; font-variant-numeric:tabular-nums; }

.geo-zone-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:11px; cursor:pointer; }
.geo-zone-row:hover{ background:rgba(255,255,255,.05); }
.gzr-pin svg{ width:18px; height:18px; }
.gzr-name{ flex:1; font-size:14px; }
.gzr-r{ font-size:12px; opacity:.6; font-variant-numeric:tabular-nums; }

.geo-dev-row{ display:flex; align-items:center; gap:10px; padding:8px 6px; }
.geo-dev-row > svg{ width:18px; height:18px; opacity:.7; }
.gdr-main{ flex:1; min-width:0; }
.gdr-name{ font-size:14px; font-weight:600; }
.gdr-user{ opacity:.55; font-weight:400; }
.gdr-meta{ font-size:11.5px; opacity:.6; }

/* draggable zone-centre handle */
.geo-handle-icon{ background:none; border:none; }
.geo-handle-icon span{ display:block; width:24px; height:24px; border-radius:50%;
  background:#ffd166; border:3px solid #1b1205; box-shadow:0 2px 7px rgba(0,0,0,.55); cursor:grab; }
.geo-handle-icon span:active{ cursor:grabbing; }
.geo-draft .btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Leaflet person marker (divIcon) */
.geo-person-icon{ background:none; border:none; }
.geo-person-icon span{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  font-weight:800; color:#05140e; background:linear-gradient(135deg,#4fe3a8,#2bbf86);
  border:2.5px solid #0b1016; box-shadow:0 2px 8px rgba(0,0,0,.5); }
/* Tame Leaflet's default white controls/popup for the dark UI */
.geo-map .leaflet-bar a{ background:#161c26; color:#dfe6ef; border-bottom-color:#0b1016; }
.geo-map .leaflet-bar a:hover{ background:#1f2733; }
.geo-map .leaflet-popup-content-wrapper,.geo-map .leaflet-popup-tip{ background:#161c26; color:#e6ecf3; }
.geo-map .leaflet-control-attribution{ background:rgba(11,16,22,.7); color:#7e8794; }
.geo-map .leaflet-control-attribution a{ color:#9aa3b1; }

@media (max-width:760px){
  .geo-layout{ grid-template-columns:1fr; }
  .geo-map{ height:48vh; min-height:300px; }
  .geo-head .btn{ padding:8px 12px; }
}