:root{--bg: #070a0f;--bg-elev: #0d131c;--surface: rgba(255, 255, 255, .035);--surface-hi: rgba(255, 255, 255, .07);--line: rgba(255, 255, 255, .09);--line-hi: rgba(255, 255, 255, .16);--text: #e8eef7;--text-dim: #8b9bb0;--text-faint: #56657a;--accent: #22d3ee;--accent-dim: rgba(34, 211, 238, .16);--live: #fbbf24;--live-core: #fffbeb;--ok: #34d399;--warn: #fbbf24;--bad: #f87171;--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--pad: 16px;--gap: 12px;--ease: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background-image:radial-gradient(1100px 620px at 50% -10%,rgba(34,211,238,.09),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:100% 100%,46px 46px,46px 46px;background-attachment:fixed}.app{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--gap);padding:10px var(--pad);background:#070a0fd1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}.brand-name{display:none}.topbar-spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;border:1px solid var(--line-hi);background:var(--surface);color:var(--text-dim)}.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.pill-open{color:var(--ok);border-color:#34d3994d}.pill-connecting{color:var(--warn);border-color:#fbbf244d}.pill-closed{color:var(--bad);border-color:#f871714d}.pill-open:before{animation:breathe 2.4s ease-in-out infinite}@keyframes breathe{0%,to{opacity:1;box-shadow:0 0 8px currentColor}50%{opacity:.45;box-shadow:0 0 2px currentColor}}.icon-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s}.icon-btn:hover{color:var(--text);border-color:var(--line-hi)}.tabs{display:flex;gap:4px;padding:4px;margin:var(--pad);border-radius:var(--r-md);background:var(--bg-elev);border:1px solid var(--line)}.tab{flex:1;padding:9px 6px;border:0;border-radius:10px;background:transparent;color:var(--text-dim);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:all .25s var(--ease)}.tab:hover{color:var(--text)}.tab[aria-selected=true]{background:linear-gradient(180deg,var(--surface-hi),var(--surface));color:var(--text);box-shadow:inset 0 0 0 1px var(--line-hi),0 0 22px -8px var(--accent)}.content{flex:1;padding:0 var(--pad) calc(var(--pad) * 2)}.section-label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin:22px 2px 12px}.panel{background:linear-gradient(180deg,#ffffff0a,#ffffff04);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 14px}.zone{position:relative}.zone+.zone{margin-top:14px}.divider{height:2px;margin:18px 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--line-hi) 12%,var(--line-hi) 88%,transparent)}.zone-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.plan-row{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;margin-inline:auto}.col{display:flex;flex-direction:column;gap:22px;align-items:center}.col-mid{display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center}.lamp{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:4px;border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;background:conic-gradient(from 215deg,#2b3547,#55657f 22%,#1a212d 48%,#46536a 72%,#2b3547);box-shadow:0 3px 7px #000000a6,0 1px #ffffff12,inset 0 1px 1px #ffffff4d,inset 0 -2px 3px #000000a6;transition:transform .15s var(--ease),box-shadow .4s}.lamp:active{transform:scale(.92)}.lamp-lens{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 38% 30%,#334054,#141b26 55%,#080c12);box-shadow:inset 0 2px 5px #000000e6,inset 0 -1px 2px #ffffff0f;transition:background .35s,box-shadow .45s}.lamp-lens:after{content:"";position:absolute;top:8%;left:17%;width:46%;height:32%;border-radius:50%;background:linear-gradient(180deg,#ffffff80,#fff0);filter:blur(1.5px);pointer-events:none;transition:opacity .35s}.lamp[aria-pressed=true]{box-shadow:0 3px 7px #000000a6,0 0 30px -1px #fbbf2499,inset 0 1px 1px #ffffff59,inset 0 -2px 3px #0009}.lamp[aria-pressed=true] .lamp-lens{background:radial-gradient(circle at 44% 38%,#fffdf6,#fff3cd 16%,#fcd34d 42%,#f59e0b 72%,#a16207);box-shadow:inset 0 0 10px #ffffffd9,inset 0 -2px 5px #9254068c,0 0 14px 2px #fbbf248c}.lamp[aria-pressed=true] .lamp-lens:after{opacity:.28}.lamp-sm{width:38px;height:38px;padding:3px}.fan{width:58px;height:58px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--text-dim);cursor:pointer;background:radial-gradient(circle at 40% 32%,#222c3b,#10161f 70%),conic-gradient(from 215deg,#2b3547,#55657f 22%,#1a212d 48%,#46536a 72%,#2b3547);background-clip:content-box,border-box;padding:4px;box-shadow:0 3px 7px #0009,inset 0 1px 1px #ffffff40,inset 0 -2px 3px #0009;transition:color .3s,box-shadow .4s}.fan svg{width:28px;height:28px}.fan[aria-pressed=true]{color:var(--accent);box-shadow:0 3px 7px #0009,0 0 26px -3px var(--accent),inset 0 1px 1px #ffffff4d,inset 0 -2px 3px #0009}.fan[aria-pressed=true] svg{animation:spin 1.1s linear infinite}.fan-static{cursor:default}@keyframes spin{to{transform:rotate(360deg)}}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--gap)}.preset{display:flex;flex-direction:column;align-items:center;gap:11px;aspect-ratio:1;padding:14px 12px 11px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,#1a2431,#121a25);cursor:pointer;box-shadow:0 6px 16px #00000080,inset 0 1px #ffffff12;transition:border-color .2s,transform .18s var(--ease),box-shadow .3s}.preset:hover{border-color:#fbbf2473;box-shadow:0 8px 22px #0000008c,0 0 30px -12px var(--live),inset 0 1px #ffffff17}.preset:active{transform:scale(.97)}.preset-plan{flex:1;display:grid;place-items:center;align-content:center;width:100%;gap:10px 0;padding:10px 8px;border-radius:10px;background:#0000006b;box-shadow:inset 0 2px 5px #0009,inset 0 0 0 1px #ffffff0a}.preset-plan-dev{grid-template-columns:repeat(2,1fr)}.preset-plan-ofc{grid-template-columns:repeat(3,1fr)}.dot{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#46566d,#1b2431 70%,#121924);box-shadow:inset 0 1px 1px #000c,0 0 0 1px #ffffff29;transition:background .3s,box-shadow .35s}.dot-on{background:radial-gradient(circle at 42% 36%,#fffdf6,#fcd34d 45%,#d97706);box-shadow:0 0 9px 1.5px #fbbf24b3,0 0 0 1px #fbbf2459}.preset-caption{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8b9bb0;transition:color .2s}.preset:hover .preset-caption{color:var(--text)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.action{display:flex;flex-direction:column;gap:5px;padding:18px 14px;min-height:88px;justify-content:center;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,#1a2431,#121a25);box-shadow:0 6px 16px #00000080,inset 0 1px #ffffff12;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .2s,transform .18s var(--ease),box-shadow .3s}.action:active{transform:scale(.98)}.action-title{font-size:14px;font-weight:650;letter-spacing:.01em}.action-sub{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}.action-on:hover{border-color:#fbbf2480;box-shadow:0 0 30px -12px var(--live)}.action-off:hover{border-color:var(--line-hi)}.action-span{grid-column:1 / -1}.login-wrap{min-height:100%;display:grid;place-items:center;padding:var(--pad)}.login{width:100%;max-width:340px;padding:28px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0d,#ffffff04);box-shadow:0 30px 80px -30px #000000e6}.login h1{margin:14px 0 4px;font-size:19px;font-weight:650;letter-spacing:.01em}.login-sub{margin:0 0 22px;font-size:12.5px;color:var(--text-faint)}.field{margin-bottom:12px}.field label{display:block;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}.field input{width:100%;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--line-hi);background:#00000059;color:var(--text);font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.btn{width:100%;padding:12px;margin-top:6px;border:0;border-radius:var(--r-sm);background:linear-gradient(180deg,#2ee0f5,#16b6d4);color:#04222a;font:inherit;font-size:14px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:filter .2s,transform .15s var(--ease)}.btn:hover:not(:disabled){filter:brightness(1.08)}.btn:active:not(:disabled){transform:scale(.985)}.btn:disabled{opacity:.55;cursor:default}.error{margin:0 0 14px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid rgba(248,113,113,.35);background:#f871711a;color:#fca5a5;font-size:12.5px}.center-note{display:grid;place-items:center;min-height:60vh;color:var(--text-faint);font-size:13px}@media(min-width:600px){:root{--pad: 24px;--gap: 16px}.brand-name{display:inline}.tab{font-size:13.5px;padding:10px}.lamp{width:60px;height:60px;padding:5px}.lamp-sm{width:44px;height:44px;padding:4px}.fan{width:70px;height:70px}.fan svg{width:34px;height:34px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.action-grid{grid-template-columns:repeat(3,1fr)}.action-span{grid-column:auto}}@media(min-width:1000px){.content,.tabs{width:100%;max-width:940px;margin-inline:auto}.tabs{margin-top:var(--pad)}.panel{padding:28px 26px}.col{gap:34px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
