:root{
  --bg:#0b0f16; --panel:#111825; --line:#1e2938; --text:#e6e9ef; --muted:#8b93a7;
  --accent:#5b8def; --green:#46a758; --amber:#f5a623; --red:#e5484d;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,22,.9);backdrop-filter:blur(6px);z-index:10}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.head-links a{margin-left:18px;color:var(--muted);text-decoration:none;font-size:13px}
.head-links a:hover{color:var(--text)}
.head-links a.active{color:var(--accent);font-weight:700}

.hero{padding:40px 0 8px}
.hero h1{margin:0 0 10px;font-size:30px;line-height:1.15;letter-spacing:-.02em;max-width:820px}
.hero .sub{margin:0;color:var(--muted);font-size:16px;max-width:760px}
.hero em{font-style:normal;color:var(--text)}
.hero strong{color:var(--amber)}

/* summary stat cards */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:130px}
.stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .v{font-size:22px;font-weight:800;margin-top:2px}
.stat .s{font-size:11px;color:var(--muted)}

/* controls */
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:14px 0}
.controls input,.controls select{background:var(--bg);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;font-size:14px;outline:none}
.controls input{flex:1;min-width:220px}
.controls .count{margin-left:auto;color:var(--muted);font-size:12px}

/* table */
.tbl-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  text-align:right;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;white-space:nowrap}
thead th.l{text-align:left}
thead th .ar{opacity:.35;margin-left:2px}
tbody td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);text-align:right;vertical-align:top}
tbody td.l{text-align:left}
.row{cursor:pointer}
.row:hover{background:rgba(255,255,255,.03)}
.row .name{font-weight:700}
.row .addr{font-size:11px}
.row .addr a{color:var(--accent);text-decoration:none}
.caret{opacity:.5;margin-right:4px}

.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap}
.b-good{background:rgba(70,167,88,.15);color:var(--green);border:1px solid rgba(70,167,88,.4)}
.b-ok{background:rgba(139,147,167,.15);color:var(--muted);border:1px solid rgba(139,147,167,.4)}
.b-high{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.4)}
.b-sniper,.b-dead{background:rgba(229,72,77,.15);color:var(--red);border:1px solid rgba(229,72,77,.5)}
.b-churn{background:rgba(229,72,77,.15);color:var(--red);border:1px solid rgba(229,72,77,.5)}
/* NOT PAYING is a caution, not a death sentence — the node works, the rewards
   just have not been pushed. Amber keeps it distinct from OFFLINE red. */
.b-nopay{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.45)}
/* NEW is informational, not a warning — blue, so it never reads as a red flag */
.b-new{background:rgba(91,141,239,.15);color:var(--accent);border:1px solid rgba(91,141,239,.45)}

.yield{font-weight:700}
.paid{font-weight:700}
/* registrar-verified identity chip (real operator vs impersonator) */
.vtag{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;color:var(--green);
  background:rgba(70,167,88,.12);border:1px solid rgba(70,167,88,.4);border-radius:4px;padding:1px 5px;vertical-align:middle;white-space:nowrap}
.applied{color:var(--red);font-weight:700}
.applied .sm{font-size:9px;font-weight:600}
.shows{font-size:10px;opacity:.7}
.flip{font-size:10px;color:var(--red);opacity:.9}

/* detail */
.detail td{background:rgba(255,255,255,.02);text-align:left}
.detail .cols{display:flex;flex-wrap:wrap;gap:34px}
.detail h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.detail table{width:auto}
.detail table td,.detail table th{padding:4px 12px 4px 0;border:none;font-size:12.5px}
.detail .proof a{font-family:var(--mono);font-size:11px;color:var(--accent);text-decoration:none;white-space:nowrap}
.detail .proof a:hover{text-decoration:underline}
.hi{color:var(--red);font-weight:700}
.mbars{display:flex;align-items:flex-end;gap:5px;height:66px}
.mbars .b{width:18px;background:var(--accent);border-radius:2px 2px 0 0}
.mbars .lab{font-size:9px;opacity:.6;text-align:center;margin-top:3px}
/* clean monthly values (replaces the bar chart) */
.mscroll{max-height:220px;overflow:auto}
table.monthly{width:auto;border-collapse:collapse}
table.monthly td{padding:3px 0;border:none;font-size:12.5px}
table.monthly td.mo{color:var(--muted);padding-right:22px;white-space:nowrap}
table.monthly td.mv{text-align:right;font-weight:600;white-space:nowrap}
.staker-me{background:rgba(91,141,239,.14)}

.explainer{border-top:1px solid var(--line);margin-top:44px;padding:36px 0 10px;background:var(--panel)}
.explainer h2{margin:0 0 16px;font-size:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px}
.card h3{margin:0 0 8px;font-size:15px}
.card p{margin:0;color:var(--muted);font-size:13px}
.card code{background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px;font-size:12px}
.disclaimer{margin-top:20px;color:var(--muted);font-size:12px;max-width:820px}

/* ---------- statistics page ---------- */
.panel{margin:30px 0}
.panel h2{font-size:16px;letter-spacing:-.01em;margin:0 0 3px}
.sublede{color:var(--muted);font-size:12.5px;margin:0 0 12px;max-width:70ch;line-height:1.5}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;max-width:940px}
.stat-cell{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:20px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.stat-sub{color:var(--muted);font-size:11.5px;margin-top:2px}

/* Cap the table width. Stretched across 1180px the columns sit so far apart
   that the eye loses the row between "accounts" and "sum"; the data is only a
   few numbers wide, so the table should be too. */
.grid-wrap{max-width:940px}
.grid-wrap.narrow{max-width:620px}
.grid-table td,.grid-table th{font-variant-numeric:tabular-nums;padding:9px 14px}
.grid-table th{cursor:default}
/* zebra + hover: the actual fix for "hard to read along the line" */
.grid-table tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
.grid-table tbody tr:hover{background:rgba(91,141,239,.10)}
.grid-table tbody td{border-bottom:none}
.grid-table td.l{white-space:nowrap}

/* share bar — turns the dead space at the end of each row into the comparison
   the table is actually for */
.barcell{display:flex;align-items:center;gap:10px}
.bartrack{flex:1;min-width:60px;height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.barfill{height:100%;background:var(--accent);border-radius:4px}
.barpct{width:62px;text-align:right;font-size:12px;color:var(--muted);flex:none}

.site-foot{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:12px}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- mobile: table -> stacked cards, detail stacks vertically ---------- */
@media(max-width:720px){
  .wrap{padding:0 12px}
  .hero{padding:22px 0 4px}
  .hero h1{font-size:21px;line-height:1.2}
  .hero .sub{font-size:13px}
  .stats{gap:8px}
  .stat{flex:1 1 calc(50% - 4px);min-width:0;padding:10px 12px}
  .controls{gap:8px}
  .controls input{min-width:0}
  .controls .count{margin-left:0}

  /* the leaderboard becomes a list of cards */
  .tbl-wrap{border:none;background:transparent;overflow:visible}
  table,tbody,tr,td{display:block;width:auto}
  thead{display:none}
  /* …but the statistics tables stay real tables — they are dense numeric grids
     whose meaning comes from column alignment, so they scroll sideways in their
     own container instead of stacking. Declared inside the query, after the
     rules above, so it actually wins. */
  .grid-wrap{border:1px solid var(--line);background:var(--panel);overflow-x:auto}
  .grid-table{display:table;width:100%}
  .grid-table thead{display:table-header-group}
  .grid-table tbody{display:table-row-group}
  .grid-table tr{display:table-row}
  .grid-table td,.grid-table th{display:table-cell;white-space:nowrap;font-size:12.5px}
  tr.row{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:10px 0;padding:11px 13px}
  tr.row td{text-align:left;border:none;padding:2px 0;font-size:13px}
  tr.row .caret{display:none}
  tr.row .name{font-size:15.5px}
  tr.row .addr{margin-top:1px}
  /* label the metric rows using their data-label */
  tr.row td[data-label]{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:3px 0;border-top:1px solid rgba(255,255,255,.05)}
  tr.row td[data-label]:before{content:attr(data-label);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
  /* a value's sub-line (e.g. "last paid …", "shows …%") drops below, right-aligned */
  tr.row td[data-label] > div{flex-basis:100%;text-align:right;margin-top:0}
  tr.row td.verdict-cell{margin-bottom:4px}
  .tap-hint{display:inline;color:var(--accent);font-size:11px;margin-left:6px}

  /* detail: its own card, panels stacked full-width */
  tr.detail{display:block;margin:-4px 0 12px}
  tr.detail td{display:block;background:var(--panel);border:1px solid var(--line);border-radius:0 0 12px 12px;padding:12px 13px}
  .detail .cols{flex-direction:column;gap:18px}
  .detail .cols>div{width:100%;min-width:0}
  .detail table{width:100%}
  .detail .mbars{overflow-x:auto;padding-bottom:4px}
  .explainer{margin-top:28px;padding:26px 0 8px}
  .hero h1 br{display:none}
}
.tap-hint{display:none}

/* Telegram link — icon + label, sized to sit inline with the nav text. The SVG
   inherits currentColor so it picks up the same hover/active states as the
   other links rather than needing its own colour rules. */
.tg-link{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.tg-link svg{flex:none}
.head-links .tg-link:hover{color:var(--accent)}
.site-foot .tg-link.foot{display:inline-flex;margin-top:8px;color:var(--accent);text-decoration:none;font-size:12.5px}
.site-foot .tg-link.foot:hover{text-decoration:underline}