/* ═══════════════════════════════════════════════════════════════════════════
   ChatWrapped Premium Dark UI — loaded after style.css
   Deep black / charcoal / graphite + purple / electric blue / violet / pink
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── New design tokens ──────────────────────────────────────────────────── */
:root {
  --pm-black:      #08080F;
  --pm-charcoal:   #0F0F1A;
  --pm-surface:    #14142A;
  --pm-card:       #1A1A2E;
  --pm-card-2:     #16213E;
  --pm-purple:     #7C3AED;
  --pm-purple-l:   #A78BFA;
  --pm-purple-d:   #4C1D95;
  --pm-blue:       #3B82F6;
  --pm-blue-l:     #93C5FD;
  --pm-violet:     #8B5CF6;
  --pm-pink:       #EC4899;
  --pm-pink-l:     #F9A8D4;
  --pm-text:       #F0F0FF;
  --pm-text-2:     #B8BDD8;
  --pm-muted:      #4A4D6A;
  --pm-glass:      rgba(255,255,255,0.05);
  --pm-glass-b:    rgba(255,255,255,0.10);
  --pm-glass-b2:   rgba(255,255,255,0.06);
  --pm-glow-p:     0 0 40px rgba(124,58,237,.35), 0 0 80px rgba(124,58,237,.12);
  --pm-glow-b:     0 0 40px rgba(59,130,246,.3);
  --pm-glow-pk:    0 0 40px rgba(236,72,153,.3);
  --grad-hero-pm:  linear-gradient(145deg, #08080F 0%, #0F0F1A 25%, #14142A 55%, #1E0A4A 80%, #2D1069 100%);
  --grad-brand:    linear-gradient(135deg, #7C3AED, #8B5CF6, #3B82F6);
  --grad-purple:   linear-gradient(135deg, #7C3AED, #EC4899);
  --grad-blue:     linear-gradient(135deg, #1E3A8A, #7C3AED);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  background: var(--pm-black) !important;
  color: var(--pm-text) !important;
}
body::before {
  background-color: var(--pm-black) !important;
  background-image: radial-gradient(ellipse at 20% 20%, rgba(124,58,237,.08) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 80%, rgba(59,130,246,.06) 0%, transparent 60%) !important;
}
#upload-screen {
  background: var(--pm-black) !important;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.upload-topbar {
  background: rgba(8,8,15,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}
.lw-chat    { color: var(--pm-text)     !important; }
.lw-wrapped { color: var(--pm-purple-l) !important; }
.lw-dot     { background: var(--pm-purple-l) !important; box-shadow: 0 0 8px var(--pm-purple-l) !important; }

.btn-signin-top {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--pm-glow-p) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: transform .15s, box-shadow .15s !important;
}
.btn-signin-top:hover { transform: translateY(-1px) !important; box-shadow: 0 0 60px rgba(124,58,237,.5) !important; }

.btn-family-bridge-nav {
  background: var(--pm-glass)  !important;
  border: 1px solid var(--pm-glass-b) !important;
  color: var(--pm-text-2) !important;
  border-radius: 10px !important;
  transition: border-color .15s !important;
}
.btn-family-bridge-nav:hover { border-color: rgba(124,58,237,.4) !important; color: var(--pm-text) !important; }

/* ── Hero section ───────────────────────────────────────────────────────── */
.hero-section {
  background: var(--grad-hero-pm) !important;
  position: relative;
  overflow: hidden;
}
/* Override inline blob backgrounds via nth-child */
.hero-blob { filter: blur(110px) !important; }

/* Live ticker */
.live-ticker {
  background: rgba(124,58,237,.18) !important;
  border: 1px solid rgba(124,58,237,.28) !important;
  color: var(--pm-purple-l) !important;
}
.live-dot { background: var(--pm-purple-l) !important; box-shadow: 0 0 8px var(--pm-purple-l) !important; }
.live-text { color: var(--pm-text-2) !important; }

/* Viral tag */
.hero-viral-tag {
  background: rgba(124,58,237,.18) !important;
  border: 1px solid rgba(124,58,237,.32) !important;
  color: var(--pm-purple-l) !important;
}

/* Hero headline + shimmer */
.hero-headline { color: var(--pm-text) !important; }
.shimmer-text {
  background: linear-gradient(135deg, #A78BFA 0%, #F9A8D4 40%, #93C5FD 80%, #A78BFA 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 3s linear infinite !important;
}
.hero-sub { color: rgba(255,255,255,.8) !important; }

/* Emotional pills */
.hero-left span[style*="rgba(239,68,68"] {
  background: rgba(236,72,153,.15) !important;
  border-color: rgba(236,72,153,.3) !important;
  color: #F9A8D4 !important;
}

/* Trial banner */
.hero-trial-banner {
  background: rgba(124,58,237,.14) !important;
  border: 1.5px solid rgba(124,58,237,.32) !important;
  backdrop-filter: blur(12px) !important;
}
.hero-trial-badge {
  background: var(--grad-purple) !important;
}
.hero-trial-btn {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: var(--pm-glow-p) !important;
}

/* Checklist */
.hc-icon { background: rgba(124,58,237,.2) !important; }

/* Proof / stars */
.hero-stars { color: var(--pm-purple-l) !important; }
.hero-proof-text { color: rgba(255,255,255,.8) !important; }
.ha { border-color: rgba(255,255,255,.25) !important; }

/* ── WhatsApp widget dark ────────────────────────────────────────────────── */
.wa-widget {
  background: #13132A !important;
  border: 1px solid rgba(124,58,237,.2) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), var(--pm-glow-p) !important;
}
.wa-chat-header {
  background: linear-gradient(135deg, #1A1A38, #2D1069) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.wa-chat-info strong { color: var(--pm-text) !important; }
.wa-online { color: var(--pm-purple-l) !important; }
.wa-header-badge {
  background: rgba(124,58,237,.25) !important;
  color: var(--pm-purple-l) !important;
  border: 1px solid rgba(124,58,237,.3) !important;
}
.wa-chat-body { background: #0D0D1F !important; }

.wa-bubble-in {
  background: rgba(124,58,237,.14) !important;
  color: var(--pm-text) !important;
  border: 1px solid rgba(124,58,237,.18) !important;
  box-shadow: none !important;
}
.wa-bubble-out {
  background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(59,130,246,.3)) !important;
  color: #fff !important;
}
.wa-time { color: rgba(255,255,255,.45) !important; }
.wa-ticks { color: var(--pm-purple-l) !important; }
.wa-typing { color: rgba(255,255,255,.4) !important; }
.wa-privacy, .privacy-note { color: rgba(255,255,255,.35) !important; }

.wa-file-drop {
  background: rgba(124,58,237,.1) !important;
  border: 2px dashed rgba(124,58,237,.4) !important;
  border-radius: 14px !important;
  transition: background .2s, border-color .2s !important;
}
.wa-file-drop:hover {
  background: rgba(124,58,237,.18) !important;
  border-color: rgba(124,58,237,.7) !important;
}
.wa-file-info strong { color: var(--pm-text) !important; }
.wa-file-info span   { color: var(--pm-text-2) !important; }

/* WA direct CTA */
.wa-direct-btn {
  background: rgba(37,211,102,.14) !important;
  border: 1px solid rgba(37,211,102,.3) !important;
  color: #4ADE80 !important;
  box-shadow: 0 4px 16px rgba(37,211,102,.12) !important;
}
.wa-direct-btn:hover {
  background: rgba(37,211,102,.22) !important;
  box-shadow: 0 6px 24px rgba(37,211,102,.22) !important;
}
.wa-direct-hint { color: rgba(255,255,255,.4) !important; }
.wa-direct-divider { color: rgba(255,255,255,.3) !important; }
.wa-direct-divider::before, .wa-direct-divider::after { background: rgba(255,255,255,.12) !important; }

.export-hint {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: var(--pm-text-2) !important;
}
.export-hint strong { color: var(--pm-text) !important; }

/* ── Stats strip ────────────────────────────────────────────────────────── */
.stats-strip {
  background: var(--pm-charcoal) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.stat-pill strong { color: var(--pm-purple-l) !important; font-size: 1.15rem !important; }
.stat-pill span   { color: var(--pm-text-2) !important; }
.stat-divider     { background: rgba(255,255,255,.07) !important; }

/* ── Landing sections ───────────────────────────────────────────────────── */
.landing-section {
  background: transparent !important;
}
.landing-section:nth-child(even) {
  background: rgba(255,255,255,.018) !important;
}
.landing-title {
  color: var(--pm-text) !important;
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}
.landing-sub  { color: var(--pm-text-2) !important; }

/* ── Feature cards ──────────────────────────────────────────────────────── */
.feature-card {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
  color: var(--pm-text) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
}
.feature-card:hover {
  border-color: rgba(124,58,237,.4) !important;
  box-shadow: var(--pm-glow-p) !important;
  transform: translateY(-3px) !important;
}
.feature-card strong { color: var(--pm-text) !important; }
.feature-card p      { color: var(--pm-text-2) !important; }
.fc-icon {
  background: rgba(124,58,237,.2) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
}

/* ── Result cards ───────────────────────────────────────────────────────── */
.result-card {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
  backdrop-filter: blur(20px) !important;
}
.rc-header   { color: var(--pm-text) !important; }
.rc-meta strong { color: var(--pm-text) !important; }
.rc-meta span   { color: var(--pm-muted) !important; }
.rc-score-badge { background: var(--grad-brand) !important; color: #fff !important; border: none !important; }
.rc-score-badge.rc-score-good { background: linear-gradient(135deg,#4ADE80,#22C55E) !important; }
.rc-score-badge.rc-score-mid  { background: linear-gradient(135deg,#FCD34D,#F59E0B) !important; }
.rc-score-label { color: var(--pm-muted) !important; }
.rc-score-val   { color: var(--pm-text-2) !important; }
.rc-bar-track   { background: rgba(255,255,255,.08) !important; }
.rc-insight {
  background: rgba(124,58,237,.1) !important;
  border: 1px solid rgba(124,58,237,.18) !important;
}
.rc-insight p { color: var(--pm-text-2) !important; }
.rc-insight strong { color: var(--pm-purple-l) !important; }
.rc-tag { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; color: var(--pm-text-2) !important; }
.rc-tag-green { border-color: rgba(74,222,128,.28) !important; color: #4ADE80 !important; }
.rc-tag-amber { border-color: rgba(252,211,77,.25) !important; color: #FCD34D !important; }
.rc-tag-red   { border-color: rgba(252,165,165,.25) !important; color: #FCA5A5 !important; }
.rc-av-teal   { background: linear-gradient(135deg,var(--pm-blue),var(--pm-violet)) !important; }
.rc-av-purple { background: linear-gradient(135deg,var(--pm-purple),var(--pm-pink)) !important; }
.rc-av-orange { background: linear-gradient(135deg,#EA580C,var(--pm-pink)) !important; }
.results-disclaimer { color: var(--pm-muted) !important; }

/* ── How-it-works steps ─────────────────────────────────────────────────── */
.step-card {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
  color: var(--pm-text) !important;
}
.step-card strong { color: var(--pm-text) !important; }
.step-card p      { color: var(--pm-text-2) !important; }
.step-num {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: var(--pm-glow-p) !important;
}
.step-arrow { color: rgba(124,58,237,.5) !important; }

/* ── Reviews ────────────────────────────────────────────────────────────── */
.review-card {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
}
.review-stars  { color: var(--pm-purple-l) !important; }
.review-text   { color: var(--pm-text-2) !important; }
.review-author div strong { color: var(--pm-text) !important; }
.review-author div span   { color: var(--pm-muted) !important; }
.review-avatar { background: var(--grad-brand) !important; }

/* ── Glass teaser / goblets ─────────────────────────────────────────────── */
.glass-teaser-section { background: var(--pm-charcoal) !important; }
.landing-title + .landing-sub + .goblet-live-bar + .glass-teaser-row .glass-teaser-item { }
.glass-teaser-item {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.goblet-chat-label { color: var(--pm-text-2) !important; }
.glass-score-num   { /* kept as-is (set inline by JS) */ }
.glass-score-tag   {
  background: rgba(255,255,255,.07) !important;
  color: var(--pm-text-2) !important;
  border-radius: 99px !important;
}
.glass-score-desc { color: var(--pm-muted) !important; }
.goblet-live-bar  {
  background: rgba(124,58,237,.15) !important;
  border: 1px solid rgba(124,58,237,.22) !important;
  color: var(--pm-purple-l) !important;
}
.goblet-live-dot  {
  background: var(--pm-purple-l) !important;
  box-shadow: 0 0 8px var(--pm-purple-l) !important;
}

/* ── Family Bridge promo ────────────────────────────────────────────────── */
.fb-promo-section {
  background: linear-gradient(145deg, #0D0D1F, #14142A) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.fb-promo-badge {
  background: var(--grad-purple) !important;
  color: #fff !important;
}
.fb-promo-title { color: var(--pm-text) !important; }
.fb-promo-desc  { color: var(--pm-text-2) !important; }
.fb-promo-list li { color: var(--pm-text-2) !important; }
.fb-promo-list li::marker { color: var(--pm-purple-l) !important; }
.fb-report-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--pm-text-2) !important;
  transition: border-color .2s !important;
}
.fb-report-card:hover {
  border-color: rgba(124,58,237,.3) !important;
  color: var(--pm-text) !important;
}
.btn-fb-promo {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: var(--pm-glow-p) !important;
  border: none !important;
  transition: transform .15s, box-shadow .15s !important;
}
.btn-fb-promo:hover { transform: translateY(-2px) !important; box-shadow: 0 0 60px rgba(124,58,237,.5) !important; }

/* ── Export guide ───────────────────────────────────────────────────────── */
.export-guide-card {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
  color: var(--pm-text) !important;
}
.eg-header strong { color: var(--pm-text) !important; }
.eg-header span   { color: var(--pm-muted) !important; }
.eg-step-num      { background: var(--grad-brand) !important; color: #fff !important; }
.eg-step-text     { color: var(--pm-text-2) !important; }
.eg-step-text strong { color: var(--pm-text) !important; }
.eg-tip {
  background: rgba(124,58,237,.1) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
  color: var(--pm-text-2) !important;
}
.eg-android { background: linear-gradient(135deg,#22C55E,#15803D) !important; }
.eg-ios     { background: linear-gradient(135deg,var(--pm-blue),var(--pm-violet)) !important; }
.eg-formats-note {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--pm-text-2) !important;
}
code {
  background: rgba(124,58,237,.15) !important;
  color: var(--pm-purple-l) !important;
  border: 1px solid rgba(124,58,237,.2) !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.landing-footer {
  background: var(--pm-charcoal) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.lf-logo    { color: var(--pm-purple-l) !important; font-weight: 800 !important; }
.lf-tagline { color: var(--pm-text-2) !important; }
.lf-trust   { color: var(--pm-muted) !important; }

/* ── Analysis overlay ───────────────────────────────────────────────────── */
.analysis-card {
  background: linear-gradient(145deg, #12122A, #1A1A3A, #2D1069) !important;
  border: 1px solid rgba(124,58,237,.3) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), var(--pm-glow-p) !important;
}
#analysis-progress-fill {
  background: linear-gradient(90deg, var(--pm-purple), var(--pm-pink)) !important;
  box-shadow: 0 0 16px rgba(124,58,237,.6) !important;
}

/* ── Buttons / primary ──────────────────────────────────────────────────── */
.btn-primary {
  background: var(--grad-brand) !important;
  border: none !important;
  box-shadow: var(--pm-glow-p) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.btn-primary:hover { transform: translateY(-1px) !important; }

/* ── Auth modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(8,8,15,.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.modal-box {
  background: var(--pm-card) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--pm-text) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.7), var(--pm-glow-p) !important;
}
.modal-box h3  { color: var(--pm-text) !important; }
.modal-box p   { color: var(--pm-text-2) !important; }
.modal-close   { color: var(--pm-muted) !important; background: var(--pm-glass) !important; border: 1px solid var(--pm-glass-b2) !important; }
.modal-close:hover { color: var(--pm-text) !important; border-color: rgba(124,58,237,.3) !important; }
.modal-icon    { background: rgba(124,58,237,.2) !important; }
.auth-tabs     { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; }
.auth-tab      { color: var(--pm-text-2) !important; background: transparent !important; border: none !important; }
.auth-tab.active {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: var(--pm-glow-p) !important;
}
.auth-input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: var(--pm-text) !important;
  border-radius: 12px !important;
}
.auth-input:focus {
  border-color: rgba(124,58,237,.5) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.15) !important;
  outline: none !important;
}
.auth-input::placeholder { color: var(--pm-muted) !important; }
.auth-resend-btn { color: var(--pm-purple-l) !important; }

/* Reports modal */
.modal-box-wide { background: var(--pm-card) !important; }
.reports-list   { color: var(--pm-text-2) !important; }
.report-item {
  background: var(--pm-glass) !important;
  border: 1px solid var(--pm-glass-b2) !important;
  border-radius: 12px !important;
}
.report-item:hover { border-color: rgba(124,58,237,.3) !important; }

/* ── v2 Results chrome ──────────────────────────────────────────────────── */
.v2-chrome {
  background: rgba(8,8,15,.88) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.v2-back-btn {
  background: rgba(255,255,255,.07) !important;
  color: var(--pm-text) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.v2-back-btn:hover { background: rgba(124,58,237,.2) !important; border-color: rgba(124,58,237,.4) !important; }
.v2-glass-btn {
  background: rgba(255,255,255,.07) !important;
  color: var(--pm-text) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.v2-glass-btn:hover { background: var(--grad-brand) !important; border-color: transparent !important; box-shadow: var(--pm-glow-p) !important; }
.v2-pro-badge {
  background: var(--grad-brand) !important;
  box-shadow: var(--pm-glow-p) !important;
}

/* Pips */
.v2-pip { background: rgba(255,255,255,.18) !important; }
.v2-pip-active { background: rgba(255,255,255,.8) !important; }
.v2-pip-done   { background: var(--pm-purple-l) !important; }
.v2-pip-fill   { background: var(--pm-purple-l) !important; }

/* Right rail */
.v2-rail-btn { color: rgba(255,255,255,.45) !important; background: none !important; border: none !important; }
.v2-rail-active { color: var(--pm-purple-l) !important; font-weight: 700 !important; }

/* v2 glass card inside wrapped cards */
.v2-glass-card {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Save bar */
.v2-save-bar {
  background: rgba(124,58,237,.22) !important;
  border-top: 1px solid rgba(124,58,237,.3) !important;
  backdrop-filter: blur(20px) !important;
}

/* v2 stats pill */
.v2-stats-pill {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

/* ── AI advisor bottom-sheet — dark ─────────────────────────────────────── */
#v2-ai-bubbles .v2-bubble { background: rgba(255,255,255,.08) !important; color: var(--pm-text) !important; border: 1px solid rgba(255,255,255,.1) !important; }

/* The white advisor sheet — override to dark */
body > div[style*="background:#fff"][style*="border-radius:28px"] {
  background: var(--pm-card) !important;
  color: var(--pm-text) !important;
}
body > div[style*="background:#fff"][style*="border-radius:28px"] button[style*="border:1px solid #e2e8f0"] {
  background: var(--pm-glass) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: var(--pm-text) !important;
}
body > div[style*="background:#fff"][style*="border-radius:28px"] button[style*="background:#f1f5f9"] {
  background: rgba(255,255,255,.07) !important;
  color: var(--pm-text) !important;
}

/* ── Personality type card (injected by JS) ─────────────────────────────── */
.pm-personality-card {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  background: linear-gradient(145deg, #0D0020 0%, #1A0040 35%, #2D0060 65%, #3D0080 100%);
}
.pm-persona-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(167,139,250,.7);
  margin-bottom: 12px;
}
.pm-persona-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(34px, 9vw, 58px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #C4B5FD 0%, #F9A8D4 50%, #93C5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}
.pm-persona-sub {
  font-size: clamp(14px, 3.5vw, 16px);
  color: rgba(255,255,255,.7);
  max-width: 320px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.pm-trait-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}
.pm-trait-pill {
  background: rgba(124,58,237,.22);
  border: 1px solid rgba(167,139,250,.3);
  color: #C4B5FD;
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.pm-stats-row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}
.pm-stat-box {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}
.pm-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  font-weight: 700;
  margin-bottom: 4px;
}
.pm-stat-val {
  font-family: 'Sora', sans-serif;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  color: #fff;
}

/* ── Achievements card (injected by JS) ─────────────────────────────────── */
.pm-achieve-card {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: 80px 20px 24px;
  background: linear-gradient(145deg, #08080F 0%, #0F0A1F 40%, #1A1040 100%);
}
.pm-achieve-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250,204,21,.6);
  margin-bottom: 8px;
}
.pm-achieve-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 4px;
}
.pm-achieve-sub {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
}
.pm-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.pm-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s;
}
.pm-badge-earned {
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(59,130,246,.15));
  border: 1px solid rgba(167,139,250,.3);
  box-shadow: 0 0 20px rgba(124,58,237,.2);
}
.pm-badge-locked {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  opacity: .45;
  filter: grayscale(.7);
}
.pm-badge-icon { font-size: 30px; line-height: 1; }
.pm-badge-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  line-height: 1.2;
}
.pm-badge-earned .pm-badge-name { color: #C4B5FD; }
.pm-badge-earned-glow {
  position: absolute;
  top: -20px; left: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(124,58,237,.3);
  filter: blur(20px);
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .landing-section   { padding: 44px 16px !important; }
  .features-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .results-grid      { grid-template-columns: 1fr !important; }
  .reviews-grid      { grid-template-columns: 1fr !important; }
  .steps-row         { flex-direction: column !important; align-items: center !important; }
  .step-arrow        { transform: rotate(90deg) !important; }
  .export-guide-grid { grid-template-columns: 1fr !important; }
}

/* ── Premium upgrade banner (used in v2 AI card) ────────────────────────── */
.pm-upgrade-banner {
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(59,130,246,.12));
  border: 1px solid rgba(124,58,237,.32);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}
.pm-upgrade-banner-text { flex: 1; }
.pm-upgrade-banner-text strong { color: var(--pm-text); font-size: 14px; display: block; margin-bottom: 2px; }
.pm-upgrade-banner-text span   { color: var(--pm-text-2); font-size: 12px; }
.pm-upgrade-btn {
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--pm-glow-p);
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
}

/* ── Glow orb decorations ───────────────────────────────────────────────── */
.pm-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* ── Section pulse accent line ──────────────────────────────────────────── */
.landing-section > .landing-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--grad-brand);
  border-radius: 99px;
  margin: 10px auto 0;
  box-shadow: var(--pm-glow-p);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
#auto-save-toast {
  background: var(--pm-card) !important;
  border: 1px solid rgba(124,58,237,.3) !important;
  color: var(--pm-text) !important;
  box-shadow: var(--pm-glow-p) !important;
}