/* ============================================================================
   account.css — the logged-in / flow surface design language for ReturnMe.

   Scope: the Account dashboard, the Activation + Auth wizard, the Finder
   "Report found" flow, and the Found-Location-Sharing views. Loaded AFTER
   utilities.css + app.css on the standalone pages (account.html, activate.html,
   report-found.html) so these win where they need to.

   Design intent (per the brief):
     - CALM, CAPABLE, WARM. A polished modern SaaS dashboard — Linear/Stripe
       dashboard *calm*, not a loud marketing page.
     - Consistent with the site's tokens (paper canvas, ink type, hairline
       rings, soft rounded cards, tabular numerals, tracked eyebrows) but
       FRESHER + quieter for a logged-in context.
     - The hero's chunky 3D green/blue CTAs (.atlas-cta-3d) are the HERO's
       signature — used here SPARINGLY (one primary action per screen). The
       everyday dashboard buttons are a quiet ink/neutral language defined below
       (.acct-btn variants), with subtle brand tints reserved for accents.
     - All prefixed `acct-` / `flow-` so the build's SKIP_PREFIX leaves them
       alone (they are NOT regenerated as utilities) and they never collide
       with the in-flight hero work.
   ============================================================================ */

/* ─── Local design tokens ──────────────────────────────────────────────────
   A slightly cooler, calmer paper than the marketing pages. The dashboard
   reads as "daylight workspace" — warm-neutral surfaces, ink text, brand
   green/blue strictly as accents. */
.acct-app {
  --acct-bg: #F6F7F5;
  /* page canvas — warm-neutral, never pure white */
  --acct-surface: #FFFFFF;
  /* card surface */
  --acct-surface-2: #FAFAF8;
  /* sub-surface / inset wells */
  --acct-ink: #16181A;
  /* primary text */
  --acct-ink-soft: #44474B;
  /* secondary text — 9.34:1 on white */
  --acct-ink-muted: #6B6F73;
  /* tertiary / labels — 5.06:1 on white, 4.71:1 on page bg (AA) */
  --acct-line: rgba(16, 24, 26, 0.09);
  /* hairline */
  --acct-line-2: rgba(16, 24, 26, 0.14);
  /* stronger hairline */
  --acct-green: #B4D465;
  /* brand green (accent / "go") — fills only */
  --acct-green-deep: #6E9A2E;
  /* mid green — icons/strokes, NOT body text on tint */
  --acct-green-text: #496A1B;
  /* legible green TEXT on green-tint — 5.61:1 (AA) */
  --acct-green-tint: #EEF6DD;
  /* soft green wash */
  --acct-blue: #4EA9D8;
  /* brand blue (finder / info) — fills only */
  --acct-blue-deep: #2A7BAE;
  /* mid blue — icons/strokes/links on white */
  --acct-blue-text: #1C6491;
  /* legible blue TEXT on blue-tint — 5.56:1 (AA) */
  --acct-blue-tint: #E4F1F9;
  /* soft blue wash */
  --acct-amber: #C98A2B;
  /* attention accent (icons/strokes) — calm, not red */
  --acct-amber-text: #8A5A12;
  /* legible amber TEXT on amber-tint — 5.28:1 (AA) */
  --acct-amber-tint: #FBF1DE;
  --acct-radius: 18px;
  --acct-radius-sm: 12px;
  --acct-shadow: 0 1px 2px rgba(16, 24, 26, 0.04), 0 12px 30px -18px rgba(16, 24, 26, 0.20);
  --acct-shadow-lift: 0 2px 4px rgba(16, 24, 26, 0.05), 0 22px 48px -22px rgba(16, 24, 26, 0.30);
  background: var(--acct-bg);
  color: var(--acct-ink);
}

/* The page shell uses theme-atlas (for the header chrome). Re-paint the root
   canvas so the marketing-white body doesn't show through behind our pages. */
.theme-atlas.acct-app.bg-paper,
.theme-atlas .acct-app.bg-paper {
  background-color: var(--acct-bg);
}

/* ── Initial-load cloak ─────────────────────────────────────────────────────
   The viewport scaler (app.js) runs a few passes AFTER first paint — width zoom,
   then the fit pass, then a re-fit once the self-hosted fonts/images settle —
   which otherwise reads as the page visibly resizing itself for a moment on load.
   Hide the dashboard CONTENT (not the canvas) until the fit has settled, then fade
   it in, so none of that convergence is visible. account.js adds .is-fit-ready
   once stable; a CSS animation reveals it regardless after a short max, so a JS
   hiccup can never leave the page blank. The #atlas-root background stays visible
   throughout, so there's no flash — just the calm canvas, then the content. */
.acct-app:has(> main[data-acct-page-root])>header,
.acct-app:has(> main[data-acct-page-root])>main,
.acct-app:has(> main[data-acct-page-root])>footer {
  opacity: 1;
  animation: none;
}

.acct-app.is-fit-ready>header,
.acct-app.is-fit-ready>main,
.acct-app.is-fit-ready>footer {
  opacity: 1;
  animation: none;
  transition: none;
}

@keyframes acctFitReveal {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acct-app:has(> main[data-acct-page-root])>header,
  .acct-app:has(> main[data-acct-page-root])>main,
  .acct-app:has(> main[data-acct-page-root])>footer {
    animation: none;
  }

  .acct-app.is-fit-ready>header,
  .acct-app.is-fit-ready>main,
  .acct-app.is-fit-ready>footer {
    transition: none;
  }
}

/* ─── Responsive show/hide helpers (account-owned) ──────────────────────────
   account.css loads AFTER utilities.css, so a `.acct-btn { display:inline-flex }`
   base would beat a Tailwind `hidden` utility (equal specificity, later wins) and
   the button would never hide. These helpers live in this same (last) stylesheet
   so they reliably win — use them instead of `hidden`/`sm:*` on `.acct-*` elems.
   Breakpoints match the project: sm 640 · lg 1024. */
.acct-hide-below-sm {
  display: none !important;
}

@media (min-width: 640px) {
  .acct-hide-below-sm {
    display: inline-flex !important;
  }
}

.acct-hide-below-lg {
  display: none !important;
}

@media (min-width: 1024px) {
  .acct-hide-below-lg {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .acct-hide-from-lg {
    display: none !important;
  }
}

/* ─── Keyboard focus (WCAG 2.4.7) ──────────────────────────────────────────
   bootstrap-reboot strips the native outline (button:focus:not(:focus-visible)),
   and these surfaces use custom <button>/<a> elements, so without an explicit
   :focus-visible ring keyboard users get NO visible focus. One shared ring,
   brand-tinted (blue = the calm info/finder accent), applied to every
   interactive primitive. Pointer clicks stay clean (:focus-visible only). */
.acct-app a:focus-visible,
.acct-app button:focus-visible,
.acct-app input:focus-visible,
.acct-app select:focus-visible,
.acct-app [tabindex]:focus-visible,
.flow-shell a:focus-visible,
.flow-shell button:focus-visible,
.flow-shell input:focus-visible,
.flow-shell select:focus-visible,
.flow-shell [tabindex]:focus-visible {
  outline: 2px solid var(--acct-blue, #4EA9D8);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Elements that already carry their own rounded ring: tighten the offset so the
   focus ring hugs the shape instead of floating in a square. */
.acct-app .acct-btn:focus-visible,
.flow-shell .acct-btn:focus-visible,
.acct-app .acct-chip:focus-visible,
.acct-app .acct-nav-link:focus-visible,
.acct-app .acct-mobnav-link:focus-visible,
.acct-app .acct-reward-opt:focus-visible,
.flow-shell .acct-reward-opt:focus-visible,
.flow-shell .flow-option:focus-visible,
.flow-shell .flow-sso:focus-visible,
.acct-app .acct-check-row:focus-visible,
.acct-app .acct-suggest:focus-visible,
.acct-app .acct-quicklink:focus-visible,
.acct-app .acct-menu-item:focus-visible,
.flow-shell .flow-input:focus-visible,
.acct-app .flow-input:focus-visible {
  outline-offset: 3px;
  border-radius: 12px;
}

.acct-app .acct-avatar:focus-visible {
  outline-offset: 3px;
  border-radius: 999px;
}

/* The big ID field is pill-radius; match it. */
.flow-shell .flow-input-lg:focus-visible {
  border-radius: 14px;
}

/* ─── Eyebrow (reuse the site's tracked-label vocabulary) ───────────────── */
.acct-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: var(--acct-ink-muted);
}

/* ─── Card primitive ────────────────────────────────────────────────────── */
.acct-card {
  position: relative;
  background: var(--acct-surface);
  border-radius: var(--acct-radius);
  box-shadow: 0 0 0 1px var(--acct-line), var(--acct-shadow);
  transition: box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-card-hover:hover {
  box-shadow: 0 0 0 1px var(--acct-line-2), var(--acct-shadow-lift);
  transform: translateY(-2px);
}

.acct-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--acct-line);
}

.acct-card-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 15.5px;
  color: var(--acct-ink);
}

.acct-card-body {
  padding: 20px 24px;
}

/* When a card body is a plain list of rows, the row's own vertical padding plus
   the body padding would stack into too much top/bottom air. Pull the first/last
   row in so list cards read tight + intentional (the inter-row rhythm is
   unchanged — only the edges are trimmed). */
.acct-card-body>.acct-row:first-child {
  padding-top: 4px;
}

.acct-card-body>.acct-row:last-child {
  padding-bottom: 2px;
}

/* Phones: trim the generous desktop inset so narrow cards keep usable content
   width (item names + chips stop wrapping awkwardly). */
@media (max-width: 640px) {
  .acct-card-head {
    padding: 15px 17px;
  }

  .acct-card-body {
    padding: 17px 17px;
  }
}

/* ─── Buttons — the quiet dashboard language (NOT the hero 3D CTA) ──────────
   Default button is an ink/neutral pill with a hairline; primary inverts to
   solid ink. Brand fills are reserved for ONE deliberate primary action. */
.acct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.012em;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-btn:active {
  transform: translateY(1px);
}

.acct-btn svg {
  flex: none;
}

/* Ghost / secondary — hairline outline, fills faintly on hover */
.acct-btn-ghost {
  background: transparent;
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-btn-ghost:hover {
  background: rgba(16, 24, 26, 0.04);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.22);
}

/* Solid ink — the default "primary" for everyday actions */
.acct-btn-ink {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.2);
}

.acct-btn-ink:hover {
  background: #000;
  box-shadow: 0 6px 16px -6px rgba(16, 24, 26, 0.4);
  transform: translateY(-1px);
}

.acct-btn-ink:active {
  transform: translateY(0);
}

/* Soft tint — quiet accent button (green/blue washes), for low-stakes actions */
.acct-btn-soft-green {
  background: var(--acct-green-tint);
  color: var(--acct-green-text);
}

.acct-btn-soft-green:hover {
  background: #E5F2CB;
}

.acct-btn-soft-blue {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-text);
}

.acct-btn-soft-blue:hover {
  background: #D6EAF6;
}

.acct-btn-soft-amber {
  background: var(--acct-amber-tint);
  color: var(--acct-amber-text);
}

.acct-btn-soft-amber:hover {
  box-shadow: inset 0 0 0 1px rgba(176, 120, 38, 0.34);
}

/* The ONE allowed brand-fill primary per screen — a flat, refined brand pill
   (NOT the chunky 3D lip). Green = activate/go. */
.acct-btn-primary {
  background: var(--acct-green);
  color: #16181A;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.14), 0 10px 24px -14px rgba(110, 154, 46, 0.7);
}

.acct-btn-primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 26, 0.16), 0 16px 30px -14px rgba(110, 154, 46, 0.8);
}

.acct-btn-blue {
  background: var(--acct-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.14), 0 10px 24px -14px rgba(42, 123, 174, 0.7);
}

.acct-btn-blue:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Amber = "report lost / watching" (a steady, non-alarming caution tone, AA on
   white). Used only in the report-lost flow so it stays calm, not urgent. */
.acct-btn-amber {
  background: var(--acct-amber-text);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.14), 0 10px 24px -14px rgba(138, 90, 18, 0.7);
}

.acct-btn-amber:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ── Metallic upgrade CTAs — bright, polished metal with a brushed texture + a
   glossy top sheen and a bevel, so "Upgrade to Silver / Gold" feels like the real
   tier object. Pure layered gradients (no images), so it translates to Figma. The
   layers, top→bottom: top gloss · brushed grain · the metal body. */
.acct-btn-silver,
.acct-btn-gold {
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.acct-btn-silver {
  color: #2B313B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(108, 122, 142, 0.4), 0 1px 2px rgba(16, 24, 26, 0.16), 0 12px 26px -14px rgba(60, 72, 92, 0.65);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, 0) 0 5px, rgba(120, 135, 158, 0.07) 5px 6px),
    linear-gradient(150deg, #FCFDFF 0%, #E6EBF2 24%, #C4CCD9 52%, #EEF2F7 74%, #CDD5E0 100%);
}

.acct-btn-gold {
  color: #4A3206;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 248, 220, 0.45), inset 0 -3px 6px rgba(150, 108, 18, 0.42), 0 1px 2px rgba(16, 24, 26, 0.16), 0 12px 26px -14px rgba(140, 96, 8, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 44%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, 0) 0 5px, rgba(150, 110, 18, 0.08) 5px 6px),
    linear-gradient(150deg, #FFF7D6 0%, #F4D885 24%, #E0B33E 52%, #FCEEAE 74%, #E7C257 100%);
}

.acct-btn-silver:hover,
.acct-btn-gold:hover {
  filter: brightness(1.05) saturate(1.04);
  transform: translateY(-1px);
}

.acct-btn-silver:active,
.acct-btn-gold:active {
  transform: translateY(1px);
  filter: brightness(0.99);
}

/* Re-pin the engraved label colour on hover/focus: the metallic CTAs are often
   <a> links, and the global a:hover{color:inherit} (app.css) has higher
   specificity than .acct-btn-silver, so without this the label would inherit
   the parent's colour (e.g. a green-tinted card) on hover. */
.acct-btn-silver:hover,
.acct-btn-silver:focus,
.acct-btn-silver:focus-visible {
  color: #2B313B;
}

.acct-btn-gold:hover,
.acct-btn-gold:focus,
.acct-btn-gold:focus-visible {
  color: #4A3206;
}

.acct-btn-silver svg,
.acct-btn-gold svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
}

/* Bronze metal — the warm copper finish for the Bronze tier CTA (same layered
   recipe as silver/gold: top gloss · brushed grain · the metal body). */
.acct-btn-bronze {
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255, 244, 228, 0.5);
  color: #4A2F0C;
  box-shadow: inset 0 1px 0 rgba(255, 244, 228, 0.85), inset 0 0 0 1px rgba(255, 228, 196, 0.42), inset 0 -3px 6px rgba(120, 74, 28, 0.42), 0 1px 2px rgba(16, 24, 26, 0.16), 0 12px 26px -14px rgba(110, 68, 18, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.72) 0%, rgba(255, 255, 255, 0) 46%),
    repeating-linear-gradient(114deg, rgba(255, 255, 255, 0) 0 5px, rgba(120, 74, 28, 0.08) 5px 6px),
    linear-gradient(150deg, #F5DEC2 0%, #DDB184 24%, #BD8753 52%, #ECD2B4 74%, #CD9D69 100%);
}

.acct-btn-bronze:hover {
  filter: brightness(1.05) saturate(1.04);
  transform: translateY(-1px);
}

.acct-btn-bronze:active {
  transform: translateY(1px);
  filter: brightness(0.99);
}

.acct-btn-bronze:hover,
.acct-btn-bronze:focus,
.acct-btn-bronze:focus-visible {
  color: #4A2F0C;
}

.acct-btn-bronze svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}

.acct-btn-lg {
  padding: 13px 22px;
  font-size: 15px;
  border-radius: 12px;
}

.acct-btn-block {
  width: 100%;
}

/* ─── Tag chips (status / meta) — NOT status-dot pills. Text + subtle tint. ── */
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--acct-surface-2);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-chip-green {
  background: var(--acct-green-tint);
  color: var(--acct-green-text);
  box-shadow: none;
}

.acct-chip-blue {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-text);
  box-shadow: none;
}

.acct-chip-amber {
  background: var(--acct-amber-tint);
  color: var(--acct-amber-text);
  box-shadow: none;
}

.acct-chip svg {
  flex: none;
}

/* ─── Protection Score ring ─────────────────────────────────────────────── */
.acct-score-ring {
  transform: rotate(-90deg);
}

.acct-score-track {
  stroke: rgba(16, 24, 26, 0.08);
}

.acct-score-fill {
  stroke: url(#acctScoreGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-score-num {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Linear progress (slim) used in checklists / health rows */
.acct-progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.08);
  overflow: hidden;
}

.acct-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B4D465 0%, #8FB444 100%);
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-progress-bar-blue {
  background: linear-gradient(90deg, #6FC0E6 0%, #4EA9D8 100%);
}

/* ─── Checklist rows (Ways to improve) ──────────────────────────────────── */
.acct-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: default;
  border: 0;
}

.acct-check-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2);
  background: #fff;
  color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.acct-check-row[data-done="true"] .acct-check-box {
  background: var(--acct-green-deep);
  color: #fff;
  box-shadow: none;
}

.acct-check-row[data-done="true"] .acct-check-label {
  color: var(--acct-ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(16, 24, 26, 0.25);
}

.acct-check-points {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-ink-muted);
}

.acct-check-row[data-done="true"] .acct-check-points {
  color: var(--acct-green-text);
}

/* ─── List rows (items / recoveries / messages / history) ───────────────── */
.acct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--acct-line);
}

.acct-row:first-child {
  border-top: 0;
}

/* Subtle list-row stagger: rows are FULLY VISIBLE by default; the entrance is
   added only when motion is welcome, so a paused/headless render or a
   reduced-motion user never sees a blank list (the reveal enhances an
   already-visible default, it doesn't gate visibility on it). Capped low per
   item so it never feels slow. */
@media (prefers-reduced-motion: no-preference) {
  .acct-row-stagger {
    animation: acctRowIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
}

@keyframes acctRowIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.acct-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--acct-ink-soft);
  overflow: hidden;
}

.acct-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Sidebar nav (dashboard) ───────────────────────────────────────────── */
.acct-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--acct-ink-soft);
  transition: background-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

.acct-nav-link:hover {
  background: rgba(16, 24, 26, 0.045);
  color: var(--acct-ink);
}

.acct-nav-link[data-active="true"] {
  background: #fff;
  color: var(--acct-ink);
  box-shadow: 0 0 0 1px var(--acct-line), 0 6px 16px -12px rgba(16, 24, 26, 0.3);
}

.acct-nav-link[data-active="true"] svg {
  color: var(--acct-green-deep);
}

.acct-nav-link svg {
  flex: none;
  color: var(--acct-ink-muted);
  transition: color 0.18s ease;
}

/* ─── Avatar ──────────────────────────────────────────────────────────────
   Clean + simple: a white disc with ink initials and a hairline (no gradient).
   Used by the nav account-menu trigger, its popover head, and the profile card. */
.acct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================================
   WIZARD (shared by activate.html + report-found.html)
   A calm, centered, multi-step flow. Steps crossfade; a slim progress rail and
   numbered dots sit on top. Inputs reuse a quiet field language.
   ============================================================================ */
.flow-shell {
  min-height: 100vh;
  background: var(--acct-bg, #F6F7F5);
}

/* the standalone auth page: vertically center the card so it doesn't float
   top-heavy in a tall viewport (the modal is already centered by its overlay) */
.flow-shell-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 560px) {
  .flow-shell-centered {
    justify-content: flex-start;
  }
}

.flow-input {
  width: 100%;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--acct-line-2, rgba(16, 24, 26, 0.14));
  padding: 13px 15px;
  font-size: 15px;
  color: var(--acct-ink, #16181A);
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.flow-input::placeholder {
  color: #71766F;
}

/* 4.64:1 on white — AA for placeholder text */
.flow-input:focus {
  outline: none;
  border-color: rgba(78, 169, 216, 0.8);
  box-shadow: 0 0 0 3.5px rgba(78, 169, 216, 0.16);
}

.flow-input-lg {
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 18px 16px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-transform: uppercase;
}

.flow-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acct-ink, #16181A);
  margin-bottom: 7px;
}

/* Selectable option cards (radio-like) */
.flow-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  border-radius: 13px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2, rgba(16, 24, 26, 0.14));
  cursor: pointer;
  border: 0;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.14s ease;
}

.flow-option:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.28);
  transform: translateY(-1px);
}

.flow-option[data-selected="true"] {
  background: var(--acct-green-tint, #EEF6DD);
  box-shadow: inset 0 0 0 2px var(--acct-green-deep, #6E9A2E);
}

.flow-option-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acct-surface-2, #FAFAF8);
  box-shadow: inset 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09));
  color: var(--acct-ink-soft, #44474B);
}

.flow-option[data-selected="true"] .flow-option-icon {
  background: #fff;
  color: var(--acct-green-deep, #6E9A2E);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.4);
}

.flow-option-check {
  margin-left: auto;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2, rgba(16, 24, 26, 0.14));
  color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.flow-option[data-selected="true"] .flow-option-check {
  background: var(--acct-green-deep, #6E9A2E);
  color: #fff;
  box-shadow: none;
}

/* Finder flow uses blue accent for selection (finder = blue) */
.flow-finder .flow-option[data-selected="true"] {
  background: var(--acct-blue-tint, #E4F1F9);
  box-shadow: inset 0 0 0 2px var(--acct-blue-deep, #2A7BAE);
}

.flow-finder .flow-option[data-selected="true"] .flow-option-icon {
  color: var(--acct-blue-deep, #2A7BAE);
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.4);
}

.flow-finder .flow-option[data-selected="true"] .flow-option-check {
  background: var(--acct-blue-deep, #2A7BAE);
}

/* SSO / provider buttons */
.flow-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2, rgba(16, 24, 26, 0.16));
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--acct-ink, #16181A);
  cursor: pointer;
  border: 0;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.14s ease;
}

.flow-sso:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.3);
  background: #FBFBFA;
  transform: translateY(-1px);
}

/* Step crossfade panels */
.flow-step {
  display: none;
}

.flow-step.is-active {
  display: block;
  animation: flowStepIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes flowStepIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.flow-step.is-leaving {
  display: block;
  animation: flowStepOut 0.22s ease forwards;
}

@keyframes flowStepOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Progress rail (numbered) */
.flow-rail {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.flow-rail-step {
  display: flex;
  align-items: center;
  flex: 1;
}

.flow-rail-step:last-child {
  flex: 0 0 auto;
}

.flow-rail-dot {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2, rgba(16, 24, 26, 0.16));
  color: var(--acct-ink-muted, #8A8E92);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.flow-rail-line {
  flex: 1;
  height: 2px;
  margin: 0 6px;
  border-radius: 2px;
  background: var(--acct-line-2, rgba(16, 24, 26, 0.14));
  position: relative;
  overflow: hidden;
}

.flow-rail-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--acct-green-deep, #6E9A2E);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.flow-rail-step[data-state="done"] .flow-rail-line::after {
  transform: scaleX(1);
}

.flow-rail-step[data-state="done"] .flow-rail-dot {
  background: var(--acct-green-deep, #6E9A2E);
  color: #fff;
  box-shadow: none;
}

.flow-rail-step[data-state="current"] .flow-rail-dot {
  background: var(--acct-ink, #16181A);
  color: #fff;
  box-shadow: none;
}

.flow-finder .flow-rail-step[data-state="done"] .flow-rail-line::after {
  background: var(--acct-blue-deep, #2A7BAE);
}

.flow-finder .flow-rail-step[data-state="done"] .flow-rail-dot {
  background: var(--acct-blue-deep, #2A7BAE);
}

/* Upload dropzone */
.flow-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 28px 18px;
  border-radius: 14px;
  background: var(--acct-surface-2, #FAFAF8);
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2, rgba(16, 24, 26, 0.14));
  /* dashed look without the jaggy default border */
  background-image:
    repeating-linear-gradient(90deg, rgba(16, 24, 26, 0.16) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(16, 24, 26, 0.16) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg, rgba(16, 24, 26, 0.16) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(0deg, rgba(16, 24, 26, 0.16) 0 8px, transparent 8px 16px);
  background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: no-repeat;
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.14s ease;
}

.flow-upload:hover {
  background-color: #F2F4EE;
  transform: translateY(-1px);
}

.flow-upload-preview {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09));
}

.flow-upload-preview img {
  width: 100%;
  display: block;
  max-height: 220px;
  object-fit: cover;
}

/* ─── ID-location diagram tiles (where to find the ID) ──────────────────── */
.flow-idmap-tile {
  background: #fff;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09));
  padding: 13px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.16s ease;
}

.flow-idmap-tile:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2, rgba(16, 24, 26, 0.16));
  transform: translateY(-2px);
}

/* The two product thumbnails (luggage tag / sticker decal) are pre-baked onto an
   identical 480×300 white canvas with the ID# circled, so both tiles read at the
   same footprint regardless of the source's real proportions. */
.flow-idmap-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  margin-bottom: 7px;
}

/* ─── Map placeholder (Found Location Sharing) ──────────────────────────── */
.flow-map {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 20%, #EAF1ED 0%, #E2EAE6 40%, #DCE5E0 100%);
  box-shadow: inset 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09));
}

.flow-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 24, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 26, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Approximate-area blob (privacy: never an exact dot for the finder home) */
.flow-map-area {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(78, 169, 216, 0.34) 0%, rgba(78, 169, 216, 0.16) 52%, transparent 74%);
  box-shadow: inset 0 0 0 1.5px rgba(42, 123, 174, 0.55);
}

/* a faint center marker reinforces "a general area, centered roughly here"
   without ever resolving to an exact dot */
.flow-map-area::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 999px;
  background: var(--acct-blue-deep, #2A7BAE);
  box-shadow: 0 0 0 4px rgba(78, 169, 216, 0.22);
}

.flow-map-pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--acct-blue, #4EA9D8);
  box-shadow: 0 0 0 3px #fff, 0 4px 10px -2px rgba(16, 24, 26, 0.4);
}

.flow-map-pin::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background: rgba(78, 169, 216, 0.35);
  animation: flowPinPulse 2s ease-out infinite;
  z-index: -1;
}

@keyframes flowPinPulse {
  0% {
    transform: scale(0.7);
    opacity: 0.6;
  }

  70%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-map-pin::after {
    animation: none;
  }
}

/* ─── Reveal (lightweight, mirrors the site's [data-reveal] but local-safe).
   app.js already handles [data-reveal]; these are extra acct-only entrance
   helpers for elements outside the IO net. ─────────────────────────────── */
.acct-rise {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .acct-rise {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .flow-step.is-active,
  .flow-step.is-leaving {
    animation: none;
  }

  /* Drop the long decorative sweeps (ring, bars, rails, timeline) to instant —
     the values still update, just without the choreography users opted out of. */
  .acct-score-fill,
  .acct-progress-bar,
  .acct-strength-bar,
  .flow-rail-line::after,
  .acct-timeline-step[data-state] .acct-timeline-dot {
    transition-duration: 0.01ms !important;
  }
}

/* ─── Toast (demo feedback) ─────────────────────────────────────────────── */
.acct-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #16181A;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 18px 40px -16px rgba(16, 24, 26, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.acct-toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--acct-green, #B4D465);
}

/* ─── Searchable select (country) ───────────────────────────────────────── */
.flow-combo {
  position: relative;
}

.flow-combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09)), 0 24px 50px -18px rgba(16, 24, 26, 0.3);
  z-index: 30;
  padding: 6px;
  display: none;
}

.flow-combo.is-open .flow-combo-list {
  display: block;
}

.flow-combo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--acct-ink, #16181A);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.flow-combo-opt:hover,
.flow-combo-opt.is-highlighted {
  background: rgba(16, 24, 26, 0.05);
}

.flow-combo-opt[hidden] {
  display: none;
}

.flow-combo-flag {
  font-size: 17px;
  line-height: 1;
}

/* ─── Privacy disclosure card (location sharing) ────────────────────────── */
.flow-privacy {
  background: var(--acct-blue-tint, #E4F1F9);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.2);
}

/* ─── Dashboard layout grid ─────────────────────────────────────────────── */
.acct-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: clamp(18px, 3vw, 40px);
  padding-right: clamp(18px, 3vw, 40px);
  padding-top: clamp(22px, 3vh, 34px);
  padding-bottom: 72px;
}

@media (min-width: 1024px) {
  .acct-shell {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    gap: 0;
    align-items: start;
  }
}

.acct-side {
  padding-right: 28px;
}

.acct-sidebar-sticky {
  position: sticky;
  top: 90px;
}

/* on the dashboard, the page header sits ABOVE the grid on mobile but inside
   the main column on desktop — it's part of each page body, so just give it
   rhythm. The mobile pill nav appears before the main content. */
@media (max-width: 1023px) {
  .acct-mobnav {
    order: -1;
    margin-bottom: 18px;
  }
}

/* mobile dashboard nav scroller. */
.acct-mobnav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .acct-mobnav {
    display: none;
  }
}

.acct-mobnav::-webkit-scrollbar {
  display: none;
}

.acct-mobnav-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
  color: var(--acct-ink-soft, #44474B);
  box-shadow: inset 0 0 0 1px var(--acct-line, rgba(16, 24, 26, 0.09));
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.acct-mobnav-link:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2, rgba(16, 24, 26, 0.18));
}

.acct-mobnav-link[data-active="true"] {
  background: var(--acct-ink, #16181A);
  color: #fff;
  box-shadow: none;
}

/* sidebar count badges */
.acct-nav-count {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--acct-surface-2);
  color: var(--acct-ink-muted);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-nav-count-blue {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-text);
  box-shadow: none;
}

.acct-nav-link[data-active="true"] .acct-nav-count {
  background: var(--acct-green-tint);
  color: var(--acct-green-text);
  box-shadow: none;
}

/* sidebar "found something" promo card (dark) */
.acct-side-found {
  border-radius: var(--acct-radius);
  background: linear-gradient(160deg, #16181A, #23262A);
  box-shadow: var(--acct-shadow);
}

/* ============================================================================
   PAGE-LEVEL CHROME (multi-page account surfaces)
   ============================================================================ */
.acct-pagehead {
  margin-bottom: 22px;
}

.acct-pagehead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.acct-pagehead-cta {
  flex: none;
}

.acct-pagetitle {
  margin-top: 8px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--acct-ink);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.04;
}

.acct-pagelede {
  margin-top: 9px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--acct-ink-soft);
  max-width: 560px;
}

.acct-section-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--acct-ink);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.12;
}

.acct-formgroup-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--acct-ink-soft);
  margin-bottom: 11px;
}

/* ─── Overview score hero refinements ───────────────────────────────────── */
.acct-score-card {
  overflow: hidden;
}

.acct-score-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}

@media (min-width: 768px) {
  .acct-score-layout {
    flex-direction: row;
    align-items: center;
  }
}

.acct-score-ringwrap {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acct-score-improve {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--acct-line);
}

/* clickable stat group under the ring */
.acct-statline {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.acct-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 8px;
  transition: transform 0.16s ease;
}

.acct-stat:hover {
  transform: translateY(-1px);
}

.acct-stat:hover .acct-stat-num {
  color: var(--acct-green-text);
}

.acct-stat-num {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--acct-ink);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 0.18s ease;
}

.acct-stat-label {
  font-size: 12px;
  color: var(--acct-ink-muted);
}

.acct-stat-div {
  width: 1px;
  background: var(--acct-line);
  align-self: stretch;
}

/* arrow link (view all / see all) */
.acct-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  transition: color 0.18s ease, gap 0.18s ease;
}

.acct-link-arrow svg {
  transition: transform 0.2s ease;
}

.acct-link-arrow:hover {
  color: var(--acct-ink);
}

.acct-link-arrow:hover svg {
  transform: translateX(2px);
}

.acct-link {
  color: var(--acct-blue-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.acct-link:hover {
  color: var(--acct-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acct-link-strong {
  font-weight: 600;
  color: var(--acct-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.acct-link-strong:hover {
  color: var(--acct-green-text);
}

/* ─── Quiet icon tile (the calm default for list/suggest icons) ─────────────
   Restraint over color: most icon tiles are a neutral ink-on-surface chip, so
   the green/blue two-tone reads as a deliberate accent where it actually means
   something (a recommended action, an unread count) rather than a rainbow of
   tinted squares. Opt INTO color with .is-green / .is-blue on the rare tile
   that earns it. */
.acct-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 11px;
  background: var(--acct-surface-2);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.acct-icon-tile.is-green {
  background: var(--acct-green-tint);
  color: var(--acct-green-deep);
  box-shadow: none;
}

.acct-icon-tile.is-blue {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-deep);
  box-shadow: none;
}

/* on hover of an interactive row, the neutral tile warms slightly toward ink */
.acct-quicklink:hover .acct-icon-tile,
.acct-suggest:hover .acct-icon-tile {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-quicklink:hover .acct-icon-tile.is-green,
.acct-suggest:hover .acct-icon-tile.is-green,
.acct-quicklink:hover .acct-icon-tile.is-blue,
.acct-suggest:hover .acct-icon-tile.is-blue {
  box-shadow: none;
}

/* ─── Suggested actions (overview) ──────────────────────────────────────── */
.acct-suggest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: pointer;
  border: 0;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.16s ease;
}

.acct-suggest:hover {
  background: #F3F4F0;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  transform: translateY(-2px);
}

.acct-suggest-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.acct-suggest-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-suggest-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  line-height: 1.45;
}

/* ─── Quick links (overview → other account sections) ───────────────────── */
.acct-quicklink {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.16s ease;
}

.acct-quicklink:hover {
  background: var(--acct-surface-2);
  transform: translateX(2px);
}

/* ─── List row extras ───────────────────────────────────────────────────── */
.acct-row-top {
  align-items: flex-start;
}

.acct-row-action {
  flex: none;
  padding: 7px 12px;
  font-size: 12.5px;
}

.acct-row-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 2px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  border-top: 1px solid var(--acct-line);
  transition: color 0.18s ease;
}

.acct-row-more:hover {
  color: var(--acct-ink);
}

/* recovery timeline (rich recoveries page) */
.acct-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 14px;
}

.acct-timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 0;
}

.acct-timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--acct-line-2);
  z-index: 0;
}

.acct-timeline-step[data-state="done"]:not(:last-child)::after {
  background: var(--acct-blue-deep);
}

.acct-timeline-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  z-index: 1;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--acct-line-2);
}

.acct-timeline-step[data-state="done"] .acct-timeline-dot {
  background: var(--acct-blue-deep);
  box-shadow: none;
}

.acct-timeline-step[data-state="current"] .acct-timeline-dot {
  background: var(--acct-ink);
  box-shadow: 0 0 0 4px rgba(16, 24, 26, 0.1);
}

.acct-timeline-label {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--acct-ink-muted);
  padding: 0 3px;
}

.acct-timeline-step[data-state="current"] .acct-timeline-label {
  color: var(--acct-ink);
  font-weight: 600;
}

/* the explicit current-stage caption shows on narrow screens; on wide screens
   the per-step labels carry the meaning so the caption hides. */
.acct-timeline-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--acct-ink-soft);
}

.acct-timeline-caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--acct-blue-deep);
}

.acct-timeline-caption strong {
  color: var(--acct-ink);
  font-weight: 600;
}

@media (max-width: 520px) {
  .acct-timeline-label {
    display: none;
  }

  .acct-timeline {
    margin-bottom: 0;
  }
}

@media (min-width: 521px) {
  .acct-timeline-caption {
    display: none;
  }
}

/* ─── Empty states ──────────────────────────────────────────────────────── */
.acct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 18px;
}

.acct-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acct-surface-2);
  color: var(--acct-ink-muted);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  margin-bottom: 12px;
}

.acct-empty-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-empty-body {
  font-size: 13px;
  color: var(--acct-ink-muted);
  margin-top: 4px;
  max-width: 300px;
  line-height: 1.5;
}

/* tip cards (gentle, low-contrast info) */
.acct-tip-card {
  background: var(--acct-surface);
}

/* ─── Messages ──────────────────────────────────────────────────────────── */
.acct-msg-meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.acct-msg-new {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acct-blue-text);
  background: var(--acct-blue-tint);
  padding: 2px 7px;
  border-radius: 999px;
}

.acct-msg-unread .acct-thumb {
  box-shadow: 0 0 0 2px var(--acct-bg), 0 0 0 3px rgba(78, 169, 216, 0.4);
}

/* ─── Rewards ───────────────────────────────────────────────────────────── */
.acct-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

@media (min-width: 560px) {
  .acct-reward-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* the per-tag detail reward picker has 5 options (None / $10 / $25 / $50 / $100) */
.acct-reward-grid[data-acct-detail-rewardgrid] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 560px) {
  .acct-reward-grid[data-acct-detail-rewardgrid] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.acct-reward-opt {
  padding: 14px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--acct-ink);
  cursor: pointer;
  border: 0;
  text-align: center;
  transition: box-shadow 0.18s ease, background-color 0.18s ease, transform 0.14s ease;
}

.acct-reward-opt:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.26);
}

.acct-reward-opt[data-selected="true"] {
  background: var(--acct-green-tint);
  box-shadow: inset 0 0 0 2px var(--acct-green-deep);
  color: var(--acct-green-text);
}

/* (The old Bronze/Silver plan tiles + compare-table CSS lived here. The Membership
   view was redesigned around a membership card + a single coverage ledger, so those
   classes are gone — see the .acct-memcard / .acct-memcov / .acct-memup block below.) */

/* ─── Settings field grid + save ────────────────────────────────────────── */
.acct-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .acct-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.acct-field-wide {
  grid-column: 1 / -1;
}

/* Field-importance hints (employer request): a small label after each contact
   field name showing what matters most. Text-only micro-labels (no dots/pills) —
   Required reads in brand green, Recommended neutral, Optional faint. */
.acct-reqlabel {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.acct-reqhint {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.acct-reqhint--req {
  color: var(--acct-green-text, #4D6618);
}

.acct-reqhint--rec {
  color: var(--acct-ink-soft, #44474B);
}

.acct-reqhint--opt {
  color: var(--acct-ink-muted, #6B6F73);
  font-weight: 600;
}

.acct-settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.acct-saved-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-green-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.acct-saved-note.is-shown {
  opacity: 1;
  transform: none;
}

.acct-btn-danger {
  color: #B4452F;
}

.acct-btn-danger:hover {
  background: rgba(180, 69, 47, 0.07);
  box-shadow: inset 0 0 0 1px rgba(180, 69, 47, 0.3);
}

/* ─── Password field (auth) ─────────────────────────────────────────────── */
.acct-pw-wrap {
  position: relative;
}

.acct-pw-wrap .flow-input {
  padding-right: 46px;
}

.acct-pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--acct-ink-muted);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.acct-pw-toggle:hover {
  color: var(--acct-ink);
  background: rgba(16, 24, 26, 0.05);
}

.acct-pw-status {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.acct-pw-status[data-ok="true"] {
  background: var(--acct-green-deep);
}

.acct-pw-status[data-ok="false"] {
  background: var(--acct-amber);
}

.acct-strength {
  height: 6px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.08);
  overflow: hidden;
}

.acct-strength-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--acct-amber);
  transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease;
}

/* Disabled primary/ink buttons (e.g. auth submit before the form is valid).
   Reads as a calm "not yet" state — a quiet neutral fill with a hairline, NOT a
   washed-out dark bar that looks broken or mid-loading. */
.acct-btn.is-disabled,
.acct-btn:disabled {
  cursor: not-allowed;
  background: rgba(16, 24, 26, 0.05) !important;
  color: var(--acct-ink-muted) !important;
  box-shadow: inset 0 0 0 1px var(--acct-line) !important;
  transform: none !important;
  filter: none !important;
}

.acct-btn.is-disabled:hover,
.acct-btn:disabled:hover {
  transform: none;
  filter: none;
  background: rgba(16, 24, 26, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--acct-line) !important;
}

/* Loading state for async-feeling submits (sign in / create account / submit).
   A small spinner replaces the active feel; label dims; clicks are inert. */
.acct-btn.is-loading {
  cursor: progress;
  color: transparent !important;
  position: relative;
  pointer-events: none;
}

.acct-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: rgba(255, 255, 255, 0.9);
  animation: acctSpin 0.62s linear infinite;
}

.acct-btn-primary.is-loading::after {
  color: rgba(22, 24, 26, 0.7);
}

@keyframes acctSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-btn.is-loading::after {
    animation-duration: 1.6s;
  }
}

/* ─── Account header menu ────────────────────────────────────────────────── */
.acct-menu {
  position: relative;
  display: inline-flex;
}

/* "My account" pill — matches the homepage account trigger (.rm-acct-trigger)
   so the account button is consistent everywhere (no circular avatar). */
.acct-acctbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--acct-ink);
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1;
  padding: 9px 15px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.acct-acctbtn:hover {
  background: #fff;
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2), 0 10px 26px -12px rgba(16, 24, 40, 0.3);
}

.acct-acctbtn svg {
  flex: none;
  transition: transform 0.22s ease;
}

.acct-menu.is-open .acct-acctbtn svg {
  transform: rotate(180deg);
}

@media (max-width: 420px) {
  .acct-acctbtn {
    padding: 9px 12px;
  }
}

.acct-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 248px;
  padding: 7px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--acct-line), 0 24px 50px -18px rgba(16, 24, 26, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.2s;
  z-index: 50;
}

.acct-menu.is-open .acct-menu-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.acct-menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 11px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--acct-line);
}

.acct-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--acct-ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.acct-menu-item:hover {
  background: rgba(16, 24, 26, 0.05);
  color: var(--acct-ink);
}

.acct-menu-item svg {
  flex: none;
  color: var(--acct-ink-muted);
}

.acct-menu-sep {
  display: block;
  height: 1px;
  background: var(--acct-line);
  margin: 5px 4px;
}

.acct-menu-danger {
  color: #B4452F;
}

.acct-menu-danger:hover {
  background: rgba(180, 69, 47, 0.07);
  color: #B4452F;
}

.acct-menu-danger svg {
  color: #B4452F;
}

/* ─── Found Location Sharing summary (owner-side recoveries) ────────────── */
.acct-loc-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .acct-loc-summary {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }
}

.acct-loc-map {
  width: 100%;
}

.acct-loc-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.acct-loc-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--acct-ink-soft);
  line-height: 1.45;
}

.acct-loc-dot {
  flex: none;
  margin-top: 1px;
}

/* ============================================================================
   RICH FLOW MODAL — the reusable dialog that hosts the Activate / Found / Login
   flows. Replaces the old basic in-page tag modal as the PRIMARY UX everywhere
   (homepage hero/nav + account pages). The modal markup is injected inside an
   `.acct-app` wrapper so all the --acct-* tokens + the :focus-visible system
   above apply even on the homepage (where account.css/js are lazy-loaded). The
   token block is mirrored on .acct-modal too as a belt-and-suspenders fallback.
   ========================================================================== */
.acct-modal {
  /* token fallback in case the modal is ever mounted outside .acct-app */
  --acct-bg: #F6F7F5;
  --acct-surface: #FFFFFF;
  --acct-surface-2: #FAFAF8;
  --acct-ink: #16181A;
  --acct-ink-soft: #44474B;
  --acct-ink-muted: #6B6F73;
  --acct-line: rgba(16, 24, 26, 0.09);
  --acct-line-2: rgba(16, 24, 26, 0.14);
  --acct-green: #B4D465;
  --acct-green-deep: #6E9A2E;
  --acct-green-text: #496A1B;
  --acct-green-tint: #EEF6DD;
  --acct-blue: #4EA9D8;
  --acct-blue-deep: #2A7BAE;
  --acct-blue-text: #1C6491;
  --acct-blue-tint: #E4F1F9;
  --acct-amber: #C98A2B;
  --acct-amber-text: #8A5A12;
  --acct-amber-tint: #FBF1DE;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* vertical padding here MUST be half the dialog max-height subtraction below, so
     the dialog never overflows the overlay (which would add a second scrollbar). */
  padding: clamp(7px, 1.3vh, 20px) clamp(12px, 3vw, 28px);
  /* hidden at rest — visibility flip avoids tab-stops while closed */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.26s ease, visibility 0.26s ease;
  overflow-y: auto;
  /* let very tall dialogs scroll the overlay on desktop */
  -webkit-overflow-scrolling: touch;
}

.acct-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.acct-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 20, 0.42);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  cursor: pointer;
}

.acct-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 540px;
  /* focused single-column form (Origin/Cohere); phone sheet overrides below */
  margin: auto 0;
  /* vertically center within the flex overlay when short */
  background: var(--acct-bg);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.06), 0 40px 90px -28px rgba(16, 24, 26, 0.55);
  outline: none;
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease;
  /* the scroll region inside owns the real scrolling */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - clamp(14px, 2.6vh, 40px));
}

.acct-modal.is-open .acct-modal-dialog {
  transform: none;
  opacity: 1;
}

.acct-modal-login .acct-modal-dialog {
  max-width: 452px;
}

.acct-modal-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 22px) clamp(18px, 2.2vw, 22px);
  border-radius: inherit;
}

.acct-modal-body {
  animation: none;
}

/* inside the modal the body intro title is an h2-sized display line; keep the
   intro tighter than the standalone page (less top air in a dialog) */
.acct-modal .flow-body>.acct-rise:first-child {
  margin-bottom: 20px;
}

/* (modal card-flatten + flush card-body live in the FLOW HARDENING block below,
   ~.acct-modal .flow-body [data-flow-card]; the scroll padding is set there too.) */

.acct-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
  color: var(--acct-ink-soft);
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--acct-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.acct-modal-x:hover {
  background: #fff;
  color: var(--acct-ink);
  transform: rotate(90deg);
}

.acct-modal-x:active {
  transform: rotate(90deg) scale(0.94);
}

.acct-modal-x:focus-visible {
  outline: 2px solid var(--acct-blue-deep);
  outline-offset: 2px;
}

/* Body scroll-lock helper (account.js toggles this on <body> while a modal is
   open). Mirrors app.css's .nav-open lock so the page behind can't scroll. */
body.acct-modal-open {
  overflow: hidden;
}

/* Phones + small tablets: every flow modal (Activate, I found, Report lost, Sign
   in, Upgrade/checkout) fills the screen edge-to-edge — full-bleed, square
   corners, no floating card and no visible backdrop edges. The per-flow width
   caps (upgrade 840/780, login 452) are more specific than `.acct-modal-dialog`,
   so they're overridden here too or the modal would still float. */
@media (max-width: 860px) {
  .acct-modal {
    padding: 0;
    align-items: stretch;
  }

  /* the extra `.acct-modal` qualifier raises specificity above the per-flow width
     caps (`.acct-modal-upgrade .acct-modal-dialog` 840/540, login 452) that sit
     LATER in the file — without it those would win on source order and the modal
     would keep floating with a few px of visible edge. */
  .acct-modal .acct-modal-dialog,
  .acct-modal.acct-modal-upgrade .acct-modal-dialog,
  .acct-modal.acct-modal-login .acct-modal-dialog {
    max-width: none;
    margin: 0;
    min-height: 100%;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh;
    transform: translateY(26px);
  }

  .acct-modal.acct-modal-upgrade .acct-upg {
    max-width: none;
  }

  .acct-modal.is-open .acct-modal-dialog {
    transform: none;
  }

  .acct-modal-scroll {
    padding: 56px 18px 32px;
  }

  .acct-modal-x {
    top: 10px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acct-modal,
  .acct-modal-dialog {
    transition: opacity 0.01ms linear;
  }

  .acct-modal-dialog {
    transform: none;
  }

  .acct-modal-x:hover,
  .acct-modal-x:active {
    transform: none;
  }
}

/* ─── Tri-tab segmented control (Activate · I found · Report lost) ──────────
   A calm segmented switcher pinned to the top of the dialog. The sliding
   indicator is a single absolutely-positioned pill; aria-selected + .is-active
   are mirrored by account.js. NOT a status-dot pattern. */
.acct-modal-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 clamp(20px, 3.5vw, 40px);
  margin-top: clamp(20px, 3.2vw, 30px);
  padding: 4px;
  background: var(--acct-surface-2);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  flex: none;
}

.acct-modal-tab-ind {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: calc((100% - 8px) / 3);
  background: var(--acct-surface);
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.10), 0 0 0 1px var(--acct-line);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.acct-modal-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(12px, 1.4vw, 13.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--acct-ink-muted);
  border-radius: 9px;
  transition: color 0.18s ease;
  min-width: 0;
  white-space: nowrap;
}

.acct-modal-tab svg {
  flex: none;
  opacity: 0.85;
}

.acct-modal-tab.is-active {
  color: var(--acct-ink);
}

.acct-modal-tab:hover {
  color: var(--acct-ink-soft);
}

.acct-modal-tab:focus-visible {
  outline: 2px solid var(--acct-blue-deep);
  outline-offset: 2px;
}

/* tighten the indicator transition for the .acct-modal-scroll top padding so the
   tabs and body read as one surface (less top air now that tabs sit above). */
.acct-modal-tabs~.acct-modal-scroll {
  padding-top: clamp(18px, 3vw, 26px);
}

@media (max-width: 480px) {
  .acct-modal-tab span {
    font-size: 11.5px;
    white-space: nowrap;
  }

  .acct-modal-tab {
    gap: 0;
    padding: 9px 3px;
  }

  .acct-modal-tab svg {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-modal-tab-ind {
    transition: none;
  }
}

/* per-item action cluster (Report lost · Manage) on rich item rows */
.acct-row-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex: none;
}

/* report-lost: the "enter a tag ID instead" disclosure */
.flow-lost-manual {
  margin-top: 4px;
}

.flow-lost-manual>summary {
  list-style: none;
}

.flow-lost-manual>summary::-webkit-details-marker {
  display: none;
}

.flow-lost-manual>summary:focus-visible {
  outline: 2px solid var(--acct-blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.flow-lost-manual[open]>summary {
  color: var(--acct-ink-muted);
}

/* ============================================================================
   OVERVIEW DASHBOARD — a focused, glanceable composition: a profile card with a
   protection-score ring, two headline metric cards, a "channels connected"
   strip, a recovery-activity chart, and a right rail (recent activity feed +
   protection breakdown bars). Every block below is a REUSABLE component:
     .acct-bigstat / .acct-stat-pill / .acct-stack / .acct-connected
     .acct-chart* / .acct-railfeed* / .acct-barrow / .acct-bar / .acct-trend
     .acct-profile*
   They follow the calm two-tone language (no loud gradient chrome).
   ============================================================================ */

/* greeting-row search (presentational, mirrors the marketing search pill) */
.acct-ov-search {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: clamp(200px, 22vw, 280px);
  padding: 10px 15px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  color: var(--acct-ink-muted);
  transition: box-shadow 0.18s ease;
}

.acct-ov-search:focus-within {
  box-shadow: inset 0 0 0 1px var(--acct-blue-deep), 0 0 0 3.5px rgba(78, 169, 216, 0.14);
}

.acct-ov-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--acct-ink);
}

.acct-ov-search input::placeholder {
  color: var(--acct-ink-muted);
}

/* ── layout: main content column + right rail ───────────────────────────── */
.acct-ov-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1280px) {
  .acct-ov-grid {
    grid-template-columns: minmax(0, 1fr) 322px;
    gap: 24px;
    align-items: start;
  }
}

.acct-ov-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.acct-ov-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* top cluster: profile (tall) + two headline stats + a connected strip */
.acct-ov-cluster {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "profile" "stat1" "stat2" "conn";
  gap: 14px;
}

@media (min-width: 560px) {
  .acct-ov-cluster {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "profile profile" "stat1 stat2" "conn conn";
  }
}

@media (min-width: 900px) {
  .acct-ov-cluster {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "profile stat1 stat2"
      "profile conn  conn";
  }
}

.acct-ov-profile {
  grid-area: profile;
}

.acct-ov-stat1 {
  grid-area: stat1;
}

.acct-ov-stat2 {
  grid-area: stat2;
}

.acct-ov-conn {
  grid-area: conn;
}

/* ── Profile card (avatar + score ring + count pills) ───────────────────── */
.acct-profile-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 18px 18px 20px;
}

.acct-profile-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acct-profile-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acct-surface-2);
  color: var(--acct-ink-muted);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color 0.18s ease, box-shadow 0.18s ease;
}

.acct-profile-icon:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-profile-ringwrap {
  position: relative;
  margin: 16px 0 14px;
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
}

.acct-profile-ring {
  position: absolute;
  inset: 0;
}

.acct-profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.acct-profile-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-green-deep);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 26, 0.35), inset 0 0 0 1px var(--acct-line);
}

.acct-profile-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: var(--acct-ink);
}

.acct-profile-role {
  font-size: 13px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

.acct-profile-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.acct-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.16s ease, background-color 0.18s ease;
}

.acct-stat-pill:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  background: #fff;
}

.acct-stat-pill b {
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-stat-pill svg {
  flex: none;
}

/* ── Headline metric cards (calm green / blue tint, NOT loud gradients) ──── */
.acct-bigstat {
  position: relative;
  overflow: hidden;
  border-radius: var(--acct-radius);
  padding: 17px 18px;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px var(--acct-line), var(--acct-shadow);
  text-decoration: none;
}

.acct-bigstat-green {
  background: linear-gradient(150deg, #EAF4D6 0%, #F3F9E6 58%, #FAFCF2 100%);
}

.acct-bigstat-blue {
  background: linear-gradient(150deg, #DFEEF8 0%, #EAF3FB 58%, #F4FAFD 100%);
}

.acct-bigstat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.acct-bigstat-label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--acct-ink-soft);
}

.acct-bigstat-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.06);
}

.acct-bigstat-green .acct-bigstat-icon {
  color: var(--acct-green-deep);
}

.acct-bigstat-blue .acct-bigstat-icon {
  color: var(--acct-blue-deep);
}

.acct-bigstat-num {
  margin-top: auto;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-size: clamp(34px, 3.4vw, 44px);
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-bigstat-num small {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--acct-ink-muted);
  margin-left: 1px;
  letter-spacing: 0;
}

.acct-bigstat-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--acct-ink-muted);
}

a.acct-bigstat {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.acct-bigstat:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--acct-line-2), var(--acct-shadow-lift);
}

/* ── Connected channels strip (overlapping icon stack + more) ───────────── */
.acct-connected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-radius: var(--acct-radius);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  text-decoration: none;
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

a.acct-connected:hover {
  background: #F3F4F0;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-connected-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-connected-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

.acct-connected-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* overlapping avatar / icon stack — reusable (channels, finders, mentors…) */
.acct-stack {
  display: inline-flex;
  align-items: center;
}

.acct-stack>* {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 0 0 2px var(--acct-surface-2), inset 0 0 0 1px var(--acct-line);
  margin-left: -10px;
  color: var(--acct-ink-soft);
}

.acct-stack>*:first-child {
  margin-left: 0;
}

.acct-stack-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  margin-left: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  color: var(--acct-ink-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ── Activity chart ─────────────────────────────────────────────────────── */
.acct-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 4px;
}

.acct-chart-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--acct-ink);
}

.acct-chart-lede {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

.acct-pill-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink);
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}

.acct-pill-select:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.26);
}

.acct-pill-select span {
  color: var(--acct-ink-muted);
  font-weight: 500;
}

.acct-chart-plot {
  display: flex;
  gap: 12px;
  padding: 6px 18px 16px;
}

.acct-chart-months {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-top: 6px;
  flex: none;
}

.acct-chart-month {
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-ink-muted);
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.acct-chart-month:hover {
  color: var(--acct-ink);
}

.acct-chart-month.is-active {
  background: var(--acct-blue-deep);
  color: #fff;
}

.acct-chart-chev {
  color: var(--acct-ink-muted);
  display: inline-flex;
}

.acct-chart-canvas {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 196px;
  border-radius: 12px;
  background-color: var(--acct-surface-2);
  background-image: radial-gradient(rgba(16, 24, 26, 0.10) 1px, transparent 1.4px);
  background-size: 18px 18px;
  background-position: -2px -2px;
}

.acct-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.acct-chart-tooltip {
  position: absolute;
  transform: translate(-50%, -116%);
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  box-shadow: 0 0 0 1px var(--acct-line), 0 16px 30px -12px rgba(16, 24, 26, 0.32);
  white-space: nowrap;
  pointer-events: none;
}

.acct-chart-tooltip b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--acct-ink);
  letter-spacing: -0.01em;
}

.acct-chart-tooltip span {
  font-size: 11px;
  color: var(--acct-ink-muted);
}

.acct-chart-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 1px 1px 0 rgba(16, 24, 26, 0.06);
}

.acct-chart-node {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--acct-blue), 0 4px 10px -2px rgba(16, 24, 26, 0.4);
}

.acct-chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px 18px;
  flex-wrap: wrap;
}

.acct-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--acct-ink-soft);
}

.acct-chart-legend>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.acct-chart-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: none;
}

.acct-chart-big {
  text-align: right;
}

.acct-chart-big b {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 30px;
  color: var(--acct-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.acct-chart-big span {
  display: block;
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

/* ── Right-rail recent activity feed ────────────────────────────────────── */
.acct-railfeed {
  display: flex;
  flex-direction: column;
}

.acct-railfeed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--acct-line);
}

.acct-railfeed-item:first-child {
  border-top: 0;
  padding-top: 2px;
}

.acct-railfeed-when {
  flex: none;
  width: 58px;
}

.acct-railfeed-when b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-railfeed-when span {
  font-size: 11px;
  color: var(--acct-ink-muted);
}

.acct-railfeed-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.acct-railfeed-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-railfeed-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--acct-ink-soft);
  margin-top: 2px;
}

.acct-railfeed-sub .acct-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: none;
}

.acct-railfeed-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--acct-ink-muted);
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.acct-railfeed-item:hover .acct-railfeed-arrow {
  background: var(--acct-surface-2);
  color: var(--acct-ink);
  transform: translate(1px, -1px);
}

/* ── Protection breakdown bars (labelled progress + trend) ──────────────── */
.acct-barlist {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.acct-barrow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.acct-barrow-label {
  flex: none;
  width: 86px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acct-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-bar {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 24, 26, 0.08);
  overflow: hidden;
}

.acct-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  background: linear-gradient(90deg, #6FC0E6, #4EA9D8);
  transition: width 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-bar-fill-amber {
  background: linear-gradient(90deg, #E7B566, #C98A2B);
}

.acct-barrow-pct {
  flex: none;
  width: 36px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-trend {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acct-trend-up {
  background: rgba(78, 169, 216, 0.14);
  color: var(--acct-blue-deep);
}

.acct-trend-down {
  background: var(--acct-amber-tint);
  color: var(--acct-amber-text);
}

.acct-barrow:hover .acct-barrow-label {
  color: var(--acct-blue-text);
}

@media (prefers-reduced-motion: reduce) {
  .acct-bar-fill {
    transition-duration: 0.01ms;
  }
}

/* ── Notifications drawer — "View all notifications" expands a panel that grows
   top+bottom outward (clip-path) to fill the rail with a scrollable event log ── */
.acct-ov2-rail {
  position: relative;
}

/* anchor the absolute drawer */
.acct-notifdrawer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #F4F5F7;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(44% 0% 44% 0% round 16px);
  transition: clip-path 0.44s cubic-bezier(0.5, 0, 0, 1), opacity 0.3s ease, visibility 0.44s;
}

.acct-ov2-rail.is-notif .acct-notifdrawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0% 0% 0% 0% round 0px);
}

.acct-notifdrawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  margin-bottom: 2px;
  box-shadow: inset 0 -1px 0 var(--acct-line);
}

.acct-notifdrawer-head .acct-ov2-railtitle {
  font-size: clamp(15px, 1.5vw, 17px);
}

.acct-notifdrawer-close {
  width: 30px;
  height: 30px;
}

.acct-notiflist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--acct-line-2) transparent;
}

.acct-notiflist::-webkit-scrollbar {
  width: 11px;
}

.acct-notiflist::-webkit-scrollbar-track {
  background: transparent;
}

.acct-notiflist::-webkit-scrollbar-thumb {
  background: var(--acct-line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.acct-notiflist:hover::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 26, 0.28);
  background-clip: padding-box;
}

.acct-notif-item {
  display: flex;
  gap: 12px;
  padding: 13px 2px;
  align-items: flex-start;
}

.acct-notif-item+.acct-notif-item {
  border-top: 1px solid var(--acct-line);
}

.acct-notif-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.acct-notif-ic-blue {
  color: var(--acct-blue-deep);
  background: var(--acct-blue-tint);
}

.acct-notif-ic-green {
  color: var(--acct-green-deep);
  background: var(--acct-green-tint);
}

.acct-notif-ic-amber {
  color: var(--acct-amber-text);
  background: var(--acct-amber-tint);
}

.acct-notif-ic-ink {
  color: var(--acct-ink-soft);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-notif-body {
  flex: 1;
  min-width: 0;
}

.acct-notif-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-notif-sub {
  font-size: 12px;
  color: var(--acct-ink-soft);
  margin-top: 2px;
  line-height: 1.45;
}

.acct-notif-when {
  flex: none;
  font-size: 11px;
  color: var(--acct-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}

.acct-notif-empty {
  padding: 40px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--acct-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .acct-notifdrawer {
    transition: opacity 0.16s ease, visibility 0.16s;
    clip-path: inset(0% 0% 0% 0% round 16px);
  }
}

/* Demo data switch — a small, clearly-labelled control to preview a fresh, empty
   account vs the seeded demo (so the boss can see both). Fixed, out of the way. */
/* Dev preview panel — pinned bottom-left, holds the persistent-state controls */
.acct-dev {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px 12px;
  border-radius: 14px;
  background: rgba(20, 22, 25, 0.94);
  color: #fff;
  box-shadow: 0 16px 36px -16px rgba(16, 20, 26, 0.78), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 600;
  min-width: 226px;
}

.acct-dev-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.acct-dev-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acct-dev-label {
  letter-spacing: -0.01em;
  opacity: 0.8;
}

.acct-dev-seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px;
}

.acct-dev-segbtn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.acct-dev-segbtn:hover {
  color: #fff;
}

.acct-dev-segbtn[aria-pressed="true"] {
  background: #fff;
  color: #16181A;
}

.acct-dev-demo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.acct-demo-label {
  letter-spacing: -0.01em;
  opacity: 0.82;
}

.acct-demo-switch {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color 0.22s ease;
  padding: 0;
  flex: none;
}

.acct-demo-switch[aria-checked="true"] {
  background: #7BAE33;
}

.acct-demo-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.24s cubic-bezier(0.5, 0, 0, 1);
}

.acct-demo-switch[aria-checked="true"] .acct-demo-knob {
  transform: translateX(16px);
}

.acct-demo-state {
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {

  .acct-demo-knob,
  .acct-demo-switch {
    transition-duration: 0.01ms;
  }
}

/* ============================================================================
   OVERVIEW v2 — "dashboard panel" redesign.
   One large rounded panel (calm, cool surface) floating on a soft grey backdrop,
   split into a MAIN column and a right RAIL by a full-height hairline. The right
   rail and the chart BLEND into the panel (no card chrome); only the profile +
   the two headline stat cards keep a surface. Scoped to the overview page so the
   rest of the account surfaces are untouched. Reuses the proven components
   (.acct-bigstat / .acct-profile-* / .acct-chart-* / .acct-railfeed* / .acct-bar*).
   ============================================================================ */

/* ── account-dashboard chrome (ALL sections now use the panel + top tabs) ────
   Wider container, a calm cool backdrop so the panel floats, and the top-tab
   nav above it. Scoped to dashboard pages via [data-acct-page-root] (the flow
   pages don't have it). */
[data-acct-page-root] .acct-container {
  /* Same fluid width envelope as the marketing shells (see theme-source.css) so
     the dashboard scales the SAME way across resolutions — pixel-identical at/
     below ~1520px, then fills out to a 1700 cap (no tiny 4K island). The account
     header + footer use the IDENTICAL value so the logo/footer align with the
     panel edge at every width (they were a flat 1320 → narrower than the panel). */
  max-width: max(1500px, min(94vw, 1880px));
  padding-top: clamp(14px, 2vh, 22px);
  padding-bottom: 64px;
}

#atlas-root:has(> main[data-acct-page-root]) {
  background:
    radial-gradient(150% 120% at 50% -25%, #ECEEF1 0%, #E3E6EB 52%, #D9DDE4 100%);
  background-attachment: fixed;
}

#atlas-root:has(> main[data-acct-page-root]) header[data-header] {
  background: rgba(231, 234, 238, 0.82) !important;
}

/* ── Section nav — blended, centered text links above the panel. No pills:
   plain links on the page backdrop, an ink underline marks the active section,
   and the row fades out at both edges (so it reads as one quiet line of type
   and degrades to a clean horizontal scroller on narrow screens). ──────────*/
.acct-tabs {
  margin-bottom: clamp(16px, 1.9vw, 26px);
}

.acct-tabs-row {
  --tab-fade: clamp(18px, 6vw, 64px);
  display: flex;
  justify-content: safe center;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tab-fade), #000 calc(100% - var(--tab-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tab-fade), #000 calc(100% - var(--tab-fade)), transparent 100%);
}

.acct-tabs-row::-webkit-scrollbar {
  display: none;
}

/* the two zones: SECTIONS (text tabs, one active) | PANELS (toggle switches) */
.acct-tabs-sections {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: clamp(2px, 1.7vw, 28px);
}

.acct-tabs-panels {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.acct-tabs-div {
  flex: none;
  align-self: center;
  width: 1px;
  height: 20px;
  background: var(--acct-line-2);
  margin: 0 clamp(8px, 1.4vw, 20px);
}

/* PANEL toggles — read as on/off SWITCHES, not nav: a hairline button that fills
   ink when its side panel is open (deliberately unlike the underline text tabs) */
.acct-paneltab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--acct-ink-soft);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.acct-paneltab:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-paneltab[data-active="true"] {
  color: #fff;
  background: var(--acct-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.22);
}

.acct-paneltab-ic {
  display: inline-flex;
  color: var(--acct-ink-muted);
  transition: color .18s ease;
}

.acct-paneltab:hover .acct-paneltab-ic {
  color: var(--acct-ink-soft);
}

.acct-paneltab[data-active="true"] .acct-paneltab-ic {
  color: rgba(255, 255, 255, 0.92);
}

.acct-paneltab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--acct-blue);
  color: #fff;
  margin-left: 1px;
}

.acct-paneltab[data-active="true"] .acct-paneltab-badge {
  background: rgba(255, 255, 255, 0.24);
}

/* phones: there's no room to flank, so the toggles read as plain quick-links */
@media (max-width: 680px) {
  .acct-tabs-div {
    margin: 0 8px;
  }

  .acct-paneltab-label {
    display: none;
  }

  .acct-paneltab {
    padding: 7px 9px;
  }
}

.acct-tab {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 6px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--acct-ink-muted);
  transition: color 0.18s ease;
}

.acct-tab:hover {
  color: var(--acct-ink-soft);
}

/* active tab is marked by weight + ink colour only (no underline) */
.acct-tab[data-active="true"] {
  color: var(--acct-ink);
  font-weight: 600;
}

.acct-tab-count {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acct-ink-muted);
}

.acct-tab[data-active="true"] .acct-tab-count {
  color: var(--acct-ink-soft);
}

.acct-tab-count-blue {
  color: var(--acct-blue-text);
}

/* ── Panel wrapper (holds each section's content; overview opts out) ────────*/
.acct-panel {
  background: #F4F5F7;
  border-radius: clamp(20px, 1.8vw, 30px);
  padding: clamp(18px, 2.1vw, 32px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(20, 24, 33, 0.04),
    0 38px 72px -40px rgba(20, 24, 33, 0.34);
}

/* On the overview, the PANEL itself is the visible surface and it holds the tab
   switcher at its top, then the dashboard body (.acct-ov2) beneath. The panel
   keeps the base #F4F5F7 surface + shadow + radius; we just zero its padding so
   the nav and .acct-ov2 manage their own insets, and .acct-ov2 becomes a
   pass-through (it no longer paints its own surface — see below). */
[data-acct-page="overview"] .acct-panel {
  padding: 0;
}

/* the tab switcher, now living INSIDE the panel — a centered tab row pinned to
   the panel top, separated from the body by an inset hairline. (Scoped to the
   overview; on the other account pages the nav keeps its default in-panel flow.) */
[data-acct-page="overview"] .acct-tabs {
  margin-bottom: 0;
  /* equal top/bottom padding so the tab row sits vertically centered in the
     strip above the hairline (it was bottom-heavy before) */
  padding: clamp(11px, 1.3vw, 16px) 0;
  position: relative;
}

[data-acct-page="overview"] .acct-tabs::after {
  content: "";
  position: absolute;
  left: clamp(18px, 2vw, 32px);
  right: clamp(18px, 2vw, 32px);
  bottom: 0;
  height: 1px;
  background: var(--acct-line);
}

/* ── SPA view swap — Overview + Tags (and, later, more) are ONE panel. Views
   crossfade in place; no page loads. The overview view stays in normal flow so
   it defines the panel height, and the tags + detail views overlay it at the
   IDENTICAL size (so the Tags screen is literally the same panel as Overview).*/
.acct-ov2[data-acct-views] {
  position: relative;
}

.acct-ov2[data-acct-views]>.acct-view,
.acct-ov2[data-acct-views]>.acct-ov2-detail {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.acct-ov2[data-acct-views]>[data-acct-view="overview"][data-active="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.acct-view-overlay {
  /* fill the panel and re-apply its padding so overlay content is inset exactly
     like the overview content (1:1). The overlay itself CLIPS; a styled inner
     region (.acct-viewscroll) does the scrolling, so the scrollbar floats inside
     the panel — pinned header above, bottom padding below — and never rides the
     panel edge / rounded corner. */
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: clamp(18px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
}

.acct-view-overlay[data-active="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* the single-tag detail has no inner scroll region — it scrolls as a whole (its
   content tracks the overview height, so it rarely overflows) */
.acct-ov2-detail.acct-view-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {

  .acct-ov2[data-acct-views]>.acct-view,
  .acct-ov2[data-acct-views]>.acct-ov2-detail {
    transition: opacity 0.16s ease;
  }

  .acct-view-overlay {
    transform: none;
  }
}

/* ── shared in-panel scroll region — a slim, rounded, on-brand thumb that floats
   INSIDE the panel padding so it never sits on the panel edge / rounded corner.
   Used by the swap-in views (Tags grid, Recoveries stack), the detail, and the
   side panel, so every scroll on the account surface looks the same. ─────────*/
.acct-viewscroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.acct-viewscroll,
.acct-ov2-detail.acct-view-overlay,
.acct-insp-body {
  scrollbar-width: thin;
  scrollbar-color: var(--acct-line-2) transparent;
}

.acct-viewscroll::-webkit-scrollbar,
.acct-ov2-detail.acct-view-overlay::-webkit-scrollbar,
.acct-insp-body::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.acct-viewscroll::-webkit-scrollbar-track,
.acct-ov2-detail.acct-view-overlay::-webkit-scrollbar-track,
.acct-insp-body::-webkit-scrollbar-track {
  background: transparent;
}

.acct-viewscroll::-webkit-scrollbar-thumb,
.acct-ov2-detail.acct-view-overlay::-webkit-scrollbar-thumb,
.acct-insp-body::-webkit-scrollbar-thumb {
  background: var(--acct-line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.acct-viewscroll:hover::-webkit-scrollbar-thumb,
.acct-ov2-detail.acct-view-overlay:hover::-webkit-scrollbar-thumb,
.acct-insp-body:hover::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 26, 0.28);
  background-clip: padding-box;
}

.acct-viewscroll::-webkit-scrollbar-thumb:active,
.acct-ov2-detail.acct-view-overlay::-webkit-scrollbar-thumb:active,
.acct-insp-body::-webkit-scrollbar-thumb:active {
  background: rgba(16, 24, 26, 0.42);
  background-clip: padding-box;
}

/* ── Tags page ("view all your tags") — header · filters · a visual table of
   every tag, all on the overview's paper panel (metrics strip removed) ──────*/
.acct-tags-head {
  margin-bottom: clamp(18px, 2vw, 26px);
  align-items: flex-start;
}

.acct-tags-add {
  height: 40px;
  gap: 7px;
  padding: 0 16px;
  flex: none;
}

@media (max-width: 560px) {
  .acct-tags-head .acct-ov2-head-tools {
    width: 100%;
  }

  .acct-tags-head .acct-ov-search {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── MOBILE (<=1023px): drop the desktop fixed-panel overlay model. On desktop the
   views are absolutely-positioned over a height-defining overview, each with its
   own inner scroll region — calm on a panel, but on a phone it boxed the tags grid
   and broke tapping a tag (the detail overlay had nowhere to scroll). Here every
   view becomes a normal-flow block and the PAGE scrolls; only the active view (or
   the open tag detail) is rendered. (Rayan, 2026-06-18) ───────────────────────*/
@media (max-width: 1023px) {
  .acct-ov2[data-acct-views] {
    display: block;
    position: static;
  }

  .acct-ov2[data-acct-views]>[data-acct-view="overview"][data-active="false"] {
    display: none;
  }

  .acct-view-overlay {
    position: static;
    inset: auto;
    overflow: visible;
    padding: 0;
    transform: none;
    display: none;
  }

  .acct-view-overlay[data-active="true"] {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .acct-ov2-detail.acct-view-overlay {
    overflow: visible;
  }

  .acct-ov2-detail.acct-view-overlay[data-active="true"] {
    display: block;
  }

  .acct-viewscroll {
    overflow: visible;
    min-height: 0;
  }

  /* the view's header is the first DOM child; the overview-grid `order:1` rule below
     would otherwise drop it BELOW the content in this flex column (it put "My
     Account" + the reachability chip at the bottom). Pin it back to the top. */
  .acct-view-overlay>.acct-ov2-head {
    order: -1;
  }
}

/* toolbar: filter pills (left) + result count (right) */
.acct-tags-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.acct-tags-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.acct-tags-filter {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--acct-ink-soft);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: pointer;
  border: 0;
  transition: color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.acct-tags-filter:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-tags-filter[data-active="true"] {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.22);
}

.acct-tags-count {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* the card grid grows to the overview's footprint, then scrolls inside the
   panel (so few tags = same size as the overview, many tags = a capped,
   cleanly-scrollable grid). The header/metrics/filters stay put above it. */
/* the tags view fills the overview-sized panel; the card grid scrolls inside the
   overlay (which is already a scroll container) once the cards run past it. */
[data-acct-view="tags"] [data-acct-tagstable] {
  padding: 12px 6px 12px 2px;
  margin: 0;
}

/* the grid of LARGE tag cards — the exact tile from the overview "Your tags" */
.acct-tags-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
  gap: clamp(20px, 2vw, 30px) clamp(14px, 1.5vw, 22px);
  align-content: start;
}

.acct-tags-grid .acct-tagtile {
  width: auto;
  flex: none;
}

.acct-tags-empty {
  padding: 44px 10px;
  font-size: 13.5px;
  color: var(--acct-ink-muted);
}

/* ── Active recoveries view — rebuilt on the OVERVIEW's dashboard grid (main +
   rail split by one hairline) so it reads as the same panel, a different lens ──*/
.acct-recov-head {
  margin-bottom: clamp(14px, 1.7vw, 24px);
  align-items: flex-start;
}

.acct-recov-headchip {
  align-self: center;
  white-space: nowrap;
}

.acct-recov-scroll {
  padding: 2px 8px 16px 2px;
}

.acct-recov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ov-rail, clamp(312px, 25vw, 384px));
  column-gap: var(--ov-gap, clamp(22px, 2.3vw, 40px));
  position: relative;
  align-items: start;
}

.acct-recov-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--ov-rail, clamp(312px, 25vw, 384px)) + (var(--ov-gap, clamp(22px, 2.3vw, 40px)) / 2) - 0.5px);
  width: 1px;
  background: var(--acct-line);
  pointer-events: none;
}

.acct-recov-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 22px);
}

.acct-recov-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 26px);
}

@media (max-width: 1079px) {
  .acct-recov-grid {
    grid-template-columns: 1fr;
    row-gap: clamp(22px, 3vw, 30px);
  }

  .acct-recov-grid::before {
    display: none;
  }

  .acct-recov-rail {
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid var(--acct-line);
  }
}

/* hero — the item on its way home, given the panel's most presence (blue for an
   in-transit return, amber when we're watching the network for a scan) */
.acct-recov-hero {
  display: block;
  position: relative;
  background: linear-gradient(168deg, #E9F3FB 0%, #F2F8FD 44%, #FCFEFF 100%);
  border-radius: clamp(18px, 1.5vw, 24px);
  padding: clamp(18px, 1.7vw, 26px);
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.18), 0 1px 2px rgba(20, 24, 33, 0.04), 0 26px 52px -36px rgba(42, 123, 174, 0.5);
}

.acct-recov-hero.is-watching {
  background: linear-gradient(168deg, #FBF1DD 0%, #FCF7EB 46%, #FEFDFA 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 138, 43, 0.2), 0 1px 2px rgba(20, 24, 33, 0.04), 0 26px 52px -36px rgba(201, 138, 43, 0.42);
}

.acct-recov-hero-top {
  display: flex;
  gap: clamp(14px, 1.5vw, 20px);
  align-items: center;
}

/* raised specificity so it beats .acct-tagtile-frame's width:100% (declared later) */
.acct-recov-hero .acct-recov-hero-media {
  width: clamp(84px, 8vw, 114px);
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: 17px;
}

.acct-recov-hero-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.acct-recov-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--acct-blue-text);
}

.acct-recov-hero.is-watching .acct-recov-hero-eyebrow {
  color: var(--acct-amber-text);
}

.acct-recov-hero-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(19px, 1.9vw, 25px);
  color: var(--acct-ink);
  margin-top: 3px;
}

.acct-recov-hero-where {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  margin-top: 4px;
}

.acct-recov-hero-eta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 9px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-blue-text);
}

.acct-recov-hero.is-watching .acct-recov-hero-eta {
  color: var(--acct-amber-text);
}

/* the stepper between the head and the map is the emotional centerpiece */
.acct-recov-hero .acct-timeline {
  margin-top: clamp(18px, 1.8vw, 24px);
}

.acct-recov-hero .acct-timeline-caption {
  margin-top: 13px;
}

/* approximate-area map + a one-line reassurance, side by side */
.acct-recov-hero-loc {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  align-items: center;
  margin-top: clamp(16px, 1.6vw, 22px);
  padding-top: clamp(16px, 1.6vw, 20px);
  border-top: 1px solid rgba(42, 123, 174, 0.16);
}

.acct-recov-hero.is-watching .acct-recov-hero-loc {
  border-top-color: rgba(201, 138, 43, 0.18);
}

.acct-recov-hero-map {
  height: clamp(120px, 13vw, 156px);
}

.acct-recov-map-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-recov-hero-locnote {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-recov-hero-locnote svg {
  flex: none;
  margin-top: 1px;
  color: var(--acct-blue-deep);
}

.acct-recov-hero.is-watching .acct-recov-hero-locnote svg {
  color: var(--acct-amber-text);
}

.acct-recov-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(16px, 1.6vw, 20px);
  height: 40px;
  padding: 0 18px;
  border-radius: 11px;
  background: var(--acct-ink);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.acct-recov-hero-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(16, 24, 26, 0.5);
  color: #fff;
}

.acct-recov-hero-cta svg {
  transition: transform 0.2s ease;
}

.acct-recov-hero-cta:hover svg {
  transform: translateX(2px);
}

/* empty hero — calm, reassuring (nothing lost right now) */
.acct-recov-hero-empty {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: clamp(30px, 4vw, 48px) clamp(20px, 3vw, 32px);
  background: linear-gradient(168deg, #EEF6E1 0%, #F4F9EA 50%, #FCFEF8 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.18), 0 26px 52px -36px rgba(110, 154, 46, 0.4);
}

.acct-recov-empty-ic {
  color: var(--acct-green-deep);
  margin-bottom: 6px;
}

.acct-recov-empty-sub {
  font-size: 13.5px;
  color: var(--acct-ink-soft);
  max-width: 46ch;
  line-height: 1.55;
}

.acct-recov-empty-cta {
  margin-top: 14px;
}

/* "Also in progress" — the remaining active recoveries as refined rows */
.acct-recov-active-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: clamp(4px, 0.5vw, 8px) 2px 12px;
}

.acct-recov-active-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: var(--acct-ink);
}

.acct-recov-active-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-muted);
}

.acct-recov-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acct-recov-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: box-shadow 0.18s ease, transform 0.2s ease;
}

a.acct-recov-row:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2), 0 14px 28px -18px rgba(16, 24, 26, 0.4);
  transform: translateY(-1px);
}

.acct-recov-row .acct-recov-row-media {
  width: 56px;
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: 13px;
}

.acct-recov-row-body {
  flex: 1;
  min-width: 0;
}

.acct-recov-row-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-recov-row-sub {
  font-size: 12px;
  color: var(--acct-ink-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the row has no stepper, so its current-stage caption stays visible at every
   width (overriding .acct-timeline-caption's desktop display:none) */
.acct-recov-row .acct-recov-row-now {
  display: flex;
  margin-top: 7px;
}

.acct-recov-row.is-watching .acct-timeline-caption-dot {
  background: var(--acct-amber-text);
}

.acct-recov-row-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.acct-recov-row-arrow {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--acct-ink-muted);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color .18s ease, transform .2s ease, background-color .18s ease;
}

a.acct-recov-row:hover .acct-recov-row-arrow {
  color: var(--acct-ink);
  background: #fff;
  transform: translate(1px, -1px);
}

/* rail — at-a-glance editorial numbers (icon · label · big number, hairlines) */
.acct-recov-stats {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.acct-recov-stat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 2px;
  border-top: 1px solid var(--acct-line);
}

.acct-recov-stat:first-child {
  border-top: 0;
  padding-top: 4px;
}

.acct-recov-stat-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}

.acct-recov-stat-blue {
  color: var(--acct-blue-deep);
  background: var(--acct-blue-tint);
}

.acct-recov-stat-amber {
  color: var(--acct-amber-text);
  background: var(--acct-amber-tint);
}

.acct-recov-stat-green {
  color: var(--acct-green-deep);
  background: var(--acct-green-tint);
}

.acct-recov-stat-ink {
  color: var(--acct-ink-soft);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-recov-stat-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--acct-ink-soft);
}

.acct-recov-stat-num {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

/* rail — past returns reuse the overview's recent-activity feed, with a calm
   green check; the items are history, so they're not links */
.acct-recov-past .acct-railfeed-sub svg {
  color: var(--acct-green-deep);
  flex: none;
}

.acct-recov-pastitem .acct-railfeed-when b {
  color: var(--acct-ink-soft);
}

/* rail — the location-sharing reassurance, demoted from a big card to a note */
.acct-recov-sharenote {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  color: var(--acct-ink-muted);
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-recov-sharenote-ic {
  flex: none;
  color: var(--acct-green-deep);
  margin-top: 1px;
}

.acct-recov-sharenote em {
  font-style: italic;
  color: var(--acct-ink-soft);
}

@media (max-width: 620px) {
  .acct-recov-hero-loc {
    grid-template-columns: 1fr;
  }
}

/* phones: the row gets tight — float the status chip to the top-right (out of
   flow) so the body keeps full width, drop the redundant arrow (the whole row is
   a link), and only the title clears the chip */
@media (max-width: 560px) {
  .acct-recov-row {
    position: relative;
    align-items: flex-start;
    gap: 12px;
  }

  .acct-recov-row .acct-recov-row-media {
    width: 48px;
  }

  .acct-recov-row-end {
    position: absolute;
    top: 12px;
    right: 13px;
  }

  .acct-recov-row-arrow {
    display: none;
  }

  .acct-recov-row-title {
    padding-right: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acct-recov-hero-cta:hover,
  a.acct-recov-row:hover {
    transform: none;
  }

  .acct-recov-hero-cta:hover svg,
  a.acct-recov-row:hover .acct-recov-row-arrow {
    transform: none;
  }
}

/* ============================================================================
   CONVERTED VIEW SCAFFOLD — shared by Rewards · Membership · Settings.
   Each is rebuilt on the overview's two-column dashboard grid (main + rail split
   by one full-height hairline) so it reads as the same panel through a different
   lens. The geometry mirrors .acct-recov-grid / .acct-ov2-grid; the var fallbacks
   keep it self-contained if a view is ever hosted outside .acct-ov2.
   ============================================================================ */
.acct-vscroll {
  padding: 2px 8px 16px 2px;
}

.acct-vgrid {
  display: grid;
  grid-template-columns: var(--ov-rail, clamp(312px, 25vw, 384px)) minmax(0, 1fr);
  /* RAIL on the left */
  column-gap: var(--ov-gap, clamp(22px, 2.3vw, 40px));
  position: relative;
  align-items: start;
}

.acct-vgrid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ov-rail, clamp(312px, 25vw, 384px)) + (var(--ov-gap, clamp(22px, 2.3vw, 40px)) / 2) - 0.5px);
  width: 1px;
  background: var(--acct-line);
  pointer-events: none;
}

.acct-vgrid-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 24px);
  container: vmain / inline-size;
}

.acct-vgrid-rail {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 26px);
}

@media (max-width: 1079px) {
  .acct-vgrid {
    grid-template-columns: 1fr;
    row-gap: clamp(22px, 3vw, 30px);
  }

  .acct-vgrid::before {
    display: none;
  }

  /* single column: main first, rail below (reset the desktop row/column placement) */
  .acct-vgrid-main {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .acct-vgrid-rail {
    grid-column: 1;
    grid-row: auto;
    order: 2;
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid var(--acct-line);
  }
}

/* My Account on phones: ONE continuous surface — drop the contact-form card chrome
   + the rail note box so the fields and account actions sit directly on the page
   background (the rail action sections are already flat). (Rayan, 2026-06-18) */
@media (max-width: 640px) {

  /* .acct-vhero qualifier raises specificity above the .acct-vhero-plain / .acct-vhero
     base card rules that sit later in the file. */
  .acct-vhero.acct-settings-contact {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  [data-acct-view="settings"] .acct-vnote {
    background: transparent;
    box-shadow: none;
    padding: 14px 2px 0;
  }
}

/* section head + lede used across the converted views */
.acct-vsec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 13px;
}

.acct-vsec-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--acct-ink);
}

.acct-vsec-title-green {
  color: var(--acct-green-text);
}

.acct-vsec-lede {
  font-size: 13px;
  color: var(--acct-ink-soft);
  line-height: 1.55;
  margin: -4px 2px 14px;
  max-width: 60ch;
}

/* lead "hero" band shared by the views (green for rewards, plain for the rest) */
.acct-vhero {
  position: relative;
  border-radius: clamp(18px, 1.5vw, 24px);
  padding: clamp(20px, 1.9vw, 28px);
}

.acct-vhero-green {
  background: linear-gradient(168deg, #EEF6E1 0%, #F4F9EA 50%, #FCFEF8 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.18), 0 1px 2px rgba(20, 24, 33, 0.04), 0 26px 52px -36px rgba(110, 154, 46, 0.4);
}

.acct-vhero-plain {
  background: linear-gradient(168deg, #F6F7F4 0%, #FAFBF8 52%, #FFFFFF 100%);
  box-shadow: inset 0 0 0 1px var(--acct-line), 0 1px 2px rgba(20, 24, 33, 0.03), 0 22px 46px -38px rgba(20, 24, 33, 0.36);
}

.acct-vhero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--acct-green-text);
}

.acct-vhero-eyebrow svg {
  flex: none;
}

.acct-vhero-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-size: clamp(19px, 1.9vw, 24px);
  color: var(--acct-ink);
  margin-top: 7px;
}

.acct-vhero-lede {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-green-text);
  margin-top: 6px;
}

.acct-vhero-note {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  line-height: 1.55;
  margin-top: 5px;
  max-width: 52ch;
}

/* the rail note (reuses the recoveries share-note look, generalized) */
.acct-vnote {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  color: var(--acct-ink-muted);
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-vnote-ic {
  flex: none;
  color: var(--acct-green-deep);
  margin-top: 1px;
}

/* ── Rewards view: hero picker + how-it-works steps ───────────────────────── */
.acct-reward-pickerlabel {
  margin-top: clamp(16px, 1.7vw, 22px);
  margin-bottom: 9px;
}

.acct-reward-optional {
  font-weight: 400;
  color: var(--acct-ink-muted);
}

.acct-reward-save {
  margin-top: 16px;
}

.acct-steplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.acct-step {
  display: flex;
  gap: 14px;
  padding: 14px 4px;
  align-items: flex-start;
}

.acct-step+.acct-step {
  border-top: 1px solid var(--acct-line);
}

.acct-step-no {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--acct-green-text);
  background: var(--acct-green-tint);
  font-variant-numeric: tabular-nums;
}

.acct-step-body {
  min-width: 0;
}

.acct-step-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-step-sub {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  line-height: 1.5;
  margin-top: 2px;
}

/* compact inline hint (e.g. the rewards gift-cards empty state — slim, not a
   tall centered empty block, so a short view doesn't have to scroll) */
.acct-vhint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-vhint-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--acct-ink-muted);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-vhint-body {
  min-width: 0;
}

.acct-vhint-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-vhint-s {
  font-size: 12px;
  color: var(--acct-ink-muted);
  margin-top: 1px;
  line-height: 1.45;
}

/* ── Membership view: the membership card + coverage ledger + upgrade band ──── */
/* the card — a tangible "object" (the whole brand is built on physical tags), a
   deep ink surface with brand-tinted corner glows so the green+blue read as foil */
.acct-memcard {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 1.6vw, 22px);
  padding: clamp(22px, 2.2vw, 30px);
  min-height: clamp(176px, 20vw, 214px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #F3F5F2;
  background:
    radial-gradient(135% 120% at 86% 6%, rgba(78, 168, 216, 0.26), transparent 52%),
    radial-gradient(130% 130% at 4% 98%, rgba(110, 154, 46, 0.22), transparent 56%),
    linear-gradient(150deg, #23272D 0%, #171A1F 58%, #0F1215 100%);
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.12), 0 30px 60px -34px rgba(16, 20, 26, 0.7);
}

.acct-memcard-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 32%);
}

.acct-memcard-top,
.acct-memcard-foot {
  position: relative;
  display: flex;
  gap: 16px;
}

.acct-memcard-top {
  align-items: flex-start;
  justify-content: space-between;
}

.acct-memcard-foot {
  align-items: flex-end;
  justify-content: space-between;
}

.acct-memcard-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.acct-memcard-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #4EA9D8, #6E9A2E);
  box-shadow: 0 4px 12px -4px rgba(78, 168, 216, 0.6);
}

.acct-memcard-brandname {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15.5px;
  color: #F3F5F2;
}

.acct-memcard-tier {
  text-align: right;
}

.acct-memcard-tier-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 245, 242, 0.5);
}

.acct-memcard-tier-name {
  display: block;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(17px, 1.8vw, 21px);
  margin-top: 3px;
  text-transform: uppercase;
}

.acct-memcard[data-tier="Bronze"] .acct-memcard-tier-name {
  color: #E6B877;
}

.acct-memcard[data-tier="Silver"] .acct-memcard-tier-name {
  color: #D3D9E2;
}

.acct-memcard-cap {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 245, 242, 0.5);
}

.acct-memcard-name {
  display: block;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(20px, 2.2vw, 26px);
  margin-top: 5px;
}

.acct-memcard-meta {
  display: flex;
  gap: 22px;
  margin-top: 14px;
}

.acct-memcard-meta-item small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 245, 242, 0.46);
  margin-bottom: 3px;
}

.acct-memcard-meta-item b {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: rgba(243, 245, 242, 0.9);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.acct-memcard-emblem {
  flex: none;
  color: rgba(243, 245, 242, 0.3);
}

.acct-memcard[data-tier="Bronze"] .acct-memcard-emblem {
  color: rgba(230, 184, 119, 0.5);
}

.acct-memcard[data-tier="Silver"] .acct-memcard-emblem {
  color: rgba(211, 217, 226, 0.55);
}

/* ── Membership BANNER — a per-tier artwork "ad" with the identity + headline
   stats overlaid on a bottom scrim. The art layer is a TEMP placeholder; swap it
   per [data-tier] with a real background-image (or an <img>) later. ───────────── */
.acct-membanner {
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 1.6vw, 22px);
  min-height: clamp(244px, 27vw, 300px);
  display: flex;
  color: #F4F6F2;
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.12), 0 30px 60px -34px rgba(16, 20, 26, 0.6);
  isolation: isolate;
}

/* per-tier artwork (assets/membership/<tier>.png — 16:9; the dark/light corner
   sits top-left where the badge + identity overlay, the waves fall bottom-right) */
.acct-membanner-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.acct-membanner[data-tier="Bronze"] .acct-membanner-art {
  background-image: url("../assets/membership/bronze.webp");
}

.acct-membanner[data-tier="Silver"] .acct-membanner-art {
  background-image: url("../assets/membership/silver.webp");
}

.acct-membanner[data-tier="Gold"] .acct-membanner-art {
  background-image: url("../assets/membership/gold.webp");
}

/* legibility scrim — a left→right wash so the text column reads while the waves on
   the right stay visible. Dark for the dark tiers (white text); light for Silver. */
.acct-membanner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(83deg, rgba(8, 10, 14, 0.84) 0%, rgba(8, 10, 14, 0.52) 30%, rgba(8, 10, 14, 0.1) 58%, transparent 80%);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-scrim {
  background: linear-gradient(83deg, rgba(247, 249, 251, 0.95) 0%, rgba(247, 249, 251, 0.64) 30%, rgba(247, 249, 251, 0.16) 58%, transparent 80%);
}

/* floating tier badge — the shield + tier recolour per tier so it pops */
.acct-membanner-badge {
  position: absolute;
  z-index: 3;
  top: clamp(16px, 1.6vw, 20px);
  left: clamp(16px, 1.6vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px -8px rgba(16, 20, 26, 0.55);
}

.acct-membanner-badge-ic {
  display: inline-flex;
}

.acct-membanner-badge-tier {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.acct-membanner-badge-cap {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
}

.acct-membanner[data-tier="Bronze"] .acct-membanner-badge-ic,
.acct-membanner[data-tier="Bronze"] .acct-membanner-badge-tier {
  color: #A86E2E;
}

.acct-membanner[data-tier="Silver"] .acct-membanner-badge-ic,
.acct-membanner[data-tier="Silver"] .acct-membanner-badge-tier {
  color: #5C6675;
}

.acct-membanner[data-tier="Gold"] .acct-membanner-badge-ic,
.acct-membanner[data-tier="Gold"] .acct-membanner-badge-tier {
  color: #9A7A1E;
}

/* identity + headline stats on the scrim */
.acct-membanner-body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  align-self: flex-end;
  width: 100%;
  padding: clamp(18px, 1.9vw, 24px);
}

.acct-membanner-name {
  display: block;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(22px, 2.4vw, 30px);
}

.acct-membanner-since {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: rgba(244, 246, 242, 0.72);
}

.acct-membanner-since b {
  font-weight: 600;
  color: rgba(244, 246, 242, 0.92);
}

.acct-membanner-flex {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  font-size: 13px;
  color: rgba(244, 246, 242, 0.82);
  flex-wrap: wrap;
}

.acct-membanner-flex-item b {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.01em;
}

.acct-membanner-flex-sep {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(244, 246, 242, 0.4);
}

/* Silver artwork is light → flip the overlay text to ink */
.acct-membanner[data-tier="Silver"] .acct-membanner-name {
  color: var(--acct-ink);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-since {
  color: rgba(28, 40, 46, 0.7);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-since b {
  color: rgba(28, 40, 46, 0.95);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-flex {
  color: rgba(28, 40, 46, 0.78);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-flex-item b {
  color: var(--acct-ink);
}

.acct-membanner[data-tier="Silver"] .acct-membanner-flex-sep {
  background: rgba(28, 40, 46, 0.38);
}

/* ── All membership tiers — three artwork-backed cards (current one highlighted) */
.acct-memcompare-btn {
  font-size: 13px;
  padding: 8px 15px;
}

.acct-memtiers-grid {
  display: grid;
  gap: clamp(12px, 1.2vw, 16px);
  grid-template-columns: 1fr;
}

@container vmain (min-width: 560px) {
  .acct-memtiers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.acct-memtier {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: clamp(188px, 17vw, 210px);
  display: flex;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-memtier-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.acct-memtier[data-tier="Bronze"] .acct-memtier-art {
  background-image: url("../assets/membership/bronze.webp");
}

.acct-memtier[data-tier="Silver"] .acct-memtier-art {
  background-image: url("../assets/membership/silver.webp");
}

.acct-memtier[data-tier="Gold"] .acct-memtier-art {
  background-image: url("../assets/membership/gold.webp");
}

.acct-memtier-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.acct-memtier[data-tier="Bronze"] .acct-memtier-veil,
.acct-memtier[data-tier="Gold"] .acct-memtier-veil {
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.34) 0%, rgba(8, 10, 14, 0.66) 100%);
}

.acct-memtier[data-tier="Silver"] .acct-memtier-veil {
  background: linear-gradient(180deg, rgba(250, 251, 253, 0.5) 0%, rgba(250, 251, 253, 0.84) 100%);
}

.acct-memtier-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(15px, 1.4vw, 18px);
  width: 100%;
  color: #F4F6F2;
}

.acct-memtier[data-tier="Silver"] .acct-memtier-body {
  color: var(--acct-ink);
}

.acct-memtier-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acct-memtier-badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.acct-memtier[data-tier="Silver"] .acct-memtier-badge {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  color: #5C6675;
}

.acct-memtier[data-tier="Bronze"] .acct-memtier-badge {
  color: #E6B877;
}

.acct-memtier[data-tier="Gold"] .acct-memtier-badge {
  color: #F0C95C;
}

.acct-memtier-id {
  min-width: 0;
  flex: 1;
}

.acct-memtier-name {
  display: block;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 17px;
  text-transform: uppercase;
}

.acct-memtier[data-tier="Bronze"] .acct-memtier-name {
  color: #E6B877;
}

.acct-memtier[data-tier="Gold"] .acct-memtier-name {
  color: #F0C95C;
}

.acct-memtier[data-tier="Silver"] .acct-memtier-name {
  color: #4A5462;
}

.acct-memtier-tag {
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
  opacity: 0.85;
}

.acct-memtier-now {
  flex: none;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.acct-memtier[data-tier="Silver"] .acct-memtier-now {
  background: var(--acct-green-deep);
  color: #fff;
}

.acct-memtier-perks {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.acct-memtier-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
}

.acct-memtier-perk svg {
  flex: none;
}

.acct-memtier[data-tier="Bronze"] .acct-memtier-perk svg,
.acct-memtier[data-tier="Gold"] .acct-memtier-perk svg {
  color: #fff;
}

.acct-memtier[data-tier="Silver"] .acct-memtier-perk svg {
  color: var(--acct-green-deep);
}

.acct-memtier.is-current {
  box-shadow: inset 0 0 0 2px var(--acct-green-deep), 0 14px 30px -16px rgba(16, 24, 26, 0.42);
}

/* ── Membership term (countdown + downgrade warning) ───────────────────────── */
/* Membership-page band — a metallic tier banner (matches the overview nudge + the
   upgrade buttons): brushed metal in the member's tier, engraved dark text, a white
   icon chip, and a dark Renew CTA. */
.acct-memterm {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.5vw, 18px) clamp(16px, 1.7vw, 20px);
  border-radius: 16px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-memterm[data-metal="silver"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 12px 28px -18px rgba(60, 72, 92, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(150deg, #FCFDFF 0%, #E6EBF2 26%, #C8D0DC 54%, #EEF2F7 76%, #D2D9E2 100%);
}

.acct-memterm[data-metal="gold"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 248, 220, 0.5), 0 12px 28px -18px rgba(140, 96, 8, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 42%), linear-gradient(150deg, #FFF7D6 0%, #F4D885 26%, #E2B441 54%, #FCEEAE 76%, #E7C257 100%);
}

.acct-memterm-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(16, 24, 26, 0.1);
}

.acct-memterm[data-metal="silver"] .acct-memterm-ic {
  color: #4A5462;
}

.acct-memterm[data-metal="gold"] .acct-memterm-ic {
  color: #7A5E12;
}

.acct-memterm-body {
  flex: 1;
  min-width: 0;
}

.acct-memterm-t {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 15px;
  color: #1B2026;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.acct-memterm-s {
  font-size: 12.5px;
  color: rgba(27, 32, 38, 0.78);
  margin-top: 3px;
  line-height: 1.5;
  max-width: 64ch;
}

.acct-memterm-btn {
  flex: none;
}

@media (max-width: 560px) {
  .acct-memterm {
    flex-wrap: wrap;
  }

  .acct-memterm-btn {
    width: 100%;
  }
}

/* Overview rail nudge — a polished metallic banner in the member's tier finish
   (same metal as the upgrade buttons), with dark engraved-style text. */
.acct-ov2-memterm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--acct-line), 0 12px 26px -18px rgba(16, 24, 26, 0.5);
}

.acct-ov2-memterm[data-metal="silver"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 14px 30px -16px rgba(60, 72, 92, 0.6);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(150deg, #FCFDFF 0%, #E6EBF2 24%, #C8D0DC 52%, #EEF2F7 74%, #D2D9E2 100%);
}

.acct-ov2-memterm[data-metal="gold"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 248, 220, 0.5), 0 14px 30px -16px rgba(140, 96, 8, 0.58);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(150deg, #FFF7D6 0%, #F4D885 24%, #E2B441 52%, #FCEEAE 74%, #E7C257 100%);
}

.acct-ov2-memterm-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acct-ov2-memterm-badge {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(16, 24, 26, 0.1);
}

.acct-ov2-memterm[data-metal="silver"] .acct-ov2-memterm-badge {
  color: #4A5462;
}

.acct-ov2-memterm[data-metal="gold"] .acct-ov2-memterm-badge {
  color: #7A5E12;
}

.acct-ov2-memterm-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.acct-ov2-memterm-tier {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #1B2026;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.acct-ov2-memterm-when {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(27, 32, 38, 0.66);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.acct-ov2-memterm-note {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(27, 32, 38, 0.78);
}

.acct-ov2-memterm-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 9px;
  background: #16181A;
  box-shadow: 0 6px 16px -6px rgba(16, 24, 26, 0.55);
  transition: background-color 0.18s ease, transform 0.16s ease;
}

.acct-ov2-memterm-cta:hover {
  background: #000;
  transform: translateY(-1px);
}

.acct-ov2-memterm-cta svg {
  flex: none;
}

/* ── "at a glance" stat ribbon — number-forward, hairline-divided, no icon chips */
.acct-memstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.acct-memstat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 16px;
  position: relative;
}

.acct-memstat:first-child {
  padding-left: 2px;
}

.acct-memstat+.acct-memstat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--acct-line);
}

.acct-memstat-num {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.acct-memstat-label {
  font-size: 12px;
  color: var(--acct-ink-soft);
  line-height: 1.3;
}

@container vmain (max-width: 520px) {
  .acct-memstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .acct-memstat:nth-child(odd) {
    padding-left: 2px;
  }

  .acct-memstat:nth-child(odd)::before {
    display: none;
  }
}

/* bottom reassurance strip — ReturnMe at a glance */
.acct-membrand {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 15px 16px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-membrand-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
}

.acct-membrand-ic {
  display: inline-flex;
  color: var(--acct-green-deep);
  flex: none;
}

/* coverage ledger — one honest list, included vs Silver-locked. Flat rail-card
   style: a small monochrome glyph (no boxed colour chip) + label + status pill. */
.acct-memcov-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.acct-memcov-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.acct-memcov {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.acct-memcov-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
}

.acct-memcov-row+.acct-memcov-row {
  border-top: 1px solid var(--acct-line);
}

.acct-memcov-ic {
  flex: none;
  display: inline-flex;
  color: var(--acct-ink-soft);
}

.acct-memcov-ic.is-off {
  color: var(--acct-ink-muted);
  opacity: 0.7;
}

.acct-memcov-body {
  flex: 1;
  min-width: 0;
}

.acct-memcov-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-memcov-row.is-locked .acct-memcov-label {
  color: var(--acct-ink-soft);
}

.acct-memcov-sub {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  margin-top: 1px;
}

.acct-memcov-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.acct-memcov-status svg {
  flex: none;
}

.acct-memcov-status.is-on {
  color: var(--acct-green-text);
  background: var(--acct-green-tint);
}

.acct-memcov-status.is-off {
  color: var(--acct-ink-soft);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* upgrade band (Bronze) + post-upgrade confirmation (Silver) */
.acct-memup {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: clamp(16px, 1.6vw, 20px) clamp(18px, 1.8vw, 22px);
  border-radius: 16px;
  background: linear-gradient(120deg, #F1F8E6 0%, #FBFDF7 72%);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.3);
}

.acct-memup-body {
  min-width: 0;
  flex: 1 1 280px;
}

.acct-memup-t {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--acct-ink);
}

.acct-memup-s {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  margin-top: 3px;
  line-height: 1.5;
  max-width: 50ch;
}

.acct-memup-btn {
  flex: none;
}

.acct-memdone {
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--acct-green-tint);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.25);
}

.acct-memdone-ic {
  flex: none;
  color: var(--acct-green-deep);
  margin-top: 1px;
}

.acct-memdone-t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--acct-ink);
}

.acct-memdone-t strong {
  color: var(--acct-green-text);
}

.acct-memdone-s {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  margin-top: 2px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .acct-memup-btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MEMBERSHIP (reworked) — a centered, rail-free page: hero · metallic band ·
   three full-size plan cards (artwork banner + paper info deck + comparison +
   metallic CTA). Replaces the old banner/coverage/at-a-glance/tier-card set.
   ════════════════════════════════════════════════════════════════════════ */
.acct-mempage {
  max-width: clamp(720px, 82vw, 1180px);
  margin: 0 auto;
  padding: clamp(6px, 0.8vw, 16px) 0 clamp(26px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 44px);
}

/* ── HERO — centered current-tier identity ─────────────────────────────── */
.acct-memhero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.acct-memhero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
}

.acct-memhero-title {
  margin: clamp(9px, 1vw, 13px) 0 0;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(27px, 3.3vw, 44px);
  color: var(--acct-ink);
  text-wrap: balance;
}

.acct-memhero[data-tier="Bronze"] .acct-memhero-tier {
  color: #B07A36;
}

.acct-memhero[data-tier="Silver"] .acct-memhero-tier {
  color: #6B7787;
}

.acct-memhero[data-tier="Gold"] .acct-memhero-tier {
  color: #B7902C;
}

.acct-memhero-shield {
  width: clamp(106px, 10.2vw, 154px);
  margin: clamp(14px, 1.7vw, 24px) 0 clamp(11px, 1.1vw, 16px);
}

.acct-memhero-sub {
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--acct-ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}

.acct-memhero-sub b {
  font-weight: 700;
  color: var(--acct-ink);
}

.acct-memhero-dot {
  color: var(--acct-line-2);
  margin: 0 3px;
}

.acct-memhero-see {
  margin-top: clamp(13px, 1.3vw, 18px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.acct-memhero-see:hover {
  background: rgba(16, 24, 26, 0.04);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.22);
}

.acct-memhero-see svg {
  transition: transform 0.2s ease;
}

.acct-memhero-see:hover svg {
  transform: translateY(2px);
}

/* ── RENEW / UPGRADE band — metallic, in the next tier's finish ─────────── */
.acct-memband {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  justify-content: space-between;
  padding: clamp(17px, 1.9vw, 25px) clamp(20px, 2.1vw, 30px);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line), 0 14px 34px -22px rgba(16, 24, 26, 0.5);
}

.acct-memband[data-metal="silver"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 16px 36px -20px rgba(60, 72, 92, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(150deg, #FCFDFF 0%, #E9EDF3 26%, #D2D9E3 54%, #F0F3F8 76%, #DBE1EA 100%);
}

.acct-memband[data-metal="gold"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 248, 220, 0.5), 0 16px 36px -20px rgba(140, 96, 8, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(150deg, #FFF8DC 0%, #F6E0A0 26%, #E7C868 54%, #FCEFB4 76%, #ECD27E 100%);
}

.acct-memband[data-done="true"] {
  background: var(--acct-green-tint);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.28);
}

.acct-memband-body {
  min-width: 0;
  flex: 1 1 360px;
}

.acct-memband-body-done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.acct-memband-doneic {
  flex: none;
  color: var(--acct-green-deep);
  margin-top: 1px;
}

.acct-memband-t {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(16px, 1.6vw, 19px);
  color: #1B2026;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.acct-memband[data-done="true"] .acct-memband-t {
  color: var(--acct-ink);
  text-shadow: none;
}

.acct-memband-s {
  margin-top: 4px;
  font-size: clamp(12.5px, 1.05vw, 14px);
  line-height: 1.5;
  color: rgba(27, 32, 38, 0.8);
  max-width: 66ch;
}

.acct-memband[data-done="true"] .acct-memband-s {
  color: var(--acct-ink-soft);
}

.acct-memband-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  flex-wrap: wrap;
}

.acct-memband-btn {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 12px;
}

.acct-memband-renew {
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}

.acct-memband-renew:hover {
  background: rgba(255, 255, 255, 0.82);
}

@media (max-width: 620px) {
  .acct-memband-actions {
    width: 100%;
  }

  .acct-memband-btn,
  .acct-memband-renew {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── FULL-SIZE plan cards ──────────────────────────────────────────────── */
.acct-memplans-head {
  text-align: center;
  max-width: 58ch;
  margin: 0 auto;
}

.acct-memplans-title {
  margin: 0;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--acct-ink);
}

.acct-memplans-lede {
  margin: 10px auto 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--acct-ink-soft);
}

/* The plan grid is now a single block holding the compare layout (header cards
   above a shared feature matrix); the columns are owned by .acct-memcards /
   .acct-memtable, not this wrapper. */
.acct-memplans-grid {
  margin-top: clamp(20px, 2.2vw, 30px);
  display: block;
}

/* ── duration selector (1/2/3/5/10 yrs) above the compare cards ─────────────── */
.acct-memdur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}

.acct-memdur-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
}

.acct-memdur-seg {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  overflow: hidden;
}

/* the sliding white pill that animates to the selected year (positioned by JS) */
.acct-memdur-ind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.12), inset 0 0 0 1px var(--acct-line-2);
  transition: transform .3s cubic-bezier(0.34, 1.2, 0.4, 1), width .3s cubic-bezier(0.34, 1.2, 0.4, 1), height .3s cubic-bezier(0.34, 1.2, 0.4, 1);
  will-change: transform, width;
  pointer-events: none;
}

.acct-memdur-ind.is-init {
  transition: none;
}

/* first paint / resize jumps without animating */
.acct-memdur-opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--acct-ink-soft);
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  transition: color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-memdur-opt:hover {
  color: var(--acct-ink);
}

.acct-memdur-opt.is-active {
  color: var(--acct-ink);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.12), inset 0 0 0 1px var(--acct-line-2);
}

@media (prefers-reduced-motion: reduce) {
  .acct-memdur-ind {
    transition: none;
  }
}

.acct-memdur-y {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.acct-memdur-u {
  font-size: 11px;
  font-weight: 600;
  color: var(--acct-ink-muted);
}

.acct-memdur-save {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  align-self: center;
}

.acct-memdur-opt.is-active .acct-memdur-save {
  color: var(--acct-ink);
}

/* phones: keep all five durations on ONE row by scaling the segment down (no wrap) */
@media (max-width: 600px) {
  .acct-memdur {
    width: 100%;
  }

  .acct-memdur-seg {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 3px;
    padding: 4px;
  }

  .acct-memdur-opt {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 8px 4px;
    gap: 2px;
  }

  .acct-memdur-y {
    font-size: 13px;
  }

  .acct-memdur-u {
    font-size: 9.5px;
  }

  .acct-memdur-save {
    font-size: 8px;
    letter-spacing: -0.02em;
  }
}

/* ── ONE aligned grid: cards as column HEADERS (row 1) + the feature rows below,
   centred, so the cards line up exactly with the comparison columns ──────────── */
.acct-memcompare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
}

.acct-memgrid {
  display: grid;
  /* label column · 3 tier columns · a matching RIGHT spacer — the spacer mirrors the
     label column so the grid is symmetric and centring it centres the Silver tier. */
  /* label column + 3 tier columns. Columns are fractional so the grid always fits
     its container (never overflows / clips); long values WRAP inside their cell. */
  grid-template-columns: minmax(210px, 0.72fr) repeat(var(--mem-cols, 3), minmax(120px, 1fr));
  column-gap: clamp(8px, 1vw, 14px);
  max-width: 1120px;
  min-width: 0;
  margin: 0 auto;
  align-items: stretch;
}

.acct-memspacer {
  background: transparent;
}

.acct-memgrid-corner {
  grid-row: 1;
}

/* the tier cards — per-tier artwork background (assets/membership/<tier>.png) with
   a readability scrim; bronze/gold art is dark → white text, silver art is light
   → dark text. They sit on row 1 and form the table's column headers. */
.acct-memcard {
  grid-row: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* the card is the TOP of its tier column — rounded top, square bottom, no gap, so
     the coloured value cells below read as one continuous column. */
  display: flex;
  border-radius: 18px 18px 0 0;
  margin-bottom: 0;
  /* override the OLD membership-card rule above (it forces a 214px min-height +
     padding onto this shared class) so these read as short banners, not tall cards. */
  min-height: 0;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.1);
}

/* The artwork is light on all three tiers, so each card reads as a light banner
   with dark ink text — no darkening filter. */
.acct-memcard[data-tier="Bronze"] {
  background-color: #F7EFE3;
  background-image: url("../assets/membership/bronze.webp");
  color: var(--acct-ink);
}

.acct-memcard[data-tier="Silver"] {
  background-color: #EDF0F4;
  background-image: url("../assets/membership/silver.webp");
  color: var(--acct-ink);
}

.acct-memcard[data-tier="Gold"] {
  background-color: #F8F1DC;
  background-image: url("../assets/membership/gold.webp");
  color: var(--acct-ink);
}

/* a soft white wash on the text side only (no darkening) — keeps the tier + price
   legible where the waves get busier, without dimming the artwork. */
.acct-memcard-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.34) 72%, rgba(255, 255, 255, 0.06) 100%);
}

/* the highlighted (current) plan: a green outline that wraps the WHOLE column —
   top + sides on the banner here, sides + bottom on the cells below (see .is-cur). */
.acct-memcard.is-current {
  box-shadow: inset 0 2px 0 0 var(--acct-green-deep), inset 2px 0 0 0 var(--acct-green-deep), inset -2px 0 0 0 var(--acct-green-deep);
}

/* the centre (Silver / most-popular) card floats with a soft drop shadow */
.acct-memcard[data-tier="Silver"] {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.1), 0 20px 42px -22px rgba(16, 24, 26, 0.55);
}

.acct-memcard[data-tier="Silver"].is-current {
  box-shadow: inset 0 2px 0 0 var(--acct-green-deep), inset 2px 0 0 0 var(--acct-green-deep), inset -2px 0 0 0 var(--acct-green-deep), 0 20px 42px -22px rgba(16, 24, 26, 0.55);
}

.acct-memcard-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 178px;
  padding: clamp(15px, 1.45vw, 19px) clamp(18px, 1.8vw, 22px) clamp(17px, 1.7vw, 21px);
}

.acct-memcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
  margin-bottom: 8px;
}

.acct-memcard-tier {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}

.acct-memcard[data-tier="Bronze"] .acct-memcard-tier {
  color: #9A6B2E;
}

.acct-memcard[data-tier="Silver"] .acct-memcard-tier {
  color: #49525F;
}

.acct-memcard[data-tier="Gold"] .acct-memcard-tier {
  color: #9A7A1E;
}

.acct-memcard-badges {
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* quiet "Current plan" marker — plain text, no pill, inherits the card's text colour */
.acct-memcard-now {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  opacity: 0.82;
}

.acct-memcard-now svg {
  color: inherit;
}

/* price — MONTHLY big, term total small; colours inherit the card's text colour */
.acct-memcard-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.acct-memcard-amt {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(31px, 3.3vw, 42px);
  color: inherit;
}

.acct-memcard-per {
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
}

.acct-memcard-sub {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: inherit;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* the Upgrade CTA / Bronze "Included" marker, pinned to the bottom so they line up */
.acct-memcard-cta {
  margin-top: auto;
  width: 100%;
  min-height: 46px;
  padding: 11px 15px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 12px;
  white-space: nowrap;
  text-align: center;
}

/* locked = the plan you already have: keep the tier's metal finish, just dim it and
   make it non-interactive (the lock glyph signals it). NOT flattened to grey. */
.acct-memcard-cta.is-locked {
  opacity: 0.72;
  filter: saturate(0.9);
  cursor: default;
  pointer-events: none;
}

/* Bronze "Included" — a calm centred marker (no button), inherits the card's text colour */
.acct-memcard-incl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: inherit;
  opacity: 0.9;
}

.acct-memcard-incl svg {
  flex: none;
}

/* ── feature rows — roomier, larger type so the comparison is easy to scan ────── */
.acct-memrow-label,
.acct-memcell {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 14px 12px;
  border-top: 1px solid var(--acct-line);
}

.acct-memrow-label.is-first,
.acct-memcell.is-first {
  border-top: 0;
}

.acct-memrow-label {
  gap: 11px;
}

.acct-memrow-ic {
  display: inline-flex;
  flex: none;
  color: var(--acct-ink-muted);
}

.acct-memrow-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--acct-ink);
  line-height: 1.3;
  white-space: nowrap;
}

/* the "?" helper — black + visible; a real button (click shows the tip too) */
.acct-memrow-info {
  display: inline-flex;
  flex: none;
  color: var(--acct-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.acct-memrow-info:hover {
  color: var(--acct-ink-soft);
}

.acct-memrow-info:focus-visible {
  outline: 2px solid var(--acct-ink);
  outline-offset: 2px;
  border-radius: 999px;
}

/* click-to-show tip popover (fixed so the table overflow never clips it) */
.acct-memrow-pop {
  position: fixed;
  z-index: 1200;
  max-width: 252px;
  background: var(--acct-ink);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(16, 24, 26, 0.62);
  pointer-events: none;
}

.acct-memcell {
  justify-content: center;
  text-align: center;
}

.acct-memcell-yes {
  display: inline-flex;
  color: var(--acct-green-deep);
}

.acct-memcell-no {
  color: var(--acct-line-2);
  font-weight: 700;
  font-size: 17px;
}

.acct-memcell-val {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--acct-ink-soft);
}

.acct-memcell-val.nums {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: var(--acct-ink);
}

.acct-memcell.is-off .acct-memcell-no {
  opacity: 0.9;
}

/* ── per-tier COLUMN backgrounds — each value column wears its card's tone: bronze
   + gold are near-black (white text), silver is light. Reads as 3 coloured columns. */
.acct-memcell[data-tier="Bronze"] {
  background: #FBF4EA;
}

.acct-memcell[data-tier="Gold"] {
  background: #FCF6E5;
}

.acct-memcell[data-tier="Silver"] {
  background: #EDF1F5;
}

/* the highlighted (current) column: green sides on every cell, + a green bottom on
   the last one, so together with .acct-memcard.is-current the whole card is ringed. */
.acct-memcell.is-cur {
  box-shadow: inset 2px 0 0 0 var(--acct-green-deep), inset -2px 0 0 0 var(--acct-green-deep);
}

.acct-memcell.is-cur.is-last {
  box-shadow: inset 2px 0 0 0 var(--acct-green-deep), inset -2px 0 0 0 var(--acct-green-deep), inset 0 -2px 0 0 var(--acct-green-deep);
}

/* round the bottom of each coloured column (the card rounds the top) */
.acct-memcell.is-last {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}

.acct-memrow-label.is-last {
  border-bottom: 0;
}

/* sticky label column for the horizontal-scroll (mobile) case — blends with the
   panel (no white strip); the corner is fully transparent. */
.acct-memrow-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #F4F5F7;
}

.acct-memgrid-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: transparent;
}

/* ── Mobile comparison (<=860): the unscrollable 5-column grid is swapped for a
   tier SELECTOR + the selected tier's plan card + a vertical feature list (the
   Mobbin pattern). memMobileCompare renders it; it reuses the per-tier artwork
   card and the [data-mem-info] "?" popover. */
.acct-memmob {
  display: none;
}

@media (max-width: 860px) {
  .acct-memcompare {
    display: none;
  }

  .acct-memmob {
    display: block;
  }

  /* phone membership order: hero → selector + tier card → renew/upgrade band.
     The "ReturnMe Membership Plans" heading is dropped on mobile. */
  .acct-memhero {
    order: 1;
  }

  .acct-memplans {
    order: 2;
  }

  .acct-memband {
    order: 3;
  }

  .acct-memplans-head {
    display: none;
  }
}

.acct-memmob-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-memmob-tab {
  padding: 11px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-memmob-tab:hover {
  color: var(--acct-ink);
}

.acct-memmob-tab.is-active {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(16, 24, 26, 0.5);
}

.acct-memmob-panel {
  margin-top: 16px;
}

.acct-memmob-panel[hidden] {
  display: none;
}

/* ONE cohesive card per tier: the artwork banner header + a white feature body
   below (like the desktop full cards), so the comparison reads as a single card. */
.acct-memmob-cardwrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.1), 0 16px 34px -22px rgba(16, 24, 26, 0.55);
}

.acct-memmob-card {
  border-radius: 16px 16px 0 0;
  box-shadow: none;
}

/* on mobile the card's elevation comes from the wrap, so the inner card carries
   no shadow — drop the Silver "float" drop shadow (+ current ring) here. */
.acct-memmob-card[data-tier="Silver"],
.acct-memmob-card[data-tier="Silver"].is-current {
  box-shadow: none;
}

.acct-memmob-card .acct-memcard-inner {
  padding: clamp(16px, 4.5vw, 20px);
}

.acct-memmob-card .acct-memcard-amt {
  font-size: clamp(32px, 9vw, 40px);
}

.acct-memmob-card .acct-memcard-cta {
  margin-top: 16px;
}

/* feature body — a clean white deck INSIDE the card; each feature stacks its name
   over its value so nothing ragged-right-wraps on a narrow screen. */
.acct-memmob-feats {
  margin-top: 0;
  background: #fff;
  padding: 2px clamp(16px, 4.5vw, 20px) 6px;
}

.acct-memmob-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--acct-line);
}

.acct-memmob-row:last-child {
  border-bottom: 0;
}

.acct-memmob-rowlabel {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.acct-memmob-ic {
  display: inline-flex;
  flex: none;
  color: var(--acct-ink-muted);
}

.acct-memmob-rowname {
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  line-height: 1.3;
}

.acct-memmob-rowval {
  max-width: 100%;
  text-align: left;
  padding-left: 27px;
}

.acct-memmob-rowval .acct-memcell-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--acct-ink);
  line-height: 1.35;
  white-space: normal;
}

.acct-memmob-rowval .acct-memcell-yes {
  display: inline-flex;
  color: var(--acct-green-deep);
}

.acct-memmob-rowval .acct-memcell-no {
  color: var(--acct-line-2);
  font-weight: 700;
  font-size: 17px;
}

/* ── Settings view: contact band + improve grid + account actions ─────────── */
.acct-settings-contact-head {
  margin-bottom: 13px;
}

.acct-settings-contact-pct {
  font-size: 12px;
  color: var(--acct-ink-muted);
  font-weight: 500;
  white-space: nowrap;
}

.acct-settings-contact-pct b {
  color: var(--acct-blue-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.acct-settings-progress {
  margin-bottom: 20px;
}

.acct-improve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

@container vmain (min-width: 540px) {
  .acct-improve-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.acct-settings-actionlist {
  display: flex;
  flex-direction: column;
}

/* score shown to the right of the "Protection score" rail title (no stat group) */
.acct-railscore {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.acct-railscore b {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--acct-green-text);
}

/* relocated "Ways to improve" rail block — simple green title + smaller subtext */
.acct-improve-railhead {
  margin-bottom: 12px;
}

.acct-improve-railhead .acct-vsec-title {
  display: block;
}

.acct-improve-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
  line-height: 1.45;
}

.acct-settings-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 12px 4px;
  text-decoration: none;
  transition: transform 0.16s ease;
}

.acct-settings-action+.acct-settings-action {
  border-top: 1px solid var(--acct-line);
}

.acct-settings-action-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--acct-ink-soft);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.acct-settings-action-label {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-settings-action-chev {
  flex: none;
  color: var(--acct-ink-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.acct-settings-action:hover .acct-settings-action-ic {
  color: var(--acct-ink);
  background: #fff;
}

.acct-settings-action:hover .acct-settings-action-chev {
  transform: translateX(2px);
  color: var(--acct-ink);
}

.acct-settings-action-danger .acct-settings-action-label {
  color: #B4452F;
}

.acct-settings-action-danger .acct-settings-action-ic {
  color: #B4452F;
  background: rgba(180, 69, 47, 0.08);
  box-shadow: inset 0 0 0 1px rgba(180, 69, 47, 0.18);
}

.acct-settings-action-danger:hover .acct-settings-action-ic {
  background: rgba(180, 69, 47, 0.14);
  color: #B4452F;
}

.acct-settings-action-danger:hover .acct-settings-action-chev {
  color: #B4452F;
}

/* the "Report a found item" rail row reads finder-blue (consistency: found = blue) */
.acct-settings-action-ic-blue {
  color: var(--acct-blue-deep) !important;
  background: var(--acct-blue-tint) !important;
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.2) !important;
}

.acct-settings-action:hover .acct-settings-action-ic-blue {
  color: var(--acct-blue-deep) !important;
  background: #DCECF7 !important;
}

@media (prefers-reduced-motion: reduce) {
  .acct-settings-action:hover .acct-settings-action-chev {
    transform: none;
  }
}

/* ── My Account: compact 2-col main (contact | email+password) so it fits the
   panel without scrolling ──────────────────────────────────────────────────── */
.acct-myacct-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
}

.acct-myacct-cola,
.acct-myacct-colb {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
  min-width: 0;
}

/* the cards grow to share the column height so the panel fills evenly (no bare
   bottom third); each card distributes its header → fields → action button. */
.acct-myacct-grid .acct-vhero {
  padding: clamp(20px, 1.9vw, 28px);
  display: flex;
  flex-direction: column;
}

.acct-myacct-cola>.acct-vhero {
  flex: 1;
}

.acct-myacct-colb>.acct-vhero {
  flex: 1;
}

.acct-myacct-grid form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.acct-myacct-grid .acct-settings-progress {
  margin-bottom: 16px;
}

.acct-myacct-grid .acct-field-grid {
  gap: 14px 16px;
}

.acct-myacct-grid .acct-settings-actions {
  margin-top: auto;
  padding-top: 16px;
}

.acct-myacct-grid .acct-prefs {
  flex: 1;
}

@container vmain (max-width: 640px) {
  .acct-myacct-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .acct-myacct-cola>.acct-vhero,
  .acct-myacct-colb>.acct-vhero {
    flex: none;
  }
}

/* ── My Account: textarea · email preferences · password · delete modal ─────── */
.acct-textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.5;
  padding-top: 11px;
}

/* email-preference rows (checkbox + label + sub) */
.acct-prefs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acct-pref {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.acct-pref-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.acct-pref-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--acct-ink);
}

.acct-pref-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-muted);
}

/* shared custom checkbox — brand blue when checked (matches the reference) */
.acct-checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2);
  cursor: pointer;
  position: relative;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.acct-checkbox:hover {
  box-shadow: inset 0 0 0 1.5px rgba(16, 24, 26, 0.32);
}

.acct-checkbox:checked {
  background: var(--acct-blue);
  box-shadow: inset 0 0 0 1.5px var(--acct-blue);
}

.acct-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.acct-checkbox:focus-visible {
  outline: 2px solid var(--acct-blue);
  outline-offset: 2px;
}

/* email-preference toggle rows in the rail — a normal checkbox in the icon slot,
   with a name + sub. */
.acct-settings-pref {
  cursor: pointer;
}

.acct-settings-pref .acct-settings-action-label {
  font-weight: 600;
}

.acct-settings-pref .acct-checkbox {
  flex: none;
  margin: 1px 8px 0;
}

/* centre it in the icon slot */
.acct-settings-pref-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--acct-ink-muted);
}

/* a short explainer under the "Email preferences" rail heading */
.acct-settings-railnote {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

/* small icon sitting inside a rail section title (e.g. the mail glyph on Email preferences) */
.acct-railtitle-ic {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 7px;
  color: var(--acct-ink-muted);
}

/* activate-flow consent row (checkbox + agree text with blue links) */
.flow-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  cursor: pointer;
}

.flow-consent-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.flow-consent-text a {
  color: var(--acct-blue-text);
  font-weight: 700;
  text-decoration: none;
}

.flow-consent-text a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* password-change validation message */
.acct-pw-msg {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 600;
}

.acct-pw-msg.is-ok {
  color: var(--acct-green-text);
}

.acct-pw-msg.is-bad {
  color: #B4452F;
}

/* delete-account confirmation modal */
body.acct-delmodal-open {
  overflow: hidden;
}

.acct-delmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 28px);
}

.acct-delmodal[hidden] {
  display: none;
}

.acct-delmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 26, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.acct-delmodal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 30px 80px -24px rgba(16, 24, 26, 0.5);
}

.acct-delmodal-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: clamp(17px, 2vw, 21px);
  text-align: center;
  color: var(--acct-ink);
}

.acct-delmodal-dear {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: 14.5px;
  color: var(--acct-ink);
}

.acct-delmodal-p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--acct-ink-soft);
}

.acct-delmodal-ack {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--acct-ink);
  cursor: pointer;
}

.acct-delmodal-warn {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--acct-ink-soft);
}

.acct-delmodal-warn strong {
  color: #B4452F;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.acct-delmodal-delete {
  margin-top: 18px;
  background: #F26C6C;
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.14), 0 12px 26px -16px rgba(210, 60, 60, 0.7);
}

.acct-delmodal-delete:hover:not(:disabled) {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.acct-delmodal-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* both modal buttons wrap (the "changed my mind" label is long) */
.acct-delmodal-delete,
.acct-delmodal-keep {
  white-space: normal;
  height: auto;
  min-height: 50px;
  padding: 12px 16px;
  line-height: 1.3;
}

.acct-delmodal-keep {
  margin-top: 10px;
}

/* change-password popup — reuses the .acct-delmodal overlay; narrower card with a
   left-aligned heading and a right-aligned Cancel / Update footer. */
.acct-pwmodal-card {
  max-width: 460px;
}

.acct-pwmodal-card .acct-delmodal-title {
  text-align: left;
}

.acct-pwmodal-form {
  margin-top: clamp(16px, 2vw, 22px);
}

.acct-pwmodal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.acct-pwmodal-actions .acct-btn-lg {
  flex: 0 0 auto;
}

/* My account page styles moved out of the PHP view so the page layout and modal
   presentation stay in the shared account stylesheet. These rules intentionally
   sit after the base settings styles to preserve the current my-account look. */
.acct-ov2-static {
  padding: clamp(18px, 2vw, 32px);
  display: flex;
  flex-direction: column;
}

.acct-vsec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.acct-vsec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--acct-ink);
  letter-spacing: -0.1px;
}

.acct-vhero-plain {
  background: var(--acct-surface);
  border-radius: 14px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--acct-line-2);
}

.acct-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 16px;
}

.acct-field-wide {
  grid-column: 1 / -1;
}

.flow-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  margin-bottom: 6px;
}

.flow-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--acct-line-2);
  border-radius: 7px;
  font-size: 14px;
  color: var(--acct-ink);
  background: var(--acct-surface);
  font-family: inherit;
  box-sizing: border-box;
}

.flow-input:focus {
  outline: none;
  border-color: var(--acct-ink);
  box-shadow: 0 0 0 3px rgba(22, 24, 26, 0.08);
}

.acct-textarea {
  resize: vertical;
}

.acct-reqlabel {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.acct-reqhint {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
}

.acct-reqhint--req {
  background: rgba(185, 40, 28, .10);
  color: #b9281c;
}

.acct-reqhint--rec {
  background: rgba(78, 168, 218, .12);
  color: #2277aa;
}

.acct-reqhint--opt {
  background: transparent;
  color: var(--acct-ink-muted);
  border: 1px solid var(--acct-line-2);
}

.acct-settings-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--acct-line-2);
}

.acct-saved-note {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #2d8a4e;
  font-weight: 500;
}

.acct-ov2-railsec {
  background: var(--acct-surface);
  border: 1px solid var(--acct-line-2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.acct-ov2-railsec-head {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--acct-line-2);
}

.acct-ov2-railtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--acct-ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.acct-railtitle-ic {
  display: inline-block;
  vertical-align: middle;
}

.acct-settings-actionlist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-settings-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--acct-ink);
  font-family: inherit;
  transition: background 0.15s;
}

.acct-settings-action:hover {
  background: var(--acct-bg);
}

.acct-settings-action-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.acct-settings-action-ic,
.acct-settings-action-chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--acct-ink-soft);
}

.acct-settings-action-ic {
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(22, 24, 26, 0.06);
}

.acct-settings-action-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}

.acct-settings-action-chev svg {
  display: block;
  width: 14px;
  height: 14px;
}

.acct-settings-action-danger {
  color: #cc4125;
}

.acct-settings-action-danger .acct-settings-action-ic,
.acct-settings-action-danger .acct-settings-action-chev {
  color: #cc4125;
}

.acct-settings-action-danger .acct-settings-action-ic {
  background: rgba(204, 65, 37, 0.08);
}

.acct-settings-action-danger:hover {
  background: rgba(204, 65, 37, 0.06);
}

.acct-settings-pref {
  cursor: pointer;
}

.acct-settings-pref-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--acct-ink-soft);
}

.acct-settings-railnote {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}

.acct-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--acct-ink);
}

.acct-vnote {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--acct-surface);
  border: 1px solid var(--acct-line-2);
  border-radius: 10px;
  margin: 0;
}

.acct-vnote-ic {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--acct-ink-muted);
}

.acct-delmodal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.acct-delmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 24, 26, 0.55);
  backdrop-filter: blur(2px);
}

.acct-delmodal-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

.acct-delmodal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--acct-ink);
  margin: 0 0 16px;
}

.acct-delmodal-dear {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-ink);
  margin: 0 0 10px;
}

.acct-delmodal-p {
  font-size: 14px;
  color: var(--acct-ink-soft);
  line-height: 1.6;
  margin: 0 0 18px;
}

.acct-delmodal-ack {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--acct-line-2);
  font-size: 14px;
  color: var(--acct-ink);
  cursor: pointer;
  line-height: 1.5;
}

.acct-delmodal-warn {
  font-size: 13px;
  color: var(--acct-ink-soft);
  margin: 14px 0 18px;
  padding: 10px 12px;
  background: rgba(204, 65, 37, .07);
  border-radius: 8px;
}

.acct-delmodal-delete {
  background: #cc4125;
  color: white;
  border: none;
  margin-bottom: 10px;
}

.acct-delmodal-delete:not(:disabled):hover {
  background: #b83820;
}

.acct-delmodal-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.acct-delmodal-keep {
  background: var(--acct-ink);
  color: white;
  border: none;
}

.acct-pwmodal-card {
  max-width: 440px;
}

.acct-pwmodal-form .acct-field-grid {
  grid-template-columns: 1fr;
}

.acct-pwmodal-actions {
  border-top: 1px solid var(--acct-line-2);
  margin-top: 20px;
  padding-top: 16px;
  justify-content: flex-end;
}

.acct-pw-msg {
  font-size: 13px;
  color: #cc4125;
  margin: 10px 0 0;
  padding: 8px 12px;
  background: rgba(204, 65, 37, .07);
  border-radius: 7px;
}

.acct-btn-ink {
  background: var(--acct-ink);
  color: #fff;
  border: none;
}

.acct-btn-ink:hover {
  background: #2c2f33;
  color: #fff;
}

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

.acct-btn-ghost:hover {
  border-color: var(--acct-ink);
}

.acct-btn-lg {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.acct-btn-block {
  width: 100%;
  justify-content: center;
}

.acct-epform {
  margin: 0;
}

.acct-epform .form-group {
  margin: 0;
}

@media (max-width: 880px) {
  .acct-field-grid {
    grid-template-columns: 1fr;
  }

  .acct-field-wide {
    grid-column: 1;
  }
}

/* a small "Optional" hint that sits inline after a field label */
.acct-fieldopt {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acct-ink-muted);
}

/* the owner-set finder-reward helper line under the input */
.acct-detail-rewardhint {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acct-ink-muted);
}

/* ── Form field validation errors ── */
/* Yii2 adds errorCssClass="acct-field-error" to the wrapper div */
.acct-field-error .flow-input,
.acct-field-error .flow-input:focus,
.acct-field-error select.flow-input,
.acct-field-error textarea.acct-textarea {
  border-color: #d9534f;
  box-shadow: 0 0 0 2.5px rgba(217, 83, 79, 0.18);
}

.acct-field-error .help-block {
  display: block;
  margin: 5px 0 0;
  font-size: 12.5px;
  color: #c0392b;
  font-weight: 500;
}

/* Yii2 errorCssClass="has-danger" (edit-tag form) */
.has-danger .help-block {
  display: block;
  margin: 5px 0 0;
  font-size: 12.5px;
  color: #c0392b;
  font-weight: 500;
}

.has-danger .flow-input,
.has-danger .flow-input:focus,
.has-danger select.flow-input,
.has-danger textarea.flow-input {
  border-color: #d9534f;
  box-shadow: 0 0 0 2.5px rgba(217, 83, 79, 0.18);
}

/* hide empty help-block spans before any error */
.help-block:empty {
  display: none;
}

/* report-lost modal (reuses .acct-delmodal layout, calmer heading) */
.acct-lostmodal-title {
  text-transform: none;
  letter-spacing: -0.01em;
  text-align: left;
  font-size: clamp(18px, 2.2vw, 22px);
}

.acct-lostmodal-card .acct-delmodal-p {
  margin-top: 10px;
}

.acct-lostmodal-fields {
  margin-top: 16px;
}

.acct-lostmodal-confirm {
  margin-top: 18px;
}

.acct-lostmodal-card .acct-btn-block {
  min-height: 48px;
}

/* Phones + small tablets: the confirmation dialogs (Delete account, Change
   password, Report lost, Delete tag) go full-screen too — same edge-to-edge,
   square-corner treatment as the flow modals, so nothing floats with visible
   edges on mobile. Per-flow caps (pw 460, lost) overridden alongside the base. */
@media (max-width: 860px) {
  .acct-delmodal {
    padding: 0;
    align-items: stretch;
  }

  .acct-delmodal-card,
  .acct-pwmodal-card,
  .acct-lostmodal-card {
    max-width: none;
    width: 100%;
    min-height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* subtle "Delete this tag" action at the bottom of the tag detail */
.acct-tagdelete-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.acct-tagdelete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #B4452F;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color .15s ease;
}

.acct-tagdelete:hover {
  background: rgba(180, 69, 47, 0.08);
}

.acct-tagdelete svg {
  flex: none;
}

/* ── the panel ─────────────────────────────────────────────────────────────*/
.acct-ov2 {
  --ov-rail: clamp(312px, 25vw, 384px);
  --ov-gap: clamp(22px, 2.3vw, 40px);
  /* the visible surface (bg + radius + shadow) now lives on .acct-panel — the nav
     sits above this body inside the same panel. .acct-ov2 keeps only its padding
     so the overview content and the overlay views stay inset 1:1. */
  padding: clamp(18px, 2vw, 32px);
}

.acct-ov2-grid {
  display: grid;
  grid-template-columns: var(--ov-rail) minmax(0, 1fr);
  /* RAIL on the left */
  column-gap: var(--ov-gap);
  row-gap: clamp(18px, 2vw, 28px);
  position: relative;
}

/* one continuous full-height divider, centred in the column gap (now on the LEFT) */
.acct-ov2-grid::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ov-rail) + (var(--ov-gap) / 2) - 0.5px);
  width: 1px;
  background: var(--acct-line);
  pointer-events: none;
}

/* Two columns, ONE row: the RAIL on the LEFT, the MAIN content on the right,
   split by the full-height divider. */
.acct-ov2-rail {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.5vw, 20px);
}

.acct-ov2-main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.7vw, 24px);
  min-width: 0;
  container: ovmain / inline-size;
}

/* ── panel header (greeting + search + profile button) ─────────────────────*/
.acct-ov2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.acct-ov2-head-id {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.acct-ov2-brandmark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #4EA9D8, #6E9A2E);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(42, 123, 174, 0.6);
}

.acct-ov2-greet {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(21px, 2.1vw, 28px);
  color: var(--acct-ink);
}

.acct-ov2-greetsub {
  font-size: 13px;
  color: var(--acct-ink-muted);
  margin-top: 3px;
}

.acct-ov2-head-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-ov2-userbtn {
  width: 44px;
  height: 44px;
  font-size: 14.5px;
  flex: none;
}

/* Notifications bell — an icon-only button pinned to the top-right of the panel
   (inside the tab nav). Opens the rail drawer; fills ink while open; carries an
   absolute unread badge. Shown ONLY on the Overview (the drawer opens over the
   overview rail), via the [data-acct-mainview] scope below. */
.acct-notifbell {
  position: relative;
  flex: none;
  /* relative: anchors the absolute unread badge */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  padding: 0;
  /* blends into the dashboard — no chip background, just the bell glyph */
  background: none;
  color: var(--acct-ink-soft);
  box-shadow: none;
  cursor: pointer;
  border: 0;
  transition: color .18s ease;
}

.acct-notifbell:hover {
  background: none;
  box-shadow: none;
  color: var(--acct-ink);
}

.acct-notifbell.is-active {
  background: none;
  box-shadow: none;
  color: var(--acct-ink);
}

.acct-notifbell-ic {
  display: inline-flex;
  color: inherit;
  transition: color .18s ease;
}

.acct-notifbell.is-active .acct-notifbell-ic {
  color: inherit;
}

.acct-notifbell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--acct-blue);
  color: #fff;
  box-shadow: 0 0 0 2px var(--acct-bg);
  /* ring it off the page/nav surface */
}

.acct-notifbell.is-active .acct-notifbell-badge {
  box-shadow: 0 0 0 2px var(--acct-ink);
}

/* The nav is a flex row: the centered tab scroller takes the remaining width and
   the bell sits to its RIGHT as a flex item — so it reserves its own space and can
   never overlap the last tab (it used to be absolutely positioned over the row). */
.acct-tabs {
  position: relative;
  display: flex;
  align-items: center;
}

/* the tab row fills the WHOLE width so its links sit centered in the panel; the
   bell is lifted OUT of the flex flow (absolute, left) so it never pushes the
   centered tabs off-center. */
.acct-tabs-row {
  flex: 1 1 auto;
  min-width: 0;
}

.acct-tabs-bell {
  position: absolute;
  left: clamp(18px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
}

/* the drawer lives on the overview rail, so the bell only shows on the overview */
[data-acct-mainview]:not([data-acct-mainview="overview"]) .acct-tabs-bell {
  display: none;
}

.acct-app .acct-notifbell:focus-visible {
  outline-offset: 3px;
  border-radius: 11px;
}

@media (max-width: 640px) {
  .acct-notifbell {
    width: 36px;
    height: 36px;
  }
}

/* Membership upgrade CTA (overview header) — an inviting two-line green pill */
.acct-ov2-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  padding: 8px 15px 8px 11px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EDF6DD 0%, #DCEEBF 100%);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.26), 0 1px 2px rgba(16, 24, 26, 0.05), 0 14px 30px -16px rgba(110, 154, 46, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.acct-ov2-cta:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.42), 0 2px 4px rgba(16, 24, 26, 0.06), 0 18px 38px -16px rgba(110, 154, 46, 0.68);
}

.acct-ov2-cta-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-green-deep);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.22);
}

.acct-ov2-cta-text {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
  min-width: 0;
  text-align: left;
}

.acct-ov2-cta-text b {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--acct-green-text);
}

.acct-ov2-cta-text small {
  font-size: 11px;
  color: var(--acct-green-deep);
  opacity: 0.82;
  margin-top: 2px;
}

.acct-ov2-cta-arrow {
  flex: none;
  color: var(--acct-green-deep);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease;
}

.acct-ov2-cta:hover .acct-ov2-cta-arrow {
  transform: translateX(2px);
}

/* tier-metal variants — the CTA wears the metal of the tier it promotes (matches
   the membership upgrade button); inner text/icon/arrow flip to ink */
.acct-ov2-cta-silver,
.acct-ov2-cta-gold {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 1px 2px rgba(16, 24, 26, 0.14), 0 14px 30px -16px rgba(60, 72, 92, 0.5);
}

.acct-ov2-cta-silver {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 46%), linear-gradient(150deg, #FCFDFF 0%, #E6EBF2 24%, #C8D0DC 52%, #EEF2F7 74%, #D2D9E2 100%);
}

.acct-ov2-cta-gold {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 44%), linear-gradient(150deg, #FFF7D6 0%, #F4D885 24%, #E2B441 52%, #FCEEAE 74%, #E7C257 100%);
}

.acct-ov2-cta-silver:hover,
.acct-ov2-cta-gold:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(16, 24, 26, 0.16), 0 18px 36px -16px rgba(60, 72, 92, 0.6);
}

.acct-ov2-cta-silver .acct-ov2-cta-text b,
.acct-ov2-cta-gold .acct-ov2-cta-text b {
  color: #1E232B;
}

.acct-ov2-cta-silver .acct-ov2-cta-text small,
.acct-ov2-cta-gold .acct-ov2-cta-text small {
  color: rgba(30, 35, 43, 0.72);
}

.acct-ov2-cta-silver .acct-ov2-cta-arrow,
.acct-ov2-cta-gold .acct-ov2-cta-arrow {
  color: #1E232B;
}

.acct-ov2-cta-silver .acct-ov2-cta-ic {
  color: #5C6675;
  box-shadow: inset 0 0 0 1px rgba(92, 102, 117, 0.3);
}

.acct-ov2-cta-gold .acct-ov2-cta-ic {
  color: #9A7A1E;
  box-shadow: inset 0 0 0 1px rgba(154, 122, 30, 0.32);
}

@media (max-width: 560px) {
  .acct-ov2-cta {
    width: 100%;
    justify-content: flex-start;
  }
}

/* placeholder for a future marketing banner (where "Needs attention" used to be) */
.acct-ov2-banner-slot {
  min-height: clamp(118px, 12vw, 150px);
  border-radius: clamp(16px, 1.4vw, 20px);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* (The old top trust band — .acct-trustbar / .acct-dash-trust — was removed: the
   reassurance strip is now the slim .acct-trustfoot at the BOTTOM of the panel,
   below. Those classes no longer appear in any markup.) */

/* ── Reassurance footer (overview) — the redesigned trust strip. One slim hairline
   row at the BOTTOM of the panel: four quiet "label + subline" items, separated by
   thin vertical dividers, much calmer than the old boxed 4-up band. ───────────── */
.acct-trustfoot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(12px, 1.4vw, 18px);
  padding-top: clamp(11px, 1.2vw, 15px);
  border-top: 1px solid var(--acct-line);
}

.acct-trustfoot-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 clamp(14px, 1.6vw, 26px);
}

.acct-trustfoot-item:first-child {
  padding-left: 2px;
}

.acct-trustfoot-item+.acct-trustfoot-item {
  box-shadow: inset 1px 0 0 var(--acct-line);
}

.acct-trustfoot-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink-soft);
  line-height: 1.3;
}

.acct-trustfoot-sub {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .acct-trustfoot {
    grid-template-columns: 1fr 1fr;
    row-gap: 13px;
  }

  .acct-trustfoot-item:nth-child(odd) {
    padding-left: 2px;
  }

  .acct-trustfoot-item:nth-child(3) {
    box-shadow: none;
  }
}

@media (max-width: 440px) {
  .acct-trustfoot {
    grid-template-columns: 1fr;
  }

  .acct-trustfoot-item {
    box-shadow: none !important;
    padding-left: 2px;
  }

  .acct-trustfoot-item+.acct-trustfoot-item {
    padding-top: 9px;
    border-top: 1px solid var(--acct-line);
  }
}

/* ── rail header (aligned with the greeting at the very top) ───────────────*/
.acct-ov2-railhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acct-ov2-railtitle {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: var(--acct-ink);
}

.acct-ov2-railbtn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color 0.18s ease, box-shadow 0.18s ease;
}

.acct-ov2-railbtn:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

/* ── top cluster: profile (tall) + a brand promo banner beside it ──────────*/
.acct-ov2-cluster {
  display: grid;
  gap: clamp(12px, 1.2vw, 16px);
  grid-template-columns: 1fr;
  grid-template-areas: "profile" "promo";
}

@container ovmain (min-width: 620px) {
  .acct-ov2-cluster {
    /* the wide promo BANNER on the LEFT, the shop image on the RIGHT (swapped) */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.94fr);
    grid-template-areas: "promo profile";
    align-items: stretch;
  }
}

/* ── Shop more tags — the image hero that took the profile's place in the cluster:
   a large tag photo filling the space, with the Shop button + code below ─────── */
.acct-ov2-shop {
  grid-area: profile;
  display: flex;
  flex-direction: column;
  border-radius: clamp(18px, 1.4vw, 22px);
  overflow: hidden;
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  text-decoration: none;
  /* the whole card is the <a> link now */
}

.acct-ov2-shop-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(150px, 16vw, 250px);
  background: #16181A;
}

.acct-ov2-shop-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* the FAKE button painted onto the shop image (mirrors the promo creative CTA) */
.acct-ov2-shop-cta {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 1.6vw, 20px);
  bottom: clamp(14px, 1.6vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #16181A;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -6px rgba(8, 14, 20, 0.55);
  transition: transform .18s ease, box-shadow .18s ease;
}

.acct-ov2-shop:hover .acct-ov2-shop-cta {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(8, 14, 20, 0.65);
}

.acct-ov2-shop-cta svg {
  flex: none;
}

.acct-ov2-shop-body {
  padding: clamp(13px, 1.2vw, 17px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Compact profile — moved into the rail: small shield beside name/tier/since ── */
.acct-ov2-railprofile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.acct-railprofile-shield {
  flex: none;
  width: clamp(48px, 4vw, 58px);
}

.acct-railprofile-shield .acct-profile-shield-svg {
  filter: drop-shadow(0 6px 12px rgba(16, 24, 26, 0.22));
}

.acct-railprofile-text {
  min-width: 0;
}

.acct-railprofile-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 16px;
  color: var(--acct-ink);
  line-height: 1.15;
}

.acct-railprofile-role {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
}

.acct-railprofile-since {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--acct-blue-text);
}

/* ── Promo banner — the brand-aware featured card beside the profile ───────*/
.acct-ov2-promo {
  grid-area: promo;
  position: relative;
  overflow: hidden;
  border-radius: clamp(18px, 1.4vw, 22px);
  min-height: clamp(220px, 24vw, 312px);
  background: var(--acct-surface-2);
  box-shadow: 0 0 0 1px var(--acct-line), var(--acct-shadow);
}

.acct-promo-track {
  display: flex;
  height: 100%;
  min-height: inherit;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-promo-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

/* background photo — full-bleed cover for every slide; non-active slides can
   defer their src until the carousel reveals them */
.acct-promo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.acct-promo-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* composed (ReturnMe) slide — full-bleed photo + a dark left scrim so the white
   editorial copy + white CTA read over a lifestyle scene */
.acct-promo-compose .acct-promo-bg {
  background-position: center;
}

.acct-promo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(7, 11, 15, 0.86) 0%, rgba(7, 11, 15, 0.62) 26%, rgba(7, 11, 15, 0.22) 50%, rgba(7, 11, 15, 0) 74%);
}

.acct-promo-body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 38px);
  max-width: 80%;
}

.acct-promo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B4D564;
}

.acct-promo-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-size: clamp(23px, 3vw, 36px);
  color: #FCFDFB;
  margin-top: 9px;
  text-shadow: 0 1px 18px rgba(7, 11, 15, 0.4);
}

.acct-promo-sub {
  font-size: clamp(13px, 1.25vw, 15px);
  color: rgba(248, 250, 246, 0.84);
  line-height: 1.5;
  margin-top: 11px;
  max-width: 34ch;
}

.acct-promo-cta {
  margin-top: clamp(16px, 1.7vw, 22px);
  background: #fff;
  color: #16181A;
  box-shadow: 0 6px 18px -6px rgba(7, 11, 15, 0.55);
}

.acct-promo-cta:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(7, 11, 15, 0.65);
}

/* creative (partner) slide — a finished brand banner shown WHOLE: the sharp image
   is contained (always fully visible + scales with the container, never cropped),
   floated over a blurred fill of itself so the card still reads full. CTA on a scrim. */
.acct-promo-creative {
  background: #0E1B26;
}

.acct-promo-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(34px) saturate(1.25) brightness(0.82);
  transform: scale(1.18);
}

.acct-promo-img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.acct-promo-scrim-btm {
  background: linear-gradient(0deg, rgba(8, 14, 20, 0.66) 0%, rgba(8, 14, 20, 0.18) 26%, transparent 48%);
}

.acct-promo-creative-cta {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2vw, 26px);
  bottom: clamp(16px, 1.8vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: #16181A;
  background: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -6px rgba(8, 14, 20, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.acct-promo-creative:hover .acct-promo-creative-cta {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(8, 14, 20, 0.7);
}

.acct-promo-creative-cta svg {
  flex: none;
}

/* dots + nav (work over both light + dark slides via a translucent pill / chips) */
.acct-promo-dots {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(14, 22, 28, 0.32);
  backdrop-filter: blur(5px);
}

.acct-promo-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.25s ease, background 0.2s ease;
}

.acct-promo-dot[aria-current="true"] {
  width: 18px;
  background: #fff;
}

.acct-promo-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--acct-ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px -5px rgba(16, 24, 26, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.acct-promo-nav svg {
  flex: none;
}

.acct-ov2-promo:hover .acct-promo-nav,
.acct-promo-nav:focus-visible {
  opacity: 1;
}

.acct-promo-prev {
  left: 10px;
}

.acct-promo-next {
  right: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .acct-promo-track {
    transition: none;
  }
}

/* ── Profile card — wider, taller, more generous (the headline fix) ────────*/
.acct-ov2-profile {
  grid-area: profile;
  border-radius: clamp(18px, 1.4vw, 22px);
  overflow: hidden;
  /* themed photo background (map · plane · a tagged backpack). A soft white veil
     sits over it — a radial glow through the centre (avatar + name) and a heavier
     wash at the bottom (score + pills) — so the dark text stays readable while the
     image still reads at the edges. The .acct-card white fill remains the fallback
     if the image fails to load. */
  background-image:
    radial-gradient(120% 70% at 50% 46%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.20) 52%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.26) 76%, rgba(255, 255, 255, 0.56) 100%),
    url("../assets/account/profilecardbg.webp");
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, center;
}

.acct-ov2-profile .acct-profile-body {
  padding: clamp(20px, 1.6vw, 26px) clamp(18px, 1.5vw, 24px) clamp(22px, 1.7vw, 28px);
  justify-content: flex-start;
}

.acct-ov2-profile .acct-profile-ringwrap {
  width: 132px;
  height: 132px;
  margin: clamp(14px, 1.4vw, 20px) 0 clamp(14px, 1.4vw, 18px);
}

.acct-ov2-profile .acct-profile-avatar {
  width: 98px;
  height: 98px;
  font-size: 32px;
  /* clean white disc inside the score ring — hairline + soft neutral shadow,
     plus a white gap so it floats free of the ring (no gradient) */
  box-shadow: 0 0 0 5px #fff, inset 0 0 0 1px var(--acct-line), 0 6px 18px -8px rgba(16, 24, 26, 0.22);
}

/* sharper, bolder, tighter name (reference profile look) */
.acct-ov2-profile .acct-profile-name {
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.acct-ov2-profile .acct-profile-role {
  font-size: 13px;
  margin-top: 2px;
  font-weight: 500;
}

/* floating white stat pills (vs the inset grey default), anchored to the bottom
   of the tall card and kept on ONE row (tags · lost · returned) */
/* Protection score — a calm editorial mini-stat moved into the profile card,
   anchored just above the pills. margin-top:auto sinks the score+pills group to
   the card bottom; a hairline separates it from the name/role above. */
.acct-ov2-profile .acct-profile-score {
  display: block;
  text-decoration: none;
  margin-top: auto;
  padding-top: clamp(14px, 1.5vw, 18px);
  border-top: 1px solid var(--acct-line);
}

.acct-profile-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acct-profile-score-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--acct-ink-muted);
}

.acct-profile-score-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--acct-green-text);
}

.acct-profile-score-num {
  display: block;
  margin-top: 5px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(28px, 2.6vw, 34px);
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-profile-score-num small {
  font-size: 0.5em;
  font-weight: 700;
  color: var(--acct-ink-muted);
  margin-left: 1px;
}

.acct-ov2-profile .acct-profile-score:hover .acct-profile-score-num {
  color: var(--acct-green-deep);
}

.acct-ov2-profile .acct-profile-stats {
  margin-top: clamp(12px, 1.3vw, 16px);
  padding-top: 0;
  gap: 7px;
  flex-wrap: wrap;
}

.acct-ov2-profile .acct-stat-pill {
  background: #fff;
  padding: 7px 11px;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.05), 0 12px 24px -16px rgba(16, 24, 26, 0.5), inset 0 0 0 1px var(--acct-line);
}

.acct-ov2-profile .acct-stat-pill:hover {
  background: #fff;
  box-shadow: 0 2px 4px rgba(16, 24, 26, 0.06), 0 16px 30px -16px rgba(16, 24, 26, 0.55), inset 0 0 0 1px var(--acct-line-2);
}

/* ── Profile card — reworked: per-tier metal shield, then name · status · member
   since · tags pill, with a Details link anchored at the bottom centre (no edit
   icon). The shield is an inline SVG (renderProfile → tierShieldSvg), swappable. */
.acct-profile-shield {
  margin: clamp(6px, 1vw, 14px) 0 14px;
  display: grid;
  place-items: center;
  width: clamp(89px, 8.4vw, 113px);
}

.acct-profile-shield-svg {
  width: 100%;
  height: auto;
  display: block;
}

.acct-ov2-profile .acct-profile-name {
  margin-top: 0;
}

.acct-profile-tier-name {
  margin-top: 5px;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 14px;
  color: var(--acct-ink-soft);
}

.acct-profile-since {
  margin-top: 3px;
  margin-bottom: clamp(4px, 1vw, 10px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--acct-blue-deep);
}

/* (the tags + details buttons were removed from the profile card) */
.acct-ov2-profile .acct-profile-body {
  justify-content: center;
}

/* ── Active-tags bar (was "ways we can reach you") — a calm grey strip with an
   overlapping icon-per-tag stack, à la the reference "trackers connected" row */
.acct-ov2-tags {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px clamp(16px, 1.4vw, 20px);
  border-radius: clamp(15px, 1.2vw, 19px);
  background: #ECEEF1;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  text-decoration: none;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.acct-ov2-tags:hover {
  background: #E6E9ED;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-ov2-tags-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-ov2-tags-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

.acct-ov2-tags-sub [data-acct-tags-count] {
  font-variant-numeric: tabular-nums;
}

.acct-ov2-tags-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* the stacked icons sit on the grey strip — ring them with the strip colour */
.acct-ov2-tags .acct-stack>* {
  box-shadow: 0 0 0 2px #ECEEF1, inset 0 0 0 1px var(--acct-line);
}

.acct-ov2-tags:hover .acct-stack>* {
  box-shadow: 0 0 0 2px #E6E9ED, inset 0 0 0 1px var(--acct-line);
}

.acct-ov2-tags .acct-stack-more {
  background: #fff;
}

/* ── Tag showcase — replaces the chart. A horizontal, snap-scrolling rail of the
   user's protected tags. Tiles BLEND into the panel: a framed product image with
   the name/id/status resting directly on the surface below it — no bordered card,
   no nested box. Spacing + the image frame carry the structure. ──────────────*/
.acct-ov2-showcase {
  background: transparent;
}

.acct-ov2-showcase-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(14px, 1.4vw, 18px);
  padding: 0 2px;
}

.acct-ov2-showcase-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--acct-ink);
}

.acct-ov2-showcase-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
}

.acct-ov2-showcase-sub [data-acct-showcase-count] {
  font-variant-numeric: tabular-nums;
}

.acct-ov2-showcase-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.acct-ov2-scrollbtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: pointer;
  border: 0;
  transition: color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, transform 0.16s ease;
}

.acct-ov2-scrollbtn:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-ov2-scrollbtn:active {
  transform: translateY(1px);
}

.acct-ov2-scrollbtn:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* Tag showcase — a SINGLE horizontal scroll rail (one row). Tiles keep their
   fixed width and the rail scrolls sideways; the prev/next chevrons + "View all"
   reveal the rest, and the full grid lives one tap away under Protected Items.
   (Was briefly a wrap-all grid to fill wide screens — reverted: the overview is
   a glance, not the whole list.) The tile width (clamp 196–280px, 30% of the
   container) keeps wide screens filled with ~3–4 tiles before it scrolls. */
.acct-tagrow {
  display: flex;
  gap: clamp(14px, 1.5vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* vertical room so the soft state glows + hover lift aren't clipped by the
     scroller's overflow; pulled back with negative margin to keep the rhythm */
  padding: 16px 4px 18px;
  margin: -10px -4px -8px;
  scroll-padding-left: 4px;
}

.acct-tagrow::-webkit-scrollbar {
  display: none;
}

/* one tile = framed image + text on the panel (NO card) */
.acct-tagtile {
  flex: 0 0 auto;
  width: clamp(196px, 30%, 280px);
  scroll-snap-align: start;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.acct-tagtile-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* a calm per-type wash for the placeholder; a real photo covers it */
  background: linear-gradient(155deg, var(--tone, var(--acct-surface-2)) 0%, #FFFFFF 145%);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.24s ease;
}

.acct-tagtile-ph {
  color: var(--toneink, var(--acct-ink-muted));
  opacity: 0.92;
  display: grid;
  place-items: center;
}

/* full-bleed: the image fills the whole frame (no padding, no tinted border) */
.acct-tagtile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.acct-tagtile-img.is-loaded {
  opacity: 1;
}

.acct-tagtile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 3px 2px;
}

.acct-tagtile-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-tagtile-meta {
  font-size: 12px;
  color: var(--acct-ink-muted);
}

/* image-12 card fields: name + ID# on one row, a "Product description" link, the
   activated date, then the status chip */
.acct-tagtile-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.acct-tagtile-row .acct-tagtile-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-tagtile-id {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--acct-ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.acct-tagtile-desc {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--acct-ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-tagtile-desc.is-empty {
  color: var(--acct-ink-muted);
  font-style: italic;
}

.acct-tagtile-activated {
  font-size: 12px;
  color: var(--acct-ink-muted);
  margin-bottom: 1px;
}

/* status badge ON the image (top-left) — a calm frosted pill, single colour cue */
.acct-tagtile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 26, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.acct-tagtile-badge svg {
  flex: none;
}

.acct-tagtile-badge-green {
  color: var(--acct-green-text);
}

.acct-tagtile-badge-amber {
  color: var(--acct-amber-text);
}

.acct-tagtile-badge-blue {
  color: var(--acct-blue-text);
}

/* hover: lift + soften the frame, warm the name — motion says "interactive" */
.acct-tagtile:hover .acct-tagtile-frame {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--acct-line-2), 0 18px 32px -18px rgba(16, 24, 26, 0.42);
}

.acct-tagtile:hover .acct-tagtile-name {
  color: var(--acct-green-text);
}

/* terminal "activate a tag" tile — a quiet ghost frame that holds the two CTAs
   INSIDE it (where the product image would be). Flex column, centred. */
.acct-tagtile-frame-add {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2);
  color: var(--acct-ink-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.6vw, 24px);
  transition: color 0.18s ease, box-shadow 0.18s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acct-tagtile-add:hover .acct-tagtile-frame-add {
  box-shadow: inset 0 0 0 1.5px var(--acct-green-deep);
  color: var(--acct-green-deep);
  transform: translateY(-3px);
}

.acct-tagtile-add:hover .acct-tagtile-name {
  color: var(--acct-green-text);
}

/* the two CTAs, stacked inside the frame (the old + icon was removed, so they take
   the full tile — larger + a touch taller/thicker). */
.acct-tagtile-addbtns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.acct-tagtile-addbtn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  height: 48px;
  font-size: 14px;
  padding: 0 14px;
  border-radius: 12px;
}

/* phones: the chevrons are redundant once the rail is swipeable — hide them and
   let touch + "View all" carry it (keeps the header uncluttered). */
@media (max-width: 640px) {
  .acct-ov2-scrollbtn {
    display: none;
  }

  .acct-ov2-showcase-head {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acct-tagtile-frame,
  .acct-tagtile-frame-add {
    transition: box-shadow 0.18s ease;
  }

  .acct-tagtile:hover .acct-tagtile-frame,
  .acct-tagtile-add:hover .acct-tagtile-frame-add {
    transform: none;
  }

  .acct-tagtile-img {
    transition: opacity 0.01ms;
  }
}

/* ── In-panel tag DETAIL view ───────────────────────────────────────────────
   Clicking a tile crossfades the dashboard grid out and the single-tag detail
   in, inside the same panel. The detail reuses the panel grid (head · railhead
   · main · rail) so the divider + responsive behaviour come for free. ────────*/
/* the overview/tags/detail crossfade is handled by the .acct-view / overlay
   system above (data-active). Nothing extra needed here. */

/* detail header: back chip + tag title, status on the right */
.acct-detail-headl {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acct-detail-back {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: pointer;
  border: 0;
  transition: color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.acct-detail-back:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  transform: translateX(-2px);
}

.acct-detail-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.1;
  color: var(--acct-ink);
}

.acct-detail-headr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* hero: product image (left) + facts/actions (right) */
.acct-detail-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}

@container ovmain (min-width: 540px) {
  .acct-detail-hero {
    flex-direction: row;
    align-items: flex-start;
  }
}

.acct-detail-media {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

@container ovmain (min-width: 540px) {
  .acct-detail-media {
    width: clamp(280px, 48%, 420px);
  }
}

/* the fields that now live beside the photo fill the facts column width */
.acct-detail-facts .flow-input,
.acct-detail-facts textarea.flow-input {
  width: 100%;
}

.acct-detail-facts .acct-detail-block:first-of-type {
  margin-top: 16px;
}

.acct-detail-frame {
  width: 100%;
}

.acct-detail-photobtn {
  align-self: stretch;
}

@container ovmain (min-width: 540px) {
  .acct-detail-photobtn {
    align-self: flex-start;
  }
}

.acct-detail-facts {
  flex: 1;
  min-width: 0;
}

.acct-detail-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink-soft);
}

.acct-detail-type svg {
  color: var(--acct-ink-muted);
  flex: none;
}

.acct-detail-dl {
  margin: 14px 0 0;
}

.acct-detail-dl>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--acct-line);
}

.acct-detail-dl>div:first-child {
  border-top: 0;
}

.acct-detail-dl dt {
  font-size: 13px;
  color: var(--acct-ink-muted);
  margin: 0;
}

.acct-detail-dl dd {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
  margin: 0;
}

.acct-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* blocks: finder reward + private note */
.acct-detail-block {
  margin-top: clamp(20px, 2vw, 28px);
}

.acct-detail-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.acct-detail-h3 {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--acct-ink);
}

.acct-detail-block-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
}

/* ── Tag DETAIL (restructured) — LEFT: back+title · actions (Report lost / Delete) ·
   timeline. RIGHT: photo + editors. No status badge; tighter spacing. ───────────*/
.acct-detail2 {
  display: grid;
  grid-template-columns: clamp(258px, 29%, 344px) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
}

@media (max-width: 860px) {
  .acct-detail2 {
    grid-template-columns: 1fr;
    gap: clamp(18px, 2vw, 24px);
  }
}

.acct-detail2-side {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.5vw, 18px);
  min-width: 0;
}

.acct-detail2-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.acct-detail2-titlewrap {
  min-width: 0;
}

.acct-detail2-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.acct-detail2-timeline {
  padding-top: clamp(14px, 1.5vw, 18px);
  border-top: 1px solid var(--acct-line);
}

.acct-detail2-tl-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
  margin: 0 0 12px;
}

.acct-detail2-tl-sub {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  margin: -4px 0 12px;
  line-height: 1.5;
}

.acct-detail2-main {
  min-width: 0;
  container: ovmain / inline-size;
}

/* a clearly-RED delete; the confirmation modal still gates the actual delete */
.acct-detail2-delete {
  color: #B4452F;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(180, 69, 47, 0.42);
}

.acct-detail2-delete:hover {
  background: rgba(180, 69, 47, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(180, 69, 47, 0.7);
  color: #9A3A28;
}

.acct-detail2-delete svg {
  flex: none;
}

/* compacter: tighten the hero gap + the editor blocks on the detail page */
.acct-detail2-main .acct-detail-hero {
  gap: clamp(14px, 1.4vw, 18px);
}

.acct-detail2-main .acct-detail-block {
  margin-top: clamp(13px, 1.4vw, 18px);
}

.acct-detail-note {
  width: 100%;
  resize: vertical;
  min-height: 62px;
  line-height: 1.5;
}

/* Pet tag edit fields */
.acct-petinfo {
  margin-top: clamp(18px, 2vw, 26px);
}

.acct-petsection {
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--acct-line);
}

.acct-petsection:first-child {
  padding-top: 0;
  border-top: 0;
}

.acct-petsection+.acct-petsection {
  margin-top: clamp(18px, 2vw, 26px);
}

.acct-pettitle {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 650;
  font-size: clamp(17px, 1.65vw, 24px);
  line-height: 1.22;
  color: var(--acct-ink);
  margin: 0 0 14px;
}

.acct-petgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px clamp(18px, 2.4vw, 34px);
}

.acct-petfield {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.acct-petfield>.flow-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}

.acct-petwide {
  grid-column: 1 / -1;
}

.acct-petsizes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  min-height: 38px;
  align-items: center;
}

.acct-petsize {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--acct-ink-soft);
  font-size: 14px;
  cursor: pointer;
}

.acct-petsize input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--acct-green);
}

.acct-pettextarea {
  min-height: 84px;
  resize: vertical;
}

.acct-petinfo-panel,
.acct-petinfo-rail {
  margin-top: 14px;
}

.acct-petinfo-panel .acct-pettitle,
.acct-petinfo-rail .acct-pettitle {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 11px;
}

.acct-petinfo-panel .acct-petgrid,
.acct-petinfo-rail .acct-petgrid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.acct-petinfo-panel .acct-petsection,
.acct-petinfo-rail .acct-petsection {
  padding-top: 14px;
}

.acct-petinfo-panel .acct-petsizes,
.acct-petinfo-rail .acct-petsizes {
  gap: 10px 16px;
}

@container ovmain (max-width: 620px) {
  .acct-petgrid {
    grid-template-columns: 1fr;
  }
}

/* "Optional" tag sitting beside a block title (e.g. Finder reward) */
.acct-detail-optional {
  display: inline-block;
  margin-left: 9px;
  vertical-align: middle;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--acct-ink-muted);
  background: var(--acct-surface-2);
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* "?" helper — a small inline icon with a hover/focus tooltip (CSS-only) */
.acct-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 7px;
  vertical-align: middle;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--acct-ink-muted);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  cursor: help;
  user-select: none;
  transition: color 0.16s ease, box-shadow 0.16s ease;
}

.acct-help:hover,
.acct-help:focus-visible {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  outline: none;
}

.acct-help::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 230px;
  text-align: left;
  white-space: normal;
  background: var(--acct-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  padding: 8px 11px;
  border-radius: 9px;
  box-shadow: 0 10px 28px -10px rgba(16, 24, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 12;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.acct-help::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--acct-ink);
  opacity: 0;
  z-index: 12;
  transition: opacity 0.16s ease;
}

.acct-help:hover::after,
.acct-help:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.acct-help:hover::before,
.acct-help:focus-visible::before {
  opacity: 1;
}

.acct-detail-ready {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

@media (prefers-reduced-motion: reduce) {

  .acct-ov2-grid,
  .acct-ov2-detail {
    transition: none;
  }
}

/* ── Right rail sections — blend into the panel (no card chrome) ───────────*/
.acct-ov2-railsec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

/* (.acct-ov2-railmore removed — it was the old bottom-row "View all notifications"
   link; notifications now open via the nav bell → rail drawer.) */

/* ════════════════════════════════════════════════════════════════════════════
   Dashboard reorg (employer request) — rail "Add more tags" promo (3 thumbs +
   25% code), the bottom row (Notifications + Social/referral), and the shared
   code blocks used by both.
   ════════════════════════════════════════════════════════════════════════════*/
/* Rail: "Add more tags" promo */
.acct-ov2-buytags {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(16px, 1.4vw, 20px);
  border-radius: clamp(16px, 1.4vw, 20px);
  background: #fff;
  box-shadow: 0 0 0 1px var(--acct-line), 0 14px 30px -20px rgba(16, 24, 26, 0.5);
}

.acct-ov2-buytags-lede {
  font-size: 12.8px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-ov2-buytags-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.acct-ov2-buytags-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  display: grid;
  place-items: center;
}

.acct-ov2-buytags-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-ov2-buytags-cta {
  width: 100%;
  justify-content: center;
  gap: 7px;
  height: 42px;
}

/* ── Flatten the side panel (employer request): no drop shadows, no hover lifts.
   Rail items become flat sections separated by hairline dividers + spacing. ──── */
.acct-ov2-buytags {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

/* keep the tier metal on the membership card, but drop its drop-shadow */
.acct-ov2-memterm,
.acct-ov2-memterm[data-metal="silver"],
.acct-ov2-memterm[data-metal="gold"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.acct-ov2-memterm-cta:hover {
  transform: none;
}

.acct-ov2-share {
  display: flex;
  flex-direction: column;
}

.acct-ov2-share .acct-ov2-railsec-head {
  margin-bottom: 12px;
}

/* Code blocks — a label/value well + a Copy button (referral · discount) */
.acct-codeblock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-codeblock-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 1px;
}

.acct-codeblock-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--acct-ink-muted);
}

.acct-codeblock-value {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

.acct-codeblock-pct {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-codeblock-note {
  font-size: 11.5px;
  color: var(--acct-ink-soft);
}

.acct-codeblock-note b {
  color: var(--acct-ink);
  font-weight: 700;
}

.acct-codeblock-copy {
  flex: none;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #16181A;
  padding: 8px 13px;
  border-radius: 9px;
  box-shadow: 0 6px 14px -8px rgba(16, 24, 26, 0.6);
  transition: background-color 0.16s ease, transform 0.14s ease;
}

.acct-codeblock-copy:hover {
  background: #000;
  transform: translateY(-1px);
}

.acct-codeblock-copy.is-copied {
  background: var(--acct-green-deep);
}

.acct-codeblock-gold {
  background: linear-gradient(150deg, #FFF7DC 0%, #FBEAB0 100%);
  box-shadow: inset 0 0 0 1px rgba(199, 160, 40, 0.34);
}

.acct-codeblock-gold .acct-codeblock-pct {
  color: #6E5410;
}

.acct-dashview {
  display: block;
}

/* (The old full-width bottom row — .acct-ov2-bottom / .acct-dash-sec / -bell /
   -notiflist / -share — was removed: Notifications moved to the nav bell → rail
   drawer, and "On its way" surfaces in that drawer + the Recoveries view.) */
.acct-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.acct-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex: none;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  color: #fff;
  text-decoration: none;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.acct-social-btn svg {
  width: 18px;
  height: 18px;
}

.acct-social-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.acct-social-fb {
  background: #1877F2;
}

.acct-social-x {
  background: #16181A;
}

.acct-social-wa {
  background: #25D366;
}

.acct-social-mail {
  background: var(--acct-blue-deep);
}

.acct-social-link {
  background: var(--acct-surface-2);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-social-link:hover {
  color: var(--acct-ink);
}

.acct-social-btn.is-copied {
  box-shadow: inset 0 0 0 2px var(--acct-green-deep);
}

/* ════════════════════════════════════════════════════════════════════════════
   Rail cards — three clean, self-contained components (Add more tags ·
   Membership · Refer a friend). Flat: a hairline ring on a white surface, no
   drop shadow, no hover lift. (Mobbin refs: OpenPhone, Patreon, Whop.)
   ════════════════════════════════════════════════════════════════════════════*/
.acct-railcard {
  background: var(--acct-surface);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  padding: clamp(16px, 1.4vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.acct-railcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.acct-railcard-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 15.5px;
  color: var(--acct-ink);
}

/* 1 · Add more tags — a real ReturnMe tag hero photo, discount chip overlaid */
.acct-railcard-shop {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.acct-shop-hero {
  position: relative;
  aspect-ratio: 5 / 3;
  background: #16181A;
}

.acct-shop-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.acct-shop-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--acct-green-text);
  background: rgba(238, 246, 221, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px -2px rgba(16, 24, 26, 0.32);
  white-space: nowrap;
}

.acct-shop-body {
  padding: clamp(16px, 1.4vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acct-shop-lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-shop-cta {
  width: 100%;
  justify-content: center;
  gap: 7px;
  height: 42px;
}

.acct-shop-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  cursor: pointer;
  text-align: left;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: var(--acct-ink-soft);
  transition: box-shadow 0.16s ease, color 0.16s ease;
}

.acct-shop-code:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-shop-code b {
  color: var(--acct-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.acct-shop-code-ic {
  flex: none;
  color: var(--acct-ink-muted);
  display: grid;
  place-items: center;
}

.acct-shop-code.is-copied {
  color: var(--acct-green-text);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.42);
}

/* 2 · Membership — plain card; the tier METAL lives only on the button (no shield
   badge — that read as generic AI chrome). */
.acct-railcard-mem {
  gap: 12px;
}

.acct-mem-top {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acct-mem-tier {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15px;
  color: var(--acct-ink);
}

.acct-mem-status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-muted);
}

.acct-mem-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-mem-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
  height: 42px;
}

/* 3 · Refer a friend */
.acct-ref-lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-ref-lede b {
  color: var(--acct-ink);
  font-weight: 700;
}

.acct-ref-codewrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 13px;
  border-radius: 10px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-ref-codebody {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 1px;
}

.acct-ref-codelabel {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acct-ink-muted);
}

.acct-ref-codeval {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--acct-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-ref-copybtn {
  flex: none;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #16181A;
  padding: 9px 14px;
  border-radius: 8px;
  transition: background-color 0.16s ease;
}

.acct-ref-copybtn:hover {
  background: #000;
}

.acct-ref-copybtn.is-copied {
  background: var(--acct-green-deep);
}

.acct-ref-share {
  display: flex;
  align-items: center;
  gap: 11px;
}

.acct-ref-sharelabel {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acct-ink-muted);
}

.acct-ref-share .acct-social-row {
  gap: 7px;
}

.acct-ref-share .acct-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.acct-ref-share .acct-social-btn svg {
  width: 16px;
  height: 16px;
}

.acct-ref-share .acct-social-btn:hover {
  transform: translateY(-1px);
}

/* ── Follow us card — Facebook + Instagram quick links in the overview rail ──── */
.acct-social-lede {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-soft);
}

.acct-follow-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acct-follow-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 12px;
  text-decoration: none;
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.acct-follow-tile:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line-2), 0 12px 24px -16px rgba(16, 24, 26, 0.55);
}

.acct-follow-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px -5px rgba(16, 24, 26, 0.45);
}

.acct-follow-ic svg {
  width: 20px;
  height: 20px;
}

.acct-follow-fb .acct-follow-ic {
  background: #1877F2;
}

.acct-follow-ig .acct-follow-ic {
  background: radial-gradient(circle at 28% 108%, #FDDB6D 0%, #FA7E1E 22%, #D62976 50%, #962FBF 74%, #4F5BD5 100%);
}

.acct-follow-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.acct-follow-net {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--acct-ink);
}

.acct-follow-handle {
  font-size: 12px;
  color: var(--acct-ink-muted);
}

.acct-follow-go {
  margin-left: auto;
  flex: none;
  color: var(--acct-ink-muted);
  transition: transform 0.16s ease, color 0.16s ease;
}

.acct-follow-go svg {
  width: 16px;
  height: 16px;
  display: block;
}

.acct-follow-tile:hover .acct-follow-go {
  transform: translate(2px, -2px);
  color: var(--acct-ink);
}

/* phones: condense Follow into a compact 2-up (icon + network, no handle/arrow) */
@media (max-width: 640px) {
  .acct-follow-grid {
    flex-direction: row;
    gap: 8px;
  }

  .acct-follow-tile {
    flex: 1 1 0;
    min-width: 0;
  }

  .acct-follow-handle,
  .acct-follow-go {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERVIEW — big-screen scale recovery (2026-06-16, Rayan)
   The dashboard auto-scales via app.js (viewportScale → FIT pass): on this
   single-screen surface it sets zoom = viewportHeight / contentHeight so the
   overview fills the viewport with no scroll. So the SHORTER the overview's
   intrinsic height, the LARGER everything renders (text · cards · effective
   panel width) — critical on a 4K-at-150% canvas (2560×1440) where the taller
   redesigned overview was being shrunk to ~0.78 ("everything looks small").
   These trims reclaim genuinely dead vertical space — the rail surplus that
   left an empty gap under the greeting, the over-tall decorative promo + shop
   banners, and generous chrome paddings — WITHOUT touching any body text or
   removing content; the FIT pass then re-inflates the rest bigger. All values
   are knobs: shrink them further to zoom in more (watch the panel doesn't need
   to scroll). Scoped to [data-acct-page="overview"] so the other account
   surfaces (Protected Items, Recoveries, Membership) are untouched.
   ════════════════════════════════════════════════════════════════════════════*/
/* Overview layout tuning. The greeting header + the boxy top trust band are gone
   and the notifications row moved into the bell drawer, so the panel is just the
   two-column grid + a slim reassurance footer. The shared FIT pass (app.js) scales
   the page to fill the viewport with no scroll; it stays STABLE (no grow-overshoot)
   when the content is a touch TALLER than an exact fit, so the fit shrinks slightly
   rather than growing. These values keep it in that band while reading big on a
   4K-at-150% / 2560×1440 canvas. Tune up = safer/smaller, down = bigger. */
[data-acct-page="overview"] .acct-container {
  padding-bottom: clamp(20px, 2vw, 32px);
}

[data-acct-page="overview"] .acct-ov2-rail {
  gap: clamp(14px, 1.4vw, 18px);
}

/* main stretches to the rail height; push the cluster up + the tags down so the
   leftover space becomes breathing room BETWEEN them, not a dead gap under the
   tags. */
[data-acct-page="overview"] .acct-ov2-main {
  gap: clamp(18px, 2vw, 30px);
  justify-content: space-between;
}

/* banner + profile gain height (same width) now that the greeting + top trust
   band that used to sit above are gone — they grow to meet the rail height so the
   main column doesn't leave a dead gap. */
[data-acct-page="overview"] .acct-ov2-promo {
  min-height: clamp(280px, 27vw, 440px);
}

/* bigger tag tiles — ~4 full before the rail scrolls (was ~4.5), with a taller
   (slightly portrait) frame so the product imagery reads larger AND the tags row
   fills more of the column height (closing the gap to the banner above). */
/* scoped to the overview's horizontal SHOWCASE rail only — without this it also
   pinned the Protected-Items grid tiles to 250px (left-aligned, not filling). */
[data-acct-page="overview"] .acct-ov2-showcase .acct-tagtile {
  width: clamp(250px, 23.5%, 384px);
}

[data-acct-page="overview"] .acct-ov2-showcase .acct-tagtile-frame {
  aspect-ratio: 5 / 6;
}

/* trim the rail's tall shop card a touch (shorter hero photo + tighter body) so
   the rail height meets the now-taller main column — keeps the two columns
   balanced so the space-between gap stays a tasteful breathing strip, not a void. */
[data-acct-page="overview"] .acct-shop-hero {
  aspect-ratio: 2 / 1;
}

[data-acct-page="overview"] .acct-shop-body {
  gap: 10px;
  padding: clamp(14px, 1.2vw, 17px);
}

/* ── Responsive: collapse to a single column; the divider drops away and the
   rail flows beneath the main column with its heading restated. ────────────*/
@media (max-width: 1079px) {
  .acct-ov2-grid {
    grid-template-columns: 1fr;
  }

  .acct-ov2-grid::before {
    display: none;
  }

  /* scoped to the overview grid's OWN head (`>`); without this the generic
     `.acct-ov2-head` order also reordered the Settings/Tags view headers (which are
     view-overlay children, not grid children) below their content. */
  .acct-ov2-grid>.acct-ov2-head {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .acct-ov2-main {
    grid-column: 1;
    grid-row: auto;
    order: 2;
  }

  .acct-ov2-bottom {
    grid-column: 1;
    grid-row: auto;
    order: 3;
  }

  .acct-ov2-rail {
    grid-column: 1;
    grid-row: auto;
    order: 4;
    margin-top: clamp(6px, 1.5vw, 12px);
    padding-top: clamp(18px, 3vw, 24px);
    border-top: 1px solid var(--acct-line);
  }
}

@media (max-width: 560px) {
  .acct-ov2-head-tools {
    width: 100%;
  }

  .acct-ov2-head-tools .acct-ov-search {
    flex: 1;
    width: auto;
  }
}

/* ── Phones (<=640): re-sequence the overview into one readable column —
   PROFILE first, then the primary promo BANNER, then a SLIM shop strip, then the
   tags. Profile lives in the rail while the banner/shop live in the main column,
   so we dissolve the main/rail/cluster wrappers (display:contents) and order the
   now-sibling flex children directly. The 4-up trust band + the desktop
   notifications drawer are dropped on phones (per Rayan, 2026-06-18). */
@media (max-width: 640px) {
  [data-acct-page="overview"] .acct-ov2-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 4vw, 20px);
  }

  [data-acct-page="overview"] .acct-ov2-main,
  [data-acct-page="overview"] .acct-ov2-rail,
  [data-acct-page="overview"] .acct-ov2-cluster {
    display: contents;
  }

  [data-acct-page="overview"] .acct-ov2-profile {
    order: 1;
  }

  [data-acct-page="overview"] .acct-ov2-promo {
    order: 2;
    min-height: clamp(190px, 52vw, 260px);
  }

  [data-acct-page="overview"] .acct-ov2-shop {
    order: 3;
  }

  [data-acct-page="overview"] .acct-ov2-showcase {
    order: 4;
  }

  [data-acct-page="overview"] .acct-railcard-mem {
    order: 5;
  }

  [data-acct-page="overview"] .acct-railcard-ref {
    order: 6;
  }

  [data-acct-page="overview"] .acct-railcard-social {
    order: 7;
  }

  /* shop tags → slim ~1in horizontal strip (was a tall hero card) */
  [data-acct-page="overview"] .acct-ov2-shop-hero {
    min-height: 0;
    height: clamp(84px, 24vw, 104px);
  }

  [data-acct-page="overview"] .acct-ov2-shop-hero img {
    object-position: center 42%;
  }

  [data-acct-page="overview"] .acct-trustfoot {
    display: none;
  }

  [data-acct-page="overview"] .acct-notifdrawer {
    display: none;
  }
}

/* ============================================================================
   ICON SYSTEM + new overview components (notifications panel, tile states).
   ============================================================================ */
/* hydrated <span data-ic> placeholders + inline svgIcon() output */
[data-ic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.acct-ic {
  display: block;
  flex: none;
}

.acct-stat-pill-ic {
  display: inline-flex;
  flex: none;
}

/* ── Needs-attention panel (replaces the active-tags strip) ─────────────────*/
.acct-ov2-notifs {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: clamp(15px, 1.2vw, 19px);
  box-shadow: 0 0 0 1px var(--acct-line), var(--acct-shadow);
  padding: 2px clamp(15px, 1.3vw, 19px) 8px;
}

.acct-ov2-notifs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0 6px;
}

.acct-ov2-notifs-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
}

.acct-notif {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--acct-line);
}

.acct-notif:first-child {
  border-top: 0;
}

.acct-notif-ic {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
}

.acct-notif-amber .acct-notif-ic {
  background: var(--acct-amber-tint);
  color: var(--acct-amber-text);
}

.acct-notif-blue .acct-notif-ic {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-deep);
}

.acct-notif-green .acct-notif-ic {
  background: var(--acct-green-tint);
  color: var(--acct-green-deep);
}

.acct-notif-neutral .acct-notif-ic {
  background: var(--acct-surface-2);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-notif-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.acct-notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  line-height: 1.3;
}

.acct-notif-sub {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  margin-top: 1px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.acct-notif-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  padding: 7px 12px;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.16s ease, box-shadow 0.18s ease;
}

.acct-notif-action:hover {
  color: var(--acct-ink);
  background: var(--acct-surface-2);
}

.acct-notif-action:active {
  transform: translateY(1px);
}

.acct-notif-action-solid {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.2);
}

.acct-notif-action-solid:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Showcase tile states: lost (amber) + unactivated (greyed / locked) ─────*/
.acct-tagtile-flag {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.acct-tagtile-flag .acct-ic {
  width: 12px;
  height: 12px;
}

.acct-tagtile-flag-lost {
  background: rgba(138, 90, 18, 0.92);
  color: #fff;
}

.acct-tagtile-flag-inactive {
  background: rgba(22, 24, 26, 0.72);
  color: #fff;
  left: auto;
  right: 9px;
}

/* state is shown by a soft, diffused colour glow behind the frame (not a sharp
   ring) + the chip below — calm, on-brand, no corner pill. */
.acct-tagtile.is-lost .acct-tagtile-frame {
  box-shadow: inset 0 0 0 1px var(--acct-line), 0 4px 24px -2px rgba(201, 138, 43, 0.34);
}

.acct-tagtile.is-lost:hover .acct-tagtile-frame {
  box-shadow: inset 0 0 0 1px rgba(201, 138, 43, 0.32), 0 12px 32px -4px rgba(201, 138, 43, 0.46);
  transform: translateY(-3px);
}

.acct-tagtile.is-lost .acct-tagtile-name {
  color: var(--acct-amber-text);
}

.acct-tagtile-frame-inactive {
  box-shadow: inset 0 0 0 1px var(--acct-line), 0 4px 24px -2px rgba(201, 138, 43, 0.26);
}

.acct-tagtile-frame-inactive .acct-tagtile-img {
  filter: grayscale(1) opacity(0.5);
}

.acct-tagtile-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--acct-ink-soft);
  box-shadow: 0 3px 12px -3px rgba(16, 24, 26, 0.4);
}

.acct-tagtile.is-inactive .acct-tagtile-name {
  color: var(--acct-ink-soft);
}

.acct-tagtile.is-inactive:hover .acct-tagtile-frame-inactive {
  box-shadow: inset 0 0 0 1px rgba(201, 138, 43, 0.38), 0 12px 32px -4px rgba(201, 138, 43, 0.42);
  transform: translateY(-3px);
}

.acct-tagtile.is-inactive:hover .acct-tagtile-img {
  filter: grayscale(0.4) opacity(0.7);
}

@media (prefers-reduced-motion: reduce) {
  .acct-notif-action-solid:hover {
    transform: none;
  }
}

/* returning (found, on its way) tile state — calm diffused blue glow */
.acct-tagtile.is-returning .acct-tagtile-frame {
  box-shadow: inset 0 0 0 1px var(--acct-line), 0 4px 24px -2px rgba(78, 169, 216, 0.42);
}

.acct-tagtile.is-returning:hover .acct-tagtile-frame {
  box-shadow: inset 0 0 0 1px rgba(78, 169, 216, 0.4), 0 12px 32px -4px rgba(42, 123, 174, 0.52);
  transform: translateY(-3px);
}

.acct-tagtile.is-returning .acct-tagtile-name {
  color: var(--acct-blue-text);
}

/* ── Incoming-return highlight card (top of the rail) ───────────────────────*/
.acct-return-card {
  display: block;
  text-decoration: none;
  background: linear-gradient(160deg, #E4F1F9 0%, #EFF7FC 68%, #F5FAFD 100%);
  border-radius: 16px;
  padding: 15px 16px 13px;
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.18);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.acct-return-card:hover {
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.34), 0 16px 30px -18px rgba(42, 123, 174, 0.45);
  transform: translateY(-2px);
}

.acct-return-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-return-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: none;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.18);
  display: grid;
  place-items: center;
}

.acct-return-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-return-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.acct-return-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acct-blue-text);
}

.acct-return-eyebrow .acct-ic {
  width: 12px;
  height: 12px;
}

.acct-return-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: var(--acct-ink);
  margin-top: 2px;
}

.acct-return-where {
  font-size: 11.5px;
  color: var(--acct-ink-soft);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-return-track {
  display: flex;
  align-items: flex-start;
  margin: 14px 4px 2px;
}

.acct-return-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 0;
}

.acct-return-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(42, 123, 174, 0.3);
  z-index: 1;
}

.acct-return-line {
  position: absolute;
  top: 5px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: rgba(42, 123, 174, 0.22);
}

.acct-return-step[data-state="done"] .acct-return-dot {
  background: var(--acct-blue-deep);
  box-shadow: none;
}

.acct-return-step[data-state="done"] .acct-return-line {
  background: var(--acct-blue-deep);
}

.acct-return-step[data-state="current"] .acct-return-dot {
  background: var(--acct-blue-deep);
  box-shadow: 0 0 0 4px rgba(78, 169, 216, 0.22);
}

.acct-return-label {
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--acct-ink-muted);
}

.acct-return-step[data-state="current"] .acct-return-label {
  color: var(--acct-blue-text);
  font-weight: 600;
}

.acct-return-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(42, 123, 174, 0.16);
}

.acct-return-eta {
  font-size: 12px;
  font-weight: 600;
  color: var(--acct-blue-text);
}

.acct-return-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
}

.acct-return-card:hover .acct-return-cta {
  color: var(--acct-ink);
}

@media (prefers-reduced-motion: reduce) {
  .acct-return-card:hover {
    transform: none;
  }
}

/* ============================================================================
   FLOW HARDENING — make the activate / found / report-lost / sign-in wizards
   read tighter, crisper and more serious (matching the dashboard). Overrides
   the shared .flow-* base + compacts the inline spacing in the flow bodies.
   ============================================================================ */
/* compact the intro + the two stacked cards (inline padding/margins live in the
   shared flow bodies; override with !important so every flow tightens at once) */
.flow-body>.acct-rise:first-child {
  margin-bottom: 14px !important;
}

.flow-body .flow-body-title {
  font-size: clamp(21px, 3vw, 27px) !important;
  letter-spacing: -0.035em;
}

.flow-body [data-flow-rail-wrap] {
  padding: 12px 15px !important;
  margin-bottom: 12px !important;
  border-radius: 12px;
}

.flow-body [data-flow-card]>.acct-card-body {
  padding: clamp(17px, 2.3vw, 23px) !important;
}

.flow-body .flow-step>h2,
.flow-body .flow-step>h3 {
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

/* ── Modal = ONE flush surface ─────────────────────────────────────────────
   In the dialog, the dialog IS the card. Flatten the inner .acct-card panels
   (progress rail · step card · success) so the wizard reads as sections of a
   single white surface — not cards-inside-a-card with doubled padding and a
   floating "Your recovery tag details" panel. The dialog goes white (one
   surface), the rail keeps only a hairline divider, and the step/success
   bodies drop their inset so the dialog's own padding is the single margin.
   Scoped to .acct-modal so the standalone activate / found / sign-in PAGES
   keep their real cards on the bare page. Selectable type/option cards stay
   (they're inputs, not nesting). */
.acct-modal-dialog {
  background: var(--acct-surface);
}

.acct-modal-scroll {
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px) clamp(16px, 2vw, 20px);
}

.acct-modal-x {
  background: var(--acct-surface-2);
}

.acct-modal .flow-body [data-flow-rail-wrap] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 16px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--acct-line) !important;
}

.acct-modal .flow-body [data-flow-card],
.acct-modal .flow-body [data-flow-success] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.acct-modal .flow-body [data-flow-card]>.acct-card-body,
.acct-modal .flow-body [data-flow-success]>.acct-card-body {
  padding: 0 !important;
}

/* crisper, tighter inputs */
.flow-input {
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14.5px;
}

.flow-input-lg {
  border-radius: 12px;
  padding: 15px 14px;
  letter-spacing: 0.05em;
}

.flow-label {
  font-size: 12.5px;
}

/* option rows: tighter, crisper hairline, no playful lift; webp product thumb
   support (image fills the icon chip) */
.flow-option {
  padding: 10px 12px;
  border-radius: 11px;
  gap: 11px;
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

.flow-option:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.42);
  background: var(--acct-surface-2);
  transform: none;
}

.flow-option-icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
}

.flow-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flow-option[data-selected="true"] .flow-option-icon {
  background: #fff;
}

/* progress rail dots: smaller + crisper */
.flow-rail-dot {
  width: 25px;
  height: 25px;
  font-size: 11px;
}

/* upload zone: tighter */
.flow-upload {
  padding: 20px 16px;
  border-radius: 12px;
}

/* selection = clean ink (no green); the finder flow keeps its blue accent */
.flow-option[data-selected="true"] {
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 2px var(--acct-ink);
}

.flow-option[data-selected="true"] .flow-option-icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-option[data-selected="true"] .flow-option-check {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: none;
}

/* ── activate type picker: 2-col image cards (reuses .flow-option base) ───── */
/* item-type grid: 2-up on phones, 4-up once there's room (was a hardcoded inline
   repeat(4) that cramped to 4 columns at 390px). */
.flow-typecards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 480px) {
  .flow-typecards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.flow-typecards .flow-option {
  padding: 10px 10px;
  gap: 9px;
}

.flow-typecards .flow-option-icon {
  width: 34px;
  height: 34px;
}

.flow-typecards .flow-option>span:not(.flow-option-icon):not(.flow-option-check) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.15;
}

.flow-typecards .flow-option-check {
  width: 18px;
  height: 18px;
}

/* ── added-tags list (multi-tag activation: "add one, build a list") ──────── */
.flow-taglist {
  margin-top: 16px;
}

.flow-taglist-head {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--acct-ink-muted);
  margin: 0 0 8px;
}

.flow-tagchip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  margin-top: 8px;
}

.flow-tagchip:first-of-type {
  margin-top: 0;
}

.flow-tagchip-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  color: var(--acct-ink-soft);
}

.flow-tagchip-icon svg {
  width: 18px;
  height: 18px;
}

.flow-tagchip-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.flow-tagchip-id {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.flow-tagchip-type {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-tagchip-x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--acct-ink-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.flow-tagchip-x:hover {
  background: rgba(16, 24, 26, 0.07);
  color: var(--acct-ink);
}

.flow-addtag {
  gap: 7px;
}

/* ── "?" where-is-my-ID helper (native <details>, no JS) ──────────────────── */
.flow-idhelp {
  margin-top: 10px;
}

.flow-idhelp>summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink-soft);
  user-select: none;
}

.flow-idhelp>summary::-webkit-details-marker {
  display: none;
}

.flow-idhelp>summary:hover {
  color: var(--acct-ink);
}

.flow-idhelp-q {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2);
}

.flow-idhelp[open]>summary {
  margin-bottom: 12px;
}

.flow-idhelp[open]>summary .flow-idhelp-q {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: none;
}

.flow-idhelp-panel {
  padding: 14px;
  border-radius: 12px;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* ── inline "?" field helper — the "?" sits at the END of the field's label row
   and opens a popover (no separate help line breaking the form flow) ───────── */
/* label text + "?" packed together: the "?" sits at the END OF THE LABEL TEXT
   (not floated to the field edge) and carries a solid black fill so it's easy
   to spot. The popover anchors to the label row so it stays inside the field. */
.flow-labelrow {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
}

.flow-labelrow .flow-label {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.flow-qhelp {
  flex: none;
  line-height: 0;
}

.flow-qhelp>summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--acct-ink);
  color: #fff;
  transition: background-color 0.15s ease, transform 0.12s ease;
}

.flow-qhelp>summary::-webkit-details-marker {
  display: none;
}

/* expand the tap target to ~44px without growing the visual 18px dot */
.flow-qhelp>summary::after {
  content: "";
  position: absolute;
  inset: -13px;
}

.flow-qhelp>summary:hover {
  background: #000;
  transform: translateY(-1px);
}

.flow-qhelp[open]>summary {
  background: #000;
}

.flow-qhelp-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 14px;
  border-radius: 13px;
  background: #fff;
  line-height: 1.45;
  /* reset the line-height:0 the summary needs (it was
                         collapsing the popover's wrapped text onto itself) */
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.12), 0 18px 40px -18px rgba(16, 24, 26, 0.4), inset 0 0 0 1px var(--acct-line);
  text-align: left;
}

/* ── found flow: toll-free callout (allowed only in this flow) ────────────── */
.flow-tollfree {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--acct-blue-tint, #E4F1F9);
  box-shadow: inset 0 0 0 1px rgba(42, 123, 174, 0.18);
}

.flow-tollfree-icon {
  flex: none;
  color: var(--acct-blue-deep, #2A7BAE);
  display: inline-flex;
}

.flow-tollfree-num {
  font-weight: 700;
  color: var(--acct-blue-text, #2A7BAE);
  white-space: nowrap;
  text-decoration: none;
}

.flow-tollfree-num:hover {
  text-decoration: underline;
}

/* quiet "prefer to call" footnote — sits BELOW the form action, not between
   fields, so it never breaks the reading flow (employer feedback). */
.flow-tollfree-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acct-ink-muted);
  text-align: center;
}

.flow-tollfree-foot .flow-tollfree-icon {
  color: var(--acct-blue-deep, #2A7BAE);
}

/* textareas inside the flows */
.flow-textarea {
  min-height: 58px;
  resize: vertical;
  line-height: 1.4;
}

/* ── found success: $10 coupon (unactivated result) ──────────────────────── */
.flow-coupon {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  background: var(--acct-green-tint, #EEF6DD);
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.25);
}

.flow-coupon-code {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--acct-green-text);
  padding: 2px 8px;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.3);
}

/* ── found success: product showcase ─────────────────────────────────────── */
.flow-shop {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--acct-line, rgba(16, 24, 26, 0.09));
}

.flow-shop-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.flow-shop-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 72px;
}

.flow-shop-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-shop-item span {
  font-size: 11.5px;
  color: var(--acct-ink-soft);
}

/* ── header actions: keep the 3 buttons (found / add / account) one size ─────
   fixed height + centred content so different inner icon sizes don't change it */
.acct-header-cta,
.acct-acctbtn {
  height: 34px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ── Account header CTAs get the SAME 3D "raised lip" as the homepage hero/nav
   CTAs (.atlas-cta-3d): a solid coloured bottom lip (--edge) + ambient glow
   (--glow) + a top sheen; lifts on hover, presses in on click. Per-button colours
   mirror the homepage Activate (green) and Log in (dark) pills. ──────────────── */
.acct-btn-primary.acct-header-cta {
  --edge: #86A63E;
  --glow: rgba(180, 212, 101, 0.5);
}

.acct-btn-blue.acct-header-cta {
  --edge: #2E7BA6;
  --glow: rgba(78, 168, 218, 0.5);
}

.acct-acctbtn {
  --edge: #000000;
  --glow: rgba(16, 24, 40, 0.45);
}

.acct-header-cta,
.acct-acctbtn {
  box-shadow: 0 5px 0 0 var(--edge), 0 10px 18px -6px var(--glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background-color 0.2s ease, color 0.2s ease;
}

.acct-header-cta:hover,
.acct-acctbtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 7px 0 0 var(--edge), 0 16px 26px -8px var(--glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
}

.acct-header-cta:active,
.acct-acctbtn:active {
  transform: translateY(3px);
  filter: brightness(0.98);
  box-shadow: 0 2px 0 0 var(--edge), 0 4px 10px -6px var(--glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
}

/* keep the account pill DARK on hover (don't invert to white) so the lip reads */
.acct-acctbtn:hover {
  background: var(--acct-ink);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {

  .acct-header-cta,
  .acct-acctbtn {
    transition: none;
  }

  .acct-header-cta:hover,
  .acct-acctbtn:hover,
  .acct-header-cta:active,
  .acct-acctbtn:active {
    transform: none;
  }
}

/* ── success cards: tighter + a crisp ink badge (matches the harder style) ─── */
.flow-body [data-flow-success]>.acct-card-body {
  padding: clamp(22px, 3vw, 32px) !important;
}

.flow-body [data-flow-success] .acct-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: var(--acct-ink) !important;
  color: #fff !important;
  box-shadow: none;
}

.flow-body [data-flow-success] .acct-avatar svg {
  width: 26px;
  height: 26px;
}

.flow-body [data-flow-success] h3 {
  font-size: 21px !important;
  margin-top: 14px !important;
}

/* ── activate type picker: compact image-forward tiles (shorter, professional)
   — 2 cols on phones, 4 across once there's room (the wider modal) ─────────── */
.flow-typegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 560px) {
  .flow-typegrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.flow-typetile {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
  text-align: center;
  position: relative;
}

.flow-typetile-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-typetile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flow-typetile-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.flow-typetile .flow-option-check {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  width: 20px;
  height: 20px;
}

/* ============================================================================
   SIDE PANEL — a reusable component surface that opens as a SEPARATE block to
   the right of the dashboard, INDEPENDENT of it (opening/closing one never moves
   or closes the other; each has its own back/close — no scrim). It's the SAME
   design system as the overview (#F4F5F7 paper, white .acct-card blocks, shared
   type + chips). Geometry: .acct-stage is a flex row. When the panel opens, the
   dashboard DROPS its right rail — the panel becomes the right column — so the
   main content keeps its exact 3-col layout (never condenses) while shedding the
   width the panel needs. The two then read as two side-by-side panels with a
   gap, and the whole pair stays centred inside the (centred) container, so the
   left margin == the right margin. Sticky + viewport-capped. Disabled <1200px.
   ============================================================================ */
.acct-stage {
  --insp-w: clamp(330px, 25.5vw, 392px);
  --insp-gap: clamp(22px, 2.2vw, 40px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

/* the dashboard keeps its FULL size (flex-basis 100%, never shrinks). When the
   panel opens it doesn't condense — justify-content:center simply re-centres the
   wider [dashboard + gap + panel] pair, so the dashboard slides left and the two
   are balanced: left margin == right margin (a positive gap on a wide screen, an
   equal bleed on a narrow one). */
.acct-stage>.acct-main {
  flex: 0 0 100%;
  min-width: 0;
}

#atlas-root.is-inspecting {
  overflow-x: clip;
}

/* TWO panels can't flank a full-width main — so when BOTH are open the main
   gives up width (shrinks to fit between them) for a true three-column layout;
   the panels also slim down a touch so the split stays balanced. One panel keeps
   the approved full-size slide. */
#atlas-root.is-inspecting-both .acct-stage {
  --insp-w: clamp(290px, 18vw, 342px);
  --insp-gap: clamp(18px, 1.7vw, 30px);
}

#atlas-root.is-inspecting-both .acct-stage>.acct-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Up to TWO side panels can dock at once — one left, one right — flanking the
   centred main. Each is the same width/chrome; opening one never moves or closes
   the other. justify-content:center on the stage keeps the open set balanced
   (left margin == right margin). Driven per-element by data-side + data-open. */
.acct-inspector {
  flex: 0 0 0px;
  align-self: flex-start;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  position: sticky;
  top: clamp(82px, 10vh, 108px);
  background: #F4F5F7;
  border-radius: clamp(20px, 1.8vw, 30px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(20, 24, 33, 0.04),
    0 38px 72px -40px rgba(20, 24, 33, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: flex-basis 0.5s cubic-bezier(0.5, 0, 0, 1),
    margin 0.5s cubic-bezier(0.5, 0, 0, 1),
    opacity 0.34s ease, transform 0.5s cubic-bezier(0.5, 0, 0, 1);
}

.acct-inspector[data-side="right"] {
  transform: translateX(20px);
}

.acct-inspector[data-side="left"] {
  transform: translateX(-20px);
}

.acct-inspector[data-open="true"] {
  flex-basis: var(--insp-w);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.acct-inspector[data-side="right"][data-open="true"] {
  margin-left: var(--insp-gap);
}

.acct-inspector[data-side="left"][data-open="true"] {
  margin-right: var(--insp-gap);
}

#atlas-root.is-inspecting {
  overflow-x: clip;
}

@media (max-width: 1199px) {
  .acct-inspector {
    display: none;
  }

  #atlas-root.is-inspecting {
    overflow-x: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-inspector {
    transition: flex-basis 0.3s ease, margin 0.3s ease, opacity 0.2s ease;
    transform: none;
  }
}

/* ── panel chrome (shared by every side-panel view) ────────────────────────*/
/* the panel sizes to its content and only caps (then scrolls inside) when the
   content would run past the viewport — so few orders = a short panel, many
   orders = a capped, cleanly-scrollable one. */
.acct-insp-inner {
  width: var(--insp-w);
  max-height: calc(100vh - clamp(104px, 13vh, 140px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(13px, 1.2vw, 17px);
}

.acct-insp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 12px;
}

.acct-insp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acct-ink-muted);
}

.acct-insp-eyebrow svg {
  color: var(--acct-ink-soft);
}

.acct-insp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.acct-insp-back:hover .acct-insp-eyebrow {
  color: var(--acct-ink-soft);
}

.acct-insp-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acct-ink-soft);
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: color 0.18s ease, box-shadow 0.18s ease;
}

.acct-insp-close:hover {
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-insp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 0.9vw, 13px);
  padding: 2px;
  margin: -2px;
  scrollbar-width: thin;
}

.acct-insp-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 2px 2px;
}

/* a white card on the grey surface — the overview's .acct-card vocabulary */
.acct-insp-card {
  background: var(--acct-surface);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--acct-line), var(--acct-shadow);
  padding: 15px 16px;
}

.acct-insp-card-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* product header (thumb + name) used across return / order / tag views */
.acct-insp-prod {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acct-insp-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  display: grid;
  place-items: center;
  color: var(--acct-ink-muted);
}

.acct-insp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-insp-prodmeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.acct-insp-prodname {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 16px;
  color: var(--acct-ink);
  line-height: 1.15;
}

.acct-insp-prodsub {
  font-size: 12px;
  color: var(--acct-ink-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ── Tag side panel (per-tag detail inside the sliding inspector) ───────────
   image at top → one facts card (with the editable Description + Notes sitting
   between Activated and Status) → finder reward → a primary action in the foot. */
.acct-tagpanel-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--acct-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-tagpanel-media {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acct-tagpanel-frame {
  width: 100%;
  aspect-ratio: 5 / 4;
}

/* the image IS the upload control: click to pick a file, a persistent camera
   badge hints it's editable, and a full hover/focus overlay says "Upload image". */
.acct-tagpanel-photo {
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.acct-tagpanel-photo:focus-visible {
  outline: none;
}

.acct-tagpanel-photo-hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(16, 24, 26, 0.46);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.acct-tagpanel-photo:hover .acct-tagpanel-photo-hint,
.acct-tagpanel-photo:focus-visible .acct-tagpanel-photo-hint {
  opacity: 1;
}

.acct-tagpanel-photo-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  color: var(--acct-ink-soft);
  box-shadow: 0 2px 8px -2px rgba(16, 24, 26, 0.34), inset 0 0 0 1px var(--acct-line);
  transition: opacity 0.18s ease;
}

.acct-tagpanel-photo:hover .acct-tagpanel-photo-badge,
.acct-tagpanel-photo:focus-visible .acct-tagpanel-photo-badge {
  opacity: 0;
}

/* facts: label-left / value-right rows split by hairlines (the reward + status
   chip sit inline on the right of their rows) */
.acct-tagpanel-facts {
  padding: 2px 16px;
}

.acct-tagpanel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 9px 0;
}

.acct-tagpanel-row+.acct-tagpanel-row,
.acct-tagpanel-edit+.acct-tagpanel-row {
  box-shadow: inset 0 1px 0 var(--acct-line);
}

/* the muted label is the plain leading span; a status .acct-chip keeps its own
   semantic colour (else .acct-tagpanel-row > span out-specifies .acct-chip-blue
   and drops the chip text to muted grey — 4.4:1, fails AA on the blue tint). */
.acct-tagpanel-row>span:not(.acct-chip) {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  flex: none;
}

.acct-tagpanel-row>b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
  text-align: right;
  min-width: 0;
}

.acct-tagpanel-row-status {
  padding-top: 12px;
}

.acct-tagpanel-edit {
  padding: 13px 0 14px;
  box-shadow: inset 0 1px 0 var(--acct-line);
}

.acct-tagpanel-edit .flow-label {
  display: block;
  margin-bottom: 5px;
}

.acct-tagpanel-edit .acct-detail-note {
  min-height: 50px;
}

/* phones: the inspector is hidden by default (<1200px) — promote the TAG panel to
   a full-screen sheet so the per-tag view still works on mobile. */
@media (max-width: 1199px) {
  .acct-inspector[data-acct-panelid="tag"][data-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0 !important;
    border-radius: 0;
    flex-basis: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow-y: auto;
    background: #F4F5F7;
  }

  .acct-inspector[data-acct-panelid="tag"][data-open="true"] .acct-insp-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    max-height: none;
    min-height: 100%;
    padding: clamp(16px, 5vw, 24px);
  }
}

/* ── Messages chat (inside the side panel) — bubbles + rich embeds + composer,
   in the same calm, hairlined paper vocabulary as the rest of the surface ────*/
.acct-msg-inner {
  padding-bottom: clamp(10px, 1vw, 14px);
}

/* scope switch: All messages <-> this tag */
.acct-chat-scope {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 2px 11px;
  background: var(--acct-surface-2);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-chat-seg {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink-soft);
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.acct-chat-seg:hover {
  color: var(--acct-ink);
}

.acct-chat-seg[data-active="true"] {
  background: #fff;
  color: var(--acct-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.08), inset 0 0 0 1px var(--acct-line);
}

.acct-chat-body {
  padding: 2px 4px 0 !important;
  gap: 0 !important;
}

.acct-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 2px 0 6px;
}

.acct-chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.acct-chat-msg[data-from="you"] {
  flex-direction: row-reverse;
}

.acct-chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #4EA9D8, #6E9A2E);
  box-shadow: 0 4px 10px -6px rgba(42, 123, 174, 0.6);
}

.acct-chat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 85%;
}

.acct-chat-msg[data-from="you"] .acct-chat-col {
  align-items: flex-end;
}

.acct-chat-bubble {
  font-size: 13px;
  line-height: 1.5;
  color: var(--acct-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  padding: 9px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 5px;
}

.acct-chat-msg[data-from="you"] .acct-chat-bubble {
  background: var(--acct-ink);
  color: #fff;
  box-shadow: none;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
}

.acct-chat-time {
  font-size: 10.5px;
  color: var(--acct-ink-muted);
  padding: 0 4px;
}

/* embeds (full width within the message column) */
.acct-chat-embed {
  display: block;
  width: 100%;
}

.acct-chat-embed-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  border-radius: 13px;
  padding: 8px;
  transition: box-shadow .16s ease, transform .18s ease;
}

.acct-chat-embed-tag:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2), 0 12px 24px -16px rgba(16, 24, 26, 0.4);
  transform: translateY(-1px);
}

.acct-chat-embed-tag .acct-chat-embed-thumb {
  width: 46px;
  height: 46px;
  aspect-ratio: auto;
  border-radius: 10px;
  flex: none;
}

.acct-chat-embed-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.acct-chat-embed-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-chat-embed-go {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--acct-ink-muted);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-chat-embed-tag:hover .acct-chat-embed-go {
  color: var(--acct-ink);
}

.acct-chat-map {
  height: 122px;
  border-radius: 13px;
}

.acct-chat-map-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-chat-consent {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  border-radius: 14px;
  padding: 13px;
}

.acct-chat-consent-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.acct-chat-consent-ic {
  color: var(--acct-green-deep);
  flex: none;
  margin-top: 1px;
}

.acct-chat-consent-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  line-height: 1.4;
}

.acct-chat-consent-note {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  margin: 6px 0 0 23px;
}

.acct-chat-consent-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.acct-chat-consent-actions .acct-btn {
  height: 34px;
  flex: 1 1 0;
  min-width: 0;
  font-size: 12.5px;
  padding: 0 10px;
}

.acct-chat-consent-done {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--acct-green-text);
  font-weight: 500;
}

.acct-chat-consent-done svg {
  color: var(--acct-green-deep);
  flex: none;
}

.acct-chat-consent-dismissed {
  color: var(--acct-ink-muted);
}

.acct-chat-consent-dismissed svg {
  color: var(--acct-ink-muted);
}

.acct-chat-embed-ship {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  border-radius: 14px;
  padding: 16px 12px 12px;
}

.acct-chat-embed-ship .acct-timeline {
  margin-top: 0;
}

.acct-chat-embed-reward {
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--acct-green-tint);
  border-radius: 13px;
  padding: 11px 13px;
}

.acct-chat-reward-ic {
  color: var(--acct-green-deep);
  flex: none;
}

.acct-chat-embed-reward b {
  display: block;
  font-size: 13px;
  color: var(--acct-green-text);
}

.acct-chat-embed-reward span {
  display: block;
  font-size: 11.5px;
  color: var(--acct-ink-soft);
  margin-top: 1px;
  line-height: 1.4;
}

.acct-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.acct-chat-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--acct-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  border-radius: 9px;
  padding: 7px 11px;
  transition: box-shadow .16s ease;
}

.acct-chat-action:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
}

.acct-chat-action svg {
  color: var(--acct-ink-muted);
}

/* composer */
.acct-chat-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 11px 2px 2px;
}

.acct-chat-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: 11px;
  padding: 0 13px;
  font: inherit;
  font-size: 13px;
  color: var(--acct-ink);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  transition: box-shadow .16s ease;
}

.acct-chat-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.6px var(--acct-blue);
}

.acct-chat-input::placeholder {
  color: var(--acct-ink-muted);
}

.acct-chat-send {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  cursor: pointer;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--acct-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}

.acct-chat-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px rgba(16, 24, 26, 0.5);
}

/* empty state */
.acct-chat-empty {
  text-align: center;
  padding: 34px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.acct-chat-empty-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--acct-ink-muted);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  margin-bottom: 6px;
}

.acct-chat-empty-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-chat-empty-s {
  font-size: 12.5px;
  color: var(--acct-ink-muted);
  max-width: 30ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {

  .acct-chat-embed-tag:hover,
  .acct-chat-send:hover {
    transform: none;
  }
}

/* ── Messages RAIL — overlays the main panel's right rail column (the Recent
   activity / Protection breakdown region), same blended paper vocabulary, shown
   when the Messages toggle is on. It cleanly covers the natural rail; the central
   divider hairline stays, so it reads as "the rail became Messages". ──────────*/
.acct-ov2 .acct-msgrail {
  position: absolute;
  top: clamp(18px, 2vw, 32px);
  left: clamp(18px, 2vw, 32px);
  bottom: clamp(18px, 2vw, 32px);
  width: var(--ov-rail);
  display: flex;
  flex-direction: column;
  background: #F4F5F7;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.34, 0.04, 0.12, 1), visibility 0.36s;
}

.acct-ov2.is-msgrail .acct-msgrail {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ── Detail RAIL — the per-tag detail (and the incoming-return tracking) shown in
   the overview's right-rail column. Slides in/out (transform) and keeps the grid's
   centre divider visible. Modeled on the messages rail. ─────────────────────── */
.acct-ov2 .acct-detailrail {
  position: absolute;
  top: clamp(18px, 2vw, 32px);
  left: clamp(18px, 2vw, 32px);
  bottom: clamp(18px, 2vw, 32px);
  width: var(--ov-rail);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #F4F5F7;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-22px);
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.34, 0.04, 0.12, 1), visibility 0.42s;
}

.acct-ov2.is-detailrail .acct-detailrail {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* hide only the natural rail content behind it — the grid's centre divider STAYS */
.acct-ov2.is-detailrail .acct-ov2-rail,
.acct-ov2.is-detailrail .acct-ov2-railhead:not(.acct-msgrail-head) {
  opacity: 0;
  visibility: hidden;
}

/* Protected Items view: when a tag opens in the rail, reflow the list to the left
   so the rail sits cleanly on the right (no covered content) instead of a docked panel */
.acct-ov2.is-detailrail [data-acct-view="tags"] {
  padding-left: calc(var(--ov-rail) + clamp(40px, 4vw, 60px));
  transition: padding-left 0.42s cubic-bezier(0.34, 0.04, 0.12, 1);
}

@media (prefers-reduced-motion: reduce) {
  .acct-ov2.is-detailrail [data-acct-view="tags"] {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-ov2 .acct-detailrail {
    transition: opacity 0.16s ease, visibility 0.16s;
    transform: none;
  }
}

/* ── Tag rail content — compact + blended (no standout white cards): a clean image,
   hairline fact rows, paper-level fields + reward, sized to fit without scrolling.*/
.acct-railtag {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: clamp(8px, 1vw, 12px);
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--acct-line-2) transparent;
}

.acct-railtag::-webkit-scrollbar {
  width: 9px;
}

.acct-railtag::-webkit-scrollbar-thumb {
  background: var(--acct-line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.acct-railtag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
}

.acct-railtag-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--acct-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-railtag-close {
  width: 32px;
  height: 32px;
  flex: none;
}

.acct-railtag-photo {
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 14px;
}

.acct-railtag-facts {
  display: flex;
  flex-direction: column;
  flex: none;
}

.acct-railtag-facts>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 7px 2px;
}

.acct-railtag-facts>div+div {
  box-shadow: inset 0 1px 0 var(--acct-line);
}

.acct-railtag-facts dt {
  font-size: 12px;
  color: var(--acct-ink-muted);
  flex: none;
}

.acct-railtag-facts dd {
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  text-align: right;
  min-width: 0;
}

.acct-railtag-fields {
  display: flex;
  flex-direction: column;
  flex: none;
}

.acct-railtag-fields .flow-label {
  display: block;
  margin: 0 0 4px;
}

.acct-railtag-fields .flow-label+.acct-railtag-ta {
  margin-bottom: 9px;
}

.acct-railtag-ta {
  width: 100%;
  resize: none;
  min-height: 42px;
  line-height: 1.45;
  padding: 8px 11px;
}

.acct-railtag-reward {
  flex: none;
}

.acct-railtag-rewardhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.acct-railtag-rewardlabel {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--acct-ink);
}

.acct-railtag-rewardgrid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px;
}

.acct-railtag-rewardgrid .acct-reward-opt {
  padding: 9px 3px;
  font-size: 12.5px;
  border-radius: 9px;
}

.acct-railtag-action {
  flex: none;
  height: 40px;
  margin-top: 2px;
}

/* tracking rail: a route map, the item, a shipment facts grid + journey timeline */
.acct-railtrack-card {
  flex: none;
  background: var(--acct-blue-tint);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.acct-railtrack-prod {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

.acct-railtrack-prod .acct-insp-prodmeta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.acct-railtrack-prod .acct-insp-prodname {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--acct-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-railtrack-prod .acct-insp-prodsub {
  font-size: 12px;
  color: var(--acct-ink-muted);
}

.acct-railtrack-prod .acct-insp-chip {
  flex: none;
}

.acct-railtrack-timeline {
  flex: none;
  padding: 2px;
}

/* the fake route map */
.acct-trackmap {
  position: relative;
  width: 100%;
  height: 154px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--acct-line);
  background: #E9EEF0;
}

.acct-trackmap-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.acct-trackmap-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 12px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(14, 26, 30, 0.66) 0%, rgba(14, 26, 30, 0.28) 58%, transparent 100%);
}

.acct-trackmap-bar-l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-trackmap-bar-l svg {
  flex: none;
}

.acct-trackmap-bar-r {
  flex: none;
  font-weight: 500;
  opacity: 0.86;
}

@keyframes acctTrackPulse {
  0% {
    transform: scale(0.55);
    opacity: 0.55;
  }

  70%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.acct-trackmap-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: acctTrackPulse 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .acct-trackmap-pulse {
    animation: none;
    opacity: 0;
  }
}

/* shipment facts — flat, blended 2-up grid with hairline row dividers */
.acct-railtrack-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  flex: none;
}

.acct-railtrack-facts>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0;
  min-width: 0;
}

.acct-railtrack-facts>div:nth-child(n+3) {
  box-shadow: inset 0 1px 0 var(--acct-line);
}

.acct-railtrack-facts dt {
  font-size: 11px;
  color: var(--acct-ink-muted);
}

.acct-railtrack-facts dd {
  font-size: 13px;
  font-weight: 600;
  color: var(--acct-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-railtrack-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.45;
  color: var(--acct-green-text);
  background: var(--acct-green-tint);
  border-radius: 11px;
  padding: 10px 12px;
  flex: none;
}

.acct-railtrack-note svg {
  flex: none;
  margin-top: 1px;
  color: var(--acct-green-deep);
}

.acct-railtrack-note b {
  font-weight: 700;
}

/* The content behind (each view's OWN rail + its divider) CROSS-FADES out as the
   Messages rail slides in, and fades back in as it slides out — so toggling off
   glides rather than snapping. (Fade, not just visibility:hidden, which popped.)
   The views inset their rail by a scrollbar gutter, so opacity also keeps the
   offset edge from reading as a hard peek during the brief overlap. */
.acct-ov2-rail,
.acct-recov-rail,
.acct-vgrid-rail,
.acct-ov2-railhead:not(.acct-msgrail-head) {
  transition: opacity 0.3s ease, visibility 0.3s;
}

.acct-ov2.is-msgrail .acct-ov2-rail,
.acct-ov2.is-msgrail .acct-recov-rail,
.acct-ov2.is-msgrail .acct-vgrid-rail,
.acct-ov2.is-msgrail .acct-ov2-railhead:not(.acct-msgrail-head) {
  opacity: 0;
  visibility: hidden;
}

.acct-ov2-grid::before,
.acct-recov-grid::before,
.acct-vgrid::before {
  transition: opacity 0.3s ease;
}

.acct-ov2.is-msgrail .acct-ov2-grid::before,
.acct-ov2.is-msgrail .acct-recov-grid::before,
.acct-ov2.is-msgrail .acct-vgrid::before {
  opacity: 0;
}

/* the Messages rail carries its own divider, centred in the gap to its left */
.acct-ov2 .acct-msgrail::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(-1 * var(--ov-gap) / 2 - 0.5px);
  width: 1px;
  background: var(--acct-line);
  pointer-events: none;
}

.acct-msgrail-head {
  margin-bottom: 11px;
}

.acct-msgrail-close {
  width: 30px;
  height: 30px;
}

.acct-msgrail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--acct-line-2) transparent;
}

.acct-msgrail-body::-webkit-scrollbar {
  width: 11px;
}

.acct-msgrail-body::-webkit-scrollbar-track {
  background: transparent;
}

.acct-msgrail-body::-webkit-scrollbar-thumb {
  background: var(--acct-line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.acct-msgrail-body:hover::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 26, 0.28);
  background-clip: padding-box;
}

/* the full-width Tags grid (no natural rail) makes room for the Messages rail */
.acct-ov2.is-msgrail [data-acct-view="tags"] {
  padding-left: calc(clamp(18px, 2vw, 32px) + var(--ov-rail) + var(--ov-gap));
}

/* narrow: there's no rail column, so Messages becomes a full-width sheet that
   covers the panel content (the panel already stacks the rail under main here) */
@media (max-width: 1079px) {
  .acct-ov2 .acct-msgrail {
    left: clamp(18px, 2vw, 32px);
    right: clamp(18px, 2vw, 32px);
    width: auto;
  }

  .acct-ov2 .acct-msgrail::before {
    display: none;
  }

  .acct-ov2.is-msgrail [data-acct-view="tags"] {
    padding-left: clamp(18px, 2vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-ov2 .acct-msgrail {
    transition: opacity 0.16s ease, visibility 0.16s;
    transform: none;
  }

  .acct-ov2-rail,
  .acct-recov-rail,
  .acct-vgrid-rail,
  .acct-ov2-railhead:not(.acct-msgrail-head) {
    transition: opacity 0.16s ease, visibility 0.16s;
  }
}

.acct-insp-statusrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--acct-line);
}

.acct-insp-eta-v {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--acct-ink);
  font-variant-numeric: tabular-nums;
}

/* status chip (reused for both blue 'in transit' + green 'delivered' states) */
.acct-insp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.acct-insp-chip svg {
  flex: none;
}

.acct-insp-chip-blue {
  background: var(--acct-blue-tint);
  color: var(--acct-blue-text);
}

.acct-insp-chip-green {
  background: var(--acct-green-tint);
  color: var(--acct-green-text);
}

.acct-insp-chip-amber {
  background: var(--acct-amber-tint);
  color: var(--acct-amber-text);
}

.acct-insp-chip-neutral {
  background: var(--acct-surface-2);
  color: var(--acct-ink-soft);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

/* vertical timeline (fills the card height so the column reads full + deliberate) */
.acct-insp-cardlabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--acct-ink-muted);
  margin-bottom: 14px;
}

.acct-insp-timeline {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.acct-insp-step {
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
}

.acct-insp-step:last-child {
  flex: 0 0 auto;
}

.acct-insp-stepmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.acct-insp-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  flex: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--acct-line-2);
  margin-top: 1px;
}

.acct-insp-line {
  flex: 1 1 auto;
  width: 2px;
  background: var(--acct-line-2);
  margin: 4px 0;
  min-height: 20px;
}

.acct-insp-step[data-state="done"] .acct-insp-dot {
  background: var(--acct-blue-deep);
  box-shadow: none;
}

.acct-insp-step[data-state="done"] .acct-insp-line {
  background: var(--acct-blue-deep);
}

.acct-insp-step[data-state="current"] .acct-insp-dot {
  background: var(--acct-blue-deep);
  box-shadow: 0 0 0 4px rgba(78, 169, 216, 0.2);
}

.acct-insp-stepbody {
  padding-bottom: 14px;
  flex: 1;
  min-width: 0;
}

.acct-insp-step:last-child .acct-insp-stepbody {
  padding-bottom: 0;
}

.acct-insp-steptop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.acct-insp-steplabel {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acct-ink);
}

.acct-insp-step[data-state="todo"] .acct-insp-steplabel {
  color: var(--acct-ink-muted);
}

.acct-insp-steptime {
  font-size: 11.5px;
  color: var(--acct-ink-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.acct-insp-stepdesc {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  line-height: 1.5;
  margin-top: 3px;
}

.acct-insp-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--acct-green-tint);
  color: var(--acct-green-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.acct-insp-note svg {
  flex: none;
  margin-top: 1px;
  color: var(--acct-green-deep);
}

/* ── orders view: a short lead line + airy rows that blend into the paper
   (no card frame), split by hairlines and given room to breathe ───────────*/
.acct-insp-lead {
  font-size: 12.5px;
  color: var(--acct-ink-soft);
  padding: 2px 6px 4px;
}

.acct-insp-lead b {
  color: var(--acct-ink);
  font-weight: 700;
}

.acct-insp-orders {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}

.acct-order {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 16px 8px;
  border-radius: 12px;
  transition: background-color 0.16s ease;
}

.acct-order:not(:last-child) {
  box-shadow: inset 0 -1px 0 var(--acct-line);
}

.acct-order:hover {
  background: rgba(255, 255, 255, 0.6);
}

.acct-order-thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
  display: grid;
  place-items: center;
}

.acct-order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acct-order-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-order-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--acct-ink);
}

.acct-order-line {
  display: flex;
  align-items: center;
  gap: 9px;
}

.acct-order-price {
  font-size: 12px;
  color: var(--acct-ink-muted);
  font-variant-numeric: tabular-nums;
}

.acct-order-chev {
  flex: none;
  color: var(--acct-ink-muted);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, color 0.18s ease;
}

.acct-order:hover .acct-order-chev {
  color: var(--acct-ink-soft);
  transform: translateX(2px);
}

/* ============================================================================
   FLOW REFINEMENT — Mobbin-grade, less "bubbly" (Rayan, 2026-06-10)
   The activate / found wizards read big + cheap: a 720px-wide dialog, a giant
   CENTERED uppercase ID# pill, and product-photo chips in fat rounded tiles.
   Refs: Origin / Cohere (narrow focused modal), Airbnb / Stripe / Squarespace
   (monoline icons in flat hairline tiles, restrained selected state). Same
   content + same steps — purely a tighter, more editorial visual pass.
   Appended last so it order-wins the FLOW HARDENING typecard rules above.
   ========================================================================== */
/* ID# field: calm, left-aligned code input — not a centered uppercase pill. */
.flow-input-lg {
  font-size: 16.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-transform: none !important;
  padding: 13px 15px !important;
  border-radius: 10px !important;
}

.flow-input {
  border-radius: 10px;
}

/* Type picker: keep the employer-approved product webp thumbnails, but in a
   clean small chip inside flat hairline tiles (not the old fat bubbly chip),
   with a restrained ink selected ring. */
/* compact 4-up VERTICAL tiles (icon on top, label below, check in the corner) so
   the 8 item types take 2 rows instead of 4 — keeps the activate modal off-scroll. */
.flow-typecards .flow-option {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 9px 6px 7px;
  gap: 6px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-typecards .flow-option:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.30);
  background: var(--acct-surface-2);
  transform: none;
}

.flow-typecards .flow-option>span:not(.flow-option-icon):not(.flow-option-check) {
  flex: none;
  width: 100%;
  font-size: 12px;
  line-height: 1.15;
}

.flow-typecards .flow-option-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-typecards .flow-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flow-typecards .flow-option[data-selected="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 1.6px var(--acct-ink);
}

.flow-typecards .flow-option[data-selected="true"] .flow-option-icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.flow-typecards .flow-option-check {
  position: absolute;
  top: 5px;
  right: 5px;
  margin: 0;
  width: 15px;
  height: 15px;
}

/* Buttons: a touch crisper, less pill-y. */
.acct-btn-lg {
  border-radius: 10px;
  padding: 12px 20px;
}

/* ── Account header — graceful compression so the top bar NEVER forces a
   horizontal page scroll on small phones (it was overflowing < ~390px because
   logo + "Add a tag" + "My account" couldn't shrink). Drop the breadcrumb +
   its divider first; then collapse "Add a tag" to its icon on very small
   screens — the activation CTA stays reachable, just compact. ──────────────── */
@media (max-width: 639.98px) {

  .acct-crumb-div,
  [data-acct-crumb] {
    display: none !important;
  }
}

@media (max-width: 440px) {
  .acct-header-cta .acct-cta-label {
    display: none;
  }

  .acct-header-cta {
    padding-left: 11px;
    padding-right: 11px;
    gap: 0;
  }
}

/* Secondary header items (language + "Found something?") stay out of the tablet
   range — where logo + 4 controls + a vertical scrollbar tipped the bar into a
   few-px horizontal scroll — and return at desktop. inline-flex (not the flex of
   .acct-hide-below-lg) so they sit inline in the utility row. */
.acct-header-secondary {
  display: none !important;
}

@media (min-width: 1024px) {
  .acct-header-secondary {
    display: inline-flex !important;
  }
}

/* ============================================================================
   MOBILE / RESPONSIVE POLISH (≤1079px)  —  appended last so it WINS the cascade.
   ----------------------------------------------------------------------------
   The dashboard's SPA view system overlays every tab (Tags / Membership / Contact
   / Recoveries) absolutely at the OVERVIEW's height (the height-definer). On a
   wide screen all views are ~one panel tall and each scrolls internally, so that
   model is invisible. On a phone the overview is very tall (a long tag list), so
   the shorter overlay views inherited that height and left an IMMENSE empty band
   below their content — and forced a nested touch-scroll inside the page scroll.

   Below the desktop breakpoint we drop the overlay model: each TAB view (NOT the
   tag-detail sheet, which keeps its own absolute rail/sheet) flows in normal
   document flow at its own height, only the active one is shown, and the page
   scrolls as a whole — the mobile-native pattern the Mobbin references all use.
   ========================================================================== */
@media (max-width: 1079px) {

  /* tab views flow naturally; inactive ones collapse instead of overlaying */
  .acct-ov2[data-acct-views]>.acct-view.acct-view-overlay {
    position: static;
    inset: auto;
    transform: none;
    padding: 0;
    display: none;
  }

  .acct-ov2[data-acct-views]>.acct-view.acct-view-overlay[data-active="true"] {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* the overview view is the height-definer in flow — hide it only when inactive
     (when a tab is open) so the panel collapses to the active view's height */
  .acct-ov2[data-acct-views]>[data-acct-view="overview"][data-active="false"] {
    display: none;
  }

  /* inner scroll regions become normal flow — no scroll-within-scroll on touch */
  .acct-view.acct-view-overlay .acct-viewscroll {
    overflow: visible;
    min-height: 0;
  }

  /* the tag-detail rail has no rail column at this width — present it as a
     full-width sheet over the panel (mirrors the Messages rail handling) */
  .acct-ov2 .acct-detailrail {
    left: clamp(18px, 2vw, 32px);
    right: clamp(18px, 2vw, 32px);
    width: auto;
  }

  .acct-ov2.is-detailrail [data-acct-view="tags"] {
    padding-left: 0;
  }
}

/* ── Overview tag showcase → horizontal swipe rail on phones. The wrapping grid
   stacked all 8 tiles into one tall column (the overview ran ~5000px). A snap
   rail keeps the overview a glance: ~2 tiles + a peek of the next signal "swipe
   for more"; the full list still lives one tap away under Protected Items. ──── */
@media (max-width: 640px) {
  .acct-tagrow {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin: 0;
    padding: 4px 0 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .acct-tagrow::-webkit-scrollbar {
    display: none;
  }

  .acct-tagrow .acct-tagtile {
    width: 44%;
    min-width: 140px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* swipe is the affordance on touch — drop the chevrons (the peek of the next
     tile signals it). NB: the buttons carry data-ic, and [data-ic]{display:flex}
     out-specifies the older ≤640 hide rule — this descendant selector wins. */
  .acct-ov2-showcase-tools .acct-ov2-scrollbtn {
    display: none;
  }
}

/* ── Section-tab row: give the links a comfortable touch height on phones (they
   were 38px; ~44px is the touch-target floor) without changing their look. ──── */
@media (max-width: 1023px) {
  .acct-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── DEV PREVIEW panel — a reviewer aid (switch tier / seed). On phones the full
   panel crowds the bottom-left corner; compact it so it stays reachable but out
   of the way. Still fixed, still functional. ───────────────────────────────── */
@media (max-width: 560px) {
  .acct-dev {
    left: 10px;
    bottom: 10px;
    min-width: 0;
    padding: 8px 10px 9px;
    gap: 6px;
    border-radius: 12px;
    opacity: 0.92;
  }

  .acct-dev:hover,
  .acct-dev:focus-within {
    opacity: 1;
  }

  .acct-dev-title {
    font-size: 8.5px;
    letter-spacing: 0.12em;
  }

  .acct-dev-row {
    gap: 8px;
  }

  .acct-dev-segbtn {
    padding: 3px 7px;
    font-size: 10.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE ACCOUNT CHROME — phone-app shell (Rayan, 2026-06-17). Below 1024px the
   bordered panel is dropped (full-bleed, clean, centered content), the top
   horizontal-scrolling section tabs are hidden, and a fixed bottom tab bar
   carries the four primary sections like a native app. Desktop is untouched.
   ════════════════════════════════════════════════════════════════════════ */
.acct-bottombar {
  display: none;
}

.acct-bottombar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--acct-ink-muted);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}

.acct-bottombar-ic {
  display: inline-flex;
}

.acct-bottombar-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.acct-bottombar-item:active {
  transform: translateY(1px);
}

.acct-bottombar-item[data-active="true"] {
  color: var(--acct-ink);
  background: rgba(16, 24, 26, 0.06);
}

.acct-bottombar-item[data-active="true"] .acct-bottombar-ic {
  color: var(--acct-ink);
}

@media (max-width: 1023px) {

  /* fixed bottom tab bar — frosted, safe-area aware */
  .acct-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 248, 250, 0.9);
    -webkit-backdrop-filter: saturate(1.08) blur(16px);
    backdrop-filter: saturate(1.08) blur(16px);
    box-shadow: 0 -1px 0 var(--acct-line), 0 -14px 34px -24px rgba(16, 24, 26, 0.45);
  }

  /* drop the panel card → full-bleed clean content */
  .acct-panel,
  [data-acct-page="overview"] .acct-panel {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* hide the in-panel top tabs (the bottom bar takes over; this also hides the
     overview notifications bell that lived in the tab row) */
  .acct-tabs {
    display: none;
  }

  /* container: tighter side gutters, full width, and room for the fixed bar */
  [data-acct-page-root] .acct-container {
    max-width: 100%;
    padding-left: clamp(14px, 4.5vw, 22px);
    padding-right: clamp(14px, 4.5vw, 22px);
    padding-top: 10px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* the membership view scrolls inside .acct-viewscroll → clear the bar there too */
  .acct-mempage {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }

  /* keep the reviewer dev panel above the bar */
  .acct-dev {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* the page footer is a sibling of (not inside) the padded container, so the
     fixed bottom bar clips it at the very bottom of the scroll — give it its own
     clearance so the © line + links sit above the bar. */
  /* the footer's bottom clearance must NOT intercept taps on the fixed bar — keep
     its box above the bar with margin (not padding), and sit it below the bar in
     the stacking order. */
  .acct-app>footer {
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
    margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MEMBERSHIP UPGRADE CHECKOUT (modal slot "upgrade") — an order summary + a
   presentational payment form + a success screen. Tier metal on the summary and
   the confirm button. Driven by account.js prepUpgrade / finishUpgrade.
   ════════════════════════════════════════════════════════════════════════ */
.acct-upg {
  max-width: 460px;
  margin: 0 auto;
}

.acct-upg-head {
  text-align: center;
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

.acct-upg-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acct-ink-muted);
}

.acct-upg-title {
  margin: 7px 0 0;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--acct-ink);
}

.acct-upg-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--acct-ink-soft);
}

/* ── 2-COLUMN CHECKOUT — so the modal fits a 16:9 screen without scrolling:
   LEFT = plan + duration + order summary · RIGHT = payment. Collapses to one
   column on narrow widths (the phone sheet). ─────────────────────────────────── */
.acct-modal-upgrade .acct-modal-dialog {
  max-width: 480px;
}

.acct-modal-upgrade .acct-upg {
  max-width: 460px;
}

.acct-upg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

.acct-upg-cola,
.acct-upg-colb {
  min-width: 0;
}

.acct-upg-cola>.acct-upg-sec:first-child {
  margin-top: 0;
}

.acct-upg-colb .acct-upg-pay {
  margin-top: 0;
}

/* columns align at the top in 2-col */
@media (max-width: 720px) {
  .acct-modal-upgrade .acct-modal-dialog {
    max-width: 540px;
  }

  .acct-modal-upgrade .acct-upg {
    max-width: 460px;
  }

  .acct-upg-grid {
    grid-template-columns: 1fr;
  }
}

/* checkout step sections + their bold headers */
.acct-upg-sec {
  margin-top: clamp(11px, 1.4vw, 15px);
}

/* section labels match the "Select payment method" eyebrow style (uppercase, tracked) */
.acct-upg-seclabel {
  margin: 0 0 11px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--acct-ink-soft);
}

/* 1 · membership-type chooser (Silver / Gold) */
.acct-upg-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.acct-upg-type {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  border: 0;
  cursor: pointer;
  transition: box-shadow .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-upg-type:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.26);
}

.acct-upg-type.is-active {
  box-shadow: inset 0 0 0 2px var(--acct-ink);
  background: var(--acct-surface-2);
}

.acct-upg-type-radio,
.acct-upg-term-radio {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--acct-line-2);
  position: relative;
  transition: box-shadow .16s ease;
}

.acct-upg-type.is-active .acct-upg-type-radio,
.acct-upg-term.is-active .acct-upg-term-radio {
  box-shadow: inset 0 0 0 2px var(--acct-ink);
}

.acct-upg-type.is-active .acct-upg-type-radio::after,
.acct-upg-term.is-active .acct-upg-term-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--acct-ink);
}

.acct-upg-type-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.acct-upg-type-name {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12.5px;
}

.acct-upg-type[data-tier="Silver"] .acct-upg-type-name {
  color: #6B7787;
}

.acct-upg-type[data-tier="Gold"] .acct-upg-type-name {
  color: #B7902C;
}

.acct-upg-type-from {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--acct-ink-muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* 2 · duration chooser */
.acct-upg-terms {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-upg-term {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 13px;
  border-radius: 12px;
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  border: 0;
  cursor: pointer;
  transition: box-shadow .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-upg-term:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.26);
}

.acct-upg-term.is-active {
  box-shadow: inset 0 0 0 2px var(--acct-ink);
  background: var(--acct-surface-2);
}

.acct-upg-term-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--acct-ink);
}

.acct-upg-term-price {
  margin-left: auto;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--acct-ink);
}

.acct-upg-term-save {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--acct-green-text);
  background: var(--acct-green-tint);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(110, 154, 46, 0.26);
  white-space: nowrap;
}

/* order summary — tier-metal tinted card */
.acct-upg-summary {
  margin-top: clamp(11px, 1.4vw, 15px);
  border-radius: 16px;
  padding: clamp(12px, 1.5vw, 16px);
  background: var(--acct-surface-2);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-upg-summary[data-metal="silver"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, #FCFDFF 0%, #EAEEF3 60%, #DDE3EB 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(120, 135, 158, 0.22);
}

.acct-upg-summary[data-metal="gold"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, #FFF9E2 0%, #F6E6B2 60%, #EFD893 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(170, 130, 30, 0.26);
}

.acct-upg-seclabel-on-summary {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 32, 38, 0.6);
}

.acct-upg-sumrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.acct-upg-sumlabel {
  font-size: 13.5px;
  color: rgba(27, 32, 38, 0.78);
}

.acct-upg-sumval {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #1B2026;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.acct-upg-sumneg {
  color: var(--acct-green-deep);
}

.acct-upg-vcode {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(27, 32, 38, 0.58);
}

.acct-upg-sumtotal {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 32, 38, 0.16);
}

.acct-upg-sumtotal .acct-upg-sumlabel {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #1B2026;
}

.acct-upg-sumtotal .acct-upg-sumval {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* voucher row */
.acct-upg-voucher {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.acct-upg-voucher-input {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.94);
}

.acct-upg-voucher-apply {
  flex: none;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--acct-ink);
  color: #fff;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
}

.acct-upg-voucher-apply:hover {
  background: #000;
}

.acct-upg-voucher-msg {
  margin: 9px 0 0;
  font-size: 12px;
  font-weight: 600;
}

.acct-upg-voucher-msg.is-ok {
  color: var(--acct-green-text);
}

.acct-upg-voucher-msg.is-bad {
  color: #B4452F;
}

/* accepted-card brand marks (card pane) */
.acct-upg-cards {
  display: flex;
  gap: 7px;
  margin: 0 0 7px;
}

.acct-upg-cardbrand {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  padding: 4px 7px;
  border-radius: 5px;
  color: #fff;
  line-height: 1;
}

.acct-upg-cardbrand-visa {
  background: #1A1F71;
}

.acct-upg-cardbrand-mc {
  background: #C9431B;
}

.acct-upg-cardbrand-amex {
  background: #1F72CD;
}

.acct-upg-perks {
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(27, 32, 38, 0.12);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.acct-upg-perk {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: #20262E;
}

.acct-upg-perk svg {
  flex: none;
  color: var(--acct-green-deep);
}

/* payment form */
.acct-upg-pay {
  margin-top: clamp(18px, 2vw, 24px);
}

/* method chooser — Card (Stripe) vs PayPal */
.acct-upg-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 11px;
}

.acct-upg-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 12px;
  background: var(--acct-surface);
  color: var(--acct-ink);
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  border: 0;
  cursor: pointer;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  transition: box-shadow .16s ease, background-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.acct-upg-method:hover {
  box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.26);
}

.acct-upg-method.is-active {
  box-shadow: inset 0 0 0 2px var(--acct-ink);
  background: var(--acct-surface-2);
}

.acct-upg-method-ic {
  color: var(--acct-ink-soft);
}

.acct-upg-pp-logo {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.acct-upg-pp-logo .pp-a {
  color: #253B80;
}

.acct-upg-pp-logo .pp-b {
  color: #179BD7;
}

/* Stripe wordmark on the Card method button */
.acct-upg-stripe {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #635BFF;
}

/* the two payment methods are now actions (Card → card step · PayPal → redirect) */
.acct-upg-method {
  height: 50px;
}

.acct-upg-method-pp[data-busy="true"] {
  pointer-events: none;
  opacity: 0.92;
}

/* back link on the card step */
.acct-upg-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
  padding: 4px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--acct-ink-soft);
  -webkit-tap-highlight-color: transparent;
}

.acct-upg-back:hover {
  color: var(--acct-ink);
}

.acct-upg-back svg {
  flex: none;
}

/* total recap above the confirm button on the card step */
.acct-upg-paytotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--acct-line);
}

.acct-upg-paytotal-label {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--acct-ink);
}

.acct-upg-paytotal-val {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--acct-ink);
}

/* card pane: "secured by Stripe" hairline note */
.acct-upg-secured {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--acct-ink-muted);
}

.acct-upg-secured svg {
  flex: none;
}

/* paypal pane: a calm continue-to-PayPal note */
.acct-upg-pp-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--acct-blue-tint);
  color: var(--acct-blue-text);
  font-size: 12.5px;
  line-height: 1.5;
}

.acct-upg-pp-note svg {
  flex: none;
  margin-top: 1px;
  color: var(--acct-blue-deep);
}

/* the PayPal button (brand yellow) */
.acct-upg-pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  margin-top: 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: #FFC439;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(16, 24, 26, 0.16), 0 12px 26px -16px rgba(120, 90, 0, 0.6);
  transition: filter .16s ease, transform .14s ease;
}

.acct-upg-pp-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.acct-upg-pp-btn:active {
  transform: translateY(1px);
}

.acct-upg-pp-btn .acct-upg-pp-logo {
  font-size: 20px;
}

.acct-upg-pp-busy {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #253B80;
}

.acct-upg-pp-btn.is-busy {
  pointer-events: none;
  opacity: 0.92;
}

.acct-upg-cardwrap {
  position: relative;
}

.acct-upg-cardmark {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: inline-flex;
}

.acct-upg-reassure {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 11px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--acct-green-tint);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--acct-green-text);
}

.acct-upg-reassure-ic {
  flex: none;
  color: var(--acct-green-deep);
  margin-top: 1px;
}

.acct-upg-confirm {
  margin-top: 16px;
}

.acct-upg-confirm.is-busy {
  opacity: 0.85;
  pointer-events: none;
}

.acct-upg-fine {
  margin: 9px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--acct-ink-muted);
}

.acct-upg-fine a {
  color: var(--acct-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── CHECKOUT VISUAL REFRESH — lighter, more editorial (Stripe/Linear feel): soft
   hairlines at rest, a refined selected ring with a gentle lift instead of a hard
   2px black box, muted savings text instead of green pills, calmer inputs. The
   LAYOUT is unchanged. ───────────────────────────────────────────────────────── */
.acct-upg-type,
.acct-upg-term,
.acct-upg-method {
  background: var(--acct-surface);
  box-shadow: inset 0 0 0 1px var(--acct-line);
}

.acct-upg-type:hover,
.acct-upg-term:hover,
.acct-upg-method:hover {
  box-shadow: inset 0 0 0 1px var(--acct-line-2);
  background: var(--acct-surface-2);
}

.acct-upg-type.is-active,
.acct-upg-term.is-active,
.acct-upg-method.is-active {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--acct-ink), 0 8px 20px -12px rgba(16, 24, 26, 0.42);
}

/* radio dot — softer ring, crisp filled centre */
.acct-upg-type-radio,
.acct-upg-term-radio {
  box-shadow: inset 0 0 0 1.5px var(--acct-line-2);
}

.acct-upg-type.is-active .acct-upg-type-radio,
.acct-upg-term.is-active .acct-upg-term-radio {
  box-shadow: inset 0 0 0 1.5px var(--acct-ink);
}

.acct-upg-type.is-active .acct-upg-type-radio::after,
.acct-upg-term.is-active .acct-upg-term-radio::after {
  inset: 4.5px;
}

/* savings: quiet muted text (not a loud green pill) */
.acct-upg-term-save {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--acct-ink-muted);
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.acct-upg-term.is-active .acct-upg-term-save {
  color: var(--acct-ink-soft);
}

/* inputs: a hair softer + consistent radius across the form */
.acct-upg .flow-input {
  border-radius: 11px;
}

/* head: lighter, less heavy */
.acct-upg-eyebrow {
  letter-spacing: 0.16em;
}

.acct-upg-title {
  letter-spacing: -0.035em;
}

/* success */
.acct-upg-success {
  text-align: center;
  padding: clamp(8px, 1.5vw, 16px) 0;
}

.acct-upg-success-shield {
  display: block;
  width: 91px;
  margin: 0 auto clamp(14px, 1.6vw, 18px);
}

.acct-upg-success-title {
  font-family: "Inter Display", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 3vw, 26px);
  color: var(--acct-ink);
}

.acct-upg-success-sub {
  margin: 8px auto 0;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--acct-ink-soft);
}

.acct-upg-perks-success {
  max-width: 320px;
  margin: 18px auto 22px;
  text-align: left;
  border-top: 1px solid var(--acct-line);
  padding-top: 18px;
}

.iti {
  display: inline !important;
}

/* ===========================================================================
   EDIT-TAG — photo overlay (camera button on top of the image frame)
   =========================================================================== */
.acct-detail-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.44);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.acct-tagtile-frame:hover .acct-detail-photo-overlay,
.acct-tagtile-frame:focus-within .acct-detail-photo-overlay {
  opacity: 1;
}

/* No image: always show the prompt, without the dark scrim */
.acct-detail-photo-overlay.is-empty {
  opacity: 1;
  background: transparent;
  color: var(--acct-ink-muted);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}