: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}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;height:100%;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%;display:flex;flex-direction:column}.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%;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:1.25rem;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.1rem;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;background:#000;display:flex;flex-direction:column}.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}.toolbar{flex:0 0 auto;display:flex;gap:.4rem;padding:.55rem .65rem calc(.55rem + env(safe-area-inset-bottom));background:#0c0f14eb;border-top:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}.toolbar button{flex:0 0 auto;min-width:2.6rem;height:2.6rem;border-radius:10px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-size:.8rem;font-weight:600}.toolbar button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.status-pill{position:absolute;top:calc(.75rem + env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:5;padding:.35rem .75rem;border-radius:999px;background:#0c0f14cc;border:1px solid var(--border);font-size:.8rem;color:var(--muted)}