/* Grafana-style dashboard look shared by Leaderboard and Brands (light + dark via html[data-theme]) */
/* Grafana-style dashboard tokens */
:root{--g-bg:#111217;--g-panel:#181b1f;--g-panel-2:#202226;--g-row:#1c1e22;--g-border:#2a2d33;--g-head:#33a2e5;--g-text:#ccccdc;--g-strong:#ffffff;--g-muted:#8e8e98;
  --g-green:#73bf69;--g-red:#f2495c;--g-orange:#ff9830;--g-yellow:#fade2a;--g-blue:#5794f2;--g-purple:#b877d9;--g-link:#6e9fff;--g-var:#0b0c0e;--g-hover:#23262c;--g-sel:#1f2a3a;
  --g-stat-green:#37872d;--g-stat-blue:#1f60c4;--g-stat-orange:#c4600f;--mono:"Roboto Mono","JetBrains Mono",ui-monospace,monospace}
html[data-theme=light]{--g-bg:#f4f5f5;--g-panel:#ffffff;--g-panel-2:#f7f8fa;--g-row:#fbfbfc;--g-border:#dfe3e8;--g-head:#1f60c4;--g-text:#24292e;--g-strong:#000;--g-muted:#6e7781;
  --g-green:#1a7f37;--g-red:#c4162a;--g-orange:#d45b00;--g-yellow:#9a6700;--g-blue:#1f60c4;--g-purple:#8250df;--g-link:#1f60c4;--g-var:#eef1f5;--g-hover:#f0f4fa;--g-sel:#e6eefb;
  --g-stat-green:#2e7d32;--g-stat-blue:#1f60c4;--g-stat-orange:#d45b00}
body{background:var(--g-bg);color:var(--g-text);font:13px/1.4 Inter,"Helvetica Neue",Arial,sans-serif}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wrap{padding:72px 14px 60px;max-width:1600px;margin:0 auto}
/* dashboard header */
.gh{display:flex;align-items:center;gap:10px;padding:6px 2px 12px;flex-wrap:wrap}
.gh .logo2{width:22px;height:22px}
.gh .ttl{font-size:17px;color:var(--g-strong);display:flex;align-items:center;gap:8px}
.gh .ttl small{color:var(--g-muted);font-size:13px}
.gh .sp{flex:1}
.gbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--g-border);background:var(--g-panel);color:var(--g-text);border-radius:2px;font:inherit;font-size:12px;cursor:pointer}
.gbtn:hover{background:var(--g-hover)} .gbtn svg{width:14px;height:14px}
.gbtn .or{color:var(--g-orange)}
/* variables row */
.vars{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.var{display:flex;align-items:stretch;height:30px;border:1px solid var(--g-border);border-radius:2px;overflow:hidden;background:var(--g-panel)}
.var label{display:flex;align-items:center;padding:0 9px;background:var(--g-var);color:var(--g-head);font-size:11.5px;font-weight:500;border-right:1px solid var(--g-border);white-space:nowrap}
.var select,.var input{border:0;background:var(--g-panel);color:var(--g-strong);font:inherit;font-size:12px;padding:0 24px 0 9px;outline:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--g-muted) 50%),linear-gradient(135deg,var(--g-muted) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px;background-repeat:no-repeat}
.var input{cursor:text;background-image:none;padding-right:9px;width:190px}
.var .seg2{display:flex}
.var .seg2 button{border:0;background:var(--g-panel);color:var(--g-text);font:inherit;font-size:12px;padding:0 10px;cursor:pointer;border-left:1px solid var(--g-border)}
.var .seg2 button:first-child{border-left:0}
.var .seg2 button.on{background:var(--g-stat-blue);color:#fff}
.links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.links a{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--g-border);background:var(--g-panel);color:var(--g-text);text-decoration:none;font-size:12px;border-radius:2px}
.links a:hover{background:var(--g-hover)} .links svg{width:13px;height:13px}
/* stat panels */
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0}
.stat{background:var(--g-panel);border:1px solid var(--g-border);border-radius:2px;text-align:center;padding:8px 8px 10px;position:relative;overflow:hidden;min-width:0}
.stat .t{font-size:12px;font-weight:500;color:var(--g-strong)}
.stat .v{font-size:27px;font-weight:500;line-height:1.25;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .s{font-size:11.5px;color:var(--g-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.green{background:var(--g-stat-green);border-color:var(--g-stat-green)} .stat.blue{background:var(--g-stat-blue);border-color:var(--g-stat-blue)}
.stat.green *,.stat.blue *{color:#fff!important}
.stat .v.y{color:var(--g-yellow)} .stat .v.g{color:var(--g-green)} .stat .v.r{color:var(--g-red)} .stat .v.b{color:var(--g-blue)}
.stat .bg{position:absolute;left:0;right:0;bottom:0;height:34px;opacity:.35;pointer-events:none}
/* panel + table */
.panel{background:var(--g-panel);border:1px solid var(--g-border);border-radius:2px}
.ptitle{text-align:center;font-size:12.5px;font-weight:500;color:var(--g-strong);padding:7px;position:relative}
.ptitle .cnt{position:absolute;right:10px;top:7px;color:var(--g-muted);font-weight:400;font-size:11.5px}
.tw{overflow:auto}
table.lb{border-collapse:collapse;width:100%;min-width:1280px}
table.lb thead th{position:sticky;top:0;z-index:2;background:var(--g-panel-2);color:var(--g-head);font-weight:500;font-size:11.5px;text-align:left;padding:5px 8px;border-bottom:1px solid var(--g-border);white-space:nowrap;cursor:pointer;user-select:none}
table.lb thead th:hover{color:var(--g-strong)}
table.lb thead th.s::after{content:" ▼";font-size:9px} table.lb thead th.s.asc::after{content:" ▲"}
table.lb thead th.r,table.lb td.r{text-align:right}
table.lb td{padding:6px 7px;border-bottom:1px solid var(--g-border);border-right:1px solid var(--g-border);vertical-align:middle;font-size:12px;color:var(--g-text);white-space:nowrap}
table.lb td:last-child{border-right:0}
table.lb tbody tr.row{cursor:pointer;transition:background .15s}
table.lb tbody tr.row:nth-child(4n+1){background:var(--g-row)}
table.lb tbody tr.row:hover{background:var(--g-hover)}
table.lb tbody tr.row.open{background:var(--g-sel)}
.rk{font-family:var(--mono);font-size:15px;color:var(--g-strong);text-align:center;width:46px}
.rk small{display:block;font-size:10.5px}
.ic{width:46px;text-align:center}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:12px;color:#fff;position:relative}
.av.chain::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--g-panel);border:2px solid var(--g-panel);box-shadow:inset 0 0 0 2px var(--g-yellow)}
.nm a{color:var(--g-link);font-size:14.5px;text-decoration:none;display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.nm a:hover{text-decoration:underline}
.nm small,.l3 small{display:block;color:var(--g-muted);font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.l3{line-height:1.45;font-size:11.5px}
.l3 b{font-weight:400;color:var(--g-strong)}
.up{color:var(--g-green)} .dn{color:var(--g-red)} .fl{color:var(--g-muted)} .or2{color:var(--g-orange)} .yl{color:var(--g-yellow)}
.bigv{font-family:var(--mono);font-size:13px;color:var(--g-green);text-align:right}
.bigv small{display:block;color:var(--g-muted);font-size:11px}
.shr{min-width:160px}
.shbar{height:5px;border-radius:3px;background:var(--g-border);position:relative;overflow:hidden;margin:3px 0}
.shbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--g-blue)}
.rings{display:grid;grid-template-columns:repeat(4,auto);gap:0 6px;font-size:11px;color:var(--g-muted)}
.rings b{font-weight:400;color:var(--g-text)}
.rings .on b{color:var(--g-blue);font-weight:600}
.spk svg{display:block;width:84px;height:28px}
.more{padding:14px;text-align:center;color:var(--g-muted);font-size:12px}
/* detail row */
tr.det td{padding:0;background:var(--g-bg);border-right:0}
.dgrid{display:grid;grid-template-columns:1.5fr 1fr 300px;gap:8px;padding:8px;position:sticky;left:0;width:var(--vw,100%);box-sizing:border-box}
.dp{background:var(--g-panel);border:1px solid var(--g-border);border-radius:2px;padding:6px 10px 8px;min-width:0}
.dp h4{margin:0 0 4px;text-align:center;font-size:12px;font-weight:500;color:var(--g-strong)}
.gleg{width:100%;font-size:11px;border-collapse:collapse;margin-top:4px}
.gleg th{color:var(--g-head);font-weight:500;text-align:right;padding:1px 6px}
.gleg td{text-align:right;padding:1px 6px;color:var(--g-text);border:0}
.gleg td:first-child,.gleg th:first-child{text-align:left}
.gleg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12px}
.kv span{color:var(--g-muted)} .kv b{font-weight:500;color:var(--g-strong);text-align:right}
.rgr{display:grid;grid-template-columns:40px 1fr 46px 70px;gap:6px;align-items:center;font-size:11.5px;margin:4px 0}
.rgr span{color:var(--g-muted)}
.gtip{position:fixed;pointer-events:none;z-index:30;background:var(--g-panel-2);border:1px solid var(--g-border);color:var(--g-text);padding:6px 9px;font-size:11.5px;border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.35);display:none;white-space:nowrap}
.gtip b{color:var(--g-strong);font-weight:500}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}.dgrid{grid-template-columns:1fr}.links{margin-left:0}}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}.var input{width:130px}}