/* Home: the mining circuit (js/circuit.js) and the top 10 miners.
   Deep space around Proxima Centauri: a night sky in the dark theme, a day sky in the light one. */
.circuit {
  --text-1: #EEF8F2; --text-2: #A9B8B1; --text-3: #7C8C85; --primary: #3DE98A;
  --cx-gain: #FFD166; --cx-credit: #6FC6FF; --cx-sign: #BFA2FF; --cx-paid: #3DE98A; --cx-share: #7DF5AF;
  position: relative; margin-top: 10px; padding: 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 140% at 42% 40%, #0A1420 0%, #05090F 55%, #02040A 100%); border-color: rgba(120,200,190,0.2);
}
.home-board .container > .circuit { animation: none; }
.circuit:hover { border-color: rgba(120,200,190,0.32); }
.circuit-head {
  position: absolute; z-index: 5; top: 12px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 12px; pointer-events: none;
}
.circuit-stage { position: relative; overflow: hidden; contain: layout paint; }
.cx-defs { position: absolute; }

/* ---- Arrival: fades in with the scroll, then opens from the pool ---- */
.circuit.cx-wait {
  opacity: var(--cx-fade, 0);
  transform: translateY(calc((1 - var(--cx-fade, 0)) * 34px)) scale(calc(0.965 + var(--cx-fade, 0) * 0.035));
}
.circuit.cx-go { transition: opacity 500ms ease, transform 800ms cubic-bezier(.2,.7,.2,1); }
/* the sky is already there, dim; everything else opens from the pool */
.cx-wait .cx-sky { opacity: calc(var(--cx-fade, 0) * 0.6); }
.cx-wait #cxBoxes, .cx-wait .cx-under, .cx-wait .cx-over { clip-path: circle(0 at var(--cx-ox, 40%) var(--cx-oy, 50%)); }
.is-lit #cxBoxes, .is-lit .cx-under, .is-lit .cx-over { clip-path: circle(142% at var(--cx-ox, 40%) var(--cx-oy, 50%)); }
.cx-go #cxBoxes, .cx-go .cx-under, .cx-go .cx-over { transition: clip-path 1300ms cubic-bezier(.5,0,.15,1); }
.cx-wait .circuit-foot { opacity: 0; transform: translateY(8px); }
.circuit-foot { transition: opacity 700ms ease 1300ms, transform 700ms cubic-bezier(.2,.7,.2,1) 1300ms; }

/* ---- Sky ---- */
.cx-sky {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transform: translate(var(--cx-px, 0), var(--cx-py, 0)) scale(1.035);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), opacity 900ms ease;
}
.is-lit .cx-sky { opacity: 1; }
.cx-corona {
  position: absolute; width: calc(var(--cx-r, 120px) * 4.6); height: calc(var(--cx-r, 120px) * 4.6); border-radius: 50%; pointer-events: none;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255,150,80,0.46), rgba(255,96,44,0.24) 44%, transparent 72%);
  mix-blend-mode: screen; animation: cx-breathe-star 5.6s ease-in-out infinite;
}
@keyframes cx-breathe-star { 50% { opacity: 0.55; transform: scale(1.09); } }
.cx-scene { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; }
.cx-canvas { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.cx-under { z-index: 1; }
.cx-over { z-index: 4; }
#cxBoxes { position: absolute; inset: 0; z-index: 2; }

/* ---- Boxes: they come in one after the other ---- */
.cx-node { position: absolute; transform: translate(-50%, -50%); opacity: 0; scale: 0.72; }
.is-lit .cx-node {
  opacity: 1; scale: 1;
  transition: opacity 520ms ease var(--d, 0s), scale 760ms cubic-bezier(.2,1.5,.4,1) var(--d, 0s), border-color 240ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(.2,.7,.2,1);
}
.is-still .cx-node, .is-still .cx-tag { transition: none; }
.cx-badge {
  display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%;
  font: 700 10px/1 var(--font-ui); color: #03200F; background: linear-gradient(135deg, #A0FAC6, #2BDC79);
  box-shadow: 0 0 9px rgba(61,233,138,0.55);
}
.cx-card {
  --cx-tone: var(--primary);
  display: flex; flex-direction: column; width: 172px; padding: 9px 12px 10px; border-radius: 12px; color: var(--text-1);
  background: linear-gradient(165deg, rgba(24,34,44,0.86), rgba(7,12,20,0.92));
  border: 1px solid color-mix(in srgb, var(--cx-tone) 36%, rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px -14px #000;
}
.cx-card.is-on {
  border-color: var(--cx-tone);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 14px 34px -14px #000, 0 0 28px -4px color-mix(in srgb, var(--cx-tone) 62%, transparent);
  transform: translate(-50%, -50%) scale(1.04);
}
.cx-card-head { display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: -0.01em; }
.cx-card-head b { font-weight: 620; white-space: nowrap; }
.cx-card-head svg { flex: none; color: var(--cx-tone); }
.cx-card-head .cx-badge { margin-right: 0; }
.cx-chain { --cx-tone: var(--cx-gain); width: 212px; }
.cx-ledger { --cx-tone: var(--cx-credit); }
.cx-controller { --cx-tone: var(--cx-sign); }
.cx-wallet { --cx-tone: var(--cx-paid); width: 142px; padding: 8px 10px; }
.cx-wallet .cx-card-head { font-size: 12px; gap: 5px; }
.cx-card.is-hit { animation: cx-hit 700ms cubic-bezier(.2,.7,.2,1); }
@keyframes cx-hit { 30% { transform: translate(-50%, -50%) scale(1.09); filter: brightness(1.35); } }
.cx-chain.is-signed { box-shadow: 0 0 34px -2px rgba(191,162,255,0.65); border-color: var(--cx-sign); }

/* chain: blocks that move along when a new one comes in */
.cx-blocks { display: flex; gap: 9px; margin-top: 9px; }
.cx-blocks i {
  position: relative; flex: 1 1 0; aspect-ratio: 1; border-radius: 5px;
  background: linear-gradient(145deg, rgba(255,209,102,0.36), rgba(255,209,102,0.08));
  border: 1px solid rgba(255,209,102,0.44);
}
.cx-blocks i + i::before { content: ""; position: absolute; left: -10px; top: 50%; width: 9px; height: 2px; background: rgba(255,209,102,0.6); }
.cx-blocks i.is-new {
  background: linear-gradient(145deg, #FFE9A8, #F2A81D); border-color: #FFE9A8;
  box-shadow: 0 0 16px rgba(255,209,102,0.8); animation: cx-newblock 800ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cx-newblock { from { transform: scale(0.2) rotate(-40deg); opacity: 0; } }

/* ledger: rows without a name or a figure */
.cx-rows { display: grid; gap: 5px; margin-top: 9px; }
.cx-rows i { display: block; height: 5px; border-radius: 3px; background: rgba(111,198,255,0.12); overflow: hidden; }
.cx-rows b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2F91D8, #9CDAFF); transition: width 800ms cubic-bezier(.2,.7,.2,1); }

/* controller: a signature that writes itself */
.cx-sign { display: block; width: 100%; height: 22px; margin-top: 6px; }
.cx-sign path { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.5; }
.cx-sign path.is-draw { opacity: 1; animation: cx-write 1400ms ease-in-out both; }
@keyframes cx-write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* wallet */
.cx-plus {
  position: absolute; right: 10px; top: -10px; padding: 1px 7px; border-radius: 99px; pointer-events: none;
  font: 700 10.5px/1.35 var(--font-ui); color: #03200F; background: linear-gradient(100deg, #A0FAC6, #36E886);
  opacity: 0; transform: translateY(6px);
}
.cx-wallet.is-hit .cx-plus { animation: cx-plus 650ms ease-out; }
@keyframes cx-plus { 20% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* ---- Rigs ---- */
.cx-rig { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cx-rig[hidden] { display: none; }
.cx-rig svg { display: block; max-width: none; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.8)); transition: filter 300ms ease; }
.cx-rig::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 150px; height: 104px; margin: -52px 0 0 -75px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61,233,138,0.24), transparent); opacity: 0.5; transition: opacity 300ms ease;
}
.cx-rig.is-on::before { opacity: 1; }
.cx-rig-name { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 560; color: var(--text-1); text-shadow: 0 1px 6px #000; }
.cx-fan { animation: cx-spin 620ms linear infinite; transform-origin: 0 0; }
.cx-rig.is-on .cx-fan { animation-duration: 340ms; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.cx-led { animation: cx-breathe 2.6s ease-in-out infinite; }
@keyframes cx-breathe { 50% { opacity: 0.35; } }
.cx-status { animation: cx-blink 1.1s steps(2) infinite; }
.cx-status-1 { animation-delay: 300ms; }
.cx-status-2 { animation-delay: 700ms; }
@keyframes cx-blink { 50% { opacity: 0.2; } }
.cx-found {
  position: absolute; left: 50%; top: -12px; z-index: 3; padding: 2px 8px; border-radius: 99px; white-space: nowrap; pointer-events: none;
  font: 700 10.5px/1.35 var(--font-ui); color: #2A1B00; background: linear-gradient(100deg, #FFE9A8, #F7BC3E);
  box-shadow: 0 0 18px rgba(255,209,102,0.75); opacity: 0; transform: translate(-50%, 8px) scale(0.85);
}
.cx-rig.is-found .cx-found { animation: cx-found 2000ms cubic-bezier(.2,.7,.2,1) both; }
.cx-rig.is-found svg { filter: drop-shadow(0 0 14px rgba(255,209,102,0.85)); }
.cx-rig.is-found::before { background: radial-gradient(closest-side, rgba(255,209,102,0.5), transparent); opacity: 1; }
@keyframes cx-found { 8%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6px) scale(1); } }

/* ---- Pool API ---- */
.cx-hub { display: grid; place-items: center; width: 128px; height: 128px; }
.cx-ring { position: absolute; inset: 0; border-radius: 50%; }
.cx-ring-a {
  background: conic-gradient(from 0deg, transparent 0 8%, #3DE98A 22%, transparent 34% 56%, #A0FAC6 72%, transparent 84%);
  -webkit-mask: radial-gradient(closest-side, transparent 91%, #000 93%);
  mask: radial-gradient(closest-side, transparent 91%, #000 93%);
  animation: cx-spin 7s linear infinite;
}
.cx-ring-b { inset: 11px; border: 1px dashed rgba(125,245,175,0.42); animation: cx-spin 22s linear infinite reverse; }
.cx-orbit { position: absolute; inset: 20px; border-radius: 50%; animation: cx-spin 3.4s linear infinite; }
.cx-orbit i { position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #C8FBD9; box-shadow: 0 0 10px #3DE98A, 0 0 3px #fff; }
.cx-orb {
  position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(61,233,138,0.34), rgba(5,20,14,0.96) 72%);
  box-shadow: inset 0 0 0 1px rgba(125,245,175,0.36), 0 0 34px rgba(61,233,138,0.42);
  transition: box-shadow 260ms ease;
}
.cx-orb svg { display: block; }
.cx-orb-ring { stroke: #7DF5AF; }
.cx-orb-core { fill: #3DE98A; }
.cx-hub.is-on .cx-orb { box-shadow: inset 0 0 0 1px #7DF5AF, 0 0 56px rgba(61,233,138,0.8); }
.cx-hub.is-hit .cx-orb { animation: cx-hub-hit 760ms cubic-bezier(.2,.7,.2,1); }
@keyframes cx-hub-hit { 25% { transform: scale(1.16); box-shadow: inset 0 0 0 1px #FFE9A8, 0 0 76px rgba(255,209,102,0.9); } }
.cx-hub-name {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: inline-flex; align-items: center;
  padding: 2px 9px 2px 3px; border-radius: 99px; white-space: nowrap; font-size: 12.5px; font-weight: 620; color: var(--text-1);
  background: rgba(6,12,18,0.92); border: 1px solid rgba(125,245,175,0.3);
}

/* ---- Labels on the lines ---- */
.cx-tag {
  --cx-tone: var(--cx-share);
  position: absolute; transform: translate(-50%, -50%); padding: 1px 8px; border-radius: 99px; white-space: nowrap;
  font: 560 10.5px/1.5 var(--font-ui); color: color-mix(in srgb, var(--cx-tone) 72%, #fff);
  background: rgba(5,10,16,0.88); border: 1px solid color-mix(in srgb, var(--cx-tone) 30%, transparent);
  opacity: 0;
}
.is-lit .cx-tag { opacity: 0.66; transition: opacity 400ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.cx-go .cx-tag { transition-delay: 1450ms; }
.is-lit .cx-tag.is-on { opacity: 1; border-color: var(--cx-tone); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--cx-tone) 70%, transparent); }
.cx-tag.k-gain { --cx-tone: var(--cx-gain); }
.cx-tag.k-credit, .cx-tag.k-who { --cx-tone: var(--cx-credit); }
.cx-tag.k-sign { --cx-tone: var(--cx-sign); }
.cx-tag.k-paid { --cx-tone: var(--cx-paid); }

/* ---- Steps under the scene: six names, one sentence ---- */
.circuit-foot { position: relative; z-index: 5; padding: 9px 16px 11px; background: linear-gradient(180deg, rgba(8,14,20,0.72), #060B10); border-top: 1px solid rgba(255,255,255,0.07); }
.circuit-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-step { min-width: 0; opacity: 0.5; transition: opacity 260ms ease; }
.cx-step.is-on, .cx-step.is-past { opacity: 1; }
.cx-step-bar { display: block; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.1); overflow: hidden; }
.cx-step-bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #86F7B4, #0DD066); transform: scaleX(0); transform-origin: 0 50%; }
.cx-step.is-past .cx-step-bar i, .cx-step.is-on .cx-step-bar i { transform: none; transition: transform 500ms ease-out; }
.cx-step-title { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 580; color: var(--text-1); white-space: nowrap; }
.cx-step-title b { font-weight: 700; color: var(--primary); }
.cx-step-text { display: none; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.is-still .cx-step-text { display: block; }
.circuit-caption { min-height: 18px; margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--text-2); }
.circuit-caption.is-new { animation: cx-caption 460ms ease-out; }
@keyframes cx-caption { from { opacity: 0; transform: translateY(5px); } }

/* ---- Narrow: the same circuit from top to bottom ---- */
.is-narrow .cx-card { width: 172px; }
.is-narrow .cx-chain { width: 214px; }
.is-narrow .cx-wallet { width: 148px; }
.is-narrow .cx-wallet .cx-card-head { font-size: 12.5px; }
.is-narrow .cx-rig svg { width: 118px; height: auto; }
.is-narrow .cx-tag { font-size: 12px; }
@media (max-width: 720px) {
  .circuit-foot { padding: 8px 12px 11px; }
  .circuit-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .cx-step-title { font-size: 0; gap: 0; }
  .cx-step-title b { font-size: 12.5px; }
  .is-still.circuit-steps { grid-template-columns: 1fr; gap: 8px; }
  .is-still .cx-step-title { font-size: 12.5px; gap: 6px; }
}

/* ---- Paused or no motion ---- */
.is-paused *, .is-paused *::before, .is-paused *::after,
.is-still *, .is-still *::before, .is-still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .cx-card, .cx-sky, .cx-step, .cx-step-bar i, .cx-rows b { transition: none; }
}

/* ---- Light theme: the same scene under a day sky ---- */
[data-theme="light"] .circuit {
  --text-1: #12241C; --text-2: #46574F; --text-3: #6B7B73; --primary: #17774A;
  --cx-gain: #C98A12; --cx-credit: #1F7FC9; --cx-sign: #6C4FD8; --cx-paid: #128A52; --cx-share: #1E9E62;
  background: linear-gradient(160deg, #FBFDFD 0%, #F1F7F7 52%, #E8F2EF 100%); border-color: rgba(30,138,88,0.26);
}
[data-theme="light"] .circuit:hover { border-color: rgba(30,138,88,0.42); }
[data-theme="light"] .cx-corona {
  mix-blend-mode: normal;
  background: radial-gradient(closest-side, rgba(255,150,90,0.4), rgba(255,130,80,0.16) 48%, transparent 72%);
}
[data-theme="light"] .cx-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.96), rgba(246,250,249,0.92));
  border-color: color-mix(in srgb, var(--cx-tone) 34%, rgba(13,30,45,0.1));
  box-shadow: inset 0 1px 0 #FFF, 0 10px 24px -14px rgba(13,30,45,0.3);
}
[data-theme="light"] .cx-card.is-on {
  border-color: var(--cx-tone);
  box-shadow: inset 0 1px 0 #FFF, 0 12px 26px -14px rgba(13,30,45,0.32), 0 0 22px -5px color-mix(in srgb, var(--cx-tone) 60%, transparent);
}
[data-theme="light"] .cx-chain.is-signed { box-shadow: 0 0 26px -4px rgba(108,79,216,0.55); border-color: var(--cx-sign); }
[data-theme="light"] .cx-badge { color: #FFF; background: linear-gradient(135deg, #38A873, #146E45); box-shadow: 0 0 7px rgba(23,119,74,0.35); }
[data-theme="light"] .cx-blocks i { background: linear-gradient(145deg, rgba(201,138,18,0.24), rgba(201,138,18,0.06)); border-color: rgba(201,138,18,0.5); }
[data-theme="light"] .cx-blocks i + i::before { background: rgba(201,138,18,0.6); }
[data-theme="light"] .cx-blocks i.is-new { background: linear-gradient(145deg, #F7CE6B, #D9921A); border-color: #C98A12; box-shadow: 0 0 12px rgba(201,138,18,0.55); }
[data-theme="light"] .cx-rows i { background: rgba(31,127,201,0.13); }
[data-theme="light"] .cx-rows b { background: linear-gradient(90deg, #1F7FC9, #5DB2EA); }
[data-theme="light"] .cx-sign path { stroke: #6C4FD8; opacity: 0.68; }
[data-theme="light"] .cx-sign path.is-draw { opacity: 1; }
[data-theme="light"] .cx-plus { color: #FFF; background: linear-gradient(100deg, #38A873, #146E45); }
[data-theme="light"] .cx-rig svg { filter: drop-shadow(0 7px 9px rgba(13,30,45,0.34)); }
[data-theme="light"] .cx-rig.is-found svg { filter: drop-shadow(0 0 12px rgba(201,138,18,0.8)); }
[data-theme="light"] .cx-rig::before { background: radial-gradient(closest-side, rgba(30,158,98,0.2), transparent); }
[data-theme="light"] .cx-rig.is-found::before { background: radial-gradient(closest-side, rgba(201,138,18,0.34), transparent); }
[data-theme="light"] .cx-rig-name { text-shadow: 0 1px 4px #FFF, 0 0 2px #FFF; }
[data-theme="light"] .cx-ring-a { background: conic-gradient(from 0deg, transparent 0 8%, #1E9E62 22%, transparent 34% 56%, #2FBF7D 72%, transparent 84%); }
[data-theme="light"] .cx-ring-b { border-color: rgba(23,119,74,0.42); }
[data-theme="light"] .cx-orbit i { background: #1E9E62; box-shadow: 0 0 8px rgba(30,158,98,0.8); }
[data-theme="light"] .cx-orb {
  background: radial-gradient(circle at 36% 30%, #FFF, #DDF3E7 72%);
  box-shadow: inset 0 0 0 1px rgba(23,119,74,0.4), 0 0 26px rgba(30,158,98,0.34);
}
[data-theme="light"] .cx-orb-ring { stroke: #17774A; }
[data-theme="light"] .cx-orb-core { fill: #1E8A58; }
[data-theme="light"] .cx-hub.is-on .cx-orb { box-shadow: inset 0 0 0 1px #17774A, 0 0 38px rgba(30,158,98,0.6); }
@keyframes cx-hub-hit-light { 25% { transform: scale(1.16); box-shadow: inset 0 0 0 1px #C98A12, 0 0 48px rgba(201,138,18,0.7); } }
[data-theme="light"] .cx-hub.is-hit .cx-orb { animation-name: cx-hub-hit-light; }
[data-theme="light"] .cx-hub-name { background: rgba(255,255,255,0.96); border-color: rgba(23,119,74,0.34); box-shadow: 0 3px 8px -4px rgba(13,30,45,0.3); }
[data-theme="light"] .cx-tag {
  color: color-mix(in srgb, var(--cx-tone) 82%, #000);
  background: rgba(255,255,255,0.94); border-color: color-mix(in srgb, var(--cx-tone) 36%, transparent);
}
[data-theme="light"] .is-lit .cx-tag { opacity: 0.86; }
[data-theme="light"] .is-lit .cx-tag.is-on { opacity: 1; border-color: var(--cx-tone); box-shadow: 0 0 12px -3px color-mix(in srgb, var(--cx-tone) 65%, transparent); }
[data-theme="light"] .circuit-foot { background: linear-gradient(180deg, rgba(255,255,255,0.72), #F7FAFA); border-top-color: rgba(13,30,45,0.09); }
[data-theme="light"] .cx-step-bar { background: rgba(13,30,45,0.1); }
[data-theme="light"] .cx-step-bar i { background: linear-gradient(90deg, #38A873, #146E45); }

/* ============================================================
   TOP 10 MINERS: one line per miner
   ============================================================ */
.home-top { margin-top: 10px; padding: 0; overflow: hidden; }
.home-top.top-wait { opacity: 0; transform: translateY(18px); }
.home-board .container > .home-top { animation: none; transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.7,.2,1), border-color 180ms ease, box-shadow 180ms ease; }
.home-top-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 16px 9px; }
.home-top-sum { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.home-top-sum b { font-weight: 560; color: var(--text-2); }
.top-labels, .top-row { display: grid; grid-template-columns: 24px 170px minmax(40px, 1fr) 70px 112px 80px 92px; align-items: center; column-gap: 14px; }
.top-labels { padding: 0 16px 5px; font-size: 11.5px; color: var(--text-3); }
.top-labels span { text-align: right; }
.top-labels span:first-child { grid-column: 4; }
.top-rows { margin: 0; padding: 0; list-style: none; }
.top-row { padding: 6px 16px; border-top: 1px solid var(--border-subtle); transition: background-color 140ms ease; }
.top-row:hover { background: color-mix(in srgb, var(--text-1) 3%, transparent); }
.top-rank {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font: 620 11.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-3);
  background: var(--well); box-shadow: var(--well-shadow), inset 0 0 0 1px var(--card-border);
}
.top-row:nth-child(-n+3) .top-rank { color: var(--btn-ink); background: var(--btn-grad); box-shadow: var(--btn-shadow); }
.top-main { display: contents; }
.top-addr { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.01em; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar { display: block; height: 5px; border-radius: 3px; background: var(--well); box-shadow: inset 0 0 0 1px var(--card-border); overflow: hidden; }
.top-bar i { position: relative; display: block; width: 0; height: 100%; border-radius: 3px; background: var(--grad); transition: width 800ms cubic-bezier(.2,.7,.2,1); overflow: hidden; }
.top-row:first-child .top-bar i::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%); animation: top-sheen 3.6s ease-in-out infinite;
}
@keyframes top-sheen { 55%, 100% { transform: translateX(100%); } }
.top-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.top-stat-value { font-size: 13.5px; font-weight: 560; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--text-1); white-space: nowrap; }
.top-stat-value .home-unit { margin-left: 3px; font-size: 11px; }
.top-stat-label { display: none; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.top-empty { padding: 18px 16px 20px; text-align: center; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--border-subtle); }
@media (max-width: 720px) {
  .top-labels { display: none; }
  .top-row { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding: 8px 12px; }
  .top-addr { grid-column: 2 / -1; }
  .top-bar { grid-column: 2 / -1; }
  .top-row > .top-stat:nth-child(3) { grid-column: 2; }
  .top-stat { align-items: flex-start; }
  .top-stat-label { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .top-bar i { transition: none; }
  .top-row:first-child .top-bar i::after { animation: none; }
  .home-top.top-wait { opacity: 1; transform: none; }
}