:root{--bg: #f7f8fa;--surface: #ffffff;--border: #e5e7eb;--fg: #111827;--fg-muted: #6b7280;--accent-a: #2563eb;--accent-b: #dc2626;--panel-a-bg: #eff6ff;--panel-b-bg: #fef2f2;--radius: 12px;--shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05);--t: .28s cubic-bezier(.4, 0, .2, 1);--inactive: .2}[data-theme=dark]{--bg: #0c0e14;--surface: #161921;--border: #252832;--fg: #e4e6ed;--fg-muted: #636878;--accent-a: #3b82f6;--accent-b: #f87171;--panel-a-bg: #0d1526;--panel-b-bg: #1a0d0d}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;transition:background var(--t),color var(--t)}button{cursor:pointer;font-family:inherit}input{font-family:inherit}.theme-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:16px;line-height:1;color:var(--fg);transition:background var(--t),border-color var(--t)}.theme-btn:hover{background:var(--bg)}.user-view{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:relative;flex-shrink:0;min-height:52px;transition:background var(--t),border-color var(--t)}.match-names{display:flex;align-items:center;gap:10px;font-size:clamp(13px,2.8vw,22px);font-weight:700;letter-spacing:-.02em}.name-a{color:var(--accent-a)}.name-b{color:var(--accent-b)}.vs-sep{font-size:.65em;font-weight:400;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em}.top-bar .theme-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%)}.panels{display:flex;flex:1;overflow:hidden}.panel{flex:1;position:relative;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:background var(--t);overflow:hidden}.panel-a{background:var(--panel-a-bg);border-right:1px solid var(--border)}.panel-b{background:var(--panel-b-bg)}.panel-letter{font-size:clamp(80px,35vw,340px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--fg-muted);opacity:0;transition:color var(--t),transform var(--t),text-shadow var(--t),opacity .5s ease}.panel-name{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:clamp(11px,2vw,18px);font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.1em;transition:color var(--t),opacity var(--t)}.panel.active .panel-letter{opacity:1;transform:scale(1.06);transition:color var(--t),transform var(--t),text-shadow var(--t),opacity 0s}.panel-a.active .panel-letter{color:var(--accent-a);text-shadow:0 0 80px rgba(37,99,235,.5)}.panel-b.active .panel-letter{color:var(--accent-b);text-shadow:0 0 80px rgba(220,38,38,.5)}.panel-a.active .panel-name{color:var(--accent-a)}.panel-b.active .panel-name{color:var(--accent-b)}.panel.inactive .panel-name{opacity:var(--inactive)}@keyframes flash-signal{0%{opacity:1}25%{opacity:0}60%{opacity:1}80%{opacity:.7}to{opacity:1}}.panel.active.flash .panel-letter{animation:flash-signal .35s ease forwards}.info-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 20px;padding:10px 16px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;transition:background var(--t),border-color var(--t)}.info-chip{display:flex;align-items:center;gap:6px}.info-key{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);flex-shrink:0}.info-val{font-size:12px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;color:var(--fg);word-break:break-all}.info-sep{width:1px;height:14px;background:var(--border);flex-shrink:0}.no-conn-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade-in .2s ease}.no-conn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;text-align:center;max-width:320px;width:calc(100% - 48px);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:10px}.no-conn-icon{font-size:40px;animation:pulse-icon 1.5s ease infinite}.no-conn-title{margin:0;font-size:18px;font-weight:700;color:var(--fg)}.no-conn-desc{margin:0;font-size:13px;color:var(--fg-muted);line-height:1.5}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse-icon{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.dot-connected{background:#22c55e;box-shadow:0 0 5px #22c55eb3}.dot-connecting{background:#f59e0b;animation:blink 1s ease infinite}.dot-disconnected,.dot-kicked{background:#ef4444}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.warning-overlay{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}.warning-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px;transition:background var(--t),border-color var(--t)}.warning-icon{font-size:36px;display:block;text-align:center}.warning-block{display:flex;flex-direction:column;gap:8px}.warning-title{margin:0;font-size:16px;font-weight:700;color:var(--fg)}.warning-text{margin:0;font-size:14px;color:var(--fg-muted);line-height:1.6}.warning-divider{height:1px;background:var(--border)}.warning-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.oops-view{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}.oops-box{text-align:center;max-width:360px}.oops-icon{font-size:56px;display:block;margin-bottom:20px;filter:grayscale(.2)}.oops-title{margin:0 0 12px;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}.oops-desc{margin:0;font-size:15px;color:var(--fg-muted);line-height:1.6}.admin-view{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}.admin-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 28px 32px;box-shadow:var(--shadow);transition:background var(--t),border-color var(--t)}.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-head h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}.auth-form,.names-form{display:flex;flex-direction:column;gap:14px}.auth-hint{margin:0;font-size:14px;color:var(--fg-muted)}.field{display:flex;flex-direction:column;gap:5px}.field-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}.field-input{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:8px;font-size:15px;background:var(--bg);color:var(--fg);outline:none;transition:border-color .15s,box-shadow .15s,background var(--t)}.field-input:focus{border-color:var(--accent-a);box-shadow:0 0 0 3px #2563eb1f}[data-theme=dark] .field-input:focus{box-shadow:0 0 0 3px #3b82f62e}.btn{padding:11px 18px;border:none;border-radius:8px;font-size:15px;font-weight:600;transition:opacity .15s,background .15s}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent-a);color:#fff}.btn-primary:hover:not(:disabled){opacity:.88}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--fg-muted);font-size:14px}.btn-ghost:hover{background:var(--bg)}.msg{margin:0;padding:10px 13px;border-radius:8px;font-size:13px;font-weight:500}.msg-ok{background:#dcfce7;color:#15803d}.msg-err{background:#fee2e2;color:#b91c1c}[data-theme=dark] .msg-ok{background:#14532d;color:#86efac}[data-theme=dark] .msg-err{background:#450a0a;color:#fca5a5}