/* ═══════════════════════════════════════════════════════════════════════
   Nexwave Captive Portal — shared styles
   Design: Stitch “Nexwave Portal” (glass + futuristic minimal, dark)
   Compatible with iOS 12+, Android 5+, Chrome 49+, Safari 10+
   No oklch(), color-mix(), dvh, @layer — hex/rgba only
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design tokens — Stitch Nexwave Portal ─── */
:root {
  /* Background / surfaces */
  --bg:            #131125;
  --bg-void:       #0d0c20;
  --fg:            #e4dffc;
  /* Card surface — frosted glass */
  --card:          rgba(10,13,29,0.72);
  --card-fg:       #e4dffc;
  --card-elevated: rgba(16,22,46,0.90);
  /* Primary electric blue */
  --primary:       #0066ff;
  --primary-fg:    #f8f7ff;
  --primary-glow:  rgba(0,102,255,0.40);
  /* Cyan signal */
  --secondary:     #00eefc;
  --secondary-fg:  #00363a;
  /* Muted */
  --muted:         #1f1d32;
  --muted-fg:      #c2c6d8;
  /* Border */
  --border:        rgba(255,255,255,0.08);
  --border-solid:  #1e2640;
  /* Input */
  --input-bg:      rgba(16,22,46,0.60);
  /* Semantic */
  --destructive:   #ffb4ab;
  --destructive-fg:#690005;
  --success:       #4edea3;
  --success-fg:    #003824;
  --warning:       #f59e0b;
  /* Radii */
  --radius-sm:  8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* Font — Stitch: Space Grotesk / Plus Jakarta Sans / JetBrains Mono */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --max-mobile: 428px;
}

html { min-height: 100%; background: var(--bg); }

button,
[type="button"],
[type="submit"],
[type="reset"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ─── Page layout ─────────────────────────────────────────────────────── */
.portal-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 2rem 1rem 3rem;
}
.portal-page.center-content {
  -webkit-justify-content: center;
  justify-content: center;
}

/* Background orbs — mirrors Flutter DashboardBackgroundV2 */
.portal-page::before,
.portal-page::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.portal-page::before {
  width: 320px;
  height: 320px;
  top: -80px;
  right: -80px;
  background: rgba(0,102,255,0.1);
}
.portal-page::after {
  width: 280px;
  height: 280px;
  bottom: 100px;
  left: -80px;
  background: rgba(16,185,129,0.06);
}

.portal-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
}

/* ─── Page header ─────────────────────────────────────────────────────── */
.portal-header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
}
.portal-header-left {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.portal-header-left .portal-title,
.portal-header-left .portal-subtitle { text-align: left; }

.portal-icon {
  background: var(--primary);
  color: var(--primary-fg);
  padding: 0.75rem;
  border-radius: 50%;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(0,102,255,0.45);
}
.portal-icon.rect {
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
}
.portal-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-title {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: center;
  color: var(--fg);
  letter-spacing: -0.015em;
}
.portal-subtitle {
  font-size: 0.875rem;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.55;
}

/* ─── Cards / Surfaces ────────────────────────────────────────────────── */
.card,
.surface-card,
.choice-card,
.plan-card,
.active-plan,
.campaign-card,
.status-stage-card,
.status-detail-card,
.modal-content,
.bank-transfer-card,
.bank-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.card,
.surface-card,
.choice-card,
.plan-card,
.active-plan,
.campaign-card,
.status-stage-card {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
}

.card-content { padding: 1rem; }
.card-header {
  padding: 1rem 1rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

/* ─── Buttons — NexButton style ───────────────────────────────────────── */
.btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 0 1rem;
  min-height: 48px;
  border: none;
  cursor: pointer;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
  text-decoration: none;
  width: 100%;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.1);
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
  z-index: 0;
}
.btn > * {
  position: relative;
  z-index: 1;
}
.btn:active:not(:disabled)::after {
  opacity: 1;
}
.btn-outline:active:not(:disabled)::after,
.btn-ghost:active:not(:disabled)::after {
  background: rgba(255, 255, 255, 0.06);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: #0066ff;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0,102,255,0.4);
}
.btn-primary:hover:not(:disabled) { opacity: 0.88; }

.btn-outline {
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  border: 1px solid var(--border-solid);
}
.btn-outline:hover:not(:disabled) { background: rgba(255,255,255,0.1); }

.btn-ghost {
  background: transparent;
  color: var(--muted-fg);
  border: none;
  min-height: 40px;
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.05); color: var(--fg); }

.btn-sm  { font-size: 0.8125rem; min-height: 36px; padding: 0 0.75rem; }
.btn-xl  { min-height: 52px; }
.btn-icon { width: auto; min-height: 40px; padding: 0.5rem; }

/* ─── Form inputs — NexInput style ───────────────────────────────────── */
.form-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.375rem;
}
.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-fg);
  letter-spacing: 0.02em;
}
.form-input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-transition: border-color 0.15s, box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,102,255,0.2);
}
.form-error { font-size: 0.8125rem; color: var(--destructive); }
.form-hint  { font-size: 0.8125rem; color: var(--muted-fg); line-height: 1.5; }

/* ─── PIN input ───────────────────────────────────────────────────────── */
.pin-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.75rem;
}
.pin-digit {
  width: 3.1rem;
  height: 3.1rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.pin-digit:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,102,255,0.2);
}

/* ─── Choice cards ────────────────────────────────────────────────────── */
.choice-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
}
.choice-card {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
}
.choice-card-header {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5rem;
}
.choice-icon {
  background: rgba(0,102,255,0.12);
  border: 1px solid rgba(0,102,255,0.2);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  display: -webkit-inline-flex;
  display: inline-flex;
}
.choice-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.choice-title { font-weight: 700; font-size: 1rem; color: var(--fg); }
.choice-desc  { font-size: 0.875rem; color: var(--muted-fg); line-height: 1.55; -webkit-flex: 1; flex: 1; }

.card-phone-note {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted-fg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.625rem;
}
.card-phone-note .cpn-icon { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-shrink: 0; flex-shrink: 0; }
.card-phone-note .cpn-icon svg { width: 13px; height: 13px; fill: none; stroke: var(--muted-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-phone-note .cpn-num  { -webkit-flex: 1; flex: 1; font-weight: 600; letter-spacing: 0.02em; }
.card-phone-note .cpn-locked {
  font-size: 0.6875rem; font-weight: 700;
  background: rgba(245,159,11,0.15);
  color: #fbbf24;
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* ─── Plan grid ───────────────────────────────────────────────────────── */
.plan-grid {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: -0.375rem;
}
.plan-card {
  width: calc(50% - 0.75rem);
  margin: 0.375rem;
  padding: 1rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
}
.plan-name     { font-weight: 700; font-size: 0.9375rem; color: var(--fg); }
.plan-duration { font-size: 0.75rem; color: var(--muted-fg); margin-top: 0.125rem; }
.plan-duration-badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  color: #60a5fa;
  background: rgba(0,102,255,0.12);
  border: 1px solid rgba(0,102,255,0.25);
  border-radius: 6px;
  padding: 0.1rem 0.55rem;
}
.plan-speed-badge {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  color: #34d399;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 6px;
  padding: 0.1rem 0.55rem;
}
.plan-footer {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.plan-price { font-weight: 700; font-size: 1.25rem; color: var(--fg); }
.plan-footer .btn { width: auto; min-height: 36px; padding: 0 0.875rem; font-size: 0.8125rem; }

.connect-page.connect-routing-pending .connect-shell > :not(.connect-routing-card) {
  display: none;
}

.connect-routing-card {
  margin-top: 1.5rem;
}

.plans-loading-card {
  padding: 1.25rem 1rem;
  text-align: center;
}
.plans-loading-card .spinner-wrap {
  padding: 0;
}

/* ─── Plans payment popup ─────────────────────────────────────────────── */
.plans-payment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3,2,19,0.78);
}
.plans-payment-overlay.hidden {
  display: none !important;
}
.plans-payment-modal {
  position: relative;
  width: 100%;
  max-width: 18rem;
  padding: 1.75rem 1.5rem 1.625rem;
  border: 1px solid rgba(0,102,255,0.32);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    165deg,
    rgba(0,102,255,0.2) 0%,
    rgba(0,102,255,0.06) 42%,
    rgba(255,255,255,0.02) 100%
  );
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,102,255,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  text-align: center;
}
.plans-payment-glow {
  position: absolute;
  top: -3rem;
  left: 50%;
  width: 12rem;
  height: 12rem;
  margin-left: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.3) 0%, transparent 68%);
  pointer-events: none;
}
.plans-payment-content {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.875rem;
}
.plans-payment-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.plans-payment-desc {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted-fg);
}

/* ─── Portal feedback popup (WiFi + action errors) ───────────────────── */
.portal-feedback-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3, 2, 19, 0.78);
}
.portal-feedback-overlay.hidden {
  display: none !important;
}
.portal-feedback-modal {
  position: relative;
  width: 100%;
  max-width: 20rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(0, 102, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-align: center;
}
.portal-feedback-glow {
  position: absolute;
  top: -3rem;
  left: 50%;
  width: 12rem;
  height: 12rem;
  margin-left: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.3) 0%, transparent 68%);
  pointer-events: none;
}
.portal-feedback-content {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.75rem;
}
.portal-feedback-icon {
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.portal-feedback-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.portal-feedback-icon-wifi {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.2);
}
.portal-feedback-icon-alert {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.16);
}
.portal-feedback-icon-success {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.35);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}
.portal-feedback-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.portal-feedback-text {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted-fg);
}
.portal-feedback-content .btn {
  width: 100%;
  margin-top: 0.25rem;
}

/* ─── Choose page paid phone chip ─────────────────────────────────────── */
.choose-phone-row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
}
.choose-paid-phone-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(0,102,255,0.35);
  border-radius: var(--radius-sm);
  background: rgba(0,102,255,0.12);
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ─── Change phone badge ──────────────────────────────────────────────── */
.change-phone-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
}
.change-phone-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.change-phone-badge:active {
  background: rgba(0,102,255,0.1);
  border-color: rgba(0,102,255,0.3);
  color: var(--fg);
}
.portal-ap-footer,
.choose-ap-footer {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0.625rem 0 0.25rem;
}
.portal-ap-footer .connect-ap-chip-row,
.choose-ap-footer .connect-ap-chip-row {
  margin-top: 0;
}
.connect-shell > .portal-ap-footer,
.connect-view-stack > .portal-ap-footer,
.connect-view-stack > .choose-ap-footer {
  width: 100%;
}

/* ─── Speed-tier plan catalog ─────────────────────────────────────────── */
.plan-catalog {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}
.speed-tier-tabs {
  display: -webkit-flex;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.125rem 0;
  scrollbar-width: none;
}
.speed-tier-tabs::-webkit-scrollbar { display: none; }
.speed-tier-tab {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 5.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 0.625rem;
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-fg);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.speed-tier-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.06);
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
}
.speed-tier-tab:active::after {
  opacity: 1;
}
.speed-tier-tab.is-active {
  color: var(--fg);
  border-color: rgba(0,102,255,0.5);
  background: rgba(0,102,255,0.14);
  box-shadow: 0 0 0 1px rgba(0,102,255,0.2), 0 4px 14px rgba(0,102,255,0.18);
}
.speed-tier-panels {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.625rem;
}
.speed-tier-panel.hidden { display: none; }
.plan-choice-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  width: 100%;
}
.plan-choice-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  background: rgba(27,25,46,0.92);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
}
.plan-choice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.06);
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
  z-index: 1;
}
.plan-choice-card:active:not(.is-busy)::after {
  opacity: 1;
}
.plan-choice-glow {
  display: none;
}
.plan-choice-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.35rem);
  justify-self: center;
}
.plan-choice-card:active:not(.is-busy) {
  border-color: rgba(0,102,255,0.35);
  box-shadow: 0 8px 24px rgba(0,102,255,0.12);
}
.plan-choice-card.is-active {
  border-color: rgba(0,102,255,0.45);
  box-shadow: 0 0 0 1px rgba(0,102,255,0.2), 0 10px 28px rgba(0,102,255,0.16);
}
.plan-choice-card.is-busy {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}
.plan-choice-head {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border-bottom: 0;
}
.plan-choice-duration {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 0;
  background: #0066ff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f8f7ff;
}
.plan-choice-data {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  color: #c2c6d8;
  text-align: right;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  min-width: 0;
}
.plan-choice-body {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
}
.plan-choice-price {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.03em;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}
.plan-choice-speed-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.05rem;
  padding: 0.28rem 0.4rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(78,222,163,0.35);
  background: rgba(0,130,89,0.22);
  text-align: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 0;
}
.plan-choice-speed-upto {
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.1;
  color: #8c90a1;
}
.plan-choice-speed-value {
  margin-left: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  color: #4edea3;
  white-space: nowrap;
}

/* ─── Plans page (plans.html / PlansPage) ─────────────────────────────── */
.plans-phone-display {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: #94a3b8;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  letter-spacing: 0.04em;
}
.plans-phone-display:empty {
  display: none;
}
.plans-app-promo {
  padding: 1.25rem;
  margin-top: 0.25rem;
}
.plans-app-promo-eyebrow {
  text-align: center;
  margin-bottom: 0.5rem;
}
.plans-app-promo-title {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.875rem;
}
/* ─── Bank transfer card ──────────────────────────────────────────────── */
.bank-card,
.bank-transfer-card { padding: 0; }
.bank-card-header,
.bank-transfer-header {
  padding: 1rem 1.125rem;
  background: rgba(0,102,255,0.07);
  border-bottom: 1px solid var(--border);
}
.bank-card-header .label,
.bank-transfer-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-fg);
}
.bank-card-header .amount,
.bank-transfer-amount {
  font-size: 1.625rem; font-weight: 800;
  margin-top: 0.25rem; color: var(--fg);
}
.bank-card-body,
.bank-transfer-body {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.875rem; padding: 1rem 1.125rem;
}
.bank-row .label,
.bank-transfer-field-label {
  font-size: 0.7rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted-fg);
}
.bank-row .value,
.bank-transfer-field-value {
  margin-top: 0.2rem; font-size: 0.9375rem;
  font-weight: 700; color: var(--fg);
}
.bank-row .value.mono,
.font-mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.06em;
}
.bank-row-with-copy {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  gap: 0.5rem;
}
.bank-card-footer { padding: 0.75rem 1.125rem; border-top: 1px solid var(--border); }
.bank-card-footer .label { font-size: 0.75rem; color: var(--muted-fg); margin-bottom: 0.25rem; }
.countdown { font-family: monospace; font-weight: 700; font-size: 0.9rem; color: var(--fg); }
.bank-card-expired { padding: 0.75rem 1.125rem; border-top: 1px solid var(--border); }
.bank-card-expired span { font-size: 0.875rem; font-weight: 700; color: #fca5a5; }

/* ─── One-time-use warning ────────────────────────────────────────────── */
.one-time-warning {
  border-radius: 9999px;
  border: 1px solid rgba(245,159,11,0.3);
  background: rgba(245,159,11,0.1);
  padding: 0.25rem 0.875rem;
  font-size: 0.6875rem; font-weight: 700;
  color: #fbbf24; text-align: center;
}

/* ─── Separator ───────────────────────────────────────────────────────── */
.separator { border: none; border-top: 1px solid var(--border-solid); margin: 0; }

/* ─── Success state ───────────────────────────────────────────────────── */
.success-icon {
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.success-icon svg { width: 28px; height: 28px; stroke: var(--success); fill: none; }

/* ─── Payment status flow ─────────────────────────────────────────────── */
.status-stage-card  { padding: 1.25rem; }
.status-detail-card { padding: 0.875rem 1rem; }
.status-hero {
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  gap: 0.875rem;
}
.status-hero-icon,
.status-row-icon {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.status-hero-icon { width: 4rem; height: 4rem; border-radius: 50%; }
.status-row-icon  { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); }
.status-hero-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; }
.status-row-icon svg  { width: 20px; height: 20px; stroke: currentColor; fill: none; }

.tone-primary { background: rgba(0,102,255,0.12); color: #60a5fa; }
.tone-success { background: rgba(16,185,129,0.12); color: var(--success); }
.tone-warning { background: rgba(245,159,11,0.12); color: #fbbf24; }

.status-eyebrow    { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.status-text-primary { color: #60a5fa; }
.status-text-success { color: var(--success); }
.status-text-warning { color: #fbbf24; }
.status-title   { font-size: 1.25rem; line-height: 1.2; font-weight: 800; color: var(--fg); margin-top: 0.25rem; }
.status-subtitle { font-size: 0.875rem; line-height: 1.5; color: var(--muted-fg); margin-top: 0.375rem; }

.status-progress-block { margin-top: 1.125rem; }
.status-progress-bar {
  height: 0.375rem; border-radius: 9999px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.status-progress-fill {
  width: 42%; height: 100%; border-radius: 9999px;
  background: var(--primary);
  -webkit-animation: statusProgress 1.5s ease-in-out infinite;
  animation: statusProgress 1.5s ease-in-out infinite;
}
@-webkit-keyframes statusProgress {
  0%   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  50%  { -webkit-transform: translateX(120%);  transform: translateX(120%); }
  100% { -webkit-transform: translateX(260%);  transform: translateX(260%); }
}
@keyframes statusProgress {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(120%); }
  100% { transform: translateX(260%); }
}
.status-progress-note { font-size: 0.75rem; line-height: 1.5; color: var(--muted-fg); margin-top: 0.5rem; }

.status-list { margin-top: 1.125rem; }
.status-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  gap: 0.75rem;
}
.status-row-copy    { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.status-row-title   { font-size: 0.875rem; font-weight: 700; color: var(--fg); }
.status-row-subtitle{ font-size: 0.75rem; line-height: 1.45; color: var(--muted-fg); margin-top: 0.125rem; }

.status-badge {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 700;
  text-align: center; white-space: nowrap;
}
.status-badge-primary { background: rgba(0,102,255,0.15); color: #60a5fa; }
.status-badge-success { background: rgba(16,185,129,0.15); color: #34d399; }
.status-badge-warning { background: rgba(245,159,11,0.15); color: #fbbf24; }
.status-badge-neutral { background: rgba(255,255,255,0.08); color: var(--muted-fg); }

.status-detail-row {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: space-between; justify-content: space-between;
  gap: 0.75rem;
}
.status-detail-label { font-size: 0.875rem; color: var(--muted-fg); }
.status-detail-value { font-size: 0.875rem; font-weight: 700; color: var(--fg); text-align: right; word-break: break-all; }

.status-action-stack {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.75rem;
}

/* ─── Campaign cards ──────────────────────────────────────────────────── */
.campaign-card {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.75rem; padding: 1.25rem;
  -webkit-transition: opacity 0.15s; transition: opacity 0.15s;
}
.campaign-card.disabled { opacity: 0.5; }
.campaign-header {
  display: -webkit-flex; display: flex;
  -webkit-align-items: flex-start; align-items: flex-start;
  -webkit-justify-content: space-between; justify-content: space-between;
  gap: 0.5rem;
}
.campaign-title { font-weight: 700; font-size: 1rem; color: var(--fg); }
.campaign-desc  { font-size: 0.875rem; color: var(--muted-fg); margin-top: 0.125rem; }
.campaign-badge {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  border-radius: 9999px; padding: 0.125rem 0.5rem;
  font-size: 0.75rem; font-weight: 700;
  background: rgba(0,102,255,0.12); color: #60a5fa;
  white-space: nowrap;
}
.campaign-info {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 0.375rem; font-size: 0.75rem; color: var(--muted-fg);
}
.campaign-info svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.campaign-info.success { color: var(--success); }

/* ─── Active plan card ────────────────────────────────────────────────── */
.active-plan {
  padding: 1rem;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.75rem;
}
.active-plan-header {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 0.75rem;
}
.active-plan-icon {
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  padding: 0.5rem;
  display: -webkit-inline-flex; display: inline-flex;
}
.active-plan-icon svg { width: 20px; height: 20px; stroke: var(--success); fill: none; }

/* ─── Dialog / Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.72);
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.modal-content {
  padding: 1.5rem; width: 100%; max-width: 24rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.modal-title { font-size: 1.125rem; font-weight: 700; color: var(--fg); }
.modal-desc  { font-size: 0.875rem; color: var(--muted-fg); margin-top: 0.25rem; }

/* ─── Spinner ─────────────────────────────────────────────────────────── */
.spinner-wrap {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 0.75rem;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@-webkit-keyframes portal-boot-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes portal-boot-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.spinner {
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}
.spinner.sm { width: 24px; height: 24px; }
.spinner.md { width: 40px; height: 40px; }
.spinner.lg { width: 56px; height: 56px; }
.spinner-text     { text-align: center; }
.spinner-title    { font-size: 0.875rem; font-weight: 600; color: var(--muted-fg); }
.spinner-subtitle { font-size: 0.75rem; color: var(--muted-fg); margin-top: 0.25rem; }

/* ─── Toast ───────────────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 9999;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.625rem;
  width: calc(100vw - 2rem);
  max-width: 24rem;
  pointer-events: none;
}
.toast {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  width: 100%;
  pointer-events: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-animation: toastIn 0.3s ease;
  animation: toastIn 0.3s ease;
}
.toast.info {
  background: #0c4a6e;
  color: #e0f2fe;
  border-color: rgba(56,189,248,0.45);
}
.toast.error {
  background: #7f1d1d;
  color: #fecaca;
  border-color: rgba(248,113,113,0.45);
}
.toast.success {
  background: #064e3b;
  color: #a7f3d0;
  border-color: rgba(52,211,153,0.45);
}

.reset-link-sent-panel {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(52,211,153,0.25);
  color: #a7f3d0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.reset-link-sent-panel strong {
  color: var(--success);
  font-size: 0.95rem;
}

.reset-link-sent-hint {
  font-size: 0.78rem;
  color: rgba(167,243,208,0.85);
}

.reset-link-sent-panel.hidden {
  display: none;
}

@-webkit-keyframes toastIn { from { opacity: 0; -webkit-transform: translateY(-0.5rem); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }

/* ─── Expired banner ──────────────────────────────────────────────────── */
.expired-banner {
  border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem; color: #fca5a5;
}

/* ─── Progress ring (payment check) ──────────────────────────────────── */
.progress-ring { display: block; }
.progress-ring-bg   { stroke: rgba(255,255,255,0.08); }
.progress-ring-fill { stroke: var(--primary); -webkit-transition: stroke-dashoffset 0.2s linear; transition: stroke-dashoffset 0.2s linear; }

/* ─── Support button ──────────────────────────────────────────────────── */
.support-btn {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  gap: 0.5rem; width: 100%; padding: 0.625rem;
  position: relative;
  isolation: isolate;
  font-size: 0.8125rem; color: var(--muted-fg);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.support-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.06);
  -webkit-transition: opacity 0.1s ease;
  transition: opacity 0.1s ease;
}
.support-btn:active::after {
  opacity: 1;
}
.support-btn:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
.support-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; position: relative; z-index: 1; }

/* ─── Landing page (index.html) ───────────────────────────────────────── */
.landing-shell { max-width: 26rem; }

/* Bonus hero card — voucher style */
.bonus-hero {
  padding: 0;
  overflow: hidden;
  background: #07101f;
  border: 1px solid rgba(99,102,241,0.2);
}

/* Top section */
.voucher-top {
  position: relative;
  text-align: center;
  padding: 1.5rem 1.25rem 1.25rem;
  overflow: hidden;
}
.voucher-glow {
  position: absolute;
  top: -40px; left: 50%;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.28) 0%, transparent 70%);
  pointer-events: none;
}
.voucher-icon {
  display: inline-block;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  -webkit-flex-shrink: 0; flex-shrink: 0;
  position: relative;
  margin-left: 0.75rem;
}
.voucher-eyebrow {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #60a5fa; margin-bottom: 1rem;
  position: relative;
}
.voucher-offer {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  gap: 0.5rem;
  position: relative;
}
.voucher-num {
  font-size: 5.5rem; font-weight: 900; line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 50px rgba(96,165,250,0.7), 0 0 12px rgba(99,102,241,0.5);
  letter-spacing: -0.05em;
}
.voucher-offer-labels {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  -webkit-align-items: flex-start; align-items: flex-start;
  gap: 0.1rem;
}
.voucher-hrs {
  font-size: 1.5rem; font-weight: 900;
  letter-spacing: 0.04em; color: #fff; line-height: 1;
}
.voucher-sub {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #93c5fd;
}
.voucher-days {
  margin-top: 0.875rem;
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.85);
  position: relative;
}
.voucher-days strong {
  color: #fff; font-weight: 900;
  text-shadow: 0 0 20px rgba(96,165,250,0.5);
}

/* Perforated divider */
.voucher-perf {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  position: relative;
  margin: 0;
}
.voucher-notch {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg);
  -webkit-flex-shrink: 0; flex-shrink: 0;
}
.voucher-notch-l { margin-left: -9px; }
.voucher-notch-r { margin-right: -9px; }
.voucher-dash {
  -webkit-flex: 1; flex: 1;
  border-top: 2px dashed rgba(255,255,255,0.1);
  margin: 0 0.25rem;
}

/* Bottom section */
.voucher-bottom {
  padding: 1rem 1.25rem 1.25rem;
  background: rgba(255,255,255,0.02);
}
.voucher-cta-wrap {
  display: -webkit-flex; display: flex;
  -webkit-justify-content: center; justify-content: center;
  margin-bottom: 0.875rem;
}
.download-claim-badge {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #ffffff;
  background: linear-gradient(135deg, #0066ff 0%, #4f46e5 100%);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 0 18px rgba(0,102,255,0.55);
  -webkit-animation: claim-badge-bounce 1.6s ease-in-out infinite, claim-badge-glow 2.2s ease-in-out infinite;
  animation: claim-badge-bounce 1.6s ease-in-out infinite, claim-badge-glow 2.2s ease-in-out infinite;
}
.download-claim-badge:hover {
  color: #ffffff;
  opacity: 0.95;
}
@-webkit-keyframes claim-badge-bounce {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@keyframes claim-badge-bounce {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
}
@-webkit-keyframes claim-badge-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0,102,255,0.4); }
  50% { box-shadow: 0 0 26px rgba(0,102,255,0.9); }
}
@keyframes claim-badge-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0,102,255,0.4); }
  50% { box-shadow: 0 0 26px rgba(0,102,255,0.9); }
}
.voucher-cta-label {
  font-size: 0.75rem; font-weight: 600;
  text-align: center; color: var(--muted-fg);
  margin-bottom: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Perk checklist */
.hero-perks {
  margin-top: 1.125rem;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.5rem;
}
.hero-perk {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; color: var(--fg);
}
.hero-perk svg { -webkit-flex-shrink: 0; flex-shrink: 0; }

/* Store buttons (horizontal row with icon) */
.store-grid {
  display: -webkit-flex; display: flex;
  gap: 0.625rem;
}
.store-btn {
  -webkit-flex: 1; flex: 1;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: row; flex-direction: row;
  -webkit-align-items: center; align-items: center;
  gap: 0.625rem; padding: 0.75rem 0.875rem;
  border-radius: var(--radius); border: 1px solid rgba(0,102,255,0.3);
  background: rgba(0,102,255,0.1); color: var(--fg);
  text-decoration: none;
  -webkit-transition: background 0.15s; transition: background 0.15s;
}
.store-btn:hover { background: rgba(0,102,255,0.18); }
.store-btn-disabled {
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
  cursor: default; opacity: 0.55;
}
.store-btn-icon {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-flex-shrink: 0; flex-shrink: 0;
  -webkit-align-items: center; align-items: center;
}
.store-btn-text {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.05rem;
}
.store-btn-eyebrow { font-size: 0.65rem; color: var(--muted-fg); letter-spacing: 0.02em; }
.store-btn-label   { font-size: 0.875rem; font-weight: 700; color: var(--fg); line-height: 1.15; }

/* Web CTA panel */
.web-cta-panel {
  padding: 1.375rem;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 1rem;
}
.web-cta-header { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 0.375rem; }
.web-cta-title  { font-size: 1.3rem; font-weight: 900; color: var(--fg); letter-spacing: -0.02em; }
.web-cta-desc   { font-size: 0.875rem; line-height: 1.55; color: var(--muted-fg); }

.section-kicker,
.eyebrow {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #60a5fa;
}

.benefit-panel {
  padding: 1.25rem;
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0;
}
.benefit-list {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 0.875rem; margin-top: 0.875rem;
}
.benefit-item {
  display: -webkit-flex; display: flex;
  gap: 0.75rem; -webkit-align-items: flex-start; align-items: flex-start;
}
.benefit-mark {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  width: 1.875rem; height: 1.875rem;
  border-radius: var(--radius-sm);
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(0,102,255,0.12);
  color: #60a5fa;
  font-size: 0.75rem; font-weight: 800;
  border: 1px solid rgba(0,102,255,0.2);
}
.benefit-title { font-size: 0.9rem; font-weight: 700; color: var(--fg); }
.benefit-copy  { font-size: 0.8125rem; line-height: 1.55; color: var(--muted-fg); margin-top: 0.125rem; }

/* ─── Connect page (connect.html) — primary portal entry ──────────────── */
.connect-page {
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding-top: 2.5rem;
}
.connect-shell {
  max-width: 24rem;
  gap: 1.125rem;
}
.connect-shell > .choice-grid,
.connect-shell > .connect-view-stack {
  width: 100%;
}

.connect-view-stack {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 1.125rem;
  width: 100%;
}
.connect-view-stack > .surface-card,
.connect-view-stack > .portal-support-footer {
  width: 100%;
}
.portal-support-footer {
  width: 100%;
}
.portal-support-footer .support-btn {
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.connect-header {
  padding: 0 0.125rem 0.25rem;
}
.connect-header-center {
  text-align: center;
}
.connect-brand-wordmark {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.35em;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.connect-brand-nexwave {
  color: var(--fg);
}
.connect-brand-hotspot {
  color: var(--primary);
  text-transform: capitalize;
}
.connect-lead {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted-fg);
}
.connect-ap-chip-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.connect-ap-chip-row.hidden {
  display: none;
}
.connect-ap-chip {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: #93c5fd;
  background: rgba(0,102,255,0.1);
  border: 1px solid rgba(0,102,255,0.2);
}
.connect-wifi-band-chip {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary);
  background: #fff;
  border: 1px solid rgba(0,102,255,0.14);
}
.connect-wifi-band-chip.hidden {
  display: none;
}

.connect-main-card {
  padding: 1.375rem 1.25rem 1.25rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
}
.connect-field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-fg);
}
.connect-input {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.9375rem 1rem;
  border-radius: var(--radius-lg);
}

.connect-services {
  padding: 1.125rem 1.25rem;
}
.connect-services .btn {
  width: 100%;
}
.connect-services .connect-service-desc + .btn,
.connect-services .btn-primary.btn-xl {
  margin-top: 0.75rem;
}
.connect-value-tags {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.connect-value-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(0,102,255,0.12);
  border: 1px solid rgba(0,102,255,0.22);
}
.connect-value-tag strong {
  color: #60a5fa;
  font-weight: 800;
}
.connect-value-tag-free {
  color: #6ee7b7;
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.28);
}
.connect-services-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-fg);
  margin-bottom: 0.875rem;
}
.connect-services-list {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.875rem;
}
.connect-service-row {
  display: -webkit-flex;
  display: flex;
  gap: 0.75rem;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.connect-service-num {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(0,102,255,0.1);
  color: #60a5fa;
  font-size: 0.6875rem;
  font-weight: 800;
}
.connect-service-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}
.connect-service-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-fg);
  margin-top: 0.125rem;
}

.connect-app-footer {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(12,14,42,0.45);
}
.connect-app-footer-text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-fg);
}
.connect-app-footer-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.125rem;
}
.connect-app-link {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #60a5fa;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,102,255,0.35);
  background: rgba(0,102,255,0.08);
}
.connect-app-link:active {
  background: rgba(0,102,255,0.16);
}

.app-install-form {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.app-install-form .form-input {
  width: 100%;
  margin-bottom: 0.875rem;
}
.app-install-form .form-error {
  margin: 0 0 0.75rem;
}
.app-install-form .btn {
  width: 100%;
  margin-top: 0;
}

/* sequence strip (kept for other uses) */
.sequence-step {
  display: -webkit-flex; display: flex;
  gap: 0.75rem; -webkit-align-items: flex-start; align-items: flex-start;
}
.sequence-index {
  -webkit-flex-shrink: 0; flex-shrink: 0;
  width: 1.875rem; height: 1.875rem;
  border-radius: var(--radius-sm);
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
  background: rgba(0,102,255,0.12);
  color: #60a5fa;
  font-size: 0.75rem; font-weight: 800;
  border: 1px solid rgba(0,102,255,0.2);
}
.sequence-title { font-size: 0.9rem; font-weight: 700; color: var(--fg); }
.sequence-copy,
.direct-panel-note,
.form-hint { font-size: 0.8125rem; line-height: 1.55; color: var(--muted-fg); margin-top: 0.125rem; }

.form-panel,
.sequence-strip {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
  gap: 1rem;
}

.notice-row {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  gap: 0.5rem; margin-top: 0.75rem;
}
.notice-chip {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center; align-items: center;
  border-radius: 999px; padding: 0.25rem 0.75rem;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(0,102,255,0.12); color: #60a5fa;
  border: 1px solid rgba(0,102,255,0.2);
}
.notice-chip-soft {
  background: rgba(16,185,129,0.1); color: #34d399;
  border-color: rgba(16,185,129,0.2);
}
.surface-hero-compact { padding-bottom: 0.875rem; }

/* ─── Utility ─────────────────────────────────────────────────────────── */
.text-center   { text-align: center; }
.text-sm       { font-size: 0.875rem; }
.text-xs       { font-size: 0.75rem; }
.text-muted    { color: var(--muted-fg); }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-bold     { font-weight: 700; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.flex-col {
  display: -webkit-flex; display: flex;
  -webkit-flex-direction: column; flex-direction: column;
}
.flex-center {
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
.hidden  { display: none !important; }
.w-full  { width: 100%; }

/* ─── Free reward flow ─────────────────────────────────────────────────── */
.choice-card-paid { border-color: rgba(0,102,255,0.25); }
.choice-card-free { border-color: rgba(16,185,129,0.25); }
.choice-icon-free {
  background: rgba(16,185,129,0.12);
  border-color: rgba(16,185,129,0.25);
}
.choice-icon-free svg { stroke: #34d399; }

.campaign-reward-card {
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(0,102,255,0.12) 0%, rgba(255,255,255,0.02) 100%);
  position: relative;
  overflow: hidden;
}
.campaign-reward-hero {
  padding: 1.75rem 1.25rem 1.625rem;
  border-color: rgba(0,102,255,0.32);
  background: linear-gradient(
    165deg,
    rgba(0,102,255,0.2) 0%,
    rgba(0,102,255,0.06) 42%,
    rgba(255,255,255,0.02) 100%
  );
  box-shadow: 0 8px 32px rgba(0,102,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.campaign-reward-glow {
  position: absolute;
  top: -3rem;
  left: 50%;
  width: 14rem;
  height: 14rem;
  margin-left: -7rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.28) 0%, transparent 68%);
  pointer-events: none;
}
.campaign-reward-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
  background: rgba(0,102,255,0.15);
  border: 1px solid rgba(0,102,255,0.25);
  border-radius: 9999px;
  padding: 0.2rem 0.625rem;
  margin-bottom: 0.625rem;
  position: relative;
  z-index: 1;
}
.campaign-reward-duration {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
}
.campaign-reward-duration-combined {
  margin-top: 0.5rem;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}
.campaign-reward-duration-combined .campaign-reward-value {
  font-size: 1.75rem;
  line-height: 1.2;
  max-width: 16rem;
}
.campaign-reward-value {
  font-size: 4.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--fg);
}
.campaign-reward-unit {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
  text-transform: lowercase;
  line-height: 1;
}
.campaign-reward-minutes {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.04em;
}
.campaign-reward-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted-fg);
  margin: 0.625rem 0 0;
  position: relative;
  z-index: 1;
}
.campaign-reward-label-strong {
  font-size: 0.9375rem;
  font-weight: 900;
  color: var(--fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0.035em 0 0 currentColor;
}

.free-reward-wordmark {
  gap: 0.4em;
  font-size: 1.3125rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.free-reward-wordmark .connect-brand-nexwave,
.free-reward-wordmark .connect-brand-hotspot {
  display: inline;
  font-weight: 900;
  text-transform: capitalize;
  text-shadow: 0.035em 0 0 currentColor;
}

/* ─── Free reward claim stepper (Connect → WhatsApp → Browse) ─────────── */
.free-claim-stepper {
  padding: 1rem 0.875rem 1.125rem;
}

.free-claim-stepper-list {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.free-claim-step {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.4375rem;
  min-width: 4.25rem;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  z-index: 1;
}

.free-claim-step-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  border: 2px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: var(--muted-fg);
}

.free-claim-step-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.25;
  max-width: 5.75rem;
}

.free-claim-stepper-join {
  list-style: none;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0.75rem;
  max-width: 2.75rem;
  height: 2px;
  margin-top: 1.0625rem;
  background: rgba(255,255,255,0.12);
  border-radius: 9999px;
}

.free-claim-step--active .free-claim-step-badge {
  border-color: rgba(0,102,255,0.7);
  background: rgba(0,102,255,0.24);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.14), 0 0 18px rgba(0,102,255,0.32);
}

.free-claim-step--active .free-claim-step-label {
  color: #93c5fd;
}

.free-claim-step--done .free-claim-step-badge {
  border-color: rgba(16,185,129,0.55);
  background: rgba(16,185,129,0.2);
  color: #34d399;
}

.free-claim-step--done .free-claim-step-label {
  color: #6ee7b7;
}

.free-claim-step--done + .free-claim-stepper-join {
  background: rgba(16,185,129,0.45);
}

.free-activation-panel,
.free-resend-panel {
  padding: 1.25rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* Captive Android WebView often ignores flex gap — use margins between rows. */
.free-activation-panel > * + *,
.free-resend-panel > * + * {
  margin-top: 1.25rem;
}

.portal-plan-actions {
  display: -webkit-flex;
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.portal-plan-actions .btn {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.free-activation-hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-fg);
  text-align: center;
}
.free-final-error-lead {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--fg);
  text-align: center;
}
.portal-wifi-notice {
  padding: 0.875rem 1rem;
  text-align: center;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12) 0%, rgba(15, 23, 42, 0.35) 100%);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.08) inset;
}
.portal-wifi-notice-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto 0.5rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.16);
}
.portal-wifi-notice-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.portal-wifi-notice-title {
  margin: 0 0 0.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg);
}
.portal-wifi-notice-text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted-fg);
}

.portal-online-panel {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.15rem 1.25rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(41, 40, 61, 0.92);
  box-shadow: 0 18px 40px rgba(13, 12, 32, 0.5);
}
.portal-online-panel::before,
.portal-online-panel::after {
  content: '';
  position: absolute;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  -webkit-filter: blur(40px);
}
.portal-online-panel::before {
  top: -4rem;
  right: -4rem;
  background: rgba(78, 222, 163, 0.16);
}
.portal-online-panel::after {
  bottom: -4rem;
  left: -4rem;
  background: rgba(0, 102, 255, 0.1);
}
.ap-free-online-badge {
  position: relative;
  z-index: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 0.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(78, 222, 163, 0.14);
  color: #4edea3;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ap-free-online-badge-dot {
  position: relative;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #4edea3;
  box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.55);
  -webkit-animation: apFreeOnlinePulse 1.6s ease-out infinite;
  animation: apFreeOnlinePulse 1.6s ease-out infinite;
}
@-webkit-keyframes apFreeOnlinePulse {
  70%, 100% { box-shadow: 0 0 0 0.55rem rgba(78, 222, 163, 0); }
}
@keyframes apFreeOnlinePulse {
  70%, 100% { box-shadow: 0 0 0 0.55rem rgba(78, 222, 163, 0); }
}
.portal-online-glow {
  display: none;
}
.portal-online-icon {
  position: relative;
  z-index: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #4edea3;
  background: rgba(78, 222, 163, 0.12);
  box-shadow: 0 0 24px rgba(78, 222, 163, 0.3);
  border: 0;
}
.portal-online-icon svg {
  width: 1.85rem;
  height: 1.85rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-online-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display), "Space Grotesk", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #f1f0fb;
}
.portal-online-text {
  position: relative;
  z-index: 1;
  margin: 0.45rem auto 0;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #c2c6d8;
}
.ap-free-online-timer-card {
  position: relative;
  z-index: 1;
  margin: 1.1rem 0 0.85rem;
  padding: 1rem 0.85rem 0.85rem;
  border-radius: 0.9rem;
  background: rgba(27, 25, 46, 0.72);
}
.ap-free-online-ring-wrap {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 0.65rem;
}
.ap-free-online-ring-svg {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.ap-free-online-ring-track {
  stroke: rgba(255, 255, 255, 0.08);
}
.ap-free-online-ring-progress {
  stroke: #4edea3;
  transition: stroke-dashoffset 0.6s ease;
}
.ap-free-online-ring-center {
  position: absolute;
  inset: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ap-free-online-ring-center .ap-free-online-stat-value {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f1f0fb;
}
.ap-free-online-ring-label {
  margin-top: 0.2rem;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4edea3;
}
.ap-free-online-reset-line {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #c2c6d8;
}
.ap-free-online-reset-line svg {
  width: 0.9rem;
  height: 0.9rem;
  stroke: #4edea3;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
.ap-free-online-reset-line strong {
  color: #f1f0fb;
  font-weight: 700;
}
.ap-free-online-stats {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  gap: 0.45rem;
  margin-top: 0.15rem;
  border: 0;
  background: transparent;
  overflow: visible;
}
.ap-free-online-stats-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ap-free-online-stat {
  -webkit-flex: 1;
  flex: 1;
  padding: 0.65rem 0.4rem;
  text-align: center;
  border-radius: 0.65rem;
  background: rgba(27, 25, 46, 0.9);
}
.ap-free-online-stat + .ap-free-online-stat {
  position: static;
}
.ap-free-online-stat + .ap-free-online-stat::before {
  display: none;
}
.ap-free-online-stat-label {
  display: block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa0b8;
  margin-bottom: 0.3rem;
}
.ap-free-online-stat-value {
  display: block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #f1f0fb;
  font-variant-numeric: tabular-nums;
}
.ap-free-online-stat-accent {
  color: #4edea3 !important;
}
.ap-free-online-stat-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #9aa0b8;
  font-variant-numeric: tabular-nums;
}
.ap-free-online-safe-note {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.7rem;
  background: rgba(19, 17, 37, 0.72);
  text-align: left;
}
.ap-free-online-safe-note svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  stroke: #00eefc;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-free-online-safe-note .portal-online-text {
  margin: 0;
  max-width: none;
  text-align: left;
  font-size: 0.8125rem;
}
body.ap-free-view-online .ap-free-header,
.ap-free-page.ap-free-view-online .ap-free-header {
  display: none !important;
}
body.ap-free-view-online .ap-free-ap-footer,
.ap-free-page.ap-free-view-online .ap-free-ap-footer {
  display: none !important;
}
.free-divider {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted-fg);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.free-divider::before,
.free-divider::after {
  content: '';
  -webkit-flex: 1;
  flex: 1;
  height: 1px;
  background: var(--border);
}
.otp-input {
  text-align: center;
  letter-spacing: 0.35em;
  font-size: 1.5rem;
  font-weight: 800;
}

.portal-connecting-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(3, 2, 19, 0.88);
  pointer-events: auto;
}
.portal-connecting-overlay.hidden {
  display: none !important;
}
.portal-connecting-modal {
  max-width: 20rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
.portal-connecting-glow {
  width: 12rem;
  height: 12rem;
  margin-left: -6rem;
  top: -3rem;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
}
.portal-connecting-modal-content {
  gap: 0.75rem;
}
.portal-connecting-spinner {
  margin: 0.35rem 0 0;
  padding: 0;
}
.portal-connecting-spinner-ring {
  width: 2.75rem;
  height: 2.75rem;
  border-width: 3px;
  border-top-color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.28);
}
.portal-connecting-title {
  font-size: 1.35rem;
  line-height: 1.2;
}
.portal-connecting-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 17rem;
}
.portal-connecting-hint {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(147, 197, 253, 0.9);
}
.portal-connecting-visual {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 3.75rem;
  margin: 0.35rem 0 0;
}
.portal-connecting-wa-icon {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.portal-connecting-wa-icon.hidden {
  display: none !important;
}
.portal-connecting-wa-icon-ring {
  -webkit-animation: ap-free-wa-pulse 2s ease-in-out infinite;
  animation: ap-free-wa-pulse 2s ease-in-out infinite;
}
@-webkit-keyframes ap-free-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 0 0 0.45rem rgba(37, 211, 102, 0.08); }
  50% { box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.55), 0 0 0 0.55rem rgba(37, 211, 102, 0.14), 0 0 20px rgba(37, 211, 102, 0.22); }
}
@keyframes ap-free-wa-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 0 0 0.45rem rgba(37, 211, 102, 0.08); }
  50% { box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.55), 0 0 0 0.55rem rgba(37, 211, 102, 0.14), 0 0 20px rgba(37, 211, 102, 0.22); }
}
/* WhatsApp-themed connecting overlay (AP Free activate flow) */
.portal-connecting-overlay.portal-connecting-wa-theme {
  background: rgba(11, 20, 26, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.portal-connecting-wa-theme .portal-connecting-modal {
  max-width: 21.5rem;
  border-color: rgba(37, 211, 102, 0.2);
  background: linear-gradient(165deg, #1f2c34 0%, #182229 48%, #111b21 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(37, 211, 102, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.portal-connecting-wa-theme .portal-connecting-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.22) 0%, transparent 68%);
}
.portal-connecting-wa-theme .portal-connecting-spinner-ring {
  border-color: rgba(37, 211, 102, 0.18);
  border-top-color: #25d366;
  box-shadow: 0 0 14px rgba(37, 211, 102, 0.32);
}
.portal-connecting-wa-theme .portal-connecting-title {
  color: #e9edef;
  font-size: 1.25rem;
  font-weight: 800;
}
.portal-connecting-wa-theme .portal-connecting-text {
  color: #8696a0;
  max-width: 18rem;
}
.portal-connecting-wa-theme .portal-connecting-hint {
  color: #25d366;
  font-weight: 600;
  max-width: 18rem;
}
.portal-connecting-overlay-card {
  width: 100%;
  max-width: 24rem;
  text-align: center;
}
.portal-connecting-overlay-card .connect-brand-wordmark {
  margin-bottom: 0.5rem;
}
.portal-connecting-overlay-card .connect-lead {
  margin-bottom: 1rem;
}

#apFreeIdentityOverlay.portal-feedback-overlay,
#apFreeIdentityOverlay.ap-free-wa-overlay {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  background: rgba(3, 2, 19, 0.88);
  /* backdrop-filter breaks modal painting on Android captive WebViews */
}
#apFreeIdentityOverlay:not(.hidden) {
  display: block !important;
}
#apFreeIdentityOverlay .portal-feedback-modal {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
#apFreeIdentityOverlay:not(.hidden) .portal-feedback-modal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: calc(100% - 2rem) !important;
  max-width: 20rem !important;
  margin: 0 !important;
  z-index: 10002 !important;
  min-height: 12rem;
  -webkit-transform: translate(-50%, -50%) translateZ(0) !important;
  transform: translate(-50%, -50%) translateZ(0) !important;
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%) !important;
}
#apFreeIdentityOverlay .portal-feedback-content,
#apFreeIdentityOverlay .ap-free-wa-body {
  visibility: visible;
  opacity: 1;
}
#apFreeIdentityOverlay:not(.hidden) #apFreeIdentityFieldsCard,
#apFreeIdentityOverlay:not(.hidden) .portal-feedback-title,
#apFreeIdentityOverlay:not(.hidden) .portal-feedback-text,
#apFreeIdentityOverlay:not(.hidden) #apFreeIdentityForm {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#apFreeIdentityOverlay:not(.hidden) #apFreeIdentityFieldsCard.hidden,
#apFreeIdentityOverlay.ap-free-wa-open-step:not(.hidden) #apFreeIdentityFieldsCard,
#apFreeIdentityOverlay.ap-free-tg-open-step:not(.hidden) #apFreeIdentityFieldsCard,
#apFreeIdentityOverlay.ap-free-wa-open-step:not(.hidden) .ap-free-classic-modal-actions,
#apFreeIdentityOverlay.ap-free-tg-open-step:not(.hidden) .ap-free-classic-modal-actions {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
#apFreeIdentityOverlay:not(.hidden) #apFreeIdentityForm {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  align-items: stretch !important;
  gap: 0 !important;
}

/* Classic (normal-mode) identity modal */
.ap-free-classic-overlay .portal-feedback-glow {
  opacity: 0.55;
}
.ap-free-classic-overlay .portal-feedback-modal.ap-free-classic-modal {
  padding: 1.375rem 1.25rem 1.375rem;
  text-align: center;
  max-width: 19rem;
}
.ap-free-classic-modal-form {
  width: 100%;
  gap: 0;
}
.ap-free-classic-modal-head {
  width: 100%;
  margin-bottom: 0.875rem;
  text-align: center;
}
.ap-free-classic-modal-head .portal-feedback-title {
  margin-bottom: 0.35rem;
  font-size: 1.125rem;
}
.ap-free-classic-modal-head .portal-feedback-text {
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}
.ap-free-classic-form {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
}
.ap-free-classic-overlay .ap-free-phone-input-stack,
.ap-free-classic-overlay .ap-free-wa-inbox-field,
.ap-free-classic-overlay .ap-free-wa-phone-inline {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.ap-free-classic-overlay .ap-free-wa-phone-photo,
.ap-free-classic-overlay .ap-free-whatsapp-verify-loading {
  display: none !important;
}
.ap-free-classic-overlay .form-group {
  gap: 0.35rem;
  margin: 0;
}
.ap-free-classic-overlay .form-label {
  display: block;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-fg);
}
.ap-free-classic-overlay .form-input,
.ap-free-classic-overlay .ap-free-wa-phone-inline .ap-free-identity-phone-input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--fg);
  box-shadow: none;
  -webkit-flex: none;
  flex: none;
}
.ap-free-classic-overlay .form-input:focus,
.ap-free-classic-overlay .ap-free-wa-phone-inline .ap-free-identity-phone-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.18);
  outline: none;
}
.ap-free-classic-modal-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.125rem;
  padding-top: 0.125rem;
}
.ap-free-classic-modal-actions .btn-primary {
  box-shadow: 0 2px 10px rgba(0, 102, 255, 0.28);
}
.ap-free-classic-modal-actions .btn {
  width: 100%;
  margin-top: 0;
}
.ap-free-classic-modal-actions .btn-ghost {
  min-height: 40px;
}
.ap-free-classic-connect {
  width: 100%;
  padding: 1rem 0 0.25rem;
  text-align: center;
}
.ap-free-classic-connect-visual {
  margin: 0 auto;
}
.ap-free-classic-overlay .form-error {
  margin: 0;
  text-align: left;
  font-size: 0.8125rem;
}

/* Claim / modal button spinner */
.ap-free-btn-spinner {
  display: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  -webkit-animation: spin 0.7s linear infinite;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.ap-free-claim-card-btn.is-busy .ap-free-btn-spinner,
.ap-free-login-btn.is-busy .ap-free-btn-spinner,
.ap-free-skip-btn.is-busy .ap-free-btn-spinner,
#apFreeIdentityContinueBtn.is-busy .ap-free-btn-spinner,
.ap-free-reg-actions .btn.is-busy .ap-free-btn-spinner,
.ap-free-limit-pay200-btn.is-busy .ap-free-btn-spinner,
.ap-free-limit-more-plans-btn.is-busy .ap-free-btn-spinner {
  display: block;
}
.ap-free-limit-pay200-btn.is-busy,
.ap-free-limit-more-plans-btn.is-busy {
  pointer-events: none;
}
.ap-free-limit-pay200-btn.is-busy .ap-free-limit-pay200-label,
.ap-free-limit-more-plans-btn.is-busy .ap-free-limit-more-plans-label {
  display: none;
}
.ap-free-limit-more-plans-btn .ap-free-btn-spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
}
.ap-free-skip-btn.is-busy {
  opacity: 0.94;
  pointer-events: none;
}
.ap-free-skip-btn.is-busy .ap-free-skip-icon {
  display: none;
}
.ap-free-skip-btn .ap-free-btn-spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: #ffffff;
  margin-right: 0.45rem;
}
.ap-free-login-btn.is-busy #apFreeLoginLabel {
  opacity: 0.85;
}
.ap-free-claim-card-btn.is-busy {
  opacity: 0.94;
}
.ap-free-claim-card-btn.is-busy .ap-free-cta-arrow {
  display: none;
}
.portal-connect-btn.is-busy {
  opacity: 0.94;
  pointer-events: none;
  gap: 0;
}
.portal-connect-btn.is-busy .ap-free-btn-spinner {
  display: block;
}
.portal-connect-btn.is-busy .btn-label.hidden {
  display: none !important;
}
#apFreeIdentityContinueBtn.is-busy {
  opacity: 0.94;
  pointer-events: none;
}
.ap-free-wa-modal {
  max-width: 21.5rem;
  width: calc(100% - 2rem);
  padding: 1.625rem 1.375rem 1.375rem;
  border-color: rgba(37, 211, 102, 0.22);
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(37, 211, 102, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ap-free-wa-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.24) 0%, rgba(0, 102, 255, 0.12) 42%, transparent 68%);
}
.ap-free-wa-modal-content {
  width: 100%;
  pointer-events: auto;
  gap: 0.625rem;
}
.ap-free-wa-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.28);
}
.ap-free-wa-icon-ring {
  width: 3.75rem;
  height: 3.75rem;
  margin-top: 0.125rem;
  border-radius: 999px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(37, 211, 102, 0.12);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 0 0 0.45rem rgba(37, 211, 102, 0.08);
}
.ap-free-wa-icon-ring svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: #25d366;
}
.ap-free-wa-title {
  margin: 0;
  font-weight: 800;
}
.ap-free-wa-subtitle {
  margin: 0;
  max-width: 16.5rem;
}
.ap-free-wa-stepper {
  width: 100%;
  margin: 0.125rem 0 0.25rem;
  padding: 0;
}
.ap-free-wa-stepper .free-claim-step-badge {
  width: 1.875rem;
  height: 1.875rem;
  font-size: 0.75rem;
}
.ap-free-wa-stepper .free-claim-step-label {
  font-size: 0.625rem;
  max-width: 4.5rem;
}
.ap-free-wa-stepper .free-claim-step--active .free-claim-step-badge {
  border-color: rgba(37, 211, 102, 0.72);
  background: rgba(37, 211, 102, 0.22);
  color: #ecfdf5;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12), 0 0 16px rgba(37, 211, 102, 0.28);
}
.ap-free-wa-stepper .free-claim-step--active .free-claim-step-label {
  color: #6ee7b7;
}
.ap-free-wa-stepper .free-claim-step--done .free-claim-step-badge {
  border-color: rgba(37, 211, 102, 0.55);
  background: rgba(37, 211, 102, 0.18);
  color: #34d399;
}
.ap-free-wa-stepper .free-claim-step--done .free-claim-step-label {
  color: #6ee7b7;
}
.ap-free-wa-stepper .free-claim-step--done + .free-claim-stepper-join {
  background: rgba(37, 211, 102, 0.45);
}
.ap-free-wa-modal:has(#apFreePhoneField:not(.hidden)) .ap-free-wa-stepper {
  display: none;
}
.ap-free-wa-modal:has(#apFreePhoneField:not(.hidden)) .ap-free-wa-btn::before {
  content: none;
}
.ap-free-wa-body {
  width: 100%;
  margin-top: 0.125rem;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}
.ap-free-wa-field-label {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.ap-free-wa-label-icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: #25d366;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  vertical-align: middle;
}
.ap-free-wa-field {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0;
}
.ap-free-wa-inbox,
.ap-free-wa-body .ap-free-phone-input-stack:not(.has-verify) {
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background: var(--input-bg);
  overflow: hidden;
  -webkit-transition: border-color 0.15s, box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-free-wa-inbox:focus-within,
.ap-free-wa-body .ap-free-phone-input-stack:not(.has-verify):focus-within {
  border-color: rgba(37, 211, 102, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.16);
}
.ap-free-wa-inbox-input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  outline: none;
  pointer-events: auto;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.ap-free-wa-inbox-input::placeholder {
  color: var(--muted-fg);
  font-weight: 500;
}
.ap-free-wa-inbox-field {
  width: 100%;
}
.ap-free-wa-body .ap-free-phone-input-stack {
  border-radius: 10px;
}
.ap-free-wa-body .ap-free-phone-input-stack:not(.has-verify) {
  border: 1px solid var(--border-solid);
}
.ap-free-wa-body .ap-free-phone-input-stack:not(.has-verify) .ap-free-identity-phone-input {
  border: none;
  box-shadow: none;
  background: transparent;
}
.ap-free-wa-body .ap-free-phone-input-stack.has-verify {
  border: 1px solid rgba(37, 211, 102, 0.4);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1);
  background: var(--input-bg);
}
.ap-free-wa-body .ap-free-phone-input-stack.has-verify .ap-free-wa-inbox-field {
  border-top: none;
}
.ap-free-wa-body .ap-free-phone-input-stack.has-verify .ap-free-identity-phone-input {
  border: none;
  box-shadow: none;
  background: transparent;
}
.ap-free-wa-phone-inbox-field {
  position: relative;
}
.ap-free-wa-phone-inline {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
}
.ap-free-wa-phone-inline.hidden {
  display: none;
}
.ap-free-wa-phone-photo {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  position: relative;
  width: 40px;
  height: 40px;
}
.ap-free-wa-phone-photo.hidden {
  display: none;
}
.ap-free-wa-phone-photo .ap-free-whatsapp-photo {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(37, 211, 102, 0.45);
}
.ap-free-wa-phone-photo .ap-free-whatsapp-photo-fallback {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid rgba(37, 211, 102, 0.35);
  background: rgba(37, 211, 102, 0.1);
  color: #25d366;
}
.ap-free-wa-phone-photo .ap-free-whatsapp-photo-fallback svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-free-wa-phone-inline .ap-free-identity-phone-input {
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0.35rem 0;
}
.ap-free-wa-phone-inbox-field .ap-free-whatsapp-verify-loading {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.5rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8696a0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.ap-free-wa-name-field.is-ready .ap-free-wa-name-inbox {
  border-color: rgba(37, 211, 102, 0.35);
}
.ap-free-wa-error {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  color: #ffb4b4;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.ap-free-wa-error.hidden {
  display: none;
}
.ap-free-wa-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 0.125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #25d366 0%, #1ebe5d 100%);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-tap-highlight-color: transparent;
}
.ap-free-wa-btn::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.125rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.361.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-free-wa-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.ap-free-wa-btn:focus,
.ap-free-wa-btn:active {
  outline: none;
  background: linear-gradient(135deg, #20bd5a 0%, #1aad52 100%);
}
.ap-free-tg-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 0.125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%) !important;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(42, 171, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  -webkit-tap-highlight-color: transparent;
}
.ap-free-tg-btn::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.125rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-free-tg-btn:focus,
.ap-free-tg-btn:active {
  background: linear-gradient(135deg, #229ed9 0%, #1d8fc7 100%) !important;
}
.ap-free-tg-theme .ap-free-wa-stepper .free-claim-step--active .free-claim-step-badge {
  background: rgba(42, 171, 238, 0.2);
  border-color: rgba(42, 171, 238, 0.55);
  color: #7dd3fc;
}
.ap-free-tg-theme .ap-free-wa-stepper .free-claim-step--active .free-claim-step-label {
  color: #bae6fd;
}
.ap-free-tg-theme .ap-free-wa-stepper .free-claim-step--done .free-claim-step-badge {
  background: rgba(42, 171, 238, 0.14);
  border-color: rgba(42, 171, 238, 0.35);
  color: #7dd3fc;
}
.ap-free-tg-open-card {
  margin-top: 0.25rem;
}
a.ap-free-wa-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.ap-free-wa-cancel {
  width: 100%;
  min-height: 40px;
  margin-top: -0.125rem;
}
.ap-free-wa-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(134, 150, 160, 0.35);
  border-top-color: #25d366;
  border-radius: 999px;
  animation: ap-free-wa-spin 0.7s linear infinite;
}
@keyframes ap-free-wa-spin {
  to { transform: rotate(360deg); }
}
.ap-free-wa-lookup-row {
  background: #1a262d !important;
  border-bottom: 1px solid rgba(37, 211, 102, 0.16) !important;
  padding: 0.55rem 0.65rem !important;
}
.ap-free-wa-lookup-photo {
  width: 44px !important;
  height: 44px !important;
}
.ap-free-wa-lookup-photo .ap-free-whatsapp-photo {
  width: 44px !important;
  height: 44px !important;
  border-color: rgba(37, 211, 102, 0.5);
}
.ap-free-wa-lookup-meta {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.15rem !important;
}
.ap-free-wa-lookup-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #e9edef !important;
}
.ap-free-wa-lookup-status {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #25d366;
}
.ap-free-wa-check {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #25d366;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ap-free-phone-form-group {
  margin-bottom: 0.35rem;
}
.ap-free-phone-input-stack {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.ap-free-phone-input-stack.has-verify .ap-free-identity-phone-input {
  border: none;
  box-shadow: none;
}
.ap-free-whatsapp-verify {
  width: 100%;
  margin-top: 0;
}
.ap-free-whatsapp-verify-attached {
  overflow: hidden;
}
.ap-free-whatsapp-verify-attached.hidden {
  display: none;
}
.ap-free-whatsapp-verify-loading {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8696a0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.ap-free-whatsapp-verify-loading.hidden {
  display: none;
}
.ap-free-whatsapp-profile {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(37, 211, 102, 0.28);
  background: rgba(37, 211, 102, 0.08);
}
.ap-free-whatsapp-profile-attached {
  border: none;
  border-bottom: 1px solid rgba(37, 211, 102, 0.14);
  border-radius: 0;
  padding: 0.5rem 0.65rem;
  background: #1a262d;
}
.ap-free-whatsapp-profile.hidden {
  display: none;
}
.ap-free-whatsapp-profile-offer {
  border-color: rgba(37, 211, 102, 0.22);
  background: rgba(37, 211, 102, 0.06);
}
.ap-free-claim-card {
  width: 100%;
  margin-bottom: 0.35rem;
}
.ap-free-claim-card.has-profile {
  padding: 0;
  overflow: hidden;
}
.ap-free-claim-card-profile {
  padding: 0.85rem 0.95rem 0.75rem;
}
.ap-free-claim-card-profile.hidden {
  display: none;
}
.ap-free-claim-card.has-profile .ap-free-whatsapp-profile-offer {
  border: none;
  background: transparent;
  padding: 0;
}
.ap-free-claim-card-body {
  width: 100%;
}
.ap-free-claim-card:not(.has-profile) .ap-free-claim-card-body {
  padding: 0;
}
.ap-free-claim-card.has-profile .ap-free-claim-card-body {
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ap-free-claim-card.has-profile .ap-free-claim-card-btn {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.ap-free-claim-card.has-profile .ap-free-claim-card-body .form-error {
  padding: 0.5rem 0.95rem 0;
  margin: 0;
}
.ap-free-whatsapp-photo-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.ap-free-whatsapp-photo {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(37, 211, 102, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.ap-free-whatsapp-photo-fallback {
  position: absolute;
  inset: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid rgba(37, 211, 102, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(37, 211, 102, 0.85);
}
.ap-free-whatsapp-photo-fallback svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.ap-free-whatsapp-photo-fallback.hidden {
  display: none;
}
.ap-free-whatsapp-profile-meta {
  min-width: 0;
  -webkit-flex: 1;
  flex: 1;
}
.ap-free-whatsapp-profile-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-free-whatsapp-profile-phone {
  margin: 0.15rem 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg);
}
.ap-free-whatsapp-profile-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #25d366;
}
.ap-free-whatsapp-profile-badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ─── AP free access page (/ap-free) — WhatsApp theme ─────────────────── */
.ap-free-page.ap-free-wa-theme {
  --wa-bg: #0b141a;
  --wa-panel: #111b21;
  --wa-panel-elevated: #1f2c34;
  --wa-border: #2a3942;
  --wa-green: #25d366;
  --wa-green-dark: #20bd5a;
  --wa-text: #e9edef;
  --wa-text-muted: #8696a0;
  --wa-text-dim: #667781;
  background: var(--wa-bg);
  padding-top: 2rem;
}
body.ap-free-wa-theme {
  background: #0b141a;
}
.ap-free-page.ap-free-wa-theme::before {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: rgba(37, 211, 102, 0.08);
}
.ap-free-page.ap-free-wa-theme::after {
  width: 320px;
  height: 320px;
  bottom: 60px;
  left: -100px;
  background: rgba(37, 211, 102, 0.05);
}
.ap-free-page {
  padding-top: 2rem;
}
.ap-free-brand-logo {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 2;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  opacity: 0.95;
  -webkit-tap-highlight-color: transparent;
}
.ap-free-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ap-free-page::before {
  width: 420px;
  height: 420px;
  top: -120px;
  right: -140px;
  background: rgba(0,102,255,0.14);
}
.ap-free-page::after {
  width: 360px;
  height: 360px;
  bottom: 40px;
  left: -120px;
  background: rgba(0,102,255,0.08);
}
.ap-free-wa-page-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 auto 0.5rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.28);
}
.ap-free-wa-theme .ap-free-header, .ap-free-tg-theme .ap-free-header, .ap-free-reg-theme .ap-free-header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
}
.ap-free-wa-theme .ap-free-title-main, .ap-free-tg-theme .ap-free-title-main, .ap-free-reg-theme .ap-free-title-main {
  color: var(--wa-text);
  text-transform: none;
  letter-spacing: -0.02em;
}
.ap-free-wa-theme .ap-free-title-accent, .ap-free-tg-theme .ap-free-title-accent, .ap-free-reg-theme .ap-free-title-accent {
  color: var(--wa-green);
  text-transform: none;
  letter-spacing: -0.02em;
}
.ap-free-wa-theme .ap-free-page-title, .ap-free-tg-theme .ap-free-page-title, .ap-free-reg-theme .ap-free-page-title {
  font-family: var(--font);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.25;
}
.ap-free-wa-hero-icon {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(37, 211, 102, 0.12);
  box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 0 0 0.5rem rgba(37, 211, 102, 0.06),
    0 8px 28px rgba(37, 211, 102, 0.18);
}
.ap-free-wa-hero-icon svg {
  width: 2.65rem;
  height: 2.65rem;
  fill: var(--wa-green);
}
.ap-free-wa-theme .ap-free-reward-card, .ap-free-tg-theme .ap-free-reward-card, .ap-free-reg-theme .ap-free-reward-card {
  border-color: rgba(37, 211, 102, 0.22);
  background: linear-gradient(155deg, #1f2c34 0%, #182229 42%, #111b21 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ap-free-wa-theme .ap-free-reward-value, .ap-free-tg-theme .ap-free-reward-value, .ap-free-reg-theme .ap-free-reward-value {
  font-family: var(--font);
  color: var(--wa-text);
}
.ap-free-wa-theme .ap-free-reward-unit, .ap-free-tg-theme .ap-free-reward-unit, .ap-free-reg-theme .ap-free-reward-unit {
  font-family: var(--font);
  color: var(--wa-green);
}
.ap-free-wa-theme .ap-free-promo-badge, .ap-free-tg-theme .ap-free-promo-badge, .ap-free-reg-theme .ap-free-promo-badge {
  color: #d1fae5;
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.28);
  box-shadow: none;
}
.ap-free-wa-theme .ap-free-reward-divider, .ap-free-tg-theme .ap-free-reward-divider, .ap-free-reg-theme .ap-free-reward-divider {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.ap-free-wa-theme .ap-free-welcome-card, .ap-free-tg-theme .ap-free-welcome-card, .ap-free-reg-theme .ap-free-welcome-card {
  border-color: var(--wa-border);
  background: var(--wa-panel);
  box-shadow: none;
}
.ap-free-wa-theme .ap-free-welcome-title, .ap-free-tg-theme .ap-free-welcome-title, .ap-free-reg-theme .ap-free-welcome-title {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--wa-text);
}
.ap-free-wa-theme .ap-free-message, .ap-free-tg-theme .ap-free-message, .ap-free-reg-theme .ap-free-message {
  color: var(--wa-text-muted);
  font-size: 0.8125rem;
  line-height: 1.65;
}
.ap-free-wa-theme .ap-free-stats, .ap-free-tg-theme .ap-free-stats, .ap-free-reg-theme .ap-free-stats {
  border-top-color: rgba(255, 255, 255, 0.06);
}
.ap-free-wa-theme .ap-free-stat-icon, .ap-free-tg-theme .ap-free-stat-icon, .ap-free-reg-theme .ap-free-stat-icon {
  background: rgba(37, 211, 102, 0.12);
  color: var(--wa-green);
}
.ap-free-wa-theme .ap-free-stat-label, .ap-free-tg-theme .ap-free-stat-label, .ap-free-reg-theme .ap-free-stat-label {
  color: var(--wa-text-dim);
}
.ap-free-wa-theme .ap-free-stat-value, .ap-free-tg-theme .ap-free-stat-value, .ap-free-reg-theme .ap-free-stat-value {
  color: var(--wa-text);
}
.ap-free-wa-theme .ap-free-claim-card, .ap-free-tg-theme .ap-free-claim-card, .ap-free-reg-theme .ap-free-claim-card {
  background: transparent;
  border: none;
  box-shadow: none;
}
.ap-free-wa-theme .ap-free-wa-cta.btn-primary {
  min-height: 52px;
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-wa-theme .ap-free-wa-cta.btn-primary::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-free-wa-theme .ap-free-wa-cta.btn-primary:focus,
.ap-free-wa-theme .ap-free-wa-cta.btn-primary:active {
  background: linear-gradient(135deg, var(--wa-green-dark) 0%, #1aad52 100%);
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.24);
}
.ap-free-wa-theme .ap-free-skip-btn, .ap-free-tg-theme .ap-free-skip-btn, .ap-free-reg-theme .ap-free-skip-btn {
  color: var(--wa-text-muted);
  background: var(--wa-panel);
  border-color: var(--wa-border);
  border-radius: var(--radius-lg);
}
.ap-free-wa-theme .ap-free-or-divider, .ap-free-tg-theme .ap-free-or-divider, .ap-free-reg-theme .ap-free-or-divider {
  color: var(--wa-text-dim);
}
.ap-free-wa-theme .ap-free-or-divider::before, .ap-free-tg-theme .ap-free-or-divider::before, .ap-free-reg-theme .ap-free-or-divider::before,
.ap-free-wa-theme .ap-free-or-divider::after, .ap-free-tg-theme .ap-free-or-divider::after, .ap-free-reg-theme .ap-free-or-divider::after {
  background: rgba(255, 255, 255, 0.08);
}
.ap-free-wa-theme .portal-support-footer, .ap-free-tg-theme .portal-support-footer, .ap-free-reg-theme .portal-support-footer .support-btn {
  background: var(--wa-panel);
  border-color: var(--wa-border);
  color: var(--wa-text);
}
.ap-free-wa-theme .connect-ap-chip, .ap-free-tg-theme .connect-ap-chip, .ap-free-reg-theme .connect-ap-chip {
  color: #6ee7b7;
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.22);
}
.ap-free-wa-theme .ap-free-brand-logo, .ap-free-tg-theme .ap-free-brand-logo, .ap-free-reg-theme .ap-free-brand-logo {
  opacity: 0.88;
}
.ap-free-wa-theme #apFreeIdentityOverlay.portal-feedback-overlay,
.ap-free-wa-theme, .ap-free-tg-theme, .ap-free-reg-theme #apFreeIdentityOverlay.ap-free-wa-overlay , .ap-free-tg-theme #apFreeIdentityOverlay.portal-feedback-overlay,
.ap-free-wa-theme, .ap-free-tg-theme, .ap-free-reg-theme #apFreeIdentityOverlay.ap-free-wa-overlay , .ap-free-reg-theme #apFreeIdentityOverlay.portal-feedback-overlay,
.ap-free-wa-theme, .ap-free-tg-theme, .ap-free-reg-theme #apFreeIdentityOverlay.ap-free-wa-overlay {
  background: rgba(11, 20, 26, 0.88);
}
.ap-free-wa-theme .ap-free-wa-modal, .ap-free-tg-theme .ap-free-wa-modal, .ap-free-reg-theme .ap-free-wa-modal {
  border-color: rgba(37, 211, 102, 0.2);
  background: linear-gradient(165deg, #1f2c34 0%, #182229 48%, #111b21 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(37, 211, 102, 0.16);
}
.ap-free-wa-theme .ap-free-wa-glow, .ap-free-tg-theme .ap-free-wa-glow, .ap-free-reg-theme .ap-free-wa-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.22) 0%, transparent 68%);
}
.ap-free-wa-theme .ap-free-wa-title, .ap-free-tg-theme .ap-free-wa-title, .ap-free-reg-theme .ap-free-wa-title,
.ap-free-wa-theme .ap-free-wa-subtitle, .ap-free-tg-theme .ap-free-wa-subtitle, .ap-free-reg-theme .ap-free-wa-subtitle {
  color: var(--wa-text);
}
.ap-free-wa-theme .ap-free-wa-subtitle, .ap-free-tg-theme .ap-free-wa-subtitle, .ap-free-reg-theme .ap-free-wa-subtitle {
  color: var(--wa-text-muted);
}
.ap-free-wa-theme .portal-wifi-notice, .ap-free-tg-theme .portal-wifi-notice, .ap-free-reg-theme .portal-wifi-notice,
.ap-free-wa-theme .plans-loading-card, .ap-free-tg-theme .plans-loading-card, .ap-free-reg-theme .plans-loading-card {
  border-color: var(--wa-border);
  background: var(--wa-panel);
}
.ap-free-wa-theme .ap-free-shell, .ap-free-tg-theme .ap-free-shell, .ap-free-reg-theme .ap-free-shell {
  max-width: 24rem;
  gap: 0.875rem;
}
/* ─── AP free — Telegram + full registration channel themes ───────────── */
.ap-free-page.ap-free-tg-theme {
  --wa-bg: #0e1621;
  --wa-panel: #17212b;
  --wa-panel-elevated: #1e2d3d;
  --wa-border: #2b3d4f;
  --wa-green: #2aabee;
  --wa-green-dark: #229ed9;
  --wa-text: #e8eef3;
  --wa-text-muted: #8ba3b8;
  --wa-text-dim: #6b8499;
  background: var(--wa-bg);
  padding-top: 2rem;
}
body.ap-free-tg-theme { background: #0e1621; }
.ap-free-page.ap-free-tg-theme::before {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: rgba(42, 171, 238, 0.08);
}
.ap-free-page.ap-free-tg-theme::after {
  width: 320px;
  height: 320px;
  bottom: 60px;
  left: -100px;
  background: rgba(42, 171, 238, 0.05);
}
.ap-free-page.ap-free-reg-theme {
  --wa-bg: #0f1020;
  --wa-panel: #17182c;
  --wa-panel-elevated: #22233d;
  --wa-border: #2e3050;
  --wa-green: #6366f1;
  --wa-green-dark: #4f46e5;
  --wa-text: #ececf8;
  --wa-text-muted: #a5a7c9;
  --wa-text-dim: #7c7ea8;
  background: var(--wa-bg);
  padding-top: 2rem;
}
body.ap-free-reg-theme { background: #0f1020; }
.ap-free-page.ap-free-reg-theme::before {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: rgba(99, 102, 241, 0.1);
}
.ap-free-page.ap-free-reg-theme::after {
  width: 320px;
  height: 320px;
  bottom: 60px;
  left: -100px;
  background: rgba(99, 102, 241, 0.06);
}
.ap-free-tg-page-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 auto 0.5rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7dd3fc;
  background: rgba(42, 171, 238, 0.12);
  border: 1px solid rgba(42, 171, 238, 0.28);
}
.ap-free-reg-page-badge {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0 auto 0.5rem;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.32);
}
.ap-free-tg-hero-icon,
.ap-free-reg-hero-icon {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.ap-free-tg-hero-icon {
  background: rgba(42, 171, 238, 0.12);
  box-shadow: 0 0 0 1px rgba(42, 171, 238, 0.35), 0 0 0 0.5rem rgba(42, 171, 238, 0.06),
    0 8px 28px rgba(42, 171, 238, 0.18);
}
.ap-free-reg-hero-icon {
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 0 0.5rem rgba(99, 102, 241, 0.06),
    0 8px 28px rgba(99, 102, 241, 0.18);
}
.ap-free-tg-hero-icon svg,
.ap-free-reg-hero-icon svg {
  width: 2.65rem;
  height: 2.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}
.ap-free-tg-hero-icon svg { color: #2aabee; fill: #2aabee; stroke: none; }
.ap-free-reg-hero-icon svg { color: #6366f1; }
.ap-free-tg-theme .ap-free-reward-card {
  border-color: rgba(42, 171, 238, 0.22);
  background: linear-gradient(155deg, #1e2d3d 0%, #17212b 42%, #0e1621 100%);
}
.ap-free-reg-theme .ap-free-reward-card {
  border-color: rgba(99, 102, 241, 0.24);
  background: linear-gradient(155deg, #22233d 0%, #17182c 42%, #0f1020 100%);
}
.ap-free-tg-theme .ap-free-promo-badge {
  color: #bae6fd;
  background: rgba(42, 171, 238, 0.14);
  border-color: rgba(42, 171, 238, 0.28);
}
.ap-free-reg-theme .ap-free-promo-badge {
  color: #ddd6fe;
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.28);
}
.ap-free-tg-theme .ap-free-stat-icon {
  background: rgba(42, 171, 238, 0.12);
}
.ap-free-reg-theme .ap-free-stat-icon {
  background: rgba(99, 102, 241, 0.12);
}
.ap-free-tg-theme .connect-ap-chip {
  color: #7dd3fc;
  background: rgba(42, 171, 238, 0.1);
  border-color: rgba(42, 171, 238, 0.22);
}
.ap-free-reg-theme .connect-ap-chip {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.22);
}
.ap-free-tg-theme #apFreeIdentityOverlay.portal-feedback-overlay,
.ap-free-tg-theme #apFreeIdentityOverlay.ap-free-wa-overlay {
  background: rgba(14, 22, 33, 0.88);
}
.ap-free-reg-theme #apFreeIdentityOverlay.portal-feedback-overlay,
.ap-free-reg-theme #apFreeIdentityOverlay.ap-free-wa-overlay {
  background: rgba(15, 16, 32, 0.88);
}
.ap-free-tg-theme .ap-free-wa-modal {
  border-color: rgba(42, 171, 238, 0.2);
  background: linear-gradient(165deg, #1e2d3d 0%, #17212b 48%, #0e1621 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(42, 171, 238, 0.16);
}
.ap-free-tg-theme .ap-free-wa-glow {
  background: radial-gradient(circle, rgba(42, 171, 238, 0.22) 0%, transparent 68%);
}
.ap-free-tg-theme .ap-free-tg-cta.btn-primary {
  min-height: 52px;
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(42, 171, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-reg-theme .ap-free-reg-cta.btn-primary {
  min-height: 52px;
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-tg-theme .ap-free-tg-cta.btn-primary::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-free-reg-theme .ap-free-reg-cta.btn-primary::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='2' cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle fill='none' stroke='%23000' stroke-width='2' cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ap-free-reg-theme .ap-free-registration-card {
  border-color: rgba(99, 102, 241, 0.24);
  background: var(--wa-panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ap-free-registration-overlay .portal-feedback-modal.ap-free-registration-modal {
  position: relative;
  max-width: 22rem;
  padding: 1.375rem 1.25rem 1.25rem;
  text-align: center;
  border: 1px solid var(--border-solid);
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(99, 102, 241, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ap-free-registration-overlay .ap-free-registration-modal .portal-feedback-glow {
  display: block;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 68%);
}
.ap-free-reg-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  z-index: 3;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.ap-free-reg-close svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
}
.ap-free-reg-modal-head {
  margin: 0 1.6rem 0.875rem;
  text-align: center;
}
.ap-free-reg-modal-head .portal-feedback-title {
  margin-bottom: 0.35rem;
  font-size: 1.125rem;
}
.ap-free-reg-modal-head .portal-feedback-text {
  max-width: 18rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-fg);
}
.ap-free-reg-form {
  width: 100%;
  text-align: left;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}
.ap-free-reg-field {
  display: block;
  margin: 0;
}
.ap-free-reg-input {
  display: block;
  width: 100%;
  margin: 0;
  min-height: 48px;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background: var(--input-bg);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: border-color 0.15s, box-shadow 0.15s;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ap-free-reg-input::placeholder {
  color: #64748b;
  font-weight: 400;
  opacity: 1;
}
.ap-free-reg-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
  outline: none;
}
.ap-free-reg-password-wrap {
  position: relative;
}
.ap-free-reg-password-wrap.has-value .ap-free-reg-input {
  padding-right: 2.85rem;
}
.ap-free-reg-password-toggle.hidden {
  display: none;
}
.ap-free-reg-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}
.ap-free-reg-password-toggle:hover,
.ap-free-reg-password-toggle[aria-pressed="true"] {
  color: #e2e8f0;
}
.ap-free-reg-password-toggle svg {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-free-reg-input.is-invalid {
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.ap-free-reg-field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}
.ap-free-reg-field-hint.hidden {
  display: none !important;
}
.ap-free-reg-field-hint.is-taken {
  color: #fca5a5;
}
.ap-free-reg-outside-auth {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #cbd5e1;
  text-align: center;
}
.ap-free-reg-outside-auth.hidden {
  display: none !important;
}
.ap-free-reg-outside-auth .ap-free-reg-link-btn {
  color: #c7d2fe;
  font-size: 0.875rem;
  text-underline-offset: 0.18em;
}
.ap-free-registration-error {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.22);
  text-align: left;
}
.ap-free-registration-error.hidden {
  display: none !important;
}
.ap-free-registration-error-icon {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: #fca5a5;
}
.ap-free-registration-error-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.ap-free-registration-error-copy {
  flex: 1;
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.2rem;
}
.ap-free-registration-error-title {
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}
.ap-free-registration-error-text {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  color: #fecaca;
}
.ap-free-reg-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.ap-free-reg-actions.is-split {
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.55rem;
}
.ap-free-reg-actions .btn {
  width: 100%;
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.5rem;
}
.ap-free-reg-actions .btn.is-busy {
  pointer-events: none;
  opacity: 0.94;
}
.ap-free-reg-btn-email {
  min-height: 52px;
  font-weight: 800;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-reg-btn-telegram {
  min-height: 52px;
  font-weight: 700;
}
.ap-free-reg-actions--stack .ap-free-reg-btn-telegram.btn-primary {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  border: none;
  color: #fff;
  box-shadow: 0 6px 22px rgba(34, 158, 217, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-reg-actions--stack .ap-free-reg-btn-telegram.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
}
.ap-free-reg-actions.is-split .ap-free-reg-btn-telegram,
.ap-free-reg-actions.is-split .btn-outline {
  width: auto;
  -webkit-flex: 0 1 10.5rem;
  flex: 0 1 10.5rem;
  max-width: 46%;
  min-width: 7.5rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.ap-free-reg-actions.is-split .ap-free-reg-btn-telegram .ap-free-reg-btn-label,
.ap-free-reg-actions.is-split .btn-outline .ap-free-reg-btn-label {
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
.ap-free-reg-actions.is-split .ap-free-reg-btn-telegram:hover:not(:disabled),
.ap-free-reg-actions.is-split .btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.ap-free-reg-actions.is-split .ap-free-reg-btn-email,
.ap-free-reg-actions.is-split .btn-primary {
  width: auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  font-size: 0.9rem;
}
.ap-free-registration-overlay .btn-primary,
.ap-free-reg-theme .portal-feedback-overlay .btn-primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-modal {
  border: 1px solid var(--border-solid);
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(99, 102, 241, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 68%);
}
.ap-free-reg-theme .portal-feedback-overlay .form-input:focus,
.ap-free-reg-theme .portal-feedback-overlay .ap-free-identity-phone-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.ap-free-reg-btn-cancel {
  display: none !important;
}
.ap-free-reg-switch-mode {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #94a3b8;
}
.ap-free-reg-link-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #a5b4fc;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ap-free-reg-switch-sep {
  margin: 0 0.35rem;
  color: #64748b;
}
.ap-free-registration-pending-copy {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-fg);
  text-align: left;
}
.ap-free-reg-pending {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.ap-free-registration-overlay.is-pending .ap-free-reg-modal-head {
  margin-bottom: 0.625rem;
  text-align: center;
}
.ap-free-registration-overlay.is-pending .ap-free-reg-modal-head .portal-feedback-title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
}
.ap-free-registration-overlay.is-pending .ap-free-reg-modal-head .portal-feedback-text {
  max-width: 20rem;
  margin: 0.35rem auto 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #94a3b8;
}
.ap-free-registration-overlay.is-pending .ap-free-reg-modal-head .portal-feedback-text:empty {
  display: none;
}

.ap-free-reg-pending-profile {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 1.125rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.58) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  text-align: center;
}
.ap-free-reg-pending-profile-badge {
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ap-free-reg-pending-profile-badge--telegram {
  color: #7dd3fc;
  background: rgba(34, 158, 217, 0.12);
  border: 1px solid rgba(34, 158, 217, 0.24);
}
.ap-free-reg-pending-profile-badge--email {
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.24);
}
.ap-free-reg-pending-profile-name {
  margin: 0.4rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.ap-free-reg-pending-profile-email {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.ap-free-reg-pending-steps {
  margin: 0;
  padding: 0.8rem 0.95rem 0.8rem 1.45rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #cbd5e1;
}
.ap-free-reg-pending-steps li {
  margin: 0.22rem 0;
}
.ap-free-reg-pending-steps li::marker {
  color: #64748b;
  font-weight: 600;
}
.ap-free-reg-pending-steps strong {
  color: #e2e8f0;
  font-weight: 600;
}

.ap-free-reg-pending-email-block {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  background: rgba(15, 18, 45, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.ap-free-reg-pending-name-block {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.22);
  text-align: center;
}
.ap-free-reg-pending-name-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
.ap-free-reg-pending-name-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ap-free-reg-btn-email.is-cooldown {
  opacity: 0.65;
  cursor: not-allowed;
}
.ap-free-reg-pending-email-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}
.ap-free-reg-pending-email-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #f1f5f9;
  word-break: break-all;
  line-height: 1.45;
}
.ap-free-reg-pending-instruction {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}
.ap-free-reg-pending-instruction strong {
  color: #e2e8f0;
  font-weight: 600;
}
.ap-free-reg-pending-links {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin-top: 0.1rem;
}
.ap-free-reg-pending-links-sep {
  color: #475569;
  font-size: 0.75rem;
  line-height: 1;
}
.ap-free-reg-pending-links .ap-free-reg-link-btn--muted {
  color: #94a3b8;
}
.ap-free-reg-actions--stack {
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.5rem;
}
.ap-free-reg-actions--stack .btn {
  width: 100%;
  min-height: 3rem;
}
.ap-free-reg-pending-feedback {
  padding: 0.625rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.ap-free-reg-pending-feedback.is-success {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.22);
}
.ap-free-reg-pending-feedback.is-error {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.22);
}

/* Portal support contact — Stitch Support: Need Help Bottom Sheet */
@keyframes portalSupportSheetSlideUp {
  from { opacity: 0; -webkit-transform: translateX(-50%) translateY(100%); transform: translateX(-50%) translateY(100%); }
  to { opacity: 1; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
}
.portal-support-contact-overlay:not(.hidden) {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
  background: rgba(3, 2, 19, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 10003 !important;
}
.portal-support-contact-overlay:not(.hidden) .portal-support-contact-modal {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 26.75rem !important;
  margin: 0 !important;
  padding: 0.65rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom, 0px)) !important;
  text-align: center !important;
  border-radius: 2rem 2rem 0 0 !important;
  border: 1px solid #1e2640 !important;
  border-bottom: 0 !important;
  background: rgba(16, 22, 46, 0.95) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5), 0 -8px 32px rgba(0, 102, 255, 0.1) !important;
  -webkit-transform: translateX(-50%) translateZ(0) !important;
  transform: translateX(-50%) translateZ(0) !important;
  -webkit-animation: portalSupportSheetSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation: portalSupportSheetSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  z-index: 10004 !important;
  max-height: min(92vh, 100dvh) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.portal-support-contact-overlay .ap-free-reg-sheet-handle {
  display: block !important;
  width: 3rem !important;
  height: 0.35rem !important;
  margin: 0.15rem auto 0.85rem !important;
  border-radius: 999px !important;
  background: rgba(148, 163, 184, 0.45) !important;
}
.portal-support-contact-overlay .ap-free-reg-close {
  display: -webkit-flex !important;
  display: flex !important;
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  z-index: 3 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
}
.portal-support-contact-overlay .ap-free-reg-close svg {
  width: 1rem !important;
  height: 1rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
}
.portal-support-contact-overlay .portal-feedback-glow {
  background: radial-gradient(circle at 50% 0%, rgba(0, 102, 255, 0.16) 0%, transparent 58%) !important;
}
.portal-support-contact-content {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  -webkit-align-items: stretch !important;
  align-items: stretch !important;
  width: 100%;
}
.portal-support-contact-head {
  margin: 0 1.75rem 0.25rem !important;
  text-align: center !important;
}
.portal-support-contact-content .portal-feedback-title {
  -webkit-align-self: center;
  align-self: center;
  text-align: center !important;
  margin: 0 !important;
  font-family: var(--font-display), "Space Grotesk", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f8fafc !important;
}
.portal-support-contact-content #portalSupportContactCompany {
  margin: 0.35rem 0 0 !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: #c2c6d8 !important;
}
.portal-support-contact-note {
  margin: 0.35rem 0 0.15rem !important;
  text-align: center !important;
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  color: #94a3b8 !important;
}
.portal-support-contact-block {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  background: rgba(10, 13, 29, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: left;
}
.portal-support-contact-block-wa {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}
.portal-support-contact-icon-wrap {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 999px !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.portal-support-contact-icon-wrap-wa {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
}
.portal-support-contact-icon-wrap-mail {
  background: rgba(0, 238, 252, 0.1) !important;
  color: #00eefc !important;
}
.portal-support-contact-icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}
.portal-support-contact-icon-wa {
  fill: currentColor !important;
}
.portal-support-contact-icon-mail {
  stroke: currentColor !important;
  fill: none !important;
}
.portal-support-contact-card-body {
  -webkit-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
}
.portal-support-contact-card-row {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: flex-start !important;
  align-items: flex-start !important;
  -webkit-justify-content: space-between !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}
.portal-support-contact-badge {
  font-family: var(--font-mono), ui-monospace, monospace !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #8c90a1 !important;
  -webkit-flex-shrink: 0 !important;
  flex-shrink: 0 !important;
  padding-top: 0.15rem !important;
}
.portal-support-contact-card-actions {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-justify-content: flex-end !important;
  justify-content: flex-end !important;
}
.portal-support-contact-value {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono), ui-monospace, monospace !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
  color: #f8fafc !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
#portalSupportContactEmail.portal-support-contact-value {
  white-space: nowrap;
  font-size: 0.9rem !important;
}
.portal-support-contact-content .portal-support-copy-btn,
.portal-feedback-content .portal-support-copy-btn {
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 3.5rem;
  max-width: none;
  min-height: 1.85rem;
  margin: 0 !important;
  padding: 0.28rem 0.7rem !important;
  border: 1px solid #1e2640 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e2e8f0 !important;
  font-family: inherit;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1;
  box-shadow: none !important;
  cursor: pointer;
}
.portal-support-contact-content .portal-support-copy-btn svg {
  width: 0.85rem !important;
  height: 0.85rem !important;
}
.portal-support-contact-content .portal-support-copy-btn:active,
.portal-feedback-content .portal-support-copy-btn:active {
  border-color: #0066ff !important;
  background: rgba(0, 102, 255, 0.08) !important;
  -webkit-transform: none;
  transform: none;
}
.portal-support-contact-content .btn-primary {
  margin-top: 0.25rem;
  width: 100%;
  min-height: 3.25rem;
  border: 0 !important;
  border-radius: 0.75rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0) 100%), #0066ff !important;
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4) !important;
  font-weight: 600 !important;
}
.ap-free-reg-pending-feedback.hidden {
  display: none !important;
}
.ap-free-reg-signin-success-overlay {
  z-index: 10002;
  background: rgba(13, 12, 32, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ap-free-classic-overlay .portal-feedback-modal.ap-free-classic-modal.ap-free-reg-signin-success-modal,
.ap-free-reg-signin-success-modal {
  max-width: 17.5rem !important;
  padding: 1.85rem 1.4rem 1.55rem !important;
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(165deg, rgba(36, 34, 56, 0.98) 0%, rgba(27, 25, 46, 0.98) 48%, rgba(19, 17, 37, 0.98) 100%) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 102, 255, 0.14),
    0 0 36px rgba(78, 222, 163, 0.1) !important;
  -webkit-animation: apFreeRegSuccessIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  animation: apFreeRegSuccessIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
@-webkit-keyframes apFreeRegSuccessIn {
  from { opacity: 0; -webkit-transform: translateY(10px) scale(0.96); transform: translateY(10px) scale(0.96); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes apFreeRegSuccessIn {
  from { opacity: 0; -webkit-transform: translateY(10px) scale(0.96); transform: translateY(10px) scale(0.96); }
  to { opacity: 1; -webkit-transform: none; transform: none; }
}
.ap-free-reg-signin-success-overlay .portal-feedback-glow {
  top: -2.5rem;
  width: 11rem;
  height: 11rem;
  margin-left: -5.5rem;
  background: radial-gradient(circle, rgba(78, 222, 163, 0.3) 0%, transparent 70%);
}
.ap-free-reg-signin-success-content {
  gap: 0.75rem;
}
.ap-free-reg-signin-success-icon {
  position: relative !important;
  display: -webkit-flex !important;
  display: flex !important;
  width: 4.25rem !important;
  height: 4.25rem !important;
  margin: 0 auto 0.15rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0d0c20 !important;
}
.ap-free-reg-signin-success-icon-mark {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 4.25rem !important;
  height: 4.25rem !important;
  border-radius: 50% !important;
  background: #4edea3 !important;
  color: #0d0c20 !important;
  box-shadow:
    0 0 0 10px rgba(78, 222, 163, 0.14),
    0 10px 28px rgba(78, 222, 163, 0.32) !important;
}
.ap-free-reg-signin-success-icon-mark svg {
  width: 1.85rem !important;
  height: 1.85rem !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-free-reg-signin-success-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #f1f0fb !important;
}
.ap-free-reg-signin-success-text {
  margin: 0;
  color: #c2c6d8 !important;
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
}
.ap-free-reg-signin-success-connect {
  margin-top: 0.35rem !important;
  min-height: 3rem;
  border-radius: 0.9rem !important;
  background: #0066ff !important;
  box-shadow: 0 10px 28px rgba(0, 102, 255, 0.38) !important;
}

/* AP-free L0 Getting ready — matches Cambium L1 card slot (no brand) */
.ap-free-page-connecting-overlay {
  z-index: 10002 !important;
  background: #030213 !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(0, 102, 255, 0.12), transparent 70%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ap-free-page-connecting-overlay::before {
  content: none !important;
  display: none !important;
}
#apFreeConnectingOverlay:not(.hidden),
.ap-free-page-connecting-overlay:not(.hidden) {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  padding: 1.5rem 1rem max(2rem, env(safe-area-inset-bottom, 0px)) !important;
}
.ap-free-l0-shell {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 24.5rem !important;
  margin: 0 auto !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
}
.ap-free-l0-brand,
.ap-free-l0-brand-n,
.ap-free-l0-brand-h {
  display: none !important;
}
.ap-free-classic-overlay .portal-feedback-modal.ap-free-classic-modal.ap-free-page-connecting-modal,
#apFreeConnectingOverlay .ap-free-page-connecting-modal,
.ap-free-page-connecting-modal,
.ap-free-l0-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 24.5rem !important;
  height: 15.5rem !important;
  min-height: 15.5rem !important;
  max-height: 15.5rem !important;
  margin: 0 auto !important;
  padding: 1.35rem 1.25rem 1.15rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(10, 13, 29, 0.72) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  text-align: center !important;
  -webkit-transform: none !important;
  transform: none !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}
.ap-free-page-connecting-glow,
.ap-free-page-connecting-overlay .portal-feedback-glow {
  display: none !important;
}
.ap-free-page-connecting-content {
  position: relative !important;
  width: 100% !important;
  -webkit-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 0 0 0.35rem !important;
}
.ap-free-page-connecting-spinner {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  margin: 0.75rem auto 0 !important;
  order: 3 !important;
  position: relative !important;
  z-index: 1 !important;
}
.ap-free-page-connecting-title {
  order: 1 !important;
  margin: 0 !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #e4dffc !important;
}
.ap-free-page-connecting-text {
  order: 2 !important;
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 0.8125rem !important;
  line-height: 1.35 !important;
  max-width: 18rem !important;
}
.ap-free-l0-badge {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-flex: 0 0 auto !important;
  flex: 0 0 auto !important;
  margin: 0.85rem auto 0 !important;
  display: -webkit-inline-flex !important;
  display: inline-flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  padding: 0.28rem 0.7rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  z-index: 2 !important;
}
.ap-free-l0-badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00dbe9 !important;
  box-shadow: 0 0 8px rgba(0, 219, 233, 0.4) !important;
}
.ap-free-page-connecting-spinner-mark {
  position: relative !important;
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-align-items: center !important;
  align-items: center !important;
  -webkit-justify-content: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ap-free-page-connecting-spinner-ring {
  display: block !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  border: 3px solid rgba(0, 102, 255, 0.22) !important;
  border-top-color: #00f0ff !important;
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.35), 0 0 4px rgba(0, 240, 255, 0.4) !important;
  -webkit-animation: apFreePageConnectingSpin 1s linear infinite !important;
  animation: apFreePageConnectingSpin 1s linear infinite !important;
}
@-webkit-keyframes apFreePageConnectingSpin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes apFreePageConnectingSpin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.ap-free-reg-theme .ap-free-page-connecting-overlay .ap-free-page-connecting-modal {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.ap-free-reg-theme .ap-free-reg-signin-success-overlay .ap-free-reg-signin-success-modal,
.ap-free-reg-theme .portal-feedback-overlay.ap-free-reg-signin-success-overlay .portal-feedback-modal {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(165deg, rgba(36, 34, 56, 0.98) 0%, rgba(27, 25, 46, 0.98) 48%, rgba(19, 17, 37, 0.98) 100%) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 102, 255, 0.14),
    0 0 36px rgba(78, 222, 163, 0.1) !important;
}
.ap-free-reg-theme .ap-free-reg-signin-success-overlay .portal-feedback-glow {
  background: radial-gradient(circle, rgba(78, 222, 163, 0.3) 0%, transparent 70%) !important;
}
.ap-free-reg-theme .ap-free-reg-signin-success-overlay .btn-primary {
  background: #0066ff !important;
  box-shadow: 0 10px 28px rgba(0, 102, 255, 0.38) !important;
}
.ap-free-feedback-popup-overlay {
  z-index: 10002;
}
.ap-free-feedback-popup-modal {
  max-width: 18rem;
  padding: 1.5rem 1.25rem 1.25rem;
}
.ap-free-feedback-popup-modal.is-success .portal-feedback-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.32) 0%, transparent 68%);
}
.ap-free-feedback-popup-modal.is-error .portal-feedback-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.24) 0%, transparent 68%);
}
.ap-free-feedback-popup-content {
  gap: 0.625rem;
}
.ap-free-feedback-popup-content .ap-free-reg-success-icon,
.ap-free-feedback-popup-content .ap-free-feedback-popup-icon {
  margin: 0 auto;
}
.ap-free-feedback-popup-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ap-free-feedback-popup-modal.is-success .ap-free-feedback-popup-title {
  color: #ecfdf5;
}
.ap-free-feedback-popup-modal.is-error .ap-free-feedback-popup-title {
  color: #fee2e2;
}
.ap-free-feedback-popup-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #94a3b8;
}
.ap-free-feedback-popup-modal.is-success .ap-free-feedback-popup-text {
  color: #a7f3d0;
}
.ap-free-feedback-popup-modal.is-error .ap-free-feedback-popup-text {
  color: #fecaca;
}
.ap-free-registration-overlay.is-pending .ap-free-reg-actions {
  margin-top: 0.125rem;
}
.ap-free-reg-theme .ap-free-registration-overlay .portal-feedback-modal {
  border-color: var(--border-solid);
}
.ap-free-reg-theme .ap-free-registration-pending {
  color: var(--wa-text-muted);
}
.ap-free-reg-theme .ap-free-registration-title {
  color: var(--wa-text);
  font-weight: 800;
}
.ap-free-header {
  text-align: center;
  padding: 0 0.125rem 0.375rem;
}
.ap-free-page-title {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.35em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ap-free-title-main {
  color: var(--fg);
  font-weight: 800;
}
.ap-free-title-accent {
  color: var(--primary);
  font-weight: 800;
}
.ap-free-header .connect-ap-chip-row {
  margin-top: 0.75rem;
}
.ap-free-ap-footer {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}
.ap-free-ap-footer .connect-ap-chip-row {
  margin-top: 0;
}

.ap-free-offer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
}
.ap-free-offer.hidden {
  display: none !important;
}

/* Reward hero card */
.ap-free-reward-card {
  position: relative;
  padding: 1.375rem 1.25rem;
  border-radius: var(--radius-xl);
  border-color: rgba(0,102,255,0.32);
  background: linear-gradient(
    155deg,
    rgba(0,102,255,0.22) 0%,
    rgba(0,60,180,0.08) 38%,
    rgba(7,10,28,0.92) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0,102,255,0.12),
    0 12px 40px rgba(0,102,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: visible;
}
.ap-free-eyebrow {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-block;
  margin: 0;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #bfdbfe;
  background: rgba(0,102,255,0.18);
  border: 1px solid rgba(0,102,255,0.28);
}
.ap-free-reward-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1px 1fr;
  grid-template-columns: 1fr 1px 1fr;
  -webkit-align-items: center;
  align-items: center;
  min-height: 6.5rem;
}
.ap-free-reward-main {
  -ms-grid-column: 1;
  grid-column: 1;
  min-width: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-self: center;
  align-self: center;
  text-align: center;
  padding: 0.125rem 0.5rem;
}
.ap-free-reward-main .ap-free-reward {
  -webkit-justify-content: center;
  justify-content: center;
}
.ap-free-reward-main .ap-free-reward-combined {
  -webkit-align-items: center;
  align-items: center;
}
.ap-free-reward-divider {
  -ms-grid-column: 2;
  grid-column: 2;
  width: 1px;
  height: 100%;
  min-height: 5.25rem;
  -webkit-align-self: stretch;
  align-self: stretch;
  justify-self: center;
  margin: 0.375rem 0;
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 10px rgba(0,102,255,0.1);
}
.ap-free-wifi-col {
  -ms-grid-column: 3;
  grid-column: 3;
  width: 100%;
  min-height: 6.5rem;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0.25rem 0 0.25rem 0.875rem;
}
.ap-free-reward {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  gap: 0.3125rem;
  margin: 0;
}
.ap-free-reward-combined {
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  gap: 0.125rem;
}
.ap-free-reward-combined .ap-free-reward-value {
  font-size: 2.125rem;
  line-height: 1.15;
}
.ap-free-reward-value {
  font-family: var(--font-display);
  font-size: 3.875rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ap-free-reward-unit {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--primary);
  text-transform: lowercase;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ap-free-promo-badge {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  -webkit-align-self: center;
  align-self: center;
  margin-top: 0.5rem;
  padding: 0.3125rem 0.5625rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #dbeafe;
  background: rgba(0,102,255,0.16);
  border: 1px solid rgba(0,102,255,0.28);
  box-shadow: 0 0 12px rgba(0,102,255,0.1);
}
.ap-free-reward-meta {
  margin: 0.4375rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.95);
}

/* Wi-Fi rings art */
.ap-free-wifi-art {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.ap-free-wifi-art::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,102,255,0.32) 0%, transparent 72%);
  pointer-events: none;
}
.ap-free-wifi-flare {
  position: absolute;
  border-radius: 50%;
  background: rgba(96,165,250,0.9);
  box-shadow: 0 0 12px rgba(0,102,255,0.7);
  pointer-events: none;
  top: 50%;
  left: 50%;
}
.ap-free-wifi-flare-1 {
  width: 0.375rem;
  height: 0.375rem;
  -webkit-transform: translate(2.1rem, -1.65rem);
  transform: translate(2.1rem, -1.65rem);
}
.ap-free-wifi-flare-2 {
  width: 0.3125rem;
  height: 0.3125rem;
  opacity: 0.8;
  -webkit-transform: translate(-2rem, 1.5rem);
  transform: translate(-2rem, 1.5rem);
}
.ap-free-wifi-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(0,102,255,0.3);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ap-free-wifi-ring-1 {
  width: 3.5rem;
  height: 3.5rem;
  border-color: rgba(96,165,250,0.6);
  box-shadow: 0 0 22px rgba(0,102,255,0.28);
}
.ap-free-wifi-ring-2 {
  width: 5.5rem;
  height: 5.5rem;
  border-color: rgba(0,102,255,0.32);
}
.ap-free-wifi-ring-3 {
  width: 7.5rem;
  height: 7.5rem;
  border-color: rgba(0,102,255,0.16);
  box-shadow: 0 0 32px rgba(0,102,255,0.12);
}
.ap-free-wifi-icon {
  position: relative;
  z-index: 1;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: #60a5fa;
}
.ap-free-wifi-icon svg {
  width: 2.125rem;
  height: 2.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Welcome card */
.ap-free-welcome-card {
  padding: 1.25rem 1.125rem 0;
  border-radius: var(--radius-xl);
  border-color: rgba(255,255,255,0.09);
  background: rgba(10,12,32,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.ap-free-welcome-copy {
  padding: 0 0.125rem 0.875rem;
}
.ap-free-welcome-title {
  margin: 0 0 0.625rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ap-free-message {
  margin: 0 0 0.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: 0.012em;
  color: rgba(226,232,240,0.86);
  text-align: center;
}
.ap-free-message.hidden {
  display: none;
}

.ap-free-stats {
  display: -webkit-flex;
  display: flex;
  margin: 0 -1.125rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ap-free-stat {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.9375rem 0.375rem 1.0625rem;
  text-align: center;
}
.ap-free-stat + .ap-free-stat {
  border-left: none;
  position: relative;
}
.ap-free-stat + .ap-free-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.06);
}
.ap-free-stat-icon {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(0,102,255,0.12);
  color: #60a5fa;
}
.ap-free-stat-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ap-free-stat-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.ap-free-stat-value {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
}

.ap-free-limit-modal {
  max-width: 21rem;
}
.ap-free-limit-modal-error,
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-modal.ap-free-limit-modal-error {
  border-color: rgba(248, 113, 113, 0.45);
  background:
    linear-gradient(165deg, rgba(52, 20, 28, 0.98) 0%, rgba(24, 10, 16, 0.99) 48%, rgba(14, 8, 12, 1) 100%);
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.2) inset,
    0 16px 48px rgba(0, 0, 0, 0.72),
    0 0 44px rgba(239, 68, 68, 0.22);
}
.ap-free-limit-modal-error .portal-feedback-glow,
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-modal.ap-free-limit-modal-error .portal-feedback-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.42) 0%, transparent 68%);
}
.ap-free-limit-modal-paused,
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-modal.ap-free-limit-modal-paused {
  border-color: rgba(96, 165, 250, 0.38);
  background:
    linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.16) inset,
    0 16px 48px rgba(0, 0, 0, 0.72),
    0 0 40px rgba(59, 130, 246, 0.18);
}
.ap-free-limit-modal-paused .portal-feedback-glow,
.ap-free-reg-theme .portal-feedback-overlay .portal-feedback-modal.ap-free-limit-modal-paused .portal-feedback-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.34) 0%, transparent 68%);
}
.ap-free-limit-modal-content {
  gap: 0.75rem;
  padding-top: 0.15rem;
}
.ap-free-limit-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fca5a5;
}
.ap-free-limit-modal-paused .ap-free-limit-eyebrow,
.ap-free-limit-eyebrow-hero {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: #93c5fd;
  text-wrap: balance;
}
.ap-free-limit-modal .ap-free-limit-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.ap-free-limit-modal .ap-free-limit-text {
  margin: 0.15rem 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.92);
}
.ap-free-reg-theme .portal-connecting-overlay .portal-connecting-modal,
.ap-free-reg-theme .ap-free-limit-modal:not(.ap-free-limit-modal-error) {
  border-color: var(--border-solid);
  background: linear-gradient(165deg, #14183f 0%, #0c0e2a 48%, #0a0b1e 100%);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(99, 102, 241, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ap-free-reg-theme .portal-connecting-overlay .portal-connecting-glow,
.ap-free-reg-theme .ap-free-limit-modal:not(.ap-free-limit-modal-error) .portal-feedback-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 68%);
}
.ap-free-reg-theme .portal-connecting-overlay .portal-connecting-spinner-ring {
  border-color: rgba(99, 102, 241, 0.18);
  border-top-color: #6366f1;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.32);
}
.ap-free-reg-theme .ap-free-limit-modal-content .btn-primary {
  box-shadow: 0 6px 22px rgba(79, 70, 229, 0.32);
}
.ap-free-limit-store-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.15rem;
}
.ap-free-limit-play-btn,
.ap-free-limit-apple-btn {
  width: 100%;
  margin: 0;
}
.ap-free-limit-apple-btn:disabled {
  opacity: 0.55;
  filter: none;
  -webkit-filter: none;
  pointer-events: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: none;
}
.ap-free-limit-buy-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.15rem;
}
.portal-feedback-content .ap-free-limit-buy-row .btn {
  width: auto;
}
.ap-free-limit-buy-row .ap-free-limit-more-plans-btn {
  width: auto !important;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 5.75rem;
  min-height: 52px;
  margin: 0 !important;
  padding-left: 1rem;
  padding-right: 1rem;
  color: var(--fg);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.ap-free-limit-buy-row .ap-free-limit-pay200-btn {
  width: auto !important;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  margin: 0 !important;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.ap-free-limit-plans-btn {
  margin-top: 0.15rem;
  color: var(--fg);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
}
.ap-free-limit-dismiss-btn {
  margin-top: 0.125rem;
  color: var(--muted-fg);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Actions */
.ap-free-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.125rem;
}
.ap-free-cta {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,102,255,0.35);
  -webkit-tap-highlight-color: transparent;
}
.ap-free-cta:focus,
.ap-free-cta:active {
  outline: none;
  box-shadow: 0 2px 8px rgba(0,102,255,0.22);
}
#apFreeClaimBtn {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.ap-free-cta-arrow {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  opacity: 0.95;
}
.ap-free-cta-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}
.ap-free-cta-row.is-split #apFreeClaimBtn {
  width: auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.ap-free-cta-row.is-split .ap-free-login-btn {
  width: auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 5.5rem;
  min-height: 52px;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}
.ap-free-login-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.ap-free-login-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.ap-free-cta-row.is-split .ap-free-cta-arrow {
  display: none;
}
.ap-free-cta-row.is-split .ap-free-cta {
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}
.ap-free-cta-row.is-split .ap-free-reg-cta.btn-primary::before {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
}
.ap-free-skip-btn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
}
.ap-free-skip-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  opacity: 0.8;
}

.ap-free-or-divider {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin: 0.125rem 0;
  color: rgba(148,163,184,0.85);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ap-free-or-divider::before,
.ap-free-or-divider::after {
  content: '';
  -webkit-flex: 1;
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}
.ap-free-or-divider span {
  padding: 0 1rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* WhatsApp support — card style on this page */
.ap-free-page .portal-support-footer {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
}
.ap-free-page .portal-support-footer .support-btn {
  -webkit-justify-content: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(10,12,32,0.78);
  border-color: rgba(255,255,255,0.1);
  color: var(--fg);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.ap-free-page .portal-support-footer .support-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: #25d366;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.ap-free-page .portal-support-footer .support-btn::after {
  display: block;
}

/* ─── WhatsApp Connect — single-status card ─────────────────────────── */
.whatsapp-connect-page {
  --wa-green: #25d366;
  --wa-green-soft: rgba(37, 211, 102, 0.16);
  --wa-blue: #4f8cff;
  --wa-ink: #f4f7ff;
  --wa-font: "Plus Jakarta Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: var(--wa-font);
  --font-display: var(--wa-font);
  font-family: var(--wa-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 1.5rem;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
}
.wa-connect-ap-footer {
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0;
  text-align: center;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 247, 255, 0.58);
  /* Out of flex flow so showing AP never shifts the centered card upward */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.15rem);
}
.wa-connect-ap-footer.hidden {
  display: none;
}
.whatsapp-connect-page .portal-support-footer {
  width: 100%;
  margin-top: 0.65rem;
  padding-bottom: 0;
}
.whatsapp-connect-page .portal-support-footer .support-btn {
  width: 100%;
  border-radius: 0.95rem;
}
.wa-connect-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(37, 211, 102, 0.12) 0%, transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(0, 102, 255, 0.14) 0%, transparent 26%),
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(37, 211, 102, 0.2), transparent 58%),
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(0, 102, 255, 0.24), transparent 55%),
    radial-gradient(ellipse 60% 45% at 0% 80%, rgba(37, 99, 235, 0.18), transparent 50%),
    linear-gradient(180deg, #050816 0%, #030213 55%, #061018 100%);
  z-index: 0;
}
.wa-connect-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}
.whatsapp-connect-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24.5rem;
  margin: 0 auto;
  padding: 0 1.15rem 1rem;
}
.wa-connect-header {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  margin-bottom: 1.35rem;
  gap: 0.55rem;
}
.wa-connect-header-tag {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.wa-connect-header-tag::before {
  display: none;
}
.wa-connect-brand {
  margin: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  line-height: 1;
}
.wa-connect-brand-nexwave {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: #ffffff;
  text-shadow: 0 8px 28px rgba(0, 102, 255, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wa-connect-brand-hotspot {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: rgba(148, 163, 184, 0.95);
}
.wa-login-badge {
  display: none;
}
.wa-login-badge-icon {
  display: none;
}
.whatsapp-connect-panel {
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
  padding: 2.35rem 1.45rem 1.85rem;
  width: 100%;
  box-sizing: border-box;
  /* Fixed box for Checking / Setting up / Connecting — same on-screen slot */
  height: 15.5rem;
  min-height: 15.5rem;
  max-height: 15.5rem;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 1.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(165deg, rgba(28, 40, 68, 0.94) 0%, rgba(10, 14, 32, 0.96) 48%, rgba(8, 18, 28, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, 0.1) inset,
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wa-connect-status-icon {
  position: relative;
  z-index: 1;
  width: 3.35rem;
  height: 3.35rem;
  margin-bottom: 0.15rem;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border-radius: 999px;
}
.whatsapp-connect-state-ready .wa-connect-status-icon-ready,
.whatsapp-connect-state-online .wa-connect-status-icon-online {
  color: #ecfdf5;
  background:
    radial-gradient(circle at 35% 30%, rgba(167, 243, 208, 0.42), rgba(16, 185, 129, 0.32) 55%, rgba(6, 40, 28, 0.95) 100%);
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow:
    0 0 0 5px rgba(37, 211, 102, 0.12),
    0 10px 24px rgba(16, 185, 129, 0.28);
}
.whatsapp-connect-state-ready .wa-connect-status-icon-ready {
  color: #dbeafe;
  background:
    radial-gradient(circle at 35% 30%, rgba(147, 197, 253, 0.35), rgba(37, 99, 235, 0.28) 55%, rgba(15, 23, 42, 0.92) 100%);
  border-color: rgba(147, 197, 253, 0.35);
  box-shadow:
    0 0 0 5px rgba(59, 130, 246, 0.1),
    0 10px 24px rgba(37, 99, 235, 0.28);
}
.wa-connect-status-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.whatsapp-connect-state-online .wa-connect-status-icon-ready {
  display: none;
}
.whatsapp-connect-state-online .wa-connect-status-icon-online {
  display: -webkit-flex;
  display: flex;
}
.whatsapp-connect-state-online .wa-connect-status-icon-online.hidden {
  display: -webkit-flex !important;
  display: flex !important;
}
.whatsapp-connect-state-connecting .wa-connect-status-icon,
.whatsapp-connect-state-ap .wa-connect-status-icon,
.whatsapp-connect-state-ap_found .wa-connect-status-icon,
.whatsapp-connect-state-internet .wa-connect-status-icon {
  display: none;
}
.wa-connect-card-sheen,
.wa-connect-card-glow {
  position: absolute;
  pointer-events: none;
}
.wa-connect-card-sheen {
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0%, transparent 34%, transparent 100%);
  opacity: 0.9;
}
.wa-connect-card-glow {
  width: 14rem;
  height: 14rem;
  top: -5rem;
  left: 50%;
  margin-left: -7rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 140, 255, 0.35) 0%, transparent 68%);
  filter: blur(2px);
  -webkit-transition: background 0.4s ease, opacity 0.4s ease;
  transition: background 0.4s ease, opacity 0.4s ease;
}
.whatsapp-connect-state-ap .wa-connect-card-glow,
.whatsapp-connect-state-ap_found .wa-connect-card-glow,
.whatsapp-connect-state-connecting .wa-connect-card-glow,
.whatsapp-connect-state-internet .wa-connect-card-glow,
.whatsapp-connect-state-checking .wa-connect-card-glow {
  background: radial-gradient(circle, rgba(79, 140, 255, 0.4) 0%, transparent 68%);
}
.whatsapp-connect-state-connected .wa-connect-card-glow,
.whatsapp-connect-state-online .wa-connect-card-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.42) 0%, transparent 68%);
}
.whatsapp-connect-state-error .wa-connect-card-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.35) 0%, transparent 68%);
}
.whatsapp-connect-state-ap.whatsapp-connect-panel,
.whatsapp-connect-state-ap_found.whatsapp-connect-panel,
.whatsapp-connect-state-connecting.whatsapp-connect-panel,
.whatsapp-connect-state-internet.whatsapp-connect-panel,
.whatsapp-connect-state-checking.whatsapp-connect-panel,
.whatsapp-connect-state-wifi.whatsapp-connect-panel {
  border-color: rgba(96, 165, 250, 0.28);
}
.whatsapp-connect-state-connected.whatsapp-connect-panel,
.whatsapp-connect-state-online.whatsapp-connect-panel,
.whatsapp-connect-state-ready.whatsapp-connect-panel {
  height: auto;
  max-height: none;
  min-height: 15.5rem;
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, 0.12) inset,
    0 22px 50px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(37, 211, 102, 0.12);
}
.whatsapp-connect-state-error.whatsapp-connect-panel,
.whatsapp-connect-state-wifi.whatsapp-connect-panel {
  height: auto;
  max-height: none;
  min-height: 15.5rem;
}
.whatsapp-connect-state-ready .wa-connect-card-glow {
  opacity: 0.7;
}
.whatsapp-connect-state-ready .wa-connect-eyebrow {
  color: rgba(52, 211, 153, 0.92);
}
.whatsapp-connect-state-error.whatsapp-connect-panel {
  border-color: rgba(248, 113, 113, 0.4);
}
.wa-connect-status {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  width: 100%;
}
.wa-connect-status.wa-connect-status-anim {
  -webkit-animation: waConnectStatusIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  animation: waConnectStatusIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@-webkit-keyframes waConnectStatusIn {
  from { opacity: 0; -webkit-transform: translateY(10px) scale(0.98); transform: translateY(10px) scale(0.98); }
  to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes waConnectStatusIn {
  from { opacity: 0; -webkit-transform: translateY(10px) scale(0.98); transform: translateY(10px) scale(0.98); }
  to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
.wa-connect-icon-stage {
  position: relative;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0.15rem 0 0.55rem;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.wa-connect-icon-orbit {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  -webkit-animation: waConnectOrbit 10s linear infinite;
  animation: waConnectOrbit 10s linear infinite;
}
.whatsapp-connect-state-online .wa-connect-icon-orbit,
.whatsapp-connect-state-connected .wa-connect-icon-orbit {
  border-color: rgba(37, 211, 102, 0.45);
  border-style: solid;
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes waConnectOrbit {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes waConnectOrbit {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.wa-connect-icon {
  position: relative;
  z-index: 1;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(147, 197, 253, 0.35), rgba(37, 99, 235, 0.28) 55%, rgba(15, 23, 42, 0.9) 100%);
  color: #dbeafe;
  border: 1px solid rgba(147, 197, 253, 0.35);
  box-shadow:
    0 0 0 6px rgba(59, 130, 246, 0.1),
    0 12px 28px rgba(37, 99, 235, 0.28);
  -webkit-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.wa-connect-icon-checking,
.wa-connect-icon-connecting,
.wa-connect-icon-wifi,
.wa-connect-icon-ap,
.wa-connect-icon-ap_found,
.wa-connect-icon-internet {
  -webkit-animation: waConnectPulse 1.9s ease-in-out infinite;
  animation: waConnectPulse 1.9s ease-in-out infinite;
}
.wa-connect-icon-connected,
.wa-connect-icon-online {
  background: radial-gradient(circle at 35% 30%, rgba(167, 243, 208, 0.4), rgba(16, 185, 129, 0.3) 55%, rgba(6, 40, 28, 0.95) 100%);
  color: #ecfdf5;
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow:
    0 0 0 6px rgba(37, 211, 102, 0.12),
    0 12px 28px rgba(16, 185, 129, 0.28);
  -webkit-animation: none;
  animation: none;
}
.wa-connect-icon-error {
  background: radial-gradient(circle at 35% 30%, rgba(254, 202, 202, 0.35), rgba(239, 68, 68, 0.28) 55%, rgba(40, 12, 12, 0.95) 100%);
  color: #fee2e2;
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow:
    0 0 0 6px rgba(239, 68, 68, 0.1),
    0 12px 28px rgba(239, 68, 68, 0.22);
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes waConnectPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1), 0 12px 28px rgba(37, 99, 235, 0.28); }
  50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0.04), 0 12px 28px rgba(37, 99, 235, 0.2); }
}
@keyframes waConnectPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.1), 0 12px 28px rgba(37, 99, 235, 0.28); }
  50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0.04), 0 12px 28px rgba(37, 99, 235, 0.2); }
}
.wa-connect-icon-svg {
  width: 2.15rem;
  height: 2.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wa-connect-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #93c5fd;
}
.whatsapp-connect-state-connected .wa-connect-eyebrow,
.whatsapp-connect-state-online .wa-connect-eyebrow {
  color: #6ee7b7;
}
.whatsapp-connect-state-error .wa-connect-eyebrow {
  color: #fca5a5;
}
.wa-connect-title {
  margin: 0;
  max-width: 17.5rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--wa-ink);
  text-wrap: balance;
}
.wa-connect-message {
  margin: 0.15rem 0 0;
  max-width: 18rem;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.92);
  font-family: var(--wa-font, var(--font-display));
}
.whatsapp-connect-state-connecting .wa-connect-message:empty,
.whatsapp-connect-state-online .wa-connect-message:empty {
  display: none;
  margin: 0;
}
.wa-connect-hint {
  margin: 0.15rem 0 0;
  max-width: 18rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.95);
}
.wa-connect-spinner {
  margin-top: 0.55rem;
}
.wa-connect-spinner-ring {
  width: 2.35rem;
  height: 2.35rem;
  border-width: 3px;
  border-top-color: #60a5fa;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}
.whatsapp-connect-state-online .wa-connect-spinner-ring,
.whatsapp-connect-state-connected .wa-connect-spinner-ring {
  border-top-color: #34d399;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.35);
}
.wa-connect-actions {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
  max-width: 17.5rem;
  margin: 0.2rem auto 0;
}
.wa-connect-session-stats {
  position: relative;
  z-index: 1;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  max-width: 18rem;
  margin: 0.35rem auto 0.15rem;
  border-radius: 1rem;
  border: 1px solid rgba(52, 211, 153, 0.28);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(8, 18, 28, 0.82) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.wa-connect-session-stat {
  -webkit-flex: 1;
  flex: 1;
  padding: 1rem 0.75rem;
  text-align: center;
}
.wa-connect-session-stat + .wa-connect-session-stat {
  position: relative;
}
.wa-connect-session-stat + .wa-connect-session-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(52, 211, 153, 0.2);
}
.wa-connect-session-stat-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(52, 211, 153, 0.85);
  margin-bottom: 0.375rem;
}
.wa-connect-session-stat-value {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
#waConnectResetAt {
  white-space: nowrap;
  font-size: clamp(0.68rem, 2.85vw, 0.875rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.wa-connect-retry,
.wa-connect-wa,
.wa-connect-plans,
.wa-connect-primary {
  width: 100%;
  max-width: none;
  margin-top: 0;
  border-radius: 0.95rem;
  font-family: var(--font-display);
  font-weight: 800;
}
.wa-connect-outside-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 24.5rem;
  margin: 0.85rem auto 0;
  padding: 0 1.15rem;
  box-sizing: border-box;
}
.wa-connect-outside-actions.hidden {
  display: none !important;
}
.wa-connect-app-download-lead {
  margin: 0 0 0.65rem;
  max-width: 18.5rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(244, 247, 255, 0.82);
}
.wa-connect-app-download-lead.hidden {
  display: none !important;
}
.wa-connect-play-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  min-height: 60px;
  min-width: 155px;
  border-radius: 0.55rem;
  overflow: hidden;
  opacity: 0.96;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.wa-connect-play-store-badge:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.wa-connect-play-store-badge img {
  display: block;
  width: 155px;
  height: auto;
  max-width: 100%;
}
.whatsapp-connect-state-error .wa-connect-actions {
  max-width: 100%;
  gap: 0.55rem;
}
.whatsapp-connect-state-error .wa-connect-retry.wa-connect-try-again {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
}
.whatsapp-connect-state-error .wa-connect-plans {
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #0066ff 0%, #0088ff 42%, #25d366 100%);
  box-shadow:
    0 10px 28px rgba(0, 102, 255, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.wa-connect-primary {
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, #0066ff 0%, #0088ff 42%, #25d366 100%);
  box-shadow:
    0 10px 28px rgba(0, 102, 255, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.wa-connect-primary:active:not(:disabled) {
  -webkit-transform: scale(0.985);
  transform: scale(0.985);
}
.whatsapp-connect-state-online .wa-connect-plans {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(241, 245, 249, 0.95);
}
.whatsapp-connect-panel .btn.hidden,
.whatsapp-connect-panel .spinner-wrap.hidden,
.whatsapp-connect-panel .wa-connect-icon.hidden,
.whatsapp-connect-panel .wa-connect-hint.hidden,
.whatsapp-connect-panel .wa-connect-eyebrow.hidden,
.whatsapp-connect-panel .wa-connect-primary.hidden {
  display: none !important;
}

/* ─── Registration activate (email link) ─── */
.reg-activate-page .whatsapp-connect-shell {
  max-width: 24.5rem;
}
.reg-activate-panel.whatsapp-connect-panel {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  gap: 0.85rem;
  padding: 2rem 1.35rem 1.75rem;
  justify-content: flex-start;
}
.reg-activate-panel.reg-activate-state-success {
  border-color: rgba(52, 211, 153, 0.38);
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.12) inset,
    0 22px 50px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(37, 211, 102, 0.1);
}
.reg-activate-panel.reg-activate-state-success .wa-connect-card-glow {
  background: radial-gradient(circle, rgba(37, 211, 102, 0.38) 0%, transparent 68%);
}
.reg-activate-panel.reg-activate-state-error {
  border-color: rgba(248, 113, 113, 0.35);
}
.reg-activate-success-icon {
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.1rem;
  border-radius: 999px;
  color: #ecfdf5;
  background:
    radial-gradient(circle at 35% 30%, rgba(167, 243, 208, 0.42), rgba(16, 185, 129, 0.32) 55%, rgba(6, 40, 28, 0.95) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
  box-shadow:
    0 0 0 5px rgba(37, 211, 102, 0.1),
    0 10px 24px rgba(16, 185, 129, 0.24);
}
.reg-activate-state-success .reg-activate-success-icon {
  display: flex;
}
.reg-activate-panel .wa-connect-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.28;
  max-width: 17.5rem;
}
.reg-activate-state-success .wa-connect-title {
  display: none;
}
.reg-activate-panel .wa-connect-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(110, 231, 183, 0.92);
}
.reg-activate-state-success .wa-connect-eyebrow {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(110, 231, 183, 0.92);
}
.reg-activate-panel .wa-connect-message {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 18.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(244, 247, 255, 0.74);
}
.reg-activate-panel .reg-activate-error {
  color: #fca5a5;
}
.reg-activate-actions {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 17.5rem;
  margin-top: 0.45rem;
  gap: 0.65rem;
}
.reg-activate-actions .btn-xl {
  font-size: 0.98rem;
  min-height: 3.05rem;
  border-radius: 0.95rem;
}
.reg-activate-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.reg-activate-actions .btn.is-busy {
  opacity: 0.94;
  pointer-events: none;
}
.reg-activate-actions .btn.is-busy .ap-free-btn-spinner {
  display: block;
}

/* Password reset form (taller than default WA connect card) */
.reg-activate-page.portal-page.whatsapp-connect-page {
  align-items: flex-start;
  padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom, 0px));
}
.reg-pw-form {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.35rem;
  text-align: left;
}
.reg-pw-form .ap-free-reg-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  border: 1px solid #1e293b;
  background: #0a0b1e;
  color: #f8fafc;
  font-size: 1rem;
}
.reg-pw-form .ap-free-reg-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.reg-pw-form .ap-free-reg-input.is-invalid {
  border-color: rgba(248, 113, 113, 0.9);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}
.reg-pw-actions {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.reg-pw-actions .btn {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
  font-weight: 700;
  box-sizing: border-box;
}
.reg-pw-actions .btn-primary {
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
}
.reg-activate-panel .reg-pw-error,
.reg-pw-error {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  color: #fecaca;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.reg-pw-form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.45);
  color: #fecaca;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.reg-pw-form-error-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.05rem;
  color: #f87171;
}
.reg-pw-form-error-text {
  flex: 1 1 auto;
  margin: 0;
}