/* EarnCashUp — palette: deep forest ink hero, warm paper body, citrus accent */
:root {
  --ink: #0F1C15;
  --paper: #FBF9F4;
  --charcoal: #1A1A16;
  --sage: #6B7A6E;
  --line: #E4E0D6;
  --lime: #D6FF3F;
  --lime-dark: #A8CC1F;
  --white: #FFFFFF;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; line-height: 1.12; margin: 0 0 0.4em; }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--lime-dark);
  outline-offset: 2px;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.logo { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: 0.95rem; }
.site-nav a.active { color: var(--lime-dark); }

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-small { padding: 9px 18px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* Hero */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: 100px 0 80px;
}
.hero .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: end; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--white); max-width: 14ch; }
.hero p { color: #C9D2C5; font-size: 1.15rem; max-width: 46ch; }
.hero-stat { border-left: 2px solid var(--lime); padding-left: 20px; }
.hero-stat .num { font-family: 'Fraunces', serif; font-size: 2.6rem; color: var(--lime); display: block; }
.hero-stat .label { color: #A9B5A5; font-size: 0.95rem; }
.hero-cta { margin-top: 32px; display: flex; gap: 16px; align-items: center; }
.hero-cta .fine { color: #8FA089; font-size: 0.9rem; }

/* Steps */
.steps { padding: 88px 0; }
.steps h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); max-width: 20ch; }
.steps-list { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { border-top: 1px solid var(--line); padding-top: 20px; }
.step .n { font-family: 'Fraunces', serif; font-size: 1.1rem; color: var(--lime-dark); display: block; margin-bottom: 8px; }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { color: var(--sage); font-size: 0.98rem; }

/* Split section */
.split { padding: 0 0 96px; }
.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.split-copy p { color: var(--sage); }
.split-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
}
.split-panel ul { list-style: none; margin: 0; padding: 0; }
.split-panel li { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.split-panel li:last-child { border-bottom: none; }
.split-panel .amt { font-family: 'Fraunces', serif; color: var(--lime-dark); font-weight: 600; }

/* Final CTA */
.final-cta { background: var(--ink); color: var(--paper); padding: 80px 0; text-align: center; }
.final-cta h2 { color: var(--white); font-size: clamp(2rem, 4vw, 2.8rem); }
.final-cta .wrap { display: flex; flex-direction: column; align-items: center; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; margin-top: 40px; }
.site-footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--sage); }
.site-footer nav { display: flex; gap: 20px; }

/* Auth forms */
.auth-wrap { max-width: 420px; margin: 64px auto; padding: 0 24px; }
.auth-wrap h1 { font-size: 1.9rem; margin-bottom: 8px; }
.auth-wrap .sub { color: var(--sage); margin-bottom: 32px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
}
.error-box {
  background: #FDECEC;
  border: 1px solid #F3B9B9;
  color: #A32B2B;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.auth-switch { margin-top: 24px; font-size: 0.95rem; color: var(--sage); }

/* App chrome (offers + balance pages) */
.app-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.app-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.app-header-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: border-color 0.15s ease;
}
.app-header-account:hover { border-color: var(--lime-dark); }
.app-header-balance { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95rem;
}

.wall-frame-wrap {
  border-radius: 0;
  overflow: hidden;
}
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-shell main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wall-frame-wrap--full {
  /* Fills whatever the app header leaves behind. Previously a hardcoded
     calc(100vh - 67px), which silently broke when the logo grew.
     The iframe is absolutely positioned rather than height:100%, because a
     percentage height cannot resolve against a flex item (its height is used
     but not computed) and the iframe collapsed to its default 150px. Absolute
     inset:0 resolves against this box's used height, which is definite. */
  flex: 1;
  min-height: 0;
  position: relative;
}
.wall-frame-wrap--full iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.wall-frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Balance page */
/* Keep .wrap’s 24px gutter: a bare `padding: Y 0 Z` here overrides it
   (same specificity, later in the file) and puts text against the screen
   edge on phones. */
.balance-page { padding: 56px 24px 96px; max-width: 560px; }
.balance-page h1 { font-size: 1.6rem; color: var(--sage); font-weight: 500; margin-bottom: 4px; }
.balance-hero { font-family: 'Fraunces', serif; font-size: 4rem; color: var(--ink); margin: 8px 0 32px; }
.progress-block { margin-bottom: 20px; }
.progress-track {
  height: 14px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lime-dark), var(--lime));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--sage);
  margin-top: 8px;
}
.balance-note { color: var(--charcoal); font-size: 1.02rem; margin-bottom: 28px; }

/* Static content pages */
.content-page { padding: 64px 24px 96px; }
.content-page h1 { font-size: 2.2rem; margin-bottom: 8px; }
.content-page .updated { color: var(--sage); font-size: 0.9rem; margin-bottom: 40px; }
.content-page h2 { font-size: 1.3rem; margin-top: 36px; }
.content-page p, .content-page li { color: var(--charcoal); max-width: 68ch; }
.content-page ul { padding-left: 22px; }

@media (max-width: 780px) {
  .hero .wrap, .split .wrap { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
  .site-footer-inner { flex-direction: column; gap: 12px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Logo + dark chrome
   The wordmark sets "Easy" in white, so it only reads against a
   dark ground — hence the ink header on every page.
   ═══════════════════════════════════════════════════════════ */
:root {
  --night: #0B1220;
  --night-2: #121B2C;
  --night-3: #18233A;
  --night-line: rgba(255,255,255,0.09);
  --night-text: #AEB9CC;
}

.logo-img { display: block; height: 51px; width: auto; }
.site-header, .app-header { background: var(--ink); border-bottom: 1px solid var(--night-line); }
.site-header .site-nav a, .app-header a { color: #E9EFE7; }
.site-header .site-nav a.active { color: var(--lime); }
.site-header .btn-small { background: var(--lime); color: var(--ink); }
.app-header-account { border-color: rgba(255,255,255,0.18); }
.app-header-account:hover { border-color: var(--lime); }
.app-header-balance { color: var(--lime); }

/* ── Landing: dark, centred, offer-forward ───────────────── */
.lander {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(16,185,129,0.16), transparent 62%),
    radial-gradient(760px 420px at 88% 8%, rgba(214,255,63,0.09), transparent 60%),
    var(--night);
  color: var(--white);
  padding: 72px 0 84px;
  border-bottom: 1px solid var(--night-line);
}
.lander h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  text-align: center;
  max-width: 18ch;
  margin: 0 auto 18px;
  color: var(--white);
  line-height: 1.08;
}
.lander h1 em { font-style: normal; color: var(--lime); }
.lander-sub {
  text-align: center;
  color: var(--night-text);
  font-size: 1.05rem;
  margin: 0 auto 44px;
  max-width: 60ch;
}
.lander-sub b { color: var(--white); font-weight: 600; }
.lander-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 40px; align-items: start; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat {
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.cat:hover { transform: translateY(-3px); border-color: rgba(214,255,63,0.45); }
.cat-thumb {
  height: 92px;
  border-radius: 10px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--night-3), #223255);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
}
.cat h3 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--white); margin: 0 0 4px; }
.cat p { color: var(--night-text); font-size: 0.87rem; margin: 0; max-width: none; }

.trust-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.trust-pill {
  border: 1px solid var(--night-line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.85rem;
  color: var(--night-text);
  background: rgba(255,255,255,0.03);
}
.trust-pill b { color: var(--lime); font-weight: 600; }

.signup-card {
  background: var(--night-2);
  border: 1px solid var(--night-line);
  border-radius: 18px;
  padding: 28px 26px;
}
.signup-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--white); text-align: center; margin: 0 0 20px;
}
.signup-card input[type="email"] {
  width: 100%; padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--white); font-size: 0.98rem; font-family: inherit;
  margin-bottom: 12px;
}
.signup-card input[type="email"]::placeholder { color: #7C8AA3; }
.signup-card .btn { width: 100%; text-align: center; }
.signup-card .fine { color: #7C8AA3; font-size: 0.82rem; text-align: center; margin: 14px 0 0; }
.signup-card .alt { text-align: center; color: #7C8AA3; font-size: 0.85rem; margin: 16px 0 0; }
.signup-card .alt a { color: var(--lime); text-decoration: underline; }

/* ── Ways to earn ─────────────────────────────────────────── */
.ways { background: var(--night); color: var(--white); padding: 76px 0; border-bottom: 1px solid var(--night-line); }
.ways h2 { text-align: center; color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 40px; }
.ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.way { background: var(--night-2); border: 1px solid var(--night-line); border-radius: 16px; padding: 26px; }
.way h3 { font-family: 'Inter', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.way p { color: var(--night-text); font-size: 0.93rem; margin: 0; }
.way .ico { font-size: 1.6rem; display: block; margin-bottom: 12px; }

/* ── How it works ─────────────────────────────────────────── */
.howto { background: var(--night); color: var(--white); padding: 76px 0 84px; }
.howto .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.howto h2 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.howto h2 em { font-style: normal; color: var(--lime); display: block; }
.howto-steps { display: grid; gap: 18px; }
.howto-step { display: flex; gap: 16px; background: var(--night-2); border: 1px solid var(--night-line); border-radius: 14px; padding: 20px; }
.howto-step .n {
  flex: 0 0 34px; height: 34px; border-radius: 9px;
  background: rgba(214,255,63,0.14); color: var(--lime);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
}
.howto-step h3 { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--white); margin: 0 0 4px; }
.howto-step p { color: var(--night-text); font-size: 0.9rem; margin: 0; }

@media (max-width: 900px) {
  .lander-grid, .howto .wrap { grid-template-columns: 1fr; }
  .cat-grid, .ways-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Admin — internal tool. Denser and plainer than the public
   pages on purpose; same tokens so it still feels like the app.
   ═══════════════════════════════════════════════════════════ */
.admin-body { background: #F4F2EC; }
.admin-bar { background: var(--ink); color: var(--paper); }
.admin-bar-inner {
  max-width: 1400px; margin: 0 auto; padding: 13px 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.88rem;
}
.admin-brand { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; }
.admin-brand em { font-style: normal; color: var(--lime); }
.admin-who { color: #A9B5A5; }
.admin-who a { color: var(--lime); text-decoration: underline; }
.admin-main { max-width: 1400px; margin: 0 auto; padding: 24px 22px 64px; }

.admin-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 32px; }
.admin-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.admin-card--accent { border-color: var(--lime-dark); background: #FCFFEF; }
.admin-card .k { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sage); font-weight: 600; }
.admin-card .v { font-family: 'Fraunces', serif; font-size: 1.85rem; color: var(--ink); line-height: 1.1; }
.admin-card .sub { font-size: 0.76rem; color: var(--sage); }

.admin-block { margin-bottom: 36px; }
.admin-block h2 { font-size: 1.15rem; margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; }
.admin-count { font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 600; color: var(--sage); background: var(--line); padding: 2px 8px; border-radius: 999px; }
.admin-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.admin-table th, .admin-table td { padding: 9px 14px; text-align: left; white-space: nowrap; }
.admin-table thead th {
  background: #FAF8F2; border-bottom: 1px solid var(--line);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--sage); font-weight: 600; position: sticky; top: 0;
}
.admin-table thead th a { color: var(--sage); }
.admin-table thead th a:hover { color: var(--lime-dark); }
.admin-table tbody tr:nth-child(even) { background: #FCFBF7; }
.admin-table tbody tr:hover { background: #F6FAE8; }
.admin-table td.num, .admin-table th.num { text-align: right; }
.admin-table td.dim { color: var(--sage); }
.admin-table td.strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.admin-table .never { color: #B9B3A4; font-style: italic; }
.admin-empty { color: var(--sage); text-align: center; padding: 26px; }

.admin-pager { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 0.88rem; }
.admin-pager a { color: var(--lime-dark); font-weight: 600; }
.admin-pager span { color: var(--sage); }
.admin-pageno { margin-left: auto; margin-right: auto; }

@media (max-width: 1100px) { .admin-cards { grid-template-columns: repeat(2, 1fr); } }

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

/* ═══════════════════════════════════════════════════════════
   DARK THEME — site-wide
   The landing page was already dark; everything else (auth,
   dashboard, balance, legal pages, footer, admin) was still on
   the light paper ground. These overrides move the whole site
   onto the same night palette and gradient.
   ═══════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(16,185,129,0.13), transparent 62%),
    radial-gradient(820px 460px at 88% 4%, rgba(214,255,63,0.06), transparent 60%),
    var(--night);
  background-attachment: fixed;
  color: #E8EDF5;
}

/* The landing hero paints its own gradient; keep it transparent so the
   body gradient shows through as one continuous field. */
.lander { background: transparent; border-bottom: none; }
.ways, .howto { background: transparent; }

/* Header: the "Sign up" pill was inheriting the nav link colour, which is
   a MORE specific selector (.site-header .site-nav a) than the button rule,
   so it rendered pale-on-lime. Match it to the hero CTA instead. */
.site-header .site-nav a.btn-small,
.site-header .site-nav a.btn { color: var(--ink); }

/* Generic dark button (the ink-on-ink default is invisible here) */
.btn { background: rgba(255,255,255,0.10); color: #E8EDF5; }
.btn:hover { background: rgba(255,255,255,0.16); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime); }

/* Sections that used paper/line */
.step { border-top-color: var(--night-line); }
.step p, .steps h2 { color: var(--night-text); }
.steps h2, .split-copy h2 { color: var(--white); }
.split-copy p { color: var(--night-text); }
.split-panel { background: var(--night-2); border-color: var(--night-line); }
.split-panel li { border-bottom-color: var(--night-line); }
.split-panel .amt { color: var(--lime); }

.final-cta { background: var(--night-2); border-top: 1px solid var(--night-line); }
.final-cta p { color: var(--night-text); }

/* Footer */
.site-footer { border-top-color: var(--night-line); background: transparent; }
.site-footer-inner { color: var(--night-text); }
.site-footer a:hover { color: var(--lime); }

/* Auth forms */
.auth-wrap h1 { color: var(--white); }
.auth-wrap .sub { color: var(--night-text); }
.field label { color: #CBD5E5; }
.field input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
  color: var(--white);
}
.field input::placeholder { color: #7C8AA3; }
.field input:focus { border-color: var(--lime-dark); }
.auth-switch { color: var(--night-text); }
.auth-switch a { color: var(--lime); }
.error-box {
  background: rgba(220,60,60,0.12);
  border-color: rgba(240,120,120,0.35);
  color: #FFB4B4;
}

/* Balance page */
.balance-page h1 { color: var(--night-text); }
.balance-hero { color: var(--lime); }
.progress-track { background: rgba(255,255,255,0.10); }
.progress-labels { color: var(--night-text); }
.balance-note { color: #CBD5E5; }

/* Legal / static content pages */
.content-page h1, .content-page h2 { color: var(--white); }
.content-page .updated { color: var(--night-text); }
.content-page p, .content-page li { color: #C6D0DF; }

/* ── Landing: mobile ordering ─────────────────────────────
   ~99% of traffic is mobile, and the goal is signup with the least
   friction. On small screens the headline and subtitle come first,
   then the signup card, and only then the category cards. */
@media (max-width: 900px) {
  .lander-grid { display: flex; flex-direction: column; }
  .lander-grid > .signup-card { order: 1; }
  .lander-grid > div:not(.signup-card) { order: 2; }
}

/* Cash icon in the balance pill (replaces the initial letter) */
.avatar svg { width: 19px; height: 19px; display: block; }

/* ── Admin, dark ──────────────────────────────────────────── */
.admin-body { background: var(--night); }
.admin-main { color: #E8EDF5; }
.admin-card { background: var(--night-2); border-color: var(--night-line); }
.admin-card--accent { background: rgba(214,255,63,0.07); border-color: rgba(214,255,63,0.40); }
.admin-card .k, .admin-card .sub { color: var(--night-text); }
.admin-card .v { color: var(--white); }
.admin-block h2 { color: var(--white); }
.admin-count { background: rgba(255,255,255,0.08); color: var(--night-text); }
.admin-scroll { background: var(--night-2); border-color: var(--night-line); }
.admin-table thead th { background: #162034; border-bottom-color: var(--night-line); color: var(--night-text); }
.admin-table thead th a { color: var(--night-text); }
.admin-table thead th a:hover { color: var(--lime); }
.admin-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.admin-table tbody tr:hover { background: rgba(214,255,63,0.06); }
.admin-table td { color: #DCE5F0; }
.admin-table td.dim { color: var(--night-text); }
.admin-table .never { color: #6B7A90; }
.admin-empty { color: var(--night-text); }
.admin-pager a { color: var(--lime); }
.admin-pager span { color: var(--night-text); }

/* ── Language picker ─────────────────────────────────────── */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--night-line);
  color: #E8EDF5;
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit; font-size: 0.85rem; cursor: pointer;
}
.lang-btn:hover { background: rgba(255,255,255,0.12); }
.lang-btn svg { width: 17px; height: 17px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #162034;
  border: 1px solid var(--night-line);
  border-radius: 12px;
  padding: 6px;
  min-width: 190px;
  max-height: 320px; overflow-y: auto;
  z-index: 60;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.lang-menu a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 0.9rem; color: #DCE5F0; white-space: nowrap;
}
.lang-menu a:hover { background: rgba(255,255,255,0.08); }
.lang-menu a[aria-current="true"] { color: var(--lime); font-weight: 600; }

/* Header at phone widths: the 51px wordmark plus nav plus the language
   picker does not fit 375px, so scale the mark down and tighten spacing.
   ~99% of traffic is mobile, so this is the case that actually matters. */
@media (max-width: 620px) {
  .site-header-inner, .app-header-inner { padding: 10px 14px; gap: 10px; }
  .logo-img { height: 36px; }
  .site-nav { gap: 10px; font-size: 0.9rem; }
  .site-nav .btn-small { padding: 8px 14px; font-size: 0.85rem; }
  .lang-btn { padding: 6px 8px; }
  .lang-btn .lang-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Language picker modal
   ═══════════════════════════════════════════════════════════ */
.lang-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lang-modal[hidden] { display: none; }
.lang-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 16, 0.72); backdrop-filter: blur(3px); }
.lang-modal-panel {
  position: relative;
  width: 100%; max-width: 900px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #151E30;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 26px 28px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.lang-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.lang-modal-head h2 {
  font-family: 'Inter', sans-serif; font-size: 1.45rem; font-weight: 700;
  color: #fff; margin: 0;
}
.lang-modal-x {
  background: none; border: 0; cursor: pointer; padding: 6px;
  color: #98A6BC; border-radius: 8px; line-height: 0;
}
.lang-modal-x:hover { color: #fff; background: rgba(255,255,255,0.08); }
.lang-modal-x svg { width: 20px; height: 20px; }

.lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lang-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid transparent;
  color: #E3E9F2; font-size: 1rem; font-weight: 500;
}
.lang-opt:hover { background: rgba(255,255,255,0.06); }
.lang-opt.is-current {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.45);
  color: #fff;
}
.lang-opt .flag {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset;
}
.lang-opt span { flex: 1; }
.lang-tick { width: 19px; height: 19px; color: #10B981; flex: 0 0 19px; }

@media (max-width: 899px) { .lang-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) {
  .lang-grid { grid-template-columns: 1fr; }
  .lang-modal { padding: 12px; }
  .lang-modal-panel { padding: 20px 18px 22px; border-radius: 16px; }
  .lang-modal-head h2 { font-size: 1.2rem; }
}

/* Dashboard header: language button + balance pill sit together on the right.
   The wordmark shows on desktop, the icon mark on phones — where the pill and
   language button need the width. Both are in the markup; CSS picks one. */
.app-header-right { display: flex; align-items: center; gap: 12px; }
.logo-mark { display: none; }
@media (max-width: 620px) {
  .app-header .logo-full { display: none; }
  .app-header .logo-mark { display: block; height: 38px; width: 38px; }
  .app-header-right { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   Language trigger: bare globe, no button chrome, no label.
   Overrides the earlier pill styling.
   ═══════════════════════════════════════════════════════════ */
.lang-btn {
  background: none;
  border: 0;
  padding: 4px;
  color: #C7D2E2;
  line-height: 0;
  border-radius: 8px;
}
.lang-btn:hover { background: none; color: var(--lime); }
.lang-btn svg { width: 22px; height: 22px; }
.site-nav .lang { display: flex; align-items: center; }

/* The offer wall no longer carries an intro strip — those rules are gone
   rather than left dangling. */

/* ── Display-currency dropdown ────────────────────────────── */
.cur { display: flex; align-items: center; margin: 0; }
.cur-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255,255,255,0.07);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEB9CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 13px 13px;
  border: 1px solid var(--night-line);
  border-radius: 9px;
  color: #E8EDF5;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 25px 7px 10px;
  cursor: pointer;
}
.cur-select:hover { background-color: rgba(255,255,255,0.12); }
.cur-select:focus-visible { outline: 2px solid var(--lime-dark); outline-offset: 2px; }
/* The native dropdown list is drawn by the OS, so its options need an explicit
   dark background or they render white-on-white on some platforms. */
.cur-select option { background: #162034; color: #E8EDF5; }
.cur-go { margin-left: 6px; }

/* Balance page: the "amounts are approximate" note under a converted figure. */
.balance-fx {
  color: var(--night-text);
  font-size: 0.85rem;
  margin: -10px 0 24px;
  max-width: 48ch;
}

@media (max-width: 620px) {
  .cur-select { font-size: 0.8rem; padding: 6px 22px 6px 8px; background-position: right 5px center; }
  .app-header-right { gap: 6px; }
  .lang-btn svg { width: 21px; height: 21px; }
}