/* =====================================================================
   SIENNA — estilos. Dois temas (escuro / claro) só por variáveis.
   ===================================================================== */
:root{
  --gold:#E2B95B; --gold-hi:#FFDB8A; --gold-lo:#9A7424;
  --r:22px; --f:"Jost","Century Gothic",Futura,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --toph:84px;
}
/* ---- escuro (padrão) ---- */
:root,[data-theme=dark]{
  --fgc:255,255,255; --bgc:0,0,0;
  --page:#050505; --txt:#fff; --mute:rgba(255,255,255,.6); --dim:rgba(255,255,255,.36);
  --glass:rgba(22,22,22,.62); --stroke:rgba(255,255,255,.13); --stroke2:rgba(255,255,255,.24);
  --accent:#FFDB8A; --bub-b:rgba(255,255,255,.55);
  --bar-bg:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 75%,transparent);
  --dock-bg:linear-gradient(0deg,rgba(0,0,0,.94) 55%,transparent);
  --stuck:linear-gradient(180deg,rgba(0,0,0,.93) 88%,transparent);
  --bg-filter:blur(28px) saturate(1.15) brightness(.38); --bg-op:1;
  --veil:radial-gradient(120% 70% at 50% 0,rgba(226,185,91,.10),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72) 70%,#000);
  --shadow:0 10px 30px rgba(0,0,0,.55); --card-in:inset 0 1px 0 rgba(255,255,255,.08);
  color-scheme:dark;
}
/* ---- claro: branco, dourado e preto ---- */
[data-theme=light]{
  --fgc:0,0,0; --bgc:255,255,255;
  --page:#F3F1EC; --txt:#0b0b0b; --mute:rgba(0,0,0,.56); --dim:rgba(0,0,0,.38);
  --glass:rgba(255,255,255,.78); --stroke:rgba(0,0,0,.08); --stroke2:rgba(0,0,0,.16);
  --accent:#8A6716; --bub-b:rgba(0,0,0,.18);
  --bar-bg:linear-gradient(180deg,rgba(243,241,236,.96),rgba(243,241,236,.8) 75%,transparent);
  --dock-bg:linear-gradient(0deg,rgba(243,241,236,.97) 55%,transparent);
  --stuck:linear-gradient(180deg,rgba(243,241,236,.96) 88%,transparent);
  --bg-filter:blur(40px) saturate(.9) brightness(1.15); --bg-op:.28;
  --veil:radial-gradient(120% 70% at 50% 0,rgba(226,185,91,.16),transparent 60%),linear-gradient(180deg,rgba(243,241,236,.2),rgba(243,241,236,.85) 60%,#F3F1EC);
  --shadow:0 10px 26px rgba(60,45,10,.14); --card-in:inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;background:var(--page)}
body{font-family:var(--f);font-weight:300;color:var(--txt);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

#bg{position:fixed;inset:-40px;z-index:-2;background:#000 center/cover no-repeat;filter:var(--bg-filter);opacity:var(--bg-op);transform:scale(1.08)}
.veil{position:fixed;inset:0;z-index:-1;background:var(--veil)}

/* ---------- barra superior ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 12px) 14px 12px;background:var(--bar-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.navbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;flex:none}
.navbtn:active{background:rgba(var(--fgc),.08)}
.bubbles{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;flex:1;padding:4px 2px}
.bubbles::-webkit-scrollbar{display:none}
.bub{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.bub .o{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(var(--fgc),.16),rgba(var(--fgc),.03) 70%);
  border:1.5px solid var(--bub-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.25);transition:all .2s}
.bub svg.i{width:27px;height:27px}
.bub .t{display:none;font-size:13px;color:var(--mute);white-space:nowrap}
.bub:active .o{transform:scale(.94)}
.bub.on .o{border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,185,91,.22),0 0 22px rgba(226,185,91,.45);color:var(--accent)}
.bub.on .t{color:var(--accent)}
.bub .dot{position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);display:none}
.bub.has .dot{display:block}
.word{font-weight:200;letter-spacing:.42em;font-size:20px;padding-left:10px;white-space:nowrap;display:none}
.simtag{flex:none;font-size:10.5px;letter-spacing:.1em;padding:4px 9px;border-radius:999px;border:1px solid rgba(226,185,91,.6);color:var(--accent);display:none}
.simtag.show{display:block}
@media (max-width:759px){.simtag{font-size:9px;padding:3px 7px;letter-spacing:.06em}}

main{padding:0 14px calc(130px + var(--safe-b));max-width:1600px;margin:0 auto}

/* ---------- início ---------- */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:8px 4px 16px}
.hello h1{font-weight:200;font-size:38px;line-height:1}
.hello p{color:var(--mute);margin-top:6px;font-size:15px}
.clock{font-weight:200;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;text-align:right}
.clock small{display:block;font-size:13px;color:var(--mute);margin-top:6px;font-weight:300}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 2px 16px}
.chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--stroke);font-size:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.chip svg.i{width:18px;height:18px}
.chip.gold{color:var(--accent);border-color:rgba(226,185,91,.5)}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.room{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:#111;text-align:left;color:#fff;
  border:1.5px solid rgba(255,255,255,.7);box-shadow:var(--shadow);transition:transform .2s,border-color .3s,box-shadow .3s;isolation:isolate}
[data-theme=light] .room{border-color:#fff}
.room:active{transform:scale(.97)}
.room.big{grid-column:1/-1;aspect-ratio:16/10}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s,transform .8s;filter:brightness(calc(.42 + var(--lum,0)*.62))}
.room:hover img{transform:scale(1.04)}
.room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.82));z-index:1;pointer-events:none}
.room.lit{border-color:var(--gold);box-shadow:0 0 0 1px rgba(226,185,91,.3),0 0 28px rgba(226,185,91,.28),var(--shadow)}
.room .meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:2}
.room .rn{font-size:24px;font-weight:300;line-height:1.05;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.room.big .rn{font-size:32px}
.room .rs,.sum{display:flex;gap:12px;align-items:center;margin-top:6px;font-size:13px;color:rgba(255,255,255,.88)}
.rs span,.sum span{display:flex;align-items:center;gap:5px}
.rs svg.i,.sum svg.i{width:15px;height:15px}
.rs .g,.sum .g{color:var(--gold-hi)}
.room .live{position:absolute;top:12px;left:12px;z-index:2}

/* ---------- dock de cenários ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:14px 0 calc(10px + var(--safe-b));background:var(--dock-bg)}
.dock .row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:0 14px;max-width:1600px;margin:0 auto}
.dock .row::-webkit-scrollbar{display:none}
.scn{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--txt);opacity:.92;text-align:center}
.scn .ic{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(var(--fgc),.12),rgba(var(--fgc),.03));
  border:1px solid var(--stroke2);box-shadow:var(--card-in);transition:all .25s;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme=light] .scn .ic{background:rgba(255,255,255,.85)}
.scn .ic svg.i{width:32px;height:32px}
.scn:active .ic{transform:scale(.93)}
.scn.fired .ic{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#000;border-color:var(--gold);box-shadow:0 0 26px rgba(226,185,91,.6)}

/* ---------- ambiente ---------- */
.roomv{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.roomv>*{min-width:0}
.stage{position:sticky;top:var(--toph);z-index:10;margin:0 -14px;padding:0 14px 12px}
.stage.stuck{background:var(--stuck)}
.view{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#000;color:#fff;border:1px solid var(--stroke2);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.view>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.view .ttl{position:absolute;left:16px;bottom:12px;right:16px;z-index:4;pointer-events:none}
.view .ttl h1{font-weight:200;font-size:34px;line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.view .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 55%,rgba(0,0,0,.8));z-index:3;pointer-events:none}
.camsw{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:6px}
.camsw button{padding:6px 12px;border-radius:999px;font-size:12.5px;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.camsw button.on{background:var(--gold);color:#000;border-color:var(--gold)}
.camsw .full{width:32px;height:32px;padding:0;display:grid;place-items:center}
.camsw .full svg.i{width:17px;height:17px}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:12px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--stroke);font-size:15px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:all .2s}
.tab svg.i{width:19px;height:19px}
.tab.on{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#000;border-color:var(--gold);font-weight:400}
.tab .n{font-size:12px;opacity:.7}
.panel{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.phead{display:flex;align-items:center;gap:10px;margin:4px 2px 12px;flex-wrap:wrap}
.phead h2{font-weight:300;font-size:21px}
.phead .s{color:var(--mute);font-size:14px}
.phead .acts{margin-left:auto;display:flex;gap:8px}
.pill{padding:8px 16px;border-radius:999px;font-size:14px;border:1px solid var(--stroke2);background:rgba(var(--fgc),.06);white-space:nowrap}
.pill:active{transform:scale(.96)}
.pill.g{border-color:rgba(226,185,91,.65);color:var(--accent)}
.pill.solid{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#000;border-color:var(--gold)}

/* ---------- câmera ---------- */
.feed{position:absolute;inset:0;overflow:hidden;background:#000;--lum:.2}
.feed img.sim{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:grayscale(1) brightness(calc(.32 + var(--lum)*.95)) contrast(1.08);transition:filter 1.1s ease;animation:drift 22s ease-in-out infinite alternate}
.feed img.real,.feed iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;background:#000}
@keyframes drift{to{transform:translate(-1.2%,-.8%) scale(1.02)}}
.feed .warm{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 15%,rgba(255,206,120,.55),transparent 70%);mix-blend-mode:soft-light;opacity:var(--lum);transition:opacity 1.1s}
.feed .grain{position:absolute;inset:-50%;opacity:.13;mix-blend-mode:overlay;animation:grain .5s steps(4) infinite;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}}
.feed .hud{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:8px;align-items:center;font-size:11.5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.9);text-shadow:0 1px 3px #000}
.livepill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:11px;letter-spacing:.08em;font-weight:400;white-space:nowrap}
.livepill::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff4b3e;box-shadow:0 0 8px #ff4b3e;animation:blink 1.4s infinite}
.livepill.simu::before{background:var(--gold);box-shadow:0 0 8px var(--gold)}
@keyframes blink{50%{opacity:.3}}
.feed .flash{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 20%,rgba(255,220,150,.5),transparent);opacity:0;pointer-events:none}
.feed .flash.go{animation:flash 1.2s ease}
@keyframes flash{20%{opacity:1}}
.feed .err{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:13px;color:rgba(255,255,255,.75)}

/* ---------- cartões ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--card-in)}
[data-theme=light] .card{box-shadow:var(--card-in),0 4px 16px rgba(60,45,10,.06)}
.lt{position:relative;height:118px;padding:14px;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;transition:border-color .3s}
.lt .fill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:-1;background:linear-gradient(90deg,rgba(226,185,91,.18),rgba(255,219,138,.45));transition:width .25s}
.lt.drag .fill{transition:none}
.lt .fill::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:2px;border-radius:2px;background:var(--gold-hi);box-shadow:0 0 10px var(--gold-hi);opacity:0;transition:opacity .2s}
.lt.on .fill::after{opacity:1}
.lt.on{border-color:rgba(226,185,91,.55)}
.lamp{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--fgc),.07);color:var(--mute);transition:all .3s;flex:none}
.lt.on .lamp{background:radial-gradient(circle,var(--gold-hi),var(--gold) 70%);color:#000;box-shadow:0 0 calc(8px + var(--v,0)*.3px) rgba(255,214,130,.85)}
.lamp svg.i{width:22px;height:22px}
.lt .ln{font-size:15.5px;line-height:1.15}
.lt .lv{font-size:13px;color:var(--mute)}
.lt.on .lv{color:var(--accent)}
.lt .row{display:flex;justify-content:space-between;align-items:flex-start}
.lt .pct{font-weight:200;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s}
.lt.on .pct{opacity:1}
.hint{color:var(--dim);font-size:12.5px;margin:12px 4px 0;text-align:center}
.rgb{padding:16px;grid-column:1/-1}
.sws{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 14px}
.swt{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--fgc),.3);transition:transform .15s}
.swt.on{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--gold);transform:scale(1.08)}
.bar{position:relative;height:50px;border-radius:14px;background:rgba(var(--fgc),.07);overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 16px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-y;isolation:isolate;font-size:14.5px}
.bar i{position:absolute;inset:0 auto 0 0;width:0;z-index:-1;background:linear-gradient(90deg,rgba(226,185,91,.25),rgba(255,219,138,.6));transition:width .2s}
.bar.drag i{transition:none}
.bar b{font-weight:300;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- clima ---------- */
.acsel{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.acsel::-webkit-scrollbar{display:none}
.acs{flex:1 0 auto;min-width:118px;padding:11px 14px;border-radius:16px;text-align:left;background:var(--glass);border:1px solid var(--stroke);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.acs b{display:block;font-weight:300;font-size:14px;white-space:nowrap}
.acs span{font-size:22px;font-weight:200;font-variant-numeric:tabular-nums}
.acs span.off{font-size:14px;color:var(--dim)}
.acs.on{border-color:var(--gold);box-shadow:0 0 0 1px rgba(226,185,91,.35) inset}
.acs.on b{color:var(--accent)}
.thermo{padding:16px 16px 18px;position:relative;overflow:hidden}
.thermo .hd{display:flex;align-items:center;gap:12px}
.thermo .hd b{font-weight:300;font-size:19px;display:block}
.thermo .hd span{font-size:13.5px;color:var(--mute)}
.pwr{margin-left:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke2);background:rgba(var(--fgc),.05);transition:all .3s;flex:none}
.pwr.on{background:radial-gradient(circle,var(--gold-hi),var(--gold));color:#000;border-color:var(--gold);box-shadow:0 0 24px rgba(226,185,91,.55)}
.unit{position:relative;height:66px;margin:14px auto 0;width:min(300px,86%)}
.unit .body{position:absolute;inset:0 0 18px;border-radius:12px 12px 22px 22px;background:linear-gradient(180deg,#f7f7f5,#d9d9d6);box-shadow:inset 0 -4px 0 #bdbdb9,0 8px 20px rgba(0,0,0,.3)}
.unit .body::after{content:"";position:absolute;left:8%;right:8%;bottom:6px;height:5px;border-radius:3px;background:#a6a6a2}
.unit .led{position:absolute;right:12%;top:14px;width:22px;height:4px;border-radius:2px;background:#555;transition:all .3s}
.thermo.on .unit .led{background:var(--gold);box-shadow:0 0 10px var(--gold-hi)}
.unit .air{position:absolute;left:10%;right:10%;top:48px;height:46px;opacity:0;transition:opacity .5s}
.thermo.on .unit .air{opacity:1}
.air span{position:absolute;top:0;width:2px;height:26px;border-radius:2px;background:linear-gradient(rgba(150,205,250,.85),transparent);animation:blow 1.8s linear infinite}
@keyframes blow{from{transform:translateY(-6px);opacity:0}30%{opacity:1}to{transform:translateY(22px);opacity:0}}
.dial{position:relative;width:min(290px,82vw);margin:4px auto 0;aspect-ratio:1/1;touch-action:none;user-select:none;-webkit-user-select:none}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.dial .set{font-weight:200;font-size:76px;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dial .set sup{font-size:30px;vertical-align:top;margin-left:2px}
.dial .lbl{font-size:13px;color:var(--mute);margin-top:8px;letter-spacing:.06em}
.thermo:not(.on) .set{opacity:.3}
.steps{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:-18px;position:relative}
.rnd{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke2);background:rgba(var(--fgc),.06);font-size:28px;font-weight:200}
.rnd:active{background:var(--gold);color:#000;transform:scale(.95)}
.presets{display:flex;gap:6px;justify-content:center;margin-top:16px}
.preset{padding:7px 10px;border-radius:999px;border:1px solid var(--stroke);font-size:12.5px;background:rgba(var(--fgc),.04);white-space:nowrap}
.preset b{font-weight:400;margin-left:4px}
.preset.on{border-color:var(--gold);color:var(--accent)}

/* ---------- persianas ---------- */
.sh{padding:14px;display:flex;flex-direction:column;gap:12px}
.sh .nm{font-size:15px;line-height:1.2}
.sh .nm b{font-weight:300;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh .nm span{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.win{position:relative;height:150px;border-radius:12px;overflow:hidden;cursor:ns-resize;touch-action:none;background:linear-gradient(180deg,#1e3247,#5b7c98 60%,#c9b48a);border:3px solid #1b1b1b}
.win::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:#1b1b1b;transform:translateX(-50%)}
.win .sl{position:absolute;left:0;right:0;top:0;height:0;transition:height .9s cubic-bezier(.4,0,.2,1);background:repeating-linear-gradient(180deg,#ece6da 0 9px,#bdb5a5 9px 11px);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.win.drag .sl{transition:none}
.win .sl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#8f8778}
.btns3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.btns3 button{height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--fgc),.06);border:1px solid var(--stroke)}
.btns3 button:active{background:var(--gold);color:#000}

/* ---------- mídia, controle remoto e som ---------- */
.md{padding:16px;grid-column:1/-1}
.md .hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.md .hd .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(var(--fgc),.07);flex:none}
.md.on .hd .ico{background:linear-gradient(160deg,var(--gold-hi),var(--gold));color:#000}
.md .hd b{font-weight:300;font-size:18px;display:block}
.md .hd span{font-size:13.5px;color:var(--mute)}
.md .hd .pwr{width:46px;height:46px}
.srcs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.src{padding:9px 16px;border-radius:12px;border:1px solid var(--stroke);background:rgba(var(--fgc),.04);font-size:14px}
.src.on{background:var(--txt);color:var(--page);border-color:var(--txt);font-weight:400}
.src.netflix{font-weight:500;letter-spacing:.04em;color:#e50914}
.src.netflix.on{background:#e50914;color:#fff;border-color:#e50914}
.mrow{display:flex;gap:8px;margin-top:10px}
.mrow .bar{flex:1}
.rbtn{height:50px;padding:0 16px;border-radius:14px;display:flex;align-items:center;gap:8px;background:rgba(var(--fgc),.07);border:1px solid var(--stroke);font-size:14px;white-space:nowrap}
.rbtn.on{border-color:var(--gold);color:var(--accent)}
.remote{margin-top:14px;padding:16px 0 6px;border-top:1px solid var(--stroke);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;animation:rise .3s ease both}
.dpad{position:relative;width:min(200px,calc(100vw - 190px));aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle,rgba(var(--fgc),.05),rgba(var(--fgc),.1));border:1px solid var(--stroke2);touch-action:manipulation}
.dpad button{position:absolute;width:32%;height:32%;display:grid;place-items:center;border-radius:50%}
.dpad button:active{background:rgba(226,185,91,.3)}
.dpad .u{left:34%;top:1%}.dpad .d{left:34%;bottom:1%}.dpad .l{left:1%;top:34%}.dpad .r{right:1%;top:34%}
.dpad .u svg{transform:rotate(-90deg)}.dpad .d svg{transform:rotate(90deg)}.dpad .l svg{transform:rotate(180deg)}
.dpad .ok{left:31%;top:31%;width:38%;height:38%;background:rgba(var(--fgc),.1);border:1px solid var(--stroke2);font-size:15px;letter-spacing:.06em}
.dpad .ok:active{background:var(--gold);color:#000}
.rcol{display:flex;flex-direction:column;gap:10px;align-items:center}
.rk{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--fgc),.07);border:1px solid var(--stroke);font-size:12px}
.rk:active{background:var(--gold);color:#000}
.rk svg.i{width:21px;height:21px}
.rfoot{grid-column:1/-1;text-align:center;font-size:12px;color:var(--dim)}
.zone{padding:14px;display:flex;flex-direction:column;gap:10px}
.zone .hd{display:flex;align-items:center;justify-content:space-between}
.zone .hd b{font-weight:300;font-size:16px}
.zone .hd span{display:block;font-size:12.5px;color:var(--mute)}
.tg{width:50px;height:30px;border-radius:999px;background:rgba(var(--fgc),.14);position:relative;flex:none;transition:background .25s}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s}
.tg.on{background:var(--gold)}
.tg.on::after{transform:translateX(20px)}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:12px;margin-right:6px}
.eq i{width:3px;background:var(--gold);border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}

/* ---------- acesso ---------- */
.lock{padding:18px 22px 30px 18px;display:flex;align-items:center;gap:16px;grid-column:1/-1}
.lock .st b{font-weight:300;font-size:19px;display:block}
.lock .st span{font-size:13.5px;color:var(--mute)}
.lock.open .st span{color:var(--accent)}
.hold{margin-left:auto;position:relative;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;background:radial-gradient(circle,rgba(var(--fgc),.1),rgba(var(--fgc),.02));border:1px solid var(--stroke2)}
.hold svg.ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg)}
.hold svg.ring circle{fill:none;stroke-width:3}
.hold .lbl{font-size:11px;position:absolute;bottom:-20px;white-space:nowrap;color:var(--mute);left:50%;transform:translateX(-50%)}
.lock.open .hold{background:radial-gradient(circle,var(--gold-hi),var(--gold));color:#000;border-color:var(--gold);box-shadow:0 0 30px rgba(226,185,91,.55)}
.pulse{padding:16px;display:flex;align-items:center;gap:12px;grid-column:1/-1}
.pulse b{font-weight:300;font-size:16px}
.pulse .pill{margin-left:auto}

/* ---------- categoria ---------- */
.catsec{margin-bottom:22px}
.cathd{display:flex;align-items:center;gap:12px;margin:0 2px 10px;width:100%;text-align:left}
.cathd img{width:46px;height:46px;border-radius:12px;object-fit:cover;border:1px solid var(--stroke2)}
.cathd b{font-weight:300;font-size:20px}
.cathd .sum{color:var(--mute);margin-top:2px}
.cathd .sum .g{color:var(--accent)}
.cathd>svg.i{margin-left:auto;color:var(--mute)}
.ttl0{font-weight:200;font-size:36px;margin:6px 4px 16px}
.camgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px}
.camtile{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke2);color:#fff}
.camtile .cap{position:absolute;left:14px;bottom:12px;z-index:3;font-size:16px;text-shadow:0 1px 6px #000;text-align:left}
.camtile .cap span{display:block;font-size:12.5px;opacity:.8}
.camtile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.75));z-index:2;pointer-events:none}

/* ---------- câmera flutuante e tela cheia ---------- */
#pip{position:fixed;z-index:30;width:min(46vw,300px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1.5px solid var(--gold);color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 20px rgba(226,185,91,.25);right:14px;bottom:calc(128px + var(--safe-b));touch-action:none;display:none;cursor:grab}
#pip.show{display:block;animation:pop .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#pip .x{position:absolute;top:6px;right:6px;z-index:5;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.65);display:grid;place-items:center}
#pip .x svg.i{width:15px;height:15px}
#pip .pn{position:absolute;left:10px;bottom:7px;z-index:5;font-size:12px;text-shadow:0 1px 4px #000}
#pip .hud{top:7px;left:7px}
#pip .hud .ts{display:none}
#pip .livepill{font-size:9.5px;padding:3px 7px 3px 6px}
#full{position:fixed;inset:0;z-index:40;background:#000;color:#fff;display:none}
#full.show{display:block}
#full .feed img.sim,#full .feed img.real,#full .feed iframe{object-fit:contain}
#full .x{position:absolute;top:calc(var(--safe-t) + 14px);right:14px;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
#full .qk{position:absolute;left:0;right:0;bottom:calc(18px + var(--safe-b));z-index:5;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 14px}
#full .pill{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.5)}
#full .pill.g{color:var(--gold-hi)}

#toast{position:fixed;left:50%;bottom:calc(132px + var(--safe-b));transform:translate(-50%,16px);z-index:50;display:flex;align-items:center;gap:8px;
  background:rgba(20,20,20,.94);border:1px solid rgba(226,185,91,.5);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#toast::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- configurações ---------- */
.cfg{max-width:860px;margin:0 auto}
.cfgnav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
.cfgnav::-webkit-scrollbar{display:none}
.sec{padding:18px;margin-bottom:14px}
.sec h3{font-weight:300;font-size:19px;margin-bottom:4px}
.sec>p{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:rgba(var(--fgc),.07);gap:4px;flex-wrap:wrap}
.seg button{padding:9px 16px;border-radius:10px;font-size:14px}
.seg button.on{background:var(--txt);color:var(--page)}
.fld{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.fld label{font-size:13px;color:var(--mute)}
.fld input,.fld select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke2);background:rgba(var(--fgc),.05);font-size:15px;outline:none}
.fld input:focus,.fld select:focus{border-color:var(--gold)}
.fld small{font-size:12.5px;color:var(--dim)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.note{font-size:13px;padding:12px 14px;border-radius:12px;background:rgba(226,185,91,.1);border:1px solid rgba(226,185,91,.35);margin-top:12px;line-height:1.45}
.note code,.sec code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:rgba(var(--fgc),.08);padding:1px 5px;border-radius:5px;word-break:break-all}
.warn{background:rgba(255,90,70,.1);border-color:rgba(255,90,70,.4)}
.rlist{display:flex;flex-direction:column;gap:10px}
.ritem{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:rgba(var(--fgc),.04);border:1px solid var(--stroke)}
.ritem img{width:74px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:#222}
.ritem .grow{flex:1;min-width:0}
.ritem input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--stroke);background:transparent;font-size:15px}
.ritem .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ritem .btns button{font-size:12.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke2)}
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable td{padding:6px 4px;border-bottom:1px solid var(--stroke);vertical-align:middle}
.dtable td.id{width:76px}
.dtable input{width:100%;padding:7px 9px;border-radius:9px;border:1px solid var(--stroke);background:transparent;font-size:14px}
.dtable .typ{font-size:12px;color:var(--dim);white-space:nowrap}
details.room-d{border-top:1px solid var(--stroke);padding:10px 0}
details.room-d summary{cursor:pointer;font-size:16px;list-style:none;display:flex;justify-content:space-between}
details.room-d summary::after{content:"+";color:var(--mute)}
details.room-d[open] summary::after{content:"−"}
button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}
.camprev{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:12px;border:1px solid var(--stroke2);color:#fff}

/* =====================================================================
   iPad / desktop: categorias grandes e com nome
   ===================================================================== */
@media (min-width:760px){
  .word{display:block}
  .bubbles{justify-content:center;gap:18px}
  .bub .o{width:70px;height:70px}
  .bub svg.i{width:32px;height:32px}
  .bub .t{display:block}
  .rooms{grid-template-columns:repeat(3,1fr);gap:14px}
  .room.big{grid-column:span 2;aspect-ratio:auto}
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .camgrid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
  .hello h1,.clock{font-size:48px}
  .scn{width:88px;font-size:12.5px}
  .scn .ic{width:80px;height:80px;border-radius:22px}
  .scn .ic svg.i{width:36px;height:36px}
  main{padding-bottom:calc(150px + var(--safe-b))}
}
@media (min-width:1000px){
  .bub .o{width:80px;height:80px}
  .bub svg.i{width:36px;height:36px}
  .bubbles{gap:26px}
  main{padding-left:24px;padding-right:24px}
  .rooms{grid-template-columns:repeat(4,1fr)}
  .roomv{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
  .stage{margin:0;padding:0}
  .stage.stuck{background:none}
  .view .ttl h1{font-size:46px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{flex-wrap:wrap}
}
/* celular deitado: vídeo ao lado dos controles */
@media (orientation:landscape) and (max-height:500px){
  .top{padding-top:6px;padding-bottom:6px}
  .bub .o{width:46px;height:46px}.bub .t{display:none}
  .roomv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
  .stage{margin:0;padding:0}
  .stage.stuck{background:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}