/* 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);
}
.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;
}

/* ── 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));
                    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));
                    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; }

/* ── 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); }