/* ============================================================
   Mobile hardening (applies to every page via this shared sheet)
   ============================================================ */
/* No element may force the page wider than the screen → kills the
   sideways-scroll / cut-off-on-the-right problem on phones. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Long unbreakable tokens (activation codes, UUIDs, URLs) must wrap
   instead of widening the layout. */
body { overflow-wrap: break-word; word-break: break-word; }
/* iOS Safari auto-zooms when you focus an input whose font-size is < 16px,
   which makes the whole page jump/zoom and look broken. Force 16px on phones
   (desktop keeps the smaller .95rem look from .input-rich below). */
@media (max-width: 640px) {
  .input-rich { font-size: 16px; }
}

/* The full public navigation needs more room than Tailwind's lg breakpoint.
   Keep the compact menu until it can fit beside the product brand cleanly. */
.site-nav-desktop { display: none; }
.site-nav-mobile { display: block; }
@media (min-width: 1380px) {
  .site-nav-desktop { display: flex; }
  .site-nav-mobile { display: none; }
}

/* One navigation component for every activation form and result page. */
.activation-nav-menu { position: relative; }
.activation-nav-link, .activation-mobile-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .5rem .65rem;
  border-radius: .65rem;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.25;
}
.activation-menu-trigger { cursor: pointer; list-style: none; user-select: none; }
.activation-menu-trigger::-webkit-details-marker { display: none; }
.activation-nav-link:hover, .activation-menu-trigger:hover { background: #f4f4f5; }
.dark .activation-nav-link:hover, .dark .activation-menu-trigger:hover { background: #27272a; }
.activation-nav-link[aria-current="page"] { color: #4338ca; background: #eef2ff; }
.dark .activation-nav-link[aria-current="page"] { color: #c7d2fe; background: #312e81; }
.activation-store-link { color: #4f46e5; font-weight: 700; }
.dark .activation-store-link { color: #c4b5fd; }
.activation-nav-link:focus-visible, .activation-menu-trigger:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}
.activation-nav-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 50;
  width: 16rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .4rem;
  border: 1px solid #e4e4e7;
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 12px 35px #18181b26;
}
.dark .activation-nav-panel { background: #18181b; border-color: #3f3f46; }
.activation-nav-panel .activation-nav-link { display: flex; justify-content: flex-start; width: 100%; }
.activation-nav-divider { height: 1px; margin: .35rem .5rem; background: #e4e4e7; }
.dark .activation-nav-divider { background: #3f3f46; }
@media (max-width: 479px) {
  .activation-mobile-trigger { width: 2.75rem; padding: .5rem; }
  .activation-mobile-trigger > span { display: none; }
  .site-nav-mobile .activation-nav-panel { position: fixed; top: 4.75rem; left: 1rem; right: 1rem; width: auto; }
}

/* Shared header controls are used by both storefront and public activation
   pages. Keep their touch target and SVG dimensions independent of store.css. */
.store-header-inner, .store-header-brand, .store-header-nav { min-width: 0; }
.store-header-nav { flex: 0 0 auto; }
.store-header-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  flex: 0 0 2.75rem;
  line-height: 1;
}
.store-language-menu { flex: 0 0 auto; }
.store-language-trigger::-webkit-details-marker { display: none; }
.store-theme-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 340px) {
  .store-header-control { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; }
}

/* Premium polish on top of Tailwind. */
:root {
  --grad-from: #6366f1;  /* indigo-500 */
  --grad-via:  #8b5cf6;  /* violet-500 */
  --grad-to:   #d946ef;  /* fuchsia-500 */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Subtle mesh-gradient page background — radial blobs blurred into a soft canvas. */
.site-bg {
  background-color: #fafafa;
  background-image:
    radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.10) 0px, transparent 50%),
    radial-gradient(at 88% 14%, rgba(217, 70, 239, 0.10) 0px, transparent 50%),
    radial-gradient(at 50% 96%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
  transition: background-color .25s ease;
}
.dark .site-bg {
  background-color: #09090b;
  background-image:
    radial-gradient(at 12% 18%, rgba(99, 102, 241, 0.18) 0px, transparent 50%),
    radial-gradient(at 88% 14%, rgba(217, 70, 239, 0.14) 0px, transparent 50%),
    radial-gradient(at 50% 96%, rgba(139, 92, 246, 0.12) 0px, transparent 50%);
}

/* Card with subtle ring + shadow on hover. */
.card {
  background: #ffffff;
  border: 1px solid rgba(228, 228, 231, 0.7);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 10px 30px -12px rgba(99, 102, 241, 0.10);
  transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.card:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -12px rgba(99, 102, 241, 0.18);
}
.dark .card {
  background: #18181b;
  border-color: rgba(63, 63, 70, 0.7);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 10px 30px -12px rgba(99, 102, 241, 0.15);
}
.dark .card:hover {
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 18px 40px -12px rgba(139, 92, 246, 0.25);
}

/* The cancellation view is intentionally a compact single-action form.
   Keep this semantic class in the shared CSS instead of relying on a newly
   added Tailwind utility that may not exist in the precompiled bundle yet. */
.cancel-subscription-width {
  width: 100%;
  max-width: 34rem;
}
.cancel-subscription-card {
  width: 100%;
}
.cancel-subscription-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .75rem;
  border-radius: 1rem;
}

/* Gradient-filled primary button. */
.btn-primary {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-via));
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.55);
  transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.7); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { filter: grayscale(.4) opacity(.7); cursor: not-allowed; }

/* Input look — taller, soft border, gradient ring on focus. */
.input-rich {
  width: 100%;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #18181b;
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  font-size: 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .25s ease;
}
.input-rich::placeholder { color: #a1a1aa; }
.input-rich:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
.dark .input-rich {
  background: #0f0f10;
  border-color: #3f3f46;
  color: #fafafa;
}
.dark .input-rich::placeholder { color: #52525b; }
.dark .input-rich:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.30);
}

/* Spinner used on the status page. */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(99,102,241,0.25);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Gradient text helper. */
.text-gradient {
  background-image: linear-gradient(135deg, var(--grad-from), var(--grad-via), var(--grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Step indicator chip. */
.step-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; padding: .3rem .65rem;
  background: rgba(99,102,241,0.08);
  color: #4338ca;
  border-radius: 999px;
  border: 1px solid rgba(99,102,241,0.18);
}
.step-chip .num {
  width: 18px; height: 18px; border-radius: 999px;
  background: #6366f1; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .7rem;
}
.dark .step-chip {
  background: rgba(99,102,241,0.15);
  color: #c7d2fe;
  border-color: rgba(99,102,241,0.30);
}

/* Stat-chip — small social-proof / ETA pill below hero. */
.stat-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; padding: .25rem .6rem;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(228, 228, 231, 0.8);
  color: #52525b;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.dark .stat-chip {
  background: rgba(24, 24, 27, 0.7);
  border-color: rgba(63, 63, 70, 0.7);
  color: #a1a1aa;
}

/* FAQ accordion — uses native <details>/<summary> so no JS. */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #18181b;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-arrow {
  color: #a1a1aa;
  transition: transform .2s ease;
  font-size: 0.85rem;
}
.faq-item[open] .faq-arrow { transform: rotate(180deg); color: #6366f1; }
.faq-item .faq-body {
  padding: 0 1.1rem 1.1rem;
  font-size: 0.875rem;
  color: #3f3f46;
  line-height: 1.55;
  border-top: 1px solid #f4f4f5;
  padding-top: 0.85rem;
  margin-top: -0.25rem;
}
.faq-item[open] summary { color: #4f46e5; }
.dark .faq-item summary { color: #fafafa; }
.dark .faq-item[open] summary { color: #a5b4fc; }
.dark .faq-item .faq-body { color: #d4d4d8; border-top-color: #27272a; }
.dark .faq-item .faq-arrow { color: #71717a; }
.dark .faq-item[open] .faq-arrow { color: #818cf8; }

/* ============================================================
   Admin dark theme
   The admin templates predate the public dark palette and contain many
   light-only utility classes. Keep the compatibility layer scoped to admin
   pages so public product pages remain untouched.
   ============================================================ */
.dark body.admin-page {
  color-scheme: dark;
}

.dark body.admin-page .bg-white {
  background-color: #18181b !important;
}
.dark body.admin-page .bg-zinc-50,
.dark body.admin-page .resp-cards tr {
  background-color: #18181b !important;
}
.dark body.admin-page .bg-zinc-100 { background-color: #27272a !important; }
.dark body.admin-page .bg-zinc-200 { background-color: #3f3f46 !important; }
.dark body.admin-page .bg-zinc-300 { background-color: #52525b !important; }

/* Pale status/capacity tiles become low-contrast tinted surfaces. */
.dark body.admin-page :is(.bg-rose-50, .bg-rose-50\/40, .bg-pink-50\/40) {
  background-color: rgba(136, 19, 55, .22) !important;
}
.dark body.admin-page :is(.bg-rose-100) {
  background-color: rgba(159, 18, 57, .30) !important;
}
.dark body.admin-page :is(.bg-red-50) {
  background-color: rgba(127, 29, 29, .28) !important;
}
.dark body.admin-page :is(.bg-amber-50, .bg-amber-50\/40, .bg-yellow-50\/40,
                           .bg-amber-100) {
  background-color: rgba(120, 53, 15, .25) !important;
}
.dark body.admin-page :is(.bg-emerald-50, .bg-emerald-50\/40, .bg-emerald-100,
                           .bg-teal-50, .bg-teal-50\/40, .bg-teal-100) {
  background-color: rgba(6, 78, 59, .24) !important;
}
.dark body.admin-page :is(.bg-sky-50, .bg-sky-50\/40, .bg-sky-100,
                           .bg-cyan-50, .bg-cyan-50\/40, .bg-cyan-100,
                           .bg-blue-50\/40, .bg-blue-100) {
  background-color: rgba(12, 74, 110, .25) !important;
}
.dark body.admin-page :is(.bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-100,
                           .bg-violet-50, .bg-violet-50\/40, .bg-violet-100,
                           .bg-purple-100) {
  background-color: rgba(76, 29, 149, .24) !important;
}

/* Borders and table dividers must not stay almost white in dark mode. */
.dark body.admin-page :is(.border, .border-b, .border-t) {
  border-color: #3f3f46;
}
.dark body.admin-page :is(.border-zinc-100, .border-zinc-200, .border-zinc-300) {
  border-color: #3f3f46 !important;
}
.dark body.admin-page :is(.border-rose-100, .border-rose-200,
                           .border-pink-100, .border-red-200) {
  border-color: rgba(244, 63, 94, .35) !important;
}
.dark body.admin-page :is(.border-amber-100, .border-amber-200, .border-amber-300,
                           .border-amber-400,
                           .border-yellow-100) {
  border-color: rgba(245, 158, 11, .35) !important;
}
.dark body.admin-page :is(.border-emerald-100, .border-emerald-200,
                           .border-teal-100, .border-teal-200) {
  border-color: rgba(16, 185, 129, .32) !important;
}
.dark body.admin-page :is(.border-sky-100, .border-sky-200,
                           .border-cyan-100, .border-cyan-200,
                           .border-blue-100, .border-blue-200) {
  border-color: rgba(14, 165, 233, .32) !important;
}
.dark body.admin-page :is(.border-indigo-100, .border-indigo-200,
                           .border-violet-100, .border-violet-200,
                           .border-purple-200,
                           .border-purple-300) {
  border-color: rgba(139, 92, 246, .35) !important;
}

/* Light-mode text utilities need brighter dark-mode counterparts. */
.dark body.admin-page :is(.text-zinc-900, .text-zinc-700) { color: #f4f4f5 !important; }
.dark body.admin-page .text-zinc-600 { color: #d4d4d8 !important; }
.dark body.admin-page .text-zinc-500 { color: #a1a1aa !important; }
.dark body.admin-page :is(.text-red-600, .text-red-700, .text-red-800) { color: #fca5a5 !important; }
.dark body.admin-page :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900,
                           .text-yellow-700) { color: #fcd34d !important; }
.dark body.admin-page :is(.text-green-600, .text-green-700, .text-emerald-600,
                           .text-emerald-700, .text-teal-700) { color: #6ee7b7 !important; }
.dark body.admin-page :is(.text-blue-600, .text-blue-700, .text-sky-700,
                           .text-cyan-700) { color: #7dd3fc !important; }
.dark body.admin-page :is(.text-indigo-600, .text-indigo-700, .text-violet-700,
                           .text-purple-600, .text-purple-700, .text-purple-800,
                           .text-pink-700, .text-rose-700) { color: #c4b5fd !important; }

.dark body.admin-page :is(input, select, textarea) {
  background-color: #09090b;
  color: #f4f4f5;
  border-color: #52525b;
}
.dark body.admin-page :is(input, textarea)::placeholder { color: #71717a; }
.dark body.admin-page :is(input, select, textarea):focus {
  outline-color: #818cf8;
  border-color: #818cf8;
}
.dark body.admin-page option { background-color: #18181b; color: #f4f4f5; }

.dark body.admin-page .shadow,
.dark body.admin-page .shadow-sm,
.dark body.admin-page .shadow-md,
.dark body.admin-page .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, .45);
}
.dark body.admin-page .filter-btn {
  background: #27272a;
  color: #d4d4d8;
  border-color: #52525b;
}
.dark body.admin-page .filter-btn:hover { background: #3f3f46; }
.dark body.admin-page .filter-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #818cf8;
}
.dark body.admin-page .resp-cards tr { border-color: #3f3f46 !important; }
.dark body.admin-page .resp-cards td::before { color: #a1a1aa !important; }
.dark body.admin-page .hover\:bg-zinc-50:hover,
.dark body.admin-page .hover\:bg-zinc-100:hover,
.dark body.admin-page .hover\:bg-zinc-200:hover,
.dark body.admin-page .hover\:bg-zinc-300:hover {
  background-color: #3f3f46 !important;
}
.dark body.admin-page .hover\:text-zinc-900:hover,
.dark body.admin-page .hover\:text-zinc-700:hover {
  color: #fff !important;
}

/* ============================================================
   Zoom Pro public activation
   Customer language stays intentionally high-level: request, check,
   activation, result. Provider and payment internals belong in admin logs.
   ============================================================ */
.zoom-public-page {
  --zoom-blue: #2d8cff;
  --zoom-blue-dark: #1269dc;
  --zoom-ink: #172033;
  --zoom-muted: #667085;
  --zoom-line: #dce6f5;
  --zoom-soft: #f4f8ff;
}
.zoom-brand-mark {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  border-radius: .65rem;
  background: linear-gradient(145deg, #4299ff, #1269dc);
  color: #fff;
  box-shadow: 0 8px 18px rgba(45, 140, 255, .26);
}
.zoom-brand-mark svg {
  width: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.zoom-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(14rem, .65fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  min-height: 22rem;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 1px solid rgba(126, 174, 235, .42);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 76% 18%, rgba(122, 196, 255, .58), transparent 31%),
    linear-gradient(135deg, #f9fcff 0%, #eaf4ff 58%, #dbeeff 100%);
  box-shadow: 0 28px 80px -45px rgba(20, 83, 170, .62);
}
.zoom-hero-glow {
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -6rem;
  bottom: -12rem;
  border-radius: 999px;
  background: rgba(45, 140, 255, .25);
  filter: blur(2px);
}
.zoom-hero-content, .zoom-hero-visual { position: relative; z-index: 1; }
.zoom-eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 140, 255, .24);
  border-radius: 999px;
  padding: .42rem .75rem;
  background: rgba(255, 255, 255, .68);
  color: #1767c6;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.zoom-hero h1 {
  max-width: 42rem;
  margin-top: 1rem;
  color: var(--zoom-ink);
  font-size: clamp(2.35rem, 7vw, 4.8rem);
  font-weight: 850;
  line-height: .98;
  letter-spacing: -.055em;
}
.zoom-hero-content > p {
  max-width: 38rem;
  margin-top: 1.15rem;
  color: #506078;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
}
.zoom-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.5rem;
}
.zoom-hero-pills span {
  border: 1px solid rgba(75, 133, 203, .2);
  border-radius: 999px;
  padding: .42rem .7rem;
  background: rgba(255, 255, 255, .72);
  color: #315274;
  font-size: .78rem;
  font-weight: 750;
}
.zoom-hero-visual { display: grid; place-items: center; }
.zoom-camera-card {
  display: grid;
  width: min(100%, 14rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 2.2rem;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.5));
  box-shadow: 0 24px 55px rgba(23, 86, 165, .22), inset 0 1px 0 #fff;
  transform: rotate(3deg);
  backdrop-filter: blur(14px);
}
.zoom-camera-card svg {
  width: 5rem;
  margin-top: 1.25rem;
  fill: none;
  stroke: var(--zoom-blue);
  stroke-width: 1.35;
  stroke-linejoin: round;
}
.zoom-camera-card strong {
  margin-top: -1.7rem;
  color: #145fb9;
  font-size: 1.25rem;
  letter-spacing: .16em;
}
.zoom-camera-card span {
  align-self: start;
  margin-top: -1rem;
  color: #60738b;
  font-size: .78rem;
  font-weight: 700;
}
.zoom-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: start;
}
.zoom-form-card, .zoom-info-card, .zoom-trust-card, .zoom-status-card {
  border: 1px solid var(--zoom-line);
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px -38px rgba(20, 72, 145, .52);
}
.zoom-form-card, .zoom-info-card, .zoom-status-card {
  border-radius: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}
.zoom-section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
.zoom-section-number {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .78rem;
  background: #eaf4ff;
  color: #1767c6;
  font-size: .75rem;
  font-weight: 850;
}
.zoom-section-heading h2 {
  color: var(--zoom-ink);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.zoom-section-heading p {
  margin-top: .28rem;
  color: var(--zoom-muted);
  font-size: .86rem;
  line-height: 1.5;
}
.zoom-alert {
  margin-top: 1.25rem;
  border: 1px solid;
  border-radius: .9rem;
  padding: .85rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
}
.zoom-alert-error { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.zoom-form { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.zoom-form label {
  display: block;
  margin-bottom: .42rem;
  color: #344054;
  font-size: .84rem;
  font-weight: 750;
}
.zoom-public-page .input-rich {
  min-height: 3.15rem;
  border-color: #cfdcec;
  border-radius: .85rem;
  background: #fbfdff;
}
.zoom-public-page .input-rich:focus {
  border-color: var(--zoom-blue);
  box-shadow: 0 0 0 4px rgba(45, 140, 255, .13);
}
.zoom-field-hint {
  margin-top: .45rem;
  color: var(--zoom-muted);
  font-size: .75rem;
  line-height: 1.5;
}
.zoom-help {
  overflow: hidden;
  border: 1px solid #dbe8f8;
  border-radius: 1rem;
  background: var(--zoom-soft);
}
.zoom-help summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: .9rem 2.75rem .9rem 1rem;
  color: #205f9f;
  font-size: .84rem;
  font-weight: 800;
}
.zoom-help summary::-webkit-details-marker { display: none; }
.zoom-help summary:after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--zoom-blue);
  font-size: 1.2rem;
}
.zoom-help[open] summary:after { content: "−"; }
.zoom-help-content {
  display: grid;
  gap: .8rem;
  padding: 0 1rem 1rem;
  color: #4b6077;
  font-size: .8rem;
  line-height: 1.55;
}
.zoom-help-content ol { display: grid; gap: .6rem; }
.zoom-help-content li {
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
}
.zoom-help-content li > span {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border-radius: .5rem;
  background: #dcecff;
  color: #1767c6;
  font-size: .67rem;
  font-weight: 850;
}
.zoom-help-note { color: #275b8f; font-weight: 700; }
.zoom-submit-btn {
  display: inline-flex;
  width: 100%;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border-radius: .9rem;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #3b97ff, #176bd7);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 25px -12px rgba(23, 107, 215, .85);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.zoom-submit-btn:hover { filter: brightness(1.06); box-shadow: 0 15px 30px -12px rgba(23, 107, 215, .9); }
.zoom-submit-btn:active { transform: translateY(1px); }
.zoom-submit-btn:disabled { cursor: wait; filter: saturate(.55); opacity: .72; }
.zoom-submit-btn svg {
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zoom-submit-btn.is-loading svg { animation: zoomArrow 1s ease-in-out infinite; }
@keyframes zoomArrow { 50% { transform: translateX(.22rem); } }
.zoom-privacy-note {
  display: flex;
  gap: .45rem;
  justify-content: center;
  color: #7a8899;
  font-size: .72rem;
  line-height: 1.45;
  text-align: center;
}
.zoom-side-stack { display: grid; gap: 1.25rem; }
.zoom-steps { display: grid; gap: 1rem; margin-top: 1.5rem; }
.zoom-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .8rem;
  position: relative;
}
.zoom-steps li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid #cfe2fa;
  border-radius: 999px;
  background: #f3f8ff;
  color: #1767c6;
  font-size: .72rem;
  font-weight: 850;
}
.zoom-steps strong { color: #26364a; font-size: .88rem; }
.zoom-steps p { margin-top: .2rem; color: var(--zoom-muted); font-size: .78rem; line-height: 1.5; }
.zoom-trust-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  border-radius: 1.25rem;
  padding: 1.2rem;
  background: linear-gradient(145deg, #f1f8ff, #fff);
}
.zoom-trust-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: .75rem;
  background: #d8edff;
  color: #1767c6;
  font-weight: 900;
}
.zoom-trust-card strong { color: #26364a; font-size: .88rem; }
.zoom-trust-card p { margin-top: .3rem; color: var(--zoom-muted); font-size: .77rem; line-height: 1.55; }

/* Zoom status page */
.zoom-status-hero { display: grid; justify-items: center; margin: .5rem auto 1.5rem; text-align: center; }
.zoom-status-icon {
  display: grid;
  width: 4.75rem;
  height: 4.75rem;
  place-items: center;
  border: 1px solid #cfe5ff;
  border-radius: 1.55rem;
  background: linear-gradient(145deg, #e9f5ff, #f8fbff);
  color: var(--zoom-blue);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 18px 38px -24px rgba(23, 107, 215, .8);
}
.zoom-status-icon[data-state="completed"] { border-color: #a7f3d0; background: #ecfdf5; color: #059669; }
.zoom-status-icon[data-state="failed"],
.zoom-status-icon[data-state="review"],
.zoom-status-icon[data-state="action_required"] { border-color: #fde68a; background: #fffbeb; color: #d97706; }
.zoom-status-spinner {
  width: 1.8rem;
  height: 1.8rem;
  border: 3px solid rgba(45, 140, 255, .2);
  border-top-color: var(--zoom-blue);
  border-radius: 999px;
  animation: spin .8s linear infinite;
}
.zoom-status-badge {
  margin-top: 1rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: #eaf4ff;
  color: #1767c6;
  font-size: .72rem;
  font-weight: 850;
}
.zoom-status-badge[data-state="completed"] { background: #d1fae5; color: #047857; }
.zoom-status-badge[data-state="failed"],
.zoom-status-badge[data-state="review"],
.zoom-status-badge[data-state="action_required"] { background: #fef3c7; color: #b45309; }
.zoom-status-hero h1 {
  margin-top: .75rem;
  color: var(--zoom-ink);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -.04em;
}
.zoom-status-hero > p { max-width: 36rem; margin-top: .55rem; color: var(--zoom-muted); line-height: 1.65; }
.zoom-progress-labels { display: flex; justify-content: space-between; gap: .4rem; color: #7a8899; font-size: .68rem; font-weight: 700; }
.zoom-progress-track { height: .5rem; overflow: hidden; margin-top: .65rem; border-radius: 999px; background: #e8eef6; }
.zoom-progress-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3b97ff, #15b8d6); transition: width .45s ease; }
.zoom-request-box {
  margin-top: 1.5rem;
  border: 1px solid #d8e6f6;
  border-radius: 1rem;
  padding: 1rem;
  background: #f8fbff;
}
.zoom-request-box > div { display: grid; gap: .35rem; }
.zoom-request-box span { color: #708096; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.zoom-request-box strong { overflow-wrap: anywhere; color: #1f4978; font-size: .88rem; }
.zoom-request-box p { margin-top: .7rem; color: #7a8899; font-size: .74rem; line-height: 1.45; }
.zoom-status-details { margin-top: 1rem; }
.zoom-status-details > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #e5edf6; padding-top: 1rem; font-size: .84rem; }
.zoom-status-details dt { color: #708096; }
.zoom-status-details dd { color: #26364a; font-weight: 800; text-align: right; }
.zoom-status-action { display: grid; justify-items: center; gap: .55rem; margin-top: 1.35rem; }
.zoom-status-action p { color: #7a8899; font-size: .72rem; text-align: center; }
.zoom-status-back { margin-top: 1.2rem; text-align: center; }
.zoom-status-back a { color: #64748b; font-size: .82rem; font-weight: 700; }
.zoom-status-back a:hover { color: #1767c6; }

.dark .zoom-hero {
  border-color: rgba(77, 137, 209, .36);
  background:
    radial-gradient(circle at 76% 18%, rgba(44, 132, 220, .28), transparent 32%),
    linear-gradient(135deg, #111827 0%, #111d31 58%, #102a49 100%);
}
.dark .zoom-eyebrow, .dark .zoom-hero-pills span { border-color: rgba(147, 197, 253, .2); background: rgba(15, 23, 42, .54); color: #bfdbfe; }
.dark .zoom-hero h1, .dark .zoom-section-heading h2, .dark .zoom-status-hero h1 { color: #f8fafc; }
.dark .zoom-hero-content > p { color: #cbd5e1; }
.dark .zoom-camera-card { border-color: rgba(147,197,253,.22); background: linear-gradient(145deg, rgba(30,41,59,.9), rgba(15,23,42,.62)); }
.dark .zoom-camera-card span { color: #94a3b8; }
.dark .zoom-form-card, .dark .zoom-info-card, .dark .zoom-trust-card, .dark .zoom-status-card { border-color: #334155; background: rgba(15, 23, 42, .9); }
.dark .zoom-section-number, .dark .zoom-steps li > span { border-color: #284e78; background: #172c46; color: #93c5fd; }
.dark .zoom-section-heading p, .dark .zoom-field-hint, .dark .zoom-steps p, .dark .zoom-trust-card p, .dark .zoom-status-hero > p { color: #94a3b8; }
.dark .zoom-form label, .dark .zoom-steps strong, .dark .zoom-trust-card strong, .dark .zoom-status-details dd { color: #e2e8f0; }
.dark .zoom-public-page .input-rich { border-color: #3d526c; background: #0b1422; color: #f8fafc; }
.dark .zoom-help { border-color: #294767; background: #101f34; }
.dark .zoom-help summary, .dark .zoom-help-note { color: #93c5fd; }
.dark .zoom-help-content { color: #b4c3d5; }
.dark .zoom-trust-card { background: linear-gradient(145deg, #11233a, #0f172a); }
.dark .zoom-trust-icon { background: #18385d; color: #93c5fd; }
.dark .zoom-status-icon { border-color: #284e78; background: #12233a; }
.dark .zoom-request-box { border-color: #304c6b; background: #0b1728; }
.dark .zoom-request-box strong { color: #bfdbfe; }
.dark .zoom-progress-track { background: #243244; }
.dark .zoom-status-details > div { border-color: #2d4057; }

@media (max-width: 820px) {
  .zoom-hero { grid-template-columns: 1fr; min-height: 0; }
  .zoom-hero-visual { display: none; }
  .zoom-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .zoom-hero { border-radius: 1.4rem; padding: 1.5rem; }
  .zoom-hero h1 { font-size: 2.4rem; }
  .zoom-hero-pills { align-items: stretch; flex-direction: column; }
  .zoom-hero-pills span { width: 100%; }
  .zoom-form-card, .zoom-info-card, .zoom-status-card { border-radius: 1.2rem; padding: 1.1rem; }
  .zoom-progress-labels { font-size: .58rem; }
  .zoom-status-details > div { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .zoom-status-details dd { text-align: left; }
}

/* Telegram Premium follows the same compact activation layout as Claude/Grok. */
.telegram-brand-mark {
  display: grid; width: 2rem; height: 2rem; place-items: center;
  border-radius: .75rem; background: linear-gradient(145deg,#39b6f4,#168bd1);
  box-shadow: 0 10px 22px -12px rgba(14,143,211,.9);
}
.telegram-brand-mark svg { width: 1.2rem; height: 1.2rem; fill: #fff; }
.telegram-public-page.site-bg {
  background-image:
    radial-gradient(at 12% 18%, rgba(14,165,233,.11) 0, transparent 50%),
    radial-gradient(at 88% 14%, rgba(6,182,212,.09) 0, transparent 50%),
    radial-gradient(at 50% 96%, rgba(37,99,235,.07) 0, transparent 50%);
}
.dark .telegram-public-page.site-bg {
  background-image:
    radial-gradient(at 12% 18%, rgba(14,165,233,.17) 0, transparent 50%),
    radial-gradient(at 88% 14%, rgba(6,182,212,.13) 0, transparent 50%),
    radial-gradient(at 50% 96%, rgba(37,99,235,.11) 0, transparent 50%);
}
.telegram-public-page .step-chip {
  color: #0369a1; background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.2);
}
.telegram-public-page .step-chip .num { background: #0ea5e9; }
.dark .telegram-public-page .step-chip {
  color: #bae6fd; background: rgba(14,165,233,.14);
  border-color: rgba(14,165,233,.3);
}
.telegram-public-page .input-rich:focus {
  border-color: #0ea5e9; box-shadow: 0 0 0 4px rgba(14,165,233,.15);
}
.telegram-primary { background: linear-gradient(135deg,#0ea5e9,#0284c7); }
.telegram-primary:hover {
  box-shadow: 0 10px 24px -6px rgba(2,132,199,.55);
}
.telegram-login-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; border: 0; padding: 0; }
.telegram-login-choice legend { width: 100%; margin-bottom: .55rem; font-size: .875rem; font-weight: 600; }
.telegram-choice {
  display: flex !important; align-items: center; gap: .7rem; cursor: pointer;
  border: 1px solid #e4e4e7; border-radius: .75rem; padding: .8rem;
  background: #fff; transition: border-color .15s,box-shadow .15s,background .15s;
}
.telegram-choice.is-selected { border-color: #38bdf8; background: #f0faff; box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
.telegram-choice input { position: absolute; opacity: 0; pointer-events: none; }
.telegram-choice-icon { display: grid; flex: 0 0 2.25rem; height: 2.25rem; place-items: center; border-radius: .7rem; background: #e0f2fe; color: #087bae; font-weight: 900; }
.telegram-choice > span:last-child { display: grid; gap: .18rem; }
.telegram-choice strong { font-size: .82rem; }
.telegram-choice small { color: #71717a; font-size: .68rem; line-height: 1.35; }
.telegram-state-icon {
  display: grid; width: 3rem; height: 3rem; place-items: center;
  border: 1px solid #bae6fd; border-radius: 999px;
  background: #f0f9ff; color: #0284c7; font-size: 1.4rem; font-weight: 800;
}
.telegram-state-icon[data-state="completed"] { border-color: #a7f3d0; background: #ecfdf5; color: #059669; }
.telegram-state-icon[data-state="failed"],
.telegram-state-icon[data-state="expired"],
.telegram-state-icon[data-state="review"] { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.telegram-spinner { border-color: rgba(2,132,199,.2); border-top-color: #0284c7; }
.telegram-status-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; padding: .35rem .65rem; border-radius: 999px;
  background: #e0f2fe; color: #0369a1; font-size: .75rem; font-weight: 700;
}
.telegram-status-badge[data-state="completed"] { background: #d1fae5; color: #047857; }
.telegram-status-badge[data-state="failed"],
.telegram-status-badge[data-state="expired"],
.telegram-status-badge[data-state="review"] { background: #fee2e2; color: #b91c1c; }
.telegram-progress-labels { display: flex; justify-content: space-between; color: #71717a; font-size: .65rem; }
.telegram-progress-track { height: .5rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #e4e4e7; }
.telegram-progress-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#38bdf8,#0284c7); transition: width .35s ease; }
.telegram-action-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; margin-top: 1.5rem; border: 1px solid #bae6fd; border-radius: .9rem; padding: 1rem; background: #f8fcff; }
.telegram-action-card img { width: min(13.5rem,40vw); height: auto; border-radius: .75rem; background: #fff; padding: .35rem; box-shadow: 0 12px 30px -22px #075985; }
.telegram-action-card h2 { font-size: 1.05rem; font-weight: 700; }
.telegram-action-card p { margin-top: .45rem; color: #52525b; font-size: .8rem; line-height: 1.5; }
.telegram-resend-form { margin-top: .75rem; text-align: center; }
.telegram-resend-form button { color: #087bae; font-size: .78rem; font-weight: 750; }
.dark .telegram-choice { border-color: #334155; background: #101b2a; }
.dark .telegram-choice.is-selected { border-color: #38bdf8; background: #0c2739; }
.dark .telegram-choice small,.dark .telegram-action-card p { color: #a1a1aa; }
.dark .telegram-choice-icon { background: #10354b; color: #7dd3fc; }
.dark .telegram-state-icon { border-color: #075985; background: #082f49; color: #7dd3fc; }
.dark .telegram-state-icon[data-state="completed"] { border-color: #065f46; background: #022c22; color: #6ee7b7; }
.dark .telegram-state-icon[data-state="failed"],
.dark .telegram-state-icon[data-state="expired"],
.dark .telegram-state-icon[data-state="review"] { border-color: #7f1d1d; background: #450a0a; color: #fca5a5; }
.dark .telegram-status-badge { background: #082f49; color: #7dd3fc; }
.dark .telegram-status-badge[data-state="completed"] { background: #022c22; color: #6ee7b7; }
.dark .telegram-status-badge[data-state="failed"],
.dark .telegram-status-badge[data-state="expired"],
.dark .telegram-status-badge[data-state="review"] { background: #450a0a; color: #fca5a5; }
.dark .telegram-progress-track { background: #3f3f46; }
.dark .telegram-action-card { border-color: #164e63; background: #0c1d2b; }
@media (max-width: 580px) {
  .telegram-login-choice,.telegram-action-card { grid-template-columns: 1fr; }
  .telegram-action-card { justify-items: center; text-align: center; }
  .telegram-action-card img { width: min(17rem,82vw); }
}

/* ============================================================
   ChatGPT activation — compact two-column customer flow
   ============================================================ */
.gpt-public-page {
  --gpt-accent: #10a37f;
  --gpt-accent-dark: #087f65;
  --gpt-ink: #17201e;
  --gpt-muted: #68756f;
  --gpt-line: #dce7e3;
}
.gpt-public-page.site-bg {
  background-color: #f7faf9;
  background-image:
    radial-gradient(at 12% 10%, rgba(16,163,127,.12) 0, transparent 43%),
    radial-gradient(at 91% 18%, rgba(34,211,197,.09) 0, transparent 42%),
    radial-gradient(at 48% 100%, rgba(14,116,144,.06) 0, transparent 46%);
}
.gpt-brand-mark {
  display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem;
  place-items: center; border-radius: .68rem;
  background: linear-gradient(145deg, #16b58e, #087f65); color: #fff;
  font-size: .92rem; font-weight: 850;
  box-shadow: 0 9px 20px -10px rgba(8,127,101,.9);
}
.gpt-hero {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .55fr);
  gap: clamp(1rem, 5vw, 3.8rem); align-items: center; min-height: 19rem;
  overflow: hidden; border: 1px solid rgba(75,214,180,.2);
  border-radius: 2rem; padding: clamp(1.8rem, 5vw, 3.7rem);
  background: radial-gradient(circle at 81% 17%, rgba(44,231,194,.2), transparent 30%),
              linear-gradient(135deg, #081513 0%, #0b2420 56%, #0a332b 100%);
  box-shadow: 0 30px 76px -48px rgba(5,92,73,.9); color: #fff;
}
.gpt-hero:before {
  content: ""; position: absolute; width: 30rem; height: 30rem;
  right: -15rem; bottom: -23rem; border: 1px solid rgba(83,241,208,.18);
  border-radius: 999px;
  box-shadow: 0 0 0 3rem rgba(20,193,155,.035), 0 0 0 7rem rgba(20,193,155,.025);
}
.gpt-hero-glow {
  position: absolute; width: 22rem; height: 22rem; left: -13rem; top: -14rem;
  border-radius: 999px; background: rgba(26,223,180,.13); filter: blur(2px);
}
.gpt-hero-copy, .gpt-hero-visual { position: relative; z-index: 1; min-width: 0; }
.gpt-eyebrow {
  display: inline-flex; align-items: center; gap: .48rem;
  border: 1px solid rgba(126,244,217,.19); border-radius: 999px;
  padding: .42rem .74rem; background: rgba(255,255,255,.055); color: #abf5e2;
  font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; backdrop-filter: blur(12px);
}
.gpt-eyebrow i, .gpt-live-badge i {
  width: .43rem; height: .43rem; border-radius: 999px; background: #37e6bc;
  box-shadow: 0 0 0 .22rem rgba(55,230,188,.12);
}
.gpt-hero h1 {
  max-width: 42rem; margin-top: 1rem; color: #fff;
  font-size: clamp(2.15rem, 5.5vw, 3.8rem); font-weight: 850;
  line-height: 1.02; letter-spacing: -.048em;
}
.gpt-hero-copy > p:not(.gpt-hero-note) {
  max-width: 38rem; margin-top: 1rem; color: #c9d8d4;
  font-size: clamp(.96rem, 1.7vw, 1.08rem); line-height: 1.65;
}
.gpt-hero-note { max-width: 41rem; margin-top: .55rem; color: #91aaa3; font-size: .76rem; line-height: 1.55; }
.gpt-route-badge {
  display: inline-flex; align-items: center; min-height: 2rem; margin-top: 1.15rem;
  border: 1px solid rgba(126,244,217,.18); border-radius: 999px;
  padding: .38rem .72rem; background: rgba(255,255,255,.06); color: #d5e9e3;
  font-size: .72rem; font-weight: 750;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.gpt-route-badge[data-route="ios"] { border-color: rgba(55,230,188,.38); background: rgba(16,163,127,.17); color: #a7f3d0; }
.gpt-route-badge[data-route="php"] { border-color: rgba(103,232,249,.32); background: rgba(8,145,178,.16); color: #a5f3fc; }
.gpt-route-badge[data-route="warning"] { border-color: rgba(251,191,36,.34); background: rgba(217,119,6,.13); color: #fde68a; }
.gpt-hero-visual { display: grid; place-items: center; min-height: 13rem; }
.gpt-orbit {
  position: relative; display: grid; width: 13.5rem; height: 13.5rem;
  place-items: center; border: 1px solid rgba(145,241,216,.17);
  border-radius: 999px; box-shadow: inset 0 0 55px rgba(43,221,180,.06);
}
.gpt-orbit:before, .gpt-orbit:after { content: ""; position: absolute; border: 1px solid rgba(145,241,216,.1); border-radius: 999px; }
.gpt-orbit:before { inset: 1.45rem; }
.gpt-orbit:after { inset: 3rem; }
.gpt-orbit-mark {
  display: grid; width: 5rem; height: 5rem; place-items: center;
  border: 1px solid rgba(255,255,255,.24); border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(42,208,169,.95), rgba(8,127,101,.95));
  color: #fff; font-size: 2rem; font-weight: 850;
  box-shadow: 0 18px 45px -18px rgba(52,235,191,.85), inset 0 1px 0 rgba(255,255,255,.35);
  transform: rotate(-3deg);
}
.gpt-orbit-chip {
  position: absolute; border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: .34rem .62rem; background: rgba(4,19,16,.88);
  color: #c7e8df; font-size: .67rem; font-weight: 800;
  box-shadow: 0 10px 24px -15px #000;
}
.gpt-orbit-plus { left: -.65rem; top: 2.2rem; }
.gpt-orbit-go { right: -.2rem; top: 1.15rem; }
.gpt-orbit-pro { right: .35rem; bottom: 1.45rem; color: #d8b4fe; }
.gpt-activation-shell {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  grid-template-areas: "alerts alerts" "form stock" "form guide";
  gap: 1.15rem; margin-top: 1.25rem; align-items: start;
}
.gpt-activation-shell > *, .gpt-form-card > *, .gpt-panel-heading > * { min-width: 0; }
.gpt-alert-stack { grid-area: alerts; display: grid; gap: .65rem; }
.gpt-shell-alert { border: 1px solid; border-radius: 1rem; padding: .88rem 1rem; font-size: .84rem; line-height: 1.5; }
.gpt-shell-alert-error { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.gpt-shell-alert-success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.gpt-shell-alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.gpt-form-card, .gpt-stock-panel, .gpt-guide-card, .gpt-trust-card, .gpt-status-card {
  border: 1px solid var(--gpt-line); background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px -40px rgba(9,91,72,.58);
}
.gpt-form-card, .gpt-stock-panel, .gpt-guide-card, .gpt-status-card { border-radius: 1.45rem; padding: clamp(1.15rem, 3vw, 1.8rem); }
.gpt-form-card { grid-area: form; display: grid; gap: 1.15rem; }
.gpt-stock-panel { grid-area: stock; }
.gpt-guide-card { grid-area: guide; }
.gpt-panel-heading, .gpt-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.gpt-form-heading { justify-content: flex-start; }
.gpt-form-heading > span {
  display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem;
  place-items: center; border-radius: .78rem; background: #e4f7f1;
  color: #087f65; font-size: .72rem; font-weight: 850;
}
.gpt-form-heading h2, .gpt-panel-heading h2 { color: var(--gpt-ink); font-size: 1.28rem; font-weight: 820; line-height: 1.2; letter-spacing: -.025em; }
.gpt-form-heading p { margin-top: .25rem; color: var(--gpt-muted); font-size: .8rem; line-height: 1.45; }
.gpt-panel-kicker { display: block; margin-bottom: .27rem; color: #0c8d70; font-size: .62rem; font-weight: 850; letter-spacing: .1em; }
.gpt-live-badge { display: inline-flex; align-items: center; gap: .42rem; border-radius: 999px; padding: .35rem .56rem; background: #edfaf6; color: #087f65; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.gpt-live-badge i { width: .36rem; height: .36rem; box-shadow: none; }
.gpt-stock-list { display: grid; gap: .58rem; margin-top: 1.1rem; }
.gpt-stock-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem; align-items: center; border: 1px solid #e1ebe7;
  border-radius: .9rem; padding: .72rem .78rem; background: #fbfdfc;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gpt-stock-row.is-selected { border-color: rgba(16,163,127,.52); background: #f0fbf7; box-shadow: 0 0 0 3px rgba(16,163,127,.08); }
.gpt-stock-dot { width: .52rem; height: .52rem; border-radius: 999px; background: #16b58e; box-shadow: 0 0 0 .22rem rgba(22,181,142,.1); }
.gpt-stock-row[data-ready="false"] .gpt-stock-dot { background: #d3a33a; box-shadow: 0 0 0 .22rem rgba(211,163,58,.1); }
.gpt-stock-row strong { display: block; color: #26342f; font-size: .82rem; }
.gpt-stock-row small { display: block; margin-top: .12rem; color: #80908a; font-size: .68rem; }
.gpt-stock-count { min-width: 2.1rem; border-radius: .65rem; padding: .34rem .47rem; background: #e9f7f2; color: #087f65; font-size: .75rem; font-weight: 850; text-align: center; }
.gpt-stock-row[data-ready="false"] .gpt-stock-count { background: #f5f1e7; color: #987229; }
.gpt-stock-note, .gpt-guide-note { margin-top: .8rem; color: #82918b; font-size: .67rem; line-height: 1.5; }
.gpt-guide-steps { display: grid; gap: .85rem; margin-top: 1.05rem; }
.gpt-guide-steps li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .68rem; align-items: start; }
.gpt-guide-steps li > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid #cce8df; border-radius: 999px; background: #f1faf7; color: #087f65; font-size: .66rem; font-weight: 850; }
.gpt-guide-steps strong { color: #2a3733; font-size: .78rem; }
.gpt-guide-steps p { margin-top: .15rem; color: #74827d; font-size: .7rem; line-height: 1.48; }
.gpt-guide-steps a { color: #087f65; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.gpt-guide-steps code { color: #087f65; font-size: .67rem; }
.gpt-guide-note { border-top: 1px solid #e7efec; padding-top: .72rem; }
.gpt-form-card label { display: block; margin-bottom: .42rem; color: #34413d; font-size: .82rem; font-weight: 750; }
.gpt-public-page .gpt-form-card .input-rich { min-width: 0; max-width: 100%; min-height: 3.1rem; border-color: #cfddd8; border-radius: .88rem; background: #fcfefd; }
.gpt-public-page .gpt-form-card textarea.input-rich { min-height: 9.6rem; line-height: 1.55; }
.gpt-public-page .gpt-form-card .input-rich:focus { border-color: var(--gpt-accent); box-shadow: 0 0 0 4px rgba(16,163,127,.12); }
.gpt-field-hint { margin-top: .43rem; color: #7d8b86; font-size: .7rem; line-height: 1.48; }
.gpt-submit-btn {
  display: inline-flex; width: 100%; min-height: 3.2rem; align-items: center;
  justify-content: center; gap: .64rem; border-radius: .9rem; padding: .76rem 1rem;
  background: linear-gradient(135deg, #16aa85, #087f65); color: #fff;
  font-size: .9rem; font-weight: 820; box-shadow: 0 14px 28px -14px rgba(8,127,101,.88);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.gpt-submit-btn:hover { filter: brightness(1.06); box-shadow: 0 17px 32px -14px rgba(8,127,101,.9); }
.gpt-submit-btn:active { transform: translateY(1px); }
.gpt-submit-btn:disabled { cursor: wait; opacity: .72; filter: saturate(.5); }
.gpt-submit-btn svg { width: 1.12rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gpt-submit-btn.is-loading svg { animation: gptArrow 1s ease-in-out infinite; }
@keyframes gptArrow { 50% { transform: translateX(.23rem); } }
.gpt-privacy-note { display: flex; justify-content: center; gap: .38rem; color: #84928d; font-size: .68rem; line-height: 1.45; text-align: center; }
.gpt-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-top: .9rem; }
.gpt-trust-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; border-radius: 1rem; padding: .88rem; }
.gpt-trust-card > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .68rem; background: #e8f7f2; color: #087f65; font-size: .84rem; font-weight: 900; }
.gpt-trust-card strong { display: block; color: #2c3935; font-size: .75rem; }
.gpt-trust-card p { margin-top: .16rem; color: #81908a; font-size: .66rem; line-height: 1.45; }
.gpt-status-hero { display: grid; justify-items: center; margin: .5rem auto 1.35rem; text-align: center; }
.gpt-status-icon {
  display: grid; width: 4.5rem; height: 4.5rem; place-items: center;
  border: 1px solid #bfe8dd; border-radius: 1.45rem;
  background: linear-gradient(145deg,#eafaf5,#f8fffc); color: #0b8d6f;
  font-size: 1.8rem; font-weight: 900;
  box-shadow: 0 18px 38px -25px rgba(8,127,101,.8);
}
.gpt-status-icon[data-state="completed"] { border-color: #a7f3d0; background: #ecfdf5; color: #059669; }
.gpt-status-icon[data-state="failed"] { border-color: #fecaca; background: #fff1f2; color: #dc2626; }
.gpt-status-spinner { width: 1.7rem; height: 1.7rem; border: 3px solid rgba(16,163,127,.18); border-top-color: #10a37f; border-radius: 999px; animation: spin .8s linear infinite; }
.gpt-status-badge { margin-top: .85rem; border-radius: 999px; padding: .34rem .7rem; background: #e7f8f2; color: #087f65; font-size: .7rem; font-weight: 820; }
.gpt-status-badge[data-state="completed"] { background: #d1fae5; color: #047857; }
.gpt-status-badge[data-state="failed"] { background: #fee2e2; color: #b91c1c; }
.gpt-status-hero h1 { margin-top: .7rem; color: var(--gpt-ink); font-size: clamp(1.9rem,6vw,3rem); font-weight: 850; letter-spacing: -.04em; }
.gpt-status-hero > p { max-width: 37rem; margin-top: .48rem; color: var(--gpt-muted); font-size: .9rem; line-height: 1.6; }
.gpt-status-alert { margin-bottom: .75rem; border: 1px solid; border-radius: 1rem; padding: .85rem 1rem; font-size: .8rem; line-height: 1.5; }
.gpt-status-alert-success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.gpt-status-alert-warning { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.gpt-status-alert-error { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.gpt-status-progress { margin-bottom: 1.3rem; }
.gpt-status-progress-labels { display: flex; justify-content: space-between; gap: .5rem; color: #7c8b85; font-size: .67rem; font-weight: 720; }
.gpt-status-progress-track { height: .52rem; overflow: hidden; margin-top: .6rem; border-radius: 999px; background: #e6efeb; }
.gpt-status-progress-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#16b58e,#22d3c5); transition: width .45s ease; }
.gpt-status-details { border-top: 1px solid #e4ece9; }
.gpt-status-details > div { display: flex; justify-content: space-between; gap: 1.2rem; border-bottom: 1px solid #e4ece9; padding: .85rem 0; font-size: .8rem; }
.gpt-status-details dt { color: #788781; }
.gpt-status-details dd { max-width: 72%; color: #293732; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.gpt-status-action { margin-top: 1rem; border: 1px solid; border-radius: 1rem; padding: 1rem; font-size: .78rem; line-height: 1.5; }
.gpt-status-action-warning { border-color: #f3d58c; background: #fffbeb; color: #8a5a10; }
.gpt-status-action-info { border-color: #bde4d9; background: #f1faf7; color: #246052; }
.gpt-status-action-info p { margin-top: .28rem; }
.gpt-status-action-info form { margin-top: .75rem; }
.gpt-status-back { margin-top: 1.1rem; text-align: center; }
.gpt-status-back a { color: #71817b; font-size: .78rem; font-weight: 700; }
.gpt-status-back a:hover { color: #087f65; }
.dark .gpt-public-page.site-bg { background-color: #070c0b; background-image: radial-gradient(at 12% 10%, rgba(16,163,127,.17) 0, transparent 43%), radial-gradient(at 91% 18%, rgba(34,211,197,.1) 0, transparent 42%); }
.dark .gpt-hero { border-color: rgba(61,220,183,.2); background: radial-gradient(circle at 81% 17%, rgba(28,190,153,.2), transparent 30%), linear-gradient(135deg,#07110f,#0a201c 58%,#082d26); }
.dark .gpt-form-card, .dark .gpt-stock-panel, .dark .gpt-guide-card, .dark .gpt-trust-card, .dark .gpt-status-card { border-color: #273c36; background: rgba(12,22,19,.94); }
.dark .gpt-form-heading h2, .dark .gpt-panel-heading h2, .dark .gpt-stock-row strong, .dark .gpt-guide-steps strong, .dark .gpt-form-card label, .dark .gpt-trust-card strong { color: #e7f2ee; }
.dark .gpt-form-heading p, .dark .gpt-stock-row small, .dark .gpt-guide-steps p, .dark .gpt-field-hint, .dark .gpt-trust-card p, .dark .gpt-stock-note, .dark .gpt-guide-note { color: #82978f; }
.dark .gpt-form-heading > span, .dark .gpt-guide-steps li > span { border-color: #285247; background: #112f27; color: #6ee7c5; }
.dark .gpt-live-badge { background: #102d26; color: #70e8c8; }
.dark .gpt-stock-row { border-color: #283b35; background: #0c1815; }
.dark .gpt-stock-row.is-selected { border-color: rgba(52,211,153,.48); background: #0d241e; box-shadow: 0 0 0 3px rgba(16,163,127,.08); }
.dark .gpt-stock-count { background: #133429; color: #6ee7c5; }
.dark .gpt-stock-row[data-ready="false"] .gpt-stock-count { background: #312817; color: #f3cf76; }
.dark .gpt-guide-note { border-color: #253832; }
.dark .gpt-public-page .gpt-form-card .input-rich { border-color: #344a43; background: #08100e; color: #f0faf7; }
.dark .gpt-public-page .gpt-form-card .input-rich::placeholder { color: #52645e; }
.dark .gpt-trust-card > span { background: #123128; color: #6ee7c5; }
.dark .gpt-status-hero h1, .dark .gpt-status-details dd { color: #e7f2ee; }
.dark .gpt-status-hero > p, .dark .gpt-status-progress-labels, .dark .gpt-status-details dt { color: #82978f; }
.dark .gpt-status-icon { border-color: #285247; background: #112f27; color: #6ee7c5; }
.dark .gpt-status-icon[data-state="completed"] { border-color: #176647; background: #0b2c20; color: #6ee7b7; }
.dark .gpt-status-icon[data-state="failed"] { border-color: #7f1d1d; background: #3e1010; color: #fca5a5; }
.dark .gpt-status-badge { background: #123128; color: #6ee7c5; }
.dark .gpt-status-badge[data-state="completed"] { background: #0b2c20; color: #6ee7b7; }
.dark .gpt-status-badge[data-state="failed"] { background: #3e1010; color: #fca5a5; }
.dark .gpt-status-progress-track { background: #23362f; }
.dark .gpt-status-details, .dark .gpt-status-details > div { border-color: #263a34; }
.dark .gpt-status-action-warning { border-color: #704413; background: #2b200c; color: #f5d68a; }
.dark .gpt-status-action-info { border-color: #285247; background: #0e2821; color: #a7e7d5; }
.dark .gpt-status-alert-success { border-color: #14532d; background: rgba(2,44,34,.45); color: #a7f3d0; }
.dark .gpt-status-alert-warning { border-color: #78350f; background: rgba(69,26,3,.4); color: #fde68a; }
.dark .gpt-status-alert-error { border-color: #7f1d1d; background: rgba(69,10,10,.42); color: #fecaca; }
.dark .gpt-shell-alert-error { border-color: #7f1d1d; background: rgba(69,10,10,.42); color: #fecaca; }
.dark .gpt-shell-alert-success { border-color: #14532d; background: rgba(2,44,34,.45); color: #a7f3d0; }
.dark .gpt-shell-alert-warning { border-color: #78350f; background: rgba(69,26,3,.4); color: #fde68a; }
@media (max-width: 860px) {
  .gpt-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .gpt-hero-visual { display: none; }
  .gpt-activation-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "alerts" "form" "stock" "guide"; }
}
@media (max-width: 620px) {
  .gpt-hero { border-radius: 1.35rem; padding: 1.45rem; }
  .gpt-hero h1 { font-size: 2.25rem; }
  .gpt-hero-note { font-size: .71rem; }
  .gpt-form-card, .gpt-stock-panel, .gpt-guide-card { border-radius: 1.1rem; padding: 1rem; }
  .gpt-panel-heading { align-items: center; }
  .gpt-hero h1 { overflow-wrap: anywhere; }
  .gpt-panel-heading { flex-wrap: wrap; }
  .gpt-trust-grid { grid-template-columns: minmax(0, 1fr); }
  .gpt-status-details > div { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .gpt-status-details dd { max-width: 100%; text-align: left; }
}
/* --------------------------------------------------------------------------
   Fortnite activation — compact working surface, StoreKit/Epic flow
   -------------------------------------------------------------------------- */
.fortnite-public-page {
  --fn-blue: #2563eb;
  --fn-violet: #7c3aed;
  --fn-cyan: #0891b2;
  --fn-ink: #111827;
  color-scheme: light;
  background-color: #fafafa;
  background-image:
    radial-gradient(circle at 15% 4%, rgba(37, 99, 235, .11), transparent 30rem),
    radial-gradient(circle at 88% 18%, rgba(124, 58, 237, .10), transparent 28rem);
}
.dark .fortnite-public-page {
  --fn-ink: #f8fafc;
  color-scheme: dark;
  background-color: #09090b;
  background-image:
    radial-gradient(circle at 15% 4%, rgba(37, 99, 235, .18), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(124, 58, 237, .16), transparent 30rem);
}
.fn-brand { display:flex; align-items:center; gap:.6rem; flex-shrink:0; white-space:nowrap; color:#1d4ed8; font-size:1.05rem; font-weight:800; }
.dark .fn-brand { color:#93c5fd; }
.fn-brand-mark { display:grid; place-items:center; width:2rem; height:2rem; color:#fff; border-radius:.62rem; background:linear-gradient(145deg,var(--fn-blue),var(--fn-violet)); box-shadow:0 8px 22px rgba(37,99,235,.25); font-size:1rem; font-style:italic; }
.fn-brand-suffix { color:#9ca3af; font-weight:500; }
.fn-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }
.fn-intro h1 { max-width:42rem; margin:.4rem 0 .35rem; color:var(--fn-ink); font-size:clamp(1.85rem,4vw,2.7rem); line-height:1.07; font-weight:850; letter-spacing:-.035em; }
.fn-intro p { max-width:44rem; color:#64748b; font-size:1rem; line-height:1.65; }
.dark .fn-intro p { color:#a1a1aa; }
.fn-kicker { color:var(--fn-blue); font-size:.74rem; line-height:1; font-weight:800; letter-spacing:.16em; }
.dark .fn-kicker { color:#93c5fd; }
.fn-stock-summary { display:flex; align-items:center; gap:.7rem; flex:0 0 auto; min-width:12rem; padding:.75rem .9rem; border:1px solid #dbeafe; border-radius:1rem; background:rgba(255,255,255,.82); box-shadow:0 10px 30px rgba(15,23,42,.05); }
.dark .fn-stock-summary { border-color:#1e3a5f; background:rgba(24,24,27,.82); }
.fn-stock-summary strong,.fn-stock-summary small { display:block; }
.fn-stock-summary strong { font-size:.86rem; color:#166534; }
.fn-stock-summary small { margin-top:.12rem; color:#64748b; font-size:.72rem; }
.fn-stock-summary[data-ready="false"] strong { color:#b45309; }
.fn-live-dot { width:.65rem; height:.65rem; border-radius:50%; background:#22c55e; box-shadow:0 0 0 .3rem rgba(34,197,94,.13); }
.fn-stock-summary[data-ready="false"] .fn-live-dot { background:#f59e0b; box-shadow:0 0 0 .3rem rgba(245,158,11,.13); }
.fn-alert-stack { display:grid; gap:.65rem; margin-bottom:1rem; }
.fn-alert { padding:.85rem 1rem; border:1px solid; border-radius:.9rem; font-size:.9rem; line-height:1.5; }
.fn-alert-error { color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.fn-alert-warning { color:#92400e; border-color:#fde68a; background:#fffbeb; }
.dark .fn-alert-error { color:#fecaca; border-color:#7f1d1d; background:rgba(127,29,29,.25); }
.dark .fn-alert-warning { color:#fde68a; border-color:#78350f; background:rgba(120,53,15,.22); }
.fn-layout { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(18rem,.82fr); gap:1rem; align-items:start; }
.fn-card,.fn-confirm-card { border:1px solid rgba(203,213,225,.8); border-radius:1.2rem; background:rgba(255,255,255,.91); box-shadow:0 18px 55px rgba(15,23,42,.07); backdrop-filter:blur(14px); }
.dark .fn-card,.dark .fn-confirm-card { border-color:rgba(63,63,70,.9); background:rgba(24,24,27,.91); box-shadow:0 22px 70px rgba(0,0,0,.24); }
.fn-form { padding:1.35rem; }
.fn-card-heading { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1.2rem; }
.fn-card-heading > span { display:grid; place-items:center; flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:.7rem; color:#fff; background:linear-gradient(145deg,var(--fn-blue),var(--fn-violet)); font-size:.72rem; font-weight:800; }
.fn-card-heading h2 { margin:0; color:var(--fn-ink); font-size:1.05rem; font-weight:800; }
.fn-card-heading p { margin:.18rem 0 0; color:#64748b; font-size:.82rem; line-height:1.45; }
.dark .fn-card-heading p { color:#a1a1aa; }
.fn-card-heading.compact { margin-bottom:.8rem; }
.fn-field { margin-top:1rem; }
.fn-field label { display:block; margin-bottom:.4rem; color:var(--fn-ink); font-size:.88rem; font-weight:700; }
.fn-field input,.fn-field textarea,.fn-action-box textarea { width:100%; border:1px solid #cbd5e1; border-radius:.8rem; padding:.78rem .9rem; color:#111827; background:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.84rem; line-height:1.5; outline:none; transition:border-color .15s,box-shadow .15s; }
.fn-field input { text-transform:uppercase; letter-spacing:.09em; }
.fn-field textarea,.fn-action-box textarea { resize:vertical; }
.fn-field input:focus,.fn-field textarea:focus,.fn-action-box textarea:focus { border-color:#60a5fa; box-shadow:0 0 0 .22rem rgba(37,99,235,.12); }
.dark .fn-field input,.dark .fn-field textarea,.dark .fn-action-box textarea { color:#f4f4f5; border-color:#52525b; background:#18181b; }
.fn-field > p { margin:.38rem 0 0; color:#64748b; font-size:.76rem; line-height:1.45; }
.dark .fn-field > p { color:#a1a1aa; }
.fn-codes-field { margin-top:.2rem; }
.fn-codes-field label { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.fn-codes-field textarea { min-height:10.5rem; text-transform:uppercase; letter-spacing:.055em; }
.fn-code-count { flex:0 0 auto; padding:.22rem .5rem; border-radius:999px; color:#1d4ed8; background:#dbeafe; font-size:.74rem; font-weight:750; letter-spacing:0; }
.dark .fn-code-count { color:#bfdbfe; background:#1e3a8a; }
.fn-saved-account { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; margin-top:1rem; padding:.8rem; border:1px solid #86efac; border-radius:.9rem; background:#f0fdf4; transition:opacity .15s,border-color .15s; }
.dark .fn-saved-account { border-color:#166534; background:rgba(20,83,45,.2); }
.fn-saved-account[data-active="false"] { opacity:.66; border-color:#cbd5e1; background:#f8fafc; }
.dark .fn-saved-account[data-active="false"] { border-color:#52525b; background:#27272a; }
.fn-saved-account-icon { display:grid; place-items:center; width:2.15rem; height:2.15rem; border-radius:.7rem; color:#fff; background:#16a34a; font-weight:850; }
.fn-saved-account small,.fn-saved-account strong,.fn-saved-account div > span { display:block; }
.fn-saved-account small { color:#64748b; font-size:.74rem; }
.fn-saved-account strong { margin:.08rem 0; color:var(--fn-ink); font-size:.92rem; }
.fn-saved-account div > span { color:#64748b; font-size:.76rem; }
.fn-saved-account-actions { display:flex; align-items:center; gap:.4rem; }
.fn-text-button { padding:.4rem .55rem; border:1px solid #93c5fd; border-radius:.55rem; color:#1d4ed8; background:#fff; font-size:.76rem; font-weight:700; cursor:pointer; }
.fn-text-button:hover { border-color:#2563eb; }
.fn-text-button.is-muted { color:#64748b; border-color:#cbd5e1; }
.dark .fn-text-button { color:#bfdbfe; border-color:#1d4ed8; background:#18181b; }
.dark .fn-text-button.is-muted { color:#a1a1aa; border-color:#52525b; }
.fn-auth-step { display:grid; gap:.75rem; margin-top:1rem; padding:.9rem; border:1px solid #bfdbfe; border-radius:.9rem; background:linear-gradient(135deg,#eff6ff,#f5f3ff); }
.dark .fn-auth-step { border-color:#1e40af; background:linear-gradient(135deg,rgba(30,58,138,.25),rgba(76,29,149,.18)); }
.fn-auth-step strong { color:#1e3a8a; font-size:.88rem; }
.dark .fn-auth-step strong { color:#bfdbfe; }
.fn-auth-step p { margin:.25rem 0 0; color:#475569; font-size:.78rem; line-height:1.5; }
.dark .fn-auth-step p { color:#a1a1aa; }
.fn-auth-step code { padding:.08rem .25rem; border-radius:.3rem; background:rgba(255,255,255,.7); font-size:.72rem; }
.dark .fn-auth-step code { background:rgba(0,0,0,.25); }
.fn-epic-link { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; width:max-content; max-width:100%; padding:.65rem .8rem; border:1px solid #93c5fd; border-radius:.7rem; color:#1d4ed8; background:rgba(255,255,255,.75); font-size:.8rem; font-weight:750; }
.fn-epic-link:hover { border-color:#2563eb; background:#fff; }
.dark .fn-epic-link { color:#bfdbfe; border-color:#1d4ed8; background:rgba(15,23,42,.6); }
.fn-epic-link svg,.fn-primary svg { width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fn-primary { display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%; min-height:3rem; margin-top:1.1rem; padding:.75rem 1rem; border:0; border-radius:.82rem; color:#fff; background:linear-gradient(110deg,var(--fn-blue),var(--fn-violet)); box-shadow:0 12px 26px rgba(37,99,235,.22); font-size:.9rem; font-weight:800; cursor:pointer; transition:transform .15s,filter .15s,opacity .15s; }
.fn-primary:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.04); }
.fn-primary:disabled { cursor:not-allowed; opacity:.5; box-shadow:none; }
.fn-primary.is-loading { opacity:.72; }
.fn-privacy { margin:.65rem 0 0; color:#64748b; text-align:center; font-size:.72rem; line-height:1.45; }
.dark .fn-privacy { color:#a1a1aa; }
.fn-side { display:grid; gap:1rem; }
.fn-guide,.fn-stock-card { padding:1.2rem; }
.fn-guide ol { display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }
.fn-guide li { display:flex; align-items:flex-start; gap:.65rem; }
.fn-guide li > span { display:grid; place-items:center; flex:0 0 auto; width:1.55rem; height:1.55rem; border-radius:50%; color:#1d4ed8; background:#dbeafe; font-size:.7rem; font-weight:800; }
.dark .fn-guide li > span { color:#bfdbfe; background:#1e3a8a; }
.fn-guide li strong { display:block; color:var(--fn-ink); font-size:.84rem; }
.fn-guide li p { margin:.15rem 0 0; color:#64748b; font-size:.76rem; line-height:1.45; }
.dark .fn-guide li p { color:#a1a1aa; }
.fn-stock-list { display:grid; gap:.45rem; }
.fn-stock-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:.65rem; background:#f8fafc; }
.dark .fn-stock-row { background:#27272a; }
.fn-stock-row strong { color:var(--fn-ink); font-size:.79rem; }
.fn-stock-row b { color:#166534; font-size:.78rem; }
.dark .fn-stock-row b { color:#86efac; }
.fn-stock-dot { width:.48rem; height:.48rem; border-radius:50%; background:#22c55e; }
.fn-stock-row[data-ready="false"] { opacity:.56; }
.fn-stock-row[data-ready="false"] .fn-stock-dot { background:#94a3b8; }
.fn-stock-row[data-ready="false"] b { color:#64748b; }
.fn-confirm-card { max-width:42rem; margin:1.5rem auto 0; padding:clamp(1.35rem,4vw,2.1rem); text-align:center; }
.fn-confirm-icon,.fn-status-icon { display:grid; place-items:center; width:4rem; height:4rem; margin:0 auto 1rem; border-radius:1.2rem; color:#fff; background:linear-gradient(145deg,#10b981,var(--fn-cyan)); box-shadow:0 16px 35px rgba(8,145,178,.22); font-size:1.6rem; font-weight:850; }
.fn-confirm-icon.is-warning { background:linear-gradient(145deg,#f59e0b,#ef4444); }
.fn-confirm-card h1,.fn-status-hero h1 { margin:.5rem 0 .35rem; color:var(--fn-ink); font-size:clamp(1.55rem,4vw,2.15rem); line-height:1.15; font-weight:850; letter-spacing:-.025em; }
.fn-confirm-card > p,.fn-status-hero > p { margin:0 auto; max-width:36rem; color:#64748b; line-height:1.6; }
.dark .fn-confirm-card > p,.dark .fn-status-hero > p { color:#a1a1aa; }
.fn-confirm-details,.fn-status-details { display:grid; gap:0; margin:1.4rem 0; border:1px solid #e2e8f0; border-radius:.9rem; overflow:hidden; text-align:left; }
.dark .fn-confirm-details,.dark .fn-status-details { border-color:#3f3f46; }
.fn-confirm-details > div,.fn-status-details > div { display:grid; grid-template-columns:minmax(7rem,.8fr) minmax(0,1.4fr); gap:1rem; padding:.72rem .85rem; border-bottom:1px solid #e2e8f0; }
.dark .fn-confirm-details > div,.dark .fn-status-details > div { border-color:#3f3f46; }
.fn-confirm-details > div:last-child,.fn-status-details > div:last-child { border-bottom:0; }
.fn-confirm-details dt,.fn-status-details dt { color:#64748b; font-size:.78rem; }
.fn-confirm-details dd,.fn-status-details dd { margin:0; color:var(--fn-ink); font-size:.82rem; font-weight:700; text-align:right; }
.fn-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.fn-break { overflow-wrap:anywhere; }
.fn-confirm-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.65rem; margin:0 0 1rem; }
.fn-confirm-summary > div { padding:.85rem .75rem; border:1px solid #bfdbfe; border-radius:.85rem; background:linear-gradient(145deg,#eff6ff,#f5f3ff); }
.dark .fn-confirm-summary > div { border-color:#1e3a8a; background:linear-gradient(145deg,rgba(30,58,138,.24),rgba(76,29,149,.18)); }
.fn-confirm-summary small,.fn-confirm-summary strong { display:block; }
.fn-confirm-summary small { color:#64748b; font-size:.72rem; font-weight:700; }
.dark .fn-confirm-summary small { color:#a1a1aa; }
.fn-confirm-summary strong { margin-top:.2rem; color:#1d4ed8; font-size:1.2rem; font-weight:850; }
.dark .fn-confirm-summary strong { color:#bfdbfe; }
.fn-confirm-products { display:grid; gap:.55rem; margin:0 0 1rem; text-align:left; }
.fn-confirm-products > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.75rem .8rem; border:1px solid #dbeafe; border-radius:.8rem; background:#f8fafc; }
.dark .fn-confirm-products > div { border-color:#3f3f46; background:#27272a; }
.fn-confirm-products span,.fn-batch-number { display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:.5rem; color:#1d4ed8; background:#dbeafe; font-size:.72rem; font-weight:850; }
.dark .fn-confirm-products span,.dark .fn-batch-number { color:#bfdbfe; background:#1e3a8a; }
.fn-confirm-products strong { color:var(--fn-ink); font-size:.86rem; }
.fn-confirm-products small { color:#64748b; font-size:.78rem; }
.fn-confirm-warning { padding:.85rem; border:1px solid #fde68a; border-radius:.8rem; color:#78350f; background:#fffbeb; text-align:left; }
.dark .fn-confirm-warning { color:#fde68a; border-color:#78350f; background:rgba(120,53,15,.22); }
.fn-confirm-warning strong { font-size:.86rem; }
.fn-confirm-warning p { margin:.2rem 0 0; font-size:.77rem; line-height:1.5; }
.fn-secondary-link,.fn-status-back a { display:inline-block; margin-top:1rem; color:#64748b; font-size:.82rem; font-weight:650; }
.fn-secondary-link:hover,.fn-status-back a:hover { color:var(--fn-blue); text-decoration:underline; }
.fn-countdown { margin-top:.7rem !important; font-size:.75rem; }
.fn-status-hero { margin:1.2rem auto 1.3rem; text-align:center; }
.fn-status-icon[data-state="purchase_failed"],.fn-status-icon[data-state="restore_failed"] { background:linear-gradient(145deg,#f59e0b,#ef4444); }
.fn-status-badge { display:inline-flex; margin:.15rem 0 .2rem; padding:.28rem .62rem; border-radius:999px; color:#1d4ed8; background:#dbeafe; font-size:.72rem; font-weight:800; }
.dark .fn-status-badge { color:#bfdbfe; background:#1e3a8a; }
.fn-status-badge[data-state="done"] { color:#166534; background:#dcfce7; }
.dark .fn-status-badge[data-state="done"] { color:#86efac; background:#14532d; }
.fn-status-card { padding:1.25rem; }
.fn-progress-labels { display:flex; justify-content:space-between; gap:.5rem; color:#64748b; font-size:.68rem; }
.fn-progress-track { height:.55rem; margin:.5rem 0 1.15rem; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.dark .fn-progress-track { background:#3f3f46; }
.fn-progress-track > div { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--fn-blue),var(--fn-violet)); transition:width .35s ease; }
.fn-spinner { width:1.45rem; height:1.45rem; border:.2rem solid rgba(255,255,255,.38); border-top-color:#fff; border-radius:50%; animation:fn-spin .8s linear infinite; }
@keyframes fn-spin { to { transform:rotate(360deg); } }
.fn-action-box { margin-top:1rem; padding:.9rem; border:1px solid #bfdbfe; border-radius:.85rem; color:#1e3a8a; background:#eff6ff; }
.dark .fn-action-box { color:#bfdbfe; border-color:#1e3a8a; background:rgba(30,58,138,.2); }
.fn-action-box strong { font-size:.88rem; }
.fn-action-box p { margin:.2rem 0 .65rem; font-size:.78rem; line-height:1.5; }
.fn-action-box .fn-epic-link { margin:.1rem 0 .7rem; }
.fn-action-box .fn-primary { margin-top:.65rem; }
.fn-action-warning { color:#78350f; border-color:#fde68a; background:#fffbeb; }
.dark .fn-action-warning { color:#fde68a; border-color:#78350f; background:rgba(120,53,15,.22); }
.fn-action-info { color:#155e75; border-color:#a5f3fc; background:#ecfeff; }
.dark .fn-action-info { color:#a5f3fc; border-color:#155e75; background:rgba(21,94,117,.2); }
.fn-batch-status-list { display:grid; gap:.65rem; margin-top:1rem; }
.fn-batch-status-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.8rem; border:1px solid #e2e8f0; border-radius:.85rem; background:#f8fafc; }
.dark .fn-batch-status-item { border-color:#3f3f46; background:#27272a; }
.fn-batch-status-item strong,.fn-batch-status-item small { display:block; }
.fn-batch-status-item strong { color:var(--fn-ink); font-size:.86rem; }
.fn-batch-status-item small { margin-top:.15rem; color:#64748b; font-size:.76rem; line-height:1.4; }
.fn-batch-status-item > b { color:#1d4ed8; font-size:.76rem; text-align:right; }
.fn-batch-status-item[data-state="done"] > b { color:#15803d; }
.fn-item-progress { height:.3rem; margin-top:.45rem; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.dark .fn-item-progress { background:#3f3f46; }
.fn-item-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--fn-blue),var(--fn-violet)); }
.fn-batch-status-item form { grid-column:2 / -1; }
.fn-compact-button { width:100%; padding:.48rem .65rem; border:1px solid #93c5fd; border-radius:.6rem; color:#1d4ed8; background:#fff; font-size:.76rem; font-weight:750; cursor:pointer; }
.dark .fn-compact-button { color:#bfdbfe; border-color:#1d4ed8; background:#18181b; }
.fn-status-icon[data-state="needs_login"] { background:linear-gradient(145deg,#f59e0b,#ef4444); }
.fn-status-back { text-align:center; }
/* Keep secondary text and status labels readable on the dark surfaces. */
.dark .fn-stock-summary small,
.dark .fn-saved-account small,
.dark .fn-saved-account div > span,
.dark .fn-confirm-details dt,
.dark .fn-status-details dt,
.dark .fn-confirm-products small,
.dark .fn-secondary-link,
.dark .fn-status-back a,
.dark .fn-progress-labels,
.dark .fn-batch-status-item small { color:#a1a1aa; }
.dark .fn-stock-summary strong,
.dark .fn-batch-status-item[data-state="done"] > b { color:#86efac; }
.dark .fn-stock-summary[data-ready="false"] strong { color:#fcd34d; }
.dark .fn-batch-status-item:not([data-state="done"]) > b { color:#bfdbfe; }
.dark .fn-secondary-link:hover,
.dark .fn-status-back a:hover { color:#93c5fd; }
.dark .fn-saved-account[data-active="false"],
.dark .fn-stock-row[data-ready="false"] { opacity:1; }
.dark .fn-stock-row[data-ready="false"] strong,
.dark .fn-stock-row[data-ready="false"] b { color:#a1a1aa; }
@media (max-width: 800px) {
  .fn-intro { align-items:flex-start; flex-direction:column; }
  .fn-stock-summary { width:100%; }
  .fn-layout { grid-template-columns:1fr; }
  .fn-side { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .fn-brand-suffix { display:none; }
  .fn-form,.fn-guide,.fn-stock-card,.fn-status-card { padding:1rem; }
  .fn-confirm-details > div,.fn-status-details > div { grid-template-columns:1fr; gap:.18rem; }
  .fn-confirm-details dd,.fn-status-details dd { text-align:left; }
  .fn-epic-link { width:100%; }
  .fn-saved-account { grid-template-columns:auto minmax(0,1fr); }
  .fn-saved-account-actions { grid-column:1 / -1; }
  .fn-saved-account-actions .fn-text-button { flex:1; }
  .fn-batch-status-item { grid-template-columns:auto minmax(0,1fr); }
  .fn-batch-status-item > b { grid-column:2; text-align:left; }
  .fn-batch-status-item form { grid-column:1 / -1; }
}
/* Persistent Store support contact. */
.store-support-badge {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.25rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, #229ed9, #168acd);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 38px rgba(2, 132, 199, .3);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.store-support-badge:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(2, 132, 199, .38);
}
.store-support-badge:focus-visible {
  outline: 3px solid rgba(56, 189, 248, .48);
  outline-offset: 3px;
}
.store-support-badge svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  fill: currentColor;
}
.store-support-badge strong {
  padding-left: .15rem;
  font-weight: 800;
  opacity: .9;
}
@media (max-width: 520px) {
  .store-support-badge {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: max(.75rem, env(safe-area-inset-bottom));
    min-height: 3rem;
    padding: .65rem .85rem;
  }
  .store-support-badge strong { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .store-support-badge { transition: none; }
}