/* HOOF explorer · v2 · top-nav · light/dark · blockchain-explorer dense */

/* ─── DESIGN TOKENS · LIGHT (default) ─── */
:root[data-theme="light"], :root {
  --bg:#fafafa;
  --bg-2:#f3f3ee;
  --bg-3:#e8e8e0;
  --surface:#ffffff;
  --surface-2:#f7f7f4;
  --surface-3:#efefe9;
  --line:#d4d4cc;
  --line-2:#b8b8b0;
  --line-3:#888888;
  --rule:#1a1a1a;
  --ink:#0a0a0a;
  --ink-2:#3a3a3a;
  --ink-3:#666666;
  --ink-4:#999999;
  --beam:#5b5fef;
  --beam-d:#3a3eb8;
  --beam-l:#7d80f5;
  --beam-soft:rgba(91,95,239,0.08);
  --beam-stroke:rgba(91,95,239,0.25);
  --signal:#16a34a;
  --signal-bg:rgba(22,163,74,0.10);
  --error:#b91c1c;
  --error-bg:rgba(185,28,28,0.10);
  --warn:#d97706;
  --warn-bg:rgba(217,119,6,0.10);
}

/* ─── DESIGN TOKENS · DARK ─── */
:root[data-theme="dark"] {
  --bg:#0a0a0c;
  --bg-2:#101014;
  --bg-3:#16161c;
  --surface:#13131a;
  --surface-2:#1a1a22;
  --surface-3:#22222c;
  --line:#22222c;
  --line-2:#33333d;
  --line-3:#666670;
  --rule:#cccccc;
  --ink:#fafafa;
  --ink-2:#cccccc;
  --ink-3:#9090a0;
  --ink-4:#606070;
  --beam:#7d80f5;
  --beam-d:#5b5fef;
  --beam-l:#a4a6ff;
  --beam-soft:rgba(125,128,245,0.10);
  --beam-stroke:rgba(125,128,245,0.30);
  --signal:#4ade80;
  --signal-bg:rgba(74,222,128,0.12);
  --error:#f87171;
  --error-bg:rgba(248,113,113,0.12);
  --warn:#fbbf24;
  --warn-bg:rgba(251,191,36,0.12);
}

/* ─── FONTS ─── */
:root {
  --serif:'Cormorant Garamond','EB Garamond','Georgia',serif;
  --sans:'Inter',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); }
body {
  color:var(--ink); font-family:var(--sans); font-weight:400; font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input, textarea, select { font-family:inherit; }
::selection { background:var(--beam); color:#fff; }

/* ─── APP SHELL ─── */
.app { display:block; min-height:100vh; }

/* ─── TOP NAV (replaces sidebar) ─── */
.topnav {
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--rule);
}
.topnav-inner {
  max-width:1600px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px; height:56px;
}
@media (max-width:880px) { .topnav-inner { padding:0 16px; gap:14px; height:52px; } }

.brand {
  display:flex; align-items:flex-end; gap:8px; flex-shrink:0;
}
.brand .mk {
  display:inline-flex; align-items:flex-end; gap:1.5px; height:22px;
}
.brand .mk span {
  display:inline-block; width:2.5px; background:var(--ink);
}
.brand .mk span:nth-child(1) { height:100%; }
.brand .mk span:nth-child(2) { height:78%; }
.brand .mk span:nth-child(3) { height:55%; }
.brand .mk span:nth-child(4) { height:34%; }
.brand .mk span:nth-child(5) { height:18%; background:var(--beam); }
.brand .name {
  font-family:var(--serif); font-weight:300; font-size:24px;
  letter-spacing:-1px; line-height:1; color:var(--ink);
}
.brand .name .dot { color:var(--beam); font-style:italic; }

.nav-links { display:flex; align-items:center; gap:0; flex:1; }
@media (max-width:880px) { .nav-links { display:none; } }
.nav-link {
  padding:8px 14px; font-family:var(--mono); font-size:11px;
  letter-spacing:1.5px; color:var(--ink-3); text-transform:uppercase;
  font-weight:500; border-bottom:2px solid transparent;
  transition:all .12s; display:inline-flex; align-items:center; gap:6px;
  height:56px; padding-top:18px;
}
.nav-link:hover { color:var(--ink); }
.nav-link.active { color:var(--beam); border-bottom-color:var(--beam); }
.nav-link .ic { font-size:10px; opacity:.6; }
.nav-link.active .ic { opacity:1; }

.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.theme-toggle {
  width:36px; height:32px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); cursor:pointer;
  color:var(--ink-2); transition:all .12s;
}
.theme-toggle:hover { border-color:var(--ink); color:var(--ink); }
.theme-toggle svg { width:14px; height:14px; }
.theme-toggle .icon-sun { display:none; }
.theme-toggle .icon-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:none; }

.btn {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11px; font-weight:500; letter-spacing:1.5px;
  padding:8px 14px; border:1px solid transparent; cursor:pointer;
  background:transparent; color:var(--ink); line-height:1; text-transform:uppercase;
  border-radius:0; transition:all .12s;
}
.btn-primary { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn-primary:hover { background:var(--beam); border-color:var(--beam); color:#fff; }
.btn-line { border-color:var(--line-2); color:var(--ink-2); }
.btn-line:hover { border-color:var(--ink); color:var(--ink); }
.btn-beam, .btn-seal { background:var(--beam); color:#fff; border-color:var(--beam); }
.btn-beam:hover, .btn-seal:hover { background:var(--beam-d); border-color:var(--beam-d); }
.btn-tiny { padding:6px 10px; font-size:10px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.dot { width:6px; height:6px; border-radius:50%; background:var(--signal); }
.dot.pulse { animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ─── MOBILE HAMBURGER ─── */
.menu-btn { display:none; }
@media (max-width:880px) {
  .menu-btn {
    display:grid; place-items:center; width:36px; height:32px;
    background:transparent; border:1px solid var(--line); cursor:pointer;
    color:var(--ink-2);
  }
  .nav-links.open {
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:52px; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--rule); padding:8px 0; gap:0;
  }
  .nav-links.open .nav-link {
    height:auto; padding:11px 16px; border-bottom:none;
    border-left:2px solid transparent;
  }
  .nav-links.open .nav-link.active { border-left-color:var(--beam); }
}

/* ─── HEARTBEAT BAR (just below top nav) ─── */
.heartbeat {
  background:var(--bg-2); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  color:var(--ink-3); text-transform:uppercase; font-weight:500;
}
.hb-inner {
  max-width:1600px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:18px; height:32px; flex-wrap:nowrap;
  overflow-x:auto;
}
@media (max-width:880px) { .hb-inner { padding:0 16px; gap:12px; font-size:9px; } }
.hb-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; }
.hb-spacer { flex:1; }
.hb-val { color:var(--ink); font-weight:500; }
.hb-val.beam, .hb-val.seal { color:var(--beam); }
.hb-val.up { color:var(--signal); }
.hb-val.down { color:var(--error); }
.hb-dot {
  width:6px; height:6px; border-radius:50%; background:var(--signal);
  animation:pulse 2s ease-in-out infinite;
}

/* ─── CANVAS ─── */
.canvas {
  max-width:1600px; margin:0 auto; padding:18px 24px 60px;
}
@media (max-width:680px) { .canvas { padding:14px 14px 40px; } }

/* ─── PAGE HEAD ─── */
.page-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.page-tag {
  font-family:var(--mono); font-size:10px; letter-spacing:2.5px; color:var(--beam);
  text-transform:uppercase; margin-bottom:6px; font-weight:500;
}
.page-head h1 {
  font-family:var(--serif); font-weight:300; font-size:clamp(28px,4vw,42px);
  letter-spacing:-1.5px; line-height:1; color:var(--ink); margin:0;
}
.page-head h1 .beam, .page-head h1 .seal { color:var(--beam); font-style:italic; }
.page-head .lead {
  font-family:var(--serif); font-style:italic; font-size:15px;
  color:var(--ink-2); margin:6px 0 0; max-width:560px; line-height:1.45;
}

.section-meta {
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; margin-bottom:12px;
  flex-wrap:wrap; font-weight:500;
}
.section-meta .num { color:var(--beam); font-weight:600; }
.section-meta .line { flex:1; height:1px; background:var(--line); }

/* ─── HERO STATS ROW (replaces hero block) ─── */
.hero-stats {
  display:grid; grid-template-columns:repeat(6, 1fr);
  background:var(--surface); border:1px solid var(--line);
  margin-bottom:18px;
}
@media (max-width:1100px) { .hero-stats { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:680px) { .hero-stats { grid-template-columns:repeat(2, 1fr); } }
.hero-stat { padding:14px 18px; border-right:1px solid var(--line); }
.hero-stat:last-child { border-right:none; }
@media (max-width:1100px) { .hero-stat:nth-child(3n) { border-right:none; } }
@media (max-width:680px) { .hero-stat:nth-child(odd) { border-right:1px solid var(--line); } .hero-stat:nth-child(even) { border-right:none; } }
.hero-stat .lbl {
  font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--ink-3);
  text-transform:uppercase; margin-bottom:4px; font-weight:500;
}
.hero-stat .val {
  font-family:var(--serif); font-weight:300; font-size:24px; letter-spacing:-1px;
  color:var(--ink); line-height:1;
}
.hero-stat .val.beam, .hero-stat .val.seal { color:var(--beam); }
.hero-stat .val.up { color:var(--signal); }
.hero-stat .val.down { color:var(--error); }
.hero-stat .delta {
  font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:3px;
  letter-spacing:.5px;
}
.hero-stat .delta.up { color:var(--signal); }
.hero-stat .delta.down { color:var(--error); }

/* ─── LIVE TICKER ─── */
.ticker {
  display:flex; align-items:center; gap:0;
  background:var(--surface); border:1px solid var(--line);
  margin-bottom:14px; height:36px; overflow:hidden;
}
.ticker-herdel {
  display:flex; align-items:center; gap:7px; flex-shrink:0;
  padding:0 14px; height:100%; background:var(--ink); color:var(--bg);
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  font-weight:500; text-transform:uppercase;
}
.ticker-track {
  display:flex; flex:1; overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg,transparent 0,#000 30px,#000 calc(100% - 30px),transparent 100%);
}
.ticker-row {
  display:flex; gap:28px; animation:tk 60s linear infinite;
  padding:0 20px; align-items:center; height:100%; flex-shrink:0; white-space:nowrap;
}
.ticker:hover .ticker-row { animation-play-state:paused; }
@keyframes tk { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.ticker-item {
  font-family:var(--mono); font-size:10px; display:inline-flex;
  align-items:center; gap:6px; color:var(--ink-2); text-decoration:none;
  text-transform:uppercase; letter-spacing:1px;
}
.ticker-item:hover { color:var(--beam); }
.ticker-item .tt { font-weight:600; color:var(--ink); }
.ticker-item .tk-buy { color:var(--signal); font-weight:600; }
.ticker-item .tk-sell { color:var(--error); font-weight:600; }
.ticker-item .ago { color:var(--ink-3); font-size:9px; }
.ticker-empty {
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  color:var(--ink-3); padding:0 20px; display:flex;
  align-items:center; text-transform:uppercase;
}

/* ─── SEARCH BAR ─── */
.search-bar {
  display:flex; align-items:stretch; background:var(--surface);
  border:1px solid var(--line); margin-bottom:14px;
}
.search-bar:focus-within { border-color:var(--beam); }
.search-prefix {
  display:flex; align-items:center; padding:0 14px; background:var(--ink);
  color:var(--bg); font-family:var(--mono); font-size:10px;
  letter-spacing:2px; font-weight:500; text-transform:uppercase;
}
.search-bar input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--ink); font-family:var(--mono); font-size:12px; padding:10px 14px;
  letter-spacing:.5px;
}
.search-bar input::placeholder { color:var(--ink-4); }

/* ─── CARDS ─── */
.card {
  background:var(--surface); border:1px solid var(--line); padding:18px;
}
.card-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.card-head h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; font-weight:500; margin:0;
}

/* ─── SORT TABS ─── */
.sort-tabs {
  display:flex; gap:0; border:1px solid var(--line); width:fit-content;
  margin-bottom:12px; flex-wrap:wrap;
}
.sort-tab {
  padding:8px 14px; font-family:var(--mono); font-size:10px;
  letter-spacing:1.5px; color:var(--ink-3); background:var(--surface);
  border:none; border-right:1px solid var(--line); cursor:pointer;
  text-transform:uppercase; font-weight:500;
}
.sort-tab:last-child { border-right:none; }
.sort-tab:hover { color:var(--ink); }
.sort-tab.active { background:var(--beam); color:#fff; }

/* ─── EXPLORER TABLE (replaces card grid) ─── */
.explorer-table {
  background:var(--surface); border:1px solid var(--line);
  font-family:var(--mono); font-size:11px; overflow-x:auto;
}
.exp-row {
  display:grid; grid-template-columns:60px 80px 1fr 100px 100px 100px 90px 90px 80px;
  gap:10px; padding:9px 14px; border-bottom:1px solid var(--line);
  align-items:center;
}
.exp-row.head {
  background:var(--surface-2); font-size:9px; color:var(--ink-3);
  letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  position:sticky; top:0; z-index:5;
}
.exp-row:hover:not(.head) { background:var(--surface-2); cursor:pointer; }
.exp-row:last-child { border-bottom:none; }
.exp-row .age { color:var(--ink-3); }
.exp-row .symbol-col { display:flex; align-items:center; gap:8px; min-width:0; }
.exp-row .img {
  width:22px; height:22px; flex-shrink:0; background:var(--surface-2);
  border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--serif); font-weight:400; font-size:11px; color:var(--ink-2);
  overflow:hidden;
}
.exp-row .img img { width:100%; height:100%; object-fit:cover; }
.exp-row .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-row .name .sym { color:var(--beam); font-weight:600; }
.exp-row .name .nm { color:var(--ink-2); margin-left:6px; }
.exp-row .num { text-align:right; color:var(--ink); font-weight:500; }
.exp-row .num.muted { color:var(--ink-3); }
.exp-row .ch.up { color:var(--signal); font-weight:600; }
.exp-row .ch.down { color:var(--error); font-weight:600; }
.exp-row .state {
  display:inline-flex; align-items:center; padding:2px 8px;
  font-size:9px; letter-spacing:1.5px; font-weight:600;
  border:1px solid; text-transform:uppercase;
}
.exp-row .state.idle { color:var(--beam); border-color:var(--beam-stroke); background:var(--beam-soft); }
.exp-row .state.active { color:#fff; background:var(--beam); border-color:var(--beam); }
.exp-row .state.settled { color:var(--bg); background:var(--ink); border-color:var(--ink); }
.exp-row .progress {
  height:3px; background:var(--surface-3); width:100%; min-width:50px;
}
.exp-row .progress .fill { height:100%; background:var(--beam); }
.exp-row .progress.settled .fill { background:var(--ink); }
.exp-row .watch-btn {
  background:transparent; border:none; cursor:pointer; color:var(--ink-3);
  font-size:13px; padding:0; line-height:1; transition:color .12s;
}
.exp-row .watch-btn:hover, .exp-row .watch-btn.on { color:var(--beam); }
.exp-row.empty-row {
  grid-template-columns:1fr; padding:24px;
  color:var(--ink-3); text-align:center; letter-spacing:1.5px; text-transform:uppercase;
}
@media (max-width:1100px) {
  .exp-row { grid-template-columns:80px 1fr 90px 80px 70px; }
  .exp-row > :nth-child(1), .exp-row > :nth-child(7), .exp-row > :nth-child(8), .exp-row > :nth-child(9) { display:none; }
}
@media (max-width:680px) {
  .exp-row { grid-template-columns:1fr 80px 70px; gap:8px; padding:9px 12px; }
  .exp-row > :nth-child(2), .exp-row > :nth-child(7), .exp-row > :nth-child(8), .exp-row > :nth-child(9) { display:none; }
}

/* ─── INPUTS ─── */
.field { margin-bottom:14px; }
.field herdel {
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  color:var(--ink-3); text-transform:uppercase; margin-bottom:6px; font-weight:500;
}
.field input, .field textarea, .field select {
  width:100%; background:var(--surface); border:1px solid var(--line);
  padding:9px 12px; font-size:13px; color:var(--ink); outline:none;
  transition:border-color .12s; border-radius:0;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--beam); }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-4); }
.field textarea { min-height:60px; resize:vertical; }
.field .hint {
  font-family:var(--mono); font-size:9px; letter-spacing:1px;
  color:var(--ink-3); margin-top:4px; text-transform:uppercase;
}

/* ─── EMPTY ─── */
.empty {
  padding:30px; text-align:center; color:var(--ink-3);
  font-family:var(--mono); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; background:var(--surface); border:1px solid var(--line);
}
.spinner {
  display:inline-block; width:10px; height:10px; border:1.5px solid var(--line);
  border-top-color:var(--beam); border-radius:50%; animation:sp .8s linear infinite;
  margin-right:8px; vertical-align:-1px;
}
@keyframes sp { to { transform:rotate(360deg); } }

/* ─── STATUS BOX ─── */
.status-box {
  margin-top:10px; padding:10px 12px; font-family:var(--mono); font-size:10px;
  display:none; letter-spacing:.5px; border:1px solid; text-transform:uppercase;
}
.status-box.show { display:block; }
.status-box.info { background:var(--beam-soft); border-color:var(--beam-stroke); color:var(--beam-d); }
.status-box.error { background:var(--error-bg); border-color:var(--error); color:var(--error); }
.status-box.success { background:var(--signal-bg); border-color:var(--signal); color:var(--signal); }
.status-box a { color:inherit; text-decoration:underline; }

/* ─── MODALS ─── */
.modal {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200;
  display:none; align-items:flex-start; justify-content:center;
  padding:32px 18px; backdrop-filter:blur(8px); overflow-y:auto;
}
.modal.show { display:flex; }
.modal-inner {
  background:var(--surface); border:1px solid var(--line); max-width:680px;
  width:100%; padding:32px clamp(20px,4vw,40px); margin:auto; position:relative;
}
.modal-inner.narrow { max-width:420px; }
.modal h3 {
  font-family:var(--serif); font-weight:300; font-size:36px;
  letter-spacing:-1.5px; margin:0 0 6px; color:var(--ink); line-height:1;
}
.modal h3 .beam, .modal h3 .seal { color:var(--beam); font-style:italic; }
.modal .subtitle {
  font-family:var(--mono); font-size:10px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; margin-bottom:12px; font-weight:500;
}
.modal h4 { font-family:var(--serif); font-weight:400; font-size:20px; margin:20px 0 6px; color:var(--ink); letter-spacing:-0.3px; }
.modal p { color:var(--ink-2); font-size:13px; line-height:1.65; margin:0 0 10px; }
.modal ul { padding-left:18px; color:var(--ink-2); font-size:13px; line-height:1.65; margin:0 0 10px; }
.modal ul li { margin-bottom:4px; }
.modal strong { color:var(--ink); font-weight:600; }
.modal code { font-family:var(--mono); background:var(--surface-2); color:var(--beam-d); padding:1px 5px; font-size:11px; border:1px solid var(--line); }
.modal-close { background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:22px; position:absolute; top:12px; right:14px; line-height:1; font-family:var(--mono); }
.modal-close:hover { color:var(--beam); }

.wallet-pick {
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px;
  background:var(--surface); border:1px solid var(--line); cursor:pointer;
  color:var(--ink); font-size:13px; text-align:left; margin-bottom:6px; transition:all .12s;
}
.wallet-pick:hover { border-color:var(--beam); background:var(--beam-soft); }
.wallet-pick .ico {
  width:30px; height:30px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-family:var(--mono);
  font-weight:600; font-size:12px; flex-shrink:0;
}
.wallet-pick .meta { flex:1; }
.wallet-pick .meta .name { font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:-0.3px; }
.wallet-pick .meta .sub { font-family:var(--mono); font-size:9px; color:var(--ink-3); margin-top:1px; letter-spacing:1px; text-transform:uppercase; }
.wallet-badge .addr { font-family:var(--mono); font-size:11px; color:var(--ink); letter-spacing:.5px; }

/* ─── FOOTER (replaces sidebar footer) ─── */
.herd-footer {
  background:var(--bg-2); border-top:1px solid var(--line);
  padding:24px 0 18px; margin-top:40px;
}
.footer-inner {
  max-width:1600px; margin:0 auto; padding:0 24px;
}
.footer-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  margin-bottom:20px;
}
@media (max-width:880px) { .footer-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } }
.footer-col h4 {
  font-family:var(--mono); font-size:9px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; margin:0 0 8px; font-weight:500;
}
.footer-col a {
  display:block; padding:3px 0; font-family:var(--sans); font-size:12px;
  color:var(--ink-2); transition:color .12s;
}
.footer-col a:hover { color:var(--beam); }
.footer-col p { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-2); margin:0 0 8px; line-height:1.5; }
.footer-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9px; letter-spacing:2px;
  color:var(--ink-3); text-transform:uppercase; flex-wrap:wrap; gap:8px;
}
.footer-bar .brand-mini {
  display:inline-flex; align-items:flex-end; gap:1.5px; height:14px;
}
.footer-bar .brand-mini span { display:inline-block; width:2px; background:var(--ink-2); }
.footer-bar .brand-mini span:nth-child(1){ height:100%; }
.footer-bar .brand-mini span:nth-child(2){ height:75%; }
.footer-bar .brand-mini span:nth-child(3){ height:50%; }
.footer-bar .brand-mini span:nth-child(4){ height:25%; background:var(--beam); }

/* ─── HANDBOOK / LOG ─── */
.handbook-grid {
  display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start;
}
@media (max-width:880px) { .handbook-grid { grid-template-columns:1fr; } }
.handbook-toc {
  position:sticky; top:104px; border:1px solid var(--line);
  background:var(--surface); padding:14px;
}
.handbook-toc h4 {
  font-family:var(--mono); font-size:9px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; margin:0 0 10px; font-weight:500;
}
.handbook-toc ul { list-style:none; padding:0; margin:0; font-family:var(--mono); font-size:11px; }
.handbook-toc li { margin-bottom:1px; }
.handbook-toc a {
  display:block; padding:6px 10px; color:var(--ink-2);
  border-left:2px solid transparent; transition:all .12s;
  text-transform:uppercase; letter-spacing:1px; font-weight:500;
}
.handbook-toc a:hover { color:var(--ink); border-left-color:var(--line-2); background:var(--surface-2); }
.handbook-toc a.active { color:var(--beam); border-left-color:var(--beam); background:var(--beam-soft); }
.handbook-toc .toc-section {
  font-family:var(--mono); font-size:8px; letter-spacing:2.5px;
  color:var(--ink-3); text-transform:uppercase; padding:12px 10px 4px;
  font-weight:600;
}
.handbook-toc .toc-section:first-child { padding-top:0; }
.handbook-content { background:var(--surface); border:1px solid var(--line); padding:32px; max-width:780px; }
.handbook-content section { padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:30px; }
.handbook-content section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.handbook-content h2 {
  font-family:var(--serif); font-weight:300; font-size:36px;
  letter-spacing:-1.5px; color:var(--ink); margin:0 0 6px;
}
.handbook-content h2 .beam, .handbook-content h2 .seal { color:var(--beam); font-style:italic; }
.handbook-content .h-tag {
  font-family:var(--mono); font-size:10px; letter-spacing:2.5px;
  color:var(--beam); text-transform:uppercase; margin-bottom:8px; font-weight:500;
}
.handbook-content .h-lead { font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ink-2); margin:0 0 18px; line-height:1.5; }
.handbook-content h3 { font-family:var(--serif); font-weight:400; font-size:21px; margin:20px 0 8px; color:var(--ink); letter-spacing:-0.3px; }
.handbook-content p { font-size:14px; line-height:1.7; color:var(--ink-2); margin:0 0 10px; }
.handbook-content p strong { color:var(--ink); font-weight:600; }
.handbook-content ul, .handbook-content ol { padding-left:20px; font-size:14px; line-height:1.7; color:var(--ink-2); margin:0 0 10px; }
.handbook-content li { margin-bottom:5px; }
.handbook-content li strong { color:var(--ink); font-weight:600; }
.handbook-content code { font-family:var(--mono); background:var(--surface-2); color:var(--beam-d); padding:1px 5px; font-size:12px; border:1px solid var(--line); }
.handbook-content pre { font-family:var(--mono); background:var(--surface-2); padding:12px 14px; border:1px solid var(--line); font-size:11px; line-height:1.5; color:var(--ink-2); overflow-x:auto; margin:12px 0; }
.handbook-content blockquote { font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-2); padding:6px 0 6px 16px; border-left:2px solid var(--beam); margin:14px 0; }
.handbook-content table { width:100%; border-collapse:collapse; margin:12px 0; font-family:var(--mono); font-size:12px; }
.handbook-content table th { text-align:left; padding:9px 12px; background:var(--surface-2); color:var(--beam); letter-spacing:1.5px; text-transform:uppercase; font-size:10px; font-weight:500; border:1px solid var(--line); }
.handbook-content table td { padding:9px 12px; border:1px solid var(--line); color:var(--ink-2); }
.handbook-content table td strong { color:var(--ink); font-weight:600; }
.handbook-content .callout { background:var(--beam-soft); border-left:2px solid var(--beam); padding:12px 16px; margin:14px 0; font-size:13px; line-height:1.6; color:var(--ink-2); }
.handbook-content .callout strong { color:var(--beam); font-weight:600; font-family:var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; display:block; margin-bottom:3px; }
.handbook-content .callout.warn { background:var(--warn-bg); border-left-color:var(--warn); }
.handbook-content .callout.warn strong { color:var(--warn); }

/* ─── VIEW SWITCHER ─── */
.view { display:none; }
.view.active { display:block; }

/* ─── LEADERBOARD/RANKS (re-skinned for explorer feel) ─── */
.lb-cats { display:flex; gap:0; border:1px solid var(--line); width:fit-content; margin-bottom:14px; }
.lb-cat { padding:8px 14px; font-family:var(--mono); font-size:10px; letter-spacing:1.5px; color:var(--ink-3); background:var(--surface); border:none; border-right:1px solid var(--line); cursor:pointer; text-transform:uppercase; font-weight:500; }
.lb-cat:last-child { border-right:none; }
.lb-cat:hover { color:var(--ink); }
.lb-cat.active { background:var(--beam); color:#fff; }
.lb { background:var(--surface); border:1px solid var(--line); }
.lb-row { display:grid; grid-template-columns:60px 1fr 110px 80px 100px; gap:12px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--line); font-size:12px; }
@media (max-width:680px) { .lb-row { grid-template-columns:40px 1fr 80px 70px; gap:8px; padding:10px 12px; } .lb-row > :nth-child(5) { display:none; } }
.lb-row:last-child { border-bottom:none; }
.lb-row.head { font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--ink-3); text-transform:uppercase; background:var(--surface-2); font-weight:600; }
.lb-row .rank { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink-3); }
.lb-row .rank.top { color:var(--beam); }
.lb-row .wallet { font-family:var(--mono); font-size:11px; color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-row .wallet:hover { color:var(--beam); }
.lb-row .pts { font-family:var(--mono); color:var(--beam); font-weight:600; text-align:right; }
.lb-row .deps, .lb-row .vol { font-family:var(--mono); color:var(--ink-2); text-align:right; font-size:11px; }

/* ─── MINT FORM ─── */
.launch-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:start; }
@media (max-width:880px) { .launch-grid { grid-template-columns:1fr; } }
.image-drop { display:block; border:1px dashed var(--line-2); background:var(--surface-2); padding:24px 14px; text-align:center; cursor:pointer; transition:all .12s; }
.image-drop:hover, .image-drop.drag { border-color:var(--beam); background:var(--beam-soft); }
.image-drop input { display:none; }
.image-drop .herdel { font-family:var(--mono); font-size:10px; letter-spacing:1.5px; color:var(--ink-2); text-transform:uppercase; font-weight:500; }
.image-drop .preview { max-width:100px; max-height:100px; margin:8px auto 0; display:block; }
.summary-card { background:var(--surface); border:1px solid var(--line); padding:18px; }
.summary-card .herdel { font-family:var(--mono); font-size:9px; letter-spacing:2.5px; color:var(--beam); text-transform:uppercase; margin-bottom:10px; font-weight:500; }
.summary-row { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-2); font-family:var(--mono); letter-spacing:.5px; }
.summary-row:last-child { border-bottom:none; }
.summary-row b { font-family:var(--mono); font-weight:600; color:var(--ink); }
.summary-row .seal, .summary-row .beam { color:var(--beam); }
.terms-row { display:flex; align-items:flex-start; gap:8px; padding:11px 14px; background:var(--surface-2); border:1px solid var(--line); font-family:var(--mono); font-size:10px; color:var(--ink-2); line-height:1.5; margin-top:12px; letter-spacing:.5px; }
.terms-row input[type=checkbox] { margin-top:2px; accent-color:var(--beam); cursor:pointer; width:13px; height:13px; flex-shrink:0; }
.terms-row a { color:var(--beam); cursor:pointer; text-decoration:underline; font-weight:600; }
.btn-mint { width:100%; padding:14px; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:3px; background:var(--ink); color:var(--bg); border:none; cursor:pointer; line-height:1; transition:all .12s; margin-top:12px; text-transform:uppercase; }
.btn-mint:hover { background:var(--beam); color:#fff; }
.btn-mint[disabled] { opacity:.4; cursor:not-allowed; }

/* ─── FEES TILES ─── */
.fee-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:880px) { .fee-grid { grid-template-columns:1fr; } }
.fee-tile { padding:24px; background:var(--surface); }
.fee-tile.seal, .fee-tile.beam { background:var(--beam); color:#fff; }
.fee-tile.seal .herdel, .fee-tile.beam .herdel { color:#fff; opacity:.85; }
.fee-tile.seal .value, .fee-tile.beam .value { color:#fff; }
.fee-tile.seal p, .fee-tile.beam p { color:#fff; opacity:.92; }
.fee-tile .herdel { font-family:var(--mono); font-size:10px; letter-spacing:2.5px; color:var(--beam); text-transform:uppercase; margin-bottom:12px; font-weight:500; }
.fee-tile .value { font-family:var(--serif); font-weight:300; font-size:64px; letter-spacing:-2px; color:var(--ink); line-height:1; margin-bottom:12px; }
.fee-tile .value .seal, .fee-tile .value .beam { color:var(--beam); }
.fee-tile p { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--ink-2); margin:0; line-height:1.5; }
.fee-tile p strong { color:var(--ink); font-weight:600; font-style:normal; font-family:var(--sans); }

/* ─── HEARTBEAT bridge classes ─── */
.heartbeat .hb-val.seal { color:var(--beam); }

/* ─── STEP guide ─── */
.guide-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; align-items:start; }
@media (max-width:880px) { .guide-grid { grid-template-columns:1fr; } }
.steps { display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.step { display:grid; grid-template-columns:50px 1fr; gap:12px; padding:16px 18px; background:var(--surface); }
.step:hover { background:var(--surface-2); }
.step .num { font-family:var(--mono); font-weight:500; font-size:13px; color:#fff; background:var(--beam); width:30px; height:30px; display:grid; place-items:center; line-height:1; }
.step h5 { font-family:var(--serif); font-weight:400; font-size:18px; margin:0 0 4px; color:var(--ink); letter-spacing:-0.3px; }
.step p { font-family:var(--serif); font-style:italic; font-size:13px; color:var(--ink-2); margin:0; line-height:1.5; }
.step p code { font-family:var(--mono); background:var(--surface-2); color:var(--beam-d); padding:1px 5px; font-size:11px; border:1px solid var(--line); font-style:normal; }
.curve-card { background:var(--surface); border:1px solid var(--line); padding:18px; }
.curve-card .curve-meta { display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--beam); margin-bottom:12px; text-transform:uppercase; font-weight:500; }
.curve-card svg { width:100%; height:auto; display:block; }

/* ─── LEGACY VAR SHIM ─── */
/* Some inline styles reference older token names. Map them. */
:root {
  --void:var(--bg);
  --void-2:var(--surface);
  --void-3:var(--surface-2);
  --ash:var(--line);
  --ash-2:var(--line-2);
  --stone:var(--ink-3);
  --chalk:var(--ink);
  --chalk-2:var(--ink-2);
  --chalk-3:var(--ink-3);
  --seal:var(--beam);
  --seal-d:var(--beam-d);
  --seal-2:var(--beam-l);
  --oxblood:var(--ink);
  --oxblood-2:var(--ink-2);
  --green:var(--signal);
  --red:var(--error);
  --amber:var(--warn);
  --sherd:var(--serif);
  --beam-soft:var(--beam-soft);
}

/* Patch up token detail / sub pages that have inline styles using old tokens */
.tk-head{background:var(--surface)!important;border:1px solid var(--line)!important}
.tk-logo{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
.tk-name{font-family:var(--serif)!important;font-weight:300!important;letter-spacing:-1.5px!important;text-transform:none!important;color:var(--ink)!important}
.tk-symbol{color:var(--beam)!important}
.tk-status{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important}
.tk-status.live{background:var(--beam-soft)!important;color:var(--beam)!important;border-color:var(--beam)!important}
.tk-status.settled,.tk-status.graduated{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
.tk-desc{font-family:var(--serif)!important;font-style:italic!important;color:var(--ink-2)!important}
.tk-mint{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important}
.tk-link{background:var(--surface)!important;border:1px solid var(--line-2)!important;color:var(--ink-2)!important}
.tk-link:hover{border-color:var(--beam)!important;color:var(--beam)!important}
.phase-banner{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink-2)!important}
.bar{background:var(--surface-3)!important}
.bar .fill{background:var(--beam)!important}

/* stats / chart */
.stats-grid{background:var(--line)!important;border:1px solid var(--line)!important}
.stat{background:var(--surface)!important}
.stat .value{font-family:var(--serif)!important;font-weight:300!important;letter-spacing:-1px!important}
.stat .value.seal,.stat .value.beam{color:var(--beam)!important}
.stat .value.up{color:var(--signal)!important}
.stat .value.down{color:var(--error)!important}
.chart-card{background:var(--surface)!important;border:1px solid var(--line)!important}
.chart-tabs{border:1px solid var(--line)!important}
.chart-tab{border-right:1px solid var(--line)!important;background:var(--surface)}
.chart-tab.active{background:var(--beam)!important;color:#fff!important}

/* trade panel */
.tt-card{background:var(--surface)!important;border:1px solid var(--line)!important}
.tt-tabs{border:1px solid var(--line)!important}
.tt-tab{border-right:1px solid var(--line)!important;background:var(--surface)}
.tt-tab.active{background:var(--beam)!important;color:#fff!important}
.tt-tab.active.sell{background:var(--ink)!important;color:var(--bg)!important}
.tt-input-row{background:var(--surface-2)!important;border:1px solid var(--line)!important}
.tt-presets{background:var(--line)!important;border:1px solid var(--line)!important}
.tt-preset{background:var(--surface)!important;color:var(--ink-2)!important;border:none}
.tt-preset:hover{background:var(--beam)!important;color:#fff!important}
.tt-info{background:var(--surface-2)!important;border:1px solid var(--line)!important}
.tt-button{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:3px!important;font-size:12px!important;text-transform:uppercase!important;border:none}
.tt-button.buy{background:var(--beam)!important;color:#fff!important}
.tt-button.buy:hover{background:var(--beam-d)!important}
.tt-button.sell{background:var(--ink)!important;color:var(--bg)!important}
.tt-button.sell:hover{background:var(--ink-2)!important}
.panel{background:var(--surface)!important;border:1px solid var(--line)!important}
.panel-tab.active{color:var(--beam)!important;background:var(--surface-2)!important;border-bottom-color:var(--beam)!important}
.trades-table th{background:var(--surface-2)!important;color:var(--beam)!important;border-bottom:1px solid var(--line)!important}
.trades-table td{border-bottom:1px solid var(--line)!important;color:var(--ink-2)!important}
.trades-table tr:hover td{background:var(--surface-2)!important}
.trades-table .type-buy{color:var(--signal)!important}
.trades-table .type-sell{color:var(--error)!important}
.holder-row{border-bottom:1px solid var(--line)!important}
.holder-row .pct{color:var(--ink)!important}

/* depth + audit panels keep their styles via existing classes */
.depth-card,.audit-card{background:var(--surface)!important;border:1px solid var(--line)!important}
.audit-grid{background:var(--line)!important;border:1px solid var(--line)!important}
.audit-cell{background:var(--surface)!important}

/* legacy mobile brand block (sidebar fallback) */
.topbar-mobile-brand{display:none!important}
.topbar{display:none!important}
.sidebar{display:none!important}

/* legacy hero-block / metric (replaced by hero-stats) — hide if leftover */
.hero-block{display:none!important}
.metrics{display:none!important}

/* legacy card-grid feed — explorer-table replaces it */
.feed-grid{display:none!important}
.token-card-wrap{display:none!important}

/* ─── HOOF-SPECIFIC ADDITIONS ─── */
:root[data-theme="light"], :root {
  --chestnut:#8b4513;
  --chestnut-d:#5a3010;
  --chestnut-l:#aa5d2a;
}
:root[data-theme="dark"] {
  --chestnut:#c89870;
  --chestnut-d:#a87850;
  --chestnut-l:#e8b890;
}

/* HOOFPRINT MARK — replaces the 5-bar light mark */
.brand .mk.hoofprint {
  display:inline-block; width:22px; height:22px; position:relative;
  background:transparent;
}
.brand .mk.hoofprint::before {
  content:""; position:absolute; left:5px; top:7px; width:6px; height:9px;
  background:var(--ink); border-radius:50% 50% 30% 30% / 50% 50% 40% 40%;
}
.brand .mk.hoofprint::after {
  content:""; position:absolute; right:5px; top:7px; width:6px; height:9px;
  background:var(--beam); border-radius:50% 50% 30% 30% / 50% 50% 40% 40%;
}
/* mini brand mark in footer */
.brand-mini.hoofprint {
  display:inline-block; width:14px; height:14px; position:relative;
}
.brand-mini.hoofprint::before {
  content:""; position:absolute; left:3px; top:4px; width:4px; height:6px;
  background:var(--ink-2); border-radius:50% 50% 30% 30% / 50% 50% 40% 40%;
}
.brand-mini.hoofprint::after {
  content:""; position:absolute; right:3px; top:4px; width:4px; height:6px;
  background:var(--beam); border-radius:50% 50% 30% 30% / 50% 50% 40% 40%;
}

/* Pixel-art rendering should always be crisp */
svg { image-rendering:pixelated; image-rendering:crisp-edges; }
.preview .art svg, .horse-card .art svg, .showcase svg { image-rendering:pixelated !important; }