@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;700&family=Inter:wght@400;500;600&display=swap");
:root{--bg:#0f1220;--panel:#171b2e;--fg:#e8eaf6;--muted:#8d93b5;--accent:#7c5cff;--accent2:#22d3a6;--danger:#ff5d7a;--warn:#ffb547;--border:#262b45;--radius:14px;--font:"Inter",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% -10%,#2a1f6b 0,transparent 40%),var(--bg);color:var(--fg);font-family:var(--font);min-height:100vh}
h1,h2,h3{font-family:"Sora",sans-serif;margin:0}
.top{border-bottom:1px solid var(--border);background:rgba(15,18,32,.8);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.wrap{max-width:78rem;margin:0 auto;padding:0 1rem}
.topin{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.8rem 0}
.logo{font-family:Sora;font-weight:700;letter-spacing:.12em;font-size:1.2rem}.logo span{color:var(--accent)}
.tag{font-size:.75rem;color:var(--muted);border:1px solid var(--border);padding:.2rem .6rem;border-radius:99px}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-left:auto}
.tabs button{background:none;border:0;color:var(--muted);padding:.5rem .8rem;border-radius:10px;font:inherit;cursor:pointer}
.tabs button.on{background:var(--accent);color:#fff}
main{padding:1.5rem 0 3rem}
.head{margin-bottom:1.2rem}.head p{color:var(--muted);margin:.3rem 0 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin-bottom:1.5rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem}
.stat .n{font-family:Sora;font-size:2rem;font-weight:700}.stat .l{color:var(--muted);font-size:.85rem}
.stat.hero{background:linear-gradient(135deg,var(--accent),#4a2fd0);border:0}.stat.hero .l{color:#e3dcff}
.two{display:grid;gap:1rem}@media(min-width:860px){.two{grid-template-columns:1.4fr 1fr}}
.input{width:100%;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--border);background:#0f1220;color:var(--fg);font:inherit}
.bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}.bar .input{flex:1;min-width:200px}
select.input{flex:0 0 auto;width:auto}
.list{display:grid;gap:.6rem}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;justify-content:space-between}
.who{display:flex;align-items:center;gap:.7rem;min-width:0}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;background:#2b2f52;flex:none}
.sub{color:var(--muted);font-size:.82rem}
.badge{font-size:.72rem;padding:.2rem .55rem;border-radius:99px;font-weight:600}
.b-ok{background:rgba(34,211,166,.15);color:var(--accent2)}.b-warn{background:rgba(255,181,71,.15);color:var(--warn)}.b-bad{background:rgba(255,93,122,.15);color:var(--danger)}.b-mut{background:#262b45;color:var(--muted)}
.acts{display:flex;gap:.4rem;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:#1f2440;color:var(--fg);padding:.45rem .8rem;border-radius:9px;font:inherit;font-size:.85rem;cursor:pointer}
.btn:hover{border-color:var(--accent)}.btn.p{background:var(--accent);border-color:var(--accent)}.btn.d{color:var(--danger)}
button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.msg{background:#0f1220;border-radius:10px;padding:.6rem .8rem;margin:.6rem 0;font-size:.9rem}
.bars{display:grid;gap:.6rem}.bars .t{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}
.track{height:10px;background:#0f1220;border-radius:99px;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.cols{display:flex;align-items:flex-end;gap:.5rem;height:160px}.cols div{flex:1;text-align:center;font-size:.72rem;color:var(--muted)}
.cols i{display:block;background:linear-gradient(var(--accent2),var(--accent));border-radius:6px 6px 0 0;margin-bottom:.3rem}
.empty{text-align:center;color:var(--muted);padding:2rem}