*{box-sizing:border-box}body{margin:0;background:#030911;color:#f4f7fc;font:14px Arial,sans-serif}body:before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 60% 10%,#123b5b,#030911 60%);opacity:.7;z-index:-1}.app{display:flex;min-height:100vh;padding:9px}aside{width:205px;background:#050b13e8;border:1px solid #193247;border-radius:8px;padding:30px 15px;display:flex;flex-direction:column}.logo{display:flex;gap:12px;border-bottom:1px solid #1b3349;padding:0 10px 28px;font-size:28px;color:#ffe18e}.logo b{color:#fff;font-size:20px;letter-spacing:2px}.logo small{display:block;color:#9ba8b8;font-size:9px;letter-spacing:2px}nav{display:grid;gap:8px;margin-top:26px}button{font:inherit;color:inherit;cursor:pointer}nav button,.settings{background:transparent;border:1px solid transparent;text-align:left;padding:11px 12px;border-radius:9px;font-size:20px;color:#e6edf4}nav button span,.settings span{font-size:14px;margin-left:10px}nav button:hover,nav button.active{background:#102337;border-left:3px solid #1bc5ff}.settings{margin-top:auto}main{flex:1;padding:25px 18px;max-width:1450px;margin:auto}header{display:flex;align-items:start;gap:25px}time{font-size:65px;font-weight:300}header p{margin:0;font-size:18px;text-transform:capitalize}.connection{padding:10px 14px;border:1px solid #d99f3e;color:#ffd789;background:#251a08;border-radius:15px}.connection.ok{border-color:#16d6a0;color:#7ff6d2;background:#07291f}.connection.demo{border-color:#9c7bff;color:#d3c4ff;background:#18102e}.metrics{display:flex;gap:10px;margin-left:auto}.metrics div{background:#091522dd;border:1px solid #20364a;border-radius:13px;padding:14px 18px;color:#d2dce6}.metrics strong{display:block;font-size:18px;color:#fff;margin-top:5px}.hero{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:15px;margin-top:20px}.mascot{min-height:310px;position:relative;padding:25px}.mascot img{width:155px;height:155px;object-fit:contain;margin:110px 0 0 25px;filter:drop-shadow(0 0 22px #ffbb6977)}.bubble{position:absolute;top:25px;right:0;background:#06182b;border:2px solid #2bbcff;border-radius:35px;padding:18px 25px;box-shadow:0 0 25px #00aaff55}.bubble b{font-size:24px}.bubble span{display:block;line-height:1.4;margin-top:8px}.mic{position:absolute;left:90px;bottom:5px;border:4px solid #399fff;border-radius:50%;width:70px;height:70px;background:#071827;color:#f5a3ff;font-size:25px}.mic small{font-size:18px}.chat{display:none;position:absolute;left:165px;bottom:0;width:250px;padding:12px;background:#081827;border:1px solid #2bbcff;border-radius:14px;z-index:2}.chat.open{display:block}.chat p{font-size:12px}.chat input{width:160px;padding:8px}.chat button,.secondary{padding:8px 10px;background:#0d3650;border:1px solid #2bbcff;border-radius:8px}.panel,.rooms,.devices{background:#07121eea;border:1px solid #203a50;border-radius:15px;padding:16px;box-shadow:0 10px 35px #0007}h2{font-size:20px;margin:0 0 12px}h2 span{float:right;color:#b8c4cf}.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.scene-grid button{min-height:100px;background:#091725;border:1px solid #29465f;border-radius:12px;font-size:26px}.scene-grid button b,.scene-grid small{display:block;font-size:15px;margin-top:7px}.scene-grid small{font-size:11px;color:#a7b4c1}.status-panel{line-height:1.7}.status-panel .secondary{margin-top:18px}.rooms{margin-top:15px}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.room-grid button{text-align:left;padding:15px;background:linear-gradient(135deg,#1d2a2f,#07131e);border:1px solid #345066;border-radius:12px}.room-grid b,.room-grid strong,.room-grid small{display:block}.room-grid strong{color:#ffd36f;font-size:18px;margin:12px 0 4px}.room-grid small,.entity small{color:#aab9c8}.devices{margin-top:15px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title input{margin-left:8px;padding:9px 12px;background:#0b1b29;border:1px solid #29465f;border-radius:8px;color:white}.entity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.entity{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #24425b;border-radius:10px;background:#091725}.entity-icon{font-size:24px}.entity b,.entity small{display:block;text-transform:capitalize}.entity small{font-size:11px;margin-top:4px}.state{color:#aab9c8;font-size:13px}.state.on{color:#72f1c5}.toggle{grid-column:2/4;justify-self:start;background:#102b3e;border:1px solid #2b6380;border-radius:7px;padding:5px 8px}.empty{color:#aab9c8}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#071a2b;border:1px solid #18bfff;padding:13px 20px;border-radius:10px;opacity:0;transition:.2s}.show{opacity:1!important}@media(max-width:1000px){aside{width:170px}.metrics{display:none}.hero{grid-template-columns:1fr 1fr}.mascot{grid-column:span 2}.room-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.app{padding:0}aside{width:55px;padding:15px 5px}.logo{padding:0 5px 20px}.logo b{display:none}.logo small,nav button span,.settings span{display:none}nav button,.settings{padding:10px;text-align:center}main{padding:14px 8px}time{font-size:38px}.connection{font-size:11px;padding:7px}.hero{grid-template-columns:1fr}.mascot{grid-column:auto;min-height:290px}.section-title{display:block}.section-title input{width:70%}}
header .header-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.top-reload{padding:10px 13px;border:1px solid #2bbcff;border-radius:12px;background:#0d3650;color:#eaf8ff;font-weight:600}.top-reload:hover{background:#145879}.top-reload:first-letter{font-size:18px}@media(max-width:650px){.top-reload span{display:none}.top-reload{padding:8px 10px}}