:root{--bg: #0b0d10;--panel: #14181d;--panel-2: #1b2128;--line: #2a323c;--text: #e6eaee;--muted: #8a93a0;--accent: #d6a24a;--accent-2: #b9842f;--danger: #e05858;--ok: #6ec07a;--field-bg: #0f1216}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 50% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent),var(--bg)}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel-2));flex:none}.brand{display:flex;align-items:center;gap:12px}.brand-dot{width:10px;height:10px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent)}.brand-title{font-size:15px;font-weight:700;letter-spacing:.02em}.brand-sub{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.connectbar{display:flex;align-items:flex-end;gap:12px}.connectbar .field{display:flex;flex-direction:column}.connectbar .field.sm{max-width:120px}.connectbar label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}.connectbar input{background:var(--field-bg);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:8px 10px;font:13px/1 ui-monospace,Cascadia Mono,SF Mono,Menlo,monospace;outline:none;min-width:180px}.connectbar input:focus{border-color:var(--accent)}.status{display:inline-flex;align-items:center;gap:7px;font:12px/1 ui-monospace,Cascadia Mono,Menlo,monospace;color:var(--muted);padding-bottom:2px}.status .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.status.connected .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}.status.connected{color:var(--ok)}.status.connecting .dot{background:var(--accent);animation:pulse 1s infinite}.status.error .dot{background:var(--danger);box-shadow:0 0 8px var(--danger)}.status.error{color:var(--danger)}@keyframes pulse{50%{opacity:.25}}.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 16px;font:600 13px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .05s,border-color .15s}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);color:#1a1306;border-color:var(--accent)}.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}.login-screen{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 26px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 60px #00000073}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}.login-field{display:flex;flex-direction:column;gap:6px}.login-field label{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.login-field input{background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font:13px ui-sans-serif,system-ui,sans-serif}.login-field input:focus{outline:none;border-color:var(--accent)}.login-row{display:flex;gap:12px}.login-row .login-field{flex:1}.login-btn{width:100%;padding:11px;font-size:14px;font-weight:700}.login-error{font-size:12px;color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:8px;padding:8px 10px}.main{flex:1;min-height:0;display:grid;grid-template-columns:280px 1fr 320px;gap:1px;background:var(--line)}.sidebar,.content,.logpane{background:var(--bg);min-height:0;overflow:hidden;display:flex;flex-direction:column}.sidebar-head{padding:12px 16px;font:600 11px/1 ui-monospace,Cascadia Mono,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.sidebar-head .count{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 8px;border-radius:10px;font-size:11px}.player-list{list-style:none;margin:0;padding:8px;overflow-y:auto;flex:1}.empty-list{padding:18px 16px;color:var(--muted);font-size:13px}.player-card{padding:12px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;margin-bottom:6px;transition:background .12s,border-color .12s}.player-card:hover{background:var(--panel)}.player-card.selected{background:var(--panel);border-color:var(--accent)}.player-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.player-name{font-weight:600;font-size:14px}.player-id{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}.player-meta{margin-top:6px;font:12px/1 ui-monospace,Menlo,monospace;color:var(--muted);display:flex;align-items:center;gap:7px}.player-ip{margin-left:auto}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);flex:none}.content{padding:0}.empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:40px}.empty-title{font-size:18px;font-weight:600}.empty-sub{color:var(--muted);font-size:13px;max-width:380px;text-align:center}.detail{padding:20px 26px;overflow-y:auto;height:100%}.detail-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap;gap:12px}.detail-name{font-size:18px;font-weight:700}.detail-sub{font:12px ui-monospace,Menlo,monospace;color:var(--muted);margin-top:3px}.tabs{display:flex;gap:4px}.tab{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 14px;cursor:pointer;font:600 12px/1 system-ui,sans-serif}.tab:hover{color:var(--text)}.tab.active{background:var(--accent);color:#1a1306;border-color:var(--accent)}.panel{display:flex;flex-direction:column;gap:12px}.lbl{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.hint{font-size:12px;color:var(--muted)}.textarea,.input{width:100%;background:var(--field-bg);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:11px 13px;font:13px/1.5 ui-monospace,Cascadia Mono,Menlo,monospace;outline:none;resize:vertical}.input.search{font-family:ui-sans-serif,system-ui,sans-serif}.textarea:focus,.input:focus{border-color:var(--accent)}.event-groups{display:flex;flex-direction:column;gap:16px}.event-group-head{font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.event-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;text-align:left;transition:border-color .12s,background .12s}.event-btn:hover{border-color:var(--accent);background:var(--panel-2)}.event-id{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}.event-name{font-size:13px;line-height:1.2;font-weight:600;color:#fff}.passive-btn{flex-direction:row;align-items:center;justify-content:flex-start;border-left:2px solid var(--accent);padding-left:10px}.chat-window{background:var(--field-bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-height:220px;max-height:360px;overflow-y:auto;font:13px/1.5 ui-monospace,Cascadia Mono,Menlo,monospace}.chat-empty{color:var(--muted);font-size:13px;font-family:ui-sans-serif,system-ui,sans-serif}.chat-line{padding:3px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}.chat-line:last-child{border-bottom:none}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.sep{height:1px;background:var(--line);margin:4px 0}.log{padding:10px 14px;overflow-y:auto;flex:1}.log-line{display:flex;gap:8px;font:12px/1.4 ui-monospace,Cascadia Mono,Menlo,monospace;padding:3px 0}.log-ts{color:var(--muted);flex:none}.log-line.ack{color:var(--muted)}.log-line.error{color:var(--danger)}.log-line.chats{color:var(--ok)}.log-line.info{color:var(--text)}@media (max-width: 900px){.main{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.logpane{max-height:180px}.sidebar{max-height:260px}.topbar,.connectbar{flex-wrap:wrap}.connectbar input{min-width:140px}}