.smart-room-panel{--wall:#48566b;--wall-side:#344256;--floor:#5b4b45;--floor-line:#77625a;--sky-top:#263b62;--sky-bottom:#a66f68;--celestial:#f1d9af;--celestial-shadow:#f1d9af55;--celestial-x:68%;--celestial-y:26%;--blind-y:0%;--main-light:.95;--wall-light:.8;min-width:0;overflow:hidden;border:1px solid #cddaf0;border-radius:12px;background:#fff;box-shadow:0 19px 48px #162b4e14}
.room-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 23px 19px;background:#152847;color:#fff}
.room-panel-kicker{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:#8fb5f5;font-size:9px;font-weight:850;letter-spacing:.15em}
.room-panel-kicker i{width:7px;height:7px;border-radius:50%;background:#71a6ff;box-shadow:0 0 0 4px #4170ba55;animation:room-pulse 2s ease-in-out infinite}
.room-panel-head h2{margin:0 0 4px;font-size:24px;letter-spacing:-.035em}
.room-panel-head p{margin:0;color:#c5d5ee;font-size:11px;line-height:1.45}
.room-clock{display:grid;justify-items:end;flex:none;padding-left:12px}
.room-clock strong{font-family:'JetBrains Mono',monospace;font-size:17px;line-height:1.2}
.room-clock span{margin-top:5px;color:#8fb5f5;font-size:8px;font-weight:850;letter-spacing:.14em}

.room-cross-section{position:relative;height:340px;overflow:hidden;background:#d8e0ea;isolation:isolate;transition:background .8s}
.room-back-wall{position:absolute;z-index:0;inset:0 10% 24% 0;background:var(--wall);background:linear-gradient(145deg,color-mix(in srgb,var(--wall),#fff 8%),var(--wall));transition:background .8s}
.room-side-wall{position:absolute;z-index:0;top:0;right:0;width:18%;height:76%;clip-path:polygon(42% 0,100% 0,100% 100%,0 100%);background:var(--wall-side);background:linear-gradient(145deg,var(--wall-side),color-mix(in srgb,var(--wall-side),#000 12%));transition:background .8s}
.room-floor-plane{position:absolute;z-index:1;inset:69% 0 0;background:repeating-linear-gradient(102deg,var(--floor) 0 2px,var(--floor-line) 3px 58px,var(--floor) 59px 61px);clip-path:polygon(0 0,90% 0,100% 100%,0 100%);box-shadow:inset 0 3px #ffffff1f;transition:background .8s,filter .8s}
.room-floor-plane::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0d18274d,transparent 28%,transparent 72%,#0d182733);pointer-events:none}

.room-window-frame{position:absolute;z-index:2;top:31px;right:11%;width:38%;height:174px;overflow:hidden;border:8px solid #e9edf3;background:#20304c;box-shadow:0 10px 25px #111b2c42}
.room-sky{position:absolute;inset:0;background:linear-gradient(var(--sky-top),var(--sky-bottom));transition:background .8s}
.room-celestial{position:absolute;left:var(--celestial-x);top:var(--celestial-y);width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:var(--celestial);box-shadow:0 0 26px 8px var(--celestial-shadow);transition:left .8s,top .8s,background .8s,box-shadow .8s}
.skyline{position:absolute;left:-10%;width:125%;height:60px;border-radius:50% 50% 0 0;transition:background .8s}
.skyline-back{bottom:-20px;background:#536a7a;transform:rotate(-5deg)}
.skyline-front{bottom:-39px;background:#253f52;transform:rotate(8deg)}
.window-bar{position:absolute;z-index:5;background:#e9edf3;pointer-events:none}.window-bar-v{top:0;bottom:0;left:49%;width:5px}.window-bar-h{left:0;right:0;top:52%;height:5px}
.room-blind{position:absolute;z-index:4;inset:0;background:#c7d1dfeb;transform:translateY(var(--blind-y));transition:transform .75s cubic-bezier(.22,.75,.23,1),background .8s}
.room-blind span{display:block;height:16.66%;border-bottom:2px solid #8191aa;box-shadow:inset 0 2px #eef3fa}

.room-pendant{position:absolute;z-index:5;top:0;left:19%;width:110px;height:158px;pointer-events:none}
.pendant-cord{position:absolute;top:0;left:54px;width:2px;height:79px;background:#18273d}
.pendant-shade{position:absolute;z-index:2;top:70px;left:25px;width:60px;height:39px;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);background:#182b48;box-shadow:inset 0 -5px #dbe7fa}
.pendant-glow{position:absolute;z-index:1;top:78px;left:0;width:110px;height:118px;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);background:linear-gradient(#ffe4aab8,#ffd98d00);filter:blur(4px);opacity:var(--main-light);transition:opacity .8s}
.room-wall-light{position:absolute;z-index:3;top:102px;left:4.5%;width:48px;height:34px;border-radius:50%;background:#ffe1a0;box-shadow:0 0 40px 22px #ffd98d80;opacity:var(--wall-light);transition:opacity .8s}
.room-wall-light span{position:absolute;inset:8px 2px;border-radius:50%;background:#f5f7fb}
.room-picture{position:absolute;z-index:3;top:47px;left:35%;width:78px;height:92px;padding:7px;background:#dfe5ed;box-shadow:0 7px 18px #12203338;transform:rotate(-1deg)}
.room-picture span{display:block;width:100%;height:100%;background:linear-gradient(150deg,#1e56cc 0 38%,#9cb8e7 39% 62%,#192b47 63%)}

.room-sofa-visual{position:absolute;z-index:6;left:22%;bottom:43px;width:47%;height:129px;filter:drop-shadow(0 13px 12px #111b2c55)}
.sofa-back-visual{position:absolute;left:5%;right:5%;top:0;height:82px;border-radius:19px 19px 7px 7px;background:#536a88}
.sofa-seat-visual{position:absolute;left:3%;right:3%;bottom:9px;height:56px;border-radius:8px 8px 13px 13px;background:#405876;box-shadow:inset 0 8px #667e9d}
.sofa-seat-visual::after{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:2px solid #304966}
.sofa-arm-visual{position:absolute;bottom:9px;width:16%;height:63px;border-radius:12px;background:#304c6d}.sofa-arm-a{left:0}.sofa-arm-b{right:0}
.sofa-cushion{position:absolute;z-index:2;top:20px;width:54px;height:47px;border-radius:6px;background:#9db3d1;box-shadow:0 4px 8px #1a2a4433}.cushion-a{left:15%;transform:rotate(-5deg)}.cushion-b{right:15%;background:#c2cee0;transform:rotate(5deg)}
.room-table-visual{position:absolute;z-index:6;right:7%;bottom:48px;width:19%;height:54px}
.room-table-visual span{position:absolute;top:5px;left:0;width:100%;height:11px;border-radius:50%;background:#273b59;box-shadow:0 4px #18283f}
.room-table-visual::before,.room-table-visual::after{content:'';position:absolute;top:15px;width:4px;height:38px;background:#17283f}.room-table-visual::before{left:23%}.room-table-visual::after{right:23%}
.room-table-visual i{position:absolute;z-index:2;top:-7px;left:42%;width:18px;height:16px;border-radius:2px 2px 6px 6px;background:#f2f5fa}
.room-plant-visual{position:absolute;z-index:5;right:1.5%;bottom:63px;width:58px;height:107px}
.plant-pot-visual{position:absolute;bottom:0;left:12px;width:39px;height:32px;clip-path:polygon(0 0,100% 0,84% 100%,16% 100%);background:#2b4264}
.plant-stem{position:absolute;bottom:26px;left:28px;width:14px;height:66px;border-radius:100% 0 100% 0;background:#7891b5;transform-origin:bottom}.stem-a{transform:rotate(-33deg)}.stem-b{height:78px;transform:rotate(6deg)}.stem-c{height:59px;transform:rotate(43deg)}
.room-rug-visual{position:absolute;z-index:2;left:17%;right:5%;bottom:5px;height:51px;border-radius:50%;background:#b6c5db5e;border:1px solid #d9e3f055}

.room-state{position:absolute;z-index:10;display:flex;align-items:center;gap:8px;min-width:116px;padding:8px 10px;border:1px solid #d5dfed;border-radius:6px;background:#fffffff0;color:#17243b;box-shadow:0 7px 20px #1429472b;backdrop-filter:blur(7px)}
.room-state>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:5px;background:#e8f0fc;color:#1e56cc;font-size:11px;font-weight:850}
.room-state div{display:grid}.room-state small{color:#70809a;font-size:7px;font-weight:850;letter-spacing:.1em}.room-state strong{margin-top:1px;font-size:9px;white-space:nowrap}
.room-state-light{left:14px;bottom:15px}.room-state-shade{right:14px;top:14px}.room-state-climate{right:14px;bottom:15px}

.room-panel-controls{position:relative;padding:17px 22px 19px;border-top:1px solid #e0e8f5;background:#fff}
.room-summary{padding-right:164px}.room-summary>span{color:#1e56cc;font-size:8px;font-weight:850;letter-spacing:.13em}.room-summary h3{margin:4px 0 3px;color:#17243b;font-size:18px;letter-spacing:-.025em}.room-summary p{min-height:34px;margin:0;color:#647186;font-size:10px;line-height:1.55}
.room-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.room-timeline button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:37px;padding:7px 6px;border:1px solid #d4deed;border-radius:5px;background:#fff;color:#45546b;font-size:9px;font-weight:750;transition:border-color .2s,background .2s,color .2s,transform .2s}
.room-timeline button span{font-family:'JetBrains Mono',monospace;color:#7b8ba2;font-size:8px}.room-timeline button:hover{border-color:#1e56cc;transform:translateY(-1px)}.room-timeline button.is-active{border-color:#1e56cc;background:#eaf2ff;color:#174cae}.room-timeline button.is-active span{color:#1e56cc}
.room-live-button{position:absolute;top:18px;right:22px;min-height:34px;padding:7px 10px;border:1px solid #cbd8eb;border-radius:5px;background:#f7faff;color:#1e56cc;font-size:8px;font-weight:800}.room-live-button:not(:disabled):hover{border-color:#1e56cc}.room-live-button:disabled{border-color:#cbdaf2;background:#eaf2ff;color:#1e56cc;opacity:1;cursor:default}.room-live-button span{margin-left:5px}
.room-noscript{margin:0;padding:0 22px 17px;color:#647186;font-size:10px}
.smart-room-panel[data-scene=morning]{--wall:#e0d8cf;--wall-side:#c8c2bd;--floor:#857064;--floor-line:#a48d7e;--sky-top:#f3aa8a;--sky-bottom:#a7d5ee;--celestial:#ffd06b;--celestial-shadow:#ffd06b88;--celestial-x:26%;--celestial-y:63%;--blind-y:-78%;--main-light:.38;--wall-light:.3}
.smart-room-panel[data-scene=day]{--wall:#dfe5ec;--wall-side:#c4cedb;--floor:#8b7569;--floor-line:#ad9384;--sky-top:#5d9fe1;--sky-bottom:#d8ecf8;--celestial:#fff2a6;--celestial-shadow:#fff2a6aa;--celestial-x:63%;--celestial-y:23%;--blind-y:-52%;--main-light:0;--wall-light:0}
.smart-room-panel[data-scene=evening]{--wall:#48566b;--wall-side:#344256;--floor:#5b4b45;--floor-line:#77625a;--sky-top:#263b62;--sky-bottom:#a66f68;--celestial:#f1d9af;--celestial-shadow:#f1d9af55;--celestial-x:75%;--celestial-y:24%;--blind-y:0%;--main-light:.95;--wall-light:.8}
.smart-room-panel[data-scene=night]{--wall:#263348;--wall-side:#1c2738;--floor:#352f32;--floor-line:#4d4244;--sky-top:#071328;--sky-bottom:#182d4c;--celestial:#eaf0fa;--celestial-shadow:#dce8ff55;--celestial-x:69%;--celestial-y:25%;--blind-y:0%;--main-light:.08;--wall-light:.2}
.smart-room-panel[data-scene=night] .room-cross-section::after{content:'';position:absolute;z-index:9;inset:0;background:linear-gradient(#06112429,#0611244f);pointer-events:none}
.smart-room-panel[data-scene=day] .room-floor-plane,.smart-room-panel[data-scene=morning] .room-floor-plane{filter:brightness(1.08)}
.smart-room-panel[data-scene=night] .room-state{background:#f8fbffe8}
@keyframes room-pulse{50%{box-shadow:0 0 0 7px #4170ba22}}
@media(max-width:820px){.smart-room-panel{max-width:650px;width:100%;justify-self:center}.room-cross-section{height:360px}}
@media(max-width:600px){.room-panel-head{padding:17px 17px 16px}.room-panel-head h2{font-size:20px}.room-panel-head p{font-size:10px}.room-clock strong{font-size:14px}.room-cross-section{height:302px}.room-window-frame{top:28px;right:9%;width:41%;height:145px;border-width:6px}.room-pendant{left:12%;transform:scale(.82);transform-origin:top center}.room-picture{top:43px;left:35%;width:59px;height:70px}.room-sofa-visual{left:16%;bottom:38px;width:55%;height:112px}.sofa-back-visual{height:72px}.sofa-seat-visual{height:50px}.sofa-arm-visual{height:56px}.sofa-cushion{width:44px;height:39px}.room-table-visual{right:5%;bottom:41px}.room-plant-visual{right:0;bottom:54px;transform:scale(.78);transform-origin:bottom right}.room-wall-light{left:2%;transform:scale(.75)}.room-state{min-width:0;padding:6px 7px}.room-state>span{width:20px;height:20px}.room-state small{font-size:6px}.room-state strong{font-size:8px}.room-state-light{left:8px;bottom:9px}.room-state-shade{right:8px;top:8px}.room-state-climate{right:8px;bottom:9px}.room-panel-controls{padding:16px 17px 18px}.room-summary{padding:0}.room-summary h3{font-size:17px}.room-summary p{min-height:0;font-size:10px}.room-live-button{position:static;width:100%;margin-top:9px}.room-timeline{gap:4px;margin-top:13px}.room-timeline button{flex-direction:column;gap:1px;min-height:43px;padding:5px 2px;font-size:8px}}
@media(max-width:380px){.room-panel-head p{max-width:200px}.room-cross-section{height:286px}.room-state-shade{top:7px}.room-state-light,.room-state-climate{bottom:7px}.room-state>span{display:none}.room-state{padding:6px}.room-picture{display:none}.room-timeline button span{display:none}}
@media(prefers-reduced-motion:reduce){.room-panel-kicker i{animation:none}.room-celestial,.room-blind,.room-back-wall,.room-side-wall,.room-floor-plane,.pendant-glow,.room-wall-light{transition:none}.room-timeline button{transition:none}}