:root{--bg: #0f1216;--surface: #181c22;--surface-2: #20252d;--border: #2a313b;--text: #e7ecf2;--muted: #98a2b3;--accent: #4f8cff;--online: #2ecc71;--offline: #6b7280;--danger: #ef4444;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.page{max-width:1100px;margin:0 auto;padding:32px 24px 64px}.page__title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.page__header h1{margin:0 0 4px;font-size:24px;letter-spacing:.2px}.ws-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:help}.ws-pill__dot{width:8px;height:8px;border-radius:50%;background:currentColor}.ws-pill--connecting{color:#f59e0b;border-color:#f59e0b66}.ws-pill--open{color:var(--online);border-color:#2ecc7166}.ws-pill--closed{color:var(--muted)}.ws-pill--error{color:var(--danger);border-color:#ef444466}.page__sub{margin:0;color:var(--muted);font-size:14px}.controls{display:flex;gap:12px;align-items:end;margin:24px 0 16px;flex-wrap:wrap}.uid-select{display:flex;flex-direction:column;gap:6px;min-width:280px}.uid-select__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.uid-select select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;min-height:40px}.refresh{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;min-height:40px}.refresh:disabled{opacity:.6;cursor:not-allowed}.signout{margin-left:auto;background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;min-height:36px}.signout:hover{border-color:var(--accent);color:var(--accent)}.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login__card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:28px 24px;display:flex;flex-direction:column;gap:12px}.login__title{margin:0;font-size:22px}.login__sub{margin:0 0 8px;color:var(--muted);font-size:14px}.login__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.login__input{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14px;min-height:40px}.login__input:focus{outline:none;border-color:var(--accent)}.login__error{background:#ef44441a;border:1px solid rgba(239,68,68,.4);color:#fecaca;padding:8px 12px;border-radius:8px;font-size:13px}.login__submit{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:14px;cursor:pointer;min-height:40px;margin-top:4px}.login__submit:disabled{opacity:.6;cursor:not-allowed}.error{background:#ef44441a;border:1px solid rgba(239,68,68,.4);color:#fecaca;padding:12px 14px;border-radius:8px;font-size:14px;margin-top:8px}.loading,.empty{color:var(--muted);padding:24px 0;font-size:14px}.device-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start}.device-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.device-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px}.device-card__name{margin:0;font-size:15px;font-weight:600;line-height:1.3}.device-card__meta{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:12px}.device-card__category{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 8px;text-transform:uppercase;letter-spacing:.5px}.device-card__id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}.pill{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px}.pill--online{background:#2ecc7126;color:var(--online);border:1px solid rgba(46,204,113,.4)}.pill--offline{background:#6b72802e;color:#cbd5e1;border:1px solid var(--border)}.device-card--clickable{cursor:pointer}.device-card--clickable:hover{border-color:var(--accent)}.device-card--offline{opacity:.7}.stream-player{display:flex;flex-direction:column;gap:8px}.stream-player__video-wrap{position:relative}.stream-player__video{width:100%;aspect-ratio:16 / 9;background:#000;border-radius:8px;border:1px solid var(--border);object-fit:cover;display:block}.stream-player--large .stream-player__video{aspect-ratio:16 / 9;max-height:70vh;object-fit:contain}.stream-player__overlay{position:absolute;top:8px;display:flex;gap:6px}.stream-player__overlay--right{right:8px}.stream-player__overlay--left{left:8px}.stream-player__overlay--bottom-right{top:auto;bottom:8px;right:8px}.stream-player__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:#0000008c;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s ease}.stream-player__video-wrap:hover .stream-player__icon-btn,.stream-player__icon-btn:focus-visible{opacity:1}.stream-player__icon-btn:hover{background:#000000bf}.stream-player__icon-btn:disabled{cursor:not-allowed;opacity:0}.stream-player__quality-btn{font-size:11px;font-weight:700;letter-spacing:.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.stream-player__video:fullscreen{width:100vw;height:100vh;border-radius:0;border:0;object-fit:contain}.stream-player__spinner{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0006;border-radius:8px;pointer-events:none}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:stream-spin .8s linear infinite}@keyframes stream-spin{to{transform:rotate(360deg)}}.stream-player__footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.stream-player__status{margin:0;font-size:12px;color:var(--muted)}.stream-player__status--connected,.stream-player__status--completed{color:var(--online)}.stream-player__status--failed,.stream-player__status--disconnected{color:var(--danger)}.stream-player__error{margin:0;font-size:12px;color:#ffd4d4;text-align:center;background:#0000008c;padding:6px 10px;border-radius:6px;border:1px solid rgba(239,68,68,.5)}.stream-player__center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:#00000073;border-radius:8px}.stream-player__center>*{pointer-events:auto}.stream-player__center-stack{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:80%}.stream-player__retry{padding:8px 18px;font-size:14px;font-weight:600;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:var(--accent, #2563eb);color:#fff;cursor:pointer;box-shadow:0 4px 12px #0006}.stream-player__retry:hover{filter:brightness(1.1)}.device-card__details-link{margin-left:auto;background:transparent;border:none;color:var(--accent);font-size:12px;cursor:pointer;padding:0}.device-card__details-link:hover{text-decoration:underline}.back-button{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:4px 10px;font-size:13px;cursor:pointer}.back-button:hover{border-color:var(--accent)}.details{margin-top:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}.details__row{display:flex;align-items:center;justify-content:space-between;gap:12px}.details__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.details__code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text);word-break:break-all}.playback{margin-top:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px}.playback__head{display:flex;gap:8px;align-items:center}.playback__toggle{padding:6px 12px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:var(--accent);color:#fff;cursor:pointer}.playback__toggle:disabled{opacity:.5;cursor:not-allowed}.playback__toggle:hover:not(:disabled){filter:brightness(1.1)}.playback__refresh{padding:4px 10px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}.playback__refresh:hover{border-color:var(--accent)}.playback__status{margin:0;font-size:13px;color:var(--muted)}.playback__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}.playback__item-btn{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;cursor:pointer;text-align:left}.playback__item-btn:hover{border-color:var(--accent)}.playback__duration{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}