* { box-sizing: border-box; margin: 0; padding: 0; }
/* Reserve the scrollbar gutter on every page so centered content (incl. the
   topbar brand) doesn't shift horizontally when navigating between a scrolling
   page (the marketing landing) and a short one (the auth pages). MUST stay in
   sync with landing/styles.css. (Kaz 2026-05-30) */
html { scrollbar-gutter: stable; }

:root {
  --green: #00a85a;
  --green-light: #00d97e;
  --ink: #14171f;
  --muted: #6b7280;
  --line: #ebeef3;
  --bg: #f7f9fc;
  --card: #ffffff;

  /* Modern palette (Round 5+). Hoisted to :root so the persistent
     app topbar (which sits OUTSIDE any .home-* scope) resolves its
     border/background/text vars correctly. The duplicate definitions
     inside each .home-* block can stay — they shadow the same values
     and don't affect the topbar. */
  --m-bg:        #f6f7f9;
  --m-surface:   #ffffff;
  --m-line:      #e5e7eb;
  --m-line-2:    #d1d5db;
  --m-ink:       #0f172a;
  --m-ink-soft:  #334155;
  --m-muted:     #64748b;
  --m-faint:     #94a3b8;
  --m-green:     #00a85a;
  --m-green-2:   #00d97e;
  --m-amber:     #f59e0b;
  --m-amber-bg:  #fef3c7;
  --m-amber-ink: #92400e;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Pure white body — landing/dashboard background parity (2026-05-19).
     `--bg` (#f7f9fc) stays defined above for component hover states
     (modal-close, topbar-link, etc.) but the page canvas itself is
     white now. */
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Block 5.5-product: each home version renders its own body content
   below the persistent app topbar. The .container's outer
   max-width / padding are dropped on home + category views so each
   variant owns the full viewport (then re-imposes its own internal
   max-width). The chrome topbar element was deleted in Round 5
   (2026-05-09 evening); the persistent app topbar lives at
   #app-topbar at the page level. */
body[data-view="home"] > main.container,
body[data-view="category"] > main.container {
  max-width: none;
  padding: 0;
}

#home-root { min-height: 100vh; }
.home-stub {
  max-width: 600px;
  margin: 80px auto;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  font-size: 18px;
  color: var(--muted);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--green), var(--green-light));
  color: white; font-weight: 800; font-size: 16px;
  display: grid; place-items: center;
}
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: -0.3px; }

.user-id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
}

.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
}

.hero-left {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
  color: white;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 168, 90, 0.22);
}

.kicker {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.6px;
  opacity: 0.85;
}

.balance-headline {
  margin: 8px 0 4px;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1.5px;
  display: flex; align-items: baseline; gap: 12px;
}

/* "R$" unit indicator on the balance hero. Plain inline text, NOT a
   styled chip — see popup.css .robux-icon for the same rationale.
   Audit 2026-05-15. */
.rs-pill {
  font-size: 22px;
  font-weight: 700;
  opacity: 0.85;
  margin-right: 6px;
}

.balance-line { font-size: 16px; font-weight: 600; opacity: 0.95; }
.pending-line { font-size: 13px; opacity: 0.85; margin-top: 12px; }

/* Hero-right is now a transparent stack of two cards (email + lifetime).
   Before 2026-05-10 it was itself the single card and .email-card was
   just an inner unstyled wrapper. The card chrome moved onto each
   child below so they can read as two distinct cards.

   The grid `auto 1fr` rows make the email card take its natural
   height and the lifetime card stretch to fill the remaining space.
   That keeps the bottom of the lifetime card flush with the bottom
   of the green hero on the left (the .hero grid stretches columns
   to equal height by default). */
.hero-right {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.email-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
}
.lifetime-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.lifetime-card .lifetime-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.lifetime-card .lifetime-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-top: 2px;
}
.lifetime-card .lifetime-rs {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--green), #00d97e);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}
.lifetime-card .lifetime-usd {
  font-size: 12px;
  color: var(--muted);
}

.email-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); display: block; margin-bottom: 8px;
}

.email-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.email-card input:focus { border-color: var(--green); }
.email-card input.error-input { border-color: #dc2626; background: #fef2f2; }

/* Full-form Save/Cancel buttons. Scoped to non-compact mode so the
   .email-compact-change / .email-compact-verify rules below (lower
   specificity by class-count) can style the compact-mode buttons
   without `.email-card button` beating them on `:not()` specificity. */
.email-card:not(.email-card-compact) button {
  margin-top: 8px;
  background: var(--ink);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.email-card:not(.email-card-compact) button:hover { background: #2b303d; }

.email-help { margin-top: 8px; font-size: 12px; color: var(--muted); }
.email-verify-bad { margin-top: 8px; font-size: 11px; font-weight: 700; color: #92400e; }

/* Compact email-set row (2026-05-10). When the user has saved an
   email, collapse the big input card down to a single inline row so
   it stops dominating the page. A "change" button reopens the form;
   unverified users see a "Verify your email to redeem" hint + a
   prominent green "Verify" primary button that opens the code-entry
   modal directly (no re-send — the modal has its own Resend
   affordance). */
.email-card.email-card-compact {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-compact-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  width: 100%;
}
/* Verify row is a centered CTA group — text + button cluster as a
   unified prompt. Different alignment from the top row is intentional:
   top row is informational (info + small utility action), verify row
   is a call-to-action. */
.email-compact-verify-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  width: 100%;
}
.email-compact-label { color: var(--muted); flex-shrink: 0; }
.email-compact-addr {
  font-weight: 700;
  flex: 1;
  min-width: 0;
  /* Truncate long emails with ellipsis instead of wrapping to a
     second line. Full address is in the `title` attribute (hover
     to see it) and editable via the [change] button. Industry-
     standard pattern for narrow containers (GitHub email settings,
     Stripe billing). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-compact-verified { color: var(--green); font-weight: 700; font-size: 12px; }
.email-compact-unverified {
  color: #92400e;
  font-weight: 600;
  font-size: 12px;
}
.email-compact-verify {
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--green);
  color: white;
  border: 1px solid var(--green);
}
.email-compact-verify:hover { background: #009548; border-color: #009548; }
/* Muted note pointing users to /account for email changes (Capital
   One Shopping model: one email field, managed as account identity
   from settings). */
.email-compact-note {
  font-size: 12px;
  color: var(--muted);
  width: 100%;
}
.email-compact-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.email-compact-note a:hover { color: var(--green); }
/* Soft separator between the email row and the verify-prompt row so
   the two visual concerns read as related-but-distinct. */
.email-card-unverified .email-compact-verify-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* No-email edge-state. Every signed-in user should have an email
   (signup requires it) — this only renders for legacy or post-delete
   anomalies. Click "Set email" opens the same change-email modal. */
.email-empty {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.email-empty-btn {
  margin-left: auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--green);
  color: white;
  border: 1px solid var(--green);
  border-radius: 8px;
  cursor: pointer;
}
.email-empty-btn:hover { background: #009548; border-color: #009548; }

.section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Variant that puts an action button on the right (e.g. the
   "Missing Robux?" link in the Transactions header). */
.section-title-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Now an <a href="/missing-robux">, not a button. Same visual
   styling as the rest of the dashboard's quiet text links. */
.missing-trip-link {
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--green-1, #00a85a);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
}
.missing-trip-link:hover {
  background: rgba(0, 168, 90, 0.08);
  text-decoration: underline;
}

.redeem-section, .dev-section, section { margin-bottom: 36px; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

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

.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tier-usd { font-size: 13px; color: var(--muted); font-weight: 600; }
.tier-robux {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--ink); margin: 4px 0 12px;
}
.tier-robux .rs-mini {
  font-size: 13px; background: var(--bg); padding: 2px 8px;
  border-radius: 6px; margin-right: 6px; color: var(--green);
}

.tier button {
  width: 100%;
  border: none;
  background: var(--green);
  color: white;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
}

.tier button:hover:not(:disabled) { background: var(--green-light); }
.tier button:disabled { background: #c7cdd6; cursor: default; }

.tier .tier-locked-reason {
  font-size: 11px; color: var(--muted); margin-top: 6px; min-height: 14px;
}

/* Locked-tier filling progress (2026-05-10). Replaces the bare
   "Earn R$X more" line for tiers the user can't yet afford — a small
   bar fills as their balance climbs toward the tier's USD target. */
.tier-progress {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.tier-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.tier-progress-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--green), #00d97e);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.tier-progress-meta {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.dev-section details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
}
.dev-section summary {
  font-weight: 700; font-size: 13px; cursor: pointer;
  color: var(--muted); user-select: none;
}
.dev-body { margin-top: 14px; }
.dev-help { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.dev-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dev-row select, .dev-row input {
  flex: 1; min-width: 120px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; outline: none;
}
.dev-row button {
  background: var(--ink); color: white; border: none;
  border-radius: 8px; padding: 8px 16px; font-weight: 700;
  font-size: 13px; cursor: pointer;
}

.card-list { display: flex; flex-direction: column; gap: 8px; }

/* /earnings has two long histories (transactions + redemptions) that
   grow unbounded as the user shops. Cap each list and let it scroll
   internally so /earnings stays one viewport tall and "Redemptions"
   doesn't get pushed to the bottom of an ever-growing page. The
   roughly-7-row height (~420px) is calibrated to show 6 rows at the
   current ~64px row height before a scrollbar appears.

   Scoped to the dashboard view so other places that reuse .card-list
   (none today; future-safety) aren't affected. */
body[data-view="dashboard"] #transactions.card-list,
body[data-view="dashboard"] #redemptions.card-list {
  max-height: 480px;
  overflow-y: auto;
  /* Padding on the right gives the scrollbar room without crowding row content. */
  padding-right: 4px;
  /* Subtle inset border so the bounded list reads as "scroll inside me"
     rather than "abruptly cut off." */
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: var(--card);
}
/* Empty-state messages inside the bounded list shouldn't get the
   inner border treatment if no rows are present; the empty-state
   .row already has its own card chrome. */
body[data-view="dashboard"] #transactions.card-list:empty,
body[data-view="dashboard"] #redemptions.card-list:empty {
  display: none;
}

/* Transactions + Redemptions side-by-side (2026-05-10). Replaces the
   stacked layout so users don't have to scroll past the entire
   transaction history to see their redemptions. Collapses to single
   column on narrower screens. */
.histories-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
@media (max-width: 880px) {
  .histories-row { grid-template-columns: 1fr; }
}
.history-col { min-width: 0; }

.row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}

.row-left .row-title { font-weight: 700; font-size: 14px; }
.row-left .row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.row-right { text-align: right; }
.row-amount { font-weight: 800; font-size: 16px; color: var(--green); }
.row-amount.pending { color: #c08400; }
/* Reversals (returns, chargebacks) render with a muted red so they
   visually pull AWAY from the green earned-money color but don't
   shout "error" the way the failed redemption row does. */
.row-amount.reversal { color: #b91c1c; }
.row-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;
}
.row-status.confirmed { background: #e6f7ee; color: var(--green); }
.row-status.pending { background: #fff4d6; color: #b07300; }
.row-status.fulfilled { background: #e6f7ee; color: var(--green); }
.row-status.failed { background: #fde2e1; color: #b91c1c; }
.row-status.processing { background: #e6f7ee; color: var(--green); }
.row-status.reversal { background: #fde2e1; color: #b91c1c; }

/* Amber pill alongside the status pill on simulated transactions
   (demo-mode auto-credits + dev-tool simulate-purchase) and sandbox
   redemptions. Same palette as the welcome / popup demo notice so the
   "this isn't real" cue is consistent across surfaces. */
.row-flag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
  margin-left: 4px;
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Phase 1 sandbox banner at the top of the dashboard. */
.phase-banner {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 18px 0 4px;
}
.phase-banner b { color: #78350f; }
.phase-banner span { display: inline; }

/* Age-affirmation reminder. Same amber palette as the phase banner so
   users learn "amber means compliance" across surfaces. Sits below the
   phase banner when both are visible (rare — only on first login of a
   new account). */
.age-gate-banner {
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 18px 0 4px;
}
.age-gate-banner b {
  color: #78350f;
  display: inline;
  margin-right: 4px;
}
.age-gate-banner span { display: inline; }

.row-confirm-btn {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer;
  font-weight: 600; color: var(--muted);
}
.row-confirm-btn:hover { background: white; color: var(--ink); }

.empty {
  background: var(--card); border: 1px dashed var(--line);
  border-radius: 12px; padding: 24px;
  text-align: center; color: var(--muted); font-size: 13px;
}

.code-pill {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg); padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white;
  padding: 12px 20px; border-radius: 12px;
  font-weight: 600; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 100;
  animation: toastIn 0.25s ease;
}

@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* ---- Modal ---- */
.modal-shroud {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: grid;
  place-items: center;
  z-index: 200;
  animation: shroudIn 0.16s ease;
}
.modal-shroud[hidden] { display: none; }
@keyframes shroudIn { from { opacity: 0 } to { opacity: 1 } }

/* OAuth consent modal — opens on /sign-up when a user clicks
   "Sign up with Google" without first ticking the 18+ checkbox.
   Mirror of landing/welcome.html's modal, scoped to the SPA. */
.consent-modal-shroud {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 1000;
  animation: shroudIn 0.16s ease;
}
.consent-modal-shroud[hidden] { display: none; }
.consent-modal-card {
  position: relative;
  background: white;
  border-radius: 18px;
  padding: 32px 30px 28px;
  max-width: 460px; width: 100%;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
  animation: modalIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.consent-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: var(--muted, #6b7280);
  font-size: 22px; line-height: 1; cursor: pointer;
  border-radius: 8px;
}
.consent-modal-close:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--ink, #14171f);
}
.consent-modal-title {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
  color: var(--ink, #14171f);
}
.consent-modal-sub {
  font-size: 14px; color: var(--ink-soft, #4b5563);
  line-height: 1.5;
  margin: 0 0 20px;
}
.consent-modal-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5;
  color: var(--ink, #14171f);
  padding: 12px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 16px;
}
.consent-modal-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--green-1, #00a85a);
  flex: none;
}
.consent-modal-checkbox a { color: var(--green-1, #00a85a); text-decoration: underline; }
.consent-modal-submit {
  width: 100%;
  padding: 14px 18px;
  border: none; border-radius: 12px;
  background: var(--green-1, #00a85a);
  color: white;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.consent-modal-submit:hover:not(:disabled) { background: #00d97e; }
.consent-modal-submit:disabled {
  background: #9ca3af; cursor: not-allowed;
}

.modal-card {
  background: white;
  border-radius: 18px;
  padding: 28px;
  width: 460px;
  max-width: 92vw;
  position: relative;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
  animation: modalIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes modalIn {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }

.modal-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.modal-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.modal-summary {
  background: var(--bg);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.modal-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
}
.modal-summary-row.total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 6px;
  font-weight: 700;
}
.modal-summary-row .label { color: var(--muted); }
.modal-summary-row .value { font-weight: 700; }
.modal-summary-row .value-sub {
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
}

.modal-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.modal-input:focus { border-color: var(--green); }
.modal-input.error { border-color: #dc2626; }
.modal-input.code-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  padding: 14px;
}

.modal-error {
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 8px;
}

.modal-hint {
  background: #fffbeb;
  color: #92400e;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.modal-btn-primary {
  background: var(--green);
  color: white;
}
.modal-btn-primary:hover:not(:disabled) { background: var(--green-light); }
.modal-btn-primary:disabled { background: #9ca3af; cursor: default; }
.modal-btn-quiet {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.modal-btn-quiet:hover { background: white; border-color: #d1d5db; }

.modal-success-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-light));
  color: white;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 32px;
  font-weight: 700;
}

.modal-code-display {
  background: var(--bg);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  margin: 12px 0 4px;
  letter-spacing: 1px;
}

/* =====================================================================
   Auth pages — sign-in / sign-up / forgot / reset / account
   ===================================================================== */

.brand { text-decoration: none; color: inherit; }

/* Centered card used by every auth view. Compressed vertical spacing
   (Kaz 2026-05-21) so the /sign-up page's Google OAuth button stays
   above-the-fold on common laptop viewports (1280×800, 1366×768).
   The form+checkbox+OAuth stack used to push past the fold on the
   smaller of those when the app topbar is also rendered above. */
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 32px 28px;
  max-width: 420px;
  /* Center every auth view AS IF the card were a fixed reference height (~440px),
     so all auth cards (sign-in / sign-up / forgot / reset) get the SAME top
     offset regardless of their actual height — they line up identically when
     switching, and the offset equals the centered position for the reference
     height so it reads as vertically centered, not pinned to the top (Kaz
     2026-05-30). 50vh − (72px topbar + 220px half-card). clamp floors it on
     short screens and caps it on tall ones. */
  margin: clamp(40px, calc(50vh - 292px), 320px) auto 24px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.auth-card-loading {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 64px 32px;
}

.auth-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
}
.auth-sub {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 14.5px;
  outline: none;
  font-family: inherit;
  width: 100%;
}
.auth-input:focus { border-color: var(--green); }
.auth-input.error-input { border-color: #dc2626; background: #fef2f2; }
.auth-input::placeholder {
  color: #9aa1ad;
  opacity: 1; /* Firefox dims placeholders by default; normalize across browsers */
}

/* Single-line checkbox label vertically centers with the box. The
   previous `align-items: flex-start` + 3px margin-top hack was for
   multi-line text; for a one-line "I am 18 years of age or older."
   center-align reads cleaner and stays aligned at any line-height. */
.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 4px;
  cursor: pointer;
  user-select: none;
}
.auth-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--green);
  flex: none;
}

.auth-button {
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 18px;
  width: 100%;
}
.auth-button-primary {
  background: var(--green);
  color: white;
}
.auth-button-primary:hover:not(:disabled) { background: var(--green-light); }
.auth-button-primary:disabled { background: #9ca3af; cursor: default; }

.auth-button-quiet {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  width: auto;
  padding: 9px 14px;
  font-size: 13px;
  margin-top: 8px;
}
.auth-button-quiet:hover { background: white; border-color: #d1d5db; }

.auth-button-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  width: auto;
  padding: 9px 14px;
  font-size: 13px;
  margin-top: 8px;
}
.auth-button-danger:hover { background: #fee2e2; }

.auth-error {
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 6px;
}

.auth-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 16px;
}

/* Fine-print disclosure block. Sits at the very bottom of the auth
   card after the action links. Two-paragraph layout reads less dense
   than one packed line. */
.auth-fineprint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.auth-fineprint p { margin: 0; }
.auth-fineprint p + p { margin-top: 8px; }
.auth-fineprint a { color: var(--ink); }

.auth-links {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
/* Non-link prompt text in the auth-links row (e.g. "Already have an
   account?" before the green "Sign in" link). Stays muted so only the
   actionable verb is colored. */
.auth-prompt {
  color: var(--muted);
  font-weight: 500;
}
.auth-links a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.auth-links a:hover { text-decoration: underline; }
.auth-link-sep {
  margin: 0 6px;
  color: var(--line);
}

/* OAuth row + per-provider button. The Google button uses the official
   palette (#fff / #1f1f1f / #4285F4 logo) per Google's brand guidelines
   for "Sign in with Google" buttons. Facebook is styled the same way
   but with FB blue (#1877F2). Buttons stack on narrow screens. */
.oauth-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.oauth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 80ms ease;
}
.oauth-button:hover { background: var(--bg); }
.oauth-button svg { width: 18px; height: 18px; flex: none; }

.oauth-button.facebook {
  background: #1877F2;
  border-color: #1877F2;
  color: white;
}
.oauth-button.facebook:hover { background: #166fe5; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 12px;
  color: var(--muted);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

/* =====================================================================
   Account page — sectioned settings under one card
   ===================================================================== */

.account-page {
  max-width: 640px;
  margin: 32px auto;
}

.account-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 24px;
}

.account-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.account-section.account-danger {
  border-color: #fecaca;
  background: #fffafa;
}

.account-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.account-value {
  font-weight: 600;
  font-size: 14.5px;
}

.account-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 6px;
}
.account-badge.verified { background: #e6f7ee; color: var(--green); }
.account-badge.unverified { background: #fef3c7; color: #92400e; }

.account-email-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.account-email-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.account-email-btn:hover { border-color: var(--ink); background: var(--bg); }
.account-email-btn-verify {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.account-email-btn-verify:hover { background: #009548; border-color: #009548; }

.account-help {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 4px;
}

/* Email-preferences toggle. Account-scoped switch (track + thumb) in the
   brand green for "on" — distinct from the topbar's amber demo toggle,
   which is a caution affordance. Label/help on the left, switch right. */
.account-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.account-toggle-copy { flex: 1; min-width: 0; }
.account-toggle-copy .account-help { margin-top: 4px; }
.account-toggle {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.account-toggle-track {
  position: relative;
  display: block;
  width: 40px; height: 22px;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.account-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.account-toggle.is-on .account-toggle-track { background: var(--green); }
.account-toggle.is-on .account-toggle-thumb { left: 20px; }
.account-toggle:disabled { opacity: 0.5; cursor: default; }

.account-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.account-provider-row:first-child { border-top: none; }
.account-provider-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.account-provider-name svg { width: 18px; height: 18px; flex: none; }
.account-provider-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Status indicator on each Sign-in-methods row. Was previously
   styled as a tinted pill that looked clickable ("SET" green pill).
   Now flat text in green with a check mark so it reads as a state
   marker, not a button. Kaz feedback 2026-05-10. */
.account-provider-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 0;
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
}
.account-provider-status.linked {
  color: var(--green);
}

/* Active-sessions list — Google "Your devices" pattern. Per-row sign-out
   on each non-current session. Current session is highlighted but not
   actionable (sign-out via the dedicated button, which clears the cookie
   correctly). */
.session-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.session-row:first-child { border-top: none; }
.session-row.current { background: #f6fbf8; }
.session-info { font-size: 13.5px; }
.session-device {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.session-current-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #e6f7ee;
  color: var(--green);
}
.session-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.session-revoke-btn {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.session-revoke-btn:hover { background: white; border-color: #d1d5db; }

/* Demoted delete-account section. Industry standard (GitHub, Spotify,
   Apple ID, Notion): small, plain, link-style trigger at the bottom of
   the page. Real friction belongs in the confirm modal, not in visual
   prominence here. */
.account-delete {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 16px 20px;
  margin-top: 20px;
}
.account-section-title-small {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.account-help-small {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.account-delete-btn {
  background: transparent;
  border: none;
  color: #b91c1c;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-delete-btn:hover { color: #991b1b; }

/* Modal danger button — used by the delete-confirm modal. Distinct from
   the demoted account-delete-btn that opens the modal: once the user is
   IN the confirm modal, the button needs to look like a real button. */
.modal-btn-danger {
  background: #dc2626;
  color: white;
}
.modal-btn-danger:hover:not(:disabled) { background: #b91c1c; }


/* === Shared modern topbar (Round 5 polish: parent #app-topbar is
   sticky now; we drop the child's individual sticky positioning).  */
.modern-topbar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--m-line);
}
.modern-topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: 76px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.modern-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.modern-brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--m-green), var(--m-green-2));
  color: white; font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
  letter-spacing: -0.3px;
}
.modern-brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }

.modern-search {
  position: relative;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.modern-search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--m-faint);
  pointer-events: none;
}
.modern-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--m-line);
  border-radius: 10px;
  background: var(--m-surface);
  padding: 0 14px 0 38px;
  font-size: 14px;
  color: var(--m-ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.modern-search input::placeholder { color: var(--m-faint); }
.modern-search input:focus {
  border-color: var(--m-green);
  box-shadow: 0 0 0 3px rgba(0,168,90,0.12);
}

.modern-topbar-right {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
}
.modern-demo-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--m-amber-bg);
  color: var(--m-amber-ink);
  border-radius: 999px;
}

.modern-balance-chip,
.modern-account-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
  text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.modern-balance-chip:hover,
.modern-account-chip:hover {
  border-color: var(--m-line-2);
}
.modern-balance-chip:hover { transform: translateX(1px); }
.modern-balance-chip:hover .modern-balance-caret {
  color: var(--m-green);
  transform: translateX(2px);
}
.modern-balance-bullet {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--m-green);
  box-shadow: 0 0 0 3px rgba(0,168,90,0.18);
}
.modern-balance-amount { font-variant-numeric: tabular-nums; }
.modern-balance-caret {
  color: var(--m-faint);
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.modern-account-chip {
  width: 36px; padding: 0;
  justify-content: center;
  background: var(--m-ink);
  color: white;
  font-size: 13px;
  font-weight: 700;
  border-color: transparent;
}

.modern-balance-menu,
.modern-account-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 280px;
  max-width: 320px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.06);
  padding: 12px;
  z-index: 40;
}
.modern-balance-menu[hidden],
.modern-account-menu[hidden] { display: none !important; }
.modern-menu-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 4px;
  border-bottom: 1px solid var(--m-line);
}
.modern-menu-row:last-of-type { border-bottom: none; }
.modern-menu-label {
  font-size: 12px;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.modern-menu-value {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.modern-menu-value b { font-weight: 700; }
.modern-menu-value small { color: var(--m-faint); font-size: 12px; font-weight: 400; }
.modern-menu-cta {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--m-green);
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.modern-menu-cta:hover { background: #008f4c; }

.modern-account-email {
  font-size: 12px;
  color: var(--m-muted);
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--m-line);
  margin-bottom: 6px;
  word-break: break-all;
}
.modern-account-link {
  display: block; width: 100%;
  padding: 8px;
  text-align: left;
  text-decoration: none;
  color: var(--m-ink);
  font: inherit;
  font-size: 13px;
  background: none; border: none;
  cursor: pointer;
  border-radius: 6px;
}
.modern-account-link:hover { background: var(--m-bg); }
.modern-account-signout {
  border-top: 1px solid var(--m-line);
  margin-top: 4px;
  padding-top: 12px;
  color: var(--m-muted);
}

/* Refer & Earn dropdown item — two-line treatment with bold title
   carrying the $10 bonus amount and a muted subtitle explaining
   the trigger. Sits between Account and Sign out. */
.modern-account-refer { padding: 10px 8px; }
.modern-account-refer-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
  line-height: 1.3;
}
.modern-account-refer-sub {
  display: block;
  font-size: 11px;
  color: var(--m-ink-soft);
  line-height: 1.35;
  margin-top: 2px;
  white-space: normal;
  word-wrap: break-word;
}

/* === Shared banner === */
.modern-banner {
  max-width: 1440px;
  margin: 16px auto 0;
  padding: 12px 24px;
  background: var(--m-amber-bg);
  color: var(--m-amber-ink);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  font-size: 13px;
}

/* === Shared main + sections === */
.modern-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}
.modern-section { margin-bottom: 36px; }
.modern-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.modern-section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.modern-section-count {
  font-size: 12px;
  color: var(--m-faint);
  font-variant-numeric: tabular-nums;
}

/* === Shared category chips === */
.modern-cats {
  display: flex; gap: 4px;
  overflow-x: auto;
  padding: 8px 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--m-line);
  scrollbar-width: none;
}
.modern-cats::-webkit-scrollbar { display: none; }
.modern-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.modern-cat:hover { color: var(--m-ink); background: var(--m-surface); }
.modern-cat.is-active {
  color: var(--m-ink);
  background: var(--m-surface);
  border-color: var(--m-line);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.modern-cat-count {
  font-size: 11px;
  color: var(--m-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* === Shared cards === */
.modern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.modern-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.modern-card {
  display: flex; flex-direction: column;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  overflow: hidden;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}
.modern-card:hover {
  transform: translateY(-2px);
  border-color: var(--m-line-2);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
.modern-card-media {
  position: relative;
  height: 88px;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, black 30%) 100%);
  display: grid; place-items: center;
}
.modern-card-mono {
  position: absolute;
  font-size: 36px;
  font-weight: 800;
  color: rgba(255,255,255,0.18);
  letter-spacing: -1px;
  pointer-events: none;
}
.modern-card-media img {
  width: 36px; height: 36px;
  background: white;
  padding: 6px;
  border-radius: 9px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.modern-card-body {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px 14px;
}
.modern-card-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--m-ink);
}
.modern-card-rate {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px;
  color: var(--m-muted);
}
.modern-card-rate b {
  font-size: 14px;
  font-weight: 700;
  color: var(--m-green);
  font-variant-numeric: tabular-nums;
}
.modern-card-compact { /* used in strips */ }

.modern-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--m-muted);
  font-size: 14px;
  background: var(--m-surface);
  border: 1px dashed var(--m-line);
  border-radius: 12px;
}

/* === Shared footer === */
.modern-footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  border-top: 1px solid var(--m-line);
}
.modern-footer-links {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.modern-footer-links a {
  color: var(--m-muted);
  text-decoration: none;
  font-size: 13px;
}
.modern-footer-links a:hover { color: var(--m-ink); }
.modern-footer p {
  color: var(--m-faint);
  font-size: 12px;
  line-height: 1.6;
}


/* ============================================================ */
/*   Demo-mode toggle + preview banner (modern topbar shared)    */
/*   Block 5.5-product, 2026-05-09. Bidirectional sync with the  */
/*   extension popup's demo toggle.                              */
/* ============================================================ */

.modern-demo-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 12px 0 8px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--m-muted);
  transition: all 0.15s ease;
}
.modern-demo-toggle:hover { border-color: var(--m-line-2); color: var(--m-ink); }
.modern-demo-toggle-track {
  position: relative;
  width: 28px; height: 16px;
  background: var(--m-line);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.modern-demo-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(15,23,42,0.2);
  transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-demo-toggle-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.modern-demo-toggle.is-on {
  background: var(--m-amber-bg);
  border-color: #fcd34d;
  color: var(--m-amber-ink);
}
.modern-demo-toggle.is-on .modern-demo-toggle-track {
  background: var(--m-amber);
}
.modern-demo-toggle.is-on .modern-demo-toggle-thumb {
  left: 14px;
}

@media (max-width: 720px) {
  .modern-demo-toggle-label { display: none; }
  .modern-demo-toggle { padding: 0 8px; }
}

/* Preview banner — inline, below the topbar, full-width.
   Visible only when demo is on. */
.modern-demo-banner {
  /* Round 5 polish: full-width sticky banner that bridges the
     viewport edges. Inner div re-applies the 1280px content cap so
     the message aligns with the topbar's content below. */
  background: linear-gradient(90deg, var(--m-amber-bg) 0%, #fff8e1 100%);
  border-bottom: 1px solid #fcd34d;
  color: var(--m-amber-ink);
  font-size: 13px;
  line-height: 1.5;
}
.modern-demo-banner-inner {
  display: flex; align-items: center; gap: 12px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 24px;
}
.modern-demo-banner b { font-weight: 700; }
.modern-demo-banner-dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--m-amber);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
  animation: modernDemoBannerPulse 2.5s ease-in-out infinite;
}
@keyframes modernDemoBannerPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(245,158,11,0.06); }
}

/* ============================================================ */
/*   HOME — Round 4: Rakuten-inspired layouts                    */
/*   Both share the modern palette + topbar + cards.             */
/* ============================================================ */

.home-marquee {
  --m-bg:        #f6f7f9;
  --m-surface:   #ffffff;
  --m-line:      #e5e7eb;
  --m-line-2:    #d1d5db;
  --m-ink:       #0f172a;
  --m-ink-soft:  #334155;
  --m-muted:     #64748b;
  --m-faint:     #94a3b8;
  --m-green:     #00a85a;
  --m-green-2:   #00d97e;
  --m-amber:     #f59e0b;
  --m-amber-bg:  #fef3c7;
  --m-amber-ink: #92400e;

  /* Pure white canvas (2026-05-19, parity with landing). The --m-bg
     gray stays defined above for component-level hover states (cat
     hover, account-link hover, demo-toggle thumb track). */
  background: #ffffff;
  color: var(--m-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}
.home-marquee * { box-sizing: border-box; }

/* ============================================================ */
/*   Marquee — rotating hero carousel + Rakuten-density stripes  */
/* ============================================================ */

.marquee-cats {
  /* Round 5 polish: not sticky. The persistent #app-topbar above
     is the sticky group; the category nav scrolls with content.
     White canvas (2026-05-19, landing parity). */
  background: #ffffff;
  border-bottom: 1px solid var(--m-line);
}
.marquee-cats-inner {
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 24px;
}
.marquee-cats-inner::-webkit-scrollbar { display: none; }
.marquee-cat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 14px;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.12s ease;
}
.marquee-cat:hover {
  border-color: var(--m-green);
  color: var(--m-green);
  transform: translateY(-1px);
}
.marquee-cat-count {
  font-size: 11px;
  color: var(--m-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.marquee-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

/* /welcome view — dedicated FTUE page in the dashboard SPA. Uses the
   persistent app topbar (brand + search + demo toggle + balance chip
   + account dropdown), so chrome matches the rest of the signed-in
   surfaces. Replaces the FTUE banner that briefly lived at the top
   of the marquee home (Kaz 2026-05-14). */
.welcome-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.welcome-view-hero {
  text-align: center;
  margin-bottom: 28px;
}
.welcome-view-title {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.8px;
  margin: 0 0 8px;
  color: var(--ink);
}
.welcome-view-sub {
  font-size: 16px; color: var(--ink-soft);
  margin: 0;
}
.welcome-view-cta {
  display: flex; justify-content: center;
  margin-top: 28px;
}
.welcome-view-button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--green-1, #00a85a);
  color: white;
  font-weight: 800;
  font-size: 15px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 168, 90, 0.25);
}
.welcome-view-button:hover { background: #00d97e; }

/* Vertical stack of FTUE steps. Single column so each step reads as
   a deliberate next-action rather than a side-by-side feature list.
   Step numbers carry the brand green so the page feels like part of
   GrowRo, not a generic onboarding template (Kaz 2026-05-14). */
.ftue-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.ftue-step {
  display: flex; gap: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  align-items: flex-start;
}
.ftue-step-num {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--green-1, #00a85a);
  color: white;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 168, 90, 0.25);
}
.ftue-step-body { flex: 1; min-width: 0; }
.ftue-step-title {
  font-size: 15.5px; font-weight: 800;
  letter-spacing: -0.1px;
  margin: 0 0 6px;
  color: var(--ink);
}
.ftue-step-text {
  font-size: 14px; color: var(--ink-soft);
  line-height: 1.55;
}
.ftue-chip {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  margin: 0 2px;
}

.marquee-hero {
  position: relative;
  margin-bottom: 36px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
}
.marquee-hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.marquee-hero-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  /* Horizontal padding leaves clear gutters for the prev/next chevrons
     (36px nav at left:16/right:16 → 52px occupied → 68px gives breathing room). */
  padding: 40px 72px;
  min-height: 220px;
}
.marquee-hero-slide-neutral {
  background: var(--m-surface);
  color: var(--m-ink);
}
.marquee-hero-slide-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  color: var(--m-ink);
}
.marquee-hero-slide-progress {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 60%, #bbf7d0 100%);
  color: var(--m-ink);
}
.marquee-hero-slide-progress .marquee-hero-eyebrow {
  color: var(--m-green);
  opacity: 1;
}

.marquee-hero-progress {
  margin: 14px 0 22px;
  max-width: 540px;
}
.marquee-hero-progress-bar {
  height: 10px;
  background: rgba(0, 168, 90, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.marquee-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--m-green) 0%, var(--m-green-2) 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.marquee-hero-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-size: 12px;
  color: var(--m-muted);
  font-variant-numeric: tabular-nums;
}
.marquee-hero-progress-meta b { color: var(--m-ink); font-weight: 700; }
.marquee-hero-progress-pct {
  color: var(--m-green);
  font-weight: 700;
}
.marquee-hero-slide-brand {
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, black 30%) 100%);
  color: white;
  position: relative;
}
.marquee-hero-slide-brand::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.marquee-hero-meta { position: relative; z-index: 1; max-width: 640px; }
.marquee-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  opacity: 0.85;
}
.marquee-hero-slide-green .marquee-hero-eyebrow { color: var(--m-green); opacity: 1; }
.marquee-hero-slide-neutral .marquee-hero-eyebrow { color: var(--m-muted); opacity: 1; }
.marquee-hero-title {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.marquee-hero-body {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 22px;
  opacity: 0.92;
}
.marquee-hero-cta {
  display: inline-block;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.marquee-hero-slide-neutral .marquee-hero-cta {
  background: var(--m-ink);
  color: white;
}
.marquee-hero-slide-green .marquee-hero-cta {
  background: var(--m-green);
  color: white;
}
.marquee-hero-slide-brand .marquee-hero-cta {
  background: rgba(255,255,255,0.95);
  color: var(--m-ink);
}
.marquee-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.marquee-hero-art {
  position: relative; z-index: 1;
}
.marquee-hero-art img {
  width: 88px; height: 88px;
  background: white;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.marquee-hero-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--m-line);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--m-ink);
  cursor: pointer;
  z-index: 2;
  display: grid; place-items: center;
  transition: all 0.15s ease;
}
.marquee-hero-nav:hover {
  background: white;
  border-color: var(--m-line-2);
  transform: translateY(-50%) scale(1.05);
}
.marquee-hero-nav-prev { left: 16px; }
.marquee-hero-nav-next { right: 16px; }
.marquee-hero-dots {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 2;
}
.marquee-hero-dot {
  width: 8px; height: 8px;
  background: rgba(15,23,42,0.25);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, width 0.15s ease;
}
.marquee-hero-slide-brand ~ .marquee-hero-dots .marquee-hero-dot { background: rgba(255,255,255,0.5); }
.marquee-hero-dot.is-active {
  background: var(--m-ink);
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .marquee-hero-slide {
    grid-template-columns: 1fr;
    padding: 28px 56px;
    text-align: center;
  }
  .marquee-hero-art { display: none; }
}

/* === Stripes === */
.marquee-stripe {
  margin-bottom: 36px;
  scroll-margin-top: 144px;
}
.marquee-stripe-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.marquee-stripe-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.marquee-stripe-count {
  font-size: 12px;
  color: var(--m-faint);
  font-variant-numeric: tabular-nums;
}
.marquee-stripe-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 4px 16px;
  scrollbar-width: thin;
}
.marquee-stripe-scroll::-webkit-scrollbar { height: 6px; }
.marquee-stripe-scroll::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,0.15);
  border-radius: 3px;
}

.marquee-empty {
  padding: 48px 24px;
  text-align: center;
  background: var(--m-surface);
  border: 1px dashed var(--m-line);
  border-radius: 14px;
  margin-bottom: 36px;
}
.marquee-empty-headline {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.marquee-empty-body {
  color: var(--m-muted);
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
}


/* ============================================================ */
/*   Persistent app topbar (Round 5, 2026-05-09 evening)         */
/*   Wraps the modern topbar so it can sit at the page level.    */
/* ============================================================ */

/* Persistent app-level sticky group (Round 5 polish, 2026-05-09
   evening). Demo banner + topbar + age banner all stick together
   here. Their individual sticky positioning was redundant — only
   the parent needs to be sticky for the children to ride along. */
#app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--m-bg);
}
.app-topbar-minimal {
  position: sticky; top: 0; z-index: 30;
  /* Match the landing header (landing/styles.css header.nav) exactly: same
     translucent-white + blur background and the same border color (#e7eaf0 =
     landing's --line, not app.css's #ebeef3 --line) so the bar is
     pixel-identical across the landing↔auth transition (Kaz 2026-05-30). */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid #e7eaf0;
}
.app-topbar-minimal .app-topbar-inner {
  /* Match the landing header (landing/styles.css .nav-inner) exactly so the
     brand sits at the same x and the bar is the same height when crossing
     between the marketing landing and the auth pages — no jump (Kaz
     2026-05-30). Landing uses max-width 980px + padding 14px 24px. */
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center;
}
/* Brand mark + name on the minimal (auth) topbar matched to the landing's
   .brand-mark / .brand-name (32px mark, 8px radius, 16px glyph, weight 800).
   Scoped to .app-topbar-minimal so the authed home/dashboard topbar is
   untouched. */
.app-topbar-minimal .modern-brand-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: -0.5px;
}
.app-topbar-minimal .modern-brand-name { font-weight: 800; }

/* The chrome topbar previously contributed bottom margin (32px)
   that pushed view content down. With the global app topbar now
   sitting at the page level, we add a small top buffer on
   /earnings + /account so their content doesn't sit flush against
   the topbar's border. /category gets its own internal padding
   so it's exempt.

   Width is bumped to 1280px to match the home page's `.marquee-main`
   so /earnings doesn't feel pinched next to / (Kaz 2026-05-10). */
body[data-view="dashboard"] > main.container,
body[data-view="account"] > main.container {
  max-width: 1440px;
  padding-top: 24px;
}

/* ============================================================ */
/*   Marquee stripe styling — Round 5 (eyebrow + see-all)        */
/* ============================================================ */

.marquee-stripe-titles { display: flex; flex-direction: column; gap: 2px; }
.marquee-stripe-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-muted);
}
.marquee-stripe-seeall {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.12s ease;
}
.marquee-stripe-seeall:hover { border-bottom-color: var(--m-green); }

/* ============================================================ */
/*   Marquee — visual signatures that differentiate from Rakuten  */
/*   (Round 5). Asymmetric hero corner, brand-green underline    */
/*   accent on stripe titles, mono-tabular rate, subtle texture. */
/* ============================================================ */

.home-marquee .marquee-hero {
  border-radius: 18px 18px 18px 4px;          /* asymmetric corner — small visual signature */
  position: relative;
  overflow: hidden;
}
.home-marquee .marquee-hero::after {
  /* Diagonal brand accent band that peeks from the lower-right.
     Distinctive without being loud — Rakuten doesn't have this. */
  content: "";
  position: absolute;
  bottom: -40px; right: -40px;
  width: 200px; height: 80px;
  background: linear-gradient(135deg, transparent 0%, rgba(0,168,90,0.12) 100%);
  transform: rotate(-12deg);
  pointer-events: none;
}
/* (Removed: the brand-green underline-on-titles signature.
   It read as ugly per Kaz. Marquee's other distinctive
   signatures — asymmetric hero corner + diagonal accent band — stay.) */

/* ============================================================ */
/*   Category page — /category/:id dedicated view                */
/* ============================================================ */

.category-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.category-page-crumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.category-page-crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.category-page-crumbs a:hover { color: var(--ink); }
.category-page-crumb-sep { margin: 0 8px; color: #cbd5e1; }
.category-page-crumb-current { color: var(--ink); font-weight: 600; }

.category-page-head {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}
.category-page-title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 8px;
}
.category-page-sub {
  font-size: 14px;
  color: var(--muted);
}

.category-page-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.category-page-cat {
  display: inline-block;
  padding: 7px 14px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.12s ease;
}
.category-page-cat:hover {
  border-color: #00a85a;
  color: #00a85a;
  transform: translateY(-1px);
}

.category-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.category-page-empty {
  padding: 64px 32px;
  text-align: center;
  background: white;
  border: 1px dashed #e5e7eb;
  border-radius: 14px;
}
.category-page-empty-headline {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.category-page-empty-body {
  color: var(--muted);
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto;
}

/* ============================================================ */
/*   Refer & Earn — /account/referrals (block 10 step 14,         */
/*   2026-05-17). Wider than /account (640px) to accommodate the  */
/*   two-column action row; stacks to single-column under 720px   */
/*   (covers most phones in portrait).                            */
/* ============================================================ */

.referrals-page {
  max-width: 880px;
  margin: 32px auto;
  padding: 0 24px;
}

.ref-loading,
.ref-error {
  text-align: center;
  color: var(--muted);
  padding: 64px 24px;
  font-size: 14px;
}
.ref-error a {
  color: var(--green);
  font-weight: 600;
}

/* ---- Hero (green-tinted gradient = brand differentiation) ---- */
.ref-hero {
  text-align: center;
  padding: 36px 24px 38px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 60%, var(--card) 100%);
  border: 1px solid #d1fae5;
  border-radius: 16px;
}
.ref-hero-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.1;
}
.ref-hero-title-amount {
  color: var(--green);
}
.ref-hero-sub {
  color: var(--muted);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto;
}

/* ---- Action row: Email a friend + Share your link ---- */
.ref-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.ref-action-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 20px;
}

.ref-action-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.ref-action-sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.45;
}

/* Email-invite form */
.ref-invite-form {
  display: flex;
  gap: 8px;
}
.ref-invite-form .ref-input {
  flex: 1;
  min-width: 0;
}
.ref-invite-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}
.ref-invite-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.ref-invite-status-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.ref-invite-status-err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Share-link card */
.ref-link-row {
  display: flex;
  gap: 8px;
}
.ref-link-row .ref-input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.ref-code-line {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.ref-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}

/* Inputs + buttons shared across ref-* surfaces */
.ref-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  width: 100%;
  background: white;
  color: var(--ink);
}
.ref-input:focus { border-color: var(--green); }
.ref-input[readonly] {
  background: var(--bg);
  cursor: default;
}

.ref-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  background: white;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ref-button:hover:not(:disabled) {
  background: var(--bg);
  border-color: #d1d5db;
}
.ref-button:disabled {
  opacity: 0.6;
  cursor: default;
}
.ref-button.is-copied {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.ref-button-primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.ref-button-primary:hover:not(:disabled) {
  background: var(--green-light);
  border-color: var(--green-light);
}

/* ---- 3-step explainer (legacy vertical layout — kept for any callers) ---- */
.ref-steps {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 24px;
}
.ref-steps-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 16px;
}
.ref-steps-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ref-steps-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14.5px;
  color: var(--ink);
}
.ref-step-num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Stats panel ---- */
.ref-stats {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px 24px;
  margin-bottom: 24px;
}
.ref-stats-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.ref-stats-counters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ref-counter {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.ref-counter-label {
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}
.ref-counter-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.4px;
}
.ref-counter-value-accent {
  color: var(--green);
}

.ref-stats-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  overflow-x: auto;
}
.ref-tab {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.ref-tab:hover { color: var(--ink); }
.ref-tab.is-active {
  color: var(--green);
  border-bottom-color: var(--green);
}

.ref-stats-body {
  min-height: 80px;
}
.ref-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 14px;
}

/* Activity rows */
.ref-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.ref-row:last-child { border-bottom: none; }
.ref-row-body {
  flex: 1;
  min-width: 0;
}
.ref-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ref-row-anon {
  color: var(--muted);
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  margin-left: 4px;
}
.ref-row-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}
.ref-row-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.ref-row-status-pending {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.ref-row-status-confirmed {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.ref-row-status-expired {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}
.ref-row-status-pending_review {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.ref-row-status-denied {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
/* invite_sent rows have plain text "Sent" status */
.ref-row-invite .ref-row-status {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
}

/* ---- FAQ accordion ---- */
.ref-faq {
  margin-bottom: 24px;
}
.ref-faq-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.ref-faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
}
.ref-faq-item[open] {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}
.ref-faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.ref-faq-q::-webkit-details-marker { display: none; }
.ref-faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.ref-faq-item[open] .ref-faq-q::after { content: "−"; }
.ref-faq-a {
  font-size: 13.5px;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.55;
}

/* ---- Fine print ---- */
.ref-fineprint {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 12px 16px 24px;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
}
.ref-fineprint a {
  color: var(--green);
  text-decoration: none;
}
.ref-fineprint a:hover { text-decoration: underline; }

/* Responsive: stack the action grid + counters under 720/480 */
@media (max-width: 720px) {
  .ref-actions { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ref-hero-title { font-size: 28px; }
  .ref-stats-counters { grid-template-columns: 1fr; }
  .ref-invite-form { flex-direction: column; }
  .ref-link-row { flex-direction: column; }
}

/* ============================================================ */
/*   Signup referral banner + "Have a code?" toggle              */
/*   (block 10 steps 12+13, 2026-05-17). Width-matched to the    */
/*   auth-card (420px) so the banner sits directly above the     */
/*   signup form, aligned edge-to-edge.                          */
/* ============================================================ */

.auth-banner {
  max-width: 420px;
  margin: 32px auto 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}
/* Tighten the spacing between the banner and the auth-card below it — but
   ONLY when the banner is actually visible. The adjacent-sibling selector
   matches even when the banner is display:none (hidden), so without
   :not([hidden]) the sign-up card — which always has the hidden
   #signup-referral-banner as a preceding sibling — lost its centered
   margin-top and stuck to the top, while sign-in (no banner) stayed centered.
   THIS was the real sign-up-stuck-top bug, not caching (Kaz 2026-05-30). */
.auth-banner:not([hidden]) + .auth-card {
  margin-top: 0;
}
.auth-banner-validating {
  background: var(--bg);
}
.auth-banner-valid {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.auth-banner-invalid {
  background: #fafafa;
  border-color: #e5e7eb;
}
.auth-banner-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.auth-banner-valid .auth-banner-title { color: #047857; }
.auth-banner-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.auth-banner-valid .auth-banner-body { color: #065f46; }

/* "Have a code?" toggle was dropped on 2026-05-17 in favor of
   URL-only attribution (Rakuten/Honey pattern). The .auth-have-code-*
   selectors are gone; banner above the signup card surfaces the
   referral state and the hidden #signup-referral-code input
   carries the URL ?ref= value to the submit handler. */

/* ============================================================ */
/*   Refer & Earn topbar link (block 10 step 14 revision,        */
/*   2026-05-17). Subtle text-link styling — sits between the    */
/*   demo toggle and the balance chip on every signed-in surface.*/
/*   Matches Rakuten's secondary-nav prominence treatment for    */
/*   referrals without adding pill-button visual weight.         */
/* ============================================================ */

.modern-refer-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-muted);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.modern-refer-link:hover {
  color: var(--m-green);
  background: var(--m-bg);
}

/* ============================================================ */
/*   INSTALL NUDGES (2026-05-20) — modal + sticky banner +      */
/*   /earnings sub-hero card.                                    */
/*                                                               */
/*   All three surfaces appear for signed-in users who haven't   */
/*   installed the GrowRo extension yet. Hide on extension       */
/*   detection (dashboard-bridge.js EXTENSION_INSTALLED signal). */
/*   Shared "Add to Chrome" CTA uses the same /api/config/cws    */
/*   env-var pattern as the landing-page hero button.            */
/*                                                               */
/*   Remove the surfaces by deleting these rules + the           */
/*   maybeRenderInstall* calls in app.js + the host div in       */
/*   dashboard/index.html.                                       */
/* ============================================================ */

/* Shared Add-to-Chrome button */
.install-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #00a85a 0%, #00d97e 100%);
  color: white !important;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 168, 90, 0.24);
  transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.install-cta-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 168, 90, 0.32);
}
.install-cta-btn-disabled {
  background: #eef0f4;
  color: #6b7280 !important;
  box-shadow: none;
  cursor: not-allowed;
  border: 1px solid #e1e5eb;
  pointer-events: none;
}
.install-cta-btn-disabled:hover {
  transform: none;
  filter: none;
  box-shadow: none;
}

/* -----------------------------------------------------------
   1. INSTALL MODAL — one-shot per session on dashboard home
   ----------------------------------------------------------- */
.install-modal-shroud {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: install-modal-fade-in 0.18s ease-out;
}
@keyframes install-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.install-modal-card {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 36px 36px 28px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  animation: install-modal-pop-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes install-modal-pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.install-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.install-modal-close:hover { background: #f6f7f9; color: #14171f; }
.install-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #00a85a;
  margin-bottom: 10px;
}
.install-modal-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: #14171f;
  margin: 0 0 20px;
}
.install-modal-art {
  display: grid;
  place-items: center;
  margin-bottom: 24px;
}
.install-modal-browser {
  position: relative;
  width: 220px;
  height: 140px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #d1fae5;
  border-radius: 12px;
  overflow: hidden;
}
.install-modal-browser-bar {
  position: absolute;
  top: 8px; left: 8px;
  width: 160px;
  height: 18px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #d1fae5;
  border-radius: 9px;
}
.install-modal-browser-page {
  position: absolute;
  top: 38px; left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
}
.install-modal-browser-icon {
  position: absolute;
  top: 14px; right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00a85a, #00d97e);
  color: white;
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0,168,90,0.4);
}
.install-modal-cta-row {
  margin-bottom: 16px;
}
.install-modal-fine {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}
.install-modal-fine a { color: #00a85a; text-decoration: none; }
.install-modal-fine a:hover { text-decoration: underline; }

/* -----------------------------------------------------------
   2. STICKY BOTTOM BANNER — across every signed-in view
   ----------------------------------------------------------- */
.install-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: white;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  z-index: 150;
  animation: install-banner-slide-up 0.28s ease-out;
}
@keyframes install-banner-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.install-banner-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.install-banner-icon {
  flex: 0 0 auto;
}
.install-banner-icon-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00a85a, #00d97e);
  color: white;
  font-weight: 800;
  font-size: 18px;
  display: grid;
  place-items: center;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 6px rgba(0,168,90,0.3);
}
.install-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.install-banner-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #14171f;
  letter-spacing: -0.1px;
  line-height: 1.3;
}
.install-banner-sub {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
.install-banner-cta {
  flex: 0 0 auto;
}
.install-banner-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.install-banner-close:hover { background: #f6f7f9; color: #14171f; }

@media (max-width: 720px) {
  .install-banner-inner { gap: 10px; padding: 10px 14px; }
  .install-banner-sub { display: none; }
  .install-banner-title { font-size: 13px; }
  .install-banner-icon-mark { width: 32px; height: 32px; font-size: 14px; }
  .install-cta-btn { padding: 8px 16px; font-size: 13px; }
}

/* -----------------------------------------------------------
   3. EARNINGS SUB-HERO CARD — in /earnings between hero +
      tier grid. Hosted by <div id="install-subhero-host">.
   ----------------------------------------------------------- */
.install-subhero {
  margin: 0 0 32px;
}
.install-subhero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #6b7280;
  margin-bottom: 10px;
}
.install-subhero-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.install-subhero-art {
  flex: 0 0 200px;
}
.install-subhero-browser {
  position: relative;
  width: 200px;
  height: 130px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #d1fae5;
  border-radius: 12px;
  overflow: hidden;
}
.install-subhero-browser-bar {
  position: absolute;
  top: 8px; left: 8px;
  width: 140px;
  height: 16px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #d1fae5;
  border-radius: 8px;
}
.install-subhero-browser-page {
  position: absolute;
  top: 34px; left: 12px;
  right: 12px;
  bottom: 12px;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
}
.install-subhero-browser-icon {
  position: absolute;
  top: 12px; right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #00a85a, #00d97e);
  color: white;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 5px rgba(0,168,90,0.4);
}
.install-subhero-pill {
  position: absolute;
  bottom: 18px; left: 14px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #00a85a, #00d97e);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,168,90,0.32);
}
.install-subhero-body {
  min-width: 0;
}
.install-subhero-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #14171f;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.install-subhero-sub {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.install-subhero-sub a { color: #00a85a; text-decoration: none; }
.install-subhero-sub a:hover { text-decoration: underline; }
.install-subhero-cta {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .install-subhero-card {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .install-subhero-art {
    margin: 0 auto;
  }
  .install-subhero-cta {
    margin: 0 auto;
  }
}

/* Body padding-bottom so the sticky banner doesn't obscure the
   bottom of page content when scrolled to the very end. */
body:has(#install-banner) { padding-bottom: 84px; }