:root{
  --bg:#050816;
  --bg2:#0b1020;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.03);
  --stroke:rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --ok:#22c55e;
  --bad:#f87171;
  --accent:#2563eb;
  --warn:#fbbf24;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  color:var(--text);
}

.wrap{max-width:1200px;margin:0 auto;padding:16px}

.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  margin-bottom:14px;
}

.head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.title{font-size:22px;font-weight:800}
.sub{color:var(--muted);margin-top:4px}

.row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}

.pnlBar{
  position:relative;
  height:26px;
  border-radius:999px;
  background:#020617;
  border:1px solid var(--stroke);
  overflow:hidden;
}

.pnlFill{
  position:absolute;top:0;bottom:0;
  opacity:.95;
}

.pnlFill.pos{background:linear-gradient(90deg,#16a34a,#22c55e)}
.pnlFill.neg{background:linear-gradient(90deg,#dc2626,#f87171)}

.pnlLabel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
}