/* ==========================================================================
   AVENLEO — COMPONENTS
   ==========================================================================
   Every reusable primitive in the product. Single-class selectors, so
   specificity stays flat and a page can always override without a war.

   Depends on tokens.css + base.css.

   Three decisions run through the whole file
   ------------------------------------------
   • An element is defined by its EDGE, not its fill. Borders and dividers do
     the structural work; fills stay near the page colour. This is why nothing
     here has a gradient background any more.

   • Interactive states change COLOUR, not POSITION. The old library lifted
     buttons and cards a few pixels on hover. It reads as playful on a landing
     page and as unstable on a screen where the next click moves money, and it
     costs a layout-adjacent repaint on every pointer move.

   • Density is the default. Padding, control heights and icon sizes all came
     down a step. A screen that fits its content without scrolling is worth
     more than a screen with generous whitespace around half of it.
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.display-lg { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
.display-md { font-size: var(--text-4xl); letter-spacing: var(--tracking-tighter); }

/* The overline above a section title. Small, spaced, and never coloured unless
   it is genuinely categorising something — a decorative accent here is the
   fastest way to make a page look like a template. */
.eyebrow {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.eyebrow--accent  { color: var(--color-accent); }
.eyebrow--primary { color: var(--color-primary-fg); }
.eyebrow--muted   { color: var(--color-text-subtle); }

.lede { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.muted  { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }
.faint  { color: var(--color-text-faint); }

.mono { font-family: var(--font-mono); font-size: 0.94em; }
.tnum { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- FIGURES ---
   The one place the product raises its voice. A balance is set in the same
   family as everything else, one weight heavier, with the tracking pulled in
   and the figures locked to a common width so a number that changes does not
   shift the layout around it. */
.metric {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01" 1;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  color: var(--color-text);
}
.metric-sm { font-size: var(--text-xl); }
.metric-md { font-size: var(--text-2xl); }
.metric-lg { font-size: var(--text-3xl); }
.metric-xl { font-size: var(--text-4xl); }
.metric__unit {
  font-size: 0.52em;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-subtle);
  margin-left: 0.2em;
}
.metric--accent { color: var(--color-accent-strong); }

/* ------------------------------------------------------------- BRAND MARK ---
   The Avenleo tile, in one place. It used to be an inline style repeated in
   fourteen files, each carrying a gradient and a glow; it is now a flat token
   surface with a hairline edge, and changing it is one rule. */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  flex: none;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: var(--edge-highlight);
}
.brand-mark .icon { width: 16px; height: 16px; color: currentColor; }
.brand-mark--sm { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.brand-mark--sm .icon { width: 14px; height: 14px; }
.brand-mark--lg { width: 40px; height: 40px; border-radius: var(--radius-lg); }
.brand-mark--lg .icon { width: 21px; height: 21px; }
.brand-mark--xl { width: 52px; height: 52px; border-radius: var(--radius-xl); }
.brand-mark--xl .icon { width: 26px; height: 26px; }
/* The quiet variant: same tile, no fill. For pages where the mark is
   decoration rather than the brand's one appearance. */
.brand-mark--soft {
  background: var(--color-primary-soft);
  color: var(--color-primary-fg);
  box-shadow: inset 0 0 0 1px var(--color-primary-border);
}

.brand-word {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --_bg: var(--color-surface-2);
  --_fg: var(--color-text);
  --_bd: var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  white-space: nowrap;
  padding: 0 var(--space-4);
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  cursor: pointer;
  user-select: none;
  position: relative;
  /* Colour only. Nothing here moves. */
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; flex: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* --- variants ------------------------------------------------------------
   Exactly one of these is loud. Everything else is a surface with an edge, so
   the primary action on a screen is unmistakable without being large. */
.btn--primary {
  --_bg: var(--color-primary);
  --_fg: var(--color-primary-contrast);
  --_bd: transparent;
  font-weight: var(--weight-semibold);
}
.btn--primary:hover  { --_bg: var(--color-primary-hover); }
.btn--primary:active { --_bg: var(--color-primary-active); }

.btn--accent {
  --_bg: var(--color-accent);
  --_fg: var(--color-accent-contrast);
  --_bd: transparent;
  font-weight: var(--weight-semibold);
}
.btn--accent:hover { --_bg: var(--color-accent-strong); }

.btn--secondary { --_bg: var(--color-surface-2); --_fg: var(--color-text); --_bd: var(--color-border-strong); }
.btn--secondary:hover { --_bg: var(--color-surface-3); }

.btn--outline { --_bg: transparent; --_fg: var(--color-text); --_bd: var(--color-border-strong); }
.btn--outline:hover { --_bg: var(--color-surface-2); --_bd: var(--color-text-faint); }

.btn--ghost { --_bg: transparent; --_fg: var(--color-text-muted); --_bd: transparent; }
.btn--ghost:hover { --_bg: var(--color-surface-2); --_fg: var(--color-text); }

.btn--soft { --_bg: var(--color-primary-soft); --_fg: var(--color-primary-fg); --_bd: transparent; }
.btn--soft:hover { --_bg: var(--color-primary-soft-hover); }

.btn--danger { --_bg: transparent; --_fg: var(--color-danger); --_bd: var(--color-danger-border); }
.btn--danger:hover { --_bg: var(--color-danger-soft); }

.btn--success { --_bg: transparent; --_fg: var(--color-success); --_bd: var(--color-success-border); }
.btn--success:hover { --_bg: var(--color-success-soft); }

/* --- sizes --------------------------------------------------------------- */
.btn--xs { height: 26px; padding: 0 var(--space-2); font-size: var(--text-2xs); border-radius: var(--radius-sm); gap: var(--space-1); }
.btn--xs .icon { width: 13px; height: 13px; }
.btn--sm { height: 31px; padding: 0 var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn--sm .icon { width: 14px; height: 14px; }
.btn--lg { height: 42px; padding: 0 var(--space-5); font-size: var(--text-base); border-radius: var(--radius-md); }
.btn--lg .icon { width: 17px; height: 17px; }
.btn--xl { height: 48px; padding: 0 var(--space-6); font-size: var(--text-md); border-radius: var(--radius-lg); }

.btn--block { display: flex; width: 100%; }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--xs { width: 26px; }
.btn--icon.btn--sm { width: 31px; }
.btn--icon.btn--lg { width: 42px; }

/* --- loading -------------------------------------------------------------- */
.btn--loading { color: transparent !important; pointer-events: none; }
.btn--loading::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--_fg);
  animation: spin 0.62s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A link that behaves like a link. Used wherever a button would be too much. */
.link {
  color: var(--color-primary-fg);
  font-weight: var(--weight-medium);
  text-underline-offset: 2px;
}
.link:hover { text-decoration: underline; }

/* Two momentary states app.js and the workspace toggle on controls. They were
   being set on elements nothing styled, so pressing Copy confirmed nothing and
   rating an answer left no trace. */
.is-copied { --_fg: var(--color-success); --_bd: var(--color-success-border); }
.is-active { --_bg: var(--color-primary-soft); --_fg: var(--color-primary-fg); }

/* ==========================================================================
   BADGES / STATUS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.badge .icon { width: 12px; height: 12px; }
.badge--primary { background: var(--color-primary-soft); color: var(--color-primary-fg); border-color: var(--color-primary-border); }
.badge--accent  { background: var(--color-accent-soft);  color: var(--color-accent-strong); border-color: var(--color-accent-border); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-border); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger);  border-color: var(--color-danger-border); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info);    border-color: var(--color-info-border); }
.badge--solid   { background: var(--color-primary); color: var(--color-primary-contrast); border-color: transparent; }
.badge--pill    { border-radius: var(--radius-full); padding: 3px 9px; }

.badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

/* The status pill on a deposit or a withdrawal. The dot used to ping outward
   forever; a permanent animation on a financial state is noise, so it is now a
   dot that simply is the colour of the state it reports. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  padding: 3px 9px 3px 7px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status--pending    { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning-border); }
.status--confirming { color: var(--color-info);    background: var(--color-info-soft);    border-color: var(--color-info-border); }
.status--confirmed,
.status--success    { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-success-border); }
.status--failed     { color: var(--color-danger);  background: var(--color-danger-soft);  border-color: var(--color-danger-border); }

/* "Live" is the one case where movement carries information: it says the
   figure beside it is still arriving. A slow fade, not a radar sweep. */
.status--live .status__dot { animation: breathe 2.4s var(--ease-in-out) infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip .icon { width: 14px; height: 14px; }
.chip--selectable { cursor: pointer; }
.chip--selectable:hover { background: var(--color-surface-3); color: var(--color-text); }
.chip[aria-pressed="true"], .chip--active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
  color: var(--color-primary-fg);
}
.chip__remove { display: inline-flex; margin-right: -4px; opacity: 0.55; border-radius: 50%; }
.chip__remove:hover { opacity: 1; }
.chip__remove .icon { width: 13px; height: 13px; }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.label__optional { font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.label__required { color: var(--color-danger); }
.hint { font-size: var(--text-xs); color: var(--color-text-subtle); line-height: var(--leading-snug); }
.field__error { font-size: var(--text-xs); color: var(--color-danger); display: flex; align-items: center; gap: var(--space-1); }
.field__error .icon { width: 13px; height: 13px; }

.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 38px;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.textarea { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; line-height: var(--leading-normal); }
.input::placeholder, .textarea::placeholder { color: var(--color-text-faint); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.5; cursor: not-allowed; }
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--color-danger); }
.field--error .input:focus, .field--error .textarea:focus { box-shadow: 0 0 0 3px var(--color-danger-soft); }
.input--sm { height: 32px; font-size: var(--text-sm); }
.input--lg { height: 44px; font-size: var(--text-md); }

.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737B8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
/* A select sitting in a settings row rather than filling a form field. Matches
   the height of the .btn--sm buttons the other rows put in the same slot. */
.select--sm {
  height: 31px; /* .btn--sm */
  padding-left: var(--space-3);
  padding-right: var(--space-7);
  font-size: var(--text-xs);
  background-position: right var(--space-2) center;
  width: auto;
}

/* input group: leading / trailing adornments */
.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { flex: 1; }
.input-group__addon {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3);
  color: var(--color-text-subtle);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.input-group__addon .icon { width: 15px; height: 15px; }
.input-group__addon--lead  { border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group__addon--trail { border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group__addon--lead + .input { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group .input:has(+ .input-group__addon--trail) { border-radius: var(--radius-md) 0 0 var(--radius-md); }

.input-icon { position: relative; }
.input-icon .icon-lead {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--color-text-faint); pointer-events: none;
}
.input-icon .input { padding-left: calc(var(--space-3) + 24px); }

/* checkbox + radio */
.check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--color-text); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 17px; height: 17px; margin-top: 1px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check__box .icon { width: 11px; height: 11px; color: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.check input:checked + .check__box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.check--radio .check__box { border-radius: 50%; }
.check--radio .check__box::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.check--radio input:checked + .check__box::after { opacity: 1; }
.check--radio input:checked + .check__box .icon { display: none; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 36px; height: 20px; border-radius: var(--radius-full);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
  position: relative; flex: none;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.switch input:checked + .switch__track::after { transform: translateX(16px); background: #fff; }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* ==========================================================================
   CARDS
   --------------------------------------------------------------------------
   One surface, one hairline, 20px of padding. The old card carried a gradient
   overlay, an 18px radius and 24px of padding, which made four of them fill a
   screen that should hold eight.
   ========================================================================== */
.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  position: relative;
  padding: var(--space-5);
  box-shadow: var(--edge-highlight);
}
/* Cards built from header/body/footer pad through those instead. */
.card:has(.card__header), .card:has(.card__body), .card:has(.card__footer) { padding: 0; }
.card--pad   { padding: var(--space-6); }
.card--tight { padding: var(--space-4); }
.card--flush { border: none; background: transparent; padding: 0; box-shadow: none; }

.card--interactive {
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.card--interactive:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }

/* The one emphasised card per screen: a left rule, not a tinted panel. */
.card--marked { border-left: 2px solid var(--color-primary); }
.card--accent { border-color: var(--color-accent-border); }
.card--danger { border-color: var(--color-danger-border); }

.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
}
.card__subtitle { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: 2px; }
.card__body   { padding: var(--space-5); }
.card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-3);
}

/* --- stat ---------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.stat__icon {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}
.stat__icon .icon { width: 15px; height: 15px; }
.stat__icon--primary { background: var(--color-primary-soft); color: var(--color-primary-fg); border-color: var(--color-primary-border); }
.stat__icon--accent  { background: var(--color-accent-soft);  color: var(--color-accent-strong); border-color: var(--color-accent-border); }
.stat__icon--success { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-border); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
}
.stat__foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: var(--weight-medium); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.delta .icon { width: 12px; height: 12px; }
.delta--up   { color: var(--color-success); }
.delta--down { color: var(--color-danger); }
.delta--flat { color: var(--color-text-subtle); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-wrap {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-1);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table thead th {
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table--hover tbody tr:hover { background: var(--color-surface-2); }
.table--compact thead th { padding: var(--space-2) var(--space-3); }
.table--compact tbody td { padding: var(--space-2) var(--space-3); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__cell-strong { font-weight: var(--weight-medium); }
.table__cell-sub { color: var(--color-text-subtle); font-size: var(--text-xs); }

/* ==========================================================================
   TABS + SEGMENTED
   ========================================================================== */
.tabs { display: flex; align-items: center; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.tab {
  position: relative;
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  background: none;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.tab .icon { width: 15px; height: 15px; }
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); }
.tab__count {
  font-size: var(--text-2xs);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.tab[aria-selected="true"] .tab__count { background: var(--color-primary-soft); color: var(--color-primary-fg); }

.segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.segmented__item {
  padding: 5px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
}
.segmented__item:hover { color: var(--color-text); }
.segmented__item[aria-selected="true"] {
  background: var(--color-surface-1);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.progress { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--color-surface-3); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: var(--color-primary); transition: width var(--dur-slow) var(--ease-out); }
.progress__bar--accent  { background: var(--color-accent); }
.progress__bar--success { background: var(--color-success); }
.progress--sm { height: 3px; }
.progress--lg { height: 8px; }
.progress--indeterminate .progress__bar { width: 30% !important; animation: indeterminate 1.2s var(--ease-in-out) infinite; }
@keyframes indeterminate { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* ring — set --value: 0..100 */
.ring {
  --value: 0; --size: 72px; --thick: 5px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--color-primary) calc(var(--value) * 1%), var(--color-surface-3) 0);
}
.ring::before { content: ""; position: absolute; inset: var(--thick); border-radius: 50%; background: var(--color-surface-1); }
.ring__label {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
}
.ring--accent { background: conic-gradient(var(--color-accent) calc(var(--value) * 1%), var(--color-surface-3) 0); }

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  position: relative;
}
.alert__icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--color-text-subtle); }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: 2px; }
.alert__text { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.alert__close { flex: none; margin: -3px -3px 0 0; color: var(--color-text-subtle); border-radius: var(--radius-sm); }
.alert__close:hover { color: var(--color-text); }
.alert--info    { border-color: var(--color-info-border);    background: var(--color-info-soft); }
.alert--info .alert__icon { color: var(--color-info); }
.alert--success { border-color: var(--color-success-border); background: var(--color-success-soft); }
.alert--success .alert__icon { color: var(--color-success); }
.alert--warning { border-color: var(--color-warning-border); background: var(--color-warning-soft); }
.alert--warning .alert__icon { color: var(--color-warning); }
.alert--danger  { border-color: var(--color-danger-border);  background: var(--color-danger-soft); }
.alert--danger .alert__icon { color: var(--color-danger); }

/* ==========================================================================
   TOASTS   (driven by app.js -> window.toast)
   ========================================================================== */
.toast-region {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(340px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-elevated);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast--out { animation: toast-out var(--dur-fast) var(--ease-in-out) forwards; }
.toast__icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--color-text-subtle); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.toast__msg { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; line-height: var(--leading-snug); }
.toast__close { flex: none; color: var(--color-text-faint); margin: -1px -2px 0 0; }
.toast__close:hover { color: var(--color-text); }
.toast--success .toast__icon { color: var(--color-success); }
.toast--danger  .toast__icon { color: var(--color-danger); }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info    .toast__icon { color: var(--color-info); }
.toast--reward  .toast__icon { color: var(--color-accent-strong); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(4px); } }

/* ==========================================================================
   MODAL / DIALOG
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--color-scrim);
  display: grid; place-items: center; padding: var(--space-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.overlay[data-open="true"] { opacity: 1; visibility: visible; }
.modal {
  width: min(480px, 100%);
  max-height: calc(100dvh - 2 * var(--space-6));
  background: var(--color-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(8px);
  transition: transform var(--dur-base) var(--ease-out);
}
.overlay[data-open="true"] .modal { transform: none; }
.modal--sm { width: min(400px, 100%); }
.modal--lg { width: min(660px, 100%); }
.modal__header { padding: var(--space-5) var(--space-5) var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.modal__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.modal__desc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; line-height: var(--leading-snug); }
.modal__body { padding: 0 var(--space-5) var(--space-2); overflow-y: auto; }
.modal__footer {
  padding: var(--space-4) var(--space-5);
  display: flex; gap: var(--space-2); justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}
.modal__close { flex: none; color: var(--color-text-faint); border-radius: var(--radius-sm); margin: -4px -4px 0 0; }
.modal__close:hover { color: var(--color-text); background: var(--color-surface-2); }

/* ==========================================================================
   DRAWER
   ========================================================================== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--color-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.drawer-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer);
  width: min(400px, 100%);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.drawer-overlay[data-open="true"] .drawer { transform: none; }
.drawer--left { right: auto; left: 0; border-left: none; border-right: 1px solid var(--color-border-strong); transform: translateX(-100%); }
.drawer__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.drawer__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
.drawer__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-2); }

/* ==========================================================================
   MENU / POPOVER
   ========================================================================== */
.menu {
  min-width: 200px; padding: var(--space-1);
  background: var(--color-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.menu__label {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.menu__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--color-text);
  text-align: left; width: 100%;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu__item:hover, .menu__item:focus-visible { background: var(--color-surface-2); }
.menu__item .icon { width: 15px; height: 15px; color: var(--color-text-subtle); flex: none; }
.menu__item--danger { color: var(--color-danger); }
.menu__item--danger .icon { color: var(--color-danger); }
.menu__item--danger:hover { background: var(--color-danger-soft); }
.menu__item__meta { margin-left: auto; font-size: var(--text-2xs); color: var(--color-text-faint); }
.menu__divider { height: 1px; background: var(--color-border); margin: var(--space-1) calc(var(--space-1) * -1); }

.popover-anchor { position: relative; }
.popover {
  position: absolute; z-index: var(--z-tooltip);
  top: calc(100% + 6px); right: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.popover[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.popover--left { right: auto; left: 0; }
/* Opens upward and fills its anchor's width — the sidebar's account menu, which
   sits at the bottom of the rail and has nowhere below it to go. */
.popover--up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; transform: translateY(4px); }
.popover--up[data-open="true"] { transform: none; }

/* ==========================================================================
   TOOLTIP
   ========================================================================== */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--color-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); white-space: nowrap;
  padding: 5px var(--space-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-3px); }
[data-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   AVATAR
   ========================================================================== */
.avatar {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  overflow: hidden; flex: none; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 22px; height: 22px; font-size: 9px; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-2xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--text-base); }
.avatar--xl { width: 68px; height: 68px; font-size: var(--text-xl); }
.avatar--square { border-radius: var(--radius-lg); }
/* The signed-in person's own avatar: the one place it takes the brand colour. */
.avatar--primary { background: var(--color-primary); border-color: transparent; color: var(--color-primary-contrast); }
.avatar__status { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-surface); background: var(--color-success); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--color-surface); margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* ==========================================================================
   SKELETON
   ========================================================================== */
.skeleton { position: relative; overflow: hidden; background: var(--color-skeleton); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-skeleton-sheen), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton--text  { height: 0.75em; margin: 0.25em 0; border-radius: var(--radius-xs); }
.skeleton--line  { height: 10px; }
.skeleton--circle{ border-radius: 50%; }
.skeleton--title { height: 20px; width: 55%; }
.skeleton--btn   { height: 36px; width: 108px; border-radius: var(--radius-md); }

/* ---------------------------------------------------------- PENDING FIGURES
   The loading state for a figure the server has not sent yet.

   Every balance, reward and count in this product ships in the markup as an em
   dash and is overwritten the moment its request lands. A dash is a poor
   loading state: it is indistinguishable from a real zero, it is the same shape
   whatever is coming, and when the number arrives it changes width and shoves
   the row it sits in. On a slow phone that is a screen of dashes that twitches
   into life, which reads as broken rather than loading.

   So the dash stays in the HTML — it is still the right thing to show if
   JavaScript never runs, and it is still what we fall back to if a request
   fails — but while the figure is genuinely in flight it is covered by a bar.
   `core/skeleton.js` adds .is-skel and takes it off again when the real value
   is written, or gives up after a few seconds and leaves the dash showing.

   The bar is drawn with ::after over the element rather than by replacing its
   contents, so the slot keeps the exact height and line box it will have when
   the number lands: nothing reflows on arrival.

   Sized in `em`, so a bar over the 32px balance is bigger than one over an
   11px badge without either being measured. --skel-w overrides the width where
   a slot is much longer or shorter than a typical figure. */
[data-skel].is-skel {
  color: transparent !important;
  position: relative;
  /* The slot reserves the bar's width while it waits.

     Without this a slot holding nothing but an em dash is about 13px wide, and
     the bar — absolutely positioned, and capped at the width of its container —
     was being clamped to that: a stub about a fifth of the size of the figure
     it stands for. Reserving the width here also does the more useful half of a
     skeleton's job, which is to hold roughly the space the number will need so
     the row does not jump sideways when it lands. */
  min-width: var(--skel-w, 4.2em);
  /* A figure mid-flight is not a control. Whatever it normally does on hover,
     and whatever a half-written value would do to a text cursor, stops here. */
  pointer-events: none;
  user-select: none;
}
/* Anything nested inside the slot — a currency symbol, a <b>, a unit — goes
   with it, otherwise a coloured child paints straight through the bar. */
[data-skel].is-skel * { color: transparent !important; }

[data-skel].is-skel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--skel-w, 4.2em);
  max-width: 100%;
  height: 0.68em;
  min-height: 9px;
  border-radius: var(--radius-xs);
  background:
    linear-gradient(90deg, transparent, var(--color-skeleton-sheen), transparent)
      0 0 / 220% 100% no-repeat,
    var(--color-skeleton);
  animation: skel-sheen 1.5s linear infinite;
  pointer-events: none;
}
/* The sheen travels across the bar by moving the gradient, not the box, so
   nothing needs clipping and no extra element is required. */
@keyframes skel-sheen {
  0%   { background-position: -120% 0; }
  100% { background-position:  220% 0; }
}

/* Centred and right-aligned slots put their bar where the text would be. */
[data-skel].is-skel[data-skel-align="center"]::after { left: 50%; transform: translate(-50%, -50%); }
[data-skel].is-skel[data-skel-align="right"]::after  { left: auto; right: 0; }

/* An inline slot inside a sentence has no height of its own to centre against
   until it has content; the dash underneath gives it one. */

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
  [data-skel].is-skel::after { animation: none; }
}

/* ==========================================================================
   EMPTY STATE
   --------------------------------------------------------------------------
   Deliberately small. An empty state is a sentence explaining what is missing
   and a way to fix it, not an illustration with a headline.
   ========================================================================== */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.empty__art {
  width: 40px; height: 40px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-faint);
}
.empty__art .icon { width: 19px; height: 19px; }
.empty__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.empty__text { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; line-height: var(--leading-snug); }

/* ==========================================================================
   DIVIDER, KBD, BREADCRUMB, PAGINATION, SPINNER, ICON
   ========================================================================== */
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-faint); font-size: var(--text-xs); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--color-text-subtle);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
}

.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
.breadcrumb a { color: var(--color-text-subtle); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb__sep { color: var(--color-text-faint); display: inline-flex; }
.breadcrumb__sep .icon { width: 13px; height: 13px; }
.breadcrumb__current { color: var(--color-text); font-weight: var(--weight-medium); }

.pagination { display: inline-flex; align-items: center; gap: var(--space-1); }
.pagination__item {
  min-width: 30px; height: 30px; padding: 0 var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--color-text-subtle); border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.pagination__item:hover { background: var(--color-surface-2); color: var(--color-text); }
.pagination__item[aria-current="page"] { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }

.spinner {
  width: 16px; height: 16px;
  border: 1.5px solid var(--color-surface-3);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.62s linear infinite;
}
.spinner--lg { width: 26px; height: 26px; border-width: 2px; }

.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.8; }
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 22px; height: 22px; }

/* ==========================================================================
   CRYPTO PRIMITIVES
   ========================================================================== */
/* ---------------------------------------------------------------- COINS ----
   The real brand marks, inlined as SVG.

   These used to be a coloured circle with the asset's first letter in it — so
   USDT and USDC were both a white "U" on a disc, which is precisely the pair a
   member must not confuse when choosing where to send money. The marks below
   are the recognisable ones, drawn as vectors so they stay sharp at any size
   and cost no extra request.

   Any letter a call site still writes into the element is hidden rather than
   depended on, so a stray textContent cannot print on top of the logo. */
.coin {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  font-size: 0; color: transparent; overflow: hidden;
}
.coin--btc  { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%23F7931A'/><path fill='%23fff' d='M23.19 14.02c.31-2.09-1.28-3.21-3.46-3.96l.71-2.84-1.73-.43-.69 2.76c-.45-.11-.92-.22-1.39-.32l.7-2.78-1.73-.43-.71 2.84c-.38-.09-.75-.17-1.11-.26l-2.38-.6-.46 1.85s1.28.29 1.25.31c.7.17.83.64.8 1.01l-.81 3.23c.05.01.11.03.18.06l-.18-.05-1.13 4.53c-.09.21-.3.53-.79.41.02.03-1.25-.31-1.25-.31l-.86 1.98 2.25.56c.42.1.83.21 1.23.31l-.72 2.87 1.73.43.71-2.84c.47.13.93.25 1.38.36l-.71 2.83 1.73.43.72-2.87c2.95.56 5.17.33 6.11-2.34.75-2.15-.04-3.39-1.59-4.2 1.13-.26 1.98-1 2.2-2.54zM19.2 20.4c-.53 2.15-4.16 1-5.33.7l.95-3.81c1.18.29 4.94.88 4.38 3.11zm.54-6.41c-.48 1.96-3.51.96-4.49.72l.86-3.45c.98.24 4.14.7 3.63 2.73z'/></svg>"); }
.coin--eth  { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%23627EEA'/><g fill='%23fff'><path fill-opacity='.6' d='M16.5 4v8.87l7.5 3.35z'/><path d='M16.5 4 9 16.22l7.5-3.35z'/><path fill-opacity='.6' d='M16.5 21.97V28l7.5-10.38z'/><path d='M16.5 28v-6.03L9 17.62z'/><path fill-opacity='.2' d='m16.5 20.57 7.5-4.35-7.5-3.35z'/><path fill-opacity='.6' d='M9 16.22l7.5 4.35v-7.7z'/></g></svg>"); }
.coin--usdt { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%2326A17B'/><path fill='%23fff' d='M17.92 17.38v-.01c-.11.01-.68.04-1.95.04-1.01 0-1.73-.03-1.98-.04v.01c-3.9-.17-6.81-.85-6.81-1.66 0-.81 2.91-1.49 6.81-1.66v2.65c.25.02.98.06 2 .06 1.21 0 1.82-.05 1.93-.06v-2.65c3.89.17 6.79.85 6.79 1.66 0 .81-2.9 1.49-6.79 1.66m0-3.59v-2.37h5.43V7.8H8.66v3.62h5.43v2.37c-4.41.2-7.73 1.08-7.73 2.13s3.32 1.92 7.73 2.13v7.6h3.83v-7.6c4.4-.2 7.71-1.08 7.71-2.13s-3.31-1.92-7.71-2.13'/></svg>"); }
.coin--usdc { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='16' fill='%232775CA'/><path fill='%23fff' d='M20.5 18.53c0-2.38-1.43-3.2-4.29-3.54-2.04-.27-2.45-.82-2.45-1.77s.68-1.57 2.04-1.57c1.23 0 1.91.41 2.24 1.43.1.27.34.34.48.34h1.09c.27 0 .48-.2.48-.48v-.07a3.42 3.42 0 0 0-3.07-2.79V8.6c0-.27-.2-.48-.55-.55h-1.02c-.27 0-.48.2-.55.55v1.43c-2.04.27-3.34 1.63-3.34 3.34 0 2.24 1.36 3.13 4.22 3.47 1.91.34 2.52.75 2.52 1.84s-.95 1.84-2.24 1.84c-1.77 0-2.38-.75-2.59-1.77-.07-.27-.27-.41-.48-.41h-1.16a.47.47 0 0 0-.48.48v.07c.27 1.7 1.36 2.93 3.61 3.27v1.43c0 .27.2.48.55.55h1.02c.27 0 .48-.2.55-.55v-1.43c2.04-.34 3.41-1.77 3.41-3.61'/><path fill='%23fff' d='M12.6 25.5c-5.3-1.9-8-7.8-6-13.03a10.05 10.05 0 0 1 6-6c.27-.14.41-.34.41-.68v-.95c0-.27-.14-.48-.41-.55-.07 0-.2 0-.27.07a12.3 12.3 0 0 0-8 15.5 12.2 12.2 0 0 0 8 7.7c.27.14.55 0 .61-.27.07-.07.07-.14.07-.27v-.95c0-.2-.2-.41-.41-.61zm7.07-21.6c-.27-.14-.55 0-.61.27-.07.07-.07.14-.07.27v.95c0 .27.2.48.41.68 5.3 1.9 8 7.8 6 13.03a10.05 10.05 0 0 1-6 6c-.27.14-.41.34-.41.68v.95c0 .27.14.48.41.55.07 0 .2 0 .27-.07a12.3 12.3 0 0 0 8-15.5 12.29 12.29 0 0 0-8-7.8'/></svg>"); }
.coin--sol  { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='s' x1='6' y1='25' x2='26' y2='7' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%239945FF'/><stop offset='1' stop-color='%2314F195'/></linearGradient></defs><circle cx='16' cy='16' r='16' fill='%23131A2A'/><g fill='url(%23s)'><path d='M10.2 20.4a.7.7 0 0 1 .5-.2h13a.35.35 0 0 1 .25.6l-2.15 2.16a.7.7 0 0 1-.5.2h-13a.35.35 0 0 1-.25-.6z'/><path d='M10.2 9.04a.72.72 0 0 1 .5-.2h13a.35.35 0 0 1 .25.6l-2.15 2.16a.7.7 0 0 1-.5.2h-13a.35.35 0 0 1-.25-.6z'/><path d='M21.8 14.68a.7.7 0 0 0-.5-.2h-13a.35.35 0 0 0-.25.6l2.15 2.16a.7.7 0 0 0 .5.2h13a.35.35 0 0 0 .25-.6z'/></g></svg>"); }
.coin--sm { width: 22px; height: 22px; }
.coin--lg { width: 36px; height: 36px; }

.network {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--radius-xs);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.network__dot { width: 6px; height: 6px; border-radius: 50%; }

/* An address, in the face the reader's terminal uses. */
.address {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 5px 5px 5px var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.address__text {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.address__copy { flex: none; }

.hash { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

/* An amount. Tabular figures in the UI face rather than the mono one: a column
   of numbers should line up, but a balance is not a code sample. */
.amount { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); letter-spacing: var(--tracking-snug); }
.amount--in     { color: var(--color-success); }
.amount--out    { color: var(--color-text); }
.amount--reward { color: var(--color-accent-strong); }

.qr {
  width: 168px; height: 168px; border-radius: var(--radius-lg);
  background: #fff; padding: 10px; display: grid; place-items: center;
  border: 1px solid var(--color-border); position: relative;
}
.qr__inner {
  width: 100%; height: 100%; background-color: #fff;
  background-image:
    linear-gradient(45deg, #0C0E13 25%, transparent 25%, transparent 75%, #0C0E13 75%),
    linear-gradient(45deg, #0C0E13 25%, transparent 25%, transparent 75%, #0C0E13 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; border-radius: 2px;
}
.qr__badge { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--color-surface); display: grid; place-items: center; border: 3px solid #fff; }

.reward-pop {
  color: var(--color-accent-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 4px;
}

/* A ledger row's leading cell — shared by the dashboard table, the wallet
   activity list and the reward history. */
.tx-type { display: inline-flex; align-items: center; gap: var(--space-3); }
.tx-ico {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
}
.tx-ico .icon { width: 14px; height: 14px; }
.tx-ico--in     { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-soft); }
.tx-ico--out    { color: var(--color-text-muted); }
.tx-ico--reward { color: var(--color-accent-strong); border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.tx-title { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.tx-sub   { font-size: var(--text-2xs); color: var(--color-text-faint); }
.tx-time  { color: var(--color-text-faint); font-size: var(--text-xs); white-space: nowrap; }

/* A key/value money summary — deposit, withdraw, rewards and referrals. */
.summary { display: flex; flex-direction: column; gap: var(--space-2); }
.summary__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.summary__row b { color: var(--color-text); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.summary__row--total { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-1); }
.summary__row--total span { color: var(--color-text); font-weight: var(--weight-medium); }
.summary__row--total b { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* ==========================================================================
   PROSE — markdown / model answers
   ========================================================================== */
.prose { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h1, .prose h2, .prose h3 { margin-top: var(--space-6); letter-spacing: var(--tracking-tight); }
.prose h2 { font-size: var(--text-lg); }
.prose h3 { font-size: var(--text-md); }
.prose p { color: var(--color-text); }
.prose a { color: var(--color-primary-fg); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.prose li::marker { color: var(--color-text-faint); }
.prose strong { font-weight: var(--weight-semibold); }
.prose code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  padding: 1px 5px; border-radius: var(--radius-xs);
  font-size: 0.88em; color: var(--color-text);
}
.prose blockquote { border-left: 2px solid var(--color-border-strong); padding-left: var(--space-4); color: var(--color-text-muted); }

.codeblock {
  background: var(--ink-1000);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
[data-theme="light"] .codeblock { background: var(--ink-950); border-color: var(--ink-800); }
.codeblock__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px var(--space-2) 6px var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.codeblock__lang { font-family: var(--font-mono); font-size: var(--text-2xs); color: #7C8493; }
.codeblock__bar .btn--ghost { --_fg: #98A0AF; }
.codeblock__bar .btn--ghost:hover { --_bg: rgba(255, 255, 255, 0.06); --_fg: #E9EBF0; }
.codeblock__pre { padding: var(--space-4); overflow-x: auto; }
.codeblock code { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); color: #C3CAD6; }
.tok-key { color: #A9B6F7; } .tok-str { color: #86CFA6; } .tok-num { color: #DCBA7B; }
.tok-fn  { color: #7FB4E8; } .tok-com { color: #5C6472; font-style: italic; } .tok-punc { color: #838B99; }