/*
 * CRY-EX shell: the shared components every page uses on top of the tokens in
 * cryex-theme.css - base and focus, buttons, forms, cards, dialogs, the
 * account bar, the sign-in gate and the footer. App layout and app-only
 * styling belong in each app's own styles.css.
 *
 * Breakpoint convention (every app sheet and script follows it):
 *   mobile   @media (max-width: 920px)   phone/tablet layout: tab bar or
 *                                         drawer instead of a sidebar
 *   desktop  @media (min-width: 921px)   only when a rule must not leak down
 *   JS       matchMedia("(max-width: 920px)")
 * 920px, not 880px: below about 920px the Admin and Merchant top bars wrap
 * their labels, so the desktop layout starts at 921px.
 * Narrower queries (e.g. 560px, 420px) are allowed only to tweak content
 * inside a component, never to switch the page layout. Short landscape
 * phones add (max-height: 500px) and (orientation: landscape).
 */

body[data-cryex-app] {
  --cx-brand-mark: url("/shared/mark.svg");
  accent-color: var(--cx-accent-strong);
  font-family: var(--cx-font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  background-color: var(--cx-canvas);
}

/* Headings use the display face. :where() keeps this at zero specificity so
   any app rule wins. */
:where(body[data-cryex-app]) :where(h1, h2, h3) {
  font-family: var(--cx-font-display);
}

/* The CRY-EX wordmark is drawn from paths, never set in a live font. It
   takes the text colour of its container through a mask. */
body[data-cryex-app] .cx-wordmark.cx-wordmark {
  display: inline-block;
  width: calc(0.78em * 5.13);
  height: 0.78em;
  background: currentColor;
  -webkit-mask: url("/shared/brand/wordmark.svg") center / contain no-repeat;
  mask: url("/shared/brand/wordmark.svg") center / contain no-repeat;
  letter-spacing: 0;
  vertical-align: middle;
}

body[data-cryex-app] img.wallet-logo {
  padding: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

body[data-cryex-app] ::selection {
  background: rgba(197, 242, 58, 0.32);
  color: #0b1220;
}

body[data-cryex-app] *,
body[data-cryex-app] *::before,
body[data-cryex-app] *::after {
  box-sizing: border-box;
}

body[data-cryex-app] :where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
}

body[data-cryex-app] :where(button, [role="button"], summary, a[href]) {
  -webkit-tap-highlight-color: transparent;
}

body[data-cryex-app] :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary, a[href]) {
  cursor: pointer;
}

body[data-cryex-app] :where(button, .button, [role="button"]) {
  touch-action: manipulation;
}

body[data-cryex-app] :where(button, .button):disabled,
body[data-cryex-app] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

body[data-cryex-app] :where(button, .button):active:not(:disabled) {
  transform: translateY(1px);
}

body[data-cryex-app] :where(input, select, textarea)::placeholder {
  color: #8a95a8;
  opacity: 1;
}

body[data-cryex-app] :where(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

body[data-cryex-app] :where([aria-busy="true"], .is-loading) {
  cursor: progress;
}

body[data-cryex-app] :where([hidden]) {
  display: none !important;
}

body[data-cryex-app] :where(h1, h2, h3, [id]) {
  scroll-margin-top: 88px;
}

body[data-cryex-app] :where(p, li, dd, .field-help, .form-help) {
  overflow-wrap: anywhere;
}

body[data-cryex-app] :where(.sr-only, .screen-reader-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-cryex-app] .skip-link {
  position: fixed;
  z-index: var(--cx-z-toast);
  top: 10px;
  left: 10px;
  min-height: 44px;
  padding: 11px 16px;
  border: 2px solid var(--cx-accent-strong);
  border-radius: var(--cx-radius);
  background: var(--cx-surface);
  color: var(--cx-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform var(--cx-duration-fast) var(--cx-ease);
}

body[data-cryex-app] .skip-link:focus-visible {
  transform: translateY(0);
  box-shadow: var(--cx-shadow);
}

/* Keep role-level field rules from erasing the keyboard indicator. The dark
   inner ring is visible on gold controls; the gold outer ring is visible on
   paper and dark surfaces. */
body[data-cryex-app] :where(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible {
  outline: 3px solid var(--cx-ink) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--cx-accent) !important;
}

/* Route headings receive programmatic focus after navigation. Give that
   location change a deliberate text cue instead of a control-shaped box. */
body[data-cryex-app] :where(h1[tabindex="-1"]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 4px;
  text-decoration-line: underline;
  text-decoration-color: var(--cx-focus);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

@media (forced-colors: active) {
  body[data-cryex-app] :where(h1[tabindex="-1"]):focus-visible {
    outline-color: Highlight;
    text-decoration-color: Highlight;
  }
}

body[data-cryex-app] :where(
  button,
  .button,
  .icon-button,
  .nav-item,
  .nav-link,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  min-height: 40px;
}

body[data-cryex-app] :where(.icon-button) {
  min-width: 40px;
}

body[data-cryex-app] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea
) {
  font-size: max(14px, 1em);
}

body[data-cryex-app] :where(dialog) {
  max-width: min(calc(100vw - 32px), 720px);
  max-height: min(calc(100dvh - 32px), 880px);
  border-radius: var(--cx-radius-dialog);
  overscroll-behavior: contain;
}

body[data-cryex-app] :where(.sidebar, .topbar, .mobile-header, .mobile-nav, .bottom-nav) {
  z-index: var(--cx-z-sticky);
}

body[data-cryex-app] :where(.sidebar-scrim, .modal-overlay, .dialog-backdrop) {
  z-index: var(--cx-z-scrim);
}

body[data-cryex-app] :where(.modal, .dialog, [role="dialog"]) {
  z-index: var(--cx-z-overlay);
}

body[data-cryex-app] :where(.toast-region, .toast-stack, #toast-region, #toastRegion, #toastStack) {
  z-index: var(--cx-z-toast);
}

/* Cards: flat operational panels; metric and summary tiles keep a soft lift. */
body[data-cryex-app] :where(.panel, .card, .metric-card, .stat-card, .form-card, .checkout-card) {
  border-radius: var(--cx-radius);
  box-shadow: none;
}

body[data-cryex-app] :where(.metric, .summary-card, .kpi-card) {
  border-radius: var(--cx-radius-lg);
  box-shadow: var(--cx-shadow-soft);
}

body[data-cryex-app] :where(.service-card) {
  border-radius: var(--cx-radius-lg);
}

body[data-cryex-app] .button-primary,
body[data-cryex-app] .button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent-strong));
  color: #0b1220;
  box-shadow: 0 15px 36px rgba(169, 214, 28, 0.22);
  font-weight: 850;
}

body[data-cryex-app] .button-primary:hover:not(:disabled),
body[data-cryex-app] .button.primary:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #c5f23a, #a9d61c);
  color: #0b1220;
  box-shadow: 0 18px 42px rgba(169, 214, 28, 0.29);
}

/* ---- Account bar and workbar pieces ---- */

/* One account language across every workspace navigation surface. */
body[data-cryex-app] .workspace-account,
body[data-cryex-app] .workspace-auth-actions,
body[data-cryex-app] .workspace-profile {
  min-width: 0;
  display: flex;
  align-items: center;
}

body[data-cryex-app] .workspace-account {
  flex: 0 0 auto;
  gap: 8px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
}

body[data-cryex-app] .workspace-auth-actions {
  gap: 7px;
}

body[data-cryex-app] .workspace-auth-actions.is-content {
  flex-wrap: wrap;
}

body[data-cryex-app] .workspace-auth-button {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3f5f8;
  font: 800 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-cryex-app] .workspace-auth-button:hover:not(:disabled) {
  border-color: rgba(197, 242, 58, 0.52);
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

body[data-cryex-app] .workspace-auth-button.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cx-accent), var(--cx-accent-strong));
  color: #0b1220;
  box-shadow: 0 8px 20px rgba(169, 214, 28, 0.18);
}

body[data-cryex-app] .workspace-auth-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

body[data-cryex-app] .workspace-profile {
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px 4px 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: #f3f5f8;
  text-align: left;
}

body[data-cryex-app] .workspace-profile:hover {
  border-color: rgba(197, 242, 58, 0.45);
  background: rgba(255, 255, 255, 0.1);
}

body[data-cryex-app] .workspace-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--cx-accent), var(--cx-accent-strong));
  color: #0b1220;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

body[data-cryex-app] .workspace-profile-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

body[data-cryex-app] .workspace-profile-copy strong {
  max-width: 120px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-cryex-app] .workspace-profile-copy small {
  color: #b8bdb9;
  font-size: 11px;
}

body[data-cryex-app] .workspace-profile > svg,
body[data-cryex-app] .workspace-signout svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body[data-cryex-app] .workspace-signout {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--cx-muted);
}

body[data-cryex-app] .workspace-signout:hover {
  border-color: rgba(255, 154, 156, 0.42);
  background: rgba(178, 58, 55, 0.16);
  color: #ffd0d1;
}

/* Route headings receive focus for screen-reader context, but are not controls. */
body[data-cryex-app] :where(h1, h2)[tabindex="-1"]:focus {
  outline: 0;
}

body[data-cryex-app] :where(.page-head h1, .welcome-row h1, .welcome-row h2, .page-intro h1, .page-intro h2, .section-title-row h1, .section-title-row h2, .view-heading h2) {
  text-wrap: balance;
}

body[data-cryex-app] :where(.brand-copy small, .brand small, .mobile-brand small) {
  font-size: max(0.6875rem, 11px) !important;
}

@media (max-width: 820px) {
  body[data-cryex-app] :where(
    .button,
    .icon-button,
    .nav-item,
    .nav-link,
    .mobile-nav > button,
    .bottom-nav .nav-item,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea
  ) {
    min-height: 44px;
  }

  body[data-cryex-app] :where(.icon-button) {
    min-width: 44px;
  }

  body[data-cryex-app] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
  ) {
    font-size: 16px;
  }
}

@media (pointer: coarse) {
  body[data-cryex-app] :where(
    button,
    .button,
    .icon-button,
    .nav-item,
    .nav-link,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select
  ) {
    min-height: 44px;
  }

  body[data-cryex-app] :where(.icon-button) {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body[data-cryex-app] *,
  body[data-cryex-app] *::before,
  body[data-cryex-app] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  body[data-cryex-app] {
    --cx-line: rgba(255, 255, 255, 0.28);
    --cx-line-strong: rgba(255, 255, 255, 0.48);
    --cx-muted: #c5cad4;
  }

  body[data-cryex-app] :where(.panel, .card, .metric, .metric-card, .stat-card, .summary-card, .kpi-card) {
    border-width: 2px;
  }
}

@media (forced-colors: active) {
  body[data-cryex-app] :where(.sidebar, .topbar, .panel, .card, .metric, .metric-card, .kpi-card) {
    border: 1px solid CanvasText;
  }

  body[data-cryex-app] :where(button, .button, a, input, select, textarea):focus-visible {
    outline: 3px solid Highlight;
  }
}
/* Shared containment rules keep long headings and account data inside cards. */
:where(.card, .panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) {
  min-width: 0;
  max-width: 100%;
}

:where(.card, .panel, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "]) :where(h1, h2, h3, h4, p, strong, small) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

/* ---- Dialogs ---- */

/* Shared modal surface. Product-specific layouts remain intact while their
 * canvas, elevation, headers, close controls, and mobile edges converge. */
body[data-cryex-app] dialog:not(.pv-auth-dialog):not(.admin-bootstrap-dialog) {
  border: 1px solid var(--cx-border);
  border-radius: 16px;
  background: var(--cx-surface);
  color: var(--cx-ink);
  box-shadow: var(--cx-shadow);
}

body[data-cryex-app] dialog:not(.pv-auth-dialog)::backdrop {
  background: rgba(11, 18, 32, 0.62);
  backdrop-filter: blur(5px);
}

body[data-cryex-app] :where(.modal-header, .modal-head, .dialog-head, .modal-shell > header) {
  border-bottom-color: var(--cx-border);
}

body[data-cryex-app] dialog :where(.dialog-close, [data-close-modal], [data-close-dialog], [data-action="modal-close"]) {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
}

@media (max-width: 920px) {
  body[data-cryex-app] .workspace-account {
    margin-left: 0;
  }

  body[data-cryex-app] .workspace-auth-button {
    min-height: 44px;
  }

  body[data-cryex-app] dialog:not(.pv-auth-dialog):not(.admin-bootstrap-dialog) {
    width: min(calc(100vw - 20px), 720px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  body[data-cryex-app] .workspace-auth-actions {
    gap: 5px;
  }

  body[data-cryex-app] .workspace-auth-button {
    padding-inline: 10px;
    font-size: 11px;
  }

  body[data-cryex-app] .workspace-profile.is-compact .workspace-profile-copy {
    display: none;
  }

  body[data-cryex-app] .workspace-profile.is-compact {
    width: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 5px;
  }
}


/* ---- Legal consent in sign-up forms ---- */
body[data-cryex-app] .auth-legal-links {
  margin: 2px 0 0;
  color: var(--cx-ink-muted);
  font-size: 13px !important;
  line-height: 1.55 !important;
}

body[data-cryex-app] .auth-legal-links a,
body[data-cryex-app] .legal-agreement a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: 5px;
  color: var(--cx-accent-ink);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-cryex-app] .legal-agreement {
  min-height: 56px;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cx-border);
  border-radius: 10px;
  background: var(--cx-surface-muted);
  color: var(--cx-ink);
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.55 !important;
}

body[data-cryex-app] .legal-agreement[hidden] { display: none !important; }
body[data-cryex-app] .legal-agreement input {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 3px 0 0 !important;
  cursor: pointer;
}
body[data-cryex-app] .legal-agreement > span { min-width: 0; }
body[data-cryex-app] .legal-agreement small { display: block; margin-top: 2px; color: var(--cx-ink-muted); font-size: 12px !important; font-weight: 500; }
body[data-cryex-app] .legal-agreement-error { margin: -4px 0 4px; color: var(--cx-danger); font-size: 13px !important; font-weight: 700; line-height: 1.45 !important; }
body[data-cryex-app] .legal-agreement-error[hidden] { display: none !important; }
body[data-cryex-app] .legal-privacy-note { margin: 0; color: var(--cx-ink-muted); font-size: 13px !important; line-height: 1.55 !important; }
body[data-cryex-app] .legal-privacy-note[hidden] { display: none !important; }
body[data-cryex-app] .legal-privacy-note a { display: inline-flex; min-height: 44px; align-items: center; border-radius: 5px; color: var(--cx-accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Buttons ----
 * .cx-button is the shared button ("body" lifts it over the base control rules above). Lime is the primary action in every app;
 * the secondary button is a quiet outline; --danger is for destructive actions. Older app buttons (.button-primary,
 * .button.primary) get the same lime fill until each app moves to .cx-button. */
body .cx-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid var(--cx-border, #d5dbe3);
  border-radius: var(--cx-radius, 8px);
  background: var(--cx-surface, #fff);
  color: var(--cx-ink, #0b1220);
  font: 800 15px/1 var(--cx-font-sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--cx-duration-fast, 150ms) var(--cx-ease, ease),
    border-color var(--cx-duration-fast, 150ms) var(--cx-ease, ease);
}

body .cx-button:hover:not(:disabled) {
  border-color: var(--cx-ink-faint, #667085);
}

body .cx-button--primary {
  border-color: transparent;
  background: var(--cx-accent, #c5f23a);
  color: var(--cx-on-accent, #0b1220);
}

body .cx-button--primary:hover:not(:disabled) {
  border-color: transparent;
  background: var(--cx-accent-strong, #a9d61c);
}

/* Destructive action (sign out everywhere, delete). */
body .cx-button--danger {
  border-color: transparent;
  background: var(--cx-danger-soft);
  color: var(--cx-danger);
}

body .cx-button--danger:hover:not(:disabled) {
  border-color: currentColor;
}

body .cx-button:disabled,
body .cx-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

body .cx-button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Sign-in gate ----
 * The same card in every app: mark, role eyebrow, short title, one line of
 * text, lime "Sign in" and (where the role can register) "Create account".
 * Scoped under .auth-gate so older app type rules cannot reach in. */
body[data-cryex-app] .auth-gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(circle at 50% 0%, var(--cx-app-accent-soft), transparent 32rem),
    var(--cx-canvas);
  color: var(--cx-ink);
}

body[data-cryex-app] .auth-gate .auth-gate-card {
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-dialog);
  background: var(--cx-surface);
  box-shadow: var(--cx-shadow-soft);
}

body[data-cryex-app] .auth-gate .auth-gate-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 20px;
}

body[data-cryex-app] .auth-gate .auth-gate-eyebrow {
  margin: 0 0 8px;
  color: var(--cx-app-accent-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--cx-tracking-caps);
  text-transform: uppercase;
}

body[data-cryex-app] .auth-gate .auth-gate-card h1 {
  margin: 0 0 8px;
  color: var(--cx-ink);
  font-family: var(--cx-font-display);
  font-size: clamp(26px, 6vw, 32px);
  font-weight: var(--cx-weight-heavy);
  line-height: var(--cx-leading-tight);
  letter-spacing: var(--cx-tracking-tight);
}

body[data-cryex-app] .auth-gate .auth-gate-text {
  margin: 0 0 24px;
  color: var(--cx-ink-muted);
  font-size: 16px;
  line-height: 1.5;
}

body[data-cryex-app] .auth-gate .auth-gate-actions {
  display: grid;
  gap: 10px;
}

body[data-cryex-app] .auth-gate .cx-button {
  min-height: 48px;
}

/* The sign-in form sits right in the gate card (light), so a visitor types
 * straight away instead of tapping "Sign in" first. */
body[data-cryex-app] .auth-gate .auth-gate-text {
  margin-bottom: 20px;
}

body[data-cryex-app] .auth-gate .pv-auth-inline .pv-auth-form {
  gap: 14px;
}

body[data-cryex-app] .auth-gate .pv-auth-field {
  color: var(--cx-ink);
  font-size: 14px;
  font-weight: 700;
}

body[data-cryex-app] .auth-gate .pv-auth-field input {
  border-color: var(--cx-border);
  background: var(--cx-surface);
  color: var(--cx-ink);
  font-size: 16px;
}

body[data-cryex-app] .auth-gate .pv-auth-field input:focus {
  border-color: var(--cx-ink);
  box-shadow: var(--cx-focus-halo, 0 0 0 4px rgba(197, 242, 58, 0.35));
  outline: 0;
}

body[data-cryex-app] .auth-gate :is(.pv-auth-remember, .pv-auth-register-prompt, .pv-auth-legal) {
  color: var(--cx-ink-muted);
}

body[data-cryex-app] .auth-gate :is(.pv-auth-link, .pv-auth-register-link, .pv-auth-legal a) {
  color: var(--cx-ink);
}

body[data-cryex-app] .auth-gate .pv-auth-submit {
  min-height: 48px;
  box-shadow: none;
  font: 800 16px/1 var(--cx-font-sans);
}

body[data-cryex-app] .auth-gate .pv-auth-remember {
  font: 600 14px/1.3 var(--cx-font-sans);
}

body[data-cryex-app] .auth-gate .pv-auth-link {
  font: 700 14px/1.4 var(--cx-font-sans);
}

body[data-cryex-app] .auth-gate .pv-auth-register-prompt {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--cx-border);
  font-size: 15px;
}

body[data-cryex-app] .auth-gate .pv-auth-legal {
  margin-top: 4px;
}

.pv-auth-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
}

.pv-auth-row .pv-auth-link {
  margin: 0;
}

/* Password field with a Show/Hide button instead of a confirm field. */
.cx-secret {
  position: relative;
  display: block;
}

.cx-secret > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 72px !important;
}

.cx-secret__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  min-width: 60px;
  min-height: 40px;
  padding: 0 10px;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--cx-radius-sm, 6px);
  background: transparent;
  color: inherit;
  font: 700 13px/1 var(--cx-font-sans, inherit);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cx-secret__toggle:focus-visible {
  outline: 3px solid var(--cx-focus, #c5f23a);
  outline-offset: 1px;
}

/* Lets password managers save the new password under the right email. */
.cx-autofill-username {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* ---- Mobile tab bars ----
 * Each app's bottom bar is fixed to the viewport and shown only when signed
 * in. The footer, not the body, reserves room for it, so nothing light shows
 * under the dark footer. Apps set --cx-mobile-nav to their bar height. */
body[data-cryex-app] :where(.mobile-nav, .bottom-nav, .merchant-mobile-nav) {
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

@media (max-width: 920px) {
  body[data-cryex-app][data-auth-state="signed-in"] .cryex-footer {
    padding-bottom: calc(var(--cx-mobile-nav) + env(safe-area-inset-bottom));
  }
}

/* ---- Footer ----
 * One footer for the landing page, every app and the legal pages. The legal
 * pages keep their versioned markup (.legal-footer*), mapped to the same rules. */
:is(.cryex-footer, .legal-footer) {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--cx-bg, #0b1220);
  color: var(--cx-text, #f3f5f8);
  font-family: var(--cx-font-sans, Inter, system-ui, sans-serif);
}

:is(.cryex-footer__inner, .legal-footer__inner) {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  gap: 20px 48px;
}

:is(.cryex-footer__brand, .legal-footer__brand) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: var(--cx-radius, 8px);
  color: #fff;
  text-decoration: none;
}

:is(.cryex-footer__brand, .legal-footer__brand) img {
  display: block;
  width: auto;
  height: 28px;
}

:is(.cryex-footer__identity, .legal-footer__identity) p {
  max-width: 38ch;
  margin: 8px 0 0;
  color: var(--cx-muted, #a3adbd);
  font-size: 13px;
  line-height: 1.5;
}

:is(.cryex-footer__links, .legal-footer__links) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
}

:is(.cryex-footer__links, .legal-footer__links) a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--cx-radius, 8px);
  color: #eef1f5;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

:is(.cryex-footer__links, .legal-footer__links) a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--cx-accent, #c5f23a);
}

:is(.cryex-footer__links, .legal-footer__links) a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

:is(.cryex-footer, .legal-footer) a:focus-visible {
  outline: 3px solid var(--cx-accent, #c5f23a);
  outline-offset: 2px;
  box-shadow: none;
}

:is(.cryex-footer__meta, .legal-footer__meta) {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--cx-muted, #a3adbd);
  font-size: 12px;
}

@media (max-width: 760px) {
  :is(.cryex-footer__inner, .legal-footer__inner) {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 0;
  }

  :is(.cryex-footer__links, .legal-footer__links) {
    justify-content: flex-start;
    margin-left: -10px;
  }
}

@media (forced-colors: active) {
  :is(.cryex-footer, .legal-footer) {
    border-top: 1px solid CanvasText;
  }
}

/* ---- Sign-in dialog (verification-auth.js) ---- */
.pv-auth-dialog{width:min(92vw,440px);max-width:none;max-height:calc(100dvh - 16px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius-lg,12px);padding:0;background:var(--cx-panel,#121b2e);color:var(--cx-text,#f3f5f8);box-shadow:var(--cx-shadow,0 26px 80px rgba(0,0,0,.45));font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
.pv-auth-dialog::backdrop{background:rgba(3,3,3,.76);backdrop-filter:blur(10px)}
.pv-auth-shell{position:relative;overflow:hidden;padding:34px;background:radial-gradient(circle at 12% 0,rgba(169,214,28,.18),transparent 17rem),radial-gradient(circle at 100% 58%,color-mix(in srgb,var(--pv-accent,#c5f23a) 8%,transparent),transparent 16rem),linear-gradient(155deg,var(--cx-panel-strong,#0b1220),var(--cx-bg,#0b1220))}
.pv-auth-shell::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--cx-accent,#c5f23a),var(--cx-accent-strong,#a9d61c),transparent)}
.pv-auth-close{position:absolute;right:16px;top:16px;display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius,8px);background:rgba(255,255,255,.05);color:var(--cx-muted,#a3adbd);font:600 21px/1 var(--cx-font-sans,Inter,ui-sans-serif,system-ui,sans-serif);cursor:pointer}
.pv-auth-close:hover{background:rgba(255,255,255,.1);color:var(--cx-text,#f3f5f8)}
.pv-auth-brand{display:flex;align-items:center;gap:11px;margin:0 52px 28px 0;color:var(--cx-text,#f3f5f8);font-size:12px;font-weight:900;letter-spacing:.16em}
.pv-auth-mark{display:block;width:32px;height:32px;border-radius:var(--cx-radius,8px);box-shadow:0 9px 24px rgba(0,0,0,.3)}
.pv-auth-kicker{display:inline-flex;margin:0 0 12px;padding:6px 10px;border:1px solid rgba(197,242,58,.2);border-radius:999px;background:rgba(197,242,58,.09);color:var(--cx-accent,#c5f23a);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.pv-auth-dialog h2{margin:0;color:var(--cx-text,#f3f5f8);font-size:clamp(27px,7vw,36px);font-weight:900;line-height:1.02;letter-spacing:-.04em}
.pv-auth-intro{margin:13px 0 25px;color:var(--cx-muted,#a3adbd);font-size:14px;line-height:1.65}
.pv-auth-form{display:grid;gap:16px}.pv-auth-field{display:grid;gap:7px;color:#d1d7e0;font-size:12px;font-weight:800;letter-spacing:.02em}.pv-auth-remember{display:flex;min-height:44px;align-items:center;gap:9px;color:#d1d7e0;font-size:12px;font-weight:800}.pv-auth-remember input{width:18px;height:18px;margin:0}
.pv-auth-field input{width:100%;box-sizing:border-box;min-height:48px;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius,8px);padding:13px 14px;background:#060a12;color:var(--cx-text,#f3f5f8);font:500 15px/1.3 var(--cx-font-sans,Inter,ui-sans-serif,system-ui,sans-serif);transition:border-color .18s,box-shadow .18s}
.pv-auth-field input:focus{border-color:rgba(197,242,58,.72);box-shadow:0 0 0 4px rgba(197,242,58,.14)}
.pv-auth-submit{display:flex;min-height:48px;align-items:center;justify-content:center;border:0;border-radius:var(--cx-radius,8px);padding:0 18px;background:linear-gradient(135deg,var(--cx-accent,#c5f23a),var(--cx-accent-strong,#a9d61c));color:#0b1220;font:900 14px/1 var(--cx-font-sans,Inter,ui-sans-serif,system-ui,sans-serif);cursor:pointer;box-shadow:0 14px 32px rgba(169,214,28,.24)}
.pv-auth-submit:hover{filter:brightness(1.06)}.pv-auth-submit:disabled,.pv-auth-close:disabled{cursor:wait;opacity:.62}
.pv-auth-link{width:fit-content;min-height:32px;margin-top:-9px;padding:3px 0;border:0;background:transparent;color:var(--cx-accent,#c5f23a);font:800 12px/1.4 var(--cx-font-sans,Inter,ui-sans-serif,system-ui,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pv-auth-link:focus-visible,.pv-auth-submit:focus-visible,.pv-auth-close:focus-visible,.pv-auth-field input:focus-visible{outline:3px solid #0b1220!important;outline-offset:3px;box-shadow:0 0 0 6px #c5f23a!important}
.pv-auth-status{min-height:20px;margin:0;color:var(--cx-danger);font-size:13px;line-height:1.45}.pv-auth-status:empty{min-height:0}
.pv-auth-status[data-kind="success"]{color:var(--cx-success)}
.pv-auth-dialog table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed}
.pv-auth-dialog :where(th,td){overflow-wrap:anywhere}
.pv-auth-recovery-actions{display:flex;flex-wrap:wrap;gap:10px}
.pv-auth-recovery-actions .pv-auth-submit{flex:1}
.pv-auth-note{display:flex;gap:9px;align-items:flex-start;margin:21px 0 0;padding-top:18px;border-top:1px solid var(--cx-line,rgba(255,255,255,.09));color:var(--cx-faint,#8a95a8);font-size:11px;line-height:1.5}
.pv-auth-note::before{content:"\2713";display:grid;place-items:center;flex:0 0 18px;height:18px;border-radius:50%;background:var(--cx-accent-soft);color:var(--cx-accent);font-weight:900}
.pv-auth-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pv-auth-brand-copy{display:grid;gap:3px;font-size:12px;font-weight:900;letter-spacing:.13em;line-height:1}
.pv-auth-brand-copy small{color:var(--cx-accent,#c5f23a);font-size:8px;letter-spacing:.2em}
.pv-auth-legal{margin:0;color:var(--cx-muted,#a3adbd);font-size:12px;line-height:1.55}
.pv-auth-legal a,.pv-auth-register-link{display:inline-flex;min-height:44px;align-items:center;border-radius:4px;color:var(--cx-accent,#c5f23a);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.pv-auth-register-prompt{margin:0;color:var(--cx-muted,#a3adbd);font-size:13px;line-height:1.5}
.pv-auth-register-link[aria-disabled="true"]{pointer-events:none;opacity:.58;text-decoration:none}
.pv-auth-form + .pv-auth-register-prompt{margin-top:20px;padding-top:17px;border-top:1px solid var(--cx-line,rgba(255,255,255,.09))}
.pv-auth-legal a:focus-visible,.pv-auth-register-link:focus-visible{outline:3px solid #0b1220;outline-offset:3px;box-shadow:0 0 0 6px #c5f23a}
@media(max-width:520px){.pv-auth-shell{padding:18px 16px max(18px,env(safe-area-inset-bottom))}.pv-auth-dialog{width:calc(100vw - 16px);border-radius:var(--cx-radius-lg,12px)}.pv-auth-brand{margin-bottom:12px}.pv-auth-kicker{margin-bottom:8px}.pv-auth-dialog h2{font-size:27px}.pv-auth-intro{margin:8px 0 12px;line-height:1.45}.pv-auth-form{gap:10px}.pv-auth-link{min-height:24px;margin-top:-3px}.pv-auth-note{margin-top:12px;padding-top:10px}.pv-auth-form .prs-security{padding:8px 10px}}
@media(prefers-reduced-motion:no-preference){.pv-auth-dialog[open]{animation:pv-auth-in .2s ease-out}@keyframes pv-auth-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}}

/* ---- Security check and email confirmation (registration-security.js) ---- */
.prs-security{display:flex;align-items:center;gap:10px;box-sizing:border-box;max-width:100%;min-height:58px;padding:8px 12px;border:1px solid var(--cx-border);border-radius:var(--cx-radius-lg);background:var(--cx-surface-muted);color:var(--cx-ink)}
.prs-security[hidden]{display:none!important}
.prs-security__mark{flex:none;display:grid;box-sizing:border-box;width:20px;height:20px;place-items:center;border:2px solid var(--cx-ink-faint);border-right-color:transparent;border-radius:50%;font:900 12px/1 var(--cx-font-sans);animation:prs-spin .8s linear infinite}
.prs-security__status{flex:1;min-width:0;margin:0;color:var(--cx-ink-muted);font:600 13px/1.4 var(--cx-font-sans)}
.prs-security[data-state="complete"]{border-color:color-mix(in srgb,var(--cx-success) 42%,transparent);background:var(--cx-success-soft)}
.prs-security[data-state="complete"] .prs-security__mark{border-color:var(--cx-success);background:var(--cx-success);color:var(--cx-surface);animation:none}
.prs-security[data-state="complete"] .prs-security__status{color:var(--cx-success)}
.prs-security[data-state="error"]{border-color:color-mix(in srgb,var(--cx-danger) 42%,transparent);background:var(--cx-danger-soft)}
.prs-security[data-state="error"] .prs-security__mark{border-color:var(--cx-danger);color:var(--cx-danger);animation:none}
.prs-security[data-state="error"] .prs-security__status{color:var(--cx-danger)}
@keyframes prs-spin{to{transform:rotate(360deg)}}
.prs-security__retry,.prs-pending__button,.prs-verification__button{min-height:44px;border:1px solid transparent;border-radius:var(--cx-radius,8px);padding:0 16px;font:900 14px/1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
.prs-security__retry{flex:none;min-height:40px;padding:0 12px;border-color:var(--cx-border);background:var(--cx-surface);color:var(--cx-ink)}
.prs-security__retry[hidden]{display:none!important}
.prs-security__retry:focus-visible,.prs-pending__button:focus-visible,.prs-verification__button:focus-visible{outline:3px solid rgba(197,242,58,.46);outline-offset:3px}
.prs-pending{display:grid;gap:14px;margin:14px 0;padding:22px;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius-lg,12px);background:radial-gradient(circle at 0 0,rgba(169,214,28,.15),transparent 16rem),linear-gradient(145deg,var(--cx-panel-strong,#0b1220),var(--cx-bg,#0b1220));color:var(--cx-text,#f3f5f8);box-shadow:0 18px 48px rgba(0,0,0,.2)}
.prs-pending[data-state="delivery-failed"]{border-color:rgba(255,101,104,.42);background:radial-gradient(circle at 0 0,rgba(255,101,104,.12),transparent 15rem),linear-gradient(145deg,#1d0b0b,var(--cx-bg,#0b1220))}
.prs-pending__mark,.prs-verification__mark{display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(169,214,28,.42);border-radius:var(--cx-radius,8px);background:rgba(197,242,58,.1);color:var(--cx-accent,#c5f23a);font:900 22px/1 Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.23)}
.prs-pending[data-state="delivery-failed"] .prs-pending__mark{border-color:rgba(255,101,104,.42);background:rgba(255,101,104,.1);color:#ff9a9c}
.prs-pending h2,.prs-verification h1{margin:0;color:var(--cx-text,#f3f5f8);font:900 clamp(23px,6vw,31px)/1.1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.03em}
.prs-pending p,.prs-verification p{margin:0;color:var(--cx-muted,#a3adbd);font:500 14px/1.62 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.prs-pending__email{display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;padding:9px 11px;border:1px solid var(--cx-line,rgba(255,255,255,.09));border-radius:var(--cx-radius,8px);background:rgba(255,255,255,.055);color:var(--cx-accent,#c5f23a);font:800 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif}
.prs-pending__actions,.prs-verification__actions{display:flex;flex-wrap:wrap;gap:9px}
.prs-pending__button,.prs-verification__button{background:linear-gradient(135deg,var(--cx-accent,#c5f23a),var(--cx-accent-strong,#a9d61c));color:#0b1220;box-shadow:0 12px 30px rgba(169,214,28,.22)}
.prs-pending__button--secondary,.prs-verification__button--secondary{border-color:var(--cx-line-strong,rgba(255,255,255,.17));background:rgba(255,255,255,.055);color:var(--cx-text,#f3f5f8);box-shadow:none}
.prs-pending__resend{border-top:1px solid var(--cx-line,rgba(255,255,255,.09));padding-top:13px}
.prs-pending__resend summary{width:fit-content;cursor:pointer;color:var(--cx-accent,#c5f23a);font:800 14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
.prs-pending__resend form{display:grid;gap:11px;margin-top:12px}
.prs-pending__resend-status{min-height:20px;color:var(--cx-muted,#a3adbd);font:650 13px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}
.prs-verification-dialog{width:min(92vw,500px);max-width:none;max-height:min(760px,calc(100dvh - 24px));padding:0;overflow:auto;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius-lg,12px);background:var(--cx-panel,#121b2e);color:var(--cx-text,#f3f5f8);box-shadow:var(--cx-shadow,0 26px 80px rgba(0,0,0,.45));color-scheme:dark}
.prs-verification-dialog::backdrop{background:rgba(3,3,3,.76);backdrop-filter:blur(10px)}
.prs-verification{display:grid;gap:16px;padding:32px;background:radial-gradient(circle at 0 0,rgba(169,214,28,.16),transparent 17rem),linear-gradient(145deg,var(--cx-panel-strong,#0b1220),var(--cx-bg,#0b1220))}
.prs-verification[data-state="error"] .prs-verification__mark{border-color:color-mix(in srgb,var(--cx-danger) 42%,transparent);background:var(--cx-danger-soft);color:var(--cx-danger)}
.prs-verification[data-state="success"] .prs-verification__mark{border-color:color-mix(in srgb,var(--cx-success) 42%,transparent);background:var(--cx-success-soft);color:var(--cx-success)}
.prs-verification__status{min-height:21px}
.prs-verification__form{display:grid;gap:14px}
.prs-verification__field{display:grid;gap:7px;color:#d1d7e0;font:800 12px/1.35 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.prs-verification__field input{width:100%;box-sizing:border-box;min-height:48px;border:1px solid var(--cx-line-strong,rgba(255,255,255,.17));border-radius:var(--cx-radius,8px);padding:13px 14px;background:#060a12;color:var(--cx-text,#f3f5f8);font:500 15px/1.3 var(--cx-font-sans,Inter,ui-sans-serif,system-ui,sans-serif);outline:0}
.prs-verification__field input:focus{border-color:rgba(197,242,58,.72);box-shadow:0 0 0 4px rgba(197,242,58,.14)}
.prs-verification__hint{margin-top:-5px!important;font-size:12px!important}
.prs-verification__legal{font-size:12px!important;line-height:1.55!important}
.prs-verification__legal a{display:inline-flex;min-height:44px;align-items:center;border-radius:4px;color:var(--cx-accent,#c5f23a);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.prs-verification__legal a:focus-visible{outline:3px solid rgba(197,242,58,.46);outline-offset:3px}
.prs-verification__button:disabled{cursor:wait;opacity:.62}
@media(max-width:520px){
.prs-security{padding:8px 10px}
.prs-pending{padding:18px}
.prs-pending__actions,.prs-verification__actions{display:grid;grid-template-columns:1fr}
.prs-pending__button,.prs-verification__button{width:100%}
.prs-verification-dialog{width:calc(100vw - 20px);border-radius:var(--cx-radius-lg,12px)}
.prs-verification{padding:25px 20px}
}
@media(prefers-reduced-motion:reduce){.prs-verification-dialog[open],.prs-security__mark{animation:none!important}}
@media(forced-colors:active){.prs-security,.prs-pending,.prs-verification-dialog{border:1px solid CanvasText}.prs-security__retry,.prs-pending__button,.prs-verification__button{border:1px solid ButtonText}}