/* ==========================================================================
   LOUD — design system
   --------------------------------------------------------------------------
   Identity: the ground is cool and near-neutral so that ORANGE IS THE ONLY
   WARM THING ON THE PAGE. Orange means attention/heat, and it is also the
   brand — the two are deliberately the same colour. Heat runs on a 4-stop
   scale (dormant slate → cool teal → warm amber → hot orange) and is used
   ONLY for attention data. Price direction gets its own green/crimson pair
   so it never competes with heat.
   ========================================================================== */

:root {
  /* ground + structure */
  --bg:         #0A0E10;
  --bg-2:       #0D1214;
  --surface:    #121A1C;
  --surface-2:  #182226;
  --surface-3:  #1F2B30;
  --line:       #222E33;
  --line-soft:  #1A2427;

  /* type */
  --ink:        #E9EFF0;
  --ink-2:      #B9C7CA;
  --muted:      #7D9094;
  --faint:      #566A6F;

  /* brand = maximum attention */
  --brand:      #FF5A1F;
  --brand-ink:  #FFFFFF;
  --brand-dim:  #C43F12;
  --brand-glow: rgba(255, 90, 31, 0.14);

  /* heat scale — attention only */
  --heat-dormant: #4C6A78;
  --heat-cool:    #2FA08F;
  --heat-warm:    #E0A63B;
  --heat-hot:     #FF5A1F;

  /* price direction — never used for heat */
  --up:         #22C98B;
  --up-bg:      rgba(34, 201, 139, 0.10);
  --down:       #FF4D6A;
  --down-bg:    rgba(255, 77, 106, 0.10);

  /* risk semantics */
  --ok:         #22C98B;
  --warn:       #E0A63B;
  --danger:     #FF4D6A;

  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  14px;

  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg:  0 24px 64px rgba(0,0,0,.55);

  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --hdr-h: 60px;
  --maxw: 1440px;
}

[data-theme="light"] {
  --bg:         #F4F6F6;
  --bg-2:       #EDF1F1;
  --surface:    #FFFFFF;
  --surface-2:  #F3F6F6;
  --surface-3:  #E8EDED;
  --line:       #DCE3E3;
  --line-soft:  #E9EEEE;
  --ink:        #0F1719;
  --ink-2:      #33454A;
  --muted:      #5F7378;
  --faint:      #8B9DA1;
  --brand:      #E24A12;
  --brand-dim:  #B93B0C;
  --brand-glow: rgba(226, 74, 18, 0.10);
  --heat-dormant:#5B7987;
  --heat-cool:  #1E8878;
  --heat-warm:  #B5801F;
  --heat-hot:   #E24A12;
  --up:         #06996B;
  --up-bg:      rgba(6, 153, 107, 0.10);
  --down:       #D42A48;
  --down-bg:    rgba(212, 42, 72, 0.09);
  --ok:         #06996B;
  --warn:       #B5801F;
  --danger:     #D42A48;
  --shadow:     0 1px 2px rgba(16,30,34,.06), 0 6px 20px rgba(16,30,34,.07);
  --shadow-lg:  0 24px 56px rgba(16,30,34,.14);
}

/* ------------------------------------------------------------------ base -- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.mut  { color: var(--muted); }
.faint{ color: var(--faint); }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- header -- */

.hdr {
  position: sticky; top: 0; z-index: 200;
  height: var(--hdr-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.logo svg { display: block; }
.logo-word {
  font-weight: 700; font-size: 16px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.logo-word em { font-style: normal; color: var(--brand); }

.hdr-nav { display: flex; gap: 4px; margin-left: 8px; }
.hdr-nav a {
  padding: 6px 11px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color .12s, background .12s;
}
.hdr-nav a:hover { color: var(--ink); background: var(--surface-2); }
.hdr-nav a.is-active { color: var(--ink); background: var(--surface-2); }

/* search — a primary feature, sized like one */
.search { position: relative; min-width: 0; }
.search-field {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.search-field:focus-within {
  border-color: var(--brand);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.search-field svg { color: var(--faint); flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0; border: none; background: none;
  font-size: 13.5px; outline: none;
}
.search input::placeholder { color: var(--faint); }
.search kbd {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--faint); background: var(--surface-3);
  border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}

.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: 60;
  max-height: 420px; overflow-y: auto;
  display: none;
}
.search-pop.open { display: block; }
.search-pop-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  padding: 8px 10px 6px;
}
.search-row {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.search-row:hover, .search-row.cursor { background: var(--surface-2); }
.search-row-name { font-weight: 600; font-size: 13.5px; }
.search-row-sub { font-size: 11.5px; color: var(--faint); }
.search-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 13px; }

.hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.wallet-pill {
  display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.wallet-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 3px var(--up-bg);
}
.wallet-bal { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.wallet-usd { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* account hover menu */
.acct { position: relative; }
.acct-btn {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 8px 0 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .12s;
}
.acct-btn:hover { border-color: var(--surface-3); }
.acct-av {
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), #FF9A3D);
}
.acct-chev { color: var(--faint); }

/* Disconnected: no menu exists at all, and the button reads as an action. */
.acct.is-disconnected .acct-btn {
  padding: 0 12px 0 8px; gap: 8px;
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  background: var(--brand-glow);
}
.acct.is-disconnected .acct-btn:hover { border-color: var(--brand); }
.acct-av.is-empty {
  background: none; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--brand);
}
.acct-connect-label { font-size: 13px; font-weight: 600; color: var(--brand); }

.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 244px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s;
  z-index: 60;
}
.acct:hover .acct-menu,
.acct:focus-within .acct-menu { opacity: 1; visibility: visible; transform: none; }

.acct-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.acct-addr { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.acct-meta { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.acct-menu a, .acct-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-2); text-align: left;
}
.acct-menu a:hover, .acct-menu button:hover { background: var(--surface-2); color: var(--ink); }
.acct-menu svg { color: var(--faint); flex-shrink: 0; }
.acct-sep { height: 1px; background: var(--line-soft); margin: 6px 0; }
.acct-danger { color: var(--down) !important; }
.acct-danger svg { color: var(--down); }

/* ------------------------------------------------------------- primitives -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font-size: 13px; font-weight: 550;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn-brand {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  font-weight: 600;
}
.btn-brand:hover { background: #FF6D38; border-color: #FF6D38; }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn-buy { background: var(--up); border-color: var(--up); color: #04140E; font-weight: 650; }
.btn-buy:hover { filter: brightness(1.08); }
.btn-sell { background: var(--down); border-color: var(--down); color: #21060C; font-weight: 650; }
.btn-sell:hover { filter: brightness(1.08); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px; font-weight: 550; letter-spacing: .01em;
  white-space: nowrap;
}
.pill-up   { color: var(--up);   border-color: color-mix(in srgb, var(--up) 30%, transparent);   background: var(--up-bg); }
.pill-down { color: var(--down); border-color: color-mix(in srgb, var(--down) 30%, transparent); background: var(--down-bg); }
.pill-ok    { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: var(--up-bg); }
.pill-warn  { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: rgba(224,166,59,.10); }
.pill-danger{ color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: var(--down-bg); }
.pill-brand { color: var(--brand);  border-color: color-mix(in srgb, var(--brand) 34%, transparent); background: var(--brand-glow); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.card-title { font-size: 13.5px; font-weight: 600; }
.card-body { padding: 16px; }
.card-body-flush { padding: 0; }

.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}

/* token identity */
.tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tok-av {
  position: relative; overflow: hidden;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: #fff; letter-spacing: -.03em;
  background: linear-gradient(140deg, hsl(var(--h) 62% 42%), hsl(var(--h) 70% 30%));
  border: 1px solid rgba(255,255,255,.07);
}
/* Real logo covers the letter tile; removes itself on error. */
.tok-av img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
  background: inherit;
}
/* SOL's mark is a shape on transparency, not a square logo — inset it and
   drop the gradient tile so it doesn't read as a cropped photo. */
.tok-av.is-sol {
  background: var(--surface-3);
  border-color: var(--line);
}
.tok-av.is-sol img {
  inset: 18%;
  width: 64%; height: 64%;
  object-fit: contain;
  background: none;
}
.tok-av-lg   { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
.tok-av-sm   { width: 26px; height: 26px; border-radius: 7px;  font-size: 10px; }
.tok-av-pill { width: 18px; height: 18px; border-radius: 50%;  font-size: 8px; }
.tok-txt { min-width: 0; }
.tok-sym {
  font-weight: 650; font-size: 13.5px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tok-name {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.verified { color: var(--brand); flex-shrink: 0; }
.spoof-flag { color: var(--warn); flex-shrink: 0; }

/* copyable contract address */
.ca {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  padding: 3px 7px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  transition: color .12s, border-color .12s;
}
.ca:hover { color: var(--ink); border-color: var(--line); }
.ca svg { opacity: .6; }
.ca.copied { color: var(--up); border-color: color-mix(in srgb, var(--up) 30%, transparent); }

/* ------------------------------------------------------------------ heat -- */

.heat-hot     { --heat: var(--heat-hot); }
.heat-warm    { --heat: var(--heat-warm); }
.heat-cool    { --heat: var(--heat-cool); }
.heat-dormant { --heat: var(--heat-dormant); }

.heat-score {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  color: var(--heat); letter-spacing: -.04em;
}
.heat-score small { font-size: 9.5px; font-weight: 500; opacity: .55; }

.heat-bar {
  height: 3px; border-radius: 2px; background: var(--surface-3);
  overflow: hidden; margin-top: 5px;
}
.heat-bar i { display: block; height: 100%; background: var(--heat); border-radius: 2px; }

.heat-rail {
  width: 3px; align-self: stretch; border-radius: 2px;
  background: var(--heat); flex-shrink: 0;
}

.tier-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--heat);
}
.tier-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--heat);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--heat) 18%, transparent);
}
.heat-hot .tier-tag::before { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--heat) 18%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--heat) 6%, transparent); }
}

.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--heat, var(--muted)); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-fill { fill: color-mix(in srgb, var(--heat, var(--muted)) 13%, transparent); stroke: none; }

/* -------------------------------------------------------------- homepage -- */

.hero {
  padding: 32px 0 22px;
  border-bottom: 1px solid var(--line);
}
.hero-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hero h1 {
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.05;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero-sub { color: var(--muted); font-size: 14.5px; margin-top: 8px; max-width: 52ch; }

.statbar { display: flex; gap: 26px; flex-wrap: wrap; }
.stat-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.stat-v { font-family: var(--mono); font-size: 18px; font-weight: 600; margin-top: 3px; letter-spacing: -.03em; }
.stat-v small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 3px; }

.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--up); margin-right: 6px; vertical-align: 1px;
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* spiking strip */
.spiking { padding: 22px 0 4px; }
.spiking-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.spike-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.spike {
  display: flex; gap: 12px; padding: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .14s, transform .14s;
}
.spike:hover { border-color: color-mix(in srgb, var(--heat) 45%, var(--line)); transform: translateY(-1px); }
.spike-body { flex: 1; min-width: 0; }
.spike-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spike-metrics {
  display: flex; align-items: center; gap: 12px; margin-top: 9px;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
}
.spike-metrics b { color: var(--ink); font-weight: 600; }
.spike-vel { color: var(--heat); font-weight: 700; }

/* toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 0 12px;
}
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.segmented button {
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 550; color: var(--muted);
  transition: background .12s, color .12s;
}
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font-size: 12.5px; font-weight: 500;
  transition: all .12s;
}
.chip-filter:hover { color: var(--ink); border-color: var(--surface-3); }
.chip-filter[aria-pressed="true"] {
  color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: var(--brand-glow);
}

/* ------------------------------------------------------------ token list -- */

.tbl-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 1080px; }
table.tbl th {
  position: sticky; top: 0; z-index: 2;
  text-align: right; white-space: nowrap;
  padding: 10px 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
table.tbl th:first-child, table.tbl th.l { text-align: left; }
table.tbl th button { color: inherit; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
table.tbl th button:hover { color: var(--ink); }
table.tbl td {
  padding: 11px 14px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
table.tbl td.l { text-align: left; }
table.tbl tbody tr { transition: background .1s; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }

/* Buy stays reachable. Fourteen columns overflow even a 1440px viewport, so
   pinning the action column is the only fix that holds at every width —
   trimming columns just moves the cliff. Sticky cells need their own
   background (the row's does not paint under them) and the header corner has
   to outrank both sticky axes. */
table.tbl th:last-child,
table.tbl td:last-child {
  position: sticky; right: 0;
  background: var(--surface);
  border-left: 1px solid var(--line-soft);
}
table.tbl td:last-child { z-index: 1; }
table.tbl th:last-child { z-index: 3; background: var(--surface-2); }
table.tbl tbody tr:hover td:last-child { background: var(--surface-2); }

/* Shadow only while there is something scrolled under it. */
.tbl-scroll.is-clipped table.tbl th:last-child,
.tbl-scroll.is-clipped table.tbl td:last-child {
  box-shadow: -10px 0 12px -8px rgba(0,0,0,.45);
}
[data-theme="light"] .tbl-scroll.is-clipped table.tbl th:last-child,
[data-theme="light"] .tbl-scroll.is-clipped table.tbl td:last-child {
  box-shadow: -10px 0 12px -8px rgba(16,30,34,.16);
}

/* Token cell holds the link plus any moderation control. The control only
   reveals on row hover so it never competes with the token itself. */
.tok-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tok-cell .tok { min-width: 0; }
.tok-hide {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--faint); opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
table.tbl tbody tr:hover .tok-hide,
.tok-hide:focus-visible { opacity: 1; }
.tok-hide:hover { color: var(--danger); background: var(--down-bg); }
.tok-hide[disabled] { opacity: 1; color: var(--faint); cursor: default; }
.cell-heat { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cell-attn { text-align: right; }
.attn-authors { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.attn-sub { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.age { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.age-new { color: var(--brand); font-weight: 600; }

/* mobile card list — the token table becomes this under 900px */
.tok-cards { display: none; flex-direction: column; gap: 8px; }
.tok-card {
  display: flex; gap: 12px; padding: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tok-card-body { flex: 1; min-width: 0; }
.tok-card-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tok-card-price { text-align: right; }
.tok-card-price .p { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }
.tok-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line-soft);
}
.tok-card-grid dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.tok-card-grid dd { margin: 2px 0 0; font-family: var(--mono); font-size: 12.5px; font-weight: 550; }

/* ------------------------------------------------------------ token page -- */

.tok-hero { padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
.tok-hero-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tok-hero-id { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1; }
.tok-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 8px; }
.tok-hero-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tok-hero-price { text-align: right; }
.tok-hero-price .p { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.tok-hero-price .c { display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px; }

.socials { display: flex; gap: 6px; }
.social-lnk {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); transition: all .12s;
}
.social-lnk:hover { color: var(--ink); border-color: var(--surface-3); background: var(--surface-2); }

.keystats {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; margin-top: 18px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.keystat { background: var(--surface); padding: 11px 14px; }
.keystat dt { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.keystat dd { margin: 4px 0 0; font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -.03em; }

/* token page grid: chart+attention left, swap+pnl right */
/* This element carries .wrap too, so only touch the block axis — a `padding`
   shorthand here would zero out .wrap's horizontal gutter and make the grid
   sit wider than the header and hero. */
.tok-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 16px; padding-block: 18px 60px; align-items: start;
}
.tok-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tok-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--hdr-h) + 16px); }

/* chart */
.chart-shell { position: relative; }
.chart-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
/* Birdeye embed. The widget paints its own background, so the container just
   needs to match it exactly and clip to the card's radius — that seam is what
   makes an iframe read as "bolted on" rather than native. */
.chart-frame {
  --chart-crop: 40px;   /* height of the embed's "Powered by Birdeye" strip */
  position: relative;
  height: 540px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* The iframe is grown past the container and clipped, so the widget's own
   footer bar falls outside the visible box. Tune with --chart-crop. */
.chart-frame iframe {
  display: block; border: 0; background: var(--surface);
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 100%;
  height: calc(100% + var(--chart-crop));
}
/* Skeleton sits behind the iframe and is simply covered once it paints. */
.chart-skeleton {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  background: var(--surface);
}
.chart-skeleton span {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chart-frame.loaded .chart-skeleton { display: none; }


/* attention panel */
.attn-summary {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; padding: 16px; border-bottom: 1px solid var(--line-soft);
}
.attn-metric dt { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.attn-metric dd { margin: 4px 0 0; font-family: var(--mono); font-size: 17px; font-weight: 650; letter-spacing: -.03em; }
.attn-metric .hint { font-size: 10.5px; color: var(--faint); font-family: var(--sans); font-weight: 400; margin-top: 2px; }

.mention-chart { height: 96px; padding: 14px 16px 6px; }
.mention-chart canvas { display: block; width: 100%; height: 100%; }

.mentions { display: flex; flex-direction: column; }
.mention {
  display: flex; gap: 11px; padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
}
.mention-av {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(140deg, hsl(var(--h) 40% 38%), hsl(var(--h) 45% 26%));
}
.mention-body { min-width: 0; flex: 1; }
.mention-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mention-handle { font-weight: 600; font-size: 12.5px; }
.mention-time { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.mention-text { font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.mention-stats { display: flex; gap: 14px; margin-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--faint); }

.authors-list { display: flex; flex-direction: column; }
.author-row {
  display: grid; grid-template-columns: 28px minmax(0,1fr) auto;
  gap: 10px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--line-soft);
}
.author-row:first-child { border-top: none; }

/* Views on top because that is what ranks the list; posts and reactions are
   the supporting detail. */
.author-stats {
  text-align: right; white-space: nowrap;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.author-stats b {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink);
}
.author-stats span { font-size: 10.5px; color: var(--faint); }

/* ticker-collision warning — the data-quality case from the review */
.collision {
  display: flex; gap: 10px; padding: 12px 14px;
  background: rgba(224,166,59,.07);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: var(--radius); margin: 14px 16px;
  font-size: 12.5px; color: var(--ink-2);
}
.collision svg { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.collision b { color: var(--ink); }

/* ----------------------------------------------------------------- swap -- */

/* Direction is expressed by the arrow, not by tabs. Both variants of every
   direction-dependent element live in the DOM; only one is shown. */
#swap .dir-sell { display: none; }
#swap.is-sell .dir-buy  { display: none; }
#swap.is-sell .dir-sell { display: inline-flex; }
#swap.is-sell .presets.dir-sell { display: grid; }
.swap-asset > span { display: inline-flex; align-items: center; gap: 7px; }

.swap-field {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color .12s;
}
.swap-field:focus-within { border-color: var(--brand); }
.swap-field-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.swap-label { font-size: 11px; color: var(--faint); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.swap-bal { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.swap-bal button { color: var(--brand); font-weight: 600; margin-left: 5px; }
.swap-input-row { display: flex; align-items: center; gap: 10px; }
.swap-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.03em;
}
.swap-input::placeholder { color: var(--faint); }
.swap-asset {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 5px 9px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600;
}
.swap-usd { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 5px; }

.swap-switch { display: grid; place-items: center; margin: -6px 0; position: relative; z-index: 2; }
.swap-switch button {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--surface-3); border: 3px solid var(--surface);
  display: grid; place-items: center; color: var(--muted);
  transition: color .12s, background .12s, transform .22s cubic-bezier(.4,0,.2,1);
}
.swap-switch button:hover {
  color: var(--ink); background: var(--line);
}
/* The arrow itself carries the state: pointing down = buying, up = selling. */
#swap.is-sell .swap-switch button { transform: rotate(180deg); color: var(--down); }

.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.presets button {
  height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--mono); font-size: 12px; font-weight: 550; color: var(--ink-2);
  transition: all .12s;
}
.presets button:hover { background: var(--surface-3); color: var(--ink); }

.swap-rows { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; font-size: 12px; }
.swap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swap-row dt { color: var(--muted); display: flex; align-items: center; gap: 5px; }
.swap-row dd { margin: 0; font-family: var(--mono); font-weight: 550; }
.swap-row.fee dt { color: var(--muted); }
.swap-row.total { padding-top: 8px; border-top: 1px solid var(--line-soft); }
.swap-row.total dt, .swap-row.total dd { color: var(--ink); font-weight: 600; }

.help {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--faint);
  font-size: 9px; display: inline-grid; place-items: center; cursor: help;
}

.slippage-warn {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(224,166,59,.08);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  font-size: 11.5px; color: var(--ink-2); margin-bottom: 12px;
}
.slippage-warn svg { color: var(--warn); flex-shrink: 0; margin-top: 1px; }

.swap-foot { font-size: 11px; color: var(--faint); text-align: center; margin-top: 11px; line-height: 1.5; }

/* ---------------------------------------------------------------- toasts -- */

.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 600;
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.toast.in { opacity: 1; transform: none; }
.toast-msg { flex: 1; min-width: 0; }
.toast a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.toast-x {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
  display: grid; place-items: center; color: var(--faint);
}
.toast-x:hover { background: var(--surface-2); color: var(--ink); }

.toast.is-ok   { border-left-color: var(--ok); }
.toast.is-err  { border-left-color: var(--down); }
.toast.is-warn { border-left-color: var(--warn); }

@media (max-width: 640px) {
  .toast-host { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ------------------------------------------------------------------ pnl -- */

.pnl-card-live .card-head { border-bottom: none; padding-bottom: 0; }
.pnl-hero { padding: 4px 16px 16px; }
.pnl-big {
  font-family: var(--mono); font-size: 30px; font-weight: 700;
  letter-spacing: -.045em; line-height: 1.05;
}
.pnl-pct-row { display: flex; align-items: center; gap: 9px; margin-top: 7px; }
.pnl-mult { font-family: var(--mono); font-size: 13px; font-weight: 600; }

.pnl-rows {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line);
}
.pnl-cell { background: var(--surface); padding: 11px 16px; }
.pnl-cell dt { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pnl-cell dd { margin: 4px 0 0; font-family: var(--mono); font-size: 13.5px; font-weight: 600; }

.pnl-actions { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line-soft); }

/* shareable P&L image card */
.pnl-share {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1200 / 675;
  background:
    radial-gradient(120% 130% at 85% 8%, color-mix(in srgb, var(--heat) 26%, transparent) 0%, transparent 58%),
    linear-gradient(158deg, #101719 0%, #0A0E10 60%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: #EDF2F3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 3.4%, 32px);
}
.pnl-share::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 0% 100%, #000 10%, transparent 70%);
}
.pnl-share > * { position: relative; z-index: 1; }
.pnl-share-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pnl-share-tok { display: flex; align-items: center; gap: 11px; }
.pnl-share-sym { font-size: clamp(15px, 2.1vw, 21px); font-weight: 700; letter-spacing: -.02em; }
.pnl-share-name { font-size: clamp(10px, 1.3vw, 13px); color: #8FA2A6; margin-top: 1px; }
.pnl-share-brand { display: flex; align-items: center; gap: 7px; opacity: .92; }
.pnl-share-brand span { font-size: clamp(10px, 1.3vw, 13px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pnl-share-mid { display: flex; flex-direction: column; gap: 2px; }
.pnl-share-label { font-size: clamp(9px, 1.2vw, 12px); letter-spacing: .16em; text-transform: uppercase; color: #7C9095; font-weight: 600; }
/* Dollar amounts are wider than percentages, so this steps down a little
   harder to keep long figures on one line. */
.pnl-share-pct {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(32px, 7.4vw, 78px); line-height: .98; letter-spacing: -.05em;
  white-space: nowrap;
}
.pnl-share-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pnl-share-legs { display: flex; gap: clamp(14px, 3vw, 34px); }
.pnl-share-leg dt { font-size: clamp(8.5px, 1.1vw, 11px); letter-spacing: .13em; text-transform: uppercase; color: #7C9095; font-weight: 600; }
.pnl-share-leg dd { margin: 3px 0 0; font-family: var(--mono); font-size: clamp(12px, 1.7vw, 17px); font-weight: 650; }
.pnl-share-cta { font-size: clamp(9px, 1.2vw, 12px); color: #7C9095; text-align: right; }
.pnl-share-cta b { color: var(--heat); font-weight: 700; }

.share-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------ portfolio -- */

.pf-summary {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 16px;
}
.pf-cell { background: var(--surface); padding: 16px 18px; }
.pf-cell dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pf-cell dd { margin: 7px 0 0; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.pf-cell.lead dd { font-size: 30px; }
.pf-cell .sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-family: var(--sans); }

.untracked-note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 14px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius); font-size: 12.5px; color: var(--ink-2);
}
.untracked-note svg { color: var(--warn); flex-shrink: 0; margin-top: 1px; }

.trade-side { font-weight: 650; font-size: 12px; }
.trade-side.buy  { color: var(--up); }
.trade-side.sell { color: var(--down); }

/* --------------------------------------------------------------- modals -- */

.modal-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4, 8, 9, .72);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-back.open { display: flex; }
.modal {
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--surface);
}
.modal-body { padding: 18px; }
.modal-sm { max-width: 420px; }

/* ---------------------------------------------------------- wallet picker -- */

.wallet-intro {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  margin-bottom: 14px;
}
.wallet-list { display: flex; flex-direction: column; gap: 6px; }
.wallet-group {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint);
  margin: 10px 2px 2px;
}
.wallet-group:first-child { margin-top: 0; }

.wallet-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .12s, background .12s, opacity .12s;
}
.wallet-row:hover:not(:disabled) { background: var(--surface-3); border-color: var(--surface-3); }
.wallet-row:disabled { opacity: .45; cursor: default; }
.wallet-row.is-missing { opacity: .72; }
.wallet-row.is-missing:hover { opacity: 1; }

.wallet-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
  font-weight: 700; font-size: 13px; color: var(--muted);
}
.wallet-ico img { width: 100%; height: 100%; object-fit: cover; }
.wallet-name { flex: 1; font-size: 14px; font-weight: 600; }

.wallet-empty {
  padding: 22px 14px; text-align: center;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
  background: var(--surface-2); border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.wallet-empty span { color: var(--faint); font-size: 12px; }

.wallet-state {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--radius-sm); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-2);
}
.wallet-state.is-ok  { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 32%, transparent);   background: var(--up-bg); }
.wallet-state.is-err { color: var(--down); border-color: color-mix(in srgb, var(--down) 32%, transparent); background: var(--down-bg); }
.modal-x { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); }
.modal-x:hover { background: var(--surface-2); color: var(--ink); }

/* --------------------------------------------------------------- footer -- */

.ftr {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px; margin-top: 40px;
  color: var(--faint); font-size: 12.5px;
}
.ftr-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ftr-links { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr-links a:hover { color: var(--ink-2); }
.ftr-fee { color: var(--muted); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  .tok-grid { grid-template-columns: minmax(0,1fr) 340px; }
  .keystats { grid-template-columns: repeat(3, 1fr); }
  .spike-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  /* Swap module goes first on mobile — it is the thing that earns. */
  .tok-grid { grid-template-columns: 1fr; }
  .tok-side { position: static; order: -1; }
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .attn-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tbl-wrap { display: none; }
  .tok-cards { display: flex; }
}

@media (max-width: 860px) {
  .hdr-in { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .hdr-nav { display: none; }
  .logo-word { display: none; }
  .wallet-usd { display: none; }
  .search kbd { display: none; }
}

@media (max-width: 640px) {
  .wrap, .wrap-narrow { padding: 0 14px; }
  .hero { padding: 22px 0 18px; }
  .hero-in { gap: 20px; }
  .statbar { gap: 18px; }
  .stat-v { font-size: 16px; }
  .spike-grid { grid-template-columns: 1fr; }
  .keystats { grid-template-columns: repeat(2, 1fr); }
  .tok-hero-top { flex-direction: column; align-items: stretch; }
  .tok-hero-price { text-align: left; }
  .tok-hero-price .c { justify-content: flex-start; }
  .pf-summary { grid-template-columns: 1fr; }
  .pf-cell.lead dd { font-size: 26px; }
  .pnl-rows { grid-template-columns: 1fr; }
  .chart-frame { height: 340px; }
  .share-modal-grid { grid-template-columns: 1fr; }
  .toolbar { padding: 16px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ KOLs -- */
.kol-av {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--surface-3);
  border: 1px solid var(--line);
}
.kol-bio {
  font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Recent mentions: avatar aligns with the KOL list, timestamp stays right. */
.mention .kol-av { width: 30px; height: 30px; }
.mention-head { gap: 6px; }
.mention-head .mention-time { margin-left: auto; }

/* ---------------------------------------------------------------- tweets -- */
/* Reads as a tweet without cosplaying X: our type scale, our surfaces, our
   spacing. Only the information hierarchy is borrowed. */

.tweet {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  transition: background .12s;
}
.tweet:hover { background: var(--surface-2); }

.tweet-av { flex-shrink: 0; display: block; line-height: 0; }
.tweet-av img,
.tweet-av .mention-av {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: var(--surface-3);
  border: 1px solid var(--line);
  transition: border-color .12s;
}
.tweet-av:hover img { border-color: var(--brand); }

.tweet-body { min-width: 0; flex: 1; }

.tweet-head {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; margin-bottom: 3px;
}
.tweet-name {
  font-weight: 650; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15ch;
}
.tweet-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.tweet-handle, .tweet-time, .tweet-dot {
  font-size: 12px; color: var(--faint); white-space: nowrap;
}
.tweet-handle:hover, .tweet-time:hover { color: var(--muted); }
.tweet-dot { opacity: .6; }

.tweet-open {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--faint);
  transition: color .12s, background .12s;
}
.tweet-open:hover { color: var(--ink); background: var(--surface-3); }

.tweet-text {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.tweet-foot {
  display: flex; align-items: center; gap: 16px;
  margin-top: 9px;
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.tweet-stat { display: inline-flex; align-items: center; gap: 5px; }
.tweet-stat svg { opacity: .75; }

/* Price move since the post. The reason this panel is worth reading. */
.tweet-gain {
  margin-left: auto; flex-shrink: 0;
  font-weight: 650; font-size: 11.5px;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  background: var(--surface-2);
}
.tweet-gain.up   { color: var(--up);   border-color: color-mix(in srgb, var(--up) 34%, transparent);   background: var(--up-bg); }
.tweet-gain.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 34%, transparent); background: var(--down-bg); }

@media (max-width: 480px) {
  .tweet-name { max-width: 10ch; }
  .tweet-foot { gap: 12px; }
}

/* Empty portfolio — the normal state once everything is sold, not an error. */
.pf-empty {
  text-align: center !important;
  padding: 34px 20px !important;
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.pf-empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }

/* --------------------------------------------------------- board controls -- */

.board-count {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Sortable headers. The indicator only occupies space when active, so the
   header row doesn't jitter as the sort moves between columns. */
table.tbl th[data-sort] { cursor: pointer; user-select: none; }
table.tbl th[data-sort] button { color: inherit; font: inherit; }
table.tbl th[data-sort]:hover { color: var(--ink); }
table.tbl th[data-sort].is-sorted { color: var(--ink); }

.sort-ind { display: inline-block; width: 0; overflow: hidden; transition: width .1s; }
th.is-sorted .sort-ind { width: 9px; }
th.is-sorted[aria-sort="descending"] .sort-ind::before { content: "\2193"; color: var(--brand); }
th.is-sorted[aria-sort="ascending"]  .sort-ind::before { content: "\2191"; color: var(--brand); }

.board-empty {
  text-align: center !important; padding: 34px 20px !important;
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.board-empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 4px; }

.tok-card[hidden], tr[hidden] { display: none !important; }

/* ------------------------------------------------- signal tiles (token page) --
   Attention and organic score lead the key stats at double width, on their own
   layer. Everything else on this row is available on any chart site; these two
   are the reason to be here.

   Attention is tinted by --heat, inherited from .tok-hero's heat-<tier> class,
   so the tile looks hot before the number is read. Organic score deliberately
   uses the RISK palette instead — heat means attention and nothing else, and
   sharing a colour between "loud" and "trustworthy" would make both unreadable. */

.keystats-lead { grid-template-columns: repeat(8, 1fr); }
.keystat-signal { grid-column: span 2; position: relative; padding: 12px 15px 13px; }

/* The tint sits in a pseudo-element so the tile's own background stays flat and
   the intensity can scale with the tier without restating the gradient. */
.keystat-signal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--sig) 13%, transparent) 0%,
    color-mix(in srgb, var(--sig) 3%, transparent) 55%,
    transparent 100%);
}
.keystat-signal > * { position: relative; }

/* Top edge reads as a level meter: full-bleed accent, brighter the hotter it is. */
.keystat-signal::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--sig); opacity: .85;
}

.sig-heat { --sig: var(--heat, var(--heat-dormant)); }
.sig-org.is-ok   { --sig: var(--ok); }
.sig-org.is-warn { --sig: var(--warn); }
.sig-org.is-bad  { --sig: var(--danger); }

.keystat-signal dt { color: var(--muted); }
.keystat-signal dd {
  font-size: 26px; font-weight: 700; letter-spacing: -.045em;
  color: var(--sig); margin-top: 2px; line-height: 1.05;
}
.keystat-signal dd small {
  font-size: 11px; font-weight: 500; opacity: .5; margin-left: 1px;
  letter-spacing: 0;
}

.sig-bar {
  height: 3px; border-radius: 2px; background: var(--surface-3);
  overflow: hidden; margin: 9px 0 7px;
}
.sig-bar i {
  display: block; height: 100%; border-radius: 2px; background: var(--sig);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.sig-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: var(--faint); min-width: 0;
}
.sig-tag {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sig);
}
.sig-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sig);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 16%, transparent);
}
.sig-note {
  margin-left: auto; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Hot only: the tile itself breathes. Reserved for the top tier so it stays a
   signal rather than decoration — if everything pulses, nothing does. */
.heat-hot .sig-heat::after { box-shadow: 0 0 12px color-mix(in srgb, var(--sig) 55%, transparent); }
.heat-hot .sig-heat .sig-tag::before { animation: pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .heat-hot .sig-heat .sig-tag::before { animation: none; }
  .sig-bar i { transition: none; }
}

@media (max-width: 1200px) {
  .keystats-lead { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .keystats-lead { grid-template-columns: repeat(2, 1fr); }
  .keystat-signal dd { font-size: 22px; }
  .sig-note { display: none; }
}

/* ------------------------------------------------- avatar hover preview -- */
/* Lives on <body> with position:fixed — see the comment in app.js. The board's
   horizontal scroller would clip it if it were rendered in place. */

.av-pop {
  position: fixed; z-index: 300; pointer-events: none;
  width: 168px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: scale(.94); transform-origin: left center;
  transition: opacity .13s ease-out, transform .13s cubic-bezier(.2,.8,.3,1);
}
.av-pop.in { opacity: 1; transform: scale(1); }

.av-pop-img {
  position: relative; width: 148px; height: 148px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface-3);
  /* Checker so a transparent PNG reads as transparent rather than as a
     mismatched dark square. */
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%),
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%, transparent 75%, var(--surface-2) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.av-pop-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Heat tint around the frame — the same signal the row already carries. */
.av-pop-img::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heat, var(--line)) 45%, transparent);
}

.av-pop-meta { margin-top: 8px; min-width: 0; }
.av-pop-meta b {
  display: block; font-size: 13.5px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-pop-meta span {
  display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .av-pop { transition: opacity .13s ease-out; transform: none; }
  .av-pop.in { transform: none; }
}

/* ------------------------------------------------ live board reactions -- */

/* Rows glide to new positions instead of teleporting. The transform itself is
   set inline by the FLIP pass in app.js; this only lifts the moving row clear
   of its neighbours so overlapping rows read as one passing the other. */
table.tbl tbody tr.is-moving {
  position: relative; z-index: 2;
  background: var(--surface-2);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
}
[data-theme="light"] table.tbl tbody tr.is-moving {
  box-shadow: 0 6px 18px rgba(16,30,34,.12);
}

/* New posts landed for the timeframe on screen. A wash in the token's own heat
   colour, so "this got louder" and "this is hot" are the same visual language. */
@keyframes row-pulse {
  0%   { background: color-mix(in srgb, var(--heat) 26%, transparent); }
  100% { background: transparent; }
}
table.tbl tbody tr.row-pulse { animation: row-pulse 1.5s ease-out; }

/* The delta rides alongside the post count, then fades. */
.attn-sub { position: relative; }
.attn-sub[data-gained]::after {
  content: attr(data-gained);
  position: absolute; left: calc(100% + 6px); top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--heat); opacity: 0; white-space: nowrap;
  pointer-events: none;
}
.attn-sub.has-gain::after { animation: gain-rise 2.4s ease-out; }
@keyframes gain-rise {
  0%   { opacity: 0; transform: translateY(-30%); }
  15%  { opacity: 1; transform: translateY(-50%); }
  70%  { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-150%); }
}

@media (prefers-reduced-motion: reduce) {
  table.tbl tbody tr.is-moving { transition: none !important; transform: none !important; }
  table.tbl tbody tr.row-pulse { animation: none; }
  .attn-sub.has-gain::after { animation: none; opacity: 1; }
}

/* --------------------------------------------------- fold extra mentions -- */
/* Folded rows stay in the served HTML — crawlers read the whole conversation,
   readers get a short page. display:none is the standard accordion pattern and
   is indexed normally under mobile-first. */

.tweet.is-folded { display: none; }

.tweet.just-revealed { animation: tweet-in .4s ease-out backwards; }
@keyframes tweet-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.mentions-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .12s, color .12s;
}
.mentions-more:hover { background: var(--surface-2); color: var(--ink); }
.mentions-more::after {
  content: ''; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.mentions-count {
  font-family: var(--mono); font-size: 11px; color: var(--faint); font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .tweet.just-revealed { animation: none; }
}

/* --------------------------------------------------------------- app rail --
   A screen-level panel, NOT a column in the page grid. Fixed to the viewport's
   left edge and running the full height under the header, so it sits beside the
   hero, the chart and every card equally.

   That placement is the whole point: this panel is about OTHER tokens. When it
   lived inside the content grid it started below the title and shared the page's
   centred gutter, which made it read as a section of the token being viewed.

   It is also finished like chrome rather than content — flat against the page
   background, square edges, one hard border separating it from the article. */

:root { --rail-w: 236px; }

.app-rail {
  position: fixed; z-index: 150;
  top: var(--hdr-h); left: 0; bottom: 0;
  width: var(--rail-w);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  transition: transform .22s cubic-bezier(.3,.8,.3,1);
}
body.rail-collapsed .app-rail { transform: translateX(-100%); }

/* Content clears the rail. Padding rather than margin so the page background
   still runs edge to edge behind it. */
main.has-rail { padding-left: var(--rail-w); transition: padding-left .22s cubic-bezier(.3,.8,.3,1); }
body.rail-collapsed main.has-rail { padding-left: 0; }

.rail-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 11px 8px 11px 14px;
  border-bottom: 1px solid var(--line);
}
.rail-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.rail-toggle {
  margin-left: auto; width: 24px; height: 24px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  color: var(--faint); transition: color .12s, background .12s;
}
.rail-toggle:hover { color: var(--ink); background: var(--surface-2); }

.rail-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; }

.rail-row {
  position: relative; display: grid;
  grid-template-columns: 3px 26px minmax(0, 1fr) auto;
  align-items: center; gap: 9px;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s;
}
.rail-row:last-child { border-bottom: none; }
.rail-row:hover { background: var(--surface-2); }

/* The token on screen stays findable in the list. */
.rail-row.is-current { background: var(--surface); }
.rail-row.is-current .rail-id b { color: var(--brand); }

.rail-row .heat-rail { align-self: stretch; border-radius: 0 2px 2px 0; }
.rail-row .tok-av { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }

.rail-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rail-id b {
  font-size: 12.5px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-id .num { font-size: 10.5px; color: var(--faint); }

.rail-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rail-score {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--heat); letter-spacing: -.03em; line-height: 1;
}
.rail-chg { font-size: 10.5px; }

/* Rows glide when the ranking changes — same treatment as the board. */
.rail-row.is-moving { z-index: 2; background: var(--surface-2); }

/* Collapsed: a thin tab pinned to the same edge the rail left. */
.rail-reopen {
  position: fixed; z-index: 150;
  top: calc(var(--hdr-h) + 16px); left: 0;
  width: 22px; height: 46px;
  display: none; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--faint); transition: color .12s, background .12s;
}
.rail-reopen:hover { color: var(--ink); background: var(--surface-2); }
body.rail-collapsed .rail-reopen { display: grid; }

/* Below 1180 the rail costs the article too much width; the content is what
   the visitor came for. */
@media (max-width: 1180px) {
  .app-rail, .rail-reopen { display: none !important; }
  main.has-rail { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-rail, main.has-rail { transition: none; }
  .rail-row.is-moving { transition: none !important; transform: none !important; }
}

/* -------------------------------------------------------- referral page -- */

.ref-link { display: flex; gap: 8px; align-items: stretch; }
.ref-link input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); outline: none;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
}
.ref-link input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.ref-link .btn { flex-shrink: 0; }

.ref-share {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}

.ref-claim-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ref-claim-bar b { font-size: 15px; font-family: var(--mono); letter-spacing: -.02em; }
.ref-claim-bar .pill { margin-left: 8px; }
.ref-claim-bar .btn[disabled] { opacity: .45; cursor: default; }

/* ------------------------------------------------------- referral: offer -- */
/* The pitch leads the page. It is sized and coloured like a landing section
   rather than a dashboard header, because for most visitors that is what it is. */

.ref-hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 380px at 12% -20%, var(--brand-glow), transparent 70%),
    var(--bg-2);
}
.ref-hero-in {
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  gap: 40px; align-items: center; padding: 40px 20px 44px;
}
.ref-hero-copy h1 {
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1;
  letter-spacing: -.03em; margin: 12px 0 12px;
}
.ref-hero-copy > p { color: var(--ink-2); font-size: 14.5px; max-width: 54ch; line-height: 1.6; }
.ref-hero-copy b { color: var(--ink); }

.ref-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-glow);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  padding: 5px 11px; border-radius: 999px;
}

.ref-points { margin: 20px 0 0; display: grid; gap: 10px; max-width: 56ch; }
.ref-points li {
  position: relative; padding-left: 22px;
  font-size: 13px; color: var(--muted); line-height: 1.55;
}
.ref-points li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}

/* ---- calculator ---- */
.ref-calc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow);
}
.ref-calc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 14px 0 6px; font-size: 12px; color: var(--muted);
}
.ref-calc-row output {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
.ref-calc input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px; background: var(--surface-3);
  outline: none;
}
.ref-calc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface); cursor: grab;
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.ref-calc input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--surface); cursor: grab;
}

.ref-calc-out {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  text-align: center;
}
.ref-calc-out b {
  display: block; font-family: var(--mono); font-size: 32px; font-weight: 700;
  letter-spacing: -.04em; color: var(--brand); margin: 4px 0 2px;
}
.ref-calc-sub { font-size: 11.5px; color: var(--faint); }
.ref-calc-note { margin-top: 12px; font-size: 10.5px; color: var(--faint); line-height: 1.5; }

/* ---- vanity handle ---- */
.ref-handle { margin-top: 12px; }
.ref-handle-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
}
.ref-handle-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.ref-handle-prefix {
  display: flex; align-items: center; padding: 0 2px 0 12px;
  font-family: var(--mono); font-size: 12.5px; color: var(--faint); white-space: nowrap;
}
.ref-handle-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 8px;
  background: none; border: none; outline: none;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
}
.ref-handle-row .btn { border-radius: 0; border: none; border-left: 1px solid var(--line); flex-shrink: 0; }

.ref-handle-msg { margin-top: 6px; font-size: 11px; color: var(--faint); line-height: 1.5; }
.ref-handle-msg code { font-family: var(--mono); font-size: 10.5px; }
.is-err .ref-handle-msg { color: var(--danger); }
.is-ok  .ref-handle-msg { color: var(--ok); }
.is-err .ref-handle-row { border-color: var(--danger); }

/* ---- how it works ---- */
.ref-steps { counter-reset: s; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ref-steps li {
  counter-increment: s; position: relative; padding-left: 38px;
  font-size: 13px; color: var(--muted); line-height: 1.55;
}
.ref-steps li b { color: var(--ink); }
.ref-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--brand); background: var(--brand-glow);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

@media (max-width: 900px) {
  .ref-hero-in { grid-template-columns: 1fr; gap: 26px; padding: 30px 20px 34px; }
}