*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0d12;--bg-glow: #101722;--panel: #131a24;--panel-2: #1a2331;--panel-3: #222e40;--border: #26324455;--border-solid: #263244;--border-strong: #37476080;--text: #e7eef7;--muted: #8b9cb2;--muted-2: #5d6d82;--accent: #1fc7e8;--accent-deep: #0d9dbd;--accent-ink: #04222b;--accent-soft: rgba(31, 199, 232, .13);--danger: #f0596b;--danger-soft: rgba(240, 89, 107, .14);--warn: #f2a75c;--warn-soft: rgba(242, 167, 92, .14);--ok: #4ade80;--live: #ff7898;--live-soft: rgba(255, 120, 152, .13);--pin: #7dd3fc;--pin-soft: rgba(125, 211, 252, .13);--shadow: 0 12px 32px rgba(0, 0, 0, .4);--font: "Inter", "Segoe UI", system-ui, Roboto, sans-serif;--mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace}html,body,#app{height:100%}body{background:radial-gradient(1100px 600px at 75% -10%,rgba(31,199,232,.07),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(31,199,232,.045),transparent 55%),var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}::selection{background:var(--accent-soft)}*{scrollbar-width:thin;scrollbar-color:var(--panel-3) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:4px}*::-webkit-scrollbar-track{background:transparent}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border-solid);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:13px;font-family:var(--font);transition:border-color .15s,background .15s,color .15s,transform .06s;white-space:nowrap}button:hover{border-color:var(--accent-deep);background:var(--panel-3)}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--accent-ink);border:none;font-weight:650}button.primary:hover{filter:brightness(1.08)}button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-deep)}button:disabled{opacity:.45;cursor:default}button.icon-btn{padding:7px 10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:6px}button.ghost{background:transparent;border-color:transparent;color:var(--muted)}button.ghost:hover{color:var(--text);background:var(--panel-2);border-color:var(--border-solid)}.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border-solid);border-radius:9px;padding:3px;gap:2px}.seg button{border:none;background:transparent;color:var(--muted);border-radius:6px;padding:5px 11px;font-size:12.5px}.seg button:hover{color:var(--text);background:var(--panel-3)}.seg button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}input,select{background:var(--panel-2);border:1px solid var(--border-solid);color:var(--text);border-radius:9px;padding:8px 12px;font-size:14px;font-family:var(--font);outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft)}input::placeholder{color:var(--muted-2)}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-size:13px;user-select:none}.switch:hover{color:var(--text)}.switch input{appearance:none;width:34px;height:19px;border-radius:10px;background:var(--panel-3);border:1px solid var(--border-solid);position:relative;cursor:pointer;transition:background .15s;padding:0;flex:none}.switch input:after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}.switch input:checked{background:var(--accent-deep);border-color:var(--accent-deep)}.switch input:checked:after{transform:translate(15px);background:#fff}.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;background:var(--panel-3);color:var(--muted);display:inline-flex;align-items:center;gap:5px;letter-spacing:.02em}.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}.badge.live{background:var(--live-soft);color:var(--live)}.badge.live .dot{animation:pulse 1.4s ease-in-out infinite}.badge.alert{background:var(--warn-soft);color:var(--warn)}.badge.pin{background:var(--pin-soft);color:var(--pin)}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 0 0 currentColor}50%{opacity:.55}}.mc-avatar{position:relative;display:inline-block;flex:none;border-radius:22%;overflow:hidden;background:var(--panel-3);box-shadow:0 2px 6px #00000059}.mc-avatar-layer{position:absolute;inset:0;image-rendering:pixelated;background-repeat:no-repeat}.mc-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.avatar-stack{display:inline-flex;align-items:center;flex:none}.avatar-stack .mc-avatar+.mc-avatar{margin-left:-8px;outline:2px solid var(--panel)}.spacer{flex:1}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.logo{font-size:17px;font-weight:750;letter-spacing:-.01em}.logo span{color:var(--accent)}.logo-sub{color:var(--muted-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin-left:10px}.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--panel-3);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{color:var(--muted-2);font-size:13px;padding:14px 4px;text-align:center}.login-screen{height:100%;display:flex;align-items:center;justify-content:center}.login-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border-solid);border-radius:18px;padding:36px;width:360px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}.login-card .logo{font-size:24px}.login-card .login-tagline{color:var(--muted);font-size:13px;margin:-6px 0 10px}.login-card label{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:-8px}.login-error{color:var(--danger);font-size:13px;min-height:17px}.dash{height:100%;display:flex;flex-direction:column}.dash-header{display:flex;align-items:center;gap:14px;padding:13px 22px;background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-solid)}.user-chip{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;background:var(--panel-2);border:1px solid var(--border-solid);border-radius:20px;padding:5px 12px 5px 6px}.user-chip .user-dot{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.dash-body{flex:1;display:grid;grid-template-columns:320px 1fr;gap:16px;padding:16px 22px;overflow:hidden;min-height:0}.side{display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0}.card{background:var(--panel);border:1px solid var(--border-solid);border-radius:14px;padding:16px}.card h2{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;display:flex;align-items:center;gap:8px}.card h2 .count{background:var(--panel-3);color:var(--muted);border-radius:10px;padding:1px 8px;font-size:11px;letter-spacing:0}.player-row,.capture-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;transition:background .12s}.player-row:hover,.capture-row:hover{background:var(--panel-2)}.player-row .name,.capture-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}.player-row .srv{color:var(--muted-2);font-size:11px;font-weight:600;background:var(--panel-2);border:1px solid var(--border-solid);padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em}.player-row button,.capture-row button{padding:5px 11px;font-size:12px}.sessions{display:flex;flex-direction:column;overflow:hidden;min-height:0}.sessions-tools{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap}.sessions-tools .search-wrap{flex:1;min-width:200px;position:relative}.sessions-tools .search-wrap input{width:100%;padding-left:34px}.sessions-tools .search-wrap .search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none;font-size:13px}.sessions-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:9px;padding-right:2px}.session-card{display:flex;align-items:center;gap:13px;background:var(--panel-2);border:1px solid var(--border-solid);border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .14s,background .14s,transform .08s;position:relative}.session-card:hover{border-color:var(--accent-deep);background:var(--panel-3)}.session-card.has-alert{box-shadow:inset 3px 0 0 var(--warn)}.session-card .names{font-weight:650;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.session-card .names .vs{color:var(--muted-2);font-size:11px;font-weight:700;letter-spacing:.06em}.session-card .meta{color:var(--muted);font-size:12px;margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.session-card .meta .sep{color:var(--muted-2)}.session-card .badges{display:flex;align-items:center;gap:6px}.pin-btn{background:transparent;border:none;color:var(--muted-2);font-size:17px;padding:4px 6px;border-radius:8px;line-height:1}.pin-btn:hover{color:var(--pin);background:var(--pin-soft);border:none}.pin-btn.pinned{color:var(--pin)}.viewer-screen{height:100%;display:flex;flex-direction:column}.viewer-top{display:flex;gap:12px;align-items:center;padding:9px 16px;background:var(--panel);border-bottom:1px solid var(--border-solid)}.viewer-title{display:flex;align-items:center;gap:10px;min-width:0}.viewer-title strong{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-main{flex:1;display:flex;overflow:hidden;min-height:0}.viewer-3d{flex:1;position:relative;background:#0c1016;min-width:0}.viewer-3d canvas.hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.viewer-side{width:300px;background:var(--panel);border-left:1px solid var(--border-solid);padding:14px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;flex:none}.side-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:9px;font-weight:650}.side-hint{color:var(--muted-2);font-size:11px;margin-top:-4px;margin-bottom:8px}.pov-card{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s;margin-bottom:6px}.pov-card:hover{background:var(--panel-2)}.pov-card.active{border-color:var(--accent-deep);background:var(--accent-soft)}.pov-card.dead{opacity:.45}.pov-card .pov-main{flex:1;min-width:0}.pov-card .pov-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;overflow:hidden}.pov-card .pov-name .pov-tag{font-size:9.5px;font-weight:800;color:var(--accent);border:1px solid var(--accent-deep);border-radius:5px;padding:1px 4px;letter-spacing:.06em}.hp-bar{height:5px;border-radius:3px;background:var(--panel-3);margin-top:6px;overflow:hidden;position:relative}.hp-fill{height:100%;border-radius:3px;background:var(--ok);transition:width .18s,background .18s}.hp-fill.mid{background:var(--warn)}.hp-fill.low{background:var(--danger)}.hp-abs{position:absolute;top:0;right:0;height:100%;background:#e8d44d;opacity:.85}.pov-side{text-align:right;flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.pov-cps{font-family:var(--mono);font-size:11.5px;color:var(--muted)}.pov-cps.metric-strong{color:#ffd479;font-weight:700}.pov-flags{display:flex;gap:4px;min-height:14px}.flag-chip{font-size:9px;font-weight:800;letter-spacing:.08em;border-radius:4px;padding:1.5px 5px;background:var(--accent-soft);color:var(--accent)}.flag-chip.sprint{background:var(--warn-soft);color:var(--warn)}.attack-row{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:5px 8px;border-radius:7px;cursor:pointer;transition:background .12s,color .12s}.attack-row:hover{background:var(--panel-2);color:var(--text)}.attack-row .t{color:var(--muted-2);flex:none}.attack-row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attack-row .reach{flex:none;font-weight:600}.attack-row .reach.warn{color:var(--warn)}.attack-row .reach.bad{color:var(--danger);font-weight:800}.metric-strong{color:#ffd479}.hotkeys{border-top:1px solid var(--border-solid);padding-top:12px;margin-top:auto}.hotkeys .hk-row{display:flex;justify-content:space-between;gap:8px;color:var(--muted-2);font-size:11.5px;padding:2.5px 0}.hotkeys kbd{font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border-solid);border-bottom-width:2px;border-radius:5px;padding:1px 6px}.viewer-bottom{background:var(--panel);border-top:1px solid var(--border-solid);padding:10px 16px 12px;display:flex;flex-direction:column;gap:9px}.timeline-wrap{position:relative;height:30px}.timeline-markers{position:absolute;inset:0 0 12px;pointer-events:none}.timeline-markers .mark{position:absolute;top:2px;width:3px;height:9px;border-radius:2px;pointer-events:auto;cursor:pointer;transform:translate(-1px)}.timeline-markers .mark:hover{transform:translate(-1px) scaleX(1.8)}.mark.damage{background:#e3a15b}.mark.death{background:#e35b5b;height:13px}.mark.totem{background:#e8d44d;height:13px}.mark.alert{background:#ff5bd2;height:15px}input[type=range].timeline{width:100%;position:absolute;bottom:0;appearance:none;height:14px;background:transparent;padding:0;border:none;cursor:pointer}input[type=range].timeline::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--panel-3)}input[type=range].timeline::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:-4.5px;box-shadow:0 0 8px #1fc7e88c;transition:transform .1s}input[type=range].timeline::-webkit-slider-thumb:hover{transform:scale(1.25)}input[type=range].timeline::-moz-range-track{height:5px;border-radius:3px;background:var(--panel-3)}input[type=range].timeline::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #1fc7e88c}input[type=range].timeline:disabled{opacity:.4;cursor:default}.controls-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.controls-row .time{font-family:var(--mono);color:var(--muted);font-size:12.5px}.play-btn{width:40px;font-size:15px;padding:7px 0;text-align:center}.metric-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.metric-chip{font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border-solid);border-radius:7px;padding:3.5px 9px;white-space:nowrap}.metric-chip.hot{color:#ffd479;border-color:#ffd47955}.metric-chip.sneak{color:var(--accent);border-color:var(--accent-deep)}.legend{display:flex;gap:10px;align-items:center;color:var(--muted-2);font-size:11px}.legend .lg{display:inline-flex;align-items:center;gap:4px}.legend .lg i{width:7px;height:7px;border-radius:2px;display:inline-block}.live-badge{color:var(--live);font-weight:800;letter-spacing:.1em;font-size:12px;display:inline-flex;align-items:center;gap:6px}.live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:pulse 1.4s ease-in-out infinite}.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#080b0fcc;backdrop-filter:blur(3px);z-index:5;font-size:14.5px;color:var(--muted)}@media(max-width:1080px){.dash-body{grid-template-columns:1fr;overflow-y:auto}.side{overflow-y:visible}.sessions{min-height:420px}.viewer-side{width:250px}}