/* ==========================================================================
   Binance World Assets  ·  theme.css
   Design system: tokens, layout, nav, footer, controls, tables, components.
   Dark only. Borders over shadows. Radius 0 to 4px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Locked palette */
  --bg:        #0B0E11;
  --panel:     #161A1E;
  --panel-2:   #1E2329;
  --line:      #2B3139;
  --ink:       #EAECEF;
  --muted:     #848E9C;
  --gold:      #F0B90B;
  --gold-hi:   #FCD535;
  --green:     #0ECB81;
  --red:       #F6465D;

  /* Derived surfaces */
  --line-soft: #232A31;
  --ink-dim:   #B7BDC6;
  --gold-dim:  rgba(240, 185, 11, 0.14);
  --green-dim: rgba(14, 203, 129, 0.14);
  --red-dim:   rgba(246, 70, 93, 0.14);

  /* Type */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lh-mono: 1;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Scale */
  --r:   2px;
  --r-2: 4px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  --container: 1280px;
  --nav-h: 60px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* The one permitted gradient: a very quiet page vignette. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(240, 185, 11, 0.055), transparent 70%);
}

.page { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s-3);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
h4 { font-size: 14px; }

p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); text-decoration: underline; }

ul, ol { margin: 0 0 var(--s-3); padding-left: 20px; }
li { margin-bottom: var(--s-1); }

strong { font-weight: 600; color: var(--ink); }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-6) 0;
  height: 0;
}

::selection { background: var(--gold); color: #0B0E11; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.section { padding: var(--s-8) 0; }
.section-tight { padding: var(--s-6) 0; }

.section-head {
  max-width: 720px;
  margin-bottom: var(--s-5);
}
.section-title { font-size: 24px; margin-bottom: var(--s-2); }
.section-sub { color: var(--muted); margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-2);
}
.eyebrow-muted { color: var(--muted); }

.lead {
  font-size: 17px;
  color: var(--ink-dim);
  line-height: 1.55;
}

.grid { display: grid; gap: var(--s-4); }
/* Grid and flex children default to min-width:auto, which lets a wide table
   push its own container past the viewport. Every layout child opts out. */
.grid > *,
.stack > *,
.card-grid > *,
.roles > *,
.steps > *,
.stats > *,
.hero-grid > *,
.footer-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.grid-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   4. HEADER + NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(11, 14, 17, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-mark {
  width: 22px;
  height: 22px;
  color: var(--gold);
  flex: 0 0 auto;
  display: block;
}
.brand-name {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand-name b { color: var(--gold); font-weight: 500; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links li { margin: 0; }

.nav-link {
  display: block;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--r);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-link.is-active {
  color: var(--gold);
  background: var(--gold-dim);
  border-color: rgba(240, 185, 11, 0.32);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 32px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { border-color: var(--muted); }
.nav-toggle-bars {
  display: block;
  width: 15px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  position: relative;
}
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 100%;
  border-top: 1px solid currentColor;
}

.net-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  white-space: nowrap;
}
.net-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.net-badge.is-live .net-dot { background: var(--green); }
.net-badge.is-wrong { color: var(--red); border-color: rgba(246, 70, 93, 0.4); }
.net-badge.is-wrong .net-dot { background: var(--red); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}
.btn:hover {
  border-color: var(--muted);
  color: var(--ink);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover,
.btn.is-disabled:hover { border-color: var(--line); }

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #0B0E11;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  color: #0B0E11;
}

.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel); }

.btn-gold-outline {
  background: transparent;
  border-color: rgba(240, 185, 11, 0.5);
  color: var(--gold);
}
.btn-gold-outline:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-hi); }

.btn-danger {
  background: transparent;
  border-color: rgba(246, 70, 93, 0.45);
  color: var(--red);
}
.btn-danger:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }

.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn-lg { padding: 13px 22px; font-size: 13.5px; }
.btn-block { display: flex; width: 100%; }

.btn-group { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. PANELS
   -------------------------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  min-width: 0;
}
.panel-flat { background: transparent; }
.panel-raised { background: var(--panel-2); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.panel-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-body { padding: var(--s-4); }
.panel-body-flush { padding: 0; }
.panel-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.panel-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  background: var(--panel-2);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 14px;
  color: var(--ink-dim);
}
.callout-title {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-1);
}

/* --------------------------------------------------------------------------
   7. STAT TILES
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat {
  background: var(--panel);
  padding: var(--s-4);
  min-width: 0;
}
.stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-value {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
  word-break: break-word;
}
.stat-value.is-gold { color: var(--gold); }
.stat-value.is-green { color: var(--green); }
.stat-value.is-red { color: var(--red); }
.stat-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: var(--panel); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.table-auto { min-width: 0; }

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 9px var(--s-3);
  text-align: left;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.table tbody td {
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim);
  white-space: nowrap;
  vertical-align: middle;
}
.table tbody tr:nth-child(even) td { background: rgba(30, 35, 41, 0.42); }
.table tbody tr:hover td { background: var(--panel-2); color: var(--ink); }
.table tbody tr:last-child td { border-bottom: 0; }

.table .num { text-align: right; }
.table .col-strong { color: var(--ink); }

/* Full width cell that carries an empty state inside the table body */
.table tbody td.td-empty,
.table tbody tr:hover td.td-empty,
.table tbody tr:nth-child(even) td.td-empty {
  padding: 0;
  white-space: normal;
  background: transparent;
  border-bottom: 0;
}

.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--ink); }
.th-sort .sort-ind {
  display: inline-block;
  width: 8px;
  margin-left: 5px;
  color: var(--line);
}
.th-sort .sort-ind::after { content: "\2195"; }
.th-sort.is-asc { color: var(--gold); }
.th-sort.is-desc { color: var(--gold); }
.th-sort.is-asc .sort-ind { color: var(--gold); }
.th-sort.is-desc .sort-ind { color: var(--gold); }
.th-sort.is-asc .sort-ind::after { content: "\2191"; }
.th-sort.is-desc .sort-ind::after { content: "\2193"; }

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* Key/value list, the small sibling of the table */
.kv { display: grid; gap: 0; }
.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv-row:last-child { border-bottom: 0; }
.kv-k {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.kv-v {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}
.kv-v.is-gold { color: var(--gold); }
.kv-v.is-green { color: var(--green); }
.kv-v.is-red { color: var(--red); }
.kv-v.is-muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   9. BADGES, PILLS, TAGS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  background: var(--panel-2);
  white-space: nowrap;
}
.badge-gold  { color: var(--gold);  border-color: rgba(240, 185, 11, 0.4); background: var(--gold-dim); }
.badge-green { color: var(--green); border-color: rgba(14, 203, 129, 0.4); background: var(--green-dim); }
.badge-red   { color: var(--red);   border-color: rgba(246, 70, 93, 0.4);  background: var(--red-dim); }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  white-space: nowrap;
}
.pill-k { color: var(--muted); }
.pill-v { font-variant-numeric: tabular-nums; color: var(--ink); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.is-on {
  color: var(--gold);
  border-color: rgba(240, 185, 11, 0.5);
  background: var(--gold-dim);
}

.addr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  word-break: break-all;
}
.addr-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.addr-empty {
  display: inline-block;
  min-width: 220px;
  padding: 4px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   10. FORM CONTROLS
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }
.field-inline {
  margin-bottom: 0;
  flex: 1 1 260px;
  min-width: min(260px, 100%);
  max-width: 380px;
}

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.field-hint {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #5A626C; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold);
  outline: none;
}
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.textarea { min-height: 80px; resize: vertical; line-height: 1.5; }

.select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.select option { background: var(--panel); color: var(--ink); }

.input-group { display: flex; align-items: stretch; }
.input-group .input {
  border-radius: var(--r) 0 0 var(--r);
  border-right: 0;
}
.input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  white-space: nowrap;
}

.range {
  display: block;
  width: 100%;
  height: 22px;
  margin: 4px 0 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  background: var(--gold);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
}
.range::-moz-range-track {
  height: 4px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--gold);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
}
.range:disabled { opacity: 0.5; cursor: not-allowed; }

.range-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink-dim);
  cursor: pointer;
}
.check input {
  margin: 3px 0 0;
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  flex: 0 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

/* Segmented control */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}
.seg-btn {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--ink); background: var(--panel); }
.seg-btn.is-on { color: #0B0E11; background: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-num {
  font-size: 10px;
  color: var(--muted);
  margin-right: 6px;
}
.tab.is-active .tab-num { color: var(--gold); }

.tabpanel { display: none; padding-top: var(--s-5); }
.tabpanel.is-active { display: block; }

/* --------------------------------------------------------------------------
   12. POSITION CARD
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}

.pos-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  text-align: left;
  color: inherit;
}
/* the same card is also used as a picker button */
button.pos-card {
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pos-card:hover { border-color: var(--muted); }
.pos-card.is-selected { border-color: var(--gold); }

.pos-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pos-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pos-media-empty {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #464E58;
}
.pos-media-badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
}

.pos-body { display: block; padding: var(--s-3); flex: 1 1 auto; min-width: 0; }
.pos-title {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.pos-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pos-row:last-child { border-bottom: 0; }
.pos-row-k { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.pos-row-v { color: var(--ink); font-variant-numeric: tabular-nums; }
.pos-foot {
  padding: var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  display: flex;
  gap: var(--s-2);
}

/* --------------------------------------------------------------------------
   13. ODDS / WEIGHT BAR
   -------------------------------------------------------------------------- */
.odds {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.odds-row {
  display: grid;
  grid-template-columns: minmax(88px, 130px) minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: var(--s-3);
}
.odds-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.odds-track {
  position: relative;
  height: 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.odds-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  min-width: 2px;
}
.odds-fill.is-weight { background: var(--green); }
.odds-fill.is-muted { background: var(--line); }
.odds-val {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
.odds-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 6px;
}
.odds-legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.odds-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.odds-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--r);
  background: var(--gold);
  display: inline-block;
}
.odds-swatch.is-weight { background: var(--green); }

/* Inline weight meter used inside table rows */
.meter {
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  height: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   14. SETTLEMENT CHOOSER
   -------------------------------------------------------------------------- */
.choose { display: grid; gap: var(--s-2); }

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  position: relative;
}
.choice:hover { border-color: var(--muted); }
.choice:has(.choice-input:checked) {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.choice.is-disabled { cursor: not-allowed; opacity: 0.72; }
.choice.is-disabled:hover { border-color: var(--line); }

.choice-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.choice-mark {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}
.choice-input:checked ~ .choice-mark { border-color: var(--gold); }
.choice-input:checked ~ .choice-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--gold);
}
.choice-body { min-width: 0; }
.choice-title {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.choice-desc {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}
.choice-amount {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
.choice-amount.is-muted { color: var(--muted); }

/* Countdown */
.countdown {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.cd-seg {
  background: var(--bg);
  padding: 5px 9px;
  text-align: center;
  min-width: 46px;
}
.cd-num {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.15;
}
.cd-unit {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.countdown.is-expired .cd-num { color: var(--red); }

/* Settlement allocation card */
.alloc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.alloc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.alloc-ident { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.alloc-ident-text { display: block; min-width: 0; }
.alloc-thumb {
  width: 44px;
  height: 44px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  flex: 0 0 auto;
  object-fit: cover;
}
.alloc-name {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  display: block;
}
.alloc-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  display: block;
}
.alloc-body { padding: var(--s-4); }

/* --------------------------------------------------------------------------
   15. STEPS, FORMULA, FAQ
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.step {
  background: var(--panel);
  padding: var(--s-4);
  min-width: 0;
}
.step-n {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid rgba(240, 185, 11, 0.4);
  background: var(--gold-dim);
  border-radius: var(--r);
  padding: 2px 7px;
  margin-bottom: var(--s-2);
}
.step-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}
.step-text {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.role {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--r-2) var(--r-2);
  padding: var(--s-4);
}
.role-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-2);
}
.role-text { font-size: 13.5px; color: var(--ink-dim); margin: 0 0 var(--s-3); }
.role-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.role-list li {
  padding: 5px 0;
  border-top: 1px solid var(--line-soft);
}

.formula {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.7;
}
.formula-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: var(--s-2);
}

.code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--gold);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1px 5px;
  white-space: nowrap;
}

.faq { display: grid; gap: var(--s-2); }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0;
}
.faq-item[open] { border-color: var(--muted); }
.faq-q {
  padding: var(--s-3) var(--s-4);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  color: var(--gold);
  font-size: 15px;
  flex: 0 0 auto;
}
.faq-item[open] .faq-q::after { content: "\2212"; }
.faq-q:hover { color: var(--gold); }
.faq-a {
  padding: 0 var(--s-4) var(--s-4);
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.6;
  border-top: 1px solid var(--line-soft);
  margin-top: 0;
  padding-top: var(--s-3);
}

/* Split bar for token / buyback allocation */
.split {
  display: flex;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel-2);
}
.split-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: #0B0E11;
  background: var(--gold);
  border-right: 1px solid var(--bg);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.split-seg:last-child { border-right: 0; }
.split-seg.is-2 { background: var(--gold-hi); }
.split-seg.is-3 { background: var(--green); }
.split-seg.is-zero {
  background: var(--panel-2);
  color: var(--muted);
  border: 0;
}
.split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}
.split-key { display: inline-flex; align-items: center; gap: 6px; }
.split-swatch {
  width: 10px;
  height: 10px;
  border-radius: var(--r);
  background: var(--gold);
  display: inline-block;
}
.split-swatch.is-2 { background: var(--gold-hi); }
.split-swatch.is-3 { background: var(--green); }
.split-swatch.is-zero { background: var(--panel-2); border: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   16. MODAL
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 14, 17, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.modal-backdrop.is-open { display: flex; }

.modal {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.modal-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.modal-close {
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); border-color: var(--muted); }
.modal-body { padding: var(--s-4); }
.modal-foot {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

/* --------------------------------------------------------------------------
   17. TOASTS
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted);
  border-radius: var(--r);
}
.toast.is-success { border-left-color: var(--green); }
.toast.is-error { border-left-color: var(--red); }
.toast.is-pending { border-left-color: var(--gold); }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-title {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.toast-msg {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-word;
}
.toast-close {
  width: 20px;
  height: 20px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.toast-close:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   18. EMPTY STATES + SKELETONS
   -------------------------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-7) var(--s-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-2);
  background: var(--panel);
}
.empty-inline {
  border: 0;
  background: transparent;
  padding: var(--s-6) var(--s-4);
}
.empty-mark {
  width: 34px;
  height: 34px;
  margin-bottom: var(--s-3);
  color: var(--line);
  display: block;
}
.empty-title {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  margin: 0 0 var(--s-2);
}
.empty-text {
  font-size: 13px;
  color: var(--muted);
  max-width: 380px;
  margin: 0 0 var(--s-4);
}
.empty-text:last-child { margin-bottom: 0; }

.skel {
  background: var(--panel-2);
  border-radius: var(--r);
  display: block;
}
.skel-line { height: 11px; margin-bottom: 8px; width: 100%; }
.skel-line:last-child { margin-bottom: 0; width: 62%; }
.skel-block { height: 96px; }
.skel-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}

/* --------------------------------------------------------------------------
   19. HERO
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.hero-title {
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
}
.hero-title em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 56ch;
  margin-bottom: var(--s-5);
}
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  margin-top: var(--s-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  padding: var(--s-6) 0;
}
.footer-blurb {
  font-size: 13px;
  color: var(--muted);
  max-width: 34ch;
  margin: var(--s-3) 0 0;
}
.footer-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 7px; }
.footer-link {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  text-decoration: none;
}
.footer-link:hover { color: var(--gold); text-decoration: none; }
.footer-contract {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.footer-contract b {
  display: block;
  color: var(--ink-dim);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   21. UTILITIES
   -------------------------------------------------------------------------- */
.u-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--muted); }
.u-ink { color: var(--ink); }
.u-gold { color: var(--gold); }
.u-green { color: var(--green); }
.u-red { color: var(--red); }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-sm { font-size: 12.5px; }
.u-xs { font-size: 11.5px; }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Placeholder for any value not yet readable from chain */
.tbd {
  color: var(--muted);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero-title { font-size: 38px; }
}

@media (max-width: 960px) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: 11px 12px; }
  .nav-toggle { display: inline-flex; }
  .site-header { position: relative; }
  .grid-side, .grid-wide { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .container { padding: 0 var(--s-4); }
  .section { padding: var(--s-6) 0; }
  .hero { padding: var(--s-6) 0; }
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 15.5px; }
  h1 { font-size: 27px; }
  h2 { font-size: 21px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .odds-row { grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) minmax(52px, auto); gap: var(--s-2); }
  .choice { grid-template-columns: auto minmax(0, 1fr); }
  .choice-amount { grid-column: 2; text-align: left; }
  .split-seg { font-size: 10px; }
  .toast-stack { right: var(--s-3); bottom: var(--s-3); left: var(--s-3); width: auto; }
}

@media (max-width: 560px) {
  .nav { gap: var(--s-3); }
  .nav-actions { gap: 6px; }
  .net-badge { display: none; }
  .brand-name { font-size: 11.5px; letter-spacing: 0.03em; }
  .brand-mark { width: 19px; height: 19px; }
  .btn-sm { padding: 5px 9px; }
  .tab { padding: 11px 13px; }
  .cd-seg { min-width: 40px; }
}

@media (max-width: 420px) {
  .stats, .stats-3, .stats-2 { grid-template-columns: minmax(0, 1fr); }
  .hero-title { font-size: 26px; }
  .btn { padding: 8px 13px; }
  .btn-lg { padding: 11px 16px; font-size: 12.5px; }
  .seg-btn { padding: 6px 9px; font-size: 11px; }
}

/* ==========================================================================
   APP SHELL  ·  single-page terminal layout
   Sections 23-33. Added for index.html: shell grid, top bar, filter bar,
   card deck, activity rail, feed rows, purchase panel, chat, foot bar.
   Same tokens, same rules: borders over shadows, radius 0-4px, gold only on
   the primary button, the active tab underline and the centre card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   23. APP TOKENS
   -------------------------------------------------------------------------- */
:root {
  --top-h:    56px;
  --filter-h: 40px;
  --foot-h:   34px;
  --rail-w:   clamp(300px, 26%, 392px);

  /* Rarity. Distinguishable at 6px. The --rar-* set in the deck section is
     the source of truth; these aliases carry it into the filter bar and the
     rail, and hold a fallback if that section is ever dropped. */
  --rarity-legendary: var(--rar-legendary, #F0B90B);
  --rarity-epic:      var(--rar-epic,      #8B5CF6);
  --rarity-rare:      var(--rar-rare,      #3E8BFF);
  --rarity-uncommon:  var(--rar-uncommon,  #0ECB81);
  --rarity-common:    var(--rar-common,    #6E7681);
}

/* --------------------------------------------------------------------------
   24. SHELL
   -------------------------------------------------------------------------- */
.app-body {
  height: 100dvh;
  overflow: hidden;
}

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--top-h) var(--filter-h) minmax(0, 1fr) var(--foot-h);
  height: 100dvh;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   25. TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: var(--top-h);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 14, 17, 0.92);
  min-width: 0;
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.topbar-right { flex: 0 0 auto; }

.icon-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--muted); }
.icon-btn.is-on { color: var(--gold); border-color: rgba(240, 185, 11, 0.5); background: var(--gold-dim); }
.icon-btn.is-off { color: var(--muted); }
.icon-btn svg { width: 15px; height: 15px; display: block; }

.connect-pill {
  border-radius: 999px;
  padding: 8px 18px;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.account-chip .net-dot { background: var(--green); }
.account-chip.is-wrong { border-color: rgba(246, 70, 93, 0.45); color: var(--red); }
.account-chip.is-wrong .net-dot { background: var(--red); }

/* --------------------------------------------------------------------------
   26. FILTER BAR
   -------------------------------------------------------------------------- */
.filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: var(--filter-h);
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-width: 0;
}
.filterbar-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.filterbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.filterbar-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}

.filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-pills::-webkit-scrollbar { display: none; }

.filter-pill {
  gap: 6px;
  padding: 4px 9px;
  font-size: 11px;
  flex: 0 0 auto;
}
.filter-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.filter-pill.is-on .filter-val { color: var(--gold); }

.rarity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--muted);
}
.rarity-dot.is-legendary { background: var(--rarity-legendary); }
.rarity-dot.is-epic      { background: var(--rarity-epic); }
.rarity-dot.is-rare      { background: var(--rarity-rare); }
.rarity-dot.is-uncommon  { background: var(--rarity-uncommon); }
.rarity-dot.is-common    { background: var(--rarity-common); }

.rarity-text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rarity-text.is-legendary { color: var(--rarity-legendary); }
.rarity-text.is-epic      { color: var(--rarity-epic); }
.rarity-text.is-rare      { color: var(--rarity-rare); }
.rarity-text.is-uncommon  { color: var(--rarity-uncommon); }
.rarity-text.is-common    { color: var(--rarity-common); }

.rail-chevron svg { transition: transform 160ms linear; }
.rail-chevron.is-collapsed svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   27. BODY + DECK
   -------------------------------------------------------------------------- */
.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.body.is-rail-collapsed { grid-template-columns: minmax(0, 1fr); }
.body.is-rail-collapsed .rail { display: none; }

.deck-col {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.body.is-rail-collapsed .deck-col { border-right: 0; }

.deck-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.deck-meta {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
  overflow: hidden;
}
.deck-meta-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.deck-meta-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.deck-meta-v {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.deck-meta-v.is-gold { color: var(--gold); }
.deck-head-end { display: flex; justify-content: flex-end; min-width: 0; }

/* The deck itself (.deck, .deck-stage, .deck-card and everything inside a
   card) is owned by js/deck.js and defined in its own section below. This
   file only supplies the column the deck sits in. */

/* --------------------------------------------------------------------------
   28. RAIL
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}
.rail-tabs { padding: 0 var(--s-2); }
.rail-tabs .tab { flex: 1 1 0; padding: 11px 6px; font-size: 11px; letter-spacing: 0.1em; }

.rail-sort {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.rail-sort-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 3px;
}
.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
}
.sort-btn:hover { color: var(--ink); }
.sort-btn.is-on {
  color: var(--gold);
  border-color: rgba(240, 185, 11, 0.4);
  background: var(--gold-dim);
}
.sort-arrow { font-size: 9px; line-height: 1; opacity: 0; }
.sort-btn.is-on .sort-arrow { opacity: 1; }
.sort-btn.is-asc  .sort-arrow::after { content: "\2191"; }
.sort-btn.is-desc .sort-arrow::after { content: "\2193"; }

/* --------------------------------------------------------------------------
   29. FEED
   -------------------------------------------------------------------------- */
.feed {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.feed::-webkit-scrollbar { width: 8px; }
.feed::-webkit-scrollbar-track { background: var(--panel); }
.feed::-webkit-scrollbar-thumb { background: var(--line); }
.feed::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.feed-row {
  display: grid;
  grid-template-columns: 38px 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.feed-row:hover { background: var(--panel-2); }
.feed-row.is-selected { background: var(--gold-dim); }
.feed-time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed-thumb {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.feed-ident { min-width: 0; }
.feed-name {
  display: block;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-collection {
  display: block;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
.feed-value {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed-price {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.25;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed-status { padding: 1px 5px; font-size: 9px; letter-spacing: 0.06em; }
.feed-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.feed-empty-mark {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--line);
}

/* --------------------------------------------------------------------------
   30. PURCHASE PANEL
   -------------------------------------------------------------------------- */
.buy {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.buy-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.buy-qty { display: flex; align-items: center; gap: var(--s-2); }
.buy-qty-value {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 16px;
  text-align: right;
}
.buy-dots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.buy-dot {
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.buy-dot:hover { color: var(--ink); border-color: var(--muted); }
.buy-dot.is-on {
  color: #0B0E11;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}
.buy-cta { width: 100%; }
.buy-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   31. FOOT BAR
   -------------------------------------------------------------------------- */
.footbar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--foot-h);
  padding: 0 var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.footbar::-webkit-scrollbar { display: none; }
.footbar-item { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.footbar-k { letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.footbar-v { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.footbar-links { display: inline-flex; align-items: center; gap: var(--s-4); margin-left: auto; flex: 0 0 auto; }
.footbar-link { color: var(--muted); text-decoration: none; }
.footbar-link:hover { color: var(--gold); text-decoration: none; }
/* Contract slots stay blank until the addresses exist. */
.footbar .addr-empty {
  min-width: 172px;
  min-height: 17px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 15px;
}

/* --------------------------------------------------------------------------
   32. CHAT
   -------------------------------------------------------------------------- */
.chat-launcher {
  position: fixed;
  left: var(--s-4);
  bottom: calc(var(--foot-h) + var(--s-3));
  z-index: 80;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  cursor: pointer;
}
.chat-launcher:hover { color: var(--gold); border-color: rgba(240, 185, 11, 0.5); }
.chat-launcher svg { width: 17px; height: 17px; display: block; }
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gold);
  color: #0B0E11;
  font-family: var(--mono);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.chat-badge.is-on { display: inline-flex; }

.chat-panel {
  position: fixed;
  left: var(--s-4);
  bottom: calc(var(--foot-h) + var(--s-3));
  z-index: 90;
  width: min(332px, calc(100vw - 32px));
  height: min(440px, calc(100dvh - 150px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 160ms linear,
    transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 180ms;
}
.chat-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.chat-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-log {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-3);
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-track { background: var(--panel); }
.chat-log::-webkit-scrollbar-thumb { background: var(--line); }
.chat-msg { display: flex; flex-direction: column; gap: 2px; }
.chat-msg-head { display: flex; align-items: baseline; gap: 6px; }
.chat-msg-who {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.chat-msg.is-self .chat-msg-who { color: var(--green); }
.chat-msg-time { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.chat-msg-body {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.chat-empty {
  margin: auto;
  max-width: 26ch;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.chat-form {
  display: flex;
  gap: 6px;
  padding: var(--s-2);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.chat-input { flex: 1 1 auto; min-width: 0; padding: 7px 9px; font-size: 12.5px; }
.chat-send { flex: 0 0 auto; }
.chat-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-3) 7px;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
}
.chat-status .net-dot { background: var(--muted); }
.chat-status.is-live .net-dot { background: var(--green); }

/* --------------------------------------------------------------------------
   33. APP RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .deck-meta { gap: var(--s-4); }
}

@media (max-width: 900px) {
  .app-body { height: auto; overflow: auto; }
  .app { height: auto; grid-template-rows: auto auto auto auto; }
  .body { grid-template-columns: minmax(0, 1fr); }
  .deck-col { border-right: 0; border-bottom: 1px solid var(--line); height: 68vh; }
  .rail { height: 78vh; }
  .footbar { height: auto; padding: var(--s-3) var(--s-4); }
  .chat-launcher, .chat-panel { bottom: var(--s-3); }
}

@media (max-width: 620px) {
  .topbar { padding: 0 var(--s-3); gap: var(--s-2); }
  .filterbar { padding: 0 var(--s-3); }
  .connect-pill { padding: 8px 13px; font-size: 11.5px; }
  .deck-head { grid-template-columns: minmax(0, 1fr) auto; }
  .deck-head-end { display: none; }
  .footbar-links { gap: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel,
  .rail-chevron svg { transition: none !important; }
}

/* --------------------------------------------------------------------------
   34. CARD DECK
   Owned by js/deck.js, which builds every node inside <div class="deck">.
   A fanned 3D arc: the centre card is upright, full scale and lit, and cards
   step down in scale, rotate on the arc, drop, dim and blur as they recede.
   The module writes transform, opacity, filter, z-index and visibility per
   card; everything else lives here.
   -------------------------------------------------------------------------- */
.deck {
  --deck-card-w: clamp(158px, min(19vw, 25vh), 244px);
  --deck-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.deck-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
.deck.is-dragging .deck-stage { cursor: grabbing; }
.deck-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* ---- the card ---- */
.deck-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--deck-card-w);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform 380ms var(--deck-ease),
    opacity 260ms linear,
    filter 260ms linear;
}
.deck.is-dragging .deck-card { transition: none; }
.deck-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.deck-card.is-placeholder { cursor: default; }

.deck-card-inner {
  position: relative;
  display: block;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 460ms var(--deck-ease);
}
.deck-card.is-flipped .deck-card-inner { transform: rotateY(180deg); }

.deck-card-face {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.deck-card.is-center .deck-card-face {
  border-color: rgba(240, 185, 11, 0.55);
  background: var(--panel-2);
}
.deck-card.is-placeholder .deck-card-face {
  border-style: dashed;
  border-color: var(--line);
  background: var(--panel);
}

.deck-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-3);
  transform: rotateY(180deg);
  overflow: hidden;
}

/* The one glow on the page, under the centre card only. */
.deck-glow {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: 78%;
  height: 42px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(240, 185, 11, 0.30), rgba(240, 185, 11, 0) 76%);
  transition: opacity 260ms linear;
}
.deck-card.is-center .deck-glow { opacity: 1; }
.deck.is-empty .deck-glow { opacity: 0.4; }

/* ---- media ---- */
.deck-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.deck-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Image or fallback tile, never both. Real NFT metadata fails to load all the
   time, so .is-noimg is an ordinary state, not an error state. */
.deck-card.is-noimg .deck-card-img { display: none; }
.deck-card:not(.is-noimg) .deck-card-blank { display: none; }

.deck-card-blank {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.12em;
  color: #4A525C;
  background: var(--panel-2);
}
.deck-card.is-placeholder .deck-card-blank { color: var(--line); }

.deck-card-rank,
.deck-card-tag {
  position: absolute;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  background: rgba(11, 14, 17, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--r);
  white-space: nowrap;
}
.deck-card-rank { left: 6px; }
.deck-card-tag { right: 6px; }

/* ---- body ---- */
.deck-card-body { display: block; padding: 9px 10px 10px; }
.deck-card-name {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-card-collection {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-card-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2);
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.deck-stat { min-width: 0; }
.deck-stat + .deck-stat { text-align: right; }
.deck-stat-k {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.deck-stat-v {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-stat-v.is-odds { color: var(--gold); }
.deck-card.is-placeholder .deck-stat-v.is-odds { color: var(--muted); }

/* Unit suffix on a value: BNB, %. Quiet, never competing with the number. */
.deck-unit {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 3px;
}

/* The inverse-odds bar. Log scaled in JS, because real odds run from a few
   percent to a few millionths and a linear bar would show nothing at all. */
.deck-odds-bar {
  display: block;
  height: 3px;
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.deck-odds-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 320ms var(--deck-ease);
}

/* Cards away from the centre carry a compressed version of the same card. */
.deck-card:not(.is-center) .deck-card-collection,
.deck-card:not(.is-center) .deck-stat-k,
.deck-card:not(.is-center) .deck-card-rank,
.deck-card:not(.is-center) .deck-odds-bar { display: none; }
.deck-card:not(.is-center) .deck-card-body { padding: 7px 9px 8px; }
.deck-card:not(.is-center) .deck-card-stats { margin-top: 7px; padding-top: 6px; }
.deck-card:not(.is-center) .deck-card-name { font-size: 12px; font-weight: 400; }

/* ---- back face ---- */
.deck-back-title {
  display: block;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-back-kv { display: block; }
.deck-back-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
}
.deck-back-row:last-child { border-bottom: 0; }
.deck-back-k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.deck-back-v {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-back-note {
  display: block;
  margin-top: auto;
  padding-top: 5px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- stage furniture ---- */
.deck-detail {
  position: absolute;
  top: var(--s-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  padding: 4px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(11, 14, 17, 0.82);
  border: 1px solid rgba(240, 185, 11, 0.45);
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear;
}
.deck-detail:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-hi); }
.deck-detail:disabled { opacity: 0.35; cursor: not-allowed; }
.deck-detail:disabled:hover { background: rgba(11, 14, 17, 0.82); border-color: rgba(240, 185, 11, 0.45); color: var(--gold); }

.deck-foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line);
}
.deck-nav {
  width: 26px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear;
}
.deck-nav:hover { color: var(--ink); border-color: var(--muted); }
.deck-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.deck-nav:disabled:hover { color: var(--muted); border-color: var(--line); }

.deck-counter {
  min-width: 84px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.deck-hint {
  position: absolute;
  right: var(--s-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

/* ---- reduced motion ---- */
.deck.is-reduced .deck-card,
.deck.is-reduced .deck-card-inner,
.deck.is-reduced .deck-glow,
.deck.is-reduced .deck-odds-fill { transition: none; }
.deck.is-reduced .deck-card { filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .deck-card,
  .deck-card-inner,
  .deck-glow,
  .deck-odds-fill { transition: none !important; }
  .deck-card { filter: none !important; }
}

@media (max-width: 1080px) {
  .deck { --deck-card-w: clamp(146px, min(22vw, 24vh), 208px); }
  .deck-hint { display: none; }
}

@media (max-width: 720px) {
  .deck { --deck-card-w: clamp(132px, min(42vw, 26vh), 196px); }
  .deck-detail { font-size: 10px; padding: 3px 9px; }
}

/* The rarity source of truth the shell aliases point at (--rarity-*).
   Five keys, distinguishable at the size of a 6px dot. Gold stays reserved
   for Legendary, so the accent still means the top of the pool. */
:root {
  --rar-legendary: #F0B90B;
  --rar-epic:      #8B5CF6;
  --rar-rare:      #3E8BFF;
  --rar-uncommon:  #0ECB81;
  --rar-common:    #6E7681;
}


/* ---------------------------------------------------------------------------
   TYPE
   Inter carries the interface at 400, with 500 and 600 doing all the emphasis.
   700 is deliberately unused: at these sizes it muddies rather than emphasises.
   Every number sits on the platform monospace, set solid.
   --------------------------------------------------------------------------- */
body { font-weight: 400; letter-spacing: normal; }

.u-mono, .mono, code, kbd, samp, pre,
.stat-value, .kv-v, .feed-value, .feed-price, .deck-stat-v,
.addr, .table td, .table th {
  font-family: var(--mono);
  line-height: var(--lh-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
}

/* emphasis comes from weight and colour, never from a heavier face */
.panel-title, .section-title, .feed-name, .deck-card-name, .btn { font-weight: 600; }
.eyebrow, .field-label, .kv-k, .stat-label, .th-sort { font-weight: 500; }

.nav-docs {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0 var(--s-3);
  white-space: nowrap;
  transition: color .12s ease;
}
.nav-docs:hover { color: var(--ink); }
.nav-docs:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Marks the screen while sample listings stand in for an undeployed pool. */
.preview-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--s-3);
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(240,185,11,.10);
  border: 1px solid rgba(240,185,11,.35);
  border-radius: 2px;
  white-space: nowrap;
}

/* Surplus returned by the vault after a draw settles below the ceiling paid. */
.credit-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  padding: 6px 8px;
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.30);
  border-radius: 2px;
}
.credit-k { font-size: 11px; color: var(--muted); }
.credit-v {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   Standalone pages that reuse the app chrome but scroll normally.
   .body is the app's main-plus-rail grid, so these cannot use it.
   --------------------------------------------------------------------------- */
.doc-page {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
}
.doc-page .topbar { position: sticky; top: 0; z-index: 40; }
.doc-page .page { padding: var(--s-6) 0 var(--s-7); }
.doc-page .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}
.doc-page .step {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.doc-page .step p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.doc-page .footer-blurb { max-width: none; color: var(--muted); font-size: 13px; }
.doc-page .pos-card + .pos-card { border-top: 1px solid var(--line); }
.doc-page .pos-foot { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
@media (max-width: 900px) {
  .doc-page .steps { grid-template-columns: 1fr; }
  .doc-page .grid-2 { grid-template-columns: 1fr; }
}