/* RIFF shadcn component layer (Maia preset, recreated as plain CSS, no Tailwind/React).
   Class styling, spacing, radius, focus ring, hover/disabled are translated from the
   generated shadcn sources (button/card/badge/input/select/tabs/table/progress/
   separator/skeleton/tooltip). Loaded AFTER app.css + theme.css on a migrated page.

   Two kinds of rule live here:
   1. `.ui-*` primitives — the reusable shadcn-look classes used by the restyled markup.
   2. token-page refinements — existing classes (.seg, .chips, .cta, .met, .tacts, ...)
      restyled to the new look. They never rename or restructure a JS hook; they only
      change appearance. (This file is only linked on migrated pages, so these are inert
      on pages not yet migrated.) */

/* =================================================================== BUTTON */
.ui-button {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  gap: .375rem; white-space: nowrap; vertical-align: middle;
  border-radius: var(--radius-4xl); border: 1px solid transparent; background-clip: padding-box;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500; line-height: 1;
  height: 2.25rem; padding: 0 .75rem; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  outline: none; text-decoration: none;
  background: var(--primary); color: var(--primary-foreground);
}
.ui-button:hover { background: color-mix(in oklch, var(--primary), transparent 20%); }
.ui-button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }
.ui-button:active:not(:disabled):not([aria-haspopup]) { transform: translateY(1px); }
.ui-button:disabled, .ui-button[disabled] { pointer-events: none; opacity: .5; }
.ui-button svg { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }

.ui-button.outline {
  border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 70%);
  color: var(--foreground);
}
.ui-button.outline:hover { background: color-mix(in oklch, var(--input), transparent 50%); color: var(--foreground); }
.ui-button.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ui-button.secondary:hover { background: color-mix(in oklch, var(--secondary), var(--foreground) 6%); }
.ui-button.ghost { background: transparent; color: var(--foreground); }
.ui-button.ghost:hover { background: color-mix(in oklch, var(--muted-surface), transparent 40%); color: var(--foreground); }
.ui-button.destructive { background: color-mix(in oklch, var(--destructive), transparent 82%); color: var(--destructive); }
.ui-button.destructive:hover { background: color-mix(in oklch, var(--destructive), transparent 72%); }

.ui-button.xs { height: 1.5rem; padding: 0 .625rem; font-size: .75rem; gap: .25rem; }
.ui-button.xs svg { width: .75rem; height: .75rem; }
.ui-button.sm { height: 2rem; padding: 0 .75rem; gap: .25rem; }
.ui-button.lg { height: 2.5rem; padding: 0 1rem; }
.ui-button.icon { width: 2.25rem; height: 2.25rem; padding: 0; }
.ui-button.icon-sm { width: 2rem; height: 2rem; padding: 0; }
.ui-button.block { width: 100%; }

/* =================================================================== BADGE */
.ui-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  width: fit-content; flex-shrink: 0; overflow: hidden; white-space: nowrap;
  height: 1.25rem; padding: .125rem .5rem;
  border-radius: var(--radius-4xl); border: 1px solid transparent;
  font-family: var(--font-body); font-size: .75rem; font-weight: 500; line-height: 1;
  background: var(--primary); color: var(--primary-foreground);
}
.ui-badge svg { width: .75rem; height: .75rem; }
.ui-badge.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ui-badge.outline { border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 70%); color: var(--foreground); }
.ui-badge.destructive { background: color-mix(in oklch, var(--destructive), transparent 82%); color: var(--destructive); }
.ui-badge.muted { background: var(--muted-surface); color: var(--muted-foreground); }

/* =================================================================== CARD */
.ui-card {
  background: var(--card-surface); color: var(--card-foreground); overflow: hidden;
  border-radius: var(--radius-2xl); border: 1px solid var(--card-edge);
  font-size: .875rem;
}
.ui-card-header { padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ui-card-header.border-b { border-bottom: 1px solid var(--border); }
.ui-card-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.ui-card-desc { font-size: .8125rem; color: var(--muted-foreground); margin-top: .25rem; }
.ui-card-content { padding: 1.25rem 1.5rem; }
.ui-card-content.tight { padding: 1rem 1.25rem; }

/* =================================================================== INPUT */
.ui-input {
  height: 2.25rem; width: 100%; min-width: 0; border-radius: var(--radius-4xl);
  border: 1px solid var(--input); background: color-mix(in oklch, var(--input), transparent 70%);
  padding: .25rem .875rem; color: var(--foreground); font: inherit; font-size: .875rem;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.ui-input::placeholder { color: var(--muted-foreground); }
.ui-input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }
.ui-input:disabled { opacity: .5; cursor: not-allowed; }

.ui-textarea {
  min-height: 4rem; width: 100%; resize: none; border-radius: var(--radius-xl);
  border: 1px solid var(--input); background: color-mix(in oklch, var(--input), transparent 70%);
  padding: .75rem .875rem; color: var(--foreground); font: inherit; font-size: .875rem; outline: none;
}
.ui-textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }

.ui-label { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; line-height: 1; color: var(--foreground); }

/* =================================================================== SELECT (trigger-as-button) */
.ui-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .375rem;
  width: fit-content; height: 2.25rem; padding: 0 .75rem; border-radius: var(--radius-4xl);
  border: 1px solid var(--input); background: color-mix(in oklch, var(--input), transparent 70%);
  color: var(--foreground); font: inherit; font-size: .875rem; white-space: nowrap; cursor: pointer;
  outline: none; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ui-select:hover { background: color-mix(in oklch, var(--input), transparent 50%); }
.ui-select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }
.ui-select svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }

/* =================================================================== TABS (pill segmented, Pons-style) */
.ui-tablist {
  display: inline-flex; align-items: center; justify-content: center; gap: 0; width: fit-content;
  height: 2.25rem; padding: 3px; border-radius: var(--radius-4xl); background: var(--muted-surface);
}
.ui-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem; flex: 1;
  height: calc(100% - 1px); padding: 0 .875rem; border: 1px solid transparent;
  border-radius: var(--radius-xl); background: transparent;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 500; white-space: nowrap;
  color: var(--muted-foreground); cursor: pointer; outline: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ui-tab:hover { color: var(--foreground); }
.ui-tab svg { width: 1rem; height: 1rem; }
.ui-tab.on, .ui-tab[data-active] {
  background: color-mix(in oklch, var(--foreground) 14%, transparent);
  border-color: color-mix(in oklch, var(--foreground) 18%, transparent); color: var(--foreground);
}
.ui-tab:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }
.ui-tab:disabled { opacity: .5; cursor: not-allowed; }

/* =================================================================== TABLE */
.ui-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: .8125rem; }
.ui-table thead th {
  height: 2.5rem; padding: 0 .75rem; text-align: left; vertical-align: middle;
  font-weight: 500; white-space: nowrap; color: var(--muted-foreground);
  text-transform: none; letter-spacing: normal; border-bottom: 1px solid var(--border);
}
.ui-table tbody td { padding: .625rem .75rem; vertical-align: middle; white-space: nowrap; color: var(--foreground); border-bottom: 1px solid var(--border); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background-color .12s; }
.ui-table tbody tr:hover { background: color-mix(in oklch, var(--muted-surface), transparent 55%); }

/* =================================================================== PROGRESS */
.ui-progress { position: relative; display: flex; align-items: center; width: 100%; height: .5rem; overflow: hidden; border-radius: var(--radius-4xl); background: var(--muted-surface); }
.ui-progress-fill { height: 100%; width: 0; background: var(--primary); transition: width .3s ease; }

/* =================================================================== MISC */
.ui-separator { flex-shrink: 0; background: var(--border); height: 1px; width: 100%; border: 0; }
.ui-separator.vertical { height: auto; width: 1px; align-self: stretch; }
.ui-skeleton { border-radius: var(--radius-xl); background: var(--muted-surface); animation: ui-pulse 1.6s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes ui-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; } }

/* =================================================================== KPI strip (Pons analytics) */
.ui-kpi {
  display: flex; align-items: stretch; background: var(--card-surface); border: 1px solid var(--card-edge);
  border-radius: var(--radius-2xl); overflow: hidden;
}
.ui-kpi .cell { flex: 1; min-width: 0; padding: .875rem 1.25rem; border-left: 1px solid var(--border); }
.ui-kpi .cell:first-child { border-left: 0; }
.ui-kpi .cell .k { font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); letter-spacing: .02em; }
.ui-kpi .cell .v { margin-top: .25rem; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--foreground); }
.ui-kpi .cell .v.pos { color: var(--primary); }
.ui-kpi .cell .v.neg { color: var(--destructive); }

/* ===================================================================================
   TOKEN-PAGE REFINEMENTS — existing classes restyled to the shadcn/Maia look.
   No hook is renamed or restructured; appearance only.
   =================================================================================== */

/* Sidebar (shadcn Sidebar look) */
.side { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); }
.nav a { border-radius: var(--radius-xl); color: var(--sidebar-foreground); opacity: .72; }
.nav a svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.nav a:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); opacity: 1; }
.nav a.active { background: color-mix(in oklch, var(--primary), transparent 86%); color: var(--primary); opacity: 1; }
.side .create { border-radius: var(--radius-4xl); background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.side .create:hover { background: color-mix(in oklch, var(--primary), transparent 20%); }
.side .create svg { width: 1rem; height: 1rem; vertical-align: -2px; }
.side .links a { border-radius: var(--radius-lg); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); }
.side .links a svg { width: 15px; height: 15px; }
.side .links a:hover { color: var(--primary); border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 50%); }

/* Top bar connect button -> outline button */
.connect { border-radius: var(--radius-4xl); border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 70%); font-weight: 500; }
.connect:hover { border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 50%); }
.back { color: var(--muted-foreground); }
.back:hover { color: var(--foreground); }

/* Token header identity */
.head .art { border-radius: var(--radius-xl); border-color: var(--border); background: color-mix(in oklch, var(--card), var(--foreground) 4%); }
.head .id h1 { font-family: var(--font-heading); }
.head .id .tk { display: inline-flex; align-items: center; height: 1.25rem; padding: .125rem .5rem; border-radius: var(--radius-4xl); background: var(--primary); color: var(--primary-foreground); font-size: .6875rem; font-weight: 600; }
/* address chip -> secondary pill */
.chip { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); color: var(--muted-foreground); font-weight: 500; }
.chip:hover { color: var(--foreground); }
/* header action chips (Contract / Pool / Dexscreener / GeckoTerminal) -> outline sm buttons */
.tacts a { height: 2rem; padding: 0 .75rem; border-radius: var(--radius-4xl); border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 70%); color: var(--foreground); font-weight: 500; gap: .375rem; }
.tacts a:hover { color: var(--foreground); border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 50%); }
.tacts a svg { width: .875rem; height: .875rem; }
/* social icon links -> ghost icon buttons */
.tsoc a { border-radius: var(--radius-4xl); background: transparent; border-color: var(--border); color: var(--muted-foreground); }
.tsoc a:hover { color: var(--foreground); border-color: var(--border); background: color-mix(in oklch, var(--muted-surface), transparent 45%); }

/* KPI strip: the .metrics row is reshaped into one bordered Pons strip with dividers.
   The .met cells lose their individual boxes and gain left dividers. */
.metrics { gap: 0; background: var(--card-surface); border: 1px solid var(--card-edge); border-radius: var(--radius-2xl); overflow: hidden; flex-wrap: nowrap; }
.met { background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; min-width: 0; flex: 1; padding: .875rem 1.25rem; }
.met:first-child { border-left: 0; }
.met .k { font-size: .6875rem; letter-spacing: .02em; text-transform: none; color: var(--muted-foreground); font-weight: 500; }
.met .v { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.met .v.up, .met .v.grn { color: var(--primary); }
.met .v.dn { color: var(--destructive); }

/* Graduation progress shown as its own card below the KPI strip (markup moved in token.html) */
.gradcard { margin-top: 12px; }
.gradcard .row { display: flex; justify-content: space-between; align-items: baseline; font-size: .8125rem; color: var(--muted-foreground); margin-bottom: .6rem; }
.gradcard .row b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Panels -> cards */
.panel { background: var(--card-surface); border: 1px solid var(--card-edge); border-radius: var(--radius-2xl); }
.chart-h { border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; }
.chart-h b { font-family: var(--font-heading); font-size: .9375rem; font-weight: 600; }

/* chart timeframe + trades/holders: the existing .tf / .tabs2 become pill tablists */
.tf { gap: 0; padding: 3px; border-radius: var(--radius-4xl); background: var(--muted-surface); }
.tf span, .tf button { border-radius: var(--radius-lg); padding: .3rem .7rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }
.tf span:hover, .tf button:hover { color: var(--foreground); }
.tf .on { background: color-mix(in oklch, var(--foreground) 14%, transparent); color: var(--foreground); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--foreground) 18%, transparent); }
.tabs2 { gap: 0; padding: 12px 14px 0; }
.tabs2 b, .tabs2 button { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: .5rem .9rem; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); }
.tabs2 b:hover, .tabs2 button:hover { color: var(--foreground); }
.tabs2 .on { color: var(--foreground); background: color-mix(in oklch, var(--foreground) 10%, transparent); }

/* Trades/holders table -> shadcn table; Type cells rendered as colored badges */
#feed, #holdersTable { font-size: .8125rem; }
#feed th, #holdersTable th { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: .75rem; color: var(--muted-foreground); }
#feed td.b-buy, #feed td.b-sell { white-space: nowrap; }
/* Type rendered as a filled badge (token.js wraps the Buy/Sell word in .tbadge). */
.tbadge { display: inline-flex; align-items: center; height: 1.25rem; padding: .125rem .5rem; border-radius: var(--radius-4xl); font-size: .6875rem; font-weight: 600; line-height: 1; }
.b-buy .tbadge { background: color-mix(in oklch, var(--primary) 18%, transparent); color: var(--primary); }
.b-sell .tbadge { background: color-mix(in oklch, var(--destructive) 18%, transparent); color: var(--destructive); }
.dev { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--primary), transparent 82%); color: var(--primary); border-color: transparent; font-weight: 500; }

/* Trade (swap) panel */
.trade { padding: 1.25rem; }
.seg { gap: 3px; padding: 3px; border-radius: var(--radius-4xl); background: var(--muted-surface); margin-bottom: 1rem; }
.seg button { border: 1px solid transparent; border-radius: var(--radius-xl); background: transparent; color: var(--muted-foreground); font-weight: 600; padding: .55rem; }
.seg button:hover { color: var(--foreground); }
.seg button.buy.on { background: color-mix(in oklch, var(--primary) 20%, transparent); border-color: color-mix(in oklch, var(--primary) 38%, transparent); color: var(--primary); }
.seg button.sell.on { background: color-mix(in oklch, var(--destructive) 20%, transparent); border-color: color-mix(in oklch, var(--destructive) 38%, transparent); color: var(--destructive); }
.field { background: color-mix(in oklch, var(--input), transparent 72%); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.field .in input { font-family: var(--font-heading); }
.field .in .cur { border-radius: var(--radius-4xl); background: var(--card); border-color: var(--border); }
.field .in .cur .d { background: color-mix(in oklch, var(--primary), transparent 82%); color: var(--primary); }
.field .in .cur .d svg { width: .75rem; height: .75rem; }
/* preset amount chips -> outline sm buttons */
.chips { gap: .5rem; }
.chips button { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); color: var(--foreground); font-weight: 500; padding: .45rem; }
.chips button:hover { color: var(--foreground); border-color: var(--border); background: color-mix(in oklch, var(--input), transparent 50%); }
.recv b { font-family: var(--font-heading); }
.line .slip { color: var(--foreground); border-bottom-color: var(--muted-foreground); }
.cta { border-radius: var(--radius-4xl); background: var(--primary); color: var(--primary-foreground); font-weight: 600; padding: .75rem; transition: background-color .15s; }
.cta:hover:not(:disabled) { background: color-mix(in oklch, var(--primary), transparent 18%); }
.cta.sell { background: var(--destructive); color: #230; color: color-mix(in oklch, var(--destructive), black 55%); }
.cta.ghost { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.pow { color: var(--muted-foreground); }

/* Launch protection banner */
.prot { border-radius: var(--radius-xl); background: color-mix(in oklch, var(--primary), transparent 86%); border-color: color-mix(in oklch, var(--primary), transparent 68%); }
.prot b { color: var(--primary); }
body.fresh .cta { background: var(--muted-surface); color: var(--muted-foreground); }

/* Info / fees / about cards */
.info h3 { font-family: var(--font-heading); font-size: .75rem; letter-spacing: .04em; color: var(--muted-foreground); text-transform: uppercase; }
.info .r { border-bottom: 1px solid var(--border); font-size: .8125rem; }
.info .r b { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.lock { color: var(--primary); }
.accrued .box { border-radius: var(--radius-xl); background: color-mix(in oklch, var(--input), transparent 72%); border-color: var(--border); }
.accrued .box .k { color: var(--muted-foreground); letter-spacing: .02em; }
.accrued .box .v { font-family: var(--font-heading); color: var(--primary); }
.editbtn { color: var(--primary); }
.editform input { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--input); }
.editform .act button { border-radius: var(--radius-4xl); border-color: var(--border); }
.editform .save { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.burned .ring b { color: var(--primary); }

/* Mobile: the KPI strip wraps to 2x2 instead of squeezing 4 cells into one row
   (components.css's flex-wrap:nowrap above would otherwise override app.css's wrap). */
@media (max-width: 640px) {
  .metrics { flex-wrap: wrap; }
  .met { flex: 1 1 calc(50% - .5px); border-left: 1px solid var(--border); }
  .met:nth-child(odd) { border-left: 0; }
  .met:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Connect gate dialog */
.gate-card { border-radius: var(--radius-2xl); background: var(--popover); border-color: var(--border); }
.gate-card h2 { font-family: var(--font-heading); }
.gate-links a { color: var(--primary); }
.gate-card label input { accent-color: var(--primary); }
.gate-actions .cta { border-radius: var(--radius-4xl); }
.gate-actions .ghost { border-radius: var(--radius-4xl); border-color: var(--border); color: var(--muted-foreground); }

/* ===================================================================================
   EXPLORE / BOARD (index.html) — search, sort pills, trending strip, card grid.
   =================================================================================== */
.search { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 72%); border-color: var(--input); color: var(--foreground); }
input.search::placeholder { color: var(--muted-foreground); }
input.search:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring), transparent 50%); }

.sec-h h2, .exp-h h2 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -.01em; }
/* Featured: an honest, quiet promoted-placement badge (not an acid shout) */
.sec-h .paid { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--primary) 16%, transparent); border-color: color-mix(in oklch, var(--primary) 30%, transparent); color: var(--primary); text-transform: none; letter-spacing: .01em; font-weight: 600; }
.sec-h .tag { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); color: var(--muted-foreground); text-transform: none; }
.sec-h .arrows span, .sec-h .arrows button { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); color: var(--muted-foreground); }
.sec-h .arrows button:hover { color: var(--foreground); }
.sec-h .arrows button svg { width: 1rem; height: 1rem; }

/* Sort row -> one segmented pill control (Pons period-tab style) */
.exp-h .pills { background: var(--muted-surface); padding: 3px; border-radius: var(--radius-4xl); gap: 3px; }
.pill { border: 1px solid transparent; border-radius: var(--radius-xl); background: transparent; color: var(--muted-foreground); font-weight: 600; padding: 7px 14px; }
.pill:hover { color: var(--foreground); }
.pill.on { background: color-mix(in oklch, var(--foreground) 12%, transparent); color: var(--foreground); border-color: color-mix(in oklch, var(--foreground) 16%, transparent); }
.exp-h .right .b { border-radius: var(--radius-4xl); background: color-mix(in oklch, var(--input), transparent 70%); border-color: var(--border); color: var(--foreground); font-weight: 500; }
.exp-h .right .b svg { width: .9375rem; height: .9375rem; }
.exp-h .right .b:hover { color: var(--foreground); background: color-mix(in oklch, var(--input), transparent 50%); }

/* Board cards: cleaner shadcn hierarchy — ticker as a badge, big Market-cap figure in
   Geist with a coloured 24h chip beside it, labelled graduation bar. */
/* Cards size to their own content: a CSS grid stretches every item to the tallest in the
   row by default, which left a dead gap at the bottom of shorter cards. */
.grid { align-items: start; }
/* Near-black card, separated by the border (Pons/pump use a transparent card on a black
   page; the shadcn Mist --card at lum 26 read as a lighter grey panel). A whisper of
   elevation over --background keeps a faint card surface. */
.card { border-radius: var(--radius-2xl); border-color: var(--card-edge); background: var(--card-surface); }
.card:hover { border-color: color-mix(in oklch, var(--primary) 40%, transparent); background: var(--card-surface-hover); }
/* Force block/flow layout: the generic `.body{display:grid;1fr 340px}` rule (the token
   page's two-column split) also matches `.card .body`, which gridded the card content. */
.card .body { display: flex; flex-direction: column; gap: 0; padding: 11px 12px 13px; }
.card .top { display: flex; align-items: center; gap: 7px; }
.card .top .name { font-family: var(--font-heading); font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card .top .ticker { margin-top: 0; flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); background: color-mix(in oklch, var(--input), transparent 66%); border: 1px solid var(--border); border-radius: var(--radius-4xl); padding: 1px 7px; }
.card .mc { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.card .mc b { font-family: var(--font-heading); color: var(--foreground); font-size: 16px; font-weight: 700; }
.card .mc .chg { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .mc .chg.up { color: var(--primary); }
.card .mc .chg.dn { color: var(--destructive); }
.card .gbar { background: var(--muted-surface); }
.card .gbar i { background: var(--primary); }
.card .glabel { color: var(--muted-foreground); }

/* Trending strip cards */
.tcard .img { border-radius: var(--radius-2xl); border-color: var(--border); }
.tcard .rank { border-radius: var(--radius-lg); background: color-mix(in oklch, var(--background), transparent 25%); color: var(--primary); border-color: color-mix(in oklch, var(--primary) 34%, transparent); }
.tcard .ov .nm b { color: var(--muted-foreground); }
.tcard .desc { color: var(--muted-foreground); }

/* Analytics: top-coins table */
.chart-h .tcnote { margin-left: auto; color: var(--muted-foreground); font-size: 12px; }
#topCoins { font-size: .8125rem; }
#topCoins th { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: .75rem; color: var(--muted-foreground); }
#topCoins td { color: var(--foreground); }
#topCoins td.up { color: var(--primary); }
#topCoins td.dn { color: var(--destructive); }
#topCoins .rankb { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: var(--radius-lg); background: color-mix(in oklch, var(--primary) 16%, transparent); color: var(--primary); border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent); font-weight: 600; font-size: .6875rem; font-variant-numeric: tabular-nums; }
#topCoins .tcoin { color: var(--foreground); text-decoration: none; font-weight: 500; }
#topCoins .tcoin span { color: var(--muted-foreground); font-weight: 500; margin-left: .35rem; }
#topCoins .tcoin:hover { color: var(--primary); }

/* Disabled buttons read as a muted/outline shadcn control, not a faded primary. */
.cta:disabled, .cta[disabled] { background: var(--muted-surface); color: var(--muted-foreground); border: 1px solid var(--card-edge); opacity: 1; cursor: not-allowed; }
.cta.sell:disabled { background: var(--muted-surface); color: var(--muted-foreground); }

/* Trending card description clamps to a single line (was wrapping and overflowing). */
.tcard .desc { height: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trending strip: a seamless right-to-left marquee (board.js's renderTrend duplicates the
   cards into .tmarquee-track; -50% moves exactly one copy because each card unit is identical:
   gap 0 + a fixed per-card right margin). Pauses on hover so a card stays clickable; stops and
   falls back to a plain scrollable strip under prefers-reduced-motion. */
.trend { overflow: hidden; }
.tmarquee-track { display: flex; flex-wrap: nowrap; gap: 0; width: max-content; animation: tmarquee 50s linear infinite; will-change: transform; }
.tmarquee-track .tcard { margin-right: 16px; }
.tmarquee-dup { display: contents; }
.trend:hover .tmarquee-track { animation-play-state: paused; }
@keyframes tmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tmarquee-track { animation: none; }
  .trend { overflow-x: auto; }
}
@media (max-width: 640px) { .tmarquee-track .tcard { margin-right: 12px; } }

/* ===================================================================================
   SITE FOOTER (injected by js/footer.js into every page's <main>)
   =================================================================================== */
.ui-footer { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--card-edge); }
.ui-footer .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.ui-footer .col h4 { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--foreground); letter-spacing: .01em; margin-bottom: 10px; }
.ui-footer .col a { display: block; color: var(--muted-foreground); text-decoration: none; font-size: 13px; padding: 4px 0; width: fit-content; }
.ui-footer .col a:hover { color: var(--foreground); }
.ui-footer .base { display: flex; align-items: center; gap: 9px; margin-top: 26px; padding: 16px 0 10px; border-top: 1px solid var(--card-edge); color: var(--muted-foreground); font-size: 12px; flex-wrap: wrap; }
.ui-footer .base .mk { width: 20px; height: 20px; border-radius: 6px; background: url(../assets/riff-mark.png) center/128% no-repeat; flex: 0 0 auto; }
.ui-footer .base .nm { color: var(--foreground); font-weight: 600; }
.ui-footer .base .dis { margin-left: auto; color: var(--muted-foreground); }
@media (max-width: 640px) {
  .ui-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-footer .base .dis { margin-left: 0; flex-basis: 100%; }
}