/* ==========================================================================
   Room Automation — UI (redesigned)
   Backend / API contracts unchanged. Only UI, layout, animation.
   ========================================================================== */

/* ---------- Themes ---------- */
:root,
[data-theme="sunset"] {
  --bg-a:#fff5eb; --bg-b:#fecaca; --bg-c:#ffe4d6;
  --bg:#fdf5ee;
  --fg:#2a1908;
  --card:rgba(255,255,255,.55);
  --card-fg:#2a1908;
  --primary:#ea7a1a;
  --primary-fg:#fff;
  --secondary:#e84393;
  --muted:#f6ece1;
  --muted-fg:#7a6350;
  --border:rgba(42,25,8,.10);
  --ring:#ea7a1a;
  --on:#f39a2b;
  --off:rgba(122,99,80,.4);
  --success:#22c55e;
  --danger:#ef4444;
}
[data-theme="aurora"] {
  --bg-a:#e9e4ff; --bg-b:#c7f1e8; --bg-c:#fde2ff;
  --bg:#f4f1ff;
  --fg:#221542;
  --card:rgba(255,255,255,.55);
  --card-fg:#221542;
  --primary:#7c5cff;
  --primary-fg:#fff;
  --secondary:#3ec3b0;
  --muted:#efeaff;
  --muted-fg:#5b4b82;
  --border:rgba(34,21,66,.10);
  --ring:#7c5cff;
  --on:#3ec3b0;
  --off:rgba(91,75,130,.4);
  --success:#22c55e;
  --danger:#ef4444;
}
[data-theme="midnight"] {
  --bg-a:#0a0a1a; --bg-b:#1e1e5a; --bg-c:#0f3460;
  --bg:#0b0f24;
  --fg:#eaf0ff;
  --card:rgba(255,255,255,.06);
  --card-fg:#eaf0ff;
  --primary:#2dd4a8;
  --primary-fg:#062018;
  --secondary:#7c5cff;
  --muted:rgba(255,255,255,.06);
  --muted-fg:#aab4d0;
  --border:rgba(255,255,255,.12);
  --ring:#2dd4a8;
  --on:#2dd4a8;
  --off:rgba(170,180,208,.4);
  --success:#22c55e;
  --danger:#f87171;
}
[data-theme="ocean"] {
  --bg-a:#e0f2fe; --bg-b:#bae6fd; --bg-c:#ccfbf1;
  --bg:#eff8ff;
  --fg:#0b2542;
  --card:rgba(255,255,255,.55);
  --card-fg:#0b2542;
  --primary:#0ea5e9;
  --primary-fg:#fff;
  --secondary:#14b8a6;
  --muted:#e6f2fb;
  --muted-fg:#496380;
  --border:rgba(11,37,66,.10);
  --ring:#0ea5e9;
  --on:#0ea5e9;
  --off:rgba(73,99,128,.4);
  --success:#22c55e;
  --danger:#ef4444;
}
[data-theme="forest"] {
  --bg-a:#ecfccb; --bg-b:#d1fae5; --bg-c:#fef9c3;
  --bg:#f5faec;
  --fg:#1a3a12;
  --card:rgba(255,255,255,.55);
  --card-fg:#1a3a12;
  --primary:#65a30d;
  --primary-fg:#fff;
  --secondary:#16a34a;
  --muted:#eef6dc;
  --muted-fg:#4a6641;
  --border:rgba(26,58,18,.10);
  --ring:#65a30d;
  --on:#65a30d;
  --off:rgba(74,102,65,.4);
  --success:#22c55e;
  --danger:#ef4444;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--fg);
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:"Outfit",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- Aurora background ---------- */
.aurora{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 60% at 15% 10%, var(--bg-a) 0%, transparent 60%),
    radial-gradient(55% 55% at 85% 20%, var(--bg-b) 0%, transparent 60%),
    radial-gradient(70% 70% at 50% 100%, var(--bg-c) 0%, transparent 65%),
    var(--bg);
}
.aurora::after{
  content:"";position:absolute;inset:-20%;z-index:-1;
  background:
    radial-gradient(40% 40% at 20% 30%, color-mix(in oklab, var(--primary) 30%, transparent), transparent 60%),
    radial-gradient(35% 35% at 80% 70%, color-mix(in oklab, var(--secondary) 30%, transparent), transparent 60%);
  filter:blur(60px);
  animation:aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes aurora-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(4%,-3%,0) scale(1.08)}}

/* ---------- Layout ---------- */
.shell{max-width:760px;margin:0 auto;padding:1.75rem 1rem 3rem}
@media(min-width:640px){.shell{padding:3rem 1.5rem}}

/* ---------- Glass ---------- */
.glass{
  background:var(--card);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 20px 40px -20px rgba(0,0,0,.2);
  border-radius:24px;
}
.glass-strong{
  background:var(--card);
  backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px -25px rgba(0,0,0,.25);
  border-radius:28px;
}

/* ---------- Header ---------- */
.topbar{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;
  position:relative;z-index:5000;
  animation:fade-up .5s ease-out both;
}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand-badge{
  width:44px;height:44px;flex-shrink:0;
  display:grid;place-items:center;border-radius:16px;
  background:var(--primary);color:var(--primary-fg);
  box-shadow:0 12px 24px -8px color-mix(in oklab, var(--primary) 60%, transparent);
}
.brand-title{font-family:"Outfit",sans-serif;font-weight:700;font-size:1.05rem;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{font-size:.72rem;color:var(--muted-fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:16px;border:1px solid var(--border);
  background:color-mix(in oklab, var(--card) 100%, transparent);
  backdrop-filter:blur(10px);
  color:var(--fg);transition:background .2s,transform .15s;
}
.icon-btn:hover{background:color-mix(in oklab, var(--card) 100%, transparent);transform:translateY(-1px)}
.icon-btn.sm{width:36px;height:36px;border-radius:12px}

/* ---------- Theme menu ---------- */
.menu-wrap{position:relative;z-index:5100}
.menu[hidden]{display:none!important}
.menu{
  position:absolute;right:0;top:calc(100% + .5rem);z-index:5200;
  width:240px;padding:.5rem;
  background:color-mix(in oklab, var(--bg) 88%, white);
  backdrop-filter:blur(28px) saturate(160%);
  border:1px solid var(--border);border-radius:18px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.12);
  pointer-events:auto;
  animation:fade-up .2s ease-out;
}
.menu-title{padding:.35rem .55rem .5rem;font-size:.65rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--muted-fg)}
.menu-item{
  width:100%;display:flex;align-items:center;gap:.7rem;padding:.5rem .55rem;border-radius:12px;
  text-align:left;font-size:.82rem;font-weight:500;color:var(--fg);
  background:transparent;border:0;cursor:pointer;
}
.menu-item:hover{background:color-mix(in oklab, var(--muted) 70%, transparent)}
.menu-item .sw{display:inline-flex;overflow:hidden;border-radius:6px;flex-shrink:0;border:1px solid var(--border)}
.menu-item .sw i{display:block;width:10px;height:20px}

/* ---------- Small quote below switches ---------- */
.hero-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.22rem .6rem;border-radius:999px;
  background:color-mix(in oklab, var(--bg) 60%, transparent);
  font-size:.68rem;font-weight:600;color:var(--primary);
}
.hero-pill .ping{width:6px;height:6px;border-radius:999px;background:var(--primary);animation:pulse-dot 1.6s ease-in-out infinite}
.quote-strip{
  margin-top:.85rem;display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;
  font-size:.82rem;font-weight:600;color:var(--fg);text-align:center;
}
.quote-strip .grad{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.quote-text{line-height:1.2}

/* ---------- ESP status ---------- */
.esp{position:relative;z-index:1;margin-top:1.5rem;display:flex;align-items:center;gap:1rem;padding:1rem}
.esp-dot-wrap{position:relative;width:48px;height:48px;flex-shrink:0;
  display:grid;place-items:center;border-radius:16px;
  background:color-mix(in oklab, var(--bg) 60%, transparent);
}
.esp-dot{width:12px;height:12px;border-radius:999px;background:var(--danger);transition:background .3s}
.esp-dot.online{background:var(--success);animation:pulse-dot 1.6s ease-in-out infinite}
.esp-ring{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.esp-ring::before{content:"";width:24px;height:24px;border-radius:999px;border:1px solid transparent}
.esp-dot.online + .esp-ring::before{border-color:color-mix(in oklab, var(--success) 40%, transparent)}
.esp-body{flex:1;min-width:0}
.esp-head{display:flex;align-items:center;gap:.5rem}
.esp-title{font-size:.85rem;font-weight:600;color:var(--card-fg)}
.esp-pill{
  padding:.15rem .5rem;border-radius:999px;font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  background:color-mix(in oklab, var(--danger) 15%, transparent);color:var(--danger);
}
.esp-pill.online{background:color-mix(in oklab, var(--success) 15%, transparent);color:var(--success)}
.esp-meta{margin-top:.15rem;font-size:.72rem;color:var(--muted-fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Section head ---------- */
.devices{margin-top:2rem}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1rem}
.section-head h2{font-size:1.25rem;font-weight:700;color:var(--fg)}
.section-head p{margin:0;font-size:.72rem;color:var(--muted-fg)}

/* ---------- Device grid ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ---------- Card ---------- */
.card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:1.15rem;border-radius:24px;
  text-align:left;
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 20px 40px -20px rgba(0,0,0,.2);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .5s,border-color .3s;
  min-height:190px;
}
.card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -25px rgba(0,0,0,.35)}
.card:active{transform:scale(.98)}
.card:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.card.on{
  border-color:color-mix(in oklab, var(--primary) 40%, transparent);
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 22%, var(--card)),
    color-mix(in oklab, var(--secondary) 14%, var(--card)));
}
.card-glow{
  position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:999px;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--primary) 55%, transparent), transparent);
  opacity:.15;transition:opacity .5s;pointer-events:none;
}
.card.on .card-glow{opacity:.7}
.card-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.card-icon{
  width:56px;height:56px;display:grid;place-items:center;border-radius:18px;
  background:color-mix(in oklab, var(--bg) 60%, transparent);
  color:var(--muted-fg);transition:color .3s;
}
.card.on .card-icon{color:var(--primary)}
.card-icon svg{width:32px;height:32px;transition:filter .3s,transform .3s}
.card.on .card-icon svg[data-kind="light"]{
  animation:bulb-glow 2.4s ease-in-out infinite;
}
.card.on .card-icon svg[data-kind="fan"]{
  animation:spin-slow 1.6s linear infinite;transform-origin:50% 50%;
}
.state-pill{
  padding:.25rem .65rem;border-radius:999px;
  font-size:.65rem;font-weight:700;letter-spacing:.08em;
  background:var(--muted);color:var(--muted-fg);
  transition:background .3s,color .3s;
}
.card.on .state-pill{background:var(--primary);color:var(--primary-fg)}

.card-body{position:relative;margin-top:1.25rem}
.card-name{display:block;font-family:"Outfit",sans-serif;font-size:1.05rem;font-weight:600;color:var(--card-fg)}
.card-sub{display:block;margin-top:.15rem;font-size:.7rem;color:var(--muted-fg)}

.card-foot{position:relative;margin-top:1rem;display:flex;align-items:center;gap:.5rem}
.fdot{width:8px;height:8px;border-radius:999px;background:var(--off);transition:background .3s}
.card.on .fdot{background:var(--primary);animation:pulse-dot 1.6s ease-in-out infinite}
.fhint{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-fg)}

/* Ripple */
.ripple{
  position:absolute;border-radius:999px;
  background:color-mix(in oklab, var(--primary) 30%, transparent);
  pointer-events:none;animation:ripple .7s ease-out forwards;
}

/* ---------- Modal ---------- */
.modal-root{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem}
.modal-root[hidden]{display:none!important}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.modal{position:relative;width:100%;max-width:28rem;padding:1.5rem;animation:fade-up .4s ease-out}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.modal-head h3{font-size:1.25rem;font-weight:700}
.modal-head p{margin:.25rem 0 0;font-size:.85rem;color:var(--muted-fg)}
.modal-body{margin-top:1.25rem;display:flex;flex-direction:column;gap:.75rem}
.field{display:block}
.field-label{display:block;margin-bottom:.25rem;font-size:.65rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted-fg)}
.field-input{
  display:flex;align-items:center;gap:.5rem;padding:0 .75rem;
  border-radius:16px;border:1px solid var(--border);
  background:color-mix(in oklab, var(--bg) 60%, transparent);
}
.field-input svg{color:var(--muted-fg);flex-shrink:0}
.field-input input{
  width:100%;padding:.75rem 0;background:transparent;border:0;outline:0;
  color:var(--fg);font-size:.9rem;
}
.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem}
.btn{padding:.55rem 1.25rem;border-radius:999px;font-weight:600;font-size:.85rem;transition:opacity .2s,transform .1s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:color-mix(in oklab, var(--bg) 60%, transparent);color:var(--muted-fg)}
.btn.ghost:hover{color:var(--fg)}
.btn.primary{background:var(--primary);color:var(--primary-fg);
  box-shadow:0 10px 24px -8px color-mix(in oklab, var(--primary) 60%, transparent)}
.btn.primary:hover{opacity:.9}

/* ---------- Footer ---------- */
.foot{margin-top:3rem;text-align:center;font-size:.72rem;color:var(--muted-fg)}

/* ---------- Animations ---------- */
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes bulb-glow{
  0%,100%{filter:drop-shadow(0 0 12px color-mix(in oklab, var(--on) 70%, transparent))}
  50%{filter:drop-shadow(0 0 22px color-mix(in oklab, var(--on) 90%, transparent))}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.35)}
}
@keyframes ripple{
  from{transform:scale(0);opacity:.5}
  to{transform:scale(2.6);opacity:0}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fade-up .5s ease-out both}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation:none!important;transition:none!important}
}