:root{color-scheme:dark;--bg:#08111f;--panel:#111d2d;--panel2:#17263a;--line:#28384e;--text:#f1f6ff;--muted:#98a9bf;--mint:#69e3b6;--blue:#76aeff;--orange:#fbbd83;--red:#ff7280;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;background:radial-gradient(ellipse 65% 35% at 50% -12%,#1c3958 0,transparent 95%),var(--bg);color:var(--text);min-height:100vh;-webkit-tap-highlight-color:transparent}.app{max-width:1030px;margin:0 auto;padding:28px 24px 22px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 27px}.brand{display:flex;align-items:center;gap:13px}.brand-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,#284867,#172c48);border:1px solid #3c5678;color:#a9cbff;font-size:24px}.logo-garage{width:23px;height:22px;border:2px solid #adcbff;border-radius:4px 4px 1px 1px;display:block;position:relative}.logo-garage:before{content:"";position:absolute;top:-8px;left:-5px;width:28px;height:16px;border-top:2px solid #adcbff;transform:rotate(0deg);clip-path:polygon(0 100%,50% 0,100% 100%)}.logo-garage:after{content:"";position:absolute;inset:5px 3px 3px;border-top:2px solid #adcbff;border-bottom:2px solid #adcbff}h1,h2,h3,p{margin:0}h1{font-size:19px;font-weight:760;letter-spacing:-.6px}.eyebrow,.small-label{font-weight:730;letter-spacing:2px;font-size:10px;color:#91aed3}.eyebrow{margin-bottom:4px}.connect-pill{display:flex;align-items:center;gap:9px;border:1px solid #2d435c;border-radius:30px;padding:10px 14px;color:var(--muted);font-size:12px;font-weight:650;background:#142235}.dot{width:8px;height:8px;border-radius:50%;background:#8da4be;box-shadow:0 0 0 4px #ffffff05}.connect-pill.online{color:#9ce8ca;border-color:#2d665c;background:#112b2c}.connect-pill.online .dot{background:var(--mint);box-shadow:0 0 10px #58f2b675}.connect-pill.offline{color:#ffc0c7;border-color:#7d3a49;background:#3a1d2a}.connect-pill.offline .dot{background:var(--red)}.dashboard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:start}.surface{background:linear-gradient(155deg,#142236,#101b2c 80%);border:1px solid #29405b;border-radius:23px;box-shadow:0 14px 34px #0002}.hero{grid-row:span 2;padding:28px 29px 23px}.hero-top{display:flex;justify-content:space-between;gap:12px}.hero h2{font-size:33px;letter-spacing:-1.3px;margin-top:11px;font-weight:760}.hero p{font-size:13px;line-height:1.65;color:#9eaec3;max-width:360px;margin-top:8px}.status-round{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:#1b3049;color:#91b5ed;border:1px solid #2b496a}.status-round svg{width:25px}.illustration{height:257px;position:relative;display:flex;align-items:flex-end;justify-content:center;margin:18px -8px 11px;overflow:hidden}.back-wall{width:310px;height:211px;position:relative;background:linear-gradient(150deg,#31455b,#17293c);border:1px solid #50718d;border-radius:5px 5px 1px 1px;box-shadow:0 0 46px #2d5e8c19}.back-wall:before{content:"";position:absolute;left:-13px;right:-13px;top:-17px;height:17px;background:#253c54;border:1px solid #55758c;border-radius:4px}.house-reflection{position:absolute;inset:0;background:linear-gradient(116deg,transparent 52%,#ffffff09 53%,transparent 75%)}.door-opening{position:absolute;inset:15px 18px 0;overflow:hidden;background:#0d1725;border:5px solid #0b1827;border-bottom:0;border-radius:4px 4px 0 0}.garage-inside{position:absolute;inset:0;display:flex;align-items:end;justify-content:center;background:linear-gradient(180deg,#112439,#202b37);overflow:hidden}.garage-inside svg{width:87%;position:absolute;bottom:12px}.inside-glow{position:absolute;top:-50px;width:140px;height:180px;background:#a9cff926;filter:blur(40px)}.gate{z-index:2;position:absolute;inset:0;display:flex;flex-direction:column;transition:transform 1.5s cubic-bezier(.2,.8,.2,1);transform:translateY(0)}.gate i{flex:1;background:linear-gradient(#8095a8,#687f93 20%,#4c6175 84%,#3c5265);border-bottom:2px solid #2a3e51;border-top:1px solid #9caec077}.gate.open{transform:translateY(-97%)}.gate.partial{transform:translateY(-48%)}.gate.unknown{transform:translateY(-18%)}.gate.moving{animation:door-pulse 1.1s ease-in-out infinite alternate}@keyframes door-pulse{from{filter:brightness(1)}to{filter:brightness(1.3)}}.ground{position:absolute;bottom:0;width:90%;height:25px;border-radius:50%;background:#41678c27;filter:blur(11px)}.progress-area{margin-top:5px}.progress-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}.progress-label strong{color:#e1ebfa;font-size:12px;font-weight:650}.track{height:6px;background:#30445d;border-radius:6px;overflow:hidden;margin-top:12px}.track-inner{height:100%;width:0%;background:linear-gradient(90deg,#6ca7f9,#6fe0bb);transition:width 1s ease;border-radius:6px}.hero p.micro{margin-top:11px;font-size:11px;max-width:unset;color:#8196b2}.controls,.technical{padding:23px 24px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-title h3{font-size:16px;font-weight:750;letter-spacing:-.2px}.section-title>span,.refresh{font-size:11px;color:var(--muted)}.notice{background:#202f43;color:#b9cce0;border:1px solid #344c68;padding:12px;border-radius:11px;font-size:12px;line-height:1.4;margin-bottom:14px}.notice.hidden{display:none}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.control{border:1px solid #415673;color:#e5effc;min-height:139px;border-radius:14px;background:#1b2c43;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font:inherit;position:relative;overflow:hidden;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .16s,border-color .16s}.control:not(:disabled):active{transform:scale(.97)}.control:not(:disabled):hover{border-color:#6e90ba}.control:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.7)}.control-open{background:linear-gradient(160deg,#1b3d43,#143239);border-color:#2a6c67}.control-stop{background:linear-gradient(160deg,#54393b,#37252e);border-color:#805259}.control-close{background:linear-gradient(160deg,#203a5a,#1b2f49);border-color:#416d99}.action-symbol{font-weight:400;font-size:29px;line-height:1;color:var(--mint)}.control-stop .action-symbol{color:var(--red);font-size:24px}.control-close .action-symbol{color:var(--blue)}.action-main{font-size:14px;font-weight:720;letter-spacing:-.1px}.action-small{font-size:10px;color:#a9b7ca}.hold-fill{position:absolute;bottom:0;left:0;width:0;height:5px;background:var(--mint);pointer-events:none}.control-close .hold-fill{background:var(--blue)}.command-message{font-size:11px;color:#9eb2c9;margin-top:14px;line-height:1.5;min-height:32px}.command-message.good{color:#95dfb8}.command-message.bad{color:#ff9ca4}.detail-list{display:grid;gap:0}.detail-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #273a51}.detail-list span{font-size:12px;color:#91a4bd}.detail-list strong{font-size:12px;font-weight:650;text-align:right;color:#dbe9fc}.refresh{border:1px solid #334b69;padding:7px 10px;border-radius:9px;background:#1a2d45;cursor:pointer}.refresh:hover{color:#f7fbff}.history{margin-top:18px}.history ul{list-style:none;margin:10px 0 0;padding:0;max-height:95px;overflow:auto}.history li{font-size:11px;color:#9bacc1;padding:5px 0;border-bottom:1px dashed #2a3c53}.footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#7891ae;margin-top:22px}.footer b{font-weight:500;color:#a8bacf}.login{position:fixed;inset:0;background:#07111cfa;z-index:20;display:grid;place-items:center;padding:22px}.login.hidden{display:none}.login-card{max-width:355px;width:100%;padding:32px;background:#12233a;border:1px solid #344968;border-radius:20px;display:flex;flex-direction:column;align-items:stretch;gap:16px}.login-card .brand-icon{align-self:center}.login-card h2{text-align:center}.login-card p{text-align:center;font-size:13px;color:var(--muted)}.login-card input,.login-card button{padding:14px;border-radius:10px;font:inherit}.login-card input{background:#0b1b2d;color:var(--text);border:1px solid #3c5777}.login-card button{color:#071324;background:#87b9fc;border:0;font-weight:700;cursor:pointer}.login-card .error{color:#ff9c9f}@media(max-width:750px){.app{padding:19px 15px 24px}.dashboard{grid-template-columns:1fr;gap:14px}.hero{grid-row:auto;padding:22px 20px 18px}.hero h2{font-size:28px}.illustration{height:235px;margin-top:20px}.back-wall{transform:scale(.88);transform-origin:bottom center}.controls,.technical{padding:20px}.header{margin-bottom:21px}.brand-icon{width:43px;height:43px}.eyebrow{font-size:9px}.connect-pill{padding:9px 10px;font-size:11px}.footer{margin-top:18px}}@media(max-width:390px){.control{min-height:121px}.control-grid{gap:7px}.action-main{font-size:12px}.action-small{font-size:9px}.hero h2{font-size:26px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 0.2.0: WebAuthn device enrolment and role-based device controls */
.hidden{display:none!important}.login-card{max-width:390px;gap:12px}.login-card .auth-form{width:100%;display:flex;flex-direction:column;gap:10px}
.login-card label{text-transform:uppercase;letter-spacing:.8px;font-size:10px;color:#9db4d0;font-weight:750}
.login-card button.auth-link{background:transparent;color:#99c2ff;border:1px solid #3e587b;font-size:12px;padding:12px}
.login-card .auth-note{font-size:11px;line-height:1.6;color:#7f9bb6}.login-card .error{min-height:17px;font-size:12px;line-height:1.4}
.admin-help{font-size:12px;line-height:1.6;color:#a2b6cf;margin-bottom:12px}.devices{display:grid;gap:10px;margin-bottom:13px}
.device{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #30435e;padding:10px 0}
.device strong{font-size:12px}.device small{color:#8da8c4;font-size:10px;display:block;margin-top:6px}
.device button{background:#46303d;color:#ffb2bb;border:1px solid #8a4655;border-radius:9px;padding:8px;font-size:11px;cursor:pointer}
.secondary-action{width:100%;padding:12px;color:#cfe4ff;background:#223c58;border:1px solid #4f708f;border-radius:11px;font-weight:700;cursor:pointer}
.invite-result{margin-top:13px;background:#0f2c32;border:1px solid #36776d;padding:13px;border-radius:11px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.invite-result code{user-select:all;-webkit-user-select:all;font-size:12px;color:#9ff2da}

.unlock-timer{padding:10px 12px;border:1px solid #3271aa;border-radius:12px;margin:10px 0 14px;color:#95d0ff;background:rgba(20,95,160,.10);font-size:.9rem;font-weight:650;}

/* 0.2.2 Calderell branding, light/dark mode, PWA app-icon proportions */
.header-side{display:flex;align-items:center;gap:12px}
.theme-toggle{width:39px;height:39px;display:grid;place-items:center;flex:none;border-radius:11px;border:1px solid #38516d;color:#b8d3f4;background:#14263e;cursor:pointer;transition:background .2s}
.theme-toggle:hover{background:#223c5c}
.credit{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:11px;line-height:1.45}
.credit picture{height:16px;display:flex;align-items:center;max-width:106px;flex:none}
.credit img{width:105px;max-height:18px;object-fit:contain;display:block}
.credit-rule{width:1px;height:18px;background:#46617c}
.footer-technical{align-self:center;text-align:right}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{
 color-scheme:light;--bg:#f4f8ff;--panel:#ffffff;--panel2:#f0f5fc;--line:#d3e0f0;--text:#14243b;--muted:#546a84;
 --mint:#146c51;--blue:#145db3;--orange:#98621b;--red:#a22a39;
}
html[data-theme="light"]{background:#f4f8ff}
html[data-theme="light"] body{background:radial-gradient(ellipse 80% 35% at 50% -12%,#d3e7ff 0,transparent 96%),#f4f8ff;color:var(--text)}
html[data-theme="light"] .surface{background:linear-gradient(155deg,#fff 30%,#f7faff 100%);border-color:#d8e4f1;box-shadow:0 8px 25px #204a8110}
html[data-theme="light"] .brand-icon{background:linear-gradient(140deg,#e4f0ff,#d4e5f8);border-color:#c5d9ef}
html[data-theme="light"] .logo-garage{border-color:#396b9d}
html[data-theme="light"] .logo-garage:before,html[data-theme="light"] .logo-garage:after{border-color:#396b9d}
html[data-theme="light"] .theme-toggle{color:#265c94;background:#e8f2ff;border-color:#bacee7}
html[data-theme="light"] .connect-pill{background:#f1f7ff;border-color:#c9d9eb;color:#304e70}
html[data-theme="light"] .connect-pill.online{background:#e5f8ee;border-color:#9cd2b5;color:#155a3c}
html[data-theme="light"] .connect-pill.offline{background:#fff0f0;border-color:#efb7bb;color:#8f2430}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .small-label{color:#4774a3}
html[data-theme="light"] .hero h2,html[data-theme="light"] h1,html[data-theme="light"] h3{color:#14243b}
html[data-theme="light"] .hero p,html[data-theme="light"] .progress-label,html[data-theme="light"] .progress-label strong{color:#456079}
html[data-theme="light"] .status-round{background:#e4f1ff;color:#386ba1}
html[data-theme="light"] .track{background:#dce9f7}
html[data-theme="light"] .control{box-shadow:none}
html[data-theme="light"] .control-open{background:linear-gradient(160deg,#ecfaf3,#dcf4e8);border-color:#97d7b6}
html[data-theme="light"] .control-stop{background:linear-gradient(160deg,#fff2f2,#fce5e8);border-color:#e8adb6}
html[data-theme="light"] .control-close{background:linear-gradient(160deg,#eaf3ff,#e0edff);border-color:#a8c8f5}
html[data-theme="light"] .control .action-main{color:#21334b}
html[data-theme="light"] .control .action-small{color:#56708b}
html[data-theme="light"] .control-open .action-symbol{color:#147455}
html[data-theme="light"] .control-stop .action-symbol{color:#b02d42}
html[data-theme="light"] .control-close .action-symbol{color:#1461af}
html[data-theme="light"] .control:disabled{opacity:.4}
html[data-theme="light"] .notice{color:#8b3944;background:#fff3f1;border-color:#ffd4d1}
html[data-theme="light"] .command-message{color:#4b6582}
html[data-theme="light"] .command-message.good{color:#156e4c}
html[data-theme="light"] .command-message.bad{color:#b63142}
html[data-theme="light"] .detail-list>div,html[data-theme="light"] .history li,html[data-theme="light"] .device{border-color:#dde6f3}
html[data-theme="light"] .detail-list span,html[data-theme="light"] .history li,html[data-theme="light"] .admin-help{color:#566d86}
html[data-theme="light"] .detail-list strong{color:#203753}
html[data-theme="light"] .refresh,html[data-theme="light"] .secondary-action{background:#eaf3ff;color:#24588a;border-color:#bad3ee}
html[data-theme="light"] .unlock-timer{background:#eaf4ff;color:#205e97;border-color:#b8d3f2}
html[data-theme="light"] .footer,html[data-theme="light"] .footer b{color:#6c829b}
html[data-theme="light"] .credit-rule{background:#9aafc7}
html[data-theme="light"] .login{background:#dbe5f7f2}
html[data-theme="light"] .login-card{background:#fff;border-color:#cfdef0;box-shadow:0 18px 60px #2a4d7833}
html[data-theme="light"] .login-card p,html[data-theme="light"] .login-card .auth-note{color:#536e89}
html[data-theme="light"] .login-card label{color:#4a6784}
html[data-theme="light"] .login-card input{background:#f4f8ff;color:#1c3451;border-color:#bacde4}
html[data-theme="light"] .login-card .auth-link{background:#f1f7ff;color:#215d97;border-color:#bacde4}
html[data-theme="light"] .invite-result{color:#285c54;background:#eaf7f3;border-color:#9bc8bd}
html[data-theme="light"] .invite-result code{color:#155644}
@media(max-width:750px){
 .footer{align-items:center;flex-direction:column;text-align:center;gap:9px}
 .footer-technical{text-align:center}
 .credit{justify-content:center}
 .header-side{gap:7px}.theme-toggle{width:34px;height:34px}
 .connect-pill{font-size:10px}
}
@media(max-width:365px){.credit{gap:7px}.brand{gap:8px}h1{font-size:17px}.brand-icon{width:39px;height:39px}}

/* V1: genuine single-tap commands, responsive Calderell branding */
.hold-fill{display:none!important}
.control:focus-visible{outline:3px solid #6eaeff;outline-offset:3px}
.brand-icon img{width:33px;height:33px;object-fit:cover;border-radius:9px}
@media(max-width:750px){.control{touch-action:manipulation;min-height:118px}.control .action-small{font-size:10px}}