: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.6);
  --blur: 20px;
  --radius: 20px;
  --txt: #f2f2f2;
}

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;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Roboto,Arial,sans-serif;
  color:var(--txt);
  background:#0a0a0d;
}
.wrap{max-width:1280px;margin:28px auto;padding:0 16px}

.header{display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px; margin-bottom:12px}
.header .left{display:flex; gap:10px; align-items:center}
.controls{display:flex; gap:10px; align-items:center; justify-content:center}
.profile{justify-self:end; display:flex; align-items:center; gap:10px}
.profile img{width:36px;height:36px;border-radius:999px;border:1px solid var(--border)}
.profile .name{font-weight:800}
.vcol{display:flex; flex-direction:column; line-height:1.1}
.live-badge{
  align-self:flex-start;
  margin-top:2px; padding:2px 8px; font-size:11px; font-weight:800;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#f87171;
}

.hidden{display:none}
.row{display:flex;gap:12px;flex-wrap:wrap}
.card{
  background:var(--glass-bg);
  border:1px solid var(--border);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border-radius:var(--radius);
  box-shadow:0 8px 24px var(--shadow);
  padding:16px; flex:1 1 320px; min-width:280px; margin-top:12px;
}
.card.small{flex:1 1 200px; min-width:220px}
.card-head{display:flex; gap:10px; align-items:center; margin-bottom:8px}
.section-title{font-weight:800;margin-bottom:8px;font-size:16px;letter-spacing:.2px;color:#e5e7eb}
.small-label{opacity:.7;font-weight:600;margin-bottom:6px}
.stat{font-size:38px;font-weight:800;color:#f9fafb}
.small-stat{font-size:22px;color:#f9fafb}
.stat-lg{font-size:28px;font-weight:800;color:#f9fafb}
.stat-label{opacity:.75;font-weight:600;margin-bottom:6px}

.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)}
.input,button,select{
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(40,40,50,.55);
  color:#f9fafb;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:0 12px;font:inherit
}
button{cursor:pointer;font-weight:700;color:#fff}
button.ghost{background:transparent;color:#e5e7eb}
.right{margin-left:auto}

.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px}
canvas{width:100% !important; max-height:420px}

.info-grid{ display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap:12px; }
.info-item{ background: var(--glass-bg-2); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; color:#f3f4f6 }
.info-label{opacity:.7; font-weight:600; margin-bottom:6px}
.info-value{font-weight:800; font-size:18px;color:#f9fafb}

@media (max-width: 980px){ .stats-grid{grid-template-columns:1fr 1fr 1fr;} }
@media (max-width: 680px){
  .header{grid-template-columns: 1fr; gap:8px}
  .controls{justify-content:flex-start; flex-wrap:wrap}
  .profile{justify-self:start}
  .info-grid{grid-template-columns:1fr;}
}