:root{color-scheme:dark;--bg:#101d2c;--panel:#192939;--line:#2b3b4c;--text:#edf3f8;--muted:#a2b1c2;--accent:#71ddc7;--danger:#ffada3;--yellow:#f0cf83;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.5}.app-shell{max-width:920px;margin:auto;padding:24px 28px 120px;min-height:100dvh}.brand-header{display:flex;align-items:center;gap:12px;margin-bottom:40px}.brand-icon{border:1px solid #53766d;border-radius:14px;color:var(--accent);width:44px;height:44px;text-align:center;line-height:40px;font-size:32px}.brand-header strong{display:block;letter-spacing:.15em;font-size:18px}.brand-header span:not(.badge){display:block;font-size:12px;color:var(--muted)}.badge{font-size:11px;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}#mode{margin-left:auto;max-width:140px;text-align:center}.badge.demo{color:var(--yellow);border-color:#6e5d38;background:#3b3425}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:.16em;font-weight:600;margin:0 0 14px}h1{font-weight:600;letter-spacing:-.035em;font-size:34px;line-height:1.15;margin:0 0 13px}h2{font-size:22px;letter-spacing:-.02em;margin:0 0 8px}h3{font-size:18px;margin:0}.muted{color:var(--muted);font-size:14px}.login-panel{max-width:440px;margin:65px auto 0}.stack{display:flex;flex-direction:column;gap:18px;margin-top:28px}label{display:block;color:var(--muted);font-size:13px}input,select{display:block;width:100%;background:#122231;border:1px solid #415263;border-radius:12px;color:var(--text);padding:14px 15px;margin-top:7px;font:inherit;min-height:48px}input:focus,select:focus{outline:2px solid var(--accent);outline-offset:2px}button{font:inherit;border:1px solid #3c5063;border-radius:12px;padding:12px 18px;background:#223546;color:var(--text);cursor:pointer;min-height:46px}button:hover{background:#2a4053}button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:#12392f;border-color:var(--accent);font-weight:650}.primary:hover{background:#8ee9d7}button:disabled{opacity:.45;cursor:not-allowed}.stack .primary{display:flex;justify-content:space-between}.demo-guide{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;color:var(--muted);font-size:12px}.demo-guide summary{cursor:pointer}.page-top{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:25px}.page-top .muted{margin-bottom:0}.small-button{padding:6px 12px;font-size:12px;min-height:34px}.notice{border:1px solid #73623d;background:#332f24;border-radius:12px;padding:13px 16px;color:var(--yellow);font-size:13px;margin:18px 0}.door-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}.door-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px}.door-top{display:flex;justify-content:space-between;align-items:center}.door-location{font-size:12px;color:var(--muted);margin:5px 0}.connection{font-size:11px;display:flex;align-items:center;gap:6px;color:var(--accent)}.connection.offline{color:var(--muted)}.connection::before{content:"";width:6px;height:6px;background:currentColor;border-radius:50%}.shutter-stage{height:150px;display:grid;place-items:center;margin:17px 0;position:relative}.shutter-frame{height:120px;width:138px;border:3px solid #6b8c9b;border-bottom:5px solid #6b8c9b;border-radius:6px 6px 0 0;position:relative;background:#0e202c;box-shadow:0 12px 50px #08151b30}.shutter-frame::before{content:"";position:absolute;inset:0 0 auto;height:100%;background:repeating-linear-gradient(to bottom,#5a8790 0,#5a8790 9px,#325563 9px,#325563 12px);border-radius:3px 3px 0 0}.shutter-frame.open::before{height:22%}.shutter-frame.stopped::before{height:52%}.shutter-frame.unknown::before{opacity:.28}.state-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px}.state-label{font-size:20px;font-weight:550}.state-meta{font-size:11px;color:var(--muted);margin:5px 0 20px;min-height:34px}.door-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.door-controls button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 8px;font-size:13px}.door-controls button span{font-size:22px;line-height:1}.stop-control{color:var(--yellow)}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:23px 0}.stat{padding:18px 20px;border:1px solid var(--line);border-radius:16px}.stat strong{font-size:26px;font-weight:550;display:block}.stat span{font-size:12px;color:var(--muted)}.section-line{display:flex;justify-content:space-between;align-items:center;margin:28px 0 14px}.text-button{background:none;border:none;color:var(--accent);padding:0;min-height:30px;font-size:13px}.event-list,.member-list{border:1px solid var(--line);border-radius:18px;overflow:hidden}.event{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;border-bottom:1px solid var(--line)}.event:last-child{border-bottom:none}.event-icon{background:#213c44;color:var(--accent);border-radius:10px;width:35px;height:35px;flex-shrink:0;display:grid;place-items:center}.event-main{flex:1;min-width:0}.event-main strong{font-size:14px;font-weight:550}.event-main p{font-size:12px;color:var(--muted);margin:3px 0;overflow-wrap:anywhere}.event-time{font-size:11px;color:var(--muted);white-space:nowrap;display:block}.outcome{font-size:10px;border-radius:6px;padding:3px 6px;display:inline-block;color:var(--yellow);background:#3a3427;margin-top:5px}.outcome.failed,.outcome.uncertain{color:var(--danger);background:#442f32}.outcome.observed{color:var(--accent);background:#213c35}.empty{padding:35px 20px;text-align:center;color:var(--muted);font-size:14px}.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}.filters select{font-size:13px;padding:10px}.member{padding:20px;border-bottom:1px solid var(--line)}.member:last-child{border-bottom:none}.member-head{display:flex;align-items:center;gap:13px}.avatar{width:42px;height:42px;border-radius:14px;background:#27434b;color:var(--accent);display:grid;place-items:center;font-weight:600}.member-head>div:nth-child(2){flex:1}.member p{margin:3px 0;color:var(--muted);font-size:12px}.member-controls{display:flex;align-items:center;gap:12px;margin-top:16px}.check-row{display:flex;gap:8px;align-items:center;margin:10px 0;min-height:24px}.check-row input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--accent)}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:20px}.card .stack{margin-top:15px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0}.settings-row input{max-width:105px;margin:0}.settings-row p{font-size:12px;color:var(--muted);margin:4px 0}.diagnostic{display:flex;gap:10px;align-items:center;font-size:13px;margin:10px 0}.diagnostic span{color:var(--yellow)}.user-row{display:flex;gap:12px;align-items:center}.user-row>div:last-child{flex:1}.user-row p{margin:2px 0}nav{position:fixed;bottom:0;left:0;right:0;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#101d2cf7;backdrop-filter:blur(18px);display:flex;justify-content:center;gap:4px;z-index:4}nav[hidden]{display:none}nav button{display:flex;flex-direction:column;gap:3px;align-items:center;border:0;background:none;font-size:11px;width:130px;color:var(--muted);padding:3px 8px}nav button span{font-size:24px;line-height:1.2}nav button.selected{color:var(--accent)}#toast{position:fixed;z-index:20;bottom:105px;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));background:#e5f4ed;color:#123b2f;border-radius:14px;box-shadow:0 12px 50px #0005;padding:16px 20px;font-size:14px}#toast.error{background:#ffe3df;color:#762e25}dialog{width:min(430px,calc(100vw - 32px));background:var(--panel);color:var(--text);border:1px solid #435767;border-radius:22px;padding:26px}dialog::backdrop{background:#071119c7;backdrop-filter:blur(6px)}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}a{color:var(--accent)}code{font-size:12px}footer{color:var(--muted);font-size:11px;margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
@media(max-width:600px){.app-shell{padding:24px 20px 115px}.brand-header{margin-bottom:30px}.brand-header span:not(.badge){font-size:11px}.brand-header strong{font-size:16px}.login-panel{margin-top:55px}h1{font-size:29px}.door-grid{grid-template-columns:1fr}.door-card{padding:22px}.filters{grid-template-columns:1fr 1fr}.filters label:last-child{grid-column:1/-1}.event{padding:14px 13px;gap:9px}.event-time{font-size:10px}.page-top{gap:10px}.member-controls{flex-wrap:wrap}.stat{padding:16px}.brand-icon{width:40px;height:40px;line-height:36px}.card{padding:20px}}

.top-gap-20{margin-top:20px}.top-gap-24{margin-top:24px}

/* Keep form controls readable and prevent Safari focus zoom on iPhone. */
@media(max-width:600px){input,select,.filters select{font-size:16px}}



.last-command{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}.last-command p{color:var(--muted);font-size:12px;margin:5px 0 0}
.facade-view{margin:20px -8px 0;overflow:hidden;border-radius:14px;background:transparent}.facade-view canvas{display:block;width:100%;height:auto}.facade-view figcaption{padding:8px 10px;font-size:11px;color:var(--muted);background:#101b28}.photo-edit-link{margin-top:14px}.photo-source{display:flex;gap:12px;flex-wrap:wrap}.photo-choice{position:relative;overflow:hidden;border:1px solid #527b75;padding:12px 16px;border-radius:12px;color:var(--accent);font-size:15px;cursor:pointer}.photo-choice input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}#facade-editor{width:100%;height:auto;display:block;border-radius:12px;touch-action:none;background:#071119}.preview-slider{margin-top:22px;font-size:14px}.preview-slider input{accent-color:var(--accent);padding:0;border:0;min-height:44px}.preview-note{color:var(--yellow);font-size:12px}.photo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.corner-details{margin-top:16px;color:var(--muted);font-size:13px}.corner-details summary{cursor:pointer;min-height:36px}.corner-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.corner-inputs fieldset{min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px}.corner-inputs label{margin:7px 0}.corner-inputs input{padding:8px}

/* Keep branding visible above scrolling content and clear the iPhone status area. */
html{scroll-padding-top:calc(92px + env(safe-area-inset-top))}
.brand-header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:920px;z-index:5;margin:0;padding:calc(16px + env(safe-area-inset-top)) 28px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.app-shell{padding-top:calc(116px + env(safe-area-inset-top))}
@media(max-width:600px){.brand-header{padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-left));margin:0}.app-shell{padding-top:calc(102px + env(safe-area-inset-top))}}
/* Six function circles arranged around the UHOME center. */
.smart-orbit{position:relative;width:min(100%,540px);aspect-ratio:1;margin:16px auto 26px;isolation:isolate}.orbit-background{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.orbit-background circle{fill:none;stroke:#7894b230;stroke-width:.35}.orbit-sector{stroke:var(--bg);stroke-width:.8;opacity:.24}.blue{--module:#6eb6ef}.green{--module:#6bce9e}.amber{--module:#efbb68}.coral{--module:#ed8c8b}.pink{--module:#dc92c5}.purple{--module:#a998df}.orbit-sector.blue{fill:#438bc9}.orbit-sector.green{fill:#40a978}.orbit-sector.amber{fill:#d49c37}.orbit-sector.coral{fill:#d26764}.orbit-sector.pink{fill:#c76cab}.orbit-sector.purple{fill:#8f79c5}.orbit-core{position:absolute;left:35%;top:35%;width:30%;height:30%;border:1px solid #506e85;border-radius:50%;background:radial-gradient(circle at 35% 25%,#294254,#142230 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 30px #08162180;text-align:center}.orbit-core>span{font-size:clamp(25px,7vw,42px);line-height:1}.orbit-core strong{font-size:clamp(13px,3.6vw,20px);letter-spacing:.1em;margin-top:5px}.orbit-core small{font-size:clamp(8px,2.2vw,11px);color:var(--muted);margin-top:4px}.orbit-function{position:absolute;width:26%;height:26%;border-radius:50%;border:3px solid #d8e7ee;background:radial-gradient(circle at 40% 20%,#30485a,#152635 80%);color:var(--module);box-shadow:0 7px 18px #050e1a70;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:8px 4px;min-height:0}.orbit-function:hover{background:#2a4255;border-color:var(--module)}.orbit-function:active{filter:brightness(1.15)}.orbit-function strong{font-size:clamp(11px,3vw,16px);font-weight:650;color:#f0f5fa;line-height:1.1}.orbit-function small{font-size:clamp(8px,2.2vw,11px);line-height:1.15;color:var(--module)}.orbit-icon{width:34%;aspect-ratio:1;display:block}.orbit-icon svg{width:100%;height:100%;display:block}.orbit-0{top:0;left:37%}.orbit-1{top:18.5%;left:69%}.orbit-2{top:55.5%;left:69%}.orbit-3{top:74%;left:37%}.orbit-4{top:55.5%;left:5%}.orbit-5{top:18.5%;left:5%}.home-overview{max-width:540px;margin:0 auto;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel);padding:16px;border-radius:16px}.home-overview p{margin:0;flex:1;font-size:12px;color:var(--muted)}.home-overview strong{color:var(--text);font-size:14px}.home-status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.home-plan-note{font-size:12px;color:var(--muted);max-width:540px;margin:14px auto 0;text-align:center}.planned-module{text-align:center;padding:36px 24px}.planned-icon{width:72px;height:72px;color:var(--module);margin:0 auto 20px}.planned-icon svg{width:100%;height:100%}.planned-module h2{margin-top:18px}.planned-module .primary{margin-top:18px}nav button{max-width:130px;flex:1;min-width:0}nav{gap:0}@media(max-width:600px){nav{padding-left:8px;padding-right:8px}nav button{font-size:10px;padding:3px 2px}.smart-orbit{margin-top:12px}.orbit-function{border-width:2px}}
/* Keep the approved Home layout; only stop vertical page movement. */
html.home-screen .app-shell{height:100dvh;min-height:100dvh}
html.home-screen #main{position:fixed;top:calc(116px + env(safe-area-inset-top));bottom:calc(73px + max(8px,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);width:calc(100% - 56px);max-width:864px;overflow:hidden;overscroll-behavior:none;touch-action:pan-x pinch-zoom}
@media(max-width:600px){html.home-screen #main{top:calc(102px + env(safe-area-inset-top));width:calc(100% - 40px)}}

/* A compact bottom bar anchored to the screen, with one safe-area inset. */
nav{position:fixed;inset:auto 0 0;padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));min-height:0}
nav button{min-height:44px;padding:2px 4px;gap:2px;line-height:1.25;justify-content:center}
nav button span{font-size:22px;line-height:1.1}

/* Charcoal, smoked glass and champagne accents inspired by the supplied reference.
   These overrides change appearance only; the approved viewport layout stays intact. */
:root{--bg:#171717;--panel:#353534;--line:#4a4946;--text:#f5f3ef;--muted:#bcb9b3;--accent:#d9bf91;--danger:#f1a59a;--yellow:#e7c894}
body{background:radial-gradient(ellipse at 85% 24%,#32312e66,transparent 55%),var(--bg);background-attachment:fixed}
.brand-header{background:#191919ed;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:#ffffff14}
.brand-icon{color:var(--accent);border-color:#b69b6859;background:linear-gradient(145deg,#47413855,#1e1e1e);box-shadow:inset 0 1px 0 #ffffff0c}
.badge{border-color:#ffffff20;background:#ffffff06}.badge.demo{color:#e8d4b1;border-color:#bda57555;background:#4b4030}
.card,.door-card,.stat,.home-overview{background:linear-gradient(135deg,#52514c9c,#333331d9);border-color:#ffffff1b;box-shadow:inset 0 1px 0 #ffffff12,0 12px 30px #00000020}
.event-list,.member-list{background:#2a2a29;border-color:#ffffff1b}.event,.member{border-bottom-color:#ffffff12}
.avatar,.event-icon{background:#51493b;color:#e6cfaa}
button{background:linear-gradient(145deg,#464642,#30302f);border-color:#ffffff25;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease,transform .18s ease}
button:hover{background:#4d4b46;border-color:#d9bf9166}button:active:not(:disabled){filter:brightness(1.12);transform:scale(.97)}
button.primary{background:linear-gradient(135deg,#ead8b9,#b79963);border-color:#e3c89a;color:#29241c;box-shadow:0 5px 16px #b1955c20}.primary:hover{background:#e6cfaa}
input,select{background:#262625;border-color:#6b665c;color:var(--text)}
.text-button{background:none;border:0;box-shadow:none}.text-button:hover{background:none}
.notice{background:#40382b;border-color:#8e7950;color:#ecd2a5}.last-command{border-color:#ffffff20}
.facade-view figcaption{background:transparent}.shutter-frame{background:#151515;border-color:#8f8c84}.shutter-frame::before{background:repeating-linear-gradient(to bottom,#8c8981 0,#8c8981 9px,#504f4b 9px,#504f4b 12px)}
.connection,.home-status-dot{color:#b8ceb4}.home-status-dot{background:#b8ceb4}.connection.offline{color:var(--muted)}
.outcome{background:#514532;color:#ecd2a5}.outcome.observed{background:#384438;color:#c6dcc0}.outcome.failed,.outcome.uncertain{background:#523c39;color:#f1b6ad}
.blue{--module:#e4c798}.green{--module:#bdc9b7}.amber{--module:#ddc6a3}.coral{--module:#d1b3a0}.pink{--module:#c8bbc5}.purple{--module:#b7bcc8}
.orbit-sector{opacity:.28}.orbit-sector.blue{fill:#b99a65}.orbit-sector.green{fill:#899781}.orbit-sector.amber{fill:#b4a07b}.orbit-sector.coral{fill:#a18370}.orbit-sector.pink{fill:#93858f}.orbit-sector.purple{fill:#818996}.orbit-background circle{stroke:#e2d2b731}
.orbit-function{border-color:#b5afa466;background:radial-gradient(circle at 32% 18%,#656159,#30302edb 76%);box-shadow:inset 0 1px 2px #ffffff21,0 8px 22px #00000055;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.orbit-function:hover{background:#57534c;border-color:var(--module)}.orbit-function strong{color:var(--text)}
.orbit-0{border-color:#dfc28d;background:radial-gradient(circle at 32% 18%,#a78e62,#4b4130 80%);box-shadow:inset 0 1px 2px #ffffff32,0 7px 24px #b6985930}
.orbit-core{background:radial-gradient(circle at 32% 18%,#55534d,#232322 78%);border-color:#a8967566;box-shadow:inset 0 1px 0 #ffffff18,0 10px 30px #00000050;color:#e4c798}
nav{background:#232322e8;border-top-color:#ffffff19;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
nav button{position:relative;background:none;border:0;border-radius:16px;color:#bab7b1}nav button:hover{background:#ffffff08;border:0}nav button.selected{color:#f0ddba;background:linear-gradient(145deg,#b69b6940,#b69b6912);box-shadow:inset 0 1px 0 #e6c99520}
#toast{background:#eee3d0;color:#332b20}.photo-choice{border-color:#b99e71;color:var(--accent)}dialog{background:#333331;border-color:#807461}dialog::backdrop{background:#111111b8}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}

/* Context tab follows the selected smart module; the header logo returns home. */
button.brand-icon{padding:0;min-height:0;flex-shrink:0;font-size:32px}
nav button .footer-label{font-size:inherit;line-height:1.25}
nav button .footer-module-icon{width:24px;height:24px;line-height:1;display:block}
.footer-module-icon svg{display:block;width:100%;height:100%}

/* Small sculpted silhouettes: bright upper edges and shaded side faces. */
nav button .footer-sculpted-icon,nav button[data-page="history"]>span:first-child,nav button[data-page="members"]>span:first-child{display:block;width:26px;height:26px;line-height:1}
nav button svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1px #0007)}
.brand-icon svg{display:block;width:28px;height:28px;margin:auto;filter:drop-shadow(0 2px 2px #0006)}

/* Compact vertical product signature: symbol / UHOME / software. */
.brand-header{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
button.brand-lockup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:56px;min-height:56px;border:0;border-radius:8px;background:none;box-shadow:none;line-height:1;padding:0}
.brand-header .brand-lockup .brand-symbol{display:block;width:28px;height:28px;line-height:1}
.brand-lockup .brand-symbol svg{width:28px;height:28px;margin:0}
.brand-header .brand-lockup strong{font-size:12px;line-height:14px;letter-spacing:.12em;color:var(--text)}
.brand-header .brand-lockup .brand-software{font-size:9px;line-height:10px;letter-spacing:.1em;color:var(--muted)}
button.brand-lockup:hover{background:#ffffff08}
.brand-header .brand-lockup .brand-symbol{color:var(--accent)}

.brand-header .brand-slogan{flex:1;min-width:0;font-size:18px;line-height:1.3;letter-spacing:.01em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.brand-header .brand-slogan[hidden]{display:none}
.brand-header #mode{flex-shrink:0}
@media(max-width:600px){.brand-header .brand-slogan{font-size:15px}.brand-header:has(.brand-slogan:not([hidden])){gap:8px}.brand-header:has(.brand-slogan:not([hidden])) #mode{max-width:95px;font-size:10px;padding:5px 7px}}

.brand-header .brand-slogan{white-space:pre-line}
/* One door per control screen: media takes the remaining space above controls. */
html.door-screen .app-shell{height:100dvh;min-height:100dvh}
html.door-screen #main{position:fixed;top:calc(102px + env(safe-area-inset-top));bottom:calc(73px + max(8px,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:600px;overflow:auto;overscroll-behavior:contain}
.door-workspace{height:100%;min-height:540px;display:flex;flex-direction:column;gap:8px}
.door-workspace .page-top{margin:0;flex-shrink:0}.door-workspace .eyebrow{margin-bottom:5px}.door-workspace h1{font-size:24px;margin-bottom:4px}.door-workspace .page-top .muted{font-size:12px;margin-top:0}
.door-workspace>.notice{font-size:11px;padding:7px 10px;margin:0;flex-shrink:0}
.door-workspace .door-card{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px;border-radius:20px;overflow:hidden}
.door-workspace .door-top{gap:8px}.door-workspace h3{font-size:16px}.door-workspace .door-location{margin:2px 0;font-size:11px}
.door-workspace .facade-view{display:flex;flex-direction:column;flex:1;min-height:90px;margin:8px 0;background:transparent}
.door-workspace .facade-view canvas{height:0;flex:1;min-height:0;width:100%;object-fit:contain}
.door-workspace .facade-view figcaption{flex-shrink:0;font-size:10px;padding:4px 8px}
.door-workspace .shutter-stage{height:auto;flex:1;min-height:90px;margin:8px 0}
.door-workspace .shutter-frame{height:min(120px,100%)}
.door-workspace .state-row{margin-top:5px;gap:6px}.door-workspace .state-label{font-size:18px}.door-workspace .state-meta{font-size:10px;min-height:0;margin:3px 0 8px}
.door-workspace .door-controls{flex-shrink:0;gap:8px}.door-workspace .door-controls button{padding:8px 4px;min-height:60px}
.door-workspace .last-command{margin-top:8px;padding-top:6px;font-size:11px}.door-workspace .last-command p{font-size:11px;margin:2px 0 0}
.door-workspace .door-card>p.muted{font-size:11px;margin:6px 0 0}.door-workspace .photo-edit-link{margin-top:5px;font-size:11px;min-height:24px;align-self:flex-start}
.door-picker{font-size:11px;flex-shrink:0}.door-picker select{margin-top:3px;padding:6px 10px;min-height:36px}
@media(max-height:740px){.door-workspace{min-height:440px}.door-workspace .door-card{padding:12px}.door-workspace h1{font-size:21px}.door-workspace .state-label{font-size:16px}.door-workspace .door-controls button{min-height:54px;padding:6px 4px}}

.event-main .preceding-command{padding:8px 10px;border-left:2px solid var(--accent);background:#d9bf9110;border-radius:0 8px 8px 0;color:var(--text)}

.report-details{font-size:11px;color:var(--muted);margin:8px 0}.report-details summary{cursor:pointer;min-height:24px}

/* Camera workspace follows UHOME's fixed header and bottom navigation. */
.camera-heading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:340px}.camera-summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:-8px 0 20px}.camera-workspace{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}.camera-sidebar{min-width:0}.camera-location-filter{margin-bottom:12px}.camera-location-filter select{font-size:14px;padding:10px 12px;min-height:44px}.camera-list{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto}.camera-list-item{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:13px 11px;min-height:86px;background:#ffffff05;border-color:#ffffff16;border-radius:14px}.camera-list-item.selected{background:linear-gradient(135deg,#d9bf9125,#d9bf910a);border-color:#d9bf9170}.camera-list-item>span:nth-child(2){flex:1;min-width:0}.camera-list-item strong{display:block;font-size:14px;overflow-wrap:anywhere}.camera-list-item small{display:block;font-size:11px;line-height:1.5;color:var(--muted)}.camera-list-icon{width:26px;height:26px;flex-shrink:0;color:var(--accent)}.camera-list-icon svg{width:100%;height:100%;display:block}.camera-status-dot{width:6px;height:6px;background:#918e87;border-radius:50%;flex-shrink:0}.camera-status-dot.online{background:#b8ceb4}.camera-detail{min-width:0;padding:20px;border:1px solid #ffffff1b;border-radius:20px;background:linear-gradient(135deg,#52514c7c,#333331d9)}.camera-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.camera-detail-header h2{font-size:20px;overflow-wrap:anywhere}.camera-detail-header p{font-size:12px;color:var(--muted);margin:4px 0 0;overflow-wrap:anywhere}.camera-status{flex-shrink:0}.camera-status.online{color:#c7dbbf;border-color:#b8ceb450}.camera-media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#111;border:1px solid #ffffff0c;border-radius:14px;overflow:hidden}.camera-media>img,.camera-media>video{display:block;width:100%;height:100%;object-fit:contain;max-height:480px;background:#101010}.camera-media-empty{text-align:center;padding:14px;color:var(--muted);max-width:100%;font-size:13px}.camera-media-empty strong{display:block;font-size:14px;color:var(--text)}.camera-media-empty p{margin:6px 0 0;font-size:12px}.camera-placeholder-icon{display:block;width:48px;height:48px;color:#bcb9b366;margin:0 auto 10px}.camera-placeholder-icon svg{display:block;width:100%;height:100%}.camera-media-caption{font-size:10px;color:var(--muted);padding:8px 1px;min-height:36px}.camera-view-actions{display:flex;gap:10px;margin:5px 0 16px}.camera-view-actions button{flex:1;font-size:13px;min-width:0;padding:10px}.camera-check-result{padding:12px;background:#00000019;border-radius:10px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}.camera-check-result strong{font-weight:500;color:var(--text);display:block;margin-bottom:3px}.camera-check-result span{display:block}.camera-error{color:var(--danger);font-size:12px;overflow-wrap:anywhere}.camera-ptz-section{margin-top:20px;border-top:1px solid #ffffff16;padding-top:16px}.camera-ptz-section h3{font-size:14px}.camera-ptz-section .muted{font-size:11px;margin:3px 0 10px}.camera-ptz{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,44px);gap:5px;margin:12px auto;width:max-content}.camera-ptz button{padding:0;min-height:44px;font-size:22px;border-radius:12px;touch-action:manipulation}.camera-ptz .ptz-up{grid-area:1/2}.camera-ptz .ptz-left{grid-area:2/1}.camera-ptz .ptz-stop{grid-area:2/2;font-size:16px;color:var(--danger)}.camera-ptz .ptz-right{grid-area:2/3}.camera-ptz .ptz-down{grid-area:3/2}.camera-feature-note{display:flex;flex-direction:column;gap:5px;margin-top:14px;color:var(--muted);font-size:11px}.camera-admin-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #ffffff16;margin-top:20px;padding-top:16px}.danger-button{color:var(--danger)}.camera-integration{margin:22px 0 0;padding:16px;border:1px solid #ffffff18;border-radius:14px;color:var(--muted);font-size:12px;background:#ffffff03}.camera-integration summary{min-height:24px;color:var(--accent);cursor:pointer}.camera-integration p{margin:12px 0 0;overflow-wrap:anywhere}.camera-readiness{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.camera-empty{text-align:center;padding:36px 24px}.camera-empty .camera-placeholder-icon{color:var(--accent);width:64px;height:64px;margin-bottom:20px}.camera-empty .primary{margin-top:12px}.camera-form{margin-top:0}.camera-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.camera-form input,.camera-form select{font-size:16px}.camera-form-note{margin:0;font-size:12px}.field-help{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin:6px 0 0}.camera-form>label input[type=number]{max-width:150px}.camera-advanced{color:var(--muted);font-size:13px}.camera-advanced summary{cursor:pointer;min-height:32px}.camera-capabilities{min-width:0;margin:0;border:1px solid #ffffff24;border-radius:12px;padding:14px 16px}.camera-capabilities legend{font-size:13px;color:var(--muted);padding:0 6px}.camera-form-actions{display:flex;gap:10px;flex-wrap:wrap}.camera-form-actions button{font-size:14px}.camera-access-list{margin:20px 0}.camera-access-row{display:grid;grid-template-columns:minmax(120px,1fr) 80px 110px;gap:10px;align-items:center;padding:16px 0;border-bottom:1px solid #ffffff16}.camera-access-row>div{min-width:0}.camera-access-row strong{font-size:14px;overflow-wrap:anywhere}.camera-access-row small{display:block;color:var(--muted);font-size:11px;overflow-wrap:anywhere}.camera-access-row .check-row{font-size:12px;white-space:nowrap}.camera-discovery-list article{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid #ffffff16}.camera-discovery-list h3{font-size:16px;overflow-wrap:anywhere}.camera-discovery-list .muted{font-size:12px;margin:5px 0 0}.camera-discovery-list .small-button{flex-shrink:0}
@media(max-width:700px){.camera-workspace{grid-template-columns:1fr;gap:14px}.camera-sidebar{display:flex;flex-direction:column;gap:0}.camera-list{flex-direction:row;max-height:none;padding-bottom:5px;scroll-snap-type:x proximity}.camera-list-item{width:190px;flex:0 0 190px;min-height:80px;scroll-snap-align:start}.camera-location-filter{display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:10px}.camera-location-filter select{flex:1;margin-top:0;min-width:0}.camera-detail{padding:16px}.camera-heading-actions{max-width:190px;gap:6px}.camera-heading-actions .small-button{font-size:11px;padding:6px 9px}.camera-summary{font-size:11px;margin-top:-8px}.camera-media-empty .camera-placeholder-icon{width:38px;height:38px;margin-bottom:5px}.camera-media-empty p{font-size:11px}.camera-form-grid{grid-template-columns:1fr}.camera-access-row{grid-template-columns:minmax(100px,1fr) 65px 100px;gap:5px}.camera-access-row .check-row{font-size:11px}.camera-access-row .check-row input{width:19px;height:19px;min-height:19px}.camera-integration{font-size:11px}.camera-detail-header h2{font-size:18px}}
@media(max-width:380px){.camera-detail-header{flex-wrap:wrap}.camera-access-row{grid-template-columns:1fr 1fr}.camera-access-row>div{grid-column:1/-1}.camera-summary{gap:5px}}
.camera-form-grid[hidden],#camera-cloud-fields[hidden]{display:none}
nav button[hidden]{display:none}

/* Recorder configuration is read-only, with full API keys kept legible on small screens. */
.recorder-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.recorder-tabs button[aria-pressed=true]{background:var(--gold,#c3a570);color:#151515}.recorder-fields{margin:0}.recorder-fields>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #ffffff14}.recorder-fields dt,.recorder-fields dd{margin:0;overflow-wrap:anywhere}.recorder-fields dt{font-size:12px;opacity:.7}.recorder-fields dd{font-size:14px}.recorder-channels article{padding:16px 0;border-bottom:1px solid #ffffff14}.recorder-channels button{margin:6px 6px 0 0}.recorder-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}@media(max-width:520px){.recorder-fields>div{grid-template-columns:1fr;gap:4px}.recorder-tabs button{flex:1 1 auto}}

/* A single, persistent house context applies to every module. */
.home-context {position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;background:#24241f;border-bottom:1px solid #b9a57b55;}
.home-context[hidden]{display:none;}
.home-context div{display:grid;gap:4px;min-width:0;}
.home-context small{font-size:9px;letter-spacing:1.8px;color:#d2bd90;}
.home-context strong{font-size:18px;overflow-wrap:anywhere;}
.home-context span{font-size:11px;color:#aaa;}
.home-context button{flex-shrink:0;}
.home-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:28px 0;}
.home-choice{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:14px;padding:26px;min-height:240px;border:1px solid #b9a57b44;}
.home-choice:hover{border-color:#d2bd90;}
.home-choice strong{font-size:24px;}
.home-choice-icon{font-size:40px;color:#d2bd90;}
.home-choice-enter{margin-top:auto;font-size:12px;color:#d2bd90;}
@media(max-width:600px){.home-context{padding:12px 16px;}.home-context span{max-width:210px;}.home-choices{grid-template-columns:1fr;}}

.home-context{position:fixed;top:var(--uhome-header-height,76px);left:50%;transform:translateX(-50%);width:100%;max-width:920px;z-index:6;}
html:has(.home-context:not([hidden])) .app-shell{padding-top:var(--uhome-content-top,195px);}
html.home-screen #main,html.door-screen #main{top:var(--uhome-content-top,195px);}
html.home-screen #main{overflow:auto;touch-action:pan-y pinch-zoom;}

/* Compact movement confirmation; Stop continues to dispatch immediately. */
dialog.door-confirmation{width:min(340px,calc(100vw - 40px));padding:24px;border-color:var(--accent);box-shadow:0 24px 70px #0008}
dialog.door-confirmation h2{font-size:21px;line-height:1.3;margin:0 0 12px}
dialog.door-confirmation p{font-size:14px;line-height:1.5;color:var(--muted)}
dialog.door-confirmation .dialog-actions{gap:12px;margin-top:22px}
dialog.door-confirmation .dialog-actions button{flex:1;min-height:46px}

.shutter-frame.position-known::before{height:var(--shutter-height,100%)!important;transition:height .6s linear;opacity:1}.position-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.position-anchor{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.position-settings input[type=checkbox]{width:auto}

/* Header is house identity; the door wheel replaces the old house context card. */
.home-context{padding:0;background:var(--card);border-bottom:1px solid #b9a57b33}
.door-wheel-trigger{width:100%;display:flex;align-items:center;gap:12px;padding:10px 20px;border:0;border-radius:0;background:transparent;text-align:left}
.door-wheel-trigger strong{flex:1;font-size:13px}.door-wheel-trigger span:last-child{font-size:11px;color:var(--muted)}
#switch-home{flex-shrink:0;font-size:12px;padding:8px 10px}

#door-wheel{width:90vw;max-width:680px;padding:22px 0;border:0;background:transparent;box-shadow:none;text-align:center;overflow:hidden;color:var(--text)}
#door-wheel::backdrop{background:#000e;backdrop-filter:blur(8px)}#door-wheel h2{margin:0 0 8px;font-size:24px}
.carousel-house{font-size:14px;color:var(--muted);margin:0 0 20px}
.door-carousel-stage{height:clamp(200px,65vw,300px);width:100%;position:relative;perspective:850px;touch-action:pan-y;user-select:none;overflow:hidden}
.door-namecard{position:absolute;left:19.5%;top:12%;width:61%;height:76%;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:20px;background:linear-gradient(145deg,#36332e,#171717);border:1px solid #9b958b;box-shadow:0 12px 28px #0007;transition:transform .38s ease,opacity .38s ease,border-color .38s ease;color:var(--text);backface-visibility:hidden;transform-origin:center}
.door-namecard strong{font-size:clamp(19px,5vw,28px);line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.door-namecard .namecard-icon{font-size:30px}.door-namecard small{font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.door-namecard.carousel-center{transform:translateX(0) rotateY(0);opacity:1;z-index:3;color:var(--accent);border-color:var(--accent)}
.door-namecard.carousel-left-1{transform:translateX(-56%) rotateY(48deg) scale(.8);opacity:.58;z-index:2}
.door-namecard.carousel-right-1{transform:translateX(56%) rotateY(-48deg) scale(.8);opacity:.58;z-index:2}
.door-namecard.carousel-left-2{transform:translateX(-112%) rotateY(75deg) scale(.62);opacity:.22;z-index:1}
.door-namecard.carousel-right-2{transform:translateX(112%) rotateY(-75deg) scale(.62);opacity:.22;z-index:1}
.door-namecard.carousel-far{transform:translateZ(-300px) scale(.4);opacity:0;pointer-events:none;z-index:0}
.carousel-navigation{display:flex;align-items:center;justify-content:center;gap:24px;margin:6px 0}.carousel-navigation button{width:44px;height:44px;font-size:26px;padding:0}.carousel-counter{min-width:65px;color:var(--muted);font-variant-numeric:tabular-nums}
.carousel-hint{font-size:11px;color:var(--muted);margin:10px 0 20px}.carousel-confirm{display:block;width:70%;margin:0 auto 14px}.carousel-close{display:block;margin:0 auto}.carousel-empty{margin:90px 0;color:var(--muted)}
dialog.door-confirmation{padding:20px}dialog.door-confirmation .eyebrow{display:none}
@media(prefers-reduced-motion:reduce){.door-namecard{transition:none;rotate:none}.door-namecard.carousel-left-1{transform:translateX(-56%) scale(.8)}.door-namecard.carousel-right-1{transform:translateX(56%) scale(.8)}.door-namecard.carousel-left-2{transform:translateX(-112%) scale(.62)}.door-namecard.carousel-right-2{transform:translateX(112%) scale(.62)}}