:root{color-scheme:dark;--bg: #0c0f14;--bg-elevated: #141a22;--bg-soft: #1a222d;--border: #2a3544;--text: #e8eef6;--muted: #8b9bb0;--accent: #3d8bfd;--accent-soft: rgba(61, 139, 253, .15);--danger: #ff6b6b;--ok: #3ecf8e;--radius: 14px;--font: "Segoe UI", system-ui, -apple-system, sans-serif;--toolbar-h: 3.5rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent}button,input{font:inherit}a{color:var(--accent)}.shell{min-height:100%;min-height:100dvh;display:flex;flex-direction:column;padding:var(--safe-top) env(safe-area-inset-right,0) var(--safe-bottom) env(safe-area-inset-left,0)}.panel{width:min(420px,calc(100% - 2rem));margin:auto;padding:1.5rem;background:linear-gradient(180deg,var(--bg-elevated),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius)}.brand{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .25rem}.sub{color:var(--muted);margin:0 0 1.5rem;line-height:1.4}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}input{width:100%;padding:.85rem .95rem;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);margin-bottom:1rem}input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:2.75rem;padding:.9rem 1rem;border:none;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}.error{color:var(--danger);font-size:.9rem;margin:0 0 1rem}.dash{padding:calc(1.25rem + var(--safe-top)) 1.25rem calc(1.25rem + var(--safe-bottom));max-width:720px;margin:0 auto;width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.device-card{border:1px solid var(--border);background:var(--bg-elevated);border-radius:var(--radius);padding:1.15rem;margin-bottom:.85rem}.device-card h2{margin:0 0 .35rem;font-size:1.15rem}.meta{color:var(--muted);font-size:.9rem;margin-bottom:1rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;font-size:.75rem;background:var(--bg-soft);border:1px solid var(--border)}.badge.online{color:var(--ok);border-color:#3ecf8e59}.badge.offline{color:var(--muted)}.viewer-root{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;height:100dvh;background:#000;display:flex;flex-direction:column;overflow:hidden}.viewer-chrome{position:absolute;top:calc(.65rem + var(--safe-top));left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 .75rem;pointer-events:none}.viewer-chrome>*{pointer-events:auto}.viewer-back{position:absolute;left:calc(.65rem + env(safe-area-inset-left,0px));min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;border-radius:999px;border:1px solid var(--border);background:#0c0f14d9;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600}.viewer-stage{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:#000;touch-action:none}.viewer-stage .display{position:absolute;top:0;left:0;transform-origin:0 0}.soft-keyboard-input{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0;pointer-events:none}.toolbar{flex:0 0 auto;display:flex;gap:.45rem;padding:.55rem .65rem calc(.55rem + var(--safe-bottom));background:#0c0f14f0;border-top:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;transition:transform .22s ease,opacity .22s ease;z-index:5}.toolbar--hidden{position:absolute;left:0;right:0;bottom:0;transform:translateY(110%);opacity:0;pointer-events:none}.toolbar button{flex:0 0 auto;min-width:2.75rem;min-height:2.75rem;height:2.75rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:.8rem;font-weight:600;scroll-snap-align:start}.toolbar button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.toolbar-abc{letter-spacing:.04em}.toolbar-fab{position:absolute;left:50%;bottom:calc(.65rem + var(--safe-bottom));transform:translate(-50%);z-index:6;min-width:3rem;min-height:2.5rem;border-radius:999px;border:1px solid var(--border);background:#0c0f14e6;color:var(--text);font-size:1rem;font-weight:700}.status-pill{padding:.4rem .85rem;border-radius:999px;background:#0c0f14d9;border:1px solid var(--border);font-size:.8rem;color:var(--muted);max-width:min(70vw,16rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .35s ease}.status-pill--ok{color:var(--ok);border-color:#3ecf8e59}.status-pill--fade{opacity:0;pointer-events:none}@media(max-width:640px){.dash{padding-left:1rem;padding-right:1rem}.device-card .btn{min-height:3rem;font-size:1rem}.toolbar{gap:.4rem;padding-top:.65rem}.toolbar button{min-width:3rem;min-height:3rem;height:3rem}}@media(orientation:landscape)and (max-height:500px){.toolbar{padding:.35rem .5rem calc(.35rem + var(--safe-bottom))}.toolbar button{min-width:2.4rem;min-height:2.4rem;height:2.4rem;font-size:.75rem}.viewer-back,.status-pill{min-height:2.25rem;font-size:.75rem}}