/* XDN Explorer — complete stylesheet.
   Light/dark mode is driven entirely by prefers-color-scheme — no JavaScript. */

/* ── Colour tokens ────────────────────────────────────────────────────────── */
:root {
  --bg:        #f5f5f0;
  --bg2:       #ebebE6;
  --panel:     #ffffff;
  --border:    rgba(0,0,0,0.09);
  --border2:   rgba(0,0,0,0.16);
  --text:      #1a1a1a;
  --text2:     #555550;
  --text3:     #888880;
  --accent:    #1a73e8;
  --pos-color: #5b3fa8;
  --pow-color: #b06000;
  --green:     #1e8e3e;
  --red:       #d93025;
  --purple:    #5b3fa8;
  --gold:      #b06000;
  --nav-bg:    #1c1c28;
  --nav-text:  rgba(255,255,255,0.55);
  --nav-hi:    #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0c0e14;
    --bg2:       #0a0c11;
    --panel:     #131620;
    --border:    rgba(255,255,255,0.07);
    --border2:   rgba(255,255,255,0.14);
    --text:      #e0e0e8;
    --text2:     #9098a8;
    --text3:     #5a6070;
    --accent:    #4fa3ff;
    --pos-color: #b08de0;
    --pow-color: #f5a623;
    --green:     #2ecc71;
    --red:       #e74c3c;
    --purple:    #b08de0;
    --gold:      #f5a623;
  }
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: monospace; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--nav-bg);
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
/* Hamburger toggle + button — hidden on desktop, shown ≤720px. */
.nav-toggle { display: none; }
.nav-burger { display: none; }
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 0;
  border-right: 1px solid rgba(255,255,255,.08);
  margin-right: 8px;
}
.nav-logo-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #4fa3ff, #9060d0);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; color: #fff; letter-spacing: -.5px;
}
.nav-logo-text { color: #fff; font-weight: 700; font-size: 13px; }
.nav-links { display: flex; align-items: stretch; flex: 1; }
.nav-link {
  color: var(--nav-text); font-size: 12px; padding: 0 12px;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.nav-link:hover,
[aria-current="page"].nav-link {
  color: var(--nav-hi); border-bottom-color: #4fa3ff; text-decoration: none;
}

/* ── Mobile nav (≤720px) — hamburger-collapsed menu ───────────────────────── */
@media (max-width: 720px) {
  .navbar { align-items: center; padding: 0 12px; }

  /* Brand stays on the left; burger sits on the right. */
  .nav-brand { flex: 1; border-right: none; margin-right: 0;
               padding: 8px 0; }
  .nav-logo-text { font-size: 13px; }

  /* The hamburger button. order:-1 makes it visually leftmost despite
     coming after .nav-brand in the DOM. The DOM order is constrained by
     the .nav-toggle:checked ~ .nav-burger sibling selector (the toggle
     has to precede the burger and links in source order), so we move
     the burger visually only. Hamburger on the left ensures it's
     always reachable: when a page is wider than viewport (data tables
     with pinch-zoom), the page loads scrolled to its left edge, so the
     burger is always in view. Right-aligned would be off-screen until
     you scroll to the right edge. */
  .nav-burger {
    order: -1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 40px; height: 40px; cursor: pointer;
    padding: 8px; box-sizing: border-box; flex: none;
  }
  .nav-burger-bar {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--nav-text); transition: all .2s;
  }
  /* Checked state — morph bars into an X. */
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The link list becomes a dropdown panel, collapsed by default. */
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--nav-bg);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 16px rgba(0,0,0,.3);
    z-index: 50;
  }
  /* Shown when the checkbox is checked. */
  .nav-toggle:checked ~ .nav-links { display: flex; }

  /* Each link becomes a full-width stacked row. */
  .nav-link {
    padding: 14px 16px; font-size: 14px;
    border-bottom: none;
    border-top: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid transparent;
  }
  .nav-link:hover,
  [aria-current="page"].nav-link {
    border-bottom-color: transparent;
    border-left-color: #4fa3ff;
    background: rgba(255,255,255,.04);
  }
}

/* ── Stat strip ───────────────────────────────────────────────────────────── */
.stat-strip {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 0 16px; display: flex; align-items: stretch; overflow-x: auto;
}
.stat-cell {
  display: flex; flex-direction: column; justify-content: center;
  padding: 7px 14px; flex-shrink: 0;
}
.stat-sep { width: 1px; background: var(--border); margin: 8px 0; flex-shrink: 0; }
.stat-label {
  font-size: 9px; color: var(--text3); text-transform: uppercase;
  letter-spacing: .8px; margin-bottom: 2px;
  display: flex; align-items: center; gap: 4px;
}
.stat-val { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.stat-green  { color: var(--green); }
.stat-accent { color: var(--accent); }
.stat-loading { padding: 12px 16px; color: var(--text3); font-size: 11px; }
.dot-live, .dot-amber {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  animation: blink 2s infinite; vertical-align: middle; margin-right: 3px;
}
.dot-live  { background: var(--green); }
.dot-amber { background: var(--gold); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.diff-split { display: flex; flex-direction: column; gap: 2px; }
.diff-row   { display: flex; align-items: center; gap: 5px; }
.diff-tag {
  font-size: 8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; padding: 1px 4px; border-radius: 2px;
}
.diff-tag-pos { background: rgba(91,63,168,.15); color: var(--pos-color); }
.diff-tag-pow { background: rgba(176,96,0,.15);  color: var(--pow-color); }
.pos-color { color: var(--pos-color); font-size: 12px; font-weight: 600; }
.pow-color { color: var(--pow-color); font-size: 12px; font-weight: 600; }

/* ── Search bar ───────────────────────────────────────────────────────────── */
.search-row {
  background: var(--panel); border-bottom: 1px solid var(--border); padding: 8px 16px;
}
.search-wrap {
  position: relative; max-width: 640px; margin: 0 auto;
  display: flex; gap: 6px;
}
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-size: 15px; pointer-events: none;
}
.search-input {
  flex: 1; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); padding: 8px 12px 8px 30px;
  font-size: 12px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--text3); }
.search-btn {
  background: var(--accent); border: none; border-radius: 6px; color: #fff;
  cursor: pointer; font-size: 12px; padding: 8px 16px;
  font-family: inherit; font-weight: 600;
}

/* ── Two-column grids ─────────────────────────────────────────────────────── */
.main-grid, .bottom-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.bottom-grid { border-top: 1px solid var(--border); }
.col, .bp { background: transparent; }
.col-border-left, .bp-border-left { border-left: 1px solid var(--border); }
.col-header {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.col-title { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.col-link   { font-size: 10px; color: var(--accent); }
.col-accent { width: 3px; height: 14px; border-radius: 2px; }
.col-accent-blue  { background: var(--accent); }
.col-accent-pos   { background: var(--pos-color); }
.col-accent-gold  { background: var(--gold); }

/* ── Block / Tx rows ──────────────────────────────────────────────────────── */
.block-row, .tx-row {
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  color: inherit; transition: background .1s;
}
.block-row:hover, .tx-row:hover { background: var(--bg2); text-decoration: none; }
.block-num { font-size: 13px; font-weight: 700; color: var(--accent); min-width: 74px; }
.row-meta  { flex: 1; min-width: 0; }
.row-hash  { font-size: 10px; color: var(--text3); font-family: monospace;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub   { font-size: 10px; color: var(--text3); margin-top: 2px;
             display: flex; align-items: center; gap: 5px; }
.row-rhs   { text-align: right; flex-shrink: 0; }
.row-main  { font-size: 11px; font-weight: 600; color: var(--text); }
.row-age   { font-size: 10px; color: var(--text3); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge { display: inline-block; width: fit-content; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.badge-pos { background: rgba(91,63,168,.15);  color: var(--pos-color); }
.badge-pow { background: rgba(176,96,0,.15);   color: var(--pow-color); }
.badge-tx  { background: rgba(127,127,127,.15); color: var(--text2); }
.badge-itx { background: rgba(79,163,255,.12); color: var(--accent); }
.badge-mn  { background: rgba(79,163,255,.10); color: var(--accent); }
.badge-dev { background: rgba(255,165,0,.15);  color: var(--gold, #b8860b); }

/* ── Tx icon ──────────────────────────────────────────────────────────────── */
.tx-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.tx-icon-recv { background: rgba(30,142,62,.12); color: var(--green); }

/* ── Masternode rows ──────────────────────────────────────────────────────── */
.mn-row {
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; background: transparent;
}
.mn-rank { font-size: 11px; color: var(--text3); min-width: 22px; }
.mn-addr { font-size: 10px; color: var(--accent); font-family: monospace;
           flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mn-dot-active   { background: var(--green); }
.mn-dot-inactive { background: var(--red); }
.mn-age { font-size: 10px; color: var(--text3); min-width: 50px; text-align: right; }

/* ── Difficulty chart panel ───────────────────────────────────────────────── */
.chart-panel { padding: 12px 14px 0; }
.chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.chart-title { font-size: 11px; font-weight: 600; color: var(--text); }
.chart-legend { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--text3); }
.legend-dot   { width: 8px; height: 3px; border-radius: 2px; display: inline-block; }
.legend-pow   { background: var(--pow-color); }
.legend-pos   { background: var(--pos-color); }
.legend-label { margin-left: 3px; }
.diff-svg     { display: block; height: 72px; }
.chart-foot   {
  display: flex; justify-content: space-between;
  padding: 4px 0 8px; font-size: 9px; color: var(--text3);
}
.chart-stats  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 12px; }
.chart-stat-card {
  background: var(--bg2); border-radius: 6px; padding: 8px 10px;
}
.csc-label { font-size: 9px; color: var(--text3); text-transform: uppercase;
             letter-spacing: .7px; margin-bottom: 3px; }
.csc-val   { font-size: 14px; font-weight: 700; color: var(--text); }
.csc-pos   { color: var(--pos-color); }

/* ── Supply page ──────────────────────────────────────────────────────────── */
.supply-page, .info-page, .detail-page, .list-page, .not-found {
  max-width: 1400px; margin: 0 auto; padding: 28px 20px;
}
.page-title   { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.section-title { font-size: 16px; font-weight: 500; margin: 24px 0 10px; }
.section-desc  { font-size: 12px; color: var(--text2); line-height: 1.7; margin-bottom: 10px; }
.supply-section { margin-bottom: 20px; }
.supply-cards   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.supply-card    { background: var(--bg2); border-radius: 6px; padding: 10px 12px; }
.sc-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 4px; }
.sc-val   { font-size: 15px; font-weight: 700; }
.sc-green { color: var(--green); }
.sc-red   { color: var(--red); }
.sc-purple { color: var(--purple); }
.burn-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border);
              border-radius: 6px; overflow: hidden; }
.burn-row   { padding: 7px 10px; border-bottom: 1px solid var(--border);
              display: flex; align-items: center; gap: 10px; }
.burn-row:last-child { border-bottom: none; }
.burn-badge { font-size: 9px; font-weight: 700; text-transform: uppercase;
              background: rgba(217,48,37,.1); color: var(--red);
              padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.burn-addr  { font-size: 10px; font-family: monospace; color: var(--text3);
              flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.burn-amt   { font-size: 11px; font-weight: 600; white-space: nowrap; }
.wxdn-checker { display: flex; gap: 8px; margin-top: 10px; }
.wxdn-input  { flex: 1; background: var(--bg2); border: 1px solid var(--border2);
               border-radius: 6px; color: var(--text); padding: 8px 12px;
               font-size: 12px; font-family: monospace; outline: none; }
.wxdn-input::placeholder { color: var(--text3); font-family: inherit; }
.wxdn-btn    { background: var(--accent); border: none; border-radius: 6px; color: #fff;
               cursor: pointer; font-size: 12px; padding: 8px 14px; font-weight: 600; }
.wxdn-btn:disabled { opacity: .5; cursor: not-allowed; }
.wxdn-result-box { margin-top: 10px; background: var(--bg2); border-radius: 6px;
                   padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--purple); }

/* ── API info page ────────────────────────────────────────────────────────── */
.api-table { display: flex; flex-direction: column; gap: 0;
             border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
             margin-bottom: 8px; }
.api-row   { padding: 8px 12px; border-bottom: 1px solid var(--border);
             display: flex; align-items: baseline; gap: 12px; }
.api-row:last-child { border-bottom: none; }
.api-path  { font-size: 11px; font-family: monospace; min-width: 300px;
             flex-shrink: 0; color: var(--accent); }
.api-desc  { font-size: 11px; color: var(--text2); }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.loading { padding: 20px 14px; color: var(--text3); font-size: 12px; }
.error   { padding: 12px 14px; color: var(--red);   font-size: 12px; }
.not-found h1 { font-size: 48px; font-weight: 300; color: var(--text3); margin-bottom: 12px; }
.not-found p  { color: var(--text2); }

@media (max-width: 600px) {
  .main-grid, .bottom-grid { grid-template-columns: 1fr; }
  .col-border-left, .bp-border-left { border-left: none; border-top: 1px solid var(--border); }
  .supply-cards { grid-template-columns: 1fr 1fr; }
  .api-path { min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Markets page
   ═══════════════════════════════════════════════════════════════════════════ */

.markets-page { min-height: 500px; }

/* ── Exchange tab strip ─────────────────────────────────────────────────── */
.exchange-tabs {
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  overflow-x: auto;
  gap: 2px;
}
.ex-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  text-decoration: none;
  gap: 2px;
}
.ex-tab:hover { color: var(--text); text-decoration: none; }
.ex-tab-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.ex-tab-pair {
  font-size: 9px;
  font-weight: 400;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.tab-loading { padding: 12px 16px; color: var(--text3); font-size: 12px; }

/* ── Summary hero + stat grid ───────────────────────────────────────────── */
.market-summary {
  padding: 20px 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.market-hero { min-width: 200px; }
.market-pair {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
}
.market-last-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: monospace;
}
.market-quote { font-size: 14px; color: var(--text3); font-weight: 400; }
.market-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  min-width: 280px;
}
.market-stat {
  background: var(--bg2);
  border-radius: 6px;
  padding: 8px 10px;
}
.ms-label {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 3px;
}
.ms-val { font-size: 12px; font-weight: 600; font-family: monospace; }
.market-trade-link {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
}
.trade-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.trade-btn:hover { opacity: .85; text-decoration: none; }

/* ── Trades + Order Book grid ───────────────────────────────────────────── */
.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.market-col { background: var(--panel); }
.market-col-border { border-left: 1px solid var(--border); }

/* ── Trades table ───────────────────────────────────────────────────────── */
.trades-table { font-size: 11px; }
.tt-head {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 80px;
  padding: 6px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.tt-row {
  display: grid;
  grid-template-columns: 64px 1fr 1fr 80px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.tt-row:hover { background: var(--bg2); }
.tt-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-right { text-align: right; }
.tt-age { color: var(--text3); font-size: 10px; }
.trade-side {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 5px;
  border-radius: 3px;
  width: fit-content;
}
.trade-buy  { background: rgba(30,142,62,.12);  color: var(--green); }
.trade-sell { background: rgba(217,48,37,.1);   color: var(--red); }

/* ── Order book ─────────────────────────────────────────────────────────── */
.order-book { font-size: 11px; }
.ob-spread {
  padding: 6px 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--text3);
}
.ob-spread .mono { color: var(--text); }
.ob-section { }
.ob-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 5px 12px;
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--border);
}
.ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
}
.ob-row:hover { background: var(--bg2); }
.ob-ask-price { color: var(--red); }
.ob-bid-price { color: var(--green); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .market-summary   { flex-direction: column; gap: 14px; }
  .market-stat-grid { grid-template-columns: 1fr 1fr; }
  .market-grid      { grid-template-columns: 1fr; }
  .market-col-border { border-left: none; border-top: 1px solid var(--border); }
}

/* ── Nav logo ──────────────────────────────────────────────────────────────── */
.nav-brand-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.nav-logo-img   { height: 2rem; width: 2rem; object-fit: contain; }
.nav-logo-text  { font-size: 1rem; font-weight: 700; color: #ffffff; }

/* ── Data table (shared by movement, blocks, richlist, mempool) ────────────── */
.data-table       { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.table-header     { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                    column-gap: 0.75rem;
                    padding: 0.6rem 1rem; background: var(--bg2);
                    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
                    letter-spacing: 0.05em; color: var(--text3); }
.table-row        { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
                    column-gap: 0.75rem;
                    padding: 0.7rem 1rem; border-top: 1px solid var(--border);
                    font-size: 0.85rem; align-items: center; background: var(--bg); }
.table-row:nth-child(odd) { background: var(--bg2); }
.table-row:hover  { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.text-right       { text-align: right; }
.text-muted       { color: var(--text3); }
.link             { color: var(--accent); text-decoration: none; }
.link:hover       { text-decoration: underline; }
.empty-state      { padding: 3rem; text-align: center; color: var(--text3); }

/* ── Stats grid (network page) ─────────────────────────────────────────────── */
.stats-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
               gap: 1rem; margin-bottom: 2rem; }
.stat-card   { background: var(--bg2); border: 1px solid var(--border);
               border-radius: 8px; padding: 1.2rem; }
.stat-label  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
               color: var(--text3); margin-bottom: 0.4rem; }
.stat-value  { font-size: 1.3rem; font-weight: 600; color: var(--text); }

/* ── API page ──────────────────────────────────────────────────────────────── */
.info-header     { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.info-logo       { height: 5rem; object-fit: contain; }
.api-table       { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
.api-row         { display: grid;
                   grid-template-columns: minmax(220px, auto) 1fr minmax(300px, auto);
                   gap: 1rem; align-items: center;
                   padding: 0.7rem 1rem; background: var(--bg2);
                   border: 1px solid var(--border); border-radius: 8px;
                   font-size: 0.85rem; }
.api-path        { color: var(--accent); font-size: 0.8rem; word-break: break-all; }
.api-desc        { color: var(--text3); }
.api-input-group { display: flex; gap: 0.4rem; }
.api-input       { flex: 1; padding: 0.35rem 0.6rem; font-size: 0.8rem;
                   background: var(--bg); border: 1px solid var(--border);
                   border-radius: 4px; color: var(--text);
                   font-family: monospace; }
.api-input:focus { outline: none; border-color: var(--accent); }
.api-exec-btn    { padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600;
                   background: var(--accent); color: #fff; border-radius: 4px;
                   text-decoration: none; white-space: nowrap; }
.api-exec-btn:hover { opacity: 0.85; }
.api-param       { color: var(--text3); font-style: italic; }

/* ── Page controls (limit toggle + title row) ──────────────────────────────── */
.page-controls    { display: flex; align-items: center; justify-content: space-between;
                    margin-bottom: 1.2rem; }
.controls-right   { display: flex; align-items: center; gap: 0.5rem; }
.control-label    { font-size: 0.8rem; color: var(--text3); }
.ctrl-btn         { padding: 0.3rem 0.8rem; font-size: 0.8rem; border-radius: 4px;
                    border: 1px solid var(--border); background: var(--bg2);
                    color: var(--text2); cursor: pointer; }
.ctrl-btn:hover   { border-color: var(--accent); color: var(--accent); }
.ctrl-btn-active  { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination  { display: flex; align-items: center; justify-content: center;
               gap: 1rem; padding: 1rem; }
.page-btn    { padding: 0.4rem 1.2rem; font-size: 0.85rem; border-radius: 4px;
               border: 1px solid var(--border); background: var(--bg2);
               color: var(--text2); cursor: pointer; }
.page-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.page-btn[disabled] { opacity: 0.35; cursor: default; }
.page-info   { font-size: 0.8rem; color: var(--text3); }

/* Numbered page strip + jump form — outer block. */
.pagination-block { width: 100%; margin: 1.5rem 0 0.5rem;
                    display: flex; flex-direction: column;
                    gap: 1.25rem; align-items: center; }
.page-strip       { display: flex; flex-wrap: wrap; align-items: center;
                    justify-content: center; gap: 0.4rem; width: 100%; }
.page-num         { padding: 0.45rem 0.85rem; min-width: 2.4rem; text-align: center;
                    font-size: 0.95rem; border-radius: 4px;
                    border: 1px solid var(--border); background: var(--bg2);
                    color: var(--text2); cursor: pointer;
                    text-decoration: none; line-height: 1; }
.page-num:hover   { border-color: var(--accent); color: var(--accent); }
.page-num-active  { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; }
.page-num-active:hover { color: #fff; }
.page-ellipsis    { padding: 0 0.4rem; color: var(--text3); user-select: none;
                    font-size: 0.95rem; }
.page-edge        { padding: 0.45rem 0.95rem; font-size: 0.95rem; }

/* Jump-to row */
.page-jump        { display: flex; flex-wrap: wrap; align-items: center;
                    justify-content: center; gap: 0.65rem; width: 100%;
                    font-size: 0.95rem; color: var(--text3); }
.page-jump label  { color: var(--text3); font-size: 0.95rem; }
.page-jump select,
.page-jump input  { padding: 0.4rem 0.6rem; font-size: 0.9rem; border-radius: 4px;
                    border: 1px solid var(--border); background: var(--bg2);
                    color: var(--text2); }
.page-jump input  { width: 12rem; font-family: var(--mono); }
.page-jump button { padding: 0.4rem 1rem; font-size: 0.9rem; border-radius: 4px;
                    border: 1px solid var(--border); background: var(--bg2);
                    color: var(--text2); cursor: pointer; }
.page-jump button:hover { border-color: var(--accent); color: var(--accent); }
.page-jump .page-info { font-size: 0.85rem; }

@media (max-width: 600px) {
    .page-strip { gap: 0.3rem; }
    .page-num   { padding: 0.35rem 0.55rem; min-width: 1.8rem; font-size: 0.82rem; }
    .page-edge  { padding: 0.35rem 0.65rem; font-size: 0.82rem; }
    .page-jump input { width: 8rem; }
}

/* ── Table grid columns ────────────────────────────────────────────────────── */
.table-header-blocks,
.table-row-blocks { grid-template-columns: 80px minmax(0,1fr) 80px 50px 50px 110px; }

.table-header-txs,
.table-row-txs    { grid-template-columns: minmax(0,1fr) 80px 50px 150px 80px; }

/* ── Full hash / txid display ──────────────────────────────────────────────── */
.hash-full { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             display: block; font-size: 0.78rem; }

/* ── Detail pages (block, tx, address) ─────────────────────────────────────── */
.detail-header   { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.detail-card     { background: var(--bg2); border: 1px solid var(--border);
                   border-radius: 8px; overflow: hidden; margin-bottom: 2rem; }
.detail-row      { display: grid; grid-template-columns: 160px 1fr;
                   padding: 0.7rem 1.2rem; border-top: 1px solid var(--border); }
.detail-row:first-child { border-top: none; }
.detail-label    { font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
                   letter-spacing: 0.04em; color: var(--text3); padding-top: 2px; }
.detail-value    { font-size: 0.88rem; color: var(--text); word-break: break-all; }

/* hash-wrap: wraps long hashes instead of overflowing */
.hash-wrap       { word-break: break-all; white-space: normal; }

/* Block tx table columns */
.table-header-block-txs,
.table-row-block-txs { grid-template-columns: 1fr 60px 160px; }

.error-page      { padding: 3rem 0; }
.badge-tx        { background: rgba(100,100,100,0.12); color: var(--text2); }

/* ── API page extras ────────────────────────────────────────────────────────── */
.api-param       { font-style: italic; color: var(--text3); }
.api-exec-form   { display: contents; }

/* ── Address transaction table ─────────────────────────────────────────────── */
/* Columns: TXID | Block | Date | Age | Type | Confirmations | Amount | Balance */
.table-header-addr-txs,
.table-row-addr-txs { grid-template-columns: minmax(0,1fr) 80px 195px 90px 55px 120px 145px 130px; }

/* ── /blocks page table ────────────────────────────────────────────────────── */
/* Columns: Height | Hash | Type | Date | Age | Txs | Size */
.table-header-blocks-grid,
.table-row-blocks-grid { grid-template-columns: 100px minmax(0,1fr) 60px 195px 90px 70px 70px; }

/* ── /transactions page table ──────────────────────────────────────────────── */
/* Columns: TXID | Block | Type | Date | Age | Confirmations | Amount */
.table-header-txs-grid,
.table-row-txs-grid    { grid-template-columns: minmax(0,1fr) 100px 60px 195px 90px 120px 145px; }

/* ── Markets page ───────────────────────────────────────────────────────────── */
.market-columns   { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .market-columns { grid-template-columns: 1fr; } }
.market-col       { background: transparent; }
.market-tabs      { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.market-tab       { padding: 0.4rem 1rem; border-radius: 4px; border: 1px solid var(--border);
                    color: var(--text2); text-decoration: none; font-size: 0.85rem; }
.market-tab:hover { border-color: var(--accent); color: var(--accent); }
.market-tab-active{ background: var(--accent); color: #fff; border-color: var(--accent); }

.market-summary-card { background: var(--bg2); border: 1px solid var(--border);
                       border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
.ms-main         { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.ms-price        { font-size: 2rem; font-weight: 700; font-family: monospace; }
.ms-change       { font-size: 1.1rem; font-weight: 600; }
.ms-stats        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
.ms-stat-label   { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
                   color: var(--text3); display: block; margin-bottom: 0.2rem; }
.ms-stat-val     { font-size: 0.9rem; font-weight: 600; font-family: monospace; }
.ms-link         { margin-top: 0.5rem; }

/* ── Order book ─────────────────────────────────────────────────────────────── */
.ob-table-label  { font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
                   letter-spacing: 0.06em; padding: 0.4rem 0; margin-top: 0.5rem; }
.ob-label-asks   { color: var(--red); }
.ob-label-bids   { color: var(--green); }
.ob-table        { border: 1px solid var(--border); border-radius: 6px;
                   overflow: hidden; margin-bottom: 0.5rem; font-size: 0.82rem;
                   background: var(--bg); }
.ob-head         { display: grid; grid-template-columns: 1fr 1fr 1fr;
                   padding: 0.4rem 0.8rem; background: var(--bg2);
                   font-size: 0.7rem; font-weight: 600; color: var(--text3);
                   text-transform: uppercase; }
.ob-row          { display: grid; grid-template-columns: 1fr 1fr 1fr;
                   padding: 0.3rem 0.8rem; border-top: 1px solid var(--border);
                   background: var(--bg); }
.ob-row:nth-child(odd) { background: var(--bg2); }
.ob-ask-price    { color: var(--red); }
.ob-bid-price    { color: var(--green); }
.ob-mid          { display: flex; justify-content: space-between; align-items: center;
                   padding: 0.5rem 0; border-top: 2px solid var(--border2);
                   border-bottom: 2px solid var(--border2); margin: 0.3rem 0; }
.ob-mid-price    { font-size: 1.1rem; font-weight: 700; font-family: monospace; }
.ob-spread       { font-size: 0.8rem; color: var(--text3); }

/* ── API page extras ────────────────────────────────────────────────────────── */
.api-input-col       { display: flex; flex-direction: column; gap: 0.3rem; }
.api-input-invalid   { border-color: var(--red) !important; }
.api-hint-err        { font-size: 0.72rem; color: var(--red); }
.api-param           { font-style: italic; color: var(--text3); }

/* ── Masternodes table ──────────────────────────────────────────────────────── */
.table-header-mns,
.table-row-mns { grid-template-columns: 45px minmax(200px,340px) 1fr 1fr 1fr 1fr 290px 1fr; }
.table-header-mns > *, .table-row-mns > * { text-align: center; justify-self: center; }
.table-header-mns > :nth-child(1), .table-row-mns > :nth-child(1) { justify-self: start; }
.table-header-mns > :nth-child(2), .table-row-mns > :nth-child(2) { justify-self: start; }
/* Last Paid: left-align so the "Last Paid" header sits over the start of the
   UTC datetime, rather than being centered over the whole "UTC (Xm ago)"
   string which makes the heading look misplaced. */
.table-header-mns > :nth-child(7), .table-row-mns > :nth-child(7) {
    justify-self: start; text-align: left;
}
.badge-inactive { background: rgba(200,0,0,0.1); }

/* ── Peer table ─────────────────────────────────────────────────────────────── */
.table-header-peers,
.table-row-peers { grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr) 90px 90px 60px; }

/* ── Peer flag tooltip ──────────────────────────────────────────────────────── */
.peer-flag { cursor: help; font-size: 1.2rem; }

/* ── Richlist ────────────────────────────────────────────────────────────────── */
.table-header-richlist,
.table-row-richlist { grid-template-columns: 50px minmax(0,1fr) 120px 160px; }
.addr-tag { font-size: 0.72rem; font-weight: 700; padding: 2px 7px;
            border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile (≤620px) — overflow + pinch-zoom strategy.

   The data tables are CSS Grid with mostly-fixed column widths summing
   to ~600-800px (e.g. /blocks: 100+60+195+90+70+70 = 585px + hash 1fr).
   On a 390px phone the grid would normally compress: minmax(0,1fr) goes
   to ~0px (hash invisible), fixed columns crammed in or overflow.

   What we do instead: let the table claim its natural width, even when
   that's wider than the viewport. The page extends past the right edge;
   the browser enables pinch-zoom-out because the page is wider than the
   screen. Users pinch to see full hashes, addresses, dates, etc.

   The mechanism is two rules:
     1. .data-table { overflow: visible } — undo the desktop's
        overflow:hidden which was clipping the inner grid to container.
     2. .data-table { width: max-content; min-width: 100% } — make the
        table claim the width its columns actually need, while still
        filling the page if columns happen to be narrow.

   This is consistent with how the home page already behaves: the stat
   strip overflows naturally, pinch-zoom works there, and we extend the
   same behaviour to every data page.

   What's kept from earlier mobile work:
   - Tighter page padding (reclaim chrome real estate)
   - API tester stacks vertically (interactive, must be operable
     without zoom — input fields shouldn't require pinching)
   - Defensive cell-overflow rules (min-width:0, header/anchor ellipsis)
     — harmless when tables fit naturally; triggers only if a cell's
     content overflows its track, preventing overprint bugs.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* Let the body claim the natural width of its widest content (the
     data tables, which use width:max-content). Without this, body stays
     at viewport width and top-level siblings (nav, stat strip, search
     bar) stay narrow while the data table extends past the right edge.
     With this, body grows to match the widest descendant, so the strip,
     search bar, and stat tiles all share the same width as the table
     and pinch-zoom scales the whole composition together. */
  body {
    min-width: max-content;
  }

  /* Tighten page padding — gives the table edge-to-edge feel. */
  .supply-page, .info-page, .detail-page, .list-page, .not-found {
    padding: 16px 8px;
  }

  /* The core change: tables extend past viewport at their natural width. */
  .data-table {
    overflow: visible;
    width: max-content;
    min-width: 100%;
  }

  /* Defensive cell-overflow rules. With width:max-content the grid
     resolves columns to fit content, so these usually don't fire — but
     left in place to prevent regression if a specific cell ever does
     overflow its track. */
  .table-header > *,
  .table-row > * {
    min-width: 0;
  }
  .table-header > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-row > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }

  /* API tester (/info) — stays stacked vertically.
     The API page is interactive (inputs + Execute buttons); requiring
     pinch-zoom to operate a form would be bad UX, so this page keeps
     the fit-to-viewport behaviour. */
  .api-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.6rem 0.7rem;
  }
  .api-input-group {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .api-input {
    flex: 1 1 100%;
    min-width: 0;
  }
  .api-exec-btn {
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════



/* ── Distribution chart ─────────────────────────────────────────────────────── */
.dist-section  { margin-bottom: 2rem; }
.dist-layout   { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.dist-chart    { width: 200px; height: 200px; flex-shrink: 0; }
.dist-chart svg { width: 100%; height: 100%; }
.dist-table    { flex: 1; min-width: 280px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); }
.dist-row      { display: grid; grid-template-columns: 1fr 120px 90px;
                 padding: 0.5rem 1rem; border-top: 1px solid var(--border);
                 font-size: 0.85rem; background: var(--bg); }
.dist-row:nth-child(odd) { background: var(--bg2); }
.dist-header   { font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
                 color: var(--text3); background: var(--bg2) !important; }
.dist-dot      { display: inline-block; width: 10px; height: 10px;
                 border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ── Transaction I/O layout (Iquidus-style) ─────────────────────────────────── */
.tx-io-grid   { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 0.75rem; margin-top: 1.5rem; align-items: start; }
.tx-io-arrow  { display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
                color: var(--text3); padding-top: 3rem; }
.tx-io-panel  { min-width: 0; }
.tx-io-header,
.tx-io-row    { grid-template-columns: minmax(0,1fr) 130px; align-items: center; }
.tx-io-row-labelled { grid-template-columns: minmax(0,1fr) 130px; align-items: center; }
.tx-io-addr   { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.tx-io-addr .badge { flex-shrink: 0; }
.tx-io-addr a { min-width: 0; }
.tx-io-panel  { min-width: 0; }
@media (max-width: 800px) {
    .tx-io-grid { grid-template-columns: 1fr; }
    .tx-io-arrow { padding-top: 0; transform: rotate(90deg); }
}

/* ── Confirmation badges ───────────────────────────────────────────────────── */
/* Small pill ~half the cell width, centered horizontally and vertically.
   Color encodes the state: red = tentative, orange = partial, green = confirmed.
   Number is centered inside the badge. No suffix, no icon — the color does
   all the work, the column header "Confirmations" provides context. */
.conf-badge {
    display: inline-block;
    min-width: 48px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    justify-self: center;
}
.conf-tentative { background: color-mix(in srgb, var(--red)   25%, transparent); color: var(--red);   }
.conf-partial   { background: color-mix(in srgb, var(--gold)  25%, transparent); color: var(--gold);  }
.conf-confirmed { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }

/* ── Sortable table headers ─────────────────────────────────────────────────── */
.sort-header { color: var(--text2); text-decoration: none; font-weight: 600;
               font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
               cursor: pointer; white-space: nowrap; }
.sort-header:hover { color: var(--accent); }

/* ── Site footer ────────────────────────────────────────────────────────────
   Rendered on every page below <main>. Small, muted, two-line attribution
   + version. The version comes from CARGO_PKG_VERSION baked at compile
   time (see src/ui/components/footer.rs). */
.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    padding: 1.2rem 1rem 1.6rem;
    text-align: center;
    color: var(--text3);
    font-size: 0.78rem;
    line-height: 1.6;
}
.site-footer a {
    color: var(--accent);
    text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.footer-line { margin: 0; }
.footer-meta { font-size: 0.72rem; opacity: 0.85; }