:root{color:#f4f8fb;--bg:#04111f;--bg-soft:#071a2c;--glass:#081b2ea8;--glass-heavy:#071727db;--line:#ffffff24;--line-strong:#ffffff3d;--text:#f4f8fb;--muted:#9db3c7;--soft:#72899f;--orange:#f39635;--orange-soft:#ffb25d;--blue:#52c8fa;--cyan:#72defc;--green:#4be0a1;--red:#ff7474;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#04111f;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 12% 0,#2991d23d,#0000 30%),radial-gradient(circle at 94% 20%,#f396351a,#0000 24%),linear-gradient(155deg,#03101d,#061829 52%,#04111f);min-width:320px;margin:0}button,input{font:inherit}button{color:inherit}.app-shell{z-index:1;width:min(1500px,100vw - 28px);min-height:100vh;margin:0 auto;padding:14px 0 30px;position:relative}.ambient{pointer-events:none;filter:blur(30px);z-index:-1;border-radius:50%;position:fixed}.ambient-blue{background:#37adeb29;width:480px;height:480px;top:-160px;left:-180px}.ambient-orange{background:#f3963514;width:360px;height:360px;top:180px;right:-150px}.glass{background:linear-gradient(155deg, #ffffff13, #ffffff05), var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(17px)saturate(130%);backdrop-filter:blur(17px)saturate(130%);box-shadow:0 24px 65px #00000047,inset 0 1px #ffffff1a}.top-header{border-radius:24px;justify-content:space-between;align-items:center;gap:20px;min-height:74px;padding:13px 18px;display:flex}.brand-area{align-items:center;gap:16px;display:flex}.brand-area img{object-fit:contain;max-width:220px;height:43px}.product-name{border-left:1px solid var(--line);flex-direction:column;padding-left:16px;display:flex}.product-name strong{letter-spacing:.13em;font-size:1.35rem;font-weight:950}.product-name span{color:var(--muted);margin-top:2px;font-size:.82rem}.header-health{align-items:center;gap:9px;display:flex}.header-health small{color:var(--soft);margin-left:5px}.health-badge{border:1px solid var(--line);text-transform:uppercase;letter-spacing:.07em;border-radius:999px;align-items:center;gap:7px;min-height:30px;padding:6px 11px;font-size:.72rem;font-weight:850;display:inline-flex}.health-badge>span{background:currentColor;border-radius:50%;width:7px;height:7px;box-shadow:0 0 10px}.health-badge.online{color:#8cf2bd;background:#4be0a114}.health-badge.warning{color:#ffd098;background:#f3963517}.health-badge.offline{color:#ffabab;background:#ff747417}.main-nav{z-index:20;border-radius:18px;gap:4px;width:fit-content;margin:14px auto 18px;padding:6px;display:flex;position:sticky;top:10px}.main-nav button{min-width:118px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:13px;justify-content:center;align-items:center;gap:9px;padding:10px 15px;font-weight:760;transition:background .18s,color .18s,transform .18s;display:flex}.main-nav button:hover{color:#fff}.main-nav button.active{color:#fff;background:linear-gradient(#f396352e,#f3963514);box-shadow:inset 0 0 0 1px #ffb25d40,0 8px 24px #0000002e}.main-nav button.active svg{color:var(--orange-soft)}.page-content{min-height:600px}.tab-content{flex-direction:column;gap:16px;animation:.24s tab-in;display:flex}@keyframes tab-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.overview-top{grid-template-columns:minmax(0,1.6fr) minmax(390px,.9fr);gap:16px;display:grid}.camera-card,.section-card,.compact-status-card,.relay-overview,.automation-card{border-radius:25px}.camera-card{padding:16px}.section-heading{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;display:flex}.section-heading.compact{margin-bottom:12px}.section-heading h2{letter-spacing:-.025em;margin:3px 0 0;font-size:1.24rem}.eyebrow{color:#cbe0f0;text-transform:uppercase;letter-spacing:.11em;align-items:center;gap:7px;font-size:.7rem;font-weight:900;display:flex}.live-pill,.read-only-pill{color:#ffd29d;letter-spacing:.08em;text-transform:uppercase;background:#f396351a;border:1px solid #f3963538;border-radius:999px;align-items:center;gap:7px;padding:7px 11px;font-size:.7rem;font-weight:900;display:inline-flex}.live-pill>span{background:var(--orange-soft);border-radius:50%;width:7px;height:7px;box-shadow:0 0 11px #f39635a6}.camera-frame{aspect-ratio:16/9;border:1px solid var(--line);background:#02080d;border-radius:19px;width:100%;max-height:520px;position:relative;overflow:hidden}.camera-frame iframe{border:0;width:100%;height:100%;min-height:100%;display:block}.camera-offline{aspect-ratio:16/9;border:1px dashed var(--line-strong);text-align:center;color:var(--muted);background:#ffffff06;border-radius:19px;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.metric-card{border-radius:23px;flex-direction:column;align-items:center;min-width:0;padding:15px 13px;display:flex;position:relative}.metric-card-top{color:#c9deed;text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:7px;width:100%;font-size:.72rem;font-weight:850;display:flex}.metric-card-top svg{color:var(--orange-soft)}.battery-mini{width:65px;height:126px;margin:18px 0 10px;position:relative}.battery-mini-cap{background:#fff3;border-radius:5px 5px 2px 2px;width:28px;height:8px;position:absolute;top:0;left:50%;transform:translate(-50%)}.battery-mini-body{border:1px solid var(--line-strong);background:#ffffff0b;border-radius:16px;position:absolute;inset:7px 0 0;overflow:hidden}.battery-mini-fill{background:linear-gradient(180deg, #ffbc69, var(--orange));border-radius:10px;transition:height .35s;position:absolute;bottom:6px;left:6px;right:6px;box-shadow:0 0 18px #f396354d}.battery-mini-value{text-align:center;flex-direction:column;display:flex}.battery-mini-value strong{font-size:1.45rem}.battery-mini-value span{color:var(--muted);font-size:.78rem}.temp-dial{--temp-progress:180deg;background:conic-gradient(from 210deg, var(--blue) 0deg, var(--orange) var(--temp-progress), #ffffff14 var(--temp-progress), #ffffff14 360deg);border-radius:50%;width:100px;height:100px;margin:18px auto 12px;padding:8px;box-shadow:0 0 26px #52c8fa14}.temp-dial-inner{border:1px solid var(--line);background:radial-gradient(circle at 40% 28%,#ffffff17,#0000 35%),#081a2a;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.temp-dial-inner strong{font-size:1.32rem}.temp-dial-inner span{color:var(--soft);font-size:.69rem}.metric-state{text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;font-weight:850}.state-cool{color:#84ddff}.state-normal{color:#8cf2bd}.state-warm{color:#ffc27b}.state-hot{color:#f99}.compact-status-card{justify-content:space-between;align-items:center;gap:18px;padding:14px 17px;display:flex}.compact-status-main{align-items:center;gap:13px;display:flex}.status-icon,.automation-icon{width:43px;height:43px;color:var(--orange-soft);background:#f3963512;border:1px solid #f3963533;border-radius:14px;place-items:center;display:grid}.compact-status-main h3{margin:3px 0 0;font-size:1rem}.status-badges{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.relay-overview{padding:15px 17px}.relay-overview-grid,.relay-detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.relay-tile{background:#ffffff06;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:10px;min-width:0;padding:12px 13px;display:flex}.relay-dot{background:#ffffff38;border-radius:50%;flex:none;width:9px;height:9px}.relay-tile.active .relay-dot{background:var(--orange-soft);box-shadow:0 0 13px #f3963599}.relay-tile div{flex-direction:column;min-width:0;display:flex}.relay-tile strong{text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;overflow:hidden}.relay-tile div span{color:var(--soft);margin-top:2px;font-size:.75rem}.section-card{padding:17px}.system-info-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.system-info-grid>div,.reading-row,.rule-row,.admin-link-grid a{background:#ffffff06;border:1px solid #ffffff17}.system-info-grid>div{border-radius:15px;min-width:0;padding:13px}.system-info-grid span,.reading-row span{color:var(--soft);text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;display:block}.system-info-grid strong{word-break:break-word;margin-top:5px;font-size:.87rem;display:block}.web3-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.reading-list{gap:8px;display:grid}.reading-row{border-radius:14px;justify-content:space-between;align-items:center;gap:14px;min-height:47px;padding:10px 12px;display:flex}.reading-row strong{font-size:.9rem}.empty-state{text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:15px;padding:25px}.section-copy{max-width:850px;color:var(--muted);margin:0;font-size:.9rem;line-height:1.55}.automation-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.automation-card{padding:16px}.automation-title{align-items:center;gap:12px;margin-bottom:13px;display:flex}.automation-title div:last-child{flex-direction:column;display:flex}.automation-title span{color:var(--soft);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.automation-title strong{margin-top:3px}.rule-list{gap:7px;display:grid}.rule-row{border-radius:13px;justify-content:space-between;align-items:center;min-height:43px;padding:9px 11px;display:flex}.rule-row span{color:var(--muted);font-size:.84rem}.rule-row strong{color:var(--soft);font-size:.76rem}.rule-row.configured{background:#4be0a10d;border-color:#4be0a133}.rule-row.configured strong{color:#8cf2bd}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.settings-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.settings-fields label{gap:7px;display:grid}.settings-fields label span{color:var(--muted);font-size:.8rem}.settings-fields input{border:1px solid var(--line);color:#fff;background:#ffffff0a;border-radius:12px;outline:none;width:100%;padding:11px 12px}.settings-fields input:focus{border-color:#52c8fa80}.settings-note{color:var(--soft);margin:13px 0 0;font-size:.8rem;line-height:1.5}.admin-link-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:15px;display:grid}.admin-link-grid a{min-height:48px;color:var(--text);border-radius:14px;justify-content:space-between;align-items:center;padding:10px 12px;text-decoration:none;transition:background .16s,border-color .16s;display:flex}.admin-link-grid a:hover{background:#f3963512;border-color:#f3963538}.admin-link-grid svg{color:var(--orange-soft)}.error-banner{color:#fbb;background:#ff747414;border:1px solid #ff74742e;border-radius:14px;margin-bottom:13px;padding:11px 14px}.desktop-footer{color:var(--soft);justify-content:space-between;margin-top:18px;padding:0 4px;font-size:.75rem;display:flex}@media (width<=1100px){.overview-top{grid-template-columns:1fr}.system-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=760px){body{padding-bottom:82px}.app-shell{width:calc(100vw - 12px);padding-top:6px}.top-header{border-radius:19px;min-height:61px;padding:10px 12px}.brand-area{gap:9px}.brand-area img{max-width:145px;height:33px}.product-name{padding-left:9px}.product-name strong{font-size:1.02rem}.product-name span{display:none}.header-health{gap:5px}.header-health small{display:none}.health-badge{min-height:27px;padding:5px 8px;font-size:.62rem}.main-nav{z-index:100;background:linear-gradient(#0d273ff5,#05121ff7);border-radius:20px;justify-content:stretch;width:auto;margin:0;padding:6px;position:fixed;inset:auto 6px 6px}.main-nav button{border-radius:14px;flex-direction:column;flex:1;gap:3px;min-width:0;min-height:56px;padding:7px 3px}.main-nav button span{font-size:.62rem}.main-nav button svg{width:20px;height:20px}.page-content{margin-top:10px}.overview-top{gap:10px}.camera-card,.section-card,.compact-status-card,.relay-overview,.automation-card{border-radius:19px}.camera-card{padding:11px}.section-heading{margin-bottom:9px}.section-heading h2{font-size:1rem}.camera-frame{border-radius:15px}.overview-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.metric-card{border-radius:17px;padding:10px 6px}.metric-card-top{justify-content:center;gap:4px;font-size:.58rem}.metric-card-top svg{width:16px;height:16px}.battery-mini{width:46px;height:82px;margin:11px 0 7px}.battery-mini-cap{width:22px;height:6px}.battery-mini-value strong{font-size:1.08rem}.temp-dial{width:70px;height:70px;margin:11px auto 7px;padding:6px}.temp-dial-inner strong{font-size:.98rem}.metric-state{font-size:.58rem}.compact-status-card{align-items:flex-start;padding:11px}.status-icon{width:37px;height:37px}.compact-status-main h3{max-width:160px;font-size:.82rem}.status-badges{justify-items:end;display:grid}.relay-overview{padding:11px}.relay-overview-grid,.relay-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.relay-tile{border-radius:13px;padding:9px}.relay-tile strong{font-size:.75rem}.web3-columns,.automation-grid,.settings-grid{grid-template-columns:1fr;gap:10px}.section-card,.automation-card{padding:12px}.system-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.system-info-grid>div{border-radius:12px;padding:10px}.system-info-grid strong{font-size:.78rem}.reading-row{min-height:43px;padding:9px 10px}.admin-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-fields{grid-template-columns:1fr 1fr}.desktop-footer{display:none}}@media (width<=390px){.brand-area img{max-width:125px}.product-name{display:none}.metric-card-top span{font-size:.53rem}.temp-dial{width:64px;height:64px}}@media (width>=1101px){.overview-top{align-items:start}.overview-metrics{grid-template-rows:auto auto;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-self:start;gap:12px}.overview-metrics .battery-card{grid-column:1/-1;grid-template-rows:auto 1fr;grid-template-columns:88px minmax(0,1fr);align-items:center;column-gap:22px;min-height:175px;padding:15px 18px;display:grid}.overview-metrics .battery-card .metric-card-top{grid-area:1/1/auto/-1}.overview-metrics .battery-card .battery-mini{grid-area:2/1;width:58px;height:105px;margin:10px auto 0}.overview-metrics .battery-card .battery-mini-value{text-align:left;grid-area:2/2;justify-self:start;align-items:flex-start}.overview-metrics .battery-card .battery-mini-value strong{font-size:2rem;line-height:1}.overview-metrics .battery-card .battery-mini-value span{margin-top:5px;font-size:.9rem}.overview-metrics .temp-card{justify-content:flex-start;min-height:225px}.overview-metrics .temp-card .temp-dial{width:106px;height:106px;margin-top:22px}.overview-metrics .temp-card .temp-dial-inner strong{font-size:1.38rem}}.main-nav{z-index:100;background:linear-gradient(#0d273ff5,#05121ff7);width:fit-content;margin:0;position:fixed;inset:auto auto 14px 50%;transform:translate(-50%);box-shadow:0 18px 48px #00000061,inset 0 1px #ffffff1f}.page-content{margin-top:14px}.app-shell{padding-bottom:100px}@media (width>=1101px){.overview-top{grid-template-columns:minmax(0,2fr) minmax(410px,.72fr);align-items:start;gap:16px}.overview-metrics{grid-template-rows:auto auto auto;grid-template-columns:1fr;align-content:start;gap:12px;display:grid}.overview-metrics .battery-card,.overview-metrics .temp-card{grid-column:1;width:100%;min-height:0}.overview-metrics .battery-card{grid-template-rows:auto 1fr;grid-template-columns:82px minmax(0,1fr);align-items:center;column-gap:20px;min-height:158px;padding:16px 18px;display:grid}.overview-metrics .battery-card .metric-card-top{grid-area:1/1/auto/-1}.overview-metrics .battery-card .battery-mini{grid-area:2/1;width:54px;height:94px;margin:10px auto 0}.overview-metrics .battery-card .battery-mini-value{text-align:left;grid-area:2/2;justify-self:start;align-items:flex-start}.overview-metrics .battery-card .battery-mini-value strong{font-size:2rem}.overview-metrics .battery-card .battery-mini-value span{margin-top:4px;font-size:.9rem}.overview-metrics .temp-card{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 130px;align-items:center;min-height:158px;padding:16px 18px;display:grid}.overview-metrics .temp-card .metric-card-top{grid-area:1/1;justify-content:flex-start}.overview-metrics .temp-card .temp-dial{grid-area:1/2/3;width:108px;height:108px;margin:0 auto}.overview-metrics .temp-card .metric-state{grid-area:2/1;align-self:start;margin-top:14px;font-size:.8rem}.camera-frame{max-height:none}}@media (width<=760px){.app-shell{padding-bottom:88px}.page-content{margin-top:10px}.main-nav{width:auto;bottom:6px;left:6px;right:6px;transform:none}}