/* ==============================================================================
   FOX TOOLS -- Reusable UI components (prefix fx-). Requires fox-tokens.css.
   Buttons stay grey-glossy per the approved design rules; the PRIMARY variant
   adds the technical blue accent. Red appears only in danger / critical states.
   ============================================================================== */

/* ---- Page header ---- */
.fx-eyebrow {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--fx-s-2); padding: 4px 12px;
  border-radius: var(--fx-r-pill); background: var(--fx-blue-soft); border: 1px solid var(--fx-blue-line);
  color: var(--fx-blue); font-size: var(--fx-fs-xs); font-weight: 600;
}
.fx-page-head { display: flex; flex-direction: column; gap: var(--fx-s-3); }
.fx-h1 { margin: 0; font-family: var(--fx-font-display); font-weight: 700; font-size: var(--fx-fs-2xl); line-height: var(--fx-lh-tight); }
.fx-lead { margin: 0; max-width: 62ch; font-size: var(--fx-fs-lg); color: var(--fx-text-2); }

/* ---- Card ---- */
.fx-card {
  position: relative; display: flex; flex-direction: column; gap: var(--fx-s-3); padding: var(--fx-s-6);
  background: var(--fx-surface); border: 1px solid var(--fx-line); border-radius: var(--fx-r-lg); box-shadow: var(--fx-shadow-1);
}
.fx-card--interactive { transition: transform var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease); }
.fx-card--interactive:hover { transform: translateY(-2px); border-color: var(--fx-blue-line); background: var(--fx-surface-2); }
.fx-card-title { margin: 0; font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-lg); line-height: 1.5; }
.fx-card-text { margin: 0; color: var(--fx-text-2); }
.fx-card-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--fx-r-sm); flex: none;
  background: var(--fx-blue-soft); color: var(--fx-blue); font-family: var(--fx-font-display); font-weight: 700; font-size: var(--fx-fs-sm); direction: ltr;
}
.fx-card-head { display: flex; align-items: flex-start; gap: var(--fx-s-3); }
.fx-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-s-5); }
@media (max-width: 720px) { .fx-grid-2 { grid-template-columns: minmax(0, 1fr); } .fx-card { padding: var(--fx-s-5); } }

/* ---- Callout / CTA panel ---- */
.fx-panel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fx-s-6); flex-wrap: wrap; padding: var(--fx-s-6) var(--fx-s-8);
  background: linear-gradient(135deg, rgba(79,168,255,0.10), rgba(79,168,255,0.02) 60%), var(--fx-surface);
  border: 1px solid var(--fx-blue-line); border-radius: var(--fx-r-lg);
}
.fx-panel-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-panel-title { font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-xl); }
.fx-panel-text { color: var(--fx-text-2); }
@media (max-width: 720px) { .fx-panel { padding: var(--fx-s-5); } .fx-panel .fx-btn { width: 100%; } }

/* ---- Buttons ---- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-s-2); min-height: 46px; padding: 0 var(--fx-s-6);
  border-radius: var(--fx-r-md); border: 1px solid #3A414F; background: linear-gradient(180deg, #2B3040 0%, #191D28 100%);
  color: #fff; font-size: var(--fx-fs-md); font-weight: 600; cursor: pointer; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
  transition: transform var(--fx-dur-fast) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), filter var(--fx-dur) var(--fx-ease);
}
.fx-btn:hover { border-color: var(--fx-blue-line); filter: brightness(1.12); }
.fx-btn:active { transform: translateY(1px) scale(0.99); }
.fx-btn--primary { background: linear-gradient(180deg, #2A74D0 0%, #1B57A8 100%); border-color: rgba(120,190,255,0.55); }
.fx-btn--primary:hover { border-color: rgba(160,210,255,0.8); }
.fx-btn--ghost { background: transparent; border-color: var(--fx-line-strong); box-shadow: none; }
.fx-btn--danger { background: linear-gradient(180deg, #4A1219 0%, #2A0A0F 100%); border-color: var(--fx-red-line); color: var(--fx-red-text); }
.fx-btn--sm { min-height: 38px; padding: 0 var(--fx-s-4); font-size: var(--fx-fs-sm); }
.fx-btn[disabled], .fx-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.fx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--fx-r-md);
  background: var(--fx-surface); border: 1px solid var(--fx-line-strong); color: var(--fx-text); cursor: pointer;
  transition: border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}
.fx-icon-btn:hover { border-color: var(--fx-blue-line); color: var(--fx-blue); }

/* ---- Pills / tier chips ---- */
.fx-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: var(--fx-r-pill); font-size: var(--fx-fs-xs); font-weight: 600; border: 1px solid transparent; }
.fx-pill--info { background: var(--fx-blue-soft); color: var(--fx-blue); border-color: var(--fx-blue-line); }
.fx-pill--ok { background: var(--fx-green-soft); color: var(--fx-green); }
.fx-pill--warn { background: var(--fx-amber-soft); color: var(--fx-amber); }
.fx-pill--bad { background: var(--fx-red-soft); color: var(--fx-red-text); border-color: var(--fx-red-line); }
.fx-tier { display: inline-flex; align-items: center; gap: var(--fx-s-2); padding: 4px 14px; border-radius: var(--fx-r-pill); font-size: var(--fx-fs-sm); font-weight: 600; border: 1px solid currentColor; }
.fx-tier--bronze { color: var(--fx-bronze); background: rgba(233,165,106,0.12); }
.fx-tier--silver { color: var(--fx-silver); background: rgba(221,226,234,0.10); }
.fx-tier--gold   { color: var(--fx-gold);   background: rgba(244,208,111,0.12); }

/* ---- Loading / error / empty states (drop-in via FoxUI.renderState) ---- */
.fx-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fx-s-3); text-align: center;
  min-height: 180px; padding: var(--fx-s-8) var(--fx-s-6); border: 1px dashed var(--fx-line-strong); border-radius: var(--fx-r-lg);
  background: var(--fx-blue-softer); color: var(--fx-text-2);
}
.fx-state-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--fx-surface-2); border: 1px solid var(--fx-line-strong); color: var(--fx-blue); }
.fx-state-title { margin: 0; font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-lg); color: var(--fx-text); }
.fx-state-text { margin: 0; max-width: 46ch; font-size: var(--fx-fs-sm); }
.fx-state--error { border-color: var(--fx-red-line); background: var(--fx-red-soft); }
.fx-state--error .fx-state-icon { color: var(--fx-red-text); border-color: var(--fx-red-line); background: rgba(238,10,30,0.10); }
.fx-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--fx-line-strong); border-top-color: var(--fx-blue); animation: fx-spin 0.8s linear infinite; }
.fx-skeleton { display: block; border-radius: var(--fx-r-sm); min-height: 14px; background: linear-gradient(90deg, var(--fx-surface-2) 25%, var(--fx-surface-3) 50%, var(--fx-surface-2) 75%); background-size: 200% 100%; animation: fx-shimmer 1.4s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
/* Reduced motion: keep the spinner as a static ring so "loading" still reads. */
@media (prefers-reduced-motion: reduce) { .fx-spinner { animation: none !important; border-top-color: var(--fx-blue); border-inline-end-color: var(--fx-blue); } }

/* ---- Toast (non-blocking replacement for alert(); opt-in via FoxUI.toast) ---- */
.fx-toast-host { position: fixed; inset-block-end: var(--fx-s-6); inset-inline: 0; z-index: var(--fx-z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--fx-s-2); pointer-events: none; padding: 0 var(--fx-s-4); }
.fx-toast {
  pointer-events: auto; max-width: min(520px, 100%); padding: 12px var(--fx-s-5); border-radius: var(--fx-r-md); background: var(--fx-surface-2);
  border: 1px solid var(--fx-line-strong); border-inline-start: 3px solid var(--fx-blue); color: var(--fx-text); font-size: var(--fx-fs-sm);
  box-shadow: var(--fx-shadow-2); animation: fx-toast-in var(--fx-dur-slow) var(--fx-ease);
}
.fx-toast--error { border-inline-start-color: var(--fx-red); }
.fx-toast--warn { border-inline-start-color: var(--fx-amber); }
.fx-toast--ok { border-inline-start-color: var(--fx-green); }
@keyframes fx-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ==== Phase 2 additions: headings, notices, grids, segmented control, pricing ==== */
.fx-h2 { margin: 0; font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-xl); line-height: var(--fx-lh-tight); }
.fx-section { display: flex; flex-direction: column; gap: var(--fx-s-4); }
.fx-section[hidden] { display: none; }
.fx-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-s-3); }
.fx-muted { color: var(--fx-text-2); font-size: var(--fx-fs-sm); margin: 0; }
.fx-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--fx-s-5); align-items: stretch; }
.fx-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-s-2) var(--fx-s-3); padding: 14px var(--fx-s-5);
  border-radius: var(--fx-r-md); background: var(--fx-blue-softer); border: 1px solid var(--fx-blue-line); color: var(--fx-text); font-size: var(--fx-fs-sm);
}
.fx-notice--warn { background: var(--fx-amber-soft); border-color: rgba(245,179,107,0.4); color: var(--fx-amber); }
.fx-notice--bad { background: var(--fx-red-soft); border-color: var(--fx-red-line); color: var(--fx-red-text); }
.fx-notice a { color: var(--fx-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fx-notice a[hidden] { display: none; }

.fx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--fx-surface); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-r-md); }
.fx-seg button {
  min-height: 38px; padding: 0 var(--fx-s-4); border: 0; border-radius: var(--fx-r-sm); background: transparent; color: var(--fx-text-2);
  font-size: var(--fx-fs-sm); font-weight: 600; cursor: pointer; transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}
.fx-seg button:hover { color: var(--fx-text); }
.fx-seg button[aria-pressed="true"] { background: var(--fx-blue-soft); color: var(--fx-blue); box-shadow: inset 0 0 0 1px var(--fx-blue-line); }

.fx-plan { display: flex; flex-direction: column; gap: var(--fx-s-5); padding: 26px 24px; background: linear-gradient(160deg, #10141C 0%, #080A0F 100%); border: 1px solid rgba(255,154,60,0.12); border-radius: 18px; position: relative; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.fx-plan:hover { transform: translateY(-4px); border-color: rgba(255,154,60,0.4); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 20px rgba(255,154,60,0.08); }
.fx-plan::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 3px; background: var(--fx-line-strong); }
.fx-plan[data-tier="bronze"]::before { background: linear-gradient(90deg, #CD7F32, #E6A055); }
.fx-plan[data-tier="silver"]::before { background: linear-gradient(90deg, #A8A8AF, #C9C9CE); }
.fx-plan[data-tier="gold"]::before { background: linear-gradient(90deg, #FFD700, #FFEA70); }
.fx-plan--featured { border-color: rgba(255,154,60,0.25); background: linear-gradient(160deg, #161A22 0%, #0A0D14 100%); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.fx-plan--featured:hover { border-color: rgba(255,154,60,0.5); box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 30px rgba(255,154,60,0.15); }
.fx-plan-title { font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-lg); color: #FFF; }
.fx-plan-cta { padding-top: 8px; width: 100%; }
.fx-plan-cta-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border-radius: 12px; background: linear-gradient(180deg, #ff9a3c 0%, #ff6a1a 100%); color: #fff; font-weight: 700; font-size: 15px; font-family: var(--fx-font-display); border: none; cursor: pointer; text-decoration: none; transition: filter 0.2s, box-shadow 0.2s; box-shadow: 0 0 15px -4px rgba(255,120,30,0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.fx-plan-cta-btn:hover { filter: brightness(1.1); box-shadow: 0 0 20px -2px rgba(255,120,30,0.8), inset 0 1px 0 rgba(255,255,255,0.4); }
.fx-dur-section { margin-bottom: 40px; }
.fx-dur-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.fx-dur-title { font-family: var(--fx-font-display); font-weight: 700; font-size: 22px; color: #E9A56A; white-space: nowrap; }
.fx-dur-line { flex-grow: 1; height: 1px; background: linear-gradient(90deg, rgba(255,154,60,0.2) 0%, transparent 100%); }
.fx-price { display: flex; align-items: baseline; gap: var(--fx-s-2); flex-wrap: wrap; }
.fx-price-num { font-family: var(--fx-font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; direction: ltr; }
.fx-price-per { color: var(--fx-text-2); font-size: var(--fx-fs-sm); }
.fx-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fx-s-3); font-size: var(--fx-fs-sm); }
.fx-checklist li { display: flex; align-items: flex-start; gap: var(--fx-s-3); line-height: 1.6; }
.fx-checklist svg { flex: none; margin-block-start: 3px; }\n.fx-checklist svg circle { fill: rgba(255,154,60,0.1) !important; }\n.fx-checklist svg path { stroke: #ff9a3c !important; }

/* ---- Account / dashboard blocks ---- */
.fx-grid-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--fx-s-5); align-items: start; }
@media (max-width: 959px) { .fx-grid-side { grid-template-columns: minmax(0, 1fr); } }
.fx-row { display: flex; align-items: center; gap: var(--fx-s-4); flex-wrap: wrap; }
.fx-row--between { justify-content: space-between; }
.fx-stack { display: flex; flex-direction: column; gap: var(--fx-s-3); }
.fx-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--fx-s-4) var(--fx-s-5); background: var(--fx-surface-2); border: 1px solid var(--fx-line); border-radius: var(--fx-r-md); min-width: 0; }
.fx-tile-label { font-size: var(--fx-fs-sm); color: var(--fx-text-2); }
.fx-tile-value { font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-lg); overflow-wrap: anywhere; }
.fx-tile-note { font-size: var(--fx-fs-xs); color: var(--fx-text-3); line-height: 1.7; }
.fx-bar { height: 8px; border-radius: var(--fx-r-pill); background: var(--fx-surface-3); overflow: hidden; }
.fx-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--fx-blue); transition: width var(--fx-dur-slow) var(--fx-ease); }
.fx-svc { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--fx-s-4); background: var(--fx-surface-2); border: 1px solid var(--fx-line); border-radius: var(--fx-r-md); }
.fx-svc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-s-3); }
.fx-svc-name { display: flex; align-items: center; gap: var(--fx-s-3); font-weight: 600; font-size: var(--fx-fs-sm); min-width: 0; }
.fx-svc-name svg { flex: none; color: var(--fx-blue); }
.fx-svc-val { direction: ltr; white-space: nowrap; font-size: var(--fx-fs-sm); color: var(--fx-text-3); }
.fx-svc-val b { font-family: var(--fx-font-display); font-size: var(--fx-fs-lg); color: var(--fx-text); }
.fx-svc-val b.is-zero { color: var(--fx-red-text); }
.fx-tier-box { display: flex; align-items: center; gap: var(--fx-s-4); padding: var(--fx-s-4); border-radius: var(--fx-r-md); background: var(--fx-surface-2); border: 1px solid var(--fx-line-strong); }
.fx-tier-orb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none; border: 1px solid currentColor; font-family: var(--fx-font-display); font-weight: 700; font-size: var(--fx-fs-xl); }
.fx-tier-orb--trial { color: var(--fx-text-2); background: rgba(255,255,255,0.05); }
.fx-tier-orb--bronze { color: var(--fx-bronze); background: rgba(233,165,106,0.12); }
.fx-tier-orb--silver { color: var(--fx-silver); background: rgba(221,226,234,0.10); }
.fx-tier-orb--gold { color: var(--fx-gold); background: rgba(244,208,111,0.12); }
.fx-ladder-row { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-s-3); padding: 12px var(--fx-s-4); border-radius: var(--fx-r-md); border: 1px solid var(--fx-line); background: var(--fx-surface-2); }
.fx-ladder-row.is-current { border-color: var(--fx-blue-line); background: var(--fx-blue-soft); }
.fx-ladder-note { font-size: var(--fx-fs-xs); color: var(--fx-text-2); }
.fx-donut-wrap { display: flex; align-items: center; gap: var(--fx-s-6); flex-wrap: wrap; }
.fx-donut-track { stroke: var(--fx-surface-3); }
.fx-donut-arc { stroke: var(--fx-blue); transition: stroke-dasharray var(--fx-dur-slow) var(--fx-ease); }
.fx-guard { align-self: center; max-width: 440px; width: 100%; text-align: center; align-items: center; padding: var(--fx-s-10) var(--fx-s-6); margin-block: var(--fx-s-10); }
.fx-btn-row { display: flex; }
.fx-hint { display: flex; align-items: center; gap: var(--fx-s-2); font-size: var(--fx-fs-xs); color: var(--fx-text-3); }
.fx-hint svg { flex: none; }
[hidden] { display: none !important; }

/* ---- Legacy widget containment (scan / laser / live-monitor / radar) ----------
   These mount points hold pre-existing, untouched engine-wired widgets that were
   never built with a narrow-viewport layout (their own CSS/JS is out of scope --
   see FOX_PROJECT_STATE.md). Rather than let an oversized child (e.g. a wide
   <select>) push the WHOLE page into horizontal scroll, contain the overflow to
   the widget's own box so the rest of the page stays put. Desktop is unaffected
   (the widget already fits under 720-960px there). */
#fox-cyber-inspector, #fox-laser-appeal, #fox-live-monitor, #fox-runner, #eyes-agencies {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* ---- Service-page hero banners (laser/eyes/fullinfo) ----------------------
   Shared, coherent sizing rule for every ".xxx-hero-banner" (matched by the
   class suffix, so this is the single source of truth instead of three
   near-duplicate per-page copies). Root cause of the "oversized banner"
   report: each banner's own <img> was set to width:100%, so at the shared
   page content width (~900-1120px) a ~1.6-1.8 aspect-ratio image rendered
   500-570px tall -- more than half of a typical viewport before any real
   content appeared.
   Fix: cap the IMAGE (not the page container) on both axes with width:auto/
   height:auto + max-width/max-height together -- the standard non-distorting
   "fit within a box" technique for a plain <img> (no object-fit/cropping
   needed, since neither axis is force-set, only capped; the browser picks
   whichever limit binds and scales the other axis to match the image's own
   intrinsic ratio). Every original image keeps its full composition and
   exact aspect ratio; only its rendered SIZE shrinks to a shared, reasonable
   footprint. The container gets a subtle fill for the rare case a very
   wide-aspect image leaves side "letterboxing" once height is the binding
   constraint -- never a crop. */
[class$="-hero-banner"] {
  display: flex; justify-content: center; background: var(--fx-surface);
  border-radius: var(--fx-r-lg); overflow: hidden; border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-1);
}
[class$="-hero-banner"] img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 320px;
}
@media (max-width: 640px) {
  [class$="-hero-banner"] img { max-height: 200px; }
}

/* ---- Service-page top spacing (laser/eyes/fullinfo) -----------------------
   Same coherent-spacing fix, shared instead of tuned per page: a tighter
   top gap now that the banner above is a reasonable size (previously only
   laser.html had this -- eyes/fullinfo still used the taller default
   .fx-page padding/gap, an inconsistency across the three otherwise-matching
   pages). Every OTHER already-approved page (faq/plans/account/...) keeps
   the normal .fx-page default untouched -- this only applies where a hero
   banner is actually present. */
.fx-page:has(> [class$="-hero-banner"]) { padding-block-start: var(--fx-s-6); gap: var(--fx-s-5); }

/* ---- Sidebar-less pages: auth cards / legal documents ---- */
.fx-auth-page { position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.fx-auth-page::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 30%, rgba(79,168,255,0.11), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(238,10,30,0.07), transparent 70%);
}
.fx-auth-page::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 8%; height: 70vh; z-index: -1; pointer-events: none; opacity: 0.08; display: none; /* background fox watermark removed (owner decision) */
  background: url('/assets/fox-full.png') center / min(980px, 95%) auto no-repeat;
}
.fx-auth-bar { display: flex; justify-content: flex-end; padding: var(--fx-s-5) var(--fx-gutter); }
.fx-auth-main { flex: 1; display: grid; place-items: center; padding: var(--fx-s-4) var(--fx-gutter) var(--fx-s-10); }
.fx-auth-card {
  width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--fx-s-5); padding: var(--fx-s-8);
  background: rgba(16,20,28,0.92); border: 1px solid var(--fx-line-strong); border-radius: 26px; box-shadow: var(--fx-shadow-2);
}
.fx-auth-brand { display: flex; align-items: center; gap: var(--fx-s-3); }
@media (max-width: 360px) { .fx-auth-brand [data-fox-logo] { --fox-logo-w: 72px; } }   /* very narrow phones: keep mark + wordmark on one line */
.fx-auth-brand span { font-family: var(--fx-font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: 0.06em; direction: ltr; }
.fx-auth-title { margin: 0; font-family: var(--fx-font-display); font-weight: 600; font-size: 1.625rem; line-height: 1.3; }
.fx-auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fx-s-2) var(--fx-s-6); font-size: var(--fx-fs-sm); color: var(--fx-text-3); padding-top: var(--fx-s-2); }
.fx-auth-links a:hover, .fx-link-muted:hover { color: var(--fx-blue); }
.fx-link-muted { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--fx-text-2); font-size: var(--fx-fs-md); }
.fx-btn--lg { min-height: 54px; font-size: var(--fx-fs-lg); width: 100%; }
.fx-btn--google { background: var(--fx-surface-2); }
.fx-btn--google::before {
  content: ''; width: 20px; height: 20px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/><path fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z'/><path fill='%23FBBC05' d='M10.5 28.7A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.8l7.9-6.1z'/><path fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.9 2.3-8.4 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z'/></svg>") center / contain no-repeat;
}
.fx-divider { display: flex; align-items: center; gap: var(--fx-s-4); font-size: var(--fx-fs-sm); color: var(--fx-text-3); }
.fx-divider::before, .fx-divider::after { content: ''; flex: 1; height: 1px; background: var(--fx-line-strong); }
.fx-field { display: flex; flex-direction: column; gap: 10px; }
.fx-field label { font-weight: 500; }
.fx-input {
  height: 54px; padding: 0 var(--fx-s-4); border: 1px solid var(--fx-line-strong); border-radius: var(--fx-r-md); background: var(--fx-bg);
  color: var(--fx-text); font-family: inherit; font-size: var(--fx-fs-lg); width: 100%;
  transition: border-color var(--fx-dur) var(--fx-ease);
}
.fx-input:hover:not(:disabled) { border-color: var(--fx-blue-line); }
.fx-input:disabled { opacity: 0.6; cursor: not-allowed; color: var(--fx-text-3); }
.fx-input--code { height: 58px; font-family: var(--fx-font-display); font-size: 1.375rem; letter-spacing: 8px; text-align: center; }
.fx-msg { margin: 0; text-align: center; font-size: var(--fx-fs-sm); color: var(--fx-red-text); line-height: 1.7; }
.fx-msg:empty { display: none; }
.fx-doc { max-width: 760px; }
.fx-doc h2 { margin: var(--fx-s-6) 0 var(--fx-s-2); font-family: var(--fx-font-display); font-weight: 600; font-size: var(--fx-fs-xl); }
.fx-doc p, .fx-doc li { color: var(--fx-text-2); }
.fx-doc a { color: var(--fx-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .fx-auth-card { padding: var(--fx-s-6) var(--fx-s-5); border-radius: 22px; } }

/* ---- Visually hidden helper ---- */
.fx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Subscription QR Block ---- */
.fx-plan-qr-box { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; padding: 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,154,60,0.2); border-radius: 14px; cursor: pointer; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.fx-plan-qr-box:hover { border-color: rgba(255,154,60,0.4); background: rgba(255,154,60,0.06); box-shadow: 0 4px 20px rgba(255,154,60,0.08); }
.fx-plan-qr-img { width: 105px; height: 105px; flex: none; object-fit: contain; border-radius: 12px; border: 1px solid rgba(255,154,60,0.3); padding: 2px; background: #FFF; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.fx-plan-qr-content { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.fx-plan-qr-title { font-size: 13.5px; color: var(--fx-text-2); font-weight: 500; line-height: 1.3; }
.fx-plan-qr-handle { font-size: 16px; color: #ff9a3c; font-weight: 700; direction: ltr; text-align: right; }


/* QR Contact Area */
.fx-plan-qr-area { display: flex; align-items: center; gap: 14px; padding: 12px; margin-top: auto; margin-bottom: 4px; background: linear-gradient(145deg, rgba(16,20,28,0.8) 0%, rgba(8,10,15,0.9) 100%); border: 1px solid rgba(255,154,60,0.15); border-radius: 14px; cursor: pointer; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.fx-plan-qr-area:hover { border-color: rgba(255,154,60,0.5); background: linear-gradient(145deg, rgba(20,25,35,0.9) 0%, rgba(10,12,18,1) 100%); box-shadow: 0 6px 16px rgba(255,154,60,0.08), 0 4px 12px rgba(0,0,0,0.4); }
.fx-plan-qr-img-wrapper { flex: none; width: 56px; height: 56px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 2px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.fx-plan-qr-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.fx-plan-qr-content { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.fx-plan-qr-title { font-size: 11.5px; color: var(--fx-text-2); font-weight: 500; }
.fx-plan-qr-handle { font-size: 14px; font-weight: 700; color: #E9A56A; direction: ltr; text-align: right; }