:root{--bg: #0f1116;--card: #181b22;--card-border: #262a33;--text: #e6e8ec;--muted: #9aa0aa;--accent: #fb7299;--accent-hover: #ff85a8;--ok: #4ade80;--err: #f87171;--radius: 12px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{max-width:760px;margin:0 auto;padding:32px 20px 64px}.hero{text-align:center;margin-bottom:28px}.lang-bar{display:flex;justify-content:flex-end;margin-bottom:12px}.dropdown{position:relative}.dropdown-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--card);border:1px solid var(--card-border);border-radius:8px;padding:6px 12px;color:var(--text);font-size:.85rem;font-family:inherit;cursor:pointer;transition:border-color .15s ease}.dropdown-btn:hover,.dropdown-btn:focus-visible{outline:none;border-color:var(--accent)}.dropdown-current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-caret{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted);transition:transform .15s ease}.dropdown.open .dropdown-caret{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;max-height:60vh;overflow-y:auto;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--card-border);border-radius:8px;box-shadow:0 8px 24px #0006;z-index:20}.dropdown-option{padding:8px 14px;border-radius:6px;color:var(--text);font-size:.85rem;white-space:nowrap;cursor:pointer;transition:background .12s ease}.dropdown-option:hover{background:#20242c}.dropdown-option[aria-selected=true]{color:var(--accent);font-weight:600}.hero h1{margin:0 0 8px;font-size:1.8rem;background:linear-gradient(90deg,var(--accent),#7dd3fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--muted);margin:0}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}.card h2{margin:0 0 6px;font-size:1.1rem}.hint{color:var(--muted);font-size:.85rem;margin:4px 0}.btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s ease}.btn:hover:not(:disabled){background:var(--accent-hover)}.btn:disabled{opacity:.55;cursor:default}.btn-ghost{background:transparent;border:1px solid var(--card-border);color:var(--muted)}.btn-ghost:hover:not(:disabled){background:#20242c}.btn-small{padding:5px 10px;font-size:.78rem}.login-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}.status{font-size:.85rem;color:var(--muted)}.status-ok{color:var(--ok)}.status-err{color:var(--err)}.qr-box{margin-top:16px;text-align:center}.qr-box img{width:220px;height:220px;border-radius:8px;background:#fff;padding:8px}.room-form{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.room-form input{flex:1;min-width:220px;background:#0f1116;border:1px solid var(--card-border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:.9rem}.room-form input:focus{outline:none;border-color:var(--accent)}.error{color:var(--err);font-size:.85rem;margin-top:10px}.room-meta{margin:12px 0 16px}.room-title{font-size:1.15rem;font-weight:600}.room-sub{color:var(--muted);font-size:.85rem;margin-top:2px}.best-box{background:#12151b;border:1px solid var(--card-border);border-radius:8px;padding:14px 16px;margin-bottom:16px}.best-box h3{margin:0 0 10px;font-size:1rem}.best-label,.stream-key{font-size:.8rem;color:var(--accent);margin-bottom:6px;font-weight:600}.stream-url{display:flex;align-items:center;gap:8px;background:#0f1116;border:1px solid var(--card-border);border-radius:8px;padding:8px 10px;margin-bottom:8px}.stream-url code{flex:1;font-size:.75rem;word-break:break-all;color:var(--text);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.all-toggle{margin:4px 0 12px;font-size:.9rem}.all-toggle label{display:flex;align-items:center;gap:8px;cursor:pointer}.quality-group{border-top:1px solid var(--card-border);padding-top:14px;margin-top:14px}.quality-group h4{margin:0 0 10px;font-size:.95rem}.stream-sub{margin-bottom:12px}.hint-box{background:#12151b;border:1px solid var(--card-border);border-left:3px solid var(--accent);border-radius:8px;padding:10px 12px;margin:10px 0;font-size:.85rem;color:var(--muted);word-break:break-word}.page-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.page-label{font-size:.85rem;color:var(--muted)}.page-row .dropdown-btn{max-width:min(100%,420px)}.page-row .dropdown-menu{right:auto;left:0;width:max-content;max-width:min(85vw,480px)}.page-row .dropdown-option{white-space:normal}.track{margin-bottom:10px}.track-label{font-size:.8rem;color:var(--muted);margin-bottom:4px}.best-box .btn-small{margin-top:2px}.footer{text-align:center;margin-top:24px}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{color:var(--accent-hover);text-decoration:underline}