:root{
  color-scheme:dark;
  --bg:#08080c;
  --bg-elevated:#0d0d13;
  --surface:#121219;
  --surface-2:#171720;
  --surface-3:#1d1c27;
  --line:#292735;
  --line-soft:#1e1d28;
  --text:#f4f2f8;
  --muted:#9692a3;
  --purple:#9354ff;
  --purple-bright:#b37aff;
  --purple-dark:#6530bd;
  --purple-soft:rgba(147,84,255,.13);
  --red:#ef5270;
  --green:#43d39b;
  --orange:#efad5a;
  --shadow:0 18px 55px rgba(0,0,0,.28);
}

*{scrollbar-width:thin;scrollbar-color:#393446 #0b0b10}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:#0b0b10}
*::-webkit-scrollbar-thumb{background:#393446;border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:#55466e}

html{background:var(--bg)}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% -12%,rgba(126,61,229,.17),transparent 32%),
    radial-gradient(circle at 20% 110%,rgba(90,43,164,.08),transparent 35%),
    var(--bg);
  color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:13px;
  letter-spacing:.005em;
}

button,
input:not([type="checkbox"]):not([type="range"]),
select{
  height:40px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:0 13px;
  font-size:12px;
  font-weight:650;
  line-height:1;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}

input:not([type="checkbox"]):not([type="range"]),select{
  background:#0d0d13;
  color:var(--text);
  outline:none;
}

input::placeholder{color:#686473;font-weight:500}
input:focus,select:focus{
  border-color:#7650b5;
  box-shadow:0 0 0 3px rgba(147,84,255,.11);
}

input[type="file"]{padding:7px 9px;color:var(--muted)}
input[type="file"]::file-selector-button{
  height:24px;
  margin:-1px 10px -1px -2px;
  border:0;
  border-radius:6px;
  padding:0 10px;
  background:#282333;
  color:#ddd6e8;
  font:600 11px Inter,"Segoe UI",sans-serif;
}

button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  background:linear-gradient(145deg,#9454ff,#7137cf);
  color:#fff;
  box-shadow:0 7px 18px rgba(101,48,189,.17);
  cursor:pointer;
  white-space:nowrap;
}
button:hover{filter:none;background:linear-gradient(145deg,#a467ff,#7d42dc);border-color:#ad78ff;transform:translateY(-1px)}
button:active{transform:translateY(0)}
button:disabled{cursor:not-allowed;opacity:.48;transform:none}
button.ghost{
  background:#191820;
  color:#cbc7d2;
  border-color:#302d3b;
  box-shadow:none;
}
button.ghost:hover{background:#22202c;color:#fff;border-color:#4a425b}
button.danger{background:#3b1721;color:#ffb7c4;border-color:#662536;box-shadow:none}
button.danger:hover{background:#54202d;border-color:#8c354b;color:#fff}
button.success{background:#17392e;color:#8aebc2;border-color:#275947;box-shadow:none}

.app{grid-template-columns:258px minmax(0,1fr);min-height:100vh}
.app>aside{
  width:258px;
  padding:20px 14px 16px;
  background:linear-gradient(180deg,rgba(14,14,20,.98),rgba(9,9,13,.98));
  border-right:1px solid var(--line-soft);
  box-shadow:18px 0 50px rgba(0,0,0,.14);
}
.brand{gap:11px;padding:3px 8px 24px;border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.brand-mark{
  width:38px;
  height:38px;
  border-radius:11px;
  background:linear-gradient(145deg,#a667ff,#6027b6);
  border:1px solid rgba(211,174,255,.28);
  box-shadow:0 9px 30px rgba(133,67,232,.28);
  font-size:12px;
}
.brand b{font-size:13px;letter-spacing:.02em}.brand small{font-size:10px;color:#777282}
nav{gap:3px;overflow-y:auto;padding-right:2px}
nav button{
  min-height:42px;
  height:42px;
  justify-content:flex-start;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#8c8798;
  box-shadow:none;
  font-size:12px;
}
nav button:hover{transform:none;background:#17151e;border-color:#24212d;color:#d9d4e1}
nav button.active{
  background:linear-gradient(90deg,rgba(143,78,245,.2),rgba(105,53,188,.08));
  color:#fff;
  border-color:rgba(156,94,249,.28);
  box-shadow:inset 3px 0 0 var(--purple);
}
.badge{margin-left:auto;background:#312244;color:#cda9ff;border:1px solid #4c3466;padding:2px 7px}
.account{padding:15px 10px 3px;border-color:var(--line-soft)}

.app main{grid-column:2;max-width:1720px;padding:24px 30px 48px}
.app header{
  min-height:58px;
  margin-bottom:20px;
  padding:0 2px 16px;
  border-bottom:1px solid var(--line-soft);
}
.app header h2{font-size:23px;letter-spacing:-.025em}
.eyebrow{color:#ae79ff;font-size:9px;letter-spacing:.2em}
.header-actions{display:flex;align-items:center;gap:12px}
.header-actions select{min-width:205px}
.live{padding:0 4px;color:#827d8e;font-size:11px}
.live i{width:6px;height:6px;background:var(--green);box-shadow:0 0 9px var(--green)}

.panel{
  margin-bottom:14px;
  padding:17px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:linear-gradient(150deg,rgba(19,19,27,.97),rgba(14,14,20,.97));
  box-shadow:0 12px 38px rgba(0,0,0,.13);
}
.panel-head{margin-bottom:14px;gap:14px}
.panel h3{font-size:14px;letter-spacing:-.01em}
.panel p{font-size:11px;color:var(--muted);line-height:1.45}
.panel-head>select{min-width:185px}

.metrics{gap:10px;margin-bottom:14px}
.metric{
  min-height:100px;
  padding:16px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:linear-gradient(145deg,#15151e,#101016);
  box-shadow:none;
}
.metric small{color:#85808f;font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.metric b{margin-top:11px;font-size:24px;letter-spacing:-.04em}
.metric:hover{border-color:#332d41;background:linear-gradient(145deg,#181722,#111118)}
.grid.two{gap:14px}

.toolbar,.inline-form{gap:8px;margin-bottom:14px;align-items:end}
.toolbar input,.inline-form input{min-width:165px}
.inline-form label{margin:0;gap:6px;color:#8f899a;font-size:10px;font-weight:650}
.toggle-label{display:flex;align-items:center;gap:9px;margin:0;color:#aaa4b3;font-size:11px}
input[type="checkbox"]{width:15px;height:15px;accent-color:var(--purple)}

.table{font-size:12px}
.table th{
  padding:9px 10px;
  border-bottom:1px solid var(--line);
  color:#716c7b;
  font-size:9px;
  letter-spacing:.1em;
}
.table td{height:52px;padding:9px 10px;border-bottom:1px solid #1d1c25;color:#d2ced8;vertical-align:middle}
.table tbody tr{transition:background .12s ease}
.table tbody tr:hover{background:rgba(143,78,245,.055)}
.table button{
  height:34px;
  min-height:34px;
  padding:0 11px;
  border-radius:8px;
  font-size:10px;
  box-shadow:none;
}
.quick-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.player{gap:8px}.avatar{width:29px;height:29px;background:#292134;color:#c9a5ff;border:1px solid #3d3050;font-size:11px}
.sub{color:#777282;font-size:10px}
.status,.severity{padding:4px 7px;border:1px solid transparent;font-size:9px;letter-spacing:.025em}
.status.open{background:#30251b;border-color:#4b3825;color:#e9b775}
.status.legit{background:#142e26;border-color:#21493b;color:#79deb3}
.status.cheat{background:#351821;border-color:#592432;color:#ff9caf}
.status.closed{background:#22222b;border-color:#32323e;color:#aaa7b3}
.rank{border:1px solid #443354;background:#251c30;color:#c8a3ef;border-radius:6px;padding:4px 7px;font-size:9px}

.cards{gap:13px}
.server-card{padding:17px;border-color:var(--line-soft);background:linear-gradient(145deg,#15151d,#101016);border-radius:12px}
.server-card h3{margin:0;font-size:15px}.server-stats{gap:7px;margin:16px 0}.server-stats div{background:#0c0c11;border:1px solid #1d1c25;padding:10px}
.setting{border-color:var(--line-soft);padding-top:12px}
.switch{height:32px;min-height:32px;background:#25232d}.switch.on{background:#573092}

.drawer-wrap{z-index:200}
.backdrop{height:auto;min-height:0;background:rgba(0,0,0,.74);backdrop-filter:blur(3px);border:0}
.drawer{
  width:min(900px,96vw);
  padding:24px;
  background:linear-gradient(160deg,#12121a,#0b0b10);
  border-left:1px solid #332d41;
  box-shadow:-25px 0 80px rgba(0,0,0,.55);
}
.drawer .close{height:34px;min-height:34px}
.detail-grid{gap:8px;margin:15px 0}.detail-grid div{background:#171720;border:1px solid #24232f;padding:11px}
.evidence{background:#09090d;border:1px solid #1e1d27;color:#b8b3c1}
.real-recording{border-color:#342a45;background:#050507;box-shadow:0 14px 40px rgba(0,0,0,.25)}
.rewind-controls{gap:7px}.rewind-controls input[type="range"]{accent-color:var(--purple)}

.login-shell{background:radial-gradient(circle at 50% 0,rgba(135,68,232,.2),transparent 35%)}
.login-card{
  padding:34px;
  border:1px solid #2d2938;
  border-radius:17px;
  background:rgba(15,15,21,.96);
  box-shadow:0 35px 100px rgba(0,0,0,.55);
}
.login-card h1{font-size:27px}.login-card label{margin:15px 0;font-size:11px}.login-card button{margin-top:4px}
.toast{right:20px;bottom:20px;padding:11px 14px;border:1px solid #443459;background:#211a2c;color:#eee9f5;border-radius:9px;font-size:11px}

@media(max-width:1100px){
  .app{grid-template-columns:220px minmax(0,1fr)}
  .app>aside{width:220px}
  .app main{padding:22px 20px 42px}
}

@media(max-width:900px){
  body{padding-bottom:70px}
  .app{display:block}
  .app>aside{inset:auto 0 0;width:100%;height:66px;padding:5px;background:rgba(10,10,14,.96);border:0;border-top:1px solid var(--line);backdrop-filter:blur(15px)}
  .app>aside .brand,.app>aside .account{display:none}
  .app>aside nav{display:flex;overflow-x:auto;height:100%;gap:3px}
  .app>aside nav button{flex:0 0 91px;height:54px;min-height:54px;justify-content:center;text-align:center;font-size:10px;padding:0 7px}
  .app>aside nav button.active{box-shadow:inset 0 3px 0 var(--purple)}
  .app main{padding:16px 12px 82px;max-width:none}
  .app header{align-items:stretch;flex-direction:column;gap:12px}
  .header-actions{width:100%}.header-actions select{flex:1;min-width:0}.live{flex:0 0 auto;font-size:0}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.two{grid-template-columns:1fr}
  .panel{padding:14px}
  .drawer{width:100vw;padding:17px}
  .toast{left:12px;right:12px;bottom:78px;text-align:center}
}

@media(max-width:620px){
  .app header h2{font-size:20px}
  .panel-head{align-items:stretch;flex-direction:column}
  .panel-head>select,.header-actions select{width:100%}
  .inline-form,.toolbar{display:grid;grid-template-columns:1fr}
  .inline-form>* ,.toolbar>*{width:100%;min-width:0}
  .metric{min-height:88px;padding:13px}.metric b{font-size:21px}
  .detail-grid{grid-template-columns:1fr}
}