:root{color-scheme:dark;--bg: #0A0A0B;--panel: #141416;--panel-2: #1C1C1F;--panel-hover: #242428;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--text: #F5F5F7;--text-dim: #98989D;--text-faint: #6E6E73;--accent: #0A84FF;--accent-hover: #3395FF;--accent-soft: rgba(10, 132, 255, .14);--accent-contrast: #FFFFFF;--success: #30D158;--warning: #FFD60A;--danger: #FF453A;--success-border: rgba(48, 209, 88, .32);--warning-border: rgba(255, 214, 10, .28);--danger-border: rgba(255, 69, 58, .3);--font-sans: "Inter", "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;--fs-title: 17px;--fs-body: 14px;--fs-small: 13px;--fs-caption: 12px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--radius: 12px;--radius-lg: 12px;--radius-pill: 999px;--ease: cubic-bezier(.32, .72, .24, 1);--dur: .16s;--shadow-pop: 0 16px 48px rgba(0, 0, 0, .55), 0 0 0 .5px var(--border-strong);--shadow-hover: 0 4px 16px rgba(0, 0, 0, .3);--container: 1280px;--container-narrow: 520px}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-body)/1.6 var(--font-sans);letter-spacing:.1px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}::selection{background:var(--accent-soft);color:var(--text)}h1{font-size:var(--fs-title);font-weight:600;margin:0 0 var(--sp-3);letter-spacing:.2px}h2{font-size:var(--fs-body);font-weight:600;margin:0 0 var(--sp-3)}h3{font-size:var(--fs-small);font-weight:600;margin:0 0 var(--sp-3)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}code{background:var(--panel-2);padding:1px 5px;border-radius:var(--sp-1);font-family:var(--font-mono);font-size:.92em}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--panel-hover);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}::-webkit-scrollbar-track{background:transparent}.ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}.ic-fill{fill:currentColor;stroke:none}.card,.panel{background:var(--panel);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-4);transition:border-color var(--dur) var(--ease)}.card:hover{border-color:var(--border-strong)}button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);background:var(--panel-2);color:var(--text);border:.5px solid var(--border);border-radius:var(--radius-pill);padding:7px 16px;font:inherit;font-weight:500;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}button:hover:not(:disabled){background:var(--panel-hover);border-color:var(--border-strong)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary,button.join{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}button.primary:hover:not(:disabled),button.join:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button.secondary{background:var(--panel-2)}button.ghost{background:transparent;border-color:transparent;color:var(--text-dim)}button.ghost:hover:not(:disabled){background:var(--panel-2);color:var(--text)}button.danger{background:transparent;border-color:var(--danger-border);color:var(--danger)}button.danger:hover:not(:disabled){background:#ff453a1f;border-color:var(--danger)}input,select,textarea{background:var(--panel-2);color:var(--text);border:.5px solid var(--border);border-radius:var(--radius);padding:8px 12px;font:inherit;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}input::placeholder{color:var(--text-faint)}input:hover:not(:disabled),select:hover:not(:disabled){border-color:var(--border-strong)}input:focus,select:focus,textarea:focus{border-color:var(--accent);background:var(--bg);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}input:disabled,select:disabled{opacity:.5}input[readonly]{color:var(--text-dim)}input[type=range]{accent-color:var(--accent);padding:0;border:0;background:transparent}input[type=range]:disabled{accent-color:var(--border-strong)}.badge,.chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px 10px;border-radius:var(--radius-pill);font-size:var(--fs-caption);border:.5px solid var(--border);color:var(--text-dim);white-space:nowrap}.badge b{color:var(--text);font-weight:600}.chip{background:var(--panel-2)}.chip.me{color:var(--text);border-color:var(--success-border)}.chip .crown{color:var(--warning);display:inline-flex}.badge.host,.badge.media-loading{color:var(--warning);border-color:var(--warning-border)}.badge.viewer{color:var(--accent);border-color:#0a84ff59}.badge.media-ok,.badge.conn{color:var(--success);border-color:var(--success-border)}.badge.media-fail,.badge.conn.off{color:var(--danger);border-color:var(--danger-border)}.row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}.row+.row{margin-top:var(--sp-2)}.hint{color:var(--text-dim);font-size:var(--fs-caption)}.spacer,.row .spacer{flex:1}.glass{background:#0a0a0bb8;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}.sf-dialog-overlay{position:fixed;inset:0;z-index:40;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}.sf-dialog{width:min(440px,calc(100vw - 32px));background:var(--panel);border:.5px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--sp-6)}.sf-dialog h3{font-size:var(--fs-title);color:var(--text);margin:0 0 var(--sp-2)}.sf-dialog .sf-dialog-desc{color:var(--text-dim);font-size:var(--fs-small);margin:0 0 var(--sp-5)}.sf-dialog .sf-dialog-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5)}.sf-tabs{display:flex;gap:var(--sp-1);border-bottom:.5px solid var(--border);margin-bottom:var(--sp-4)}.sf-tab{background:none;border:0;border-radius:0;padding:8px 12px;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-1px}.sf-tab:hover:not(:disabled){background:none;color:var(--text)}.sf-tab[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}.sf-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}.sf-table th{text-align:left;font-weight:500;color:var(--text-dim);padding:8px 12px;border-bottom:.5px solid var(--border)}.sf-table td{padding:8px 12px;border-bottom:.5px solid var(--border)}.sf-table tbody tr{transition:background var(--dur) var(--ease)}.sf-table tbody tr:hover{background:var(--panel-2)}@media(max-width:560px){input,select,textarea{font-size:16px}button{min-height:40px}.card,.panel{padding:var(--sp-4) var(--sp-4)}}.settings-h{font-size:var(--fs-caption);font-weight:600;color:var(--text-dim);letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin:var(--sp-5) 0 var(--sp-2)}.provider-who{font-size:var(--fs-small);color:var(--text-dim);margin:0 0 var(--sp-3)}.provider-who b{color:var(--text)}.provider-row{display:flex;align-items:center;gap:var(--sp-2);border:.5px solid var(--border);border-radius:var(--radius);padding:8px var(--sp-3);font-size:var(--fs-small);transition:border-color var(--dur) var(--ease)}.provider-row:hover{border-color:var(--border-strong)}.provider-row .kind{font-size:11px;color:var(--text-dim);border:.5px solid var(--border);border-radius:var(--radius-pill);padding:1px 8px}.provider-row .url{color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-row button{margin:0 0 0 auto;padding:3px 12px;font-size:var(--fs-caption)}.provider-form{display:flex;flex-direction:column;gap:8px}.provider-form button{margin-top:2px}.provider-hint{color:var(--text-faint);font-size:var(--fs-caption);margin:var(--sp-2) 0;line-height:1.6}