:root{--ink:#e9edf5;--muted:#8f99ad;--bg:#10151f;--panel:#19202d;--panel-soft:#202837;--line:#2b3547;--accent:#d0ff67;--warm:#ffc46b;--good:#6cebb5}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hidden{display:none!important}
button{font:inherit;cursor:pointer}
.pairing-screen{min-height:100svh;display:grid;place-items:center;padding:28px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 18%,#263449 0,transparent 31%),radial-gradient(circle at 20% 85%,#202d37 0,transparent 30%),var(--bg)}
.pairing-screen:before{content:"";position:absolute;inset:0;opacity:.25;background-image:linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 70%,transparent)}
.brand{letter-spacing:.14em;font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.brand-dot{width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 22px #d0ff6780}
.pairing-screen>.brand{position:absolute;top:28px;left:38px}
.pairing-card{z-index:1;width:min(100%,450px);text-align:center;padding:28px 26px;border:1px solid #ffffff17;border-radius:28px;background:#151c28cf;box-shadow:0 28px 90px #00000054;backdrop-filter:blur(14px)}
.eyebrow,.module-label{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--muted)}
h1{font-size:clamp(34px,4.5vw,56px);line-height:1;letter-spacing:-.06em;margin:13px 0 15px}
.pairing-card h1{font-size:38px}
.lead{color:#b8c1d0;font-size:15px;line-height:1.55;margin:0 auto;max-width:340px}
.qr-wrap{width:218px;height:218px;background:#f7f9fc;border-radius:18px;padding:17px;margin:26px auto 13px;display:grid;place-items:center}
.qr-corners{width:100%;height:100%;background:repeating-linear-gradient(0deg,#10151f 0 8px,transparent 8px 13px),repeating-linear-gradient(90deg,#10151f 0 6px,transparent 6px 12px);position:relative;isolation:isolate}
.qr-corners:before,.qr-corners:after{content:"";position:absolute;background:#10151f;width:42px;height:42px;border:7px solid #f7f9fc;box-shadow:0 0 0 7px #10151f}
.qr-corners:before{left:0;top:0}
.qr-corners:after{right:0;bottom:0}
.qr-mark{position:absolute;color:#f7f9fc;background:#10151f;border-radius:8px;width:35px;height:35px;display:grid;place-items:center;font-weight:900;font-size:19px}
.pairing-status{font-size:13px;color:#bdc5d2;display:flex;align-items:center;justify-content:center;gap:7px}
.pulse,.online i,.network-state i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--good);box-shadow:0 0 0 4px #6cebb522}
.text-button,.ghost,.footer-link{border:0;background:transparent;color:var(--accent);font-size:13px;padding:10px}
.divider{height:1px;background:var(--line);margin:17px 0;position:relative}
.divider span{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#151c28;padding:0 9px;color:var(--muted);font-size:12px}
.primary-button,.secondary-button{width:100%;border:0;border-radius:13px;padding:14px;background:var(--accent);color:#16200a;font-weight:800}
.fine-print{color:#758095;font-size:11px;line-height:1.45;margin:15px 10px 0}
.support{position:absolute;bottom:22px;color:#718095;font-size:12px;z-index:1}
.dashboard{min-height:100svh;background:radial-gradient(circle at 76% 0,#25334b 0,transparent 27%),var(--bg)}
.topbar,.dashboard-footer{height:72px;border-bottom:1px solid var(--line);padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand-button{border:0;background:transparent;color:var(--ink);padding:9px 0}
.topbar-center{display:flex;align-items:center;gap:18px;font-size:14px;color:#c6cfdd}
.online{font-size:12px;color:var(--good);display:flex;gap:7px;align-items:center}
.topbar-actions{display:flex;gap:10px;align-items:center}
.icon-button,.avatar{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:#dde3ee}
.avatar{border:0;background:#826dd3;font-weight:800}
.dashboard-content{width:min(1380px,100%);padding:37px clamp(20px,4vw,64px) 30px;margin:auto}
.hero{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:29px}
.date{color:var(--muted);font-size:14px;margin:0 0 5px}
.hero h1{font-size:66px;margin:0;font-variant-numeric:tabular-nums}
.hero-weather{display:flex;align-items:center;gap:11px;color:#bbc4d1}
.hero-weather strong{font-size:27px}
.weather-icon{color:var(--warm);font-size:28px}
.room-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:19px}
.tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:9px 14px;border-radius:9px;font-size:14px;white-space:nowrap}
.tab.active{color:#17200d;background:var(--accent);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:15px}
.module{border:1px solid #ffffff0d;border-radius:19px;background:linear-gradient(145deg,#202938,#151b27);padding:20px;min-height:185px}
.module:hover{border-color:#ffffff26}
.module-top{display:flex;justify-content:space-between;align-items:center}
.add-module{border:0;color:var(--accent);background:transparent;font-size:21px}
.wide{grid-column:span 5}
.scene-module{grid-column:span 7}
.room-module{grid-column:span 5}
.security-module{grid-column:span 3}
.network-module{grid-column:span 6}
.agenda-module{grid-column:span 3}
.weather-content{display:flex;justify-content:space-between;align-items:end;margin-top:18px}
.weather-current{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px}
.weather-current .large{grid-row:span 2;font-size:53px}
.weather-current strong{font-size:37px;letter-spacing:-.05em}
.weather-current span:last-child{color:var(--muted);font-size:12px}
.forecast{display:flex;gap:19px}
.forecast span{display:grid;gap:4px;color:var(--muted);font-size:11px}
.forecast b{color:var(--ink);font-size:14px}
.forecast i{font-style:normal;color:var(--warm);font-size:19px}
.scenes{display:flex;gap:10px;margin-top:21px}
.scene{border:1px solid var(--line);background:#131a25;color:#c8d0dd;padding:13px 12px;border-radius:12px;display:grid;gap:6px;text-align:left;flex:1;font-size:12px}
.scene span{color:var(--warm);font-size:20px}
.active-scene{border-color:#d0ff675e;background:#29371a;color:#e8ffbd}
.room-main{display:flex;align-items:center;gap:13px;margin-top:34px}
.room-symbol{width:42px;height:42px;border-radius:13px;background:#4c3a1d;color:var(--warm);display:grid;place-items:center;font-size:21px}
.room-main div{display:grid;gap:3px;flex:1}
.room-main strong{font-size:15px}
.room-main small,.room-footer{color:var(--muted);font-size:12px}
.switch{width:47px;height:28px;border:0;border-radius:99px;background:#455165;padding:3px}
.switch i{height:22px;width:22px;border-radius:50%;display:block;background:#fff;transition:transform .2s}
.switch.on{background:var(--accent)}
.switch.on i{transform:translateX(19px)}
.room-footer{border-top:1px solid var(--line);margin-top:24px;padding-top:15px;display:flex;justify-content:space-between}
.room-footer span:last-child{color:var(--good)}
.shield{color:var(--good);font-size:19px}
.security-state{display:grid;gap:7px;margin:34px 0 20px}
.security-state strong{font-size:18px}
.security-state span{color:var(--muted);font-size:12px}
.secondary-button{border:1px solid #ffffff28;background:transparent;color:#dbe2ef;padding:10px;font-size:13px}
.network-state{color:var(--good);font-size:12px;display:flex;gap:6px;align-items:center}
.network-numbers{display:flex;gap:12px;margin-top:29px}
.network-numbers div{display:grid;gap:2px;min-width:0;flex:1}
.network-numbers span,.network-numbers small{font-size:11px;color:var(--muted)}
.network-numbers strong{font-size:25px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.network-footer{border-top:1px solid var(--line);margin-top:20px;padding-top:11px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}
.agenda{display:grid;gap:18px;margin-top:30px}
.agenda div{display:grid;gap:3px}
.agenda b{font-size:12px;color:var(--accent)}
.agenda span{font-size:14px}
.dashboard-footer{border-top:1px solid var(--line);border-bottom:0;height:54px;color:var(--muted);font-size:12px}
.dashboard-footer b{color:var(--good)}
.toast{position:fixed;z-index:10;bottom:30px;left:50%;transform:translateX(-50%);background:#eaf1ff;color:#111927;border-radius:10px;padding:12px 18px;font-size:13px;font-weight:700;box-shadow:0 10px 35px #0005}
@media(max-width:950px){.wide,.scene-module,.room-module,.security-module,.network-module,.agenda-module{grid-column:span 6}
.grid{gap:12px}
.hero h1{font-size:55px}
}
@media(max-width:620px){.pairing-screen>.brand{left:24px;top:22px}
.pairing-screen{display:block;min-height:100dvh;padding:74px 16px 28px;overflow:auto}
.pairing-card{margin:0 auto;padding:25px 18px}
.pairing-screen .support{position:static;margin:16px auto 0;text-align:center}
.topbar{height:60px;padding:0 16px}
.topbar-center{display:none}
.dashboard-content{padding:26px 16px}
.hero h1{font-size:52px}
.hero-weather span:last-child{display:none}
.grid{grid-template-columns:1fr}
.wide,.scene-module,.room-module,.security-module,.network-module,.agenda-module{grid-column:1}
.forecast{gap:13px}
.module{min-height:0}
.hero{margin-bottom:22px}
.dashboard-footer{padding:0 16px}
.qr-wrap{width:204px;height:204px}
}
.touch-mode .module{padding:24px}
.touch-mode .tab,.touch-mode .icon-button,.touch-mode .scene,.touch-mode .ghost,.touch-mode .secondary-button{min-height:48px}
.touch-mode .switch{transform:scale(1.18);margin:3px}
.qr-code{display:block;width:100%;height:100%;padding:5px;background:#fff;border-radius:10px}
.demo-caption{margin:-5px 0 8px;color:var(--accent);font-size:11px;font-weight:700}
.demo-top{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em}
.demo-banner{margin:0 0 20px;padding:10px 13px;border:1px solid #d0ff6745;border-radius:11px;background:#2a351a;color:#dcebbd;font-size:12px}
.demo-banner b{color:var(--accent);letter-spacing:.1em;margin-right:7px}
.touch-mode .icon-button,.touch-mode .avatar{width:48px;height:48px}
.touch-mode .switch{width:52px;height:32px}
.touch-mode .switch i{height:26px;width:26px}
.touch-mode .switch.on i{transform:translateX(20px)}
.room-tabs{position:relative}
.room-tabs:after{content:"";position:sticky;right:0;min-width:28px;margin-left:-28px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg))}
.toast{top:84px;bottom:auto;left:auto;right:28px;transform:none;max-width:min(390px,calc(100vw - 36px))}
.unlink-dialog{width:min(430px,calc(100vw - 32px));border:1px solid var(--line);border-radius:19px;padding:0;background:var(--panel);color:var(--ink);box-shadow:0 30px 100px #000a}
.unlink-dialog::backdrop{background:#050912b8}
.unlink-dialog form{padding:25px}
.unlink-dialog h2{margin:10px 0;font-size:25px;letter-spacing:-.04em}
.unlink-dialog p:not(.eyebrow){color:#b4bece;font-size:14px;line-height:1.55}
.dialog-actions{display:flex;gap:10px;margin-top:22px}
.dialog-actions>*{flex:1}
.pair-demo-page{min-height:100svh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 75% 18%,#263449 0,transparent 31%),var(--bg)}
.pair-demo-card{width:min(100%,510px);padding:32px;border:1px solid #ffffff17;border-radius:24px;background:#151c28}
.pair-demo-card h1{font-size:40px}
.pair-demo-card>p:not(.eyebrow){color:#bdc5d2;line-height:1.55}
.pair-demo-link{display:block;margin-top:24px;text-align:center;text-decoration:none}
@media (min-width:951px) and (max-height:940px){.topbar{height:60px}.dashboard-content{padding-top:12px;padding-bottom:10px}.demo-banner{display:none}.hero{margin-bottom:12px}.hero h1{font-size:50px}.room-tabs{margin-bottom:10px}.module{min-height:145px;padding:15px}.weather-content{margin-top:8px}.room-main{margin-top:17px}.room-footer{margin-top:13px}.security-state{margin:16px 0 11px}.network-numbers{margin-top:14px}.agenda{margin-top:15px}.dashboard-footer{height:42px}}
@media(max-width:620px){.toast{top:70px;right:16px}.demo-banner{margin-bottom:16px;line-height:1.45}.touch-mode .module{padding:20px}.touch-mode .icon-button,.touch-mode .avatar{width:44px;height:44px}.touch-mode .switch{transform:none;margin:0}.room-tabs:after{min-width:24px;margin-left:-24px}.dialog-actions{flex-direction:column}}