/* ==========================================================================
   PAYR — application styles
   ========================================================================== */

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

/* html carries the flat ground so body's own background does not propagate to
   the canvas — which would stretch it to the viewport instead of the document. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--face);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /*
   * The page IS the mark.
   *
   * assets/payr.png is one vertical sweep — deep blue at the crown, aqua at
   * the waist, orange and gold at the foot — and this is that sweep sized to
   * the whole document, so scrolling the site really does walk the logo from
   * top to bottom. The stops are the mark's own colours mixed down over
   * near-black: that mix is what holds body copy at contrast while every hue
   * stays exactly true to the file it was sampled from.
   */
  background: var(--sweep-ground);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* The banner's light laid over the sweep: sun from above, turquoise off to one
   side, warm stone glowing at the foot. Fixed, so it reads as light in the room
   rather than as another layer of paint on the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 520px at 50% -220px, rgb(0 148 235 / 0.26), transparent 72%),
    radial-gradient(820px 460px at 92% 10%, rgb(60 238 232 / 0.11), transparent 68%),
    radial-gradient(980px 560px at 6% 100%, rgb(244 175 49 / 0.12), transparent 72%);
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgb(46 200 236 / 0.28); }

/* --------------------------------------------------------------- scaffold */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) { .shell { padding-inline: 24px; } }

main { padding-bottom: 72px; }

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

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--chrome) 84%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line-soft);
}
/* The whole mark, two pixels tall, under the header. */
.hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sweep-line);
}
.hdr__in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand__mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  flex: none;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10), 0 2px 10px -3px rgb(27 138 237 / 0.7);
}
.brand__word {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.brand__word span {
  font-weight: 600;
  background: var(--sweep-line);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hdr__spacer { flex: 1 1 auto; }
.hdr__acts { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding-inline: 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), color var(--fast), border-color var(--fast),
              transform var(--fast), box-shadow var(--fast);
}
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn--primary {
  background: var(--grad-action);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { background: var(--grad-action); filter: brightness(1.07); color: var(--on-accent); }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--line-strong); }

.btn--icon { width: 34px; padding: 0; flex: none; }

.btn--lg { height: 42px; padding-inline: 20px; font-size: 15px; }

.btn svg { flex: none; }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  margin-top: 16px;
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  overflow: hidden;
  isolation: isolate;
}
/* The mark's full sweep, drawn as the hero's own edge. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: var(--sweep-line);
  opacity: 0.6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* The temple sits behind the headline, tinted to the ground so it reads as
   texture and not as a photograph pasted on. */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/payr-banner.png");
  background-size: cover;
  background-position: 62% 42%;
  opacity: 0.30;
  filter: saturate(0.86) contrast(1.02);
  mask-image: linear-gradient(100deg, transparent 6%, rgb(0 0 0 / 0.55) 44%, #000 82%);
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgb(0 0 0 / 0.55) 44%, #000 82%);
}
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, var(--surface) 16%, color-mix(in srgb, var(--surface) 72%, transparent) 44%, transparent 74%),
    linear-gradient(180deg, rgb(4 16 29 / 0.30), rgb(4 16 29 / 0.62));
}
.hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 24px;
  padding: 28px 20px;
}
@media (min-width: 900px) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: center;
    gap: 32px;
    padding: 40px 32px;
    min-height: 268px;
  }
}
.hero h1 {
  font-size: clamp(30px, 5.4vw, 48px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.055em;
  max-width: 12ch;
  text-wrap: balance;
}
/* The word the product turns on, painted in the mark itself. */
.hero h1 em {
  font-style: normal;
  background: var(--sweep-line);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Safari drops the fill on a clipped gradient without an explicit one. */
  -webkit-text-fill-color: transparent;
}
.hero p {
  margin-top: 14px;
  max-width: 44ch;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}
.hero__cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

/* the featured-launch card that floats over the art */
.feat {
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px;
  box-shadow: var(--shadow-pop);
  transition: border-color var(--fast), transform var(--fast);
}
a.feat:hover { border-color: var(--accent); transform: translateY(-2px); }
.feat__top { display: flex; align-items: center; gap: 10px; }
.feat__name { font-size: 14px; font-weight: 700; }
.feat__name span { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.feat__pair {
  margin-top: 3px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-3);
}
.feat__foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.feat__cap { font-size: 19px; font-weight: 700; letter-spacing: -0.04em; }
.feat__cap span { margin-left: 6px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

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

.controls {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}
.search svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--fast), background var(--fast);
}
.search input::placeholder { color: var(--ink-4); }
.search input:hover { border-color: var(--line-strong); }
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }

.seg { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.seg__label { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.seg button {
  height: 32px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.seg button:hover { color: var(--ink); background: var(--surface); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }

.filters {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filters__label { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.chip {
  height: 32px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.chip__n { margin-left: 6px; font-size: 11px; color: var(--ink-4); font-weight: 600; }
.chip[aria-pressed="true"] .chip__n { color: var(--accent-dim); }

/* ------------------------------------------------------------------- grid */

.sect-h {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sect-h h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.sect-h__note { font-size: 12px; color: var(--ink-4); }

.grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tok {
  position: relative;
  display: block;
  min-height: 188px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
@media (min-width: 640px) { .tok { min-height: 224px; padding: 20px; } }
.tok:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* the oversized avatar that bleeds out of the bottom-right corner */
.tok__halo {
  position: absolute;
  right: -14px; bottom: -26px;
  width: 128px; height: 128px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-soft);
  transition: border-color var(--fast);
  z-index: 0;
}
@media (min-width: 640px) { .tok__halo { right: -18px; bottom: -32px; width: 176px; height: 176px; padding: 16px; } }
.tok:hover .tok__halo { border-color: var(--line-strong); }
.tok__halo > * {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.06);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tok__halo img { width: 72%; height: 72%; border-radius: 50%; object-fit: cover; opacity: 0.55; }
.tok__halo .mono { font-size: 26px; opacity: 0.5; }

.tok__row { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tok__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tok__body { position: relative; z-index: 1; margin-top: 14px; }
.tok__sym { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.tok__nm { margin-top: 1px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.tok__cap { margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.045em; }
.tok__pair { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.tok__foot {
  position: relative; z-index: 1;
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-4);
}

/* --------------------------------------------------------------- fragments */

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--accent-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--36 { width: 36px; height: 36px; }
.avatar--44 { width: 44px; height: 44px; font-size: 13px; }
.avatar--14 { width: 14px; height: 14px; font-size: 6px; border-width: 0; }
.avatar--20 { width: 20px; height: 20px; font-size: 8px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  color: var(--accent-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--gold { border-color: rgb(244 175 49 / 0.45); background: rgb(244 175 49 / 0.12); color: var(--sweep-9); }
.tag--flat { border-color: var(--line); background: transparent; color: var(--ink-3); }

.pill {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
  color: var(--accent-dim);
  flex: none;
}
.pill--gold { border-color: rgb(244 175 49 / 0.4); background: rgb(244 175 49 / 0.1); color: var(--sweep-9); }

.ca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding-inline: 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg-soft) 80%, transparent);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.ca:hover { color: var(--accent-dim); border-color: var(--accent); background: var(--surface-2); }
.ca[data-blank="1"] { cursor: default; opacity: 0.55; }
.ca[data-blank="1"]:hover { color: var(--ink-3); border-color: var(--line); background: color-mix(in srgb, var(--bg-soft) 80%, transparent); }

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

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  flex: none;
  box-shadow: 0 0 0 3px rgb(62 224 168 / 0.16);
}
.dot--warn { background: var(--sweep-9); box-shadow: 0 0 0 3px rgb(244 175 49 / 0.16); }
.dot--off  { background: var(--ink-4); box-shadow: 0 0 0 3px rgb(95 125 147 / 0.14); }

/* ------------------------------------------------------------------ empty */

.empty {
  margin-top: 14px;
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  text-align: center;
}
.empty h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.empty p { margin-top: 8px; color: var(--ink-3); font-size: 13px; max-width: 52ch; margin-inline: auto; line-height: 1.65; }
.empty__cmd {
  margin: 16px auto 0;
  max-width: 560px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
  overflow-x: auto;
  white-space: pre;
}

/* --------------------------------------------------------------- pagination */

.pager {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.pager__n { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

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

.ftr {
  position: relative;
  margin-top: 8px;
  border-top: 0;
  background: color-mix(in srgb, var(--chrome) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ftr::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--sweep-line);
  opacity: 0.8;
}
.ftr__in {
  min-height: 64px;
  padding-block: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.ftr__brand { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.ftr__brand img { width: 20px; height: 20px; border-radius: 6px; }
.ftr nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-left: auto; }
.ftr a, .ftr .ftr__blank {
  font-size: 13px;
  color: var(--ink-3);
  transition: color var(--fast);
}
.ftr a:hover { color: var(--ink); }
.ftr .ftr__blank { cursor: default; opacity: 0.55; }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  z-index: 90;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.toast[data-on="1"] { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------------------- skeleton */

@keyframes shimmer { 100% { background-position: 200% 0; } }
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 8%, var(--surface-3) 22%, var(--surface-2) 36%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  * { transition-duration: 1ms !important; }
}

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

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

.hdr__nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
}
@media (min-width: 860px) { .hdr__nav { display: flex; } }
.hdr__nav a {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  transition: color var(--fast), background var(--fast);
}
.hdr__nav a:hover { color: var(--ink); background: var(--surface); }
.hdr__nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }

.btn.is-on { border-color: var(--accent); color: var(--accent-dim); }

.hide-sm { display: none; }
@media (min-width: 560px) { .hide-sm { display: inline; } }

/* ------------------------------------------------------------------ forms */

.page-h { margin-top: 28px; }
.page-h h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -0.045em; }
.page-h p { margin-top: 10px; max-width: 62ch; color: var(--ink-2); font-size: 14px; line-height: 1.65; }

.cols { margin-top: 24px; display: grid; gap: 20px; align-items: start; }
@media (min-width: 940px) { .cols { grid-template-columns: minmax(0, 1fr) 336px; gap: 24px; } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Translucent, so the page's sweep tints each card by where it sits: one
     near the top stays blue, one near the foot picks up gold. */
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: 18px;
}
.card + .card { margin-top: 16px; }
.card > h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.card > h2 + p, .card > p.hint { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

.card--sticky { position: sticky; top: calc(var(--header-h) + 16px); }

.field { margin-top: 14px; }
.field > label, .field > .lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field input[type="text"], .field input[type="number"], .field input[type="url"], .field textarea, .field select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color var(--fast), background var(--fast);
}
.field textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field input::placeholder { color: var(--ink-4); }
.field__note { margin-top: 5px; font-size: 11.5px; color: var(--ink-4); }
.field__note.is-bad { color: var(--down); }

.field__row { display: flex; gap: 10px; }
.field__row > * { flex: 1 1 0; min-width: 0; }

.tiers { margin-top: 12px; display: flex; gap: 8px; }
.tier {
  flex: 1 1 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.tier:hover { border-color: var(--line-strong); }
.tier[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.tier small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--ink-4); }
.tier[aria-pressed="true"] small { color: var(--accent-dim); }

/* quote-asset picker */
.qtabs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.qtab {
  height: 28px; padding-inline: 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.qtab:hover { color: var(--ink); border-color: var(--line-strong); }
.qtab[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.qtab span { margin-left: 5px; color: var(--ink-4); font-size: 11px; }

.qlist {
  margin-top: 12px;
  max-height: 292px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.qrow {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; color: inherit;
  text-align: left; cursor: pointer;
  transition: background var(--fast);
}
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: var(--surface); }
.qrow[aria-pressed="true"] { background: var(--accent-soft); }
.qrow__sym { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.qrow__nm { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow__meta { margin-left: auto; text-align: right; flex: none; }
.qrow__px { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qrow__dp { font-size: 10.5px; color: var(--ink-4); }

/* summary */
.sum { margin-top: 12px; }
.sum__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.sum__row:last-child { border-bottom: 0; }
.sum__k { color: var(--ink-3); }
.sum__v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sum__v small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-4); }

.notes { margin-top: 14px; display: grid; gap: 8px; }
.note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; color: var(--ink-3); line-height: 1.55;
}
.note > span:first-child { color: var(--accent); flex: none; margin-top: 1px; }
.note--warn > span:first-child { color: var(--sweep-9); }

.banner {
  margin-top: 16px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.banner > span:first-child { color: var(--accent); flex: none; margin-top: 1px; }
.banner--warn { border-color: rgb(244 175 49 / 0.4); background: rgb(244 175 49 / 0.08); }
.banner--warn > span:first-child { color: var(--sweep-9); }
.banner code { font-family: var(--mono); font-size: 11.5px; color: var(--accent-dim); }

.calldata {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3);
  word-break: break-all;
  max-height: 132px;
  overflow-y: auto;
}

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

.crumb { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-4); }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }

.thead { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.thead__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thead h1 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.045em; }
.thead__sub { margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.thead__acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.stats { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.stat__k { font-size: 12px; color: var(--ink-3); }
.stat__v { margin-top: 5px; font-size: clamp(18px, 2.4vw, 23px); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat__n { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }

.kv { margin-top: 12px; display: grid; gap: 0; }
.kv__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--ink-3); flex: none; }
.kv__v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; word-break: break-all; }
.kv__v a { color: var(--accent-dim); }
.kv__v a:hover { text-decoration: underline; }

.bar {
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.bar > i { display: block; height: 100%; background: var(--grad-action); border-radius: 999px; }

.range {
  position: relative;
  margin-top: 14px;
  height: 44px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
}
.range__fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(46 200 236 / 0.16), rgb(244 175 49 / 0.16)); }
.range__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); box-shadow: 0 0 12px 2px rgb(244 175 49 / 0.5); }
.range__lbl { position: absolute; bottom: 5px; font-size: 10px; color: var(--ink-4); }

/* ------------------------------------------------------ explainer + ranks */

.steps { margin-top: 14px; display: grid; gap: 2px; }
.step {
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 0; }
.step__n {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 11px; font-weight: 700;
}
.step__ico { color: var(--accent); margin-top: 2px; }
.step__t { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.step__d { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

.rank {
  margin-top: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.rank__row {
  display: grid;
  grid-template-columns: 26px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--fast);
}
@media (min-width: 700px) { .rank__row { grid-template-columns: 26px 36px minmax(0, 1fr) 120px 150px; } }
.rank__row:last-child { border-bottom: 0; }
.rank__row:hover { background: var(--surface-2); }
.rank__n { font-size: 12px; font-weight: 700; color: var(--ink-4); text-align: center; }
.rank__id { min-width: 0; }
.rank__sym { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.rank__sym span { color: var(--ink-3); font-weight: 500; }
.rank__nm { display: block; font-size: 11.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__cap { font-size: 14px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; }
.rank__w { display: none; }
@media (min-width: 700px) { .rank__w { display: block; } }
.rank__wbar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.rank__wbar > i { display: block; height: 100%; background: var(--grad-action); border-radius: 999px; }
.rank__wn { display: block; margin-top: 4px; font-size: 10.5px; color: var(--ink-4); text-align: right; }

/* -------------------------------------------------------------------- code */

.code {
  margin-top: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
  tab-size: 2;
}
.card code, .note code, .banner code, .kv code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--accent-dim);
}
.kv__v.mono { font-family: var(--mono); font-size: 11.5px; font-weight: 500; }

/* ------------------------------------------------------------------ marks */

/* A verified logo sits on a light disc: most brand marks are drawn for white
   and vanish against this ground. */
.avatar--logo {
  background: #f4f7fa;
  border-color: rgba(255, 255, 255, 0.16);
}
.avatar--logo img {
  inset: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
}

/* A designed chip carries its own gradient, set inline from the brand colour. */
.avatar--chip {
  border-width: 1px;
  border-style: solid;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* The oversized art bleeding out of a card corner. */
.tok__halo img { object-fit: contain; opacity: 0.42; }