:root {
  --glass-bg: rgba(20,20,25,0.55);
  --glass-bg-2: rgba(32,32,40,0.65);
  --border: rgba(255,255,255,0.18);
  --shadow: rgba(0,0,0,0.5);
  --blur: 14px;
  --radius: 18px;
  --txt: #f2f2f2;
}

*,*::before,*::after { box-sizing:border-box }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:#0a0a0d;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before {
  content:"";position:fixed;inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.65)),
    url('./Commission Half body 2.png') center/cover no-repeat;
  filter:blur(2px);z-index:-2;
}
body::after {
  content:"";position:fixed;inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), transparent 30%),
    radial-gradient(1200px 800px at -10% -10%, rgba(59,130,246,.25) 0, transparent 70%),
    radial-gradient(900px 600px at 110% 10%, rgba(168,85,247,.25) 0, transparent 70%);
  z-index:-1;
}

.wrap { width:100%; margin:22px auto; padding:0 18px }

.topbar {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:6px 0 18px
}
.topbar .left { display:flex; gap:10px; align-items:center }
.topbar .right { justify-self:end; opacity:.85 }

.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--glass-bg-2);
  color:#f1f5f9
}
.pill.warn {
  border-color:rgba(239,68,68,.6);
  color:#fecaca;
  background:rgba(127,29,29,.6)
}

.controls { display:flex; gap:10px; align-items:center; justify-content:center }
.input,button,select {
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(40,40,50,.55);
  color:#f9fafb;
  padding:0 12px;
  font:inherit;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}
button { cursor:pointer; font-weight:700; color:#fff }

.grid {
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1400px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.panel {
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 6px 18px var(--shadow);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  padding:12px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  contain:content;
}

.panel-head { display:flex; align-items:center; gap:10px }
.panel-head .spacer { flex:1 }
.profile { display:flex; align-items:center; gap:10px }
.profile img {
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border)
}

.live {
  font-size:11px;
  padding:1px 8px;
  border-radius:999px;
  border:1px solid var(--border)
}
.live.on {
  background:rgba(34,197,94,.2);
  color:#065f46;
  border-color:rgba(34,197,94,.6)
}
.live.off {
  background:rgba(239,68,68,.15);
  color:#7f1d1d;
  border-color:rgba(239,68,68,.5)
}

.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.stats-4 { grid-template-columns:repeat(4,1fr) }

.statbox {
  background:var(--glass-bg-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  min-width:0
}
.label { opacity:.75; font-weight:600; margin-bottom:4px }
.big { font-size:22px; font-weight:800 }

.chart {
  width:100%;
  height:clamp(280px,30vh,420px);
  min-height:260px;
}
.chart > div:not(.echarts-tooltip) {
  width:20% !important;
  height:20% !important;
  display:block;
}


.kv {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.kv .box {
  background:var(--glass-bg-2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis
}

.hidden { display:none }