@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #0a0a0b;--surface: #141416;--surface-hover: #1c1c1f;--border: #27272a;--text: #fafafa;--text-muted: #71717a;--accent: #6d5dfc;--accent-hover: #5b4de0;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--radius: 8px;--radius-lg: 12px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{color-scheme:dark}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.app{max-width:960px;margin:0 auto;padding:24px 20px;min-height:100vh;display:flex;flex-direction:column;gap:20px}.header{display:flex;align-items:center;gap:10px}.header-logo{width:28px;height:28px;background:var(--accent);border-radius:6px;display:grid;place-items:center}.header-logo svg{width:16px;height:16px;fill:#fff}.header-title{font-size:18px;font-weight:600;letter-spacing:-.02em}.connection-form{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);flex-wrap:wrap}.field{display:flex;align-items:center;gap:6px}.field-label{font-size:13px;font-weight:500;color:var(--text-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.field-input{padding:6px 10px;font-size:13px;font-family:var(--font-mono);background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);outline:none;width:120px;transition:border-color .15s}.field-input:focus{border-color:var(--accent)}.btn{padding:6px 16px;font-size:13px;font-weight:500;font-family:var(--font-sans);border:1px solid transparent;border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:transparent;color:var(--text-muted);border-color:var(--border)}.btn-secondary:hover{background:var(--surface-hover);color:var(--text)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.status{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:500;color:var(--text-muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.status-dot[data-state=connected]{background:var(--success);box-shadow:0 0 6px var(--success)}.status-dot[data-state=connecting]{background:var(--warning);animation:pulse 1.2s ease-in-out infinite}.status-dot[data-state=error]{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.player{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000;aspect-ratio:16 / 9;border:1px solid var(--border)}.player video{width:100%;height:100%;object-fit:contain;display:block}.player-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--text-muted);font-size:14px;pointer-events:none}.player-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;padding:8px 12px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .2s}.player:hover .player-controls,.player:fullscreen .player-controls{opacity:1}.stats-overlay{font-family:var(--font-mono);font-size:11px;color:#ffffffb3;pointer-events:none}.fullscreen-btn{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;background:#ffffff1a;border:none;border-radius:6px;color:#fffc;cursor:pointer;transition:background .15s,color .15s;flex-shrink:0}.fullscreen-btn:hover{background:#fff3;color:#fff}.fullscreen-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.fullscreen-btn svg{width:18px;height:18px}.player:fullscreen{border-radius:0;border:none;aspect-ratio:unset}.player:fullscreen video{height:100vh}.watch-page{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;overflow:hidden}.watch-page video{width:100%;height:100%;object-fit:contain;display:block}.watch-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.watch-status{font-size:14px;color:var(--text-muted)}.watch-status.connecting{color:var(--warning)}.watch-status.error{color:var(--error)}.watch-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;padding:8px 12px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .2s}.watch-page:hover .watch-controls{opacity:1}@media(max-width:640px){.app{padding:16px 12px}.connection-form{gap:6px;padding:10px 12px}.field-input{width:80px}.status{margin-left:0;width:100%;margin-top:4px}}