:root{--bg:#13171a;--paper:rgba(255,255,255,.13);--text:#f6f8f8;--muted:#9aa6ab;--line:rgba(255,255,255,.24);--accent:#51b8d4;--soft-accent:rgba(81,184,212,.16);--orange:#eca477;--accent-ink:#052027;--shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -12px rgba(0,0,0,.55);--display-font:'Fraunces',ui-serif,Georgia,serif;--body-font:'Manrope',"Segoe UI",Arial,sans-serif;--mono-font:'IBM Plex Mono',ui-monospace,Consolas,monospace;color-scheme:dark}
.connection-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.connection-card .connection-error,.connection-error{color:#e2897c;font-size:12px;overflow-wrap:anywhere;min-height:0}.connected-status{background:var(--soft-accent);color:var(--accent)}.connected-status .state-dot{background:var(--accent)}.connection-guide{background:rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(150%);border-radius:10px;padding:13px;font-size:12px;margin-top:18px}.connection-guide summary{cursor:pointer;font-weight:600}.connection-guide ol{padding-left:18px}.connection-guide li{margin:7px 0}.connection-guide a{color:var(--accent)}.real-model{font-size:11px;color:var(--muted);margin-top:14px;min-height:20px}
*{box-sizing:border-box}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px}*::-webkit-scrollbar-track{background:transparent}body{margin:0;background:radial-gradient(1200px 720px at 6% -14%,rgba(255,255,255,.08),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font:14px/1.6 var(--body-font)}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}a{color:inherit}svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display-font)}h1{font-size:34px;letter-spacing:-.02em;line-height:1.15;font-weight:600}h2{font-size:21px;letter-spacing:-.01em;font-weight:600}h3{font-size:16px;font-weight:600}small{font-size:12px}.sidebar{width:242px;background:rgba(255,255,255,.12);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:30px 20px;display:flex;flex-direction:column;z-index:10}.brand{text-decoration:none;display:flex;align-items:center;gap:12px;font-size:32px;font-weight:750;letter-spacing:-1.7px;padding:0 12px}.brand-symbol{display:block;width:37px;height:37px;border-radius:22.7%}.brand-dot{color:#e8b487}.home-label{display:flex;align-items:center;gap:9px;padding:12px 13px;background:rgba(255,255,255,.13);border:1px solid var(--line);border-radius:10px;margin-top:33px;overflow-wrap:anywhere}.home-dot,.local-pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}.nav-caption{font-size:10px;color:var(--muted);letter-spacing:1.6px;font-weight:650;margin:30px 12px 12px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;border-radius:10px;padding:13px 12px;color:var(--muted);margin:4px 0;font-weight:550}.nav-item.active{background:var(--soft-accent);color:#bce6f1}.nav-item:hover{background:rgba(255,255,255,.2)}.nav-item svg{width:19px;height:19px}.nav-badge{margin-left:auto;background:rgba(255,255,255,.16);border-radius:6px;font:500 11px var(--mono-font);padding:1px 6px;color:var(--muted)}.nav-item-more{display:none}.more-menu{display:flex;flex-direction:column;gap:4px}.more-menu .nav-item{padding:14px 12px}.sidebar-bottom{margin-top:auto;padding-top:32px}.local-note{display:flex;gap:10px;margin:0 8px 20px;color:var(--accent)}.local-note svg{width:17px}.local-note strong{display:block;font-size:11px;font-weight:550}.local-note span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.profile{margin-top:17px;padding:21px 5px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(236,164,119,.22);font-weight:650;color:#f0c39a}.profile strong{display:block;font-size:11px;font-weight:600}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.app-shell{margin-left:242px}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 44px;background:rgba(255,255,255,.02);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{margin:0 12px;color:rgba(255,255,255,.22)}.breadcrumb strong{font-weight:550;color:var(--text)}.top-actions{display:flex;gap:23px;align-items:center}.local-pill{font-size:11px;display:flex;gap:7px;align-items:center}.icon-button{border:1px solid var(--line);background:rgba(255,255,255,.13);backdrop-filter:blur(14px) saturate(150%);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:24px;flex:none}.icon-button svg{width:17px;height:17px}main{max-width:1420px;margin:auto;padding:35px 44px 24px;outline:none}.page-title{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.eyebrow{font-family:var(--mono-font);font-size:10px;letter-spacing:1.8px;font-weight:500;color:#79b9cb;text-transform:uppercase;margin-bottom:9px}.subtitle{color:var(--muted);font-size:13px;margin-top:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;padding:11px 15px;font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none}.button svg{width:16px;height:16px}.primary{background:linear-gradient(160deg,#7cd1e9,#1c748d);color:var(--accent-ink);box-shadow:0 1px 0 rgba(255,255,255,.35) inset}.primary:hover{background:linear-gradient(160deg,#6cc5de,#1a677c)}.secondary{background:rgba(255,255,255,.13);border-color:var(--line);backdrop-filter:blur(14px) saturate(150%)}.secondary:hover{background:rgba(255,255,255,.2)}.text-button{background:transparent;border:0;padding:7px 0;font-size:12px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px}.text-button:hover{text-decoration:underline}.demo-banner{display:flex;align-items:center;gap:12px;background:rgba(236,164,119,.1);border:1px solid rgba(236,164,119,.28);border-radius:10px;padding:11px 15px;margin-bottom:22px;font-size:12px;color:#e8c39a;backdrop-filter:blur(14px) saturate(150%)}.demo-banner svg{width:17px;flex:none}.demo-banner strong{font-weight:650}.demo-banner button{margin-left:auto;flex:none;color:var(--orange)}.hero{min-height:229px;border-radius:22px;background:linear-gradient(135deg,rgba(81,184,212,.14),rgba(255,255,255,.03));border:1px solid var(--line);backdrop-filter:blur(24px) saturate(160%);position:relative;overflow:hidden;padding:29px 32px;display:flex;align-items:center;margin-bottom:23px;box-shadow:var(--shadow)}.hero-text{z-index:1;width:62%;max-width:520px}.hero h2{font-size:31px;line-height:1.2;letter-spacing:-1px;font-weight:600;margin:11px 0}.hero p{color:#a9b8a0;font-size:13px;max-width:310px;line-height:1.7}.hero .button{margin-top:20px;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}.hero-chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.6px;color:#92aeb6}.hero-chip svg{width:14px;height:14px}.house-art{position:absolute;right:25px;bottom:0;width:310px;height:235px;stroke:none;fill:unset}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:31px}.stat{padding:17px 19px;border:1px solid var(--line);background:rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(150%);border-radius:16px;display:flex;gap:13px;align-items:center;box-shadow:var(--shadow)}.stat-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--soft-accent);color:#84cee2}.stat-icon.peach{background:rgba(236,164,119,.18);color:#eab27f}.stat-icon.purple{background:rgba(167,150,214,.18);color:#bcaee2}.stat strong{font-family:var(--mono-font);font-size:22px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums}.stat small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:25px 0 16px}.scene-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.scene-card{display:flex;text-align:left;align-items:center;gap:13px;border:1px solid var(--line);border-radius:16px;padding:17px;background:rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(150%);transition:transform .15s;box-shadow:var(--shadow)}.scene-card:hover{transform:translateY(-2px);border-color:rgba(81,184,212,.45)}.scene-symbol{width:39px;height:39px;background:rgba(217,168,99,.18);color:#dba863;display:grid;place-items:center;border-radius:12px}.scene-symbol.moon{background:rgba(167,150,214,.18);color:#bcaee2}.scene-symbol.leaf{background:var(--soft-accent);color:#84cee2}.scene-card strong{display:block;font-size:12px}.scene-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.scene-card .play{margin-left:auto;color:var(--muted);font-size:17px}.filter-bar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}.room-tabs{display:flex;gap:7px;flex-wrap:wrap}.tab{border:1px solid transparent;background:transparent;border-radius:8px;padding:8px 13px;color:var(--muted);font-size:12px}.tab.active{background:var(--accent);color:var(--accent-ink)}.tab:not(.active):hover{background:rgba(255,255,255,.06)}.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(150%);padding:8px 11px;min-width:155px;max-width:220px}.search svg{width:15px;color:var(--muted)}.search input{border:0;outline:none;background:none;min-width:0;width:100%;font-size:12px}.device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.device-card{background:rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.device-card.on{border-color:rgba(81,184,212,.4);background:rgba(81,184,212,.08)}.device-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.device-symbol{width:45px;height:45px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.1);color:var(--muted)}.device-card.on .device-symbol{background:rgba(250,204,120,.2);color:#f0be6e}.device-card[data-kind="curtain"].on .device-symbol{background:rgba(167,150,214,.2);color:#c3b3e6}.device-meta-actions{display:flex;align-items:center;gap:7px}.favorite{padding:4px;border:none;background:transparent;color:rgba(255,255,255,.32);font-size:19px;line-height:1}.favorite.chosen{color:#e8c37c}.badge{font-family:var(--mono-font);font-size:9px;letter-spacing:.3px;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:var(--muted)}.device-card h3{font-size:14px;margin-bottom:4px}.device-room{font-size:11px;color:var(--muted)}.device-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.16);margin-top:21px;padding-top:15px}.device-state{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.state-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}.on .state-dot{background:var(--accent)}.toggle{width:37px;height:22px;border:0;border-radius:20px;background:rgba(255,255,255,.14);padding:3px;transition:background .15s}.toggle span{display:block;background:#fff;width:16px;height:16px;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .15s}.toggle[aria-checked="true"]{background:var(--accent)}.toggle[aria-checked="true"] span{transform:translateX(15px)}.device-range{display:flex;align-items:center;gap:9px;margin-top:15px;font-size:10px;color:var(--muted)}.device-range input{width:100%;accent-color:var(--accent);min-width:0}.range-space{height:30px}.device-brand{font-family:var(--mono-font);font-size:9px;color:var(--muted);margin-top:13px;text-transform:uppercase;letter-spacing:.9px}.empty{padding:46px 24px;text-align:center;border:1px dashed rgba(255,255,255,.24);background:rgba(255,255,255,.04);border-radius:18px;grid-column:1/-1}.empty>svg{margin:0 auto 15px;width:30px;height:30px;color:var(--muted)}.empty p{color:var(--muted);margin:8px auto 18px;max-width:420px;font-size:13px}.connection-grid,.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.connection-card,.room-card,.panel{background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:var(--shadow)}.brand-logo{height:48px;width:48px;display:grid;place-items:center;background:rgba(90,150,220,.18);color:#8ec0ee;border-radius:13px;margin-bottom:22px;font-size:23px;font-weight:700}.brand-logo.lsc{background:var(--soft-accent);color:#84cee2;font-size:15px}.brand-logo.switchbot{background:rgba(214,93,85,.18);color:#e2897c;font-size:16px}.connection-card p{font-size:12px;color:var(--muted);margin:10px 0;min-height:55px}.status-label{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.13);padding:4px 8px;border-radius:6px;font-size:10px;color:var(--muted);margin-bottom:18px}.connection-card .button{width:100%}.panel{margin-top:22px}.panel p{font-size:13px;color:var(--muted);margin:9px 0;line-height:1.8}.room-card{position:relative}.room-card>.stat-icon{margin-bottom:18px}.room-card p{color:var(--muted);font-size:12px;margin:5px 0 14px}.room-card .room-edit{position:absolute;right:18px;top:18px}.settings-layout{max-width:740px}.field{display:block;margin:18px 0;color:var(--muted);font-size:12px;font-weight:600}.field input,.field select{display:block;width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.12);border-radius:9px;padding:11px 12px;color:var(--text);margin-top:7px;font-weight:400}.field select option{background:#14181b;color:var(--text)}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:17px 0}.setting-row p{margin:3px 0}.setting-actions{display:flex;gap:10px;flex-wrap:wrap}.notice{background:rgba(255,255,255,.11);border-radius:9px;padding:13px 15px;color:var(--muted);font-size:12px;margin:16px 0}.scene-action{display:grid;grid-template-columns:1fr 110px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.scene-action small{display:block;color:var(--muted)}.scene-action select{border:1px solid var(--line);padding:7px;border-radius:6px;background:rgba(255,255,255,.12)}.scene-full{position:relative;background:rgba(255,255,255,.12);border:1px solid var(--line);padding:23px;border-radius:18px}.scene-full h3{margin:13px 0 5px}.scene-full p{color:var(--muted);font-size:12px;margin-bottom:20px}.scene-full .delete-scene{position:absolute;right:18px;top:18px}.scene-full .button{width:100%}.check-row{display:flex;align-items:center;gap:8px;font-size:12px;margin:15px 0}.check-row input{accent-color:var(--accent)}.danger{color:#e2897c;border-color:rgba(226,137,124,.35)}.wrap{overflow-wrap:anywhere}footer{max-width:1420px;margin:0 auto;padding:25px 44px 30px;display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}dialog{width:min(490px,calc(100vw - 32px));background:rgba(20,24,27,.86);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border:1px solid var(--line);border-radius:22px;padding:25px;color:var(--text);box-shadow:0 24px 80px rgba(0,0,0,.6);max-height:90vh;overflow:auto}dialog::backdrop{background:rgba(4,5,6,.6);backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.dialog-copy{font-size:13px;color:var(--muted);line-height:1.8;margin-top:18px}.dialog-copy ul{padding-left:20px}#toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translate(-50%,25px);background:rgba(22,26,29,.9);backdrop-filter:blur(20px) saturate(160%);color:#fff;padding:13px 22px;border-radius:11px;box-shadow:0 8px 25px rgba(0,0,0,.4);opacity:0;pointer-events:none;z-index:40;transition:.2s;font-size:13px;max-width:90vw;border:1px solid var(--line)}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){main{padding-top:45px}.hero{min-height:250px}.house-art{right:60px;width:360px;height:260px}.device-card{padding:23px}}
@media(max-width:1150px){.sidebar{width:205px;padding:26px 14px}.app-shell{margin-left:205px}main{padding:28px}.topbar{padding:0 28px}.hero-text{width:65%}.house-art{right:-25px;width:255px}.device-grid{grid-template-columns:repeat(2,1fr)}.scene-card{gap:8px;padding:13px}.scene-symbol{width:32px;height:32px;flex:none}.connection-grid{grid-template-columns:1fr}.connection-card p{min-height:0}.rooms-grid{grid-template-columns:repeat(2,1fr)}footer{padding:25px 28px}.local-note{display:none}}
.pin-screen{min-height:82vh;display:flex;align-items:center;justify-content:center;padding:20px}
.pin-card{width:100%;max-width:320px;text-align:center;background:rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--line);border-radius:18px;padding:32px 26px;box-shadow:var(--shadow)}
.pin-lock{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;background:var(--soft-accent);color:#84cee2;display:grid;place-items:center}
.pin-lock svg{width:24px;height:24px}
.pin-card h2{margin-bottom:8px}
.pin-card>p{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:22px}
.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:8px}
.pin-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);background:transparent;transition:background .12s,border-color .12s,transform .12s}
.pin-dot.filled{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.pin-shake{animation:pin-shake .4s}
@keyframes pin-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
#login-error{min-height:16px;margin:12px 0}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.pin-key{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.13);backdrop-filter:blur(14px) saturate(150%);font-size:22px;font-weight:600;color:var(--text);display:grid;place-items:center}
.pin-key:hover:not(:disabled){background:rgba(255,255,255,.1)}
.pin-key:active:not(:disabled){background:var(--soft-accent)}
.pin-key-ghost{background:transparent;border-color:transparent;font-size:18px;color:var(--muted)}
.pin-key-ghost:hover:not(:disabled){background:rgba(255,255,255,.06)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Maison — premium liquid-glass visual system */
:root{--bg:#0d1113;--paper:rgba(240,248,250,.08);--text:#f4fbfa;--muted:#a6b6b3;--line:rgba(235,247,250,.16);--accent:#51b8d4;--soft-accent:rgba(81,184,212,.18);--orange:#ffbd86;--accent-ink:#051f26;--shadow:0 22px 55px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.2) inset}
body{min-height:100vh;background:radial-gradient(1100px 680px at -8% -14%,rgba(81,184,212,.22),transparent 58%),radial-gradient(900px 700px at 108% 3%,rgba(81,184,212,.1),transparent 61%),radial-gradient(820px 590px at 57% 110%,rgba(255,189,134,.12),transparent 64%),linear-gradient(145deg,#0b1113 0%,#0e1517 47%,#131a1e 100%);font-family:var(--body-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif);letter-spacing:-.01em;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;opacity:.7;animation:liquid-drift 16s ease-in-out infinite alternate}body::before{width:43vw;height:43vw;right:-18vw;top:28vh;background:radial-gradient(circle at 35% 35%,rgba(81,184,212,.16),rgba(81,184,212,0) 66%)}body::after{width:38vw;height:38vw;left:10vw;bottom:-22vw;background:radial-gradient(circle,rgba(255,189,134,.14),transparent 68%);animation-delay:-7s}@keyframes liquid-drift{to{transform:translate3d(-2.5vw,-2vh,0) scale(1.07)}}
.sidebar{width:270px;margin:14px 0 14px 14px;inset:0 auto 0 0;height:calc(100vh - 28px);padding:25px 16px;border:1px solid rgba(235,247,250,.16);border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(199,228,236,.05));box-shadow:var(--shadow),0 30px 70px rgba(0,0,0,.23);backdrop-filter:blur(34px) saturate(175%);-webkit-backdrop-filter:blur(34px) saturate(175%)}
.brand{padding:0 10px;font-size:30px}.brand-symbol{width:42px;height:42px;box-shadow:0 10px 25px rgba(45,125,147,.28)}.home-label{margin-top:29px;border-radius:15px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}.nav-caption{margin-top:27px}.nav-item{position:relative;border-radius:14px;padding:12px;color:#a8b8b5;transition:background .2s ease,color .2s ease,transform .2s ease}.nav-item:hover{background:rgba(255,255,255,.12);color:#f4fbfa;transform:translateX(2px)}.nav-item.active{background:linear-gradient(105deg,rgba(117,204,228,.28),rgba(148,214,232,.09));color:#eafaff;box-shadow:inset 0 1px rgba(255,255,255,.2),0 8px 20px rgba(18,76,92,.18)}.nav-item.active::before{content:"";width:4px;height:19px;border-radius:8px;background:#6ccee9;box-shadow:0 0 14px rgba(108,206,233,.8);margin-left:-5px}.avatar{width:38px;height:38px;background:linear-gradient(145deg,rgba(255,213,175,.8),rgba(224,148,165,.78));color:#442b33}
.app-shell{margin-left:298px}.topbar{height:84px;margin:14px 14px 0 0;padding:0 35px;border:1px solid rgba(237,251,255,.14);border-radius:23px;background:rgba(230,244,248,.08);box-shadow:0 15px 45px rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.13) inset;backdrop-filter:blur(30px) saturate(175%);-webkit-backdrop-filter:blur(30px) saturate(175%)}.local-pill{padding:7px 11px;border:1px solid rgba(178,228,242,.2);border-radius:999px;background:rgba(117,204,228,.12);color:#c7ecf6}.chip-emoji{font-size:20px;line-height:1;display:inline-flex;align-items:center;filter:saturate(.9)}.icon-button{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.09);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 8px 18px rgba(0,0,0,.12);transition:transform .2s ease,background .2s ease}.icon-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
main{max-width:1460px;padding:44px 38px 26px}.page-title{margin-bottom:31px}.eyebrow{color:#79c6db;letter-spacing:2px}.subtitle{font-size:14px}h1{font-size:42px;font-weight:600;letter-spacing:-.02em;font-family:var(--display-font,inherit)}.button{border-radius:14px;padding:11px 17px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.button:hover{transform:translateY(-2px)}.primary{border-color:rgba(227,246,251,.45);background:linear-gradient(135deg,#dcf5fc,#8cd4e8 48%,#1c748d);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 12px 24px rgba(52,163,193,.22)}.secondary{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 10px 24px rgba(0,0,0,.1)}
.hero,.stat,.scene-card,.device-card,.connection-card,.room-card,.panel,.account-card,.camera-panel{border-color:rgba(235,247,250,.16);background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(209,232,239,.05));box-shadow:var(--shadow);backdrop-filter:blur(27px) saturate(170%);-webkit-backdrop-filter:blur(27px) saturate(170%)}.hero{min-height:258px;border-radius:25px;background:linear-gradient(130deg,rgba(178,232,247,.18),rgba(178,211,255,.10) 56%,rgba(255,205,168,.08));padding:34px 38px}.hero::before{content:"";position:absolute;width:260px;height:260px;right:90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 67%)}.hero h2{font-size:34px}.stats{gap:18px}.stat{border-radius:18px;padding:19px}.stat,.device-card,.room-card,.connection-card,.account-card{transition:transform .22s ease,border-color .22s ease}.stat:hover,.device-card:hover,.room-card:hover,.connection-card:hover,.account-card:hover{border-color:rgba(179,224,236,.32);transform:translateY(-3px)}.stat-icon,.device-symbol,.scene-symbol{border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.18) inset}.scene-card{border-radius:18px}.device-card{border-radius:20px}.device-card.on{background:linear-gradient(145deg,rgba(148,214,232,.22),rgba(107,198,223,.08));border-color:rgba(138,212,232,.4)}.toggle{width:43px;height:26px;padding:3px}.toggle span{width:20px;height:20px}.toggle[aria-checked="true"]{background:linear-gradient(100deg,#3aaecf,#b7e9f7)}.toggle[aria-checked="true"] span{transform:translateX(17px)}.tab{border-radius:999px;padding:9px 15px}.tab.active{background:linear-gradient(135deg,#d2f0f8,#51b8d4);box-shadow:0 6px 16px rgba(52,155,183,.22)}.search{border-radius:13px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.connection-card,.room-card,.panel,.account-card{border-radius:21px}.brand-logo{border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.18) inset}.camera-panel{border-radius:23px}.camera-panel-heading{padding:22px 25px}.camera-stage{background:radial-gradient(circle at 25% 18%,rgba(117,208,233,.1),transparent 36%),#0a1012}.camera-panel-footer{background:rgba(255,255,255,.03)}.live-indicator{border-radius:999px;background:rgba(190,55,50,.85);border:1px solid rgba(255,205,195,.3);backdrop-filter:blur(12px)}.field input,.field select{border-radius:13px;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09);padding:12px 13px}dialog{border-radius:26px;border-color:rgba(235,247,250,.22);background:linear-gradient(145deg,rgba(22,30,32,.88),rgba(14,20,24,.84));box-shadow:0 30px 100px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.2) inset}dialog::backdrop{background:rgba(4,8,8,.5);backdrop-filter:blur(13px)}
@media(max-width:1200px){.sidebar{width:220px}.app-shell{margin-left:248px}}