/* =============================================================
   HC.exchange — Health Commodity Exchange™ (UI Kit)
   Inherits tokens from /colors_and_type.css
   ============================================================= */

/* ---------- Exchange-specific tokens ---------- */
:root {
  --hcx-bid:   #3DDC97;       /* longs / buys / up */
  --hcx-ask:   #E5484D;       /* shorts / sells / down */
  --hcx-neutral: #B8BFCC;
  --hcx-row:   var(--bg-parchment);
  --hcx-row-alt: var(--bg-bone);
  --hcx-line:  rgba(26,31,44,0.10);
  --hcx-line-2:rgba(26,31,44,0.18);
  --hcx-tick:  rgba(123,224,198,0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-obsidian);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================
   APP SHELL
   ========================= */
.hcx-app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

/* ---------- Status strip ---------- */
.hcx-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 20px;
  background: var(--bg-bone);
  border-bottom: 1px solid var(--hcx-line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
}
.hcx-status .left {
  display: flex; gap: 12px; align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.hcx-status .right {
  display: flex; gap: 12px; align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.hcx-status .integrity {
  color: var(--accent-halo);
  font-style: italic;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.hcx-status .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-guardian);
  box-shadow: 0 0 8px rgba(61,220,151,0.7);
  animation: hcx-pulse 1.6s ease-in-out infinite;
}
@keyframes hcx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Top nav ---------- */
.hcx-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  background: var(--bg-midnight);
  border-bottom: 1px solid var(--hcx-line);
}
.hcx-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
}
.hcx-brand .mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, var(--accent-guardian), #0E5C3F 70%);
  border-radius: 8px;
  color: #03130C;
  font-weight: 700;
  font-size: 18px;
}
.hcx-brand .wm { display: flex; flex-direction: column; line-height: 1; }
.hcx-brand .wm-1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.hcx-brand .wm-2 {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 3px;
}

.hcx-navlinks {
  display: flex; gap: 4px; align-items: center;
  font-size: 13px;
}
.hcx-navlinks a {
  padding: 8px 12px;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.hcx-navlinks a:hover { background: var(--bg-graphite); color: var(--fg-1); }
.hcx-navlinks a.active {
  background: rgba(61,220,151,0.10);
  color: var(--accent-guardian);
}

.hcx-nav-actions { display: flex; gap: 10px; align-items: center; }
.hcx-iconbtn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  color: var(--fg-2);
  cursor: pointer;
}
.hcx-iconbtn:hover { background: var(--bg-graphite); color: var(--fg-1); }

.hcx-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.hcx-btn-primary {
  background: var(--accent-guardian);
  color: #03130C;
}
.hcx-btn-primary:hover { background: var(--accent-aurora); }
.hcx-btn-ghost {
  background: transparent;
  border-color: var(--hcx-line-2);
  color: var(--fg-1);
}
.hcx-btn-ghost:hover { background: var(--bg-steel); }
.hcx-btn-buy {
  background: var(--hcx-bid);
  color: #03130C;
  width: 100%;
  padding: 12px;
  font-size: 14px;
}
.hcx-btn-sell {
  background: var(--hcx-ask);
  color: #fff;
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

/* ---------- Ticker tape ---------- */
.hcx-tape {
  display: flex;
  gap: 32px;
  padding: 8px 20px;
  background: var(--bg-bone);
  border-bottom: 1px solid var(--hcx-line);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.hcx-tape-item { display: inline-flex; gap: 6px; align-items: baseline; }
.hcx-tape-item .sym { color: var(--fg-2); letter-spacing: 0.04em; }
.hcx-tape-item .px { color: var(--fg-1); }
.hcx-tape-item .ch.up { color: var(--hcx-bid); }
.hcx-tape-item .ch.down { color: var(--hcx-ask); }

/* ---------- Page layouts ---------- */
.hcx-main { padding: 20px; max-width: 1480px; margin: 0 auto; width: 100%; }

/* ===== Hero ===== */
.hcx-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--hcx-line);
  margin-bottom: 32px;
}
.hcx-hero h1 {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 14px 0 16px;
}
.hcx-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-halo);
}
.hcx-hero p {
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 24px;
}
.hcx-hero-actions { display: flex; gap: 12px; }

.hcx-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hcx-line);
  border: 1px solid var(--hcx-line);
  border-radius: 12px;
  overflow: hidden;
  align-self: end;
}
.hcx-stat {
  background: var(--bg-midnight);
  padding: 20px 22px;
}
.hcx-stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 6px;
}
.hcx-stat .val {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 8px;
}
.hcx-stat .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}
.hcx-stat .sub.up { color: var(--hcx-bid); }
.hcx-stat .sub.down { color: var(--hcx-ask); }

/* ===== Section header ===== */
.hcx-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 40px 0 16px;
}
.hcx-section-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.hcx-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-guardian);
  display: inline-flex; align-items: center; gap: 8px;
}

/* ===== Tabs ===== */
.hcx-tabs {
  display: flex; gap: 2px;
  background: var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 8px;
  padding: 3px;
  font-size: 12px;
}
.hcx-tabs button {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
}
.hcx-tabs button.active {
  background: var(--bg-graphite);
  color: var(--fg-1);
}

/* ===== Markets table ===== */
.hcx-markets {
  background: var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 12px;
  overflow: hidden;
}
.hcx-markets-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hcx-line);
}
.hcx-markets-head .left {
  display: flex; gap: 12px; align-items: center;
}
.hcx-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  width: 220px;
}
.hcx-search input {
  background: transparent; border: 0; outline: 0;
  color: var(--fg-1);
  font-family: inherit;
  font-size: inherit;
  width: 100%;
}
.hcx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.hcx-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  padding: 10px 16px;
  border-bottom: 1px solid var(--hcx-line);
  background: var(--bg-mist);
}
.hcx-table thead th.num { text-align: right; }
.hcx-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--hcx-line);
  vertical-align: middle;
}
.hcx-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.hcx-table tbody tr:last-child td { border-bottom: 0; }
.hcx-table .num { text-align: right; }
.hcx-table .star { color: var(--fg-3); cursor: pointer; }
.hcx-table .star.on { color: var(--accent-halo); }
.hcx-table .rank { color: var(--fg-3); width: 28px; }

.hcx-token {
  display: flex; align-items: center; gap: 12px;
}
.hcx-token .glyph {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #03130C;
  flex-shrink: 0;
}
.hcx-token .meta { display: flex; flex-direction: column; line-height: 1.25; }
.hcx-token .sym { font-family: var(--font-mono); font-weight: 500; color: var(--fg-1); font-size: 13px; }
.hcx-token .name { font-family: var(--font-sans); color: var(--fg-3); font-size: 11px; }

.hcx-axis-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hcx-change.up { color: var(--hcx-bid); }
.hcx-change.down { color: var(--hcx-ask); }
.hcx-change::before { content: "▲ "; font-size: 9px; }
.hcx-change.down::before { content: "▼ "; }

.hcx-spark { display: inline-block; vertical-align: middle; }

/* ===== TRADE VIEW ===== */
.hcx-trade {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  height: calc(100vh - 140px);
  min-height: 700px;
}
.hcx-panel {
  background: var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hcx-panel-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hcx-line);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  flex-shrink: 0;
}
.hcx-panel-body { padding: 14px; flex: 1; overflow: auto; }

/* Pair header */
.hcx-pair-head {
  grid-column: 1 / -1;
  background: var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 28px;
}
.hcx-pair-head .pair {
  display: flex; align-items: center; gap: 12px;
}
.hcx-pair-head .pair .glyph { width: 36px; height: 36px; font-size: 13px; }
.hcx-pair-head .pair-name { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
.hcx-pair-head .pair-name .quote { color: var(--fg-3); }
.hcx-pair-head .price-now {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hcx-pair-head .stats { display: flex; gap: 28px; margin-left: auto; }
.hcx-pair-head .stat-i { display: flex; flex-direction: column; gap: 2px; }
.hcx-pair-head .stat-i .l {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hcx-pair-head .stat-i .v {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
}

/* Chart */
.hcx-chart-panel {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.hcx-chart {
  width: 100%; height: 100%;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 8.33% 100%;
}

/* Order book */
.hcx-book-panel { grid-column: 3 / 4; grid-row: 2 / 3; }
.hcx-book {
  font-family: var(--font-mono);
  font-size: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto 1fr;
}
.hcx-book-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 6px 14px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--hcx-line);
}
.hcx-book-head .num { text-align: right; }
.hcx-book-rows { display: flex; flex-direction: column-reverse; }
.hcx-book-rows.bids { flex-direction: column; }
.hcx-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 3px 14px;
  position: relative;
  font-size: 12px;
}
.hcx-book-row .price { font-weight: 500; }
.hcx-book-row .price.ask { color: var(--hcx-ask); }
.hcx-book-row .price.bid { color: var(--hcx-bid); }
.hcx-book-row .num { text-align: right; color: var(--fg-2); position: relative; z-index: 1; }
.hcx-book-row .price, .hcx-book-row .num { z-index: 1; }
.hcx-book-row .bg {
  position: absolute; right: 0; top: 0; bottom: 0;
  z-index: 0;
}
.hcx-book-row .bg.ask { background: rgba(229,72,77,0.10); }
.hcx-book-row .bg.bid { background: rgba(61,220,151,0.10); }
.hcx-book-mid {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border-top: 1px solid var(--hcx-line);
  border-bottom: 1px solid var(--hcx-line);
  background: var(--bg-mist);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
  gap: 8px;
}
.hcx-book-mid .spread {
  color: var(--fg-3); font-size: 11px;
}

/* Side panel: pairs list */
.hcx-pairs-panel { grid-column: 1 / 2; grid-row: 2 / 3; }
.hcx-pair-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hcx-line);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  align-items: center;
}
.hcx-pair-row:hover { background: rgba(255,255,255,0.02); }
.hcx-pair-row.active { background: rgba(61,220,151,0.06); }
.hcx-pair-row .l { display: flex; flex-direction: column; gap: 2px; }
.hcx-pair-row .l .s { color: var(--fg-1); font-weight: 500; }
.hcx-pair-row .l .v { color: var(--fg-3); font-size: 10px; }
.hcx-pair-row .r { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.hcx-pair-row .r .p { color: var(--fg-1); }
.hcx-pair-row .r .c { font-size: 10px; }

/* Order form */
.hcx-order-panel {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.hcx-order { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.hcx-bs-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg-steel);
  border-radius: 8px;
}
.hcx-bs-toggle button {
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}
.hcx-bs-toggle button.buy.active { background: var(--hcx-bid); color: #03130C; }
.hcx-bs-toggle button.sell.active { background: var(--hcx-ask); color: #fff; }

.hcx-input-row {
  display: flex; align-items: center;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 8px;
}
.hcx-input-row label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  flex-shrink: 0;
  width: 56px;
}
.hcx-input-row input {
  background: transparent; border: 0; outline: 0;
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
  width: 100%;
}
.hcx-input-row .sfx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}

.hcx-percent-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.hcx-percent-row button {
  padding: 6px;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  border-radius: 6px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.hcx-percent-row button:hover { background: var(--bg-graphite); color: var(--fg-1); }

.hcx-order-summary {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
.hcx-order-summary .row {
  display: flex; justify-content: space-between;
}
.hcx-order-summary .row .v { color: var(--fg-1); }

/* Trades feed */
.hcx-trades-panel {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}
.hcx-trades {
  font-family: var(--font-mono);
  font-size: 12px;
}
.hcx-trades-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 6px 14px;
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--hcx-line);
}
.hcx-trades-head .num { text-align: right; }
.hcx-trade-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 3px 14px;
}
.hcx-trade-row .num { text-align: right; color: var(--fg-2); }
.hcx-trade-row .p.up { color: var(--hcx-bid); }
.hcx-trade-row .p.down { color: var(--hcx-ask); }

/* ===== Earnings calculator card ===== */
.hcx-earn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 12px;
  overflow: hidden;
}
.hcx-earn-l {
  padding: 28px;
  border-right: 1px solid var(--hcx-line);
}
.hcx-earn-l h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  margin: 8px 0 6px;
  letter-spacing: -0.015em;
}
.hcx-earn-l p {
  color: var(--fg-3);
  font-size: 13px;
  margin: 0 0 20px;
}
.hcx-activity-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.hcx-activity {
  padding: 10px 12px;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
}
.hcx-activity .ic { font-size: 16px; }
.hcx-activity.active {
  background: rgba(61,220,151,0.08);
  border-color: var(--accent-guardian);
  color: var(--fg-1);
}
.hcx-duration { display: flex; gap: 4px; margin-top: 16px; }
.hcx-duration button {
  flex: 1;
  padding: 8px;
  background: var(--bg-steel);
  border: 1px solid var(--hcx-line);
  border-radius: 6px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
}
.hcx-duration button.active {
  background: rgba(61,220,151,0.10);
  border-color: var(--accent-guardian);
  color: var(--accent-guardian);
}

.hcx-earn-r {
  padding: 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background:
    radial-gradient(400px 200px at 70% 30%, rgba(61,220,151,0.08), transparent 70%),
    var(--bg-midnight);
}
.hcx-earn-r .big {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--accent-guardian);
  line-height: 1;
}
.hcx-earn-r .big .unit { font-size: 22px; color: var(--fg-2); margin-left: 8px; }
.hcx-earn-r .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hcx-earn-r .conv {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-2);
}
.hcx-earn-r .conv .v { color: var(--accent-halo); font-weight: 500; }

/* ===== 8 axes grid ===== */
.hcx-axes {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hcx-line);
  border: 1px solid var(--hcx-line);
  border-radius: 12px;
  overflow: hidden;
}
.hcx-axis {
  background: var(--bg-midnight);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.hcx-axis .code {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hcx-axis .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-1);
}
.hcx-axis .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 6px;
}

/* ===== List-your-chain CTA ===== */
.hcx-list-cta {
  background:
    radial-gradient(800px 300px at 30% 50%, rgba(61,220,151,0.08), transparent 70%),
    radial-gradient(600px 300px at 80% 50%, rgba(232,201,122,0.06), transparent 70%),
    var(--bg-midnight);
  border: 1px solid var(--hcx-line);
  border-radius: 12px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.hcx-list-cta h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.hcx-list-cta p {
  color: var(--fg-2);
  font-size: 14px;
  max-width: 620px;
  margin: 0 0 14px;
  line-height: 1.6;
}
.hcx-list-cta .meta {
  display: flex; gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-guardian);
}

/* ===== Footer ===== */
.hcx-foot {
  margin-top: 64px;
  padding: 40px 20px 24px;
  background: var(--bg-bone);
  border-top: 1px solid var(--hcx-line);
  font-size: 12px;
  color: var(--fg-3);
}
.hcx-foot-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.hcx-foot h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-2);
  margin: 0 0 12px;
}
.hcx-foot a { display: block; color: var(--fg-3); text-decoration: none; padding: 4px 0; }
.hcx-foot a:hover { color: var(--accent-guardian); }
.hcx-foot .legal {
  max-width: 1480px;
  margin: 32px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--hcx-line);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}