/* Hosted-app additions: sign-in, not-invited, connect a Mac, account menu. Tokens come from app.css (BRAND.md). */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 14px var(--font-sans);min-height:44px;padding:12px 20px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--signal);color:#f8f8fc}.btn.primary:hover{background:var(--signal-glow)}
.btn.secondary{background:var(--background);color:var(--foreground);border-color:var(--border)}.btn.secondary:hover{background:var(--accent)}
.btn.sm{min-height:36px;padding:8px 14px;font-size:13px}
.btn:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
.gate{min-height:calc(100vh - 56px);display:grid;place-items:center;padding:48px 1.25rem}
.gate-card{width:min(100%,520px);background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:48px 44px}
.gate-card h1{font-family:var(--font-display);font-weight:400;font-size:3.25rem;line-height:1;margin:16px 0 0;text-wrap:balance}
.gate-card p{color:var(--muted-foreground);line-height:1.625;margin:18px 0 0}
.gate-card .actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.gate-card .fine{font-size:13px;margin-top:28px;padding-top:20px;border-top:1px solid var(--hairline)}
.gate-card .err{color:#ff8aa0;font-size:14px;border:1px solid rgba(245,25,69,.4);background:rgba(245,25,69,.08);padding:10px 12px;border-radius:var(--radius)}
.gglyph{width:18px;height:18px;background:#fff;border-radius:2px;display:grid;place-items:center}
.who{font-size:13px;color:var(--muted-foreground);white-space:nowrap}
.devpill{font-family:var(--font-mono);font-size:11px;color:var(--accent-mint);border:1px solid rgba(40,212,178,.4);padding:3px 8px;border-radius:var(--radius)}
code.cmd{display:block;font:400 13px/1.6 var(--font-mono);background:var(--background);border:1px solid var(--hairline);border-radius:var(--radius);padding:14px 16px;white-space:pre-wrap;word-break:break-all;color:var(--foreground)}
.connect{max-width:760px}.connect ol{color:var(--muted-foreground);line-height:1.8;padding-left:1.2rem}
.homes{display:grid;gap:12px;margin-top:20px}.home-row{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:18px 20px}
.home-row b{font-family:var(--font-display);font-weight:400;font-size:22px}.home-row .meta{font-size:13px;color:var(--muted-foreground)}
.form-row{display:flex;gap:12px;margin-top:20px}
input[type=text],input[type=password]{font:400 14px var(--font-sans);background:var(--background);color:var(--foreground);border:1px solid var(--border);padding:10px 12px;border-radius:var(--radius);min-height:44px;flex:1}input:focus{outline:1px solid var(--signal)}
.tokenbox{margin-top:16px;background:var(--card);border:1px solid rgba(149,90,255,.4);border-radius:var(--radius-xl);padding:20px}
.empty{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:28px;margin-top:24px}
header .eyebrow{white-space:nowrap}
.hint{font:400 13px/1.55 var(--font-sans,'Inter Tight');color:rgba(255,255,255,.62);margin:12px 0 0;padding:10px 14px;border-left:2px solid #28d4b2;background:rgba(40,212,178,.06);border-radius:6px}
.hint b{color:#fff;font-weight:500}
details.adv{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
details.adv summary{cursor:pointer;font:400 12px/1.4 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#279cff}
details.adv summary:hover{color:#955aff}
details.adv a{color:#b883ff}
#dl{background:linear-gradient(90deg,#279cff,#955aff,#b883ff)}
.assist{margin-top:56px}.assist h2{font:400 2.4rem/1.05 var(--font-display);margin:10px 0 0}.assist h2 em{font-style:italic}
.urlbox{display:flex;gap:12px;align-items:center;margin-top:20px}.urlbox code.cmd{flex:1;color:#28d4b2}
.assist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:20px}
.assist-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:18px 20px}
.assist-card b{font:400 24px var(--font-display)}.assist-card ol{margin:10px 0 0;padding-left:1.1rem;font-size:14px;line-height:1.7;color:var(--muted-foreground)}.assist-card a{color:#b883ff}
.sc-list{color:var(--muted-foreground);line-height:1.9;font-size:14px}.sc-list code{font-family:var(--font-mono);font-size:12.5px;color:#fff;background:#060611;border:1px solid var(--hairline);padding:2px 6px;border-radius:6px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);margin-right:8px;vertical-align:middle}.dot.on{background:#28d4b2;box-shadow:0 0 10px #28d4b2}
/* Add devices (devices.html) */
.btn.grad{background:linear-gradient(90deg,#279cff,#955aff,#b883ff);color:#f8f8fc}.btn.grad:hover{filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.dev{max-width:1120px}.dev a{color:#b883ff}
.dev-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px}
.dev-status{flex:1;min-width:280px;background:#0d0e1c;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:14px 18px;font-size:14px;line-height:1.5;color:var(--muted-foreground)}.dev-status b{color:#fff;font-weight:500}.dev-status.ok{border-color:rgba(40,212,178,.35)}.dev-status.warn{border-color:rgba(255,190,90,.35)}
.homepick{font:400 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);display:flex;gap:10px;align-items:center}
.homepick select{font:400 14px var(--font-sans);background:#060611;color:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;min-height:40px}
.dev-progress{margin-top:16px;background:#0d0e1c;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:20px 22px}
.dev-progress .count{display:flex;align-items:baseline;gap:10px}.dev-progress .big{font:400 3rem/1 var(--font-display);background:linear-gradient(90deg,#279cff,#955aff,#b883ff);-webkit-background-clip:text;background-clip:text;color:transparent}.dev-progress .of{font-size:15px;color:var(--muted-foreground)}
.dev-progress .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);margin:14px 0 10px;overflow:hidden}.dev-progress .bar i{display:block;height:100%;background:linear-gradient(90deg,#279cff,#955aff,#b883ff);border-radius:6px;transition:width .4s}
.dev-progress p{margin:0;font-size:13px}
.dev-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media (max-width:860px){.dev-grid{grid-template-columns:1fr}}
.step-card,.queue-card{background:#0d0e1c;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:24px 26px;min-width:0}.step-card{border-color:rgba(149,90,255,.4)}
.step-card h2,.queue-card h2,.dev-sec h2{font:400 1.9rem/1.1 var(--font-display);margin:8px 0 0}
.steps{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}.steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--muted-foreground)}.steps b{color:#fff;font-weight:500}
.steps .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--font-mono);color:#fff;background:linear-gradient(135deg,#279cff,#955aff)}
#addForm{margin-top:20px;display:grid;gap:12px}.fld{display:grid;gap:6px;min-width:0}.fld span{font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}.fld i{text-transform:none;letter-spacing:0;font-style:normal;opacity:.7}
.fld input{width:100%;box-sizing:border-box}#code{font:400 18px/1 var(--font-mono);letter-spacing:.08em;color:#28d4b2}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:520px){.fld-row{grid-template-columns:1fr}}
#addBtn{justify-self:start}.form-err{margin:0;color:#ff8aa0;font-size:14px;border:1px solid rgba(245,25,69,.4);background:rgba(245,25,69,.08);padding:10px 12px;border-radius:var(--radius)}
.step-card .fine{font-size:12.5px;color:var(--muted-foreground);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--hairline);line-height:1.55}
.queue{display:grid;gap:10px;margin-top:16px}.qitem{border:1px solid var(--hairline);border-radius:var(--radius);padding:12px 14px;background:#060611}
.qh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;min-width:0}.qh b{font-weight:500;min-width:0;overflow-wrap:anywhere}.qh .mono{font:400 12px var(--font-mono);color:var(--muted-foreground);margin-left:auto}
.qitem .st{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:rgba(39,156,255,.14);color:#279cff}
.qitem.working .st{background:rgba(149,90,255,.16);color:#b883ff}.qitem.done .st{background:rgba(40,212,178,.14);color:#28d4b2}.qitem.failed .st{background:rgba(245,25,69,.12);color:#ff8aa0}
.qitem p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
.dev-sec{margin-top:48px}.dev-sec .sechead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.narrow{max-width:680px;font-size:14px;line-height:1.6}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:16px}
.room{background:#0d0e1c;border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:16px 18px;min-width:0}.room h3{font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#279cff;margin:0 0 8px}.room h3 span{color:var(--muted-foreground);margin-left:6px}
.devrow{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.05);min-width:0}.devrow:first-of-type{border-top:0}
.devrow .dot{margin-right:0;flex:none}.dn{flex:1;min-width:0;display:grid}.dn b{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dn span{font-size:12px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none;max-width:50%}.chip{font:400 11px var(--font-mono);padding:3px 7px;border-radius:5px;border:1px solid var(--hairline);color:var(--muted-foreground);white-space:nowrap}
.chip.lights{color:#28d4b2;border-color:rgba(40,212,178,.35)}.chip.temperature{color:#279cff;border-color:rgba(39,156,255,.35)}.chip.shades{color:#b883ff;border-color:rgba(149,90,255,.35)}.chip.bad{color:#ff8aa0;border-color:rgba(245,25,69,.35)}
/* small screens: wrapping header, smaller hero (shared by connect + devices) */
@media (max-width:900px){header{height:auto;min-height:56px;flex-wrap:wrap;padding:10px 1.25rem;gap:8px 10px}header .who{display:none}.hero-heading{font-size:3rem}}
@media (max-width:560px){header>.eyebrow{display:none}header .sp{flex-basis:100%;height:0}.hero-heading{font-size:2.5rem}.step-card,.queue-card{padding:20px 18px}.rooms{grid-template-columns:1fr}.chips{max-width:45%}}
.unnamed{font-size:13.5px;line-height:1.55;margin:4px 0 0}
.homepick[hidden]{display:none}
/* ---- Cameras ---- */
.cam-first{margin-top:28px}.cam-add{margin-top:40px}
.cam-rooms{display:grid;gap:22px;margin-top:16px}.cam-room h3{font:400 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#279cff;margin:0 0 10px}.cam-room h3 span{color:var(--muted-foreground);margin-left:6px}
.cam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.cam{background:#0d0e1c;border:1px solid var(--hairline);border-radius:var(--radius-xl);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.cam .shot{position:relative;aspect-ratio:16/9;background:#060611;border-bottom:1px solid var(--hairline)}.cam .shot img{width:100%;height:100%;object-fit:cover;display:block}
.cam .noshot{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(149,90,255,.14),transparent 60%)}.cam .noshot span{font:400 12px var(--font-mono);color:var(--muted-foreground);letter-spacing:.04em}
.cam .spin{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:#955aff;animation:camspin .8s linear infinite}@keyframes camspin{to{transform:rotate(360deg)}}
.cam-meta{display:flex;align-items:center;gap:8px;padding:12px 14px;min-width:0}.cam-meta .btn{flex:none}.cam-meta .ghost{padding-left:10px;padding-right:10px}
.cam-err{margin:0 14px 12px;font-size:12.5px;line-height:1.45;color:#ffbe5a}
.modelfld{margin-top:16px}.modelfld select{width:100%}
#camForm{margin-top:20px;display:grid;gap:12px}#camForm #url{font:400 14px/1.2 var(--font-mono);color:#28d4b2}
.form-err.ok{color:#28d4b2;border-color:rgba(40,212,178,.4);background:rgba(40,212,178,.08)}.warnt{color:#ffbe5a}
.cam-add .queue .devrow{border-top:1px solid rgba(255,255,255,.05)}