
.vein-leader { font-family: system-ui, Arial, sans-serif; color:#d7e2e6; }
.vein-leader .cards { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.vein-leader .card { background: rgba(20,24,28,.7); border:1px solid rgba(43,217,141,.2); border-radius:16px; padding:12px; position:relative; }
.vein-leader .card .rank { position:absolute; right:10px; top:10px; width:28px; height:28px; opacity:.8 }
.vein-leader .card .medal { position:absolute; left:-4px; top:-4px; width:26px; height:26px; }
.vein-leader .name { font-weight:600; font-size:16px; margin-top:4px }
.vein-leader .stat { font-size:12px; opacity:.85 }
.vein-leader .feed { background: rgba(20,24,28,.6); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px; }
.vein-leader .feed li { display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05) }
.vein-leader .feed li:last-child { border-bottom:none }
.vein-leader .chip { border:1px solid rgba(43,217,141,.3); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; }
.vein-leader .tabs { display:flex; gap:6px; justify-content:flex-end; margin-bottom:8px }
.vein-leader table { width:100%; border-collapse:collapse; background: rgba(20,24,28,.6); border-radius:14px; overflow:hidden }
.vein-leader th, .vein-leader td { padding:10px; border-bottom:1px solid rgba(255,255,255,.06); font-size:14px }
.vein-leader tr:hover { background: rgba(255,255,255,.03) }

/* --- Top 10 boxed layout --- */
.top10-boxed{display:flex;flex-direction:column;gap:10px}
.t10-row{display:flex;align-items:stretch;gap:8px;background:rgba(30,38,28,.55); /* slightly different bg tone */
  border:1px solid rgba(43,217,141,.22); border-radius:14px; padding:10px 12px}
.t10-rank{flex:0 0 44px;background:rgba(43,217,141,.12);border:1px solid rgba(43,217,141,.25);
  color:#d7f7e6;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800}
.t10-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.t10-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t10-name .rank-badge{width:18px;height:18px;vertical-align:-2px;display:inline-block}
.t10-meta{display:flex;gap:12px;opacity:.85;font-size:12px;flex-wrap:wrap}
.t10-kills{font-variant-numeric:tabular-nums}

/* --- Top 10 "bubble" cards --- */
.top10-bubbles{display:flex;flex-direction:column;gap:8px}
.bubble{display:flex;align-items:center;gap:8px;background:rgba(30,38,28,.55);border:1px solid rgba(43,217,141,.22);
  border-radius:999px;padding:8px 12px}
.bubble-top{background:rgba(48,58,48,.65);border-color:rgba(255,215,0,.28)}
.bubble .rank-no{flex:0 0 auto;font-weight:800;color:#d7f7e6;background:rgba(43,217,141,.12);border:1px solid rgba(43,217,141,.22);
  border-radius:999px;padding:2px 8px}
.bubble .badge .rank-badge{width:18px;height:18px;vertical-align:-2px;display:inline-block}
.bubble .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.bubble .spacer{flex:1 1 auto}
.bubble .kills{font-variant-numeric:tabular-nums;opacity:.85}
