/* =========================================================================
   earn.css  —  scoped stylesheet for the user-facing Earn landing page.
   Light sage-mStable palette. Does NOT import or modify style.css; every
   class is prefixed `.earn-` to avoid any collision with the dark admin UI.
   ========================================================================= */

/* Modam FaNum (Farsi-numeral variant) — the brand face for Farsi mode. Self
   hosted under web/fonts/modam; woff2 first, woff fallback. This is the
   "FaNum" cut, so Latin digits 0-9 render as Persian numerals (۰-۹) — which
   is why Farsi mode gets Persian numbers everywhere without JS conversion. */
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-ExtraLight.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-ExtraLight.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-Light.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-Light.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-Regular.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-Regular.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-Medium.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-Medium.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-SemiBold.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-SemiBold.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-Bold.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-Bold.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-ExtraBold.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-ExtraBold.woff") format("woff"); }
@font-face { font-family: "ModamFaNumWeb"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/modam/woff2/ModamFaNumWeb-Black.woff2") format("woff2"), url("fonts/modam/woff/ModamFaNumWeb-Black.woff") format("woff"); }

:root {
  --bg:          #dcdcd1;
  --bg-deep:    #d2d3c5;
  --surface:    #ececdf;
  --surface-hi: #f4f4ec;
  --ink:        #1a2014;
  /* --ink-soft / --ink-mute darkened to clear WCAG AA (was #5d6657 / #8b9285,
     which failed at 4.34:1 and 2.69:1). Body text now ≥4.5:1 on every surface;
     the muted tier clears 4.5:1 on the card surfaces where it is used. */
  --ink-soft:   #4d5643;
  --ink-mute:   #636a59;
  --sage:       #c2dba0;
  --sage-hi:    #a8c483;
  --sage-deep:  #2b4a23;
  --tag-bg:     #d4e7b5;
  --tag-ink:    #38561d;
  --line:       #c7c8ba;
  --line-soft:  #d6d7c9;
  --shadow-sm:  0 1px 0 rgba(26, 32, 20, 0.04), 0 2px 6px rgba(26, 32, 20, 0.04);
  --shadow-md:  0 2px 0 rgba(26, 32, 20, 0.04), 0 12px 28px -8px rgba(26, 32, 20, 0.12);
  --shadow-lg:  0 30px 60px -20px rgba(26, 32, 20, 0.30), 0 2px 0 rgba(26, 32, 20, 0.05);
  --radius-pill: 999px;
  --radius-card: 22px;
  --radius-tight: 12px;
  --maxw: 1180px;

  /* Latin type (English mode + Latin glyphs). Spectral = calm literary serif
     for display; Public Sans = government-grade legible sans for body. Both
     off the "overused" list, paired on a serif/sans contrast axis. Farsi mode
     overrides all three with Modam below. */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Farsi mode: Modam FaNum drives EVERYTHING — display, body, AND the mono
   variable used for numbers/addresses/APR. Routing --font-mono through Modam
   is deliberate: the user wants numbers and any Latin characters in Farsi mode
   to use this face too (and the FaNum cut renders digits as Persian numerals).
   Vazirmatn/Geist remain as graceful fallbacks while the woff2 loads. */
html:lang(fa) {
  --font-display: "ModamFaNumWeb", "Vazirmatn", "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body:    "ModamFaNumWeb", "Vazirmatn", "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "ModamFaNumWeb", "Vazirmatn", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--sage); color: var(--sage-deep); }

/* full-page subtle grain */
.earn-grain {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* ============== TOPBAR ============== */

.earn-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(220, 220, 209, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(199, 200, 186, 0.45);
}
.earn-topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.earn-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.earn-brand-mark {
  width: 28px; height: 28px;
  color: var(--sage-deep);
  display: block;
}

.earn-nav {
  display: inline-flex;
  gap: 28px;
  justify-self: center;
  font-size: 15px;
  color: var(--ink-soft);
}
.earn-nav a {
  position: relative;
  padding: 6px 2px;
  transition: color 160ms ease;
}
.earn-nav a:hover { color: var(--ink); }
.earn-nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 0; height: 1px;
  background: var(--sage-deep);
  transition: width 200ms ease, left 200ms ease;
}
.earn-nav a:hover::after { width: 100%; left: 0; }

.earn-wallet-slot {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============== PILLS / BUTTONS ============== */

.earn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.earn-pill:active { transform: translateY(1px); }
.earn-pill[disabled],
.earn-pill[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.earn-pill-primary {
  background: var(--sage);
  color: var(--sage-deep);
  box-shadow: var(--shadow-sm);
  border-color: rgba(43, 74, 35, 0.10);
}
.earn-pill-primary:hover {
  background: var(--sage-hi);
  border-color: rgba(43, 74, 35, 0.18);
}

.earn-pill-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.earn-pill-ghost:hover {
  background: var(--surface-hi);
  border-color: var(--ink-mute);
}

.earn-pill-sm {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* wallet pill, connected state */
.earn-wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding-block: 0;
  padding-inline: 12px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease;
}
.earn-wallet-pill:hover { background: var(--surface-hi); border-color: var(--ink-mute); }
.earn-wallet-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-hi);
  box-shadow: 0 0 0 3px rgba(168, 196, 131, 0.25);
}
.earn-wallet-pill.bad .dot { background: #d8804a; box-shadow: 0 0 0 3px rgba(216, 128, 74, 0.20); }

/* wallet menu */
.earn-wallet-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 20;
}
.earn-wallet-menu button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink);
}
.earn-wallet-menu button:hover { background: var(--surface); }
.earn-wallet-menu .danger { color: #99411b; }

/* ============== HERO ============== */

.earn-main {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 76px 32px 80px;
}

.earn-hero {
  position: relative;
  padding: 110px 0 80px;
  min-height: 460px;
  isolation: isolate;
}

.earn-hero-text {
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.earn-hero-title {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 28px;
  animation: earn-rise 700ms cubic-bezier(.2,.65,.25,1) both;
}
.earn-hero-title em {
  font-style: italic;
  color: var(--sage-deep);
}

.earn-hero-sub {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 36px;
  /* honour a literal "\n" in the i18n string as a paragraph break (the copy is
     set via textContent, so this is the only way to keep the author's break). */
  white-space: pre-line;
  animation: earn-rise 700ms 100ms cubic-bezier(.2,.65,.25,1) both;
}

.earn-hero-actions {
  display: inline-flex;
  gap: 12px;
  animation: earn-rise 700ms 200ms cubic-bezier(.2,.65,.25,1) both;
}

/* soft decorative orbs floating in the hero */
.earn-hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.earn-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.85;
}
.earn-orb-a {
  width: 320px; height: 320px;
  background: radial-gradient(circle at 40% 40%, #b7d68f 0%, #b7d68f 35%, transparent 70%);
  top: 140px; right: -60px;
  animation: earn-float 16s ease-in-out infinite alternate;
}
.earn-orb-b {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 50% 50%, #d9e9bf 0%, transparent 70%);
  top: 280px; right: 220px;
  animation: earn-float 22s ease-in-out -6s infinite alternate;
}
.earn-orb-c {
  width: 140px; height: 140px;
  background: radial-gradient(circle at 50% 50%, #c2dba0 0%, transparent 70%);
  top: 180px; right: 380px;
  animation: earn-float 19s ease-in-out -10s infinite alternate;
}

@keyframes earn-float {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-20px, 20px) scale(1.05); }
}
@keyframes earn-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: honour reduced-motion. Without this, the earn-rise entrances
   (opacity 0 -> 1) would leave hero/stats/cards INVISIBLE for these users. A
   ~0ms duration runs each animation once straight to its end state. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============== STAT STRIP ============== */

.earn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 80px;
  animation: earn-rise 700ms 300ms cubic-bezier(.2,.65,.25,1) both;
}
.earn-stat {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow-sm);
}
.earn-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.earn-stat-value {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.earn-stat-value.earn-stat-pill {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
}

/* ============== VAULT GRID ============== */

.earn-vaults {
  margin: 0 0 96px;
  scroll-margin-top: 80px;
}

.earn-section-head { margin-bottom: 32px; }
.earn-section-title {
  font-family: var(--font-display);
  font-weight: 380;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.earn-section-sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}

.earn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  animation: earn-rise 700ms 400ms cubic-bezier(.2,.65,.25,1) both;
}

/* Flagship card: sits alone on its own row, centered, at single-card width.
   grid-column spans the full track; justify-self + width recreate one column. */
.earn-card-featured {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 10px);
}

/* ---- Vault card ---- */

.earn-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 220ms cubic-bezier(.2,.65,.25,1), box-shadow 220ms ease, background 220ms ease;
  overflow: hidden;
}
.earn-card::before {
  /* soft sage wash that intensifies on hover */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(194, 219, 160, 0.30), transparent 65%);
  opacity: 0.6;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.earn-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--surface-hi);
}
.earn-card:hover::before { opacity: 1; }
.earn-card.is-empty:hover { transform: none; box-shadow: var(--shadow-sm); background: var(--surface); }
.earn-card.is-empty::before { opacity: 0.25; }

.earn-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.earn-mark {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tag-bg);
  display: grid;
  place-items: center;
  color: var(--sage-deep);
  box-shadow: inset 0 0 0 1px rgba(43, 74, 35, 0.10);
}
.earn-mark svg { width: 28px; height: 28px; }

.earn-card-titleblock { flex: 1; min-width: 0; }
.earn-card-title {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2px 0 6px;
  line-height: 1.15;
}
.earn-card-addr {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.earn-card-addr-copy {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 140ms ease;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.earn-card-addr-copy:hover { background: var(--surface-hi); color: var(--ink-soft); }

.earn-card-blurb {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  min-height: 44px;
}

.earn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.earn-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.earn-tvl-row,
.earn-card-metrics {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.earn-tvl-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.earn-card-metrics {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 14px;
  align-items: end;
}
.earn-tvl {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.earn-tvl-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.earn-tvl-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.015em;
}
.earn-tvl-value-sm {
  font-size: 20px;
}
.earn-tvl-value .earn-tvl-currency {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  margin-inline-start: 4px;
  letter-spacing: 0;
}
.earn-tvl-value.is-loading {
  background: linear-gradient(90deg, var(--line-soft) 0%, var(--surface-hi) 50%, var(--line-soft) 100%);
  background-size: 200% 100%;
  color: transparent;
  border-radius: 6px;
  width: 120px;
  height: 26px;
  animation: earn-shimmer 1.4s ease-in-out infinite;
}
.earn-tvl-value-sm.is-loading {
  width: 74px;
  height: 20px;
}
@keyframes earn-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.earn-card-chart {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 56px;
  color: var(--sage-deep);
}
.earn-card-chart-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.earn-card-chart-label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.earn-card-chart-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.earn-card-chart-pct.is-positive { color: #2b4a23; }
.earn-card-chart-pct.is-negative { color: #a13c2c; }
.earn-card-chart-svg {
  width: 100%;
  height: 32px;
  display: block;
  overflow: visible;
}
.earn-card-chart-svg.is-positive { color: #2b4a23; }
.earn-card-chart-svg.is-negative { color: #a13c2c; }
.earn-card-chart-placeholder {
  font-size: 12px;
  color: var(--ink-mute);
  font-style: italic;
  align-self: center;
  padding: 8px 0;
}
/* 30D / 1Y segmented toggle in the chart header */
.earn-card-perf-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-hi);
  border: 1px solid var(--line-soft);
}
.earn-perf-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.earn-perf-tab:hover { color: var(--ink-soft); }
.earn-perf-tab.is-active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* APR readout — label and value kept tight together ("APR: +18.4%") */
.earn-card-apr {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.earn-card-apr-label {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.earn-card-apr-sep {
  font-size: 11px;
  color: var(--ink-mute);
  margin-inline-end: 2px;
}
.earn-card-apr-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.earn-card-apr-value.is-positive { color: #2b4a23; }
.earn-card-apr-value.is-negative { color: #a13c2c; }

.earn-card-chart.is-loading {
  position: relative;
}
.earn-card-chart.is-loading::after {
  content: "";
  position: absolute;
  inset: 12px 0 0 0;
  background: linear-gradient(90deg, var(--surface-hi), var(--surface) 40%, var(--surface-hi));
  background-size: 200% 100%;
  animation: earn-shimmer 1.4s linear infinite;
  border-radius: 4px;
  opacity: 0.5;
}

.earn-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.earn-card-details {
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.earn-card-details:hover { color: var(--ink); border-bottom-color: var(--ink-mute); }
.earn-card-details.is-disabled { color: var(--ink-mute); pointer-events: none; }

/* coming-soon overlay treatment */
.earn-card.is-empty .earn-tvl-value::before {
  content: "Coming soon";
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0;
}
/* This pseudo-element text can't go through the JS i18n system, so localize it
   here for the Persian default. Higher specificity than the base rule, so it
   wins regardless of source order. */
html:lang(fa) .earn-card.is-empty .earn-tvl-value::before {
  content: "به‌زودی";
}
.earn-card.is-empty .earn-tvl-value { font-size: 14px; }
.earn-card.is-empty .earn-tvl-value .earn-tvl-currency { display: none; }

/* ============== TRUST ============== */
/* Editorial split: a confident lede on one side, a hairline-separated key/value
   list on the other. Deliberately NOT an icon-card grid (the anti-pattern the
   card section already carries once). Space + dividers carry the structure. */
.earn-trust {
  margin: 0 0 84px;
  padding-top: 44px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.earn-trust-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.earn-trust-sub {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}
.earn-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.earn-trust-item {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.42fr) 1fr;
  gap: clamp(14px, 2.5vw, 36px);
  padding: 17px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.earn-trust-item:last-child { border-bottom: 1px solid var(--line-soft); }
.earn-trust-item strong {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.earn-trust-item span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============== HOW IT WORKS ============== */

.earn-how {
  margin: 0 0 80px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 80px;
}

.earn-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.earn-step {
  background: transparent;
  padding: 8px 4px 0;
}
/* Icon sits inline beside the heading (not a numbered marker, and not a large
   rounded icon box above the title — both read as template scaffolding). */
.earn-step-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.earn-step-icon {
  flex: none;
  width: 26px; height: 26px;
  color: var(--sage-deep);
  display: inline-flex;
}
.earn-step-icon svg { width: 100%; height: 100%; }
.earn-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.earn-step p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* ============== FOOTER ============== */

.earn-foot {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
  gap: 16px;
  flex-wrap: wrap;
}
.earn-foot-right { display: inline-flex; gap: 10px; align-items: center; }
.earn-foot-right a { color: var(--ink-soft); transition: color 160ms ease; }
.earn-foot-right a:hover { color: var(--ink); }
.earn-foot-sep { color: var(--ink-mute); }

/* ============== MODAL ============== */

.earn-modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: earn-modal-fade 200ms ease both;
}
.earn-modal[hidden] { display: none; }
@keyframes earn-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.earn-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 32, 20, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.earn-modal-card {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  background: var(--surface-hi);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 24px;
  /* Cap height so a tall form (or landscape phone) scrolls inside the card
     instead of overflowing off-screen; dvh accounts for mobile browser chrome. */
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: earn-modal-pop 280ms cubic-bezier(.2,.7,.25,1.05) both;
}
@keyframes earn-modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.earn-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.earn-modal-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.earn-modal-title {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.earn-modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: background 140ms ease, color 140ms ease;
}
.earn-modal-close:hover { background: var(--surface); color: var(--ink); }

.earn-modal-body { display: flex; flex-direction: column; gap: 16px; }

/* a labeled field row inside the modal */
.earn-row {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 14px 16px;
}
.earn-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.earn-row-value {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.earn-row-aux {
  font-size: 13px;
  color: var(--ink-soft);
}

.earn-amount {
  display: flex;
  align-items: center;
  gap: 8px;
}
.earn-amount input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  width: 100%;
  padding: 0;
  letter-spacing: -0.01em;
}
.earn-amount input::placeholder { color: var(--ink-mute); }
.earn-amount input:focus { outline: none; }
.earn-amount .earn-max {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  transition: background 140ms ease;
}
.earn-amount .earn-max:hover { background: #c1de9b; }

.earn-row.is-focused {
  border-color: var(--sage-hi);
  box-shadow: 0 0 0 3px rgba(168, 196, 131, 0.20);
}

.earn-modal-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 4px 0;
}
.earn-modal-note .earn-note-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-hi);
  flex: none;
}

.earn-modal-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 22px;
}
.earn-modal-action {
  width: 100%;
  height: 50px;
  font-size: 15px;
}
.earn-modal-bridge {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px;
  transition: color 160ms ease;
}
.earn-modal-bridge:hover { color: var(--ink); }

/* connect-prompt inside modal */
.earn-modal-connect {
  display: grid;
  gap: 8px;
}
.earn-modal-connect .earn-pill { width: 100%; height: 46px; justify-content: space-between; padding: 0 18px; }
.earn-modal-connect .earn-pill .earn-wallet-name { font-weight: 500; }
.earn-modal-connect .earn-pill .earn-wallet-meta { font-size: 12px; color: var(--ink-mute); }

/* success state */
.earn-modal-success {
  text-align: center;
  padding: 8px 0 4px;
}
.earn-modal-success .earn-success-mark {
  margin: 0 auto 14px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sage);
  display: grid; place-items: center;
  color: var(--sage-deep);
}
.earn-modal-success h4 {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.earn-modal-success p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.earn-modal-success a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--sage-deep);
  border-bottom: 1px solid var(--sage-hi);
  padding-bottom: 1px;
}

.earn-modal-error {
  background: rgba(216, 128, 74, 0.10);
  border: 1px solid rgba(216, 128, 74, 0.30);
  color: #7d3a1a;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

/* Informational note inside a modal (V2 slow-withdrawal notice). */
.earn-modal-note {
  background: var(--surface-hi);
  border: 1px solid var(--sage-hi);
  color: var(--ink-soft);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
}

/* ============== PENDING WITHDRAWAL BANNER ==============
   Withdrawals in flight from an earlier visit (multi-day V2 redemptions).
   Sits between the topbar and the hero; one dismissible row per request. */

.earn-pending-banner {
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.earn-pending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-hi);
  border: 1px solid var(--sage-hi);
  border-radius: 14px;
  padding: 10px 14px;
}

.earn-pending-item.is-bad {
  background: rgba(216, 128, 74, 0.10);
  border-color: rgba(216, 128, 74, 0.30);
}

.earn-pending-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}

.earn-pending-text small {
  flex-basis: 100%;
  color: var(--ink-soft);
}

.earn-pending-dismiss {
  margin-inline-start: auto;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-soft);
}

.earn-pending-dismiss:hover {
  background: var(--sage-hi);
}

/* ============== RESPONSIVE ============== */

@media (max-width: 880px) {
  .earn-topbar-inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .earn-nav { display: none; }
  .earn-hero { padding: 60px 0 50px; min-height: 0; }
  .earn-hero-actions { flex-wrap: wrap; }
  .earn-orb-a { width: 220px; height: 220px; right: -60px; }
  .earn-orb-b, .earn-orb-c { display: none; }
  .earn-stats { grid-template-columns: 1fr; gap: 10px; margin-bottom: 50px; }
  .earn-grid { grid-template-columns: 1fr; }
  .earn-card-featured { width: 100%; }
  .earn-card-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .earn-trust { grid-template-columns: 1fr; gap: 28px; }
  .earn-trust-item { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
  .earn-steps { grid-template-columns: 1fr; gap: 10px; }
  .earn-main { padding-bottom: 60px; }
  .earn-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .earn-main, .earn-topbar, .earn-foot { padding-left: 20px; padding-right: 20px; }

  /* Logo-only header on phones: the wordmark (long in Persian) otherwise wraps
     to ~4 lines and pushes the Connect button off the left edge. */
  .earn-brand span { display: none; }

  .earn-modal-card { padding: 22px 20px 20px; }
  .earn-card { padding: 22px 22px 20px; }
  .earn-tvl-value { font-size: 22px; }
  .earn-tvl-value-sm { font-size: 18px; }
  .earn-card-metrics { gap: 10px; }

  /* Mobile touch targets: lift small controls to ~40px so they're easy to tap.
     (.earn-lang-btn, .earn-pill-xs and .earn-input are overridden in a second
     media block at the END of this file — their base rules live below this
     block, so an override here would lose the cascade.) */
  .earn-pill-sm { height: 40px; }
  .earn-amount .earn-max { height: 36px; }

  /* Keep the deposit-rail stat on one line instead of wrapping mid-phrase. */
  .earn-stat-value.earn-stat-pill { font-size: clamp(13px, 4vw, 17px); white-space: nowrap; }
}

@media (max-width: 360px) {
  /* TVL / Depositors / Age cram into ~110px each at 3 columns on the
     smallest phones — drop the card metrics to 2 columns. */
  .earn-card-metrics { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   New components — language switcher, forms, modal helpers
   ============================================================ */

.earn-topbar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.earn-lang-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.earn-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.04em;
}
.earn-lang-btn:hover { color: var(--ink); }
.earn-lang-btn.is-active {
  background: var(--ink);
  color: var(--surface-hi);
}

/* Form inputs inside modals */
.earn-form-label {
  display: block;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.earn-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}
.earn-input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.earn-input:focus {
  border-color: var(--sage-hi);
  background: var(--surface-hi);
}
.earn-input::placeholder { color: var(--ink-mute); }
.earn-pill-xs {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}
.earn-form-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.earn-form-meta:last-of-type { border-bottom: 0; }
.earn-form-meta > span:last-child {
  font-family: var(--font-mono);
  color: var(--ink);
}
.earn-form-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  border-radius: var(--radius-tight);
  font-size: 12px;
  line-height: 1.5;
}

html:lang(fa) .earn-form-label,
html:lang(fa) .earn-form-note,
html:lang(fa) .earn-modal-note,
html:lang(fa) .earn-modal-msg,
html:lang(fa) .earn-wallet-status,
html:lang(fa) .earn-wallet-meta {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* Modal helper messages */
.earn-modal-msg {
  padding: 16px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.earn-modal-msg strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}
.earn-modal-msg p {
  margin: 0 0 8px;
}

/* ============================================================
   Wallet picker modal
   ============================================================ */

.earn-wallet-picker-card {
  max-width: 420px;
}
.earn-wallet-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.earn-wallet-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius-tight);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  text-align: start;
  transition: border-color 140ms ease, background 140ms ease;
}
.earn-wallet-btn:hover {
  border-color: var(--sage-hi);
  background: var(--surface);
}
.earn-wallet-name {
  font-weight: 500;
}
.earn-wallet-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--ink-mute);
}
.earn-wallet-status.is-installed {
  background: var(--tag-bg);
  color: var(--tag-ink);
}
.earn-wallet-status.is-install {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.earn-wallet-status.is-loading {
  background: var(--bg-deep);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.earn-wallet-status.is-unavailable {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-mute);
}
.earn-wallet-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 6px 0;
}
.earn-wallet-btn-qr {
  background: var(--surface);
}
.earn-wallet-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   RTL adjustments (Persian)
   ============================================================ */

html[dir="rtl"] body {
  font-family: var(--font-body);
}
html[dir="rtl"] .earn-topbar-inner,
html[dir="rtl"] .earn-modal-head,
html[dir="rtl"] .earn-card-head,
html[dir="rtl"] .earn-card-actions,
html[dir="rtl"] .earn-hero-actions,
html[dir="rtl"] .earn-foot {
  flex-direction: row-reverse;
}
html[dir="rtl"] .earn-form-meta {
  flex-direction: row-reverse;
}
html[dir="rtl"] .earn-step-num,
html[dir="rtl"] .earn-card-addr-copy,
html[dir="rtl"] .earn-tvl-value,
html[dir="rtl"] .earn-stat-value {
  /* Numbers, money, and addresses read left-to-right even inside an RTL
     block, so "$120 USDC" stays a single LTR unit. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Anchor the wallet dropdown to the inline-start edge in RTL. */
html[dir="rtl"] .earn-wallet-menu {
  right: auto;
  left: 0;
}

/* Mirror the nav hover underline so it grows from the inline-start side. */
html[dir="rtl"] .earn-nav a::after {
  left: auto;
  right: 50%;
  transition: width 200ms ease, right 200ms ease;
}
html[dir="rtl"] .earn-nav a:hover::after {
  right: 0;
}

/* Mirror the decorative card wash to the top inline-start corner in RTL. */
html[dir="rtl"] .earn-card::before {
  right: auto;
  left: 0;
  background: radial-gradient(circle at 0% 0%, rgba(194, 219, 160, 0.30), transparent 65%);
}

/* ============================================================
   Mobile overrides that must win the cascade.
   These selectors have base rules defined ABOVE in the "New components"
   section, so their mobile tweaks live here (end of file) to override them.
   ============================================================ */
@media (max-width: 480px) {
  /* Bigger tap target for the EN/FA switch. */
  .earn-lang-btn { padding: 10px 14px; font-size: 13px; }
  /* MAX / small modal pills to a comfortable tap height. */
  .earn-pill-xs { height: 36px; }
  /* 16px so iOS Safari doesn't zoom the page when an input is focused. */
  .earn-input { font-size: 16px; }
}