/* ==========================================================================
   $DEBIT — layout & components
   ========================================================================== */

/* ==========================================================================
   App shell — sidebar + content
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 14px;
  background: var(--panel);
  border-right: var(--border) solid var(--line);

  /*
   * The sidebar holds more than fits on a short window. Two things keep it
   * usable rather than clipped:
   *
   * 1. It scrolls. `overflow-y: auto` on a flex column lets the content be
   *    reached at any height. `overscroll-behavior: contain` stops the scroll
   *    from chaining out to the page behind it.
   *
   * 2. The flexible spacers shrink first. `min-height: 0` on the blocks below
   *    is what allows that — without it a flex item refuses to go under its
   *    content size, and the overflow happens anyway.
   */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar > * { min-height: 0; flex-shrink: 0; }

.side-top { padding: 2px 6px 14px; }

.side-head { display: flex; align-items: center; gap: 8px; }

.logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.logo-text { display: block; min-width: 0; }
/* The mark's own setting: a white glyph on a black tile, in both themes. The
   tile is the one surface on the site that does NOT follow the theme — it is
   the logo, and the logo is black. */
.logo-mark {
  width: 38px; height: 38px;
  flex: none;
  display: grid; place-items: center;
  background: #000000;
  border: var(--border) solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 12px;
  box-shadow: none;
  color: #ffffff;
}
[data-theme="dark"] .logo-mark { box-shadow: none; }
/* Proportional, not a fixed width: the tile is 38px in the full sidebar, 34px
   at the 1300 breakpoint and 30px on mobile, and a fixed 21px glyph would leave
   the mark touching the tile edge at the smallest of those. */
.logo-mark svg { width: 55%; height: auto; }
.logo-word {
  font-family: var(--font-px);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.logo-tag {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
}

.side-nav { display: flex; flex-direction: column; gap: 4px; }

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: var(--border) solid transparent;
  border-radius: 13px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 650;
  transition: background .15s, color .15s, box-shadow .15s;
}
.side-link:hover { background: var(--panel-2); color: var(--ink); }
.side-link.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
.side-link .ic { flex: none; }
.side-link .side-ext { margin-left: auto; opacity: .6; }
.side-link.small { padding: 8px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.side-link.small:hover { color: var(--ink); }
.side-link .side-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--local-ink);
  background: var(--local-soft);
  border: var(--border) solid color-mix(in srgb, var(--local) 35%, transparent);
  border-radius: 6px;
  padding: 1px 6px;
}

.side-cta { margin: 10px 0 4px; }

.side-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: auto 6px 8px;
  flex: 0 1 auto;
  padding: 10px;
  background: var(--panel-2);
  border: var(--border) dashed var(--line-2);
  border-radius: 14px;
}
.side-note p { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }

.side-ca { margin: auto 6px 8px; flex: 0 1 auto; }
.side-ca-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
}
.side-ca-label { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.side-ca-addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

.side-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: var(--border) solid var(--line);
}
.side-theme {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.side-theme > .row { margin-left: auto; }

/* Toggle switch. */
.toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--panel-2);
  border: var(--border) solid var(--line-2);
  border-radius: 10px;
}
.toggle button {
  width: 30px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--faint);
  transition: background .15s, color .15s;
}
.toggle button.on { background: var(--panel); color: var(--accent-text); box-shadow: none; }

/* ==========================================================================
   Content area + topbar
   ========================================================================== */

.content {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 40px;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border) solid var(--line);
}
.topbar-logo { display: none; }
.topbar .wallet-btn { margin-left: auto; }

/* The $DEBIT contract address, beside the search. Sits with the search rather
   than with the wallet button because it is a thing you COPY, and the copy
   button is the point — a CA you can read but not copy is a CA you retype. */
.top-ca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 5px 0 10px;
  background: var(--panel-2);
  border: var(--border) solid var(--line-2);
  border-radius: 10px;
  flex: none;
  min-width: 0;
}
.top-ca-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}
.top-ca-addr {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.top-ca-pending {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  white-space: nowrap;
}
.top-ca-copy {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  color: var(--muted);
  transition: background .15s, color .15s;
  flex: none;
}
.top-ca-copy:hover { background: var(--panel-3); color: var(--ink); }

/* Below the width where the search still has room, the CA moves out of the top
   bar rather than squeezing the search. It is still in the sidebar. */
@media (max-width: 900px) {
  .top-ca { display: none; }
}

.wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 12px;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: none;
  transition: transform 80ms, background .15s;
  white-space: nowrap;
}
.wallet-btn:hover { background: var(--accent-hover); }
/* While the wallet prompt is open. A control that does nothing for two seconds
   reads as broken, so it says what it is doing. */
.wallet-btn.busy { cursor: progress; }
.wallet-btn.busy svg { animation: spin 1.1s linear infinite; }
.wallet-btn:active { transform: none; box-shadow: none; }
.wallet-btn.on { background: var(--panel); color: var(--ink); border: var(--border) solid var(--line-2); box-shadow: none; }

/* ==========================================================================
   Stats strip
   ========================================================================== */

.statgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.stat {
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-family: var(--font-px);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}
.stat-sub { font-size: 11px; color: var(--faint); }

/* ==========================================================================
   Hero banner — the "crypto in, local out" strip
   ========================================================================== */

.banner {
  position: relative;
  overflow: hidden;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  margin-bottom: 16px;
  /* Monochrome sheen: two off-centre pools of the ink, so the strip has light
     falling across it without a second hue. `--ink` flips with the theme, so
     this reads as a bloom on black and as a soft wash on paper. */
  background:
    radial-gradient(120% 170% at 6% 0%, color-mix(in srgb, var(--ink) 10%, transparent) 0%, transparent 58%),
    radial-gradient(130% 190% at 96% 108%, color-mix(in srgb, var(--ink) 6%, transparent) 0%, transparent 62%),
    linear-gradient(100deg, var(--panel-2) 0%, var(--panel) 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}
/* A hairline dot field over the strip. It is the one texture on the site, and
   it is here because a monochrome palette with no hue has nothing else to
   suggest depth in a large empty area — the dots give the eye a scale. It is
   absolutely positioned, so it is not a grid item and the two columns are
   unaffected. */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: .55;
  pointer-events: none;
  mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
}
.banner-main { min-width: 0; position: relative; }
.banner-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: .85;
}
.banner-headline {
  font-family: var(--font-px);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
  letter-spacing: .005em;
}
.banner-sub { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; max-width: 46ch; }
.banner-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  /* Both columns are positioned so they paint above the dot field: a positioned
     ::before would otherwise cover non-positioned grid children. */
  position: relative;
}
.banner-badges { display: flex; flex-wrap: wrap; gap: 7px; }

/* The flow strip: SOL in → $DEBIT → local currencies out. */
.flowstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 13px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: var(--border) solid var(--line-2);
  border-radius: 13px;
  box-shadow: none;
  flex-wrap: wrap;
}
.flow-node {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--panel);
  border: var(--border) solid var(--line-2);
  border-radius: 10px;
  min-width: 0;
}
.flow-node .fn-k { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.flow-node .fn-v { font-family: var(--font-px); font-size: 15px; font-weight: 700; line-height: 1; }
.flow-arrow { color: var(--faint); flex: none; }

/* ==========================================================================
   Home three-column grid
   ========================================================================== */

.home-cols {
  display: grid;
  /* The first column has to hold a rank badge, an avatar, a truncated name, a
     ticker and a right-aligned figure. Below ~340px the name has nothing left
     and every row reads "Man…" — see .lrow-name. */
  grid-template-columns: minmax(260px, 350px) minmax(400px, 1fr) minmax(270px, 340px);
  gap: 16px;
  align-items: start;
  min-height: 0;
}
.home-cols > .col { min-width: 0; }
.col-scroll { overflow-y: auto; max-height: 720px; }

/* ==========================================================================
   Coin avatar (image, or a generated monogram)
   ========================================================================== */

.av {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  overflow: hidden;
  font-family: var(--font-px);
  font-weight: 700;
  color: var(--ink-2);
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-xs { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
.av-sm { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.av-md { width: 44px; height: 44px; border-radius: 11px; font-size: 18px; }
.av-lg { width: 60px; height: 60px; border-radius: 13px; font-size: 24px; }
.av-xl { width: 92px; height: 92px; border-radius: 17px; font-size: 38px; }

/* Rank badge used in leaderboards. */
.rank {
  width: 24px; height: 24px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  font-family: var(--font-px);
  font-size: 13px;
  font-weight: 700;
  background: var(--panel-2);
  border: var(--border) solid var(--line-2);
  color: var(--muted);
}
.rank-1 { background: var(--tone-amber); border-color: color-mix(in srgb, var(--sun) 60%, transparent); color: var(--sun-ink); }
.rank-2 { background: var(--silver); border-color: var(--line-2); color: var(--silver-ink); }
.rank-3 { background: var(--bronze); border-color: color-mix(in srgb, var(--bronze-ink) 45%, transparent); color: var(--bronze-ink); }

/* ==========================================================================
   Leaderboard rows
   ========================================================================== */

.lrow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: var(--border) dashed var(--line-2);
  transition: background .15s;
}
.lrow:last-child { border-bottom: none; }
.lrow:hover { background: var(--panel-2); }
.lrow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* The name truncates and the ticker keeps its width. Without this a long name
   wraps to three lines, the row grows, and the board looks ragged next to its
   neighbours — which is exactly what "Manila Coffee Guild" did. */
.lrow-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.lrow-name > .faint { flex: none; }
.lrow-sub { font-size: 11px; color: var(--muted); }
.lrow-val { text-align: right; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lrow-val small { display: block; font-size: 10.5px; font-weight: 600; color: var(--faint); }

/* ==========================================================================
   Feed
   ========================================================================== */

.feed-list { display: grid; gap: 14px; padding: 16px; }

.feed-card {
  border: var(--border) solid var(--line);
  border-radius: 15px;
  background: var(--panel-2);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s, transform .12s;
}
.feed-card:hover { border-color: var(--line-2); transform: translateY(-1px); }

.feed-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.feed-who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feed-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.feed-handle { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.feed-meta { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }

.feed-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }

/* A payout / launch receipt attached to a post. */
.trade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.trade-tok { min-width: 0; }
.trade-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.trade-line { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trade-right { text-align: right; flex: none; }
.trade-usd { font-family: var(--font-px); font-size: 16px; font-weight: 700; line-height: 1.1; }
.trade-kind {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 6px;
  border: var(--border) solid transparent;
}
.kind-launch { background: var(--tone-violet); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.kind-payout { background: var(--tone-teal); color: var(--local-ink); border-color: color-mix(in srgb, var(--local) 35%, transparent); }
.kind-fee { background: var(--tone-mint); color: var(--up); border-color: color-mix(in srgb, var(--up) 30%, transparent); }
.kind-recipient { background: var(--tone-amber); color: var(--sun-ink); border-color: color-mix(in srgb, var(--sun) 50%, transparent); }
.kind-note { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.kind-pending { background: var(--panel-3); color: var(--muted); border-color: var(--line-2); }
.kind-paid { background: var(--up-soft); color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }

.feed-more { padding: 0 16px 16px; }

/* ==========================================================================
   Coin / token rows
   ========================================================================== */

.trow {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: var(--border) dashed var(--line-2);
  transition: background .15s;
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--panel-2); }
.trow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trow-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.trow-name > .faint { flex: none; }
.trow-sub { font-size: 11px; color: var(--muted); }
.trow-right { text-align: right; flex: none; }
.trow-mcap { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trow-chg { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 760px; }
.table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: var(--border) solid var(--line);
  white-space: nowrap;
  background: var(--panel-2);
}
.table tbody td {
  padding: 11px 14px;
  border-bottom: var(--border) dashed var(--line-2);
  font-size: 13px;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--panel-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .cell-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.table .cell-who .cw-main { min-width: 0; display: flex; flex-direction: column; }
.table .cell-who .cw-name { font-weight: 700; font-size: 13.5px; }
.table .cell-who .cw-sub { font-size: 11px; color: var(--muted); }

/* ==========================================================================
   Filter bar
   ========================================================================== */

.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filter-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.filter-row .spacer { flex: 1; }

/* ==========================================================================
   Detail page furniture
   ========================================================================== */

.back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 12px;
}
.back:hover { color: var(--ink); }

.scene {
  position: relative;
  overflow: hidden;
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  background:
    radial-gradient(90% 120% at 50% 118%, color-mix(in srgb, var(--ink) 9%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  display: grid;
  place-items: center;
  padding: 30px 20px;
  min-height: 190px;
}
.scene-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.scene-right { position: absolute; top: 12px; right: 12px; display: flex; gap: 7px; }

.idcard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: -46px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.idcard-avatar {
  flex: none;
  padding: 6px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 20px;
  box-shadow: none;
}
.idcard-main { min-width: 0; flex: 1; padding-top: 46px; }
.idcard-name {
  font-family: var(--font-px);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.idcard-handle { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-top: 2px; }
.idcard-actions { display: flex; gap: 8px; padding-top: 46px; flex-wrap: wrap; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}

/* Chart. */
.chart { position: relative; width: 100%; height: 200px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-empty { height: 200px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

/* Fee-split bar. */
.split-bar {
  display: flex;
  height: 14px;
  border-radius: 99px;
  overflow: hidden;
  border: var(--border) solid var(--line);
  background: var(--panel-2);
}
.split-bar span { display: block; height: 100%; }
.split-legend { display: grid; gap: 0; margin-top: 12px; }
.split-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: var(--border) dashed var(--line-2);
}
.split-row:last-child { border-bottom: none; }
.split-role { font-weight: 650; font-size: 13px; }
.split-addr { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.split-pct { font-family: var(--font-px); font-size: 17px; font-weight: 700; }

/* ==========================================================================
   Recipients ($DEBIT)
   ========================================================================== */

.rcpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rcpt {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 14px;
  transition: border-color .15s, transform .12s;
}
.rcpt:hover { border-color: var(--line-2); transform: translateY(-1px); }
.rcpt-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rcpt-name { font-weight: 700; font-size: 13.5px; min-width: 0; }
.rcpt-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.rcpt-share { font-family: var(--font-px); font-size: 19px; font-weight: 700; }
.rcpt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.rcpt-row .rk { color: var(--muted); }
.rcpt-row .rv { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The recipient builder in the launch wizard. */
.rb-list { display: grid; gap: 9px; }
.rb-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 108px auto;
  gap: 8px;
  align-items: end;
  padding: 11px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
}
.rb-share { font-family: var(--mono); text-align: right; }
.rb-del { align-self: center; }
.rb-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: var(--border) dashed var(--line-2);
  margin-top: 10px;
}
.rb-total { margin-left: auto; font-family: var(--font-px); font-size: 17px; font-weight: 700; }
.rb-total.bad { color: var(--down); }
.rb-total.good { color: var(--local-ink); }

/* ==========================================================================
   Payout ledger ($DEBIT)
   ========================================================================== */

.payrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: var(--border) dashed var(--line-2);
  transition: background .15s;
}
.payrow:last-child { border-bottom: none; }
.payrow:hover { background: var(--panel-2); }
.payrow-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.payrow-who { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.payrow-sub { font-size: 11px; color: var(--muted); }
.payrow-conv { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.payrow-amt { text-align: right; font-variant-numeric: tabular-nums; }
.payrow-local { font-family: var(--font-px); font-size: 17px; font-weight: 700; line-height: 1.1; }
.payrow-sol { font-size: 11px; color: var(--faint); }

/* Currency catalogue grid. */
/* Five per row — twenty currencies make four even rows. Steps down on narrower
   screens so a card never gets too tight for "Rp2,155,412". */
.ccy-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px) { .ccy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ccy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ccy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ccy-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
  transition: border-color .15s, transform .12s;
}
.ccy-card:hover { border-color: color-mix(in srgb, var(--local) 45%, transparent); transform: translateY(-2px); }
.ccy-code { font-family: var(--font-px); font-size: 21px; font-weight: 700; line-height: 1; }
.ccy-name { font-size: 11.5px; color: var(--muted); }
.ccy-rate { font-size: 11px; font-family: var(--mono); color: var(--faint); }

/* The price of one SOL (or one $DEBIT) in this currency. The headline number on
   the card, so it sits above the USD rate rather than replacing it — the rate
   is the conversion the ledger uses, and it is worth keeping visible. */
.ccy-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  margin-top: 2px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 9px;
  min-width: 0;
}
.ccy-price-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
}
.ccy-price-v {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The line above the grid saying which asset it is priced against. Rendered
   once per asset and toggled, so the sentence and the numbers cannot disagree. */
.asset-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  margin-bottom: 12px;
  background: var(--panel-2);
  border: var(--border) dashed var(--line-2);
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.asset-note svg { flex: none; margin-top: 2px; color: var(--faint); }
.asset-note b { color: var(--ink); }
.asset-note .asset-sym { text-transform: uppercase; }

/* ==========================================================================
   Launch wizard
   ========================================================================== */

.launch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.steps { display: grid; gap: 14px; }
.step {
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.step__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: var(--border) solid var(--line);
}
.step__num {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  background: var(--panel-3);
  border: var(--border) solid var(--line-2);
  border-radius: 11px;
  font-family: var(--font-px);
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
}
.step.is-active .step__num {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
.step.is-done .step__num {
  background: var(--local-soft);
  border-color: var(--local);
  color: var(--local-ink);
  box-shadow: none;
}
.step__title { font-family: var(--font-px); font-size: 17px; font-weight: 700; }
.step__sub { font-size: 11.5px; color: var(--muted); }
.step__head > div { min-width: 0; }
.step__body { padding: 16px; }

.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field--full { grid-column: 1 / -1; }

/* Upload dropzone. */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 16px;
  text-align: center;
  background: var(--panel-2);
  border: var(--border) dashed var(--line-2);
  border-radius: 15px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload:hover { background: var(--panel-3); border-color: var(--accent); }
.upload.has-img { border-style: solid; border-color: var(--local); background: var(--local-soft); }
.upload__ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--panel);
  border: var(--border) solid var(--line-2);
  border-radius: 12px;
  color: var(--muted);
  box-shadow: none;
}
.upload__t { font-weight: 700; font-size: 13.5px; }
.upload__d { font-size: 11.5px; color: var(--muted); }

/* Preview card. */
.preview { display: grid; gap: 14px; position: sticky; top: calc(var(--top-h) + 14px); }
.pcard {
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}
.pcard__h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: var(--border) solid var(--line);
  font-family: var(--font-px);
  font-size: 16px;
  font-weight: 700;
}
.pcard__b { padding: 14px; display: grid; gap: 4px; }
.pcoin { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pcoin__n { font-family: var(--font-px); font-size: 20px; font-weight: 700; line-height: 1.1; }
.pcoin__t { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: var(--border) dashed var(--line-2);
  font-size: 12.5px;
}
.prow:last-child { border-bottom: none; }
.prow__k { color: var(--muted); min-width: 0; }
.prow__v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.prow__v.mono { font-family: var(--mono); font-size: 11.5px; }
.prow__v.primary { color: var(--accent-text); }
.prow__v.local { color: var(--local-ink); }

.psplit { display: flex; height: 10px; border-radius: 99px; overflow: hidden; border: var(--border) solid var(--line); margin: 8px 0; }
.psplit i { display: block; height: 100%; }

.launchbar { display: grid; gap: 11px; }

/* Launch progress / result panel. */
.launchstep {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--accent-soft);
  border: var(--border) solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}
.launchstep--ok {
  display: block;
  background: var(--local-soft);
  border-color: color-mix(in srgb, var(--local) 40%, transparent);
  color: var(--ink);
}
.launchstep--err {
  display: block;
  background: var(--down-soft);
  border-color: color-mix(in srgb, var(--down) 45%, transparent);
  color: var(--down);
}
.launchstep__t { font-family: var(--font-px); font-size: 17px; font-weight: 700; }
.launchstep__d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.launchstep__rows { display: grid; gap: 6px; margin-top: 10px; }
.launchstep__r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 7px 9px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 9px;
}
.launchstep__r span { color: var(--muted); flex: none; }
.launchstep__r code, .launchstep__r a { font-family: var(--mono); font-size: 11.5px; color: var(--accent-text); overflow: hidden; text-overflow: ellipsis; }
.launchstep__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.launchstep__warn { font-size: 11.5px; color: var(--sun-ink); margin-top: 9px; }

/* Fee note box. */
.feenote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 13px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
  margin-top: 16px;
}
.feenote__ic {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--local-soft);
  border: var(--border) solid color-mix(in srgb, var(--local) 40%, transparent);
  border-radius: 9px;
  color: var(--local-ink);
}
.feenote__k { font-weight: 700; font-size: 12.5px; }
.feenote__a { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin: 2px 0 4px; overflow-wrap: anywhere; }
.feenote__d { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   How it works — numbered steps
   ========================================================================== */

.rules { display: grid; gap: 10px; }
.rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
}
.rule-title { font-weight: 700; font-size: 13px; }
.rule-body { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.howcard {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 14px;
}
.howcard__n {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: var(--border) solid var(--accent);
  border-radius: 11px;
  box-shadow: none;
  font-family: var(--font-px);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-text);
}
.howcard__t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.howcard__d { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   404
   ========================================================================== */

.center-page {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 20px;
}
.center-page .cp-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 480px; }

/* ==========================================================================
   Timeline (activity)
   ========================================================================== */

.tl { position: relative; padding-left: 26px; }
.tl::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--line-2);
  border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 14px; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -22px; top: 8px;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--panel);
  border: var(--border) solid var(--line-2);
}
.tl-item.k-launch::before { background: var(--accent); border-color: var(--accent); }
.tl-item.k-payout::before { background: var(--local); border-color: var(--local); }
.tl-item.k-fee::before { background: var(--up); border-color: var(--up); }
.tl-item.k-recipient::before { background: var(--sun); border-color: var(--sun); }
.tl-n {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.tl-card {
  padding: 11px 13px;
  background: var(--panel);
  border: var(--border) solid var(--line);
  border-radius: 13px;
  box-shadow: none;
}

/* ==========================================================================
   Misc helpers
   ========================================================================== */

.statgrid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.statgrid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.statgrid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.statgrid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.mini-stat {
  padding: 12px 13px;
  background: var(--panel-2);
  border: var(--border) solid var(--line);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mini-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mini-value { font-family: var(--font-px); font-size: 21px; font-weight: 700; line-height: 1.1; }
.mini-sub { font-size: 11px; color: var(--faint); }

.spacer { flex: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1500px) {
  .home-cols { grid-template-columns: minmax(240px, 340px) minmax(340px, 1fr) minmax(250px, 300px); }
}

@media (max-width: 1300px) {
  .statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .launch-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1150px) {
  .home-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-cols .col-feed { grid-column: 1 / -1; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .col-scroll { max-height: 520px; }
}

/*
 * Icon rail.
 *
 * The sidebar collapses to a 78px rail of icons in two situations:
 *   1. Automatically, below 980px.
 *   2. On request, at any width — `data-side="rail"` on <html>.
 *
 * The rules are written once against the attribute and shared; the media query
 * only contributes the `--side-w` override the attribute selector cannot express.
 */
html[data-side="rail"] { --side-w: 78px; }
html[data-side="rail"] .sidebar {
  align-items: center;
  padding: 14px 10px;
  overflow-x: hidden;
}
html[data-side="rail"] .side-top { padding: 2px 0 12px; }

html[data-side="rail"] .side-link span,
html[data-side="rail"] .logo-text,
html[data-side="rail"] .logo-word,
html[data-side="rail"] .logo-tag,
html[data-side="rail"] .side-cta span,
html[data-side="rail"] .side-note,
html[data-side="rail"] .side-ca,
html[data-side="rail"] .side-theme > .th-label,
html[data-side="rail"] .side-theme .th-label,
html[data-side="rail"] .side-badge { display: none !important; }

html[data-side="rail"] .side-link { justify-content: center; padding: 11px; }
html[data-side="rail"] .side-cta .btn { padding: 0 11px; }
html[data-side="rail"] .side-bottom { align-items: center; width: 100%; margin-top: auto; }

.side-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: var(--border) solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.side-collapse:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.side-collapse .ic { transform: rotate(180deg); transition: transform .18s ease; }
html[data-side="rail"] .side-collapse .ic { transform: none; }

html[data-side="rail"] .side-head {
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  width: 100%;
}
html[data-side="rail"] .logo { flex: none; justify-content: center; }

html[data-side="rail"] .side-theme {
  padding: 6px 0;
  justify-content: center;
  width: 100%;
}
html[data-side="rail"] .side-theme .row { margin: 0; justify-content: center; }
html[data-side="rail"] .side-theme .toggle { margin: 0; padding: 2px; }
html[data-side="rail"] .side-theme .toggle button { width: 24px; height: 22px; }

@media (max-width: 980px) {
  :root { --side-w: 78px; }
  .sidebar {
    align-items: center;
    padding: 14px 10px;
    overflow-x: hidden;
  }
  .side-top { padding: 2px 0 12px; }
  .side-head { flex-direction: column-reverse; align-items: center; gap: 6px; width: 100%; }
  .logo { flex: none; justify-content: center; }

  .side-link span,
  .logo-text,
  .logo-word,
  .logo-tag,
  .side-cta span,
  .side-note,
  .side-ca,
  .side-theme > .th-label,
  .side-theme .th-label,
  .side-badge { display: none !important; }

  .side-link { justify-content: center; padding: 11px; }
  .side-cta .btn { padding: 0 11px; }
  .side-bottom { align-items: center; width: 100%; margin-top: auto; }

  .side-theme { padding: 6px 0; justify-content: center; width: 100%; }
  .side-theme .row { margin: 0; justify-content: center; }
  .side-theme .toggle { margin: 0; padding: 2px; }
  .side-theme .toggle button { width: 24px; height: 22px; }

  .side-collapse { display: none; }

  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .launch-grid { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; }
  .home-cols { grid-template-columns: minmax(0, 1fr); }
  .idcard-actions, .idcard-main { padding-top: 0; }
}

@media (max-width: 720px) {
  .content { padding: 14px 14px 32px; }
  .topbar { padding: 0 14px; }
  .topbar-logo { display: block; }
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statgrid-3, .statgrid-4, .statgrid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .rb-item { grid-template-columns: minmax(0, 1fr); }
  .banner-headline { font-size: 24px; }
  .idcard-name { font-size: 28px; }
  .search kbd { display: none; }
  .hide-sm { display: none !important; }
  .payrow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .payrow-conv { display: none; }
}

/* ==========================================================================
   Search results dropdown
   ========================================================================== */

.search-results {
  position: absolute;
  top: calc(var(--top-h) - 6px);
  left: 22px;
  width: min(460px, calc(100vw - 44px));
  max-height: 62vh;
  overflow-y: auto;
  z-index: 60;
  background: var(--panel);
  border: var(--border) solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: none;
}
.search-results .trow:last-child { border-bottom: none; }

@media (max-width: 720px) {
  .search-results { left: 14px; width: calc(100vw - 28px); }
}

/* ==========================================================================
   Short windows — keep the whole sidebar reachable
   ========================================================================== */

@media (max-height: 860px) {
  .sidebar { gap: 4px; padding: 12px 12px 12px; }
  .side-top { padding: 2px 6px 10px; }
  .side-link { padding: 9px 12px; font-size: 14.5px; }
  .side-link.small { padding: 7px 12px; font-size: 13px; }
  .side-cta { margin: 8px 0 3px; }
  .side-note { padding: 8px; margin-bottom: 6px; }
  .side-ca { margin-bottom: 6px; }
  .side-bottom { padding-top: 8px; }
  .side-theme { padding: 5px 6px 5px 12px; }
}

@media (max-height: 760px) {
  .side-note { display: none; }
  .side-top { padding-bottom: 8px; }
  .logo-mark { width: 50px; height: 32px; }
  .logo-word { font-size: 22px; }
  .side-collapse { width: 26px; height: 26px; }
}

@media (max-height: 680px) {
  .sidebar { gap: 3px; padding: 10px 10px; }
  .side-link { padding: 7px 10px; font-size: 14px; border-radius: 11px; }
  .side-link.small { padding: 6px 10px; font-size: 12.5px; }
  .side-cta { margin: 6px 0 2px; }
  .side-ca-row { padding: 7px 9px; }
  .side-theme { padding: 4px 6px 4px 10px; font-size: 12.5px; }
  .toggle button { width: 27px; height: 21px; }
}

@media (max-height: 620px) {
  .side-nav { gap: 1px; }
  .side-link { padding: 6px 10px; font-size: 13.5px; }
  .side-link.small { padding: 5px 10px; font-size: 12px; }
  .side-link .ic { width: 16px; height: 16px; }
  .side-bottom { padding-top: 6px; }
  .side-theme { padding: 3px 6px 3px 10px; font-size: 12px; }
  .toggle { padding: 2px; }
  .toggle button { width: 25px; height: 20px; }
  .side-ca-row { padding: 6px 9px; }
}

@media (max-height: 580px) {
  .logo-tag { display: none; }
  .side-ca-label { display: none; }
  .side-top { padding: 0 4px 6px; }
  .logo-mark { width: 44px; height: 28px; }
  .logo-word { font-size: 20px; }
  .side-nav { gap: 2px; }
  .side-link { padding: 6px 9px; font-size: 13.5px; }
  .side-link .ic { width: 16px; height: 16px; }
}

@media (max-height: 480px) {
  .sidebar { padding: 8px 8px; gap: 2px; }
  .side-cta { margin: 4px 0 2px; }
  .side-theme { padding: 3px 4px 3px 8px; }
  .side-bottom { padding-top: 6px; gap: 0; }
}


/* ==========================================================================
   $DEBIT — flat Material 3 Expressive, in black and white
   --------------------------------------------------------------------------
   $DEBIT shares its machinery with FIAT and LOCAL but not its face. The rules:

     · FLAT. No drop shadows anywhere. Depth is TONAL: the page is the surface,
       panels are surface-container, controls on them are container-high.
     · SHAPE CARRIES EXPRESSION. Extra-large corners on containers, full pills
       on every control, and one oversized shape per screen (the card, the FAB).
     · ONE FAMILY. Be Vietnam Pro across weights; hierarchy from size + weight.
     · A NAVIGATION RAIL on desktop, a bottom navigation bar on mobile, the
       active destination carried by a pill indicator.
   ========================================================================== */

html, body { overflow-x: clip; }
body { background: var(--surface); }

/* Flat: nothing on the page casts a shadow. */
.panel, .stat, .ccy-card, .step, .pcard, .howcard, .btn, .chip, .wallet-btn,
.banner, .search, .top-ca, .rb-item, .preview .pcard, .toast { box-shadow: none; }

/* ---- shell: rail + main column ---- */
.shell.shell-rail {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}
.shell-main { min-width: 0; display: flex; flex-direction: column; }
.shell-rail .content { max-width: 1280px; width: 100%; margin: 0 auto; padding: 8px 28px 64px; }

.rail {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 18px 0 16px;
  background: var(--surface);
  z-index: 30;
}
.rail-logo { display: grid; place-items: center; margin-bottom: 4px; }
.rail-fab {
  width: 56px; height: 56px;
  display: grid; place-items: center; align-content: center; gap: 2px;
  border-radius: var(--shape-lg);
  background: var(--accent); color: var(--on-accent);
  margin-bottom: 14px;
  transition: border-radius .25s var(--ease-out), background .15s;
}
.rail-fab:hover { border-radius: var(--shape-xl); background: var(--accent-hover); }
.rail-fab-label { font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.rail-items { display: flex; flex-direction: column; gap: 6px; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.rail-item {
  width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
}
.rail-ind {
  width: 56px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--shape-full);
  transition: background .2s, width .2s;
}
.rail-item:hover .rail-ind { background: var(--state-hover); }
.rail-item:hover { color: var(--ink); }
.rail-item.on { color: var(--ink); }
.rail-item.on .rail-ind { background: var(--accent); color: var(--on-accent); }
.rail-item.small .rail-ind { height: 28px; width: 48px; }
.rail-item:focus-visible { outline: none; }
.rail-item:focus-visible .rail-ind { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- top app bar ---- */
.topbar.appbar {
  position: sticky; top: 0; z-index: 25;
  height: 72px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.appbar-brand { display: none; }
.appbar-word { font-family: var(--font-px); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.appbar-sp { flex: 1; }
.appbar .search {
  flex: 0 1 440px;
  height: 48px;
  border-radius: var(--shape-full);
  background: var(--surface-mid);
  border: none;
  padding: 0 18px;
}
.appbar .search input { font-size: 14px; }
.appbar .top-ca { height: 40px; border-radius: var(--shape-full); background: var(--surface-mid); border: none; padding: 0 8px 0 14px; }
/* No $DEBIT mint yet: no CA chip at all rather than a placeholder. */
.top-ca:has(.top-ca-pending) { display: none; }
.appbar .wallet-btn { height: 40px; border-radius: var(--shape-full); padding: 0 18px; }

/* Segmented buttons (M3): theme and candle convention. */
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--shape-full); overflow: hidden; }
.seg button { height: 36px; min-width: 44px; padding: 0 12px; display: grid; place-items: center; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--outline); }
.seg button:hover { background: var(--state-hover); color: var(--ink); }
.seg button.on { background: var(--surface-high); color: var(--ink); }
.cdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cdot-g { background: var(--up); }
.cdot-r { background: var(--down); }
/* The dots name fixed colours, and --up/--down swap under the CN convention. */
[data-candles="cn"] .cdot-g { background: var(--down); }
[data-candles="cn"] .cdot-r { background: var(--up); }

/* ---- the mark ---- */
.logo-mark {
  width: 56px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--shape-lg);
  background: none;
  border: none; box-shadow: none;
}
.logo-glyph {
  display: block; width: 100%; height: 100%;
  background: url("../img/logo.svg") center / contain no-repeat;
}

/* ---- surfaces, controls ---- */
.panel {
  background: var(--surface-low);
  border: none;
  border-radius: var(--shape-xl);
}
.panel-head { border-bottom: none; padding: 20px 22px 6px; min-height: 0; }
.panel-head .ph-title { font-family: var(--font-px); font-size: 18px; font-weight: 700; letter-spacing: -.005em; }
.panel-body { padding: 14px 22px 22px; }
.title-px { font-family: var(--font-px); font-weight: 700; letter-spacing: -.01em; }

.btn { border-radius: var(--shape-full); font-weight: 600; letter-spacing: .01em; border: none; }
.btn:active { transform: none; }
.btn-md { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 26px; font-size: 15.5px; border-radius: var(--shape-full); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-tonal, .btn-ghost { background: var(--surface-high); color: var(--ink); border: none; }
.btn-tonal:hover, .btn-ghost:hover { background: color-mix(in srgb, var(--surface-high) 70%, var(--ink) 12%); }
.btn.is-static { cursor: default; opacity: .9; }
.btn:focus-visible, .seg button:focus-visible, .chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip { border-radius: var(--shape-full); border: 1px solid var(--outline); background: transparent; }
.chip-xs { border-radius: var(--shape-full); }
/* A chip that is a link has to say so. The badges are spans and stay inert. */
a.chip { transition: background .15s, border-color .15s; }
a.chip:hover { background: var(--surface-high); border-color: var(--line-2); }
.stat, .ccy-card, .howcard, .step, .pcard { border: none; background: var(--surface-low); border-radius: var(--shape-xl); }

/* ---- home: hero ---- */
.bhero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px; align-items: center;
  padding: 36px 38px;
  margin: 6px 0 16px;
  border-radius: var(--shape-2xl);
  background: var(--surface-low);
}
.bchip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  border-radius: var(--shape-full);
  background: var(--surface-high);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.bhero-title {
  margin-top: 18px;
  font-family: var(--font-px);
  font-size: clamp(44px, 6.4vw, 88px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.035em;
  overflow-wrap: anywhere; min-width: 0;
}
.bhero-sub { margin-top: 18px; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bhero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* The $DEBIT card — the mark's own card, at hero scale.
 *
 * Every value is measured off the brand artwork, not chosen: a #101010 body
 * with a #1e1e1e diagonal half, a #ededed outline, a 2x2 contact chip and the
 * white code pill on the right. The card is BLACK IN BOTH THEMES, because the
 * mark is — so its text is white in both, and none of it is a token.
 *
 * The bloom is load-bearing rather than decorative. #101010 on a #000000 page
 * is a 1.09:1 fill, so without a lit edge the card is a dark shape on a dark
 * ground and reads as nothing at all. That is exactly why the artwork draws
 * the same glow. */
.bcard-wrap { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bcard {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1.586;
  padding: 24px 26px;
  border-radius: var(--shape-2xl);
  background: linear-gradient(155deg, #101010 0 62%, #1e1e1e 62%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 46px rgba(255, 255, 255, .12);
  color: #ffffff;
  /* A grid, not a flex column with padding-right on the number. The pill is
     absolutely placed, so nothing in the layout stops the number running under
     it — only the padding does, and padding does not shrink with the card. At
     390px the magic 72px was wider than the card's own gutter and the number
     ran beneath the pill. A real column cannot collide at any width. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 14px;
  align-content: space-between;
  rotate: -4deg;
  transition: rotate .4s var(--ease-out);
}
.bcard:hover { rotate: 0deg; }

/* The contact chip, top-left: four squares split by a cross, as the mark draws it. */
.bcard-chip {
  position: absolute; left: 26px; top: 24px;
  width: 50px; height: 38px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 31%, #101010 31% 33%, transparent 33% 67%, #101010 67% 69%, transparent 69%),
    linear-gradient(0deg, transparent 44%, #101010 44% 56%, transparent 56%),
    #d9d9d9;
}
/* The code pill, on the right, where the artwork puts it. */
.bcard-qr {
  grid-column: 2; grid-row: 1 / -1; align-self: center;
  width: 56px; height: 83px;
  background: url("../img/qr.svg") center / contain no-repeat;
}
.bcard-top { grid-column: 1; grid-row: 1; justify-self: end; }
.bcard-net { font-size: 12px; font-weight: 700; letter-spacing: .22em; opacity: .75; }
.bcard-num {
  grid-column: 1; grid-row: 2; align-self: center;
  font-family: var(--mono);
  font-size: clamp(12px, 1.6vw, 17px);
  letter-spacing: .1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bcard-foot { grid-column: 1; grid-row: 3; display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15px; }
.bcard-foot small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.bcard-copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: var(--shape-full);
  background: var(--surface-high); color: var(--ink); font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.bcard-copy:hover { background: var(--line-2); }

/* ---- home: the $DEBIT market ---- */
.bmarket { margin-bottom: 16px; }
.bmarket-soon { display: flex; gap: 16px; align-items: center; padding: 22px; }
.bmarket-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--shape-lg); background: var(--surface-high); }
.bmarket-t { display: block; font-family: var(--font-px); font-weight: 700; font-size: 18px; }
.bmarket-d { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.bmarket-d a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mtile { padding: 14px 16px; border-radius: var(--shape-lg); background: var(--surface-mid); min-width: 0; }
.mtile-k { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.mtile-v { display: block; margin-top: 4px; font-family: var(--mono); font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grad { margin-top: 18px; }
.grad-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grad-k { font-weight: 600; font-size: 14px; }
.grad-v { font-size: 22px; font-weight: 500; }
.grad-bar { margin-top: 10px; height: 16px; border-radius: var(--shape-full); background: var(--surface-high); overflow: hidden; }
.grad-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .6s var(--ease-out); }
.grad-d { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
.bmarket-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---- home: grids ---- */
.bgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.bgrid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---- the estimator ---- */
.field-m3 { display: flex; flex-direction: column; gap: 6px; }
.field-k { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field-row {
  display: flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 16px;
  border-radius: var(--shape-md);
  background: var(--surface-mid);
  border-bottom: 2px solid var(--outline);
}
.field-row:focus-within { border-bottom-color: var(--ink); }
.field-row input, .field-row select {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--ink); font-family: var(--mono); font-size: 17px;
}
.field-row select { font-family: var(--font); font-size: 14.5px; }
.field-row select option { background: var(--surface-low); color: var(--ink); }
.field-pre, .field-suf { color: var(--muted); font-weight: 600; }
.field-m3 input[type="range"] { accent-color: var(--ink); width: 100%; margin-top: 4px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.field-wide { grid-column: 1 / -1; }
.est-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px; }
.est-out > div { padding: 16px; border-radius: var(--shape-lg); background: var(--ink); color: var(--surface); min-width: 0; }
.est-k { display: block; font-size: 12px; font-weight: 600; opacity: .7; }
.est-v { display: block; margin-top: 4px; font-family: var(--mono); font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- bank rails ---- */
.rails-list { padding: 4px 12px 0; }
.rail-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 10px;
  border-radius: var(--shape-md);
}
.rail-row:hover { background: var(--state-hover); }
.rail-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rails-note { padding: 6px 22px 20px; }

/* ---- straight answers ---- */
.bfaq { margin-top: 0; }
.bfaq-list { padding: 4px 12px 14px; }
.bfaq-item { border-radius: var(--shape-lg); }
.bfaq-item + .bfaq-item { margin-top: 4px; }
.bfaq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 12px; border-radius: var(--shape-lg);
  font-weight: 600; font-size: 15px;
}
.bfaq-item summary::-webkit-details-marker { display: none; }
.bfaq-item summary:hover { background: var(--state-hover); }
.bfaq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bfaq-chev { transform: rotate(90deg); transition: transform .2s; flex: none; color: var(--muted); }
.bfaq-item[open] .bfaq-chev { transform: rotate(-90deg); }
.bfaq-item[open] { background: var(--surface-mid); }
.bfaq-item p { padding: 0 12px 16px; color: var(--ink-2); line-height: 1.6; font-size: 14.5px; max-width: 78ch; }

/* ---- the platform token's page + pinned card ---- */
.panel.house { margin: 14px 0 16px; background: var(--surface-low); }
.house .panel-body { padding: 26px 28px; }
.house-k { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--shape-full); background: var(--surface-high); font-size: 12.5px; font-weight: 600; }
.house-t { margin-top: 14px; font-family: var(--font-px); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; }
.house-d { margin-top: 10px; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.house-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.house-ca { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.house-ca code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); word-break: break-all; }
.housecard {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px; padding: 16px 18px;
  border-radius: var(--shape-xl); background: var(--ink); color: var(--surface);
}
/* The mark is a BLACK card in both themes — that is what the artwork is — so
   its tile has to be light in both. It was `var(--surface)`, which is light on
   paper and #000000 on the dark theme: a black mark on a black tile, so the
   glyph vanished from the home board on the default theme. The literal is
   deliberate; no token is light in both. */
.housecard-mark { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--shape-lg); background: #ffffff; color: var(--ink); }
.housecard-mark .logo-glyph { width: 64%; height: 64%; }
.housecard-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.housecard-k { font-size: 12px; font-weight: 600; opacity: .7; }
.housecard-t { font-family: var(--font-px); font-size: 22px; font-weight: 700; }
.housecard-a { font-size: 12px; opacity: .6; font-family: var(--mono); }
.housecard-go { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--shape-full); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; }

/* ---- responsive: the rail becomes a bottom navigation bar ---- */
@media (max-width: 1100px) {
  .bhero { grid-template-columns: minmax(0, 1fr); }
  .bgrid, .bgrid-even { grid-template-columns: minmax(0, 1fr); }
  .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .appbar .top-ca { display: none; }
  .seg[data-toggle="candles"] { display: none; }
}
@media (max-width: 720px) {
  .shell.shell-rail { display: block; }
  .shell-rail .content { padding: 4px 14px 104px; }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    height: auto; width: auto;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface-mid);
    gap: 0;
  }
  .rail-logo, .rail-foot, .rail-fab-label { display: none; }
  .rail-items { flex-direction: row; gap: 0; flex: 1; justify-content: space-around; }
  .rail-item { width: auto; min-width: 0; flex: 1; font-size: 10.5px; }
  .rail-ind { width: 52px; height: 30px; }
  .rail-fab { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); margin: 0; width: 56px; height: 56px; }
  .topbar.appbar { padding: 0 14px; height: 64px; gap: 10px; }
  .appbar-brand { display: block; }
  .appbar .search { flex: 1 1 auto; height: 44px; padding: 0 14px; }
  .appbar .search kbd { display: none; }
  .appbar .wallet-btn { padding: 0 12px; font-size: 0; gap: 0; }
  .appbar .wallet-btn svg { width: 18px; height: 18px; }
  .appbar-sp { display: none; }
  .bhero { padding: 24px 20px; border-radius: var(--shape-xl); }
  .bcard { rotate: 0deg; }
  .bmarket-soon { padding: 18px; }
  .est-out { grid-template-columns: minmax(0, 1fr); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .rail-label { font-size: 9.5px; }
  .rail-ind { width: 44px; }
  .seg[data-toggle="theme"] button { min-width: 38px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .rail-fab, .grad-bar span, .rail-ind { transition: none; }
}

/* The rail logo carries the base .logo class, which grows (flex: 1) — in a
   column that pushed every destination to the bottom of the rail. */
.rail .rail-logo { flex: none; }
/* The chevron icon points left: down when closed, up when open. */
.bfaq-chev { transform: rotate(-90deg); }
.bfaq-item[open] .bfaq-chev { transform: rotate(90deg); }

@media (max-width: 720px) {
  /* The search field yields first, so the settings and wallet never clip. */
  .appbar .search { flex: 1 1 0; min-width: 0; }
  .appbar .seg button { min-width: 36px; padding: 0 9px; }
}

@media (max-width: 380px) {
  /* Tight bottom bar: M3 shows the label on the active destination only. */
  .rail-item:not(.on) .rail-label { display: none; }
}
@media (max-width: 720px) {
  .bcard { padding: 20px 20px; }
  .bcard-foot { font-size: 13.5px; }
  .bcard-foot span:last-child { text-align: right; }
}

/* ---- UsePaid-style sidebar (desktop): wordmark on top, full-width rows, active
        page in bold ink, X card at the foot. Below 720px the bottom bar is unchanged. ---- */
.rail-word, .rail-sub { display: none; }
@media (max-width: 720px) { .rail-wide-only { display: none !important; } }
@media (min-width: 721px) {
  :root { --rail-w: 256px; }
  .rail { align-items: stretch; gap: 4px; padding: 18px 14px 16px; border-right: 1px solid var(--line); }
  .rail-logo { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 8px; margin-bottom: 22px; }
  .rail-word { display: inline; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
  .rail-fab { display: none; }
  .rail-items { gap: 2px; }
  .rail-item, .rail-item.small { width: auto; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 12px; border-radius: 12px;
    font-size: 16px; font-weight: 500; color: var(--ink-2); }
  .rail-ind, .rail-item.small .rail-ind { width: 22px; height: 22px; border-radius: 0; background: none !important; color: inherit; }
  .rail-item:hover { background: var(--state-hover); color: var(--ink); }
  .rail-item.on { color: var(--ink); font-weight: 700; }
  .rail-item.on .rail-ind { background: none; color: var(--ink); }
  .rail-xcard { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; }
  .rail-item.rail-xcard .rail-ind { width: 38px; height: 38px; border-radius: 50%; background: #000000 !important; color: #ffffff; border: 1px solid var(--line-2); display: grid; place-items: center; }
  .rail-xcard .rail-label { display: flex; flex-direction: column; font-weight: 700; color: var(--ink); }
  .rail-sub { display: block; font-style: normal; font-weight: 500; font-size: 13px; color: var(--muted); }
}
/* pump.fun card + copyable CA above the X card (desktop only; phones keep the bottom bar) */
.rail-side-ca { display: none; }
@media (min-width: 721px) {
  .rail-side-ca { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .rail-side-ca .rail-xcard { margin-top: 0; }
  .rail-pump-ic { width: 38px; height: 38px; flex: none; }
  .rail-ca { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
  .rail-ca-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
  .rail-ca-v { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-ca-copy { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--bg); border: none; cursor: pointer; }
  .rail-ca-copy:hover { background: var(--accent-hover); }
}