/* ============================================================
   Web Theme — Clean, Modern, Light with Warm Accents
   Inspired by undress.app aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── content-visibility helpers ─────────────────────────────
   `content-visibility: auto` lets the browser skip rendering
   (Style + Layout + Paint) for elements that are off-screen.
   Pairs with `contain-intrinsic-size` so the scrollbar stays
   accurate before each section is actually rendered.
   Applied to below-the-fold landing sections (styles, premium
   lineup, BA, how-it-works, features, pricing, SEO, FAQ).
   PageSpeed flagged 856ms of Style & Layout on cold load —
   this class is the largest single lever to bring that down. */
.cv-auto      { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.cv-auto-tall { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.cv-auto-sm   { content-visibility: auto; contain-intrinsic-size: auto 500px; }

:root {
  /* Brand: Let's Nude AI — neon hot pink + cyan on near-black */
  --bg-body: #0a0a0a;
  --bg-section: #0e0e12;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --border-card: rgba(255, 0, 136, 0.18);
  --border-light: rgba(255,255,255,0.06);
  --text-primary: #ffffff;
  --text-secondary: #c8b8e0;
  /* WCAG AA fix: was #7a6b8c (3.8–4.1:1 — failed) — now #9387a5 (5.4–5.9:1)
     against the body's #0a0a0a / typical card backgrounds. Still clearly a
     muted/secondary tone, just brighter enough to be legible for everyone. */
  --text-muted: #9387a5;
  --accent: #ff0088;             /* HOT PINK */
  --accent-hover: #e6007a;
  --accent-light: rgba(255,0,136,0.12);
  --accent-pink: #ff4fa3;
  --accent-cyan: #00f0ff;        /* CYAN */
  --accent-cyan-soft: rgba(0,240,255,0.18);
  --accent-peach: #ff8a65;
  --accent-warm: linear-gradient(135deg, #ff0088, #ff4fa3);
  --accent-gradient: linear-gradient(135deg, #ff0088 0%, #ff4fa3 50%, #00f0ff 110%);
  --gradient-hero: linear-gradient(160deg, #0a0a0a 0%, #1a0420 40%, #08020c 100%);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --shadow-accent: 0 4px 24px rgba(255, 0, 136, 0.45);
  --shadow-cyan:   0 4px 24px rgba(0, 240, 255, 0.35);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-full: 50px;
  --transition: all 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.web-theme {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent-pink); }
a:hover { color: var(--accent); }

a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-hover); }

/* ── Navbar ──────────────────────────────────────────────────── */
.web-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0.75rem 2rem;
  background: rgba(12,7,18,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
}
.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-size: 1.3rem;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex; align-items: center; gap: 0.4rem;
}
.nav-brand i { -webkit-text-fill-color: var(--accent); }
.nav-brand:hover { opacity: 0.85; }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: var(--transition);
}
.nav-links a:hover { color: var(--accent); }

/* Neon nav CTA + brand glyph (legacy, kept for footer fallback) */
.brand-glyph {
  display: inline-block;
  color: var(--accent-cyan);
  text-shadow: 0 0 8px var(--accent-cyan), 0 0 16px rgba(0,240,255,0.6);
  animation: brandPulse 2.4s ease-in-out infinite;
  margin-right: 0.25rem;
}
@keyframes brandPulse {
  0%, 100% { text-shadow: 0 0 8px var(--accent-cyan), 0 0 16px rgba(0,240,255,0.6); }
  50%      { text-shadow: 0 0 14px var(--accent-cyan), 0 0 28px rgba(0,240,255,0.9); }
}

/* Looping brand logo video in nav */
.nav-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none;
}
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 9px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 14px rgba(255, 0, 136, 0.45), 0 0 28px rgba(0, 240, 255, 0.18);
  flex-shrink: 0;
}
.brand-logo video, .brand-logo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Show the static PNG on mobile (saves the 2.24MB logo.mp4 fetch);
   show the video on tablets+ where bandwidth/CPU are less constrained. */
.brand-logo-vid { display: none; }
.brand-logo-img { display: block; }
@media (min-width: 769px) {
  .brand-logo-vid { display: block; }
  .brand-logo-img { display: none; }
}
.brand-text {
  font-size: 1.15rem;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Top-nav Sign Up button (subtler than Generate Now) */
.nav-signup {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--accent-cyan) !important;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none;
  transition: var(--transition);
}
.nav-signup:hover {
  background: rgba(0, 240, 255, 0.22);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
  color: var(--accent-cyan) !important;
}
.btn-neon-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff !important;
  border-radius: var(--radius-full);
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.4px;
  box-shadow: 0 0 18px rgba(255,0,136,0.55), 0 0 40px rgba(255,0,136,0.25);
  transition: var(--transition);
  animation: neonNavPulse 2.4s ease-in-out infinite;
}
.btn-neon-cta:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 24px rgba(255,0,136,0.8), 0 0 60px rgba(255,0,136,0.35);
  color: #fff !important;
}
@keyframes neonNavPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,0,136,0.55), 0 0 40px rgba(255,0,136,0.25); }
  50%      { box-shadow: 0 0 26px rgba(255,0,136,0.85), 0 0 60px rgba(255,0,136,0.4); }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 2rem;
  background: var(--accent);
  color: #fff;
  border: none; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-primary, .btn-primary:visited, .btn-primary:active { color: #fff !important; }
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
  color: #fff !important;
}

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 2rem;
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.btn-sm { padding: 0.55rem 1.4rem; font-size: 0.85rem; }
.btn-gradient {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 2rem;
  background: var(--accent-gradient);
  color: #fff;
  border: none; border-radius: var(--radius-full);
  font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: var(--transition);
  text-decoration: none;
}
.btn-gradient, .btn-gradient:visited, .btn-gradient:active { color: #fff !important; }
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(155, 89, 255, 0.3);
  color: #fff !important;
}

/* ── Hero Section ────────────────────────────────────────────── */
.hero {
  min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 7rem 2rem 4rem;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(232,67,147,0.15) 0%, transparent 70%);
  top: 10%; right: 10%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(253,121,168,0.1) 0%, transparent 70%);
  bottom: 15%; left: 10%;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 720px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 0.82rem; font-weight: 600;
  margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}
.hero h1 .highlight {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.hero-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ── Trust Stats ─────────────────────────────────────────────── */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 0.75rem;
}
.trust-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.trust-icon.purple { background: rgba(232,67,147,0.12); color: var(--accent); }
.trust-icon.pink   { background: rgba(255,107,157,0.12); color: var(--accent-pink); }
.trust-icon.peach  { background: rgba(255,138,101,0.12); color: var(--accent-peach); }
.trust-text .trust-number { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.trust-text .trust-label  { font-size: 0.8rem; color: var(--text-muted); }

/* ── Live trust bar (animated stats) ───────────────────────────── */
.trust-bar-live .trust-item {
  padding: 0.85rem 1.1rem;
  background: rgba(20, 10, 28, 0.45);
  border: 1px solid rgba(255, 0, 136, 0.18);
  border-radius: var(--radius);
  transition: var(--transition);
  backdrop-filter: blur(6px);
}
.trust-bar-live .trust-item:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 22px rgba(255, 0, 136, 0.22);
  transform: translateY(-2px);
}
.trust-number-row {
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.trust-bar-live .trust-number {
  font-size: 1.45rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink), var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), text-shadow 0.4s ease;
}
.trust-bar-live .trust-number.bumping {
  transform: scale(1.18);
  filter: drop-shadow(0 0 8px rgba(255, 0, 136, 0.7));
}
.trust-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: livePulse 2s ease-in-out infinite;
  display: inline-block;
}

/* ── Sections ────────────────────────────────────────────────── */
.section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 5rem 2rem;
}
.section-alt { background: var(--bg-section); }
.section-alt .section { padding: 5rem 2rem; }
.section-title { text-align: center; margin-bottom: 3rem; }
.section-title h2 {
  font-size: 2rem; font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}
.section-title p { color: var(--text-secondary); max-width: 500px; margin: 0 auto; font-size: 1rem; }

/* ── Feature Cards ───────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.feature-card:hover {
  border-color: rgba(232,67,147,0.25);
  box-shadow: 0 4px 24px rgba(232,67,147,0.1);
  transform: translateY(-3px);
}
.feature-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}
.feature-icon.purple { background: rgba(232,67,147,0.12); color: var(--accent); }
.feature-icon.pink   { background: rgba(255,107,157,0.12); color: var(--accent-pink); }
.feature-icon.peach  { background: rgba(255,138,101,0.12); color: var(--accent-peach); }
.feature-icon.green  { background: rgba(16,185,129,0.12); color: #34d399; }
.feature-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
.feature-card p  { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

/* ── How It Works ────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  counter-reset: step;
}
.step-card { text-align: center; position: relative; }
.step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
  margin: 0 auto 1rem;
}
.step-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.step-card p  { color: var(--text-secondary); font-size: 0.88rem; }

/* ── Styles Showcase ─────────────────────────────────────────── */
.style-tabs {
  display: flex; gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.style-tab {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 500;
  transition: var(--transition);
  font-family: inherit;
}
.style-tab.active, .style-tab:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.75rem;
}
.style-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: var(--transition);
}
.style-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.style-card .style-emoji { font-size: 1.8rem; margin-bottom: 0.4rem; }
.style-card .style-name { font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.style-card.premium { border-color: rgba(232,67,147,0.25); }
.style-card.premium::after {
  content: 'Premium';
  display: block;
  font-size: 0.68rem;
  color: var(--accent-pink);
  font-weight: 600;
  margin-top: 0.25rem;
}

/* ── Pricing Cards ───────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}
.pricing-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: var(--transition);
  position: relative;
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.pricing-card.popular::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-gradient);
  color: #fff;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.2rem 1rem;
  border-radius: var(--radius-full);
}
.pricing-credits {
  font-size: 2.2rem; font-weight: 800;
  color: var(--accent);
}
.pricing-credits span { font-size: 0.9rem; color: var(--text-muted); font-weight: 400; }
.pricing-price { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; color: var(--text-primary); }
.pricing-price .currency { font-size: 0.85rem; color: var(--text-secondary); }
.pricing-per { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 1.25rem; }

/* ── Safety Section ──────────────────────────────────────────── */
.safety-card {
  max-width: 700px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.safety-card .safety-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: #34d399;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.safety-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.safety-card p  { color: var(--text-secondary); font-size: 0.95rem; max-width: 500px; margin: 0 auto; }

/* ── Footer ──────────────────────────────────────────────────── */
.web-footer {
  border-top: 1px solid var(--border-light);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: var(--bg-section);
}
.footer-links { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); font-size: 0.85rem; }
.footer-links a:hover { color: var(--accent); }

/* ── User Dashboard ──────────────────────────────────────────── */
.dashboard-header {
  padding: 6rem 2rem 2rem;
  max-width: 1140px;
  margin: 0 auto;
}
.dashboard-header h1 { font-size: 1.6rem; font-weight: 700; }
.dashboard-header p { color: var(--text-secondary); }

.credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
}
.credit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.credit-card .label { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.5rem; }
.credit-card .value { font-size: 2.2rem; font-weight: 800; }
.credit-card .value.purple { color: var(--accent); }
.credit-card .value.cyan   { color: #06b6d4; }
.credit-card .value.green  { color: #10b981; }

.dash-actions {
  max-width: 1140px;
  margin: 1.5rem auto;
  padding: 0 2rem;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

.history-section { max-width: 1140px; margin: 1.5rem auto; padding: 0 2rem; }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th {
  text-align: left; padding: 0.75rem 1rem;
  color: var(--text-muted); font-size: 0.78rem;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-light);
}
.history-table td {
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-light);
}
.history-empty { text-align: center; padding: 3rem; color: var(--text-muted); }

/* ── Generate Page ───────────────────────────────────────────── */
.gen-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
}
.gen-steps {
  display: flex; justify-content: center; gap: 2rem;
  margin-bottom: 2.5rem;
}
.gen-step {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text-muted); font-size: 0.88rem; font-weight: 500;
}
.gen-step .step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-card);
  font-weight: 700; font-size: 0.82rem;
}
.gen-step.active { color: var(--text-primary); }
.gen-step.active .step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.gen-step.done .step-num {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.gen-panel { display: none; }
.gen-panel.active { display: block; }

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--border-card);
  border-radius: var(--radius);
  padding: 3rem; text-align: center;
  cursor: pointer; transition: var(--transition);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.upload-zone i { font-size: 2.5rem; color: var(--accent); margin-bottom: 0.75rem; }
.upload-zone .upload-text { color: var(--text-secondary); font-size: 0.95rem; }
.upload-zone .upload-text span { color: var(--accent); font-weight: 600; }
.upload-zone input[type="file"] { display: none; }

.upload-preview { display: none; text-align: center; margin-top: 1.5rem; }
.upload-preview img {
  max-width: 280px; max-height: 280px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.upload-preview .file-info { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.5rem; }

/* Style Selection */
.style-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}
.style-select-card {
  padding: 0.9rem;
  text-align: center; cursor: pointer;
  transition: var(--transition);
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  position: relative;
}
.style-select-card:hover { border-color: var(--accent); }
.style-select-card.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--shadow-accent);
}
.style-select-card .style-emoji { font-size: 1.5rem; }
.style-select-card .style-name { font-size: 0.78rem; margin-top: 0.3rem; font-weight: 500; }
.style-select-card.locked { opacity: 0.45; cursor: not-allowed; }

/* Video-preview variant for the wizard step-2 picker (desktop only) */
.gen-style-card {
  padding: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.10));
}
.gen-style-card .gen-style-emoji,
.gen-style-card .gen-style-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
  margin: 0 !important;
}
.gen-style-card .gen-style-emoji { font-size: 2.6rem; z-index: 0; }
.gen-style-card.has-video .gen-style-video { z-index: 1; }
.gen-style-card .gen-style-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.gen-style-card .gen-style-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.55rem 0.6rem;
  z-index: 3;
}
.gen-style-card .gen-style-info .style-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gen-style-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 24px rgba(255,0,136,0.45);
}
.gen-style-card.selected .gen-style-info {
  background: linear-gradient(0deg, rgba(255,0,136,0.6), transparent);
}

/* Duration Selector */
.duration-options { display: flex; gap: 0.75rem; margin: 1.25rem 0; }
.duration-option {
  flex: 1; padding: 1.25rem; text-align: center;
  cursor: pointer; transition: var(--transition);
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.duration-option:hover { border-color: var(--accent); }
.duration-option.selected { border-color: var(--accent); background: var(--accent-light); }
.duration-option.disabled { opacity: 0.35; cursor: not-allowed; }
.duration-option .dur-value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.duration-option .dur-label { font-size: 0.78rem; color: var(--text-muted); }

.credit-info {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  border: 1px solid rgba(232,67,147,0.2);
  margin: 1.25rem 0;
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* Progress Overlay — non-blocking: just dims the gen panel, leaves nav usable */
.gen-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(12,7,18,0.85);
  backdrop-filter: blur(4px);
  z-index: 5;
  align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.gen-overlay.active { display: flex; }
.gen-progress { text-align: center; max-width: 360px; padding: 1.5rem; }
.gen-spinner {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  margin: 0 auto 1.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.gen-progress .status-text { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; }
.gen-progress .status-sub { color: var(--text-muted); font-size: 0.85rem; }

/* Result */
.gen-result { text-align: center; }
.gen-result video {
  max-width: 100%; max-height: 500px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.gen-result-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* ── Utilities ───────────────────────────────────────────────── */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.hidden { display: none !important; }

/* ── Fade-in on scroll ───────────────────────────────────────── */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   NSFW / Naughty UI additions — particles, glows, ticker, etc.
   ============================================================ */

/* ── Mouse-follow glow ───────────────────────────────────────── */
.mouse-glow {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 102, 0.18) 0%, rgba(232,67,147,0.05) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: screen;
}

/* ── Hero floating heart particles ───────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.heart-particle {
  position: absolute;
  bottom: -40px;
  font-size: 1.4rem;
  opacity: 0;
  animation: floatUp linear forwards;
  filter: drop-shadow(0 0 6px rgba(255, 107, 157, 0.6));
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ── Live "X people online" pill ─────────────────────────────── */
.live-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: rgba(232, 67, 147, 0.08);
  border: 1px solid rgba(232, 67, 147, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 600;
  color: var(--accent-pink);
  margin-bottom: 1rem;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

/* ── Rotating word in hero ───────────────────────────────────── */
.rotating-word {
  display: inline-block;
  /* Slot reserves width for the LONGEST word in the rotating list
     ("Hyper-Real" / "Uncensored" — 10 chars) so swapping in shorter
     text doesn't reflow the hero title and trip CLS. Center-align so
     any unused space is split evenly on both sides instead of leaving
     a long trailing gap before the next word. */
  min-width: 9ch;
  text-align: center;
  background: linear-gradient(135deg, #ff0066, #ff6b9d, #ff8a65);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hueShift 6s linear infinite;
  position: relative;
}
.rotating-word.flipping {
  animation: wordFlip 0.45s ease;
}
@keyframes wordFlip {
  0%   { transform: translateY(0) rotateX(0); opacity: 1; }
  50%  { transform: translateY(-12px) rotateX(90deg); opacity: 0; }
  51%  { transform: translateY(12px) rotateX(-90deg); opacity: 0; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
@keyframes hueShift {
  0%   { filter: hue-rotate(0); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Pulsing glow on CTAs ────────────────────────────────────── */
.btn-gradient.pulse-glow {
  animation: ctaGlow 2.4s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(232, 67, 147, 0.35), 0 0 0 0 rgba(255, 0, 102, 0.5); }
  50%      { box-shadow: 0 4px 24px rgba(232, 67, 147, 0.6),  0 0 0 12px rgba(255, 0, 102, 0); }
}

/* ── Live activity ticker — its own slim section ─────────────── */
.ticker-section {
  position: relative; z-index: 2;
  padding: 1.25rem 1.5rem 0.5rem;
  max-width: 1140px;
  margin: 0 auto;
}
.live-ticker {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 107, 157, 0.18);
  border-radius: var(--radius-full);
  padding: 0.55rem 1rem;
  overflow: hidden;
  position: relative;
}
.live-ticker::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, rgba(20,10,28,0.95), transparent); z-index: 2;
  pointer-events: none;
}
.live-ticker::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  background: linear-gradient(-90deg, rgba(20,10,28,0.95), transparent); z-index: 2;
  pointer-events: none;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--text-secondary);
  /* Slow & readable — was 35s, now 110s. Pause on hover. */
  animation: tickerScroll 110s linear infinite;
}
.live-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { padding: 0 2.25rem; }
@keyframes tickerScroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ── Step card emoji + tilt hover ────────────────────────────── */
.step-card .step-emoji {
  font-size: 2.4rem;
  margin: 0.25rem 0 0.75rem;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.tilt-hover { transition: transform 0.3s ease; }
.tilt-hover:hover { transform: translateY(-6px) rotate(-1.5deg); }
.tilt-hover:hover .step-emoji { transform: scale(1.25) rotate(8deg); }

/* ── Glow-on-hover for cards ─────────────────────────────────── */
.glow-on-hover {
  position: relative; overflow: hidden;
}
.glow-on-hover::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
                              rgba(255, 0, 102, 0.12), transparent 40%);
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
.glow-on-hover:hover::before { opacity: 1; }

/* ── Style cards: spice meter ────────────────────────────────── */
.style-card { position: relative; }
.spice-meter {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.65rem;
  background: rgba(0,0,0,0.45);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  letter-spacing: 1px;
  backdrop-filter: blur(4px);
}
.style-card.premium::after {
  content: '🔥 PREMIUM';
  position: absolute; bottom: 8px; left: 8px;
  font-size: 0.6rem;
  background: linear-gradient(135deg, #ff0066, #ff8a65);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Testimonial rotator ─────────────────────────────────────── */
.testi-rotator {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  min-height: 220px;
}
.testi-card {
  position: absolute; inset: 0;
  background: var(--bg-card);
  border: 1px solid rgba(232, 67, 147, 0.2);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  text-align: center;
  opacity: 0; transform: translateY(20px) scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.testi-card.active {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}
.testi-stars {
  color: #ffc107;
  font-size: 1.05rem;
  letter-spacing: 4px;
  margin-bottom: 0.8rem;
}
.testi-card p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 1rem;
  font-style: italic;
}
.testi-author { color: var(--accent-pink); font-size: 0.85rem; font-weight: 600; }
.testi-dots {
  display: flex; gap: 0.4rem; justify-content: center; margin-top: 1.2rem;
}
.testi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: var(--transition);
}
.testi-dot.active {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--accent);
}

/* ── Age-gate modal ──────────────────────────────────────────── */
.age-gate {
  position: fixed; inset: 0;
  background: rgba(8, 5, 12, 0.93);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeInBg 0.3s ease;
}
.age-gate[hidden] { display: none; }
@keyframes fadeInBg { from { opacity: 0; } to { opacity: 1; } }
.age-gate-card {
  max-width: 460px;
  background: var(--bg-section);
  border: 1px solid rgba(232, 67, 147, 0.3);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: 0 0 60px rgba(232, 67, 147, 0.25);
  animation: gatePopIn 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes gatePopIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.age-gate-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  animation: gateBounce 1.4s ease-in-out infinite;
}
@keyframes gateBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.age-gate h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.age-gate p { color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.65; font-size: 0.95rem; }
.age-gate-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.age-gate-foot {
  margin-top: 1.25rem;
  font-size: 0.72rem !important;
  color: var(--text-muted);
}

/* Telegram-bot promo CTA shown inside web pop-ups (age-gate, daily reward,
   check-in). Admin sets the bot username from /admin/dashboard → Settings. */
.bot-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0088cc, #229ED9);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(34,158,217,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.bot-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(34,158,217,0.45);
  filter: brightness(1.05);
  color: #fff;
  text-decoration: none;
}
.bot-promo-cta i { font-size: 1.1rem; }
.bot-promo-cta strong { font-weight: 800; }
.bot-promo-cta-sm {
  margin-top: 0.6rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem;
}
/* Hero / dashboard placement: full-width pill that sits directly under the
   primary Generate CTA so the user has an immediate second option. */
.hero-bot-cta,
.dash-bot-cta {
  display: flex;
  margin: 0.75rem auto 0;
  padding: 0.85rem 1.2rem;
  font-size: 0.95rem;
  width: fit-content;
  max-width: 100%;
}
.dash-bot-cta { margin-top: 0.85rem; }
.reward-popup-bot {
  background: linear-gradient(135deg, #0088cc, #229ED9) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
}
.reward-popup-bot:hover {
  filter: brightness(1.06);
  background: linear-gradient(135deg, #0088cc, #229ED9) !important;
  color: #fff !important;
}

/* ============================================================
   LIVE BACKGROUND — drifting gradient blobs + grid + noise
   ============================================================ */
.live-bg {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.live-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.32;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Blobs spread across the full viewport — top, middle, bottom, both sides —
   and drift wider so the animation reads as "alive" no matter where you scroll. */
.live-bg .blob-1 {
  width: 620px; height: 620px;
  background: radial-gradient(circle, #ff0066 0%, transparent 70%);
  top: 5%; left: -8%;
  animation: blobDrift1 22s ease-in-out infinite alternate;
}
.live-bg .blob-2 {
  width: 540px; height: 540px;
  background: radial-gradient(circle, #00f0ff 0%, transparent 70%);
  top: 35%; right: -10%;
  animation: blobDrift2 28s ease-in-out infinite alternate;
  opacity: 0.20;
}
.live-bg .blob-3 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #ff8a65 0%, transparent 70%);
  bottom: 8%; left: 8%;
  animation: blobDrift3 26s ease-in-out infinite alternate;
  opacity: 0.26;
}
.live-bg .blob-4 {
  width: 460px; height: 460px;
  background: radial-gradient(circle, #6c5ce7 0%, transparent 70%);
  bottom: 28%; right: 8%;
  animation: blobDrift4 32s ease-in-out infinite alternate;
  opacity: 0.26;
}
@keyframes blobDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(35vw, 30vh) scale(1.15); }
}
@keyframes blobDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30vw, 35vh) scale(0.9); }
}
@keyframes blobDrift3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30vw, -28vh) scale(1.2); }
}
@keyframes blobDrift4 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-32vw, -25vh) scale(1.1); }
}
/* Mobile + reduced-motion: kill the blob drift + grid + noise overlays.
   The blur(110px) filter on each blob is a major GPU/paint cost that was
   tanking PageSpeed Total-Blocking-Time on phones. Background still gets
   the body's neon gradient — just not the live drift. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .live-bg { display: none; }
  .heart-particle { display: none; }
  /* Disable all box-shadow/background/filter-based animations on mobile.
     PageSpeed flags these as "non-composited animations" because they force
     the browser to repaint on every frame. The visual loss is minimal but
     the perf gain (CPU + battery) is significant on phones. */
  .live-dot,
  .nav-cta-compact,
  .btn-neon-cta,
  .hero-title,
  .rotating-word,
  .fantasy-card,
  .fantasy-hot-badge,
  .sticky-cta,
  .age-gate-card { animation: none !important; }
}
/* Skip layout/paint for offscreen sections until they scroll into view —
   massive win on long landing pages. The contain-intrinsic-size hint keeps
   scroll position stable while content is "skipped". */
.section,
.fantasy-grid,
.faq-section,
.ticker-strip,
.testi-section,
.web-footer { content-visibility: auto; contain-intrinsic-size: 1px 600px; }
.live-bg .bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 107, 157, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 107, 157, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.live-bg .bg-noise {
  position: absolute; inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Push the dark base color to <html> so the .live-bg fixed layer shows through */
html { background: var(--bg-body); }
body.web-theme { background: transparent; }
.live-bg { z-index: 0; }
.web-nav, .hero-content, .inline-gen, .section, .trust-bar, footer { position: relative; z-index: 2; }

/* ─── Language picker dropdown in nav ─── */
.lang-picker {
  position: relative;
  display: inline-block;
}
.lang-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  transition: var(--transition);
}
.lang-toggle:hover {
  border-color: var(--accent);
  background: rgba(255, 0, 136, 0.10);
  color: var(--accent);
}
.lang-toggle-globe { font-size: 0.92rem; opacity: 0.85; }
.lang-toggle-flag  { font-size: 1.05rem; line-height: 1; }
.lang-toggle-code  { letter-spacing: 0.04em; }
.lang-toggle-arrow { font-size: 0.6rem; transition: transform 0.2s ease; opacity: 0.6; }
.lang-picker.open .lang-toggle-arrow { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 240px;
  max-height: 340px;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 0.35rem 0;
  background: rgba(18, 9, 26, 0.98);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 0, 136, 0.45) transparent;
}
.lang-menu::-webkit-scrollbar { width: 6px; }
.lang-menu::-webkit-scrollbar-track { background: transparent; }
.lang-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 136, 0.4);
  border-radius: 999px;
}
.lang-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 0, 136, 0.7); }
.lang-picker.open .lang-menu { display: block; animation: langMenuFade 0.18s ease-out; }
@keyframes langMenuFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.lang-menu-head {
  padding: 0.55rem 0.95rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.2rem;
}
.lang-name  { flex: 1; }
.lang-check { font-size: 0.78rem; color: var(--accent-cyan); }
/* Make sure the dropdown floats above ALL page sections, including ones
   with content-visibility / new stacking contexts further down the page. */
.web-nav { z-index: 1000 !important; }
.lang-picker { position: relative; z-index: 1001; }
.lang-menu { z-index: 10000; }
.lang-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
}
.lang-item:hover  { background: rgba(255, 0, 136, 0.12); }
.lang-item.active { background: rgba(0, 240, 255, 0.10); color: var(--accent-cyan); font-weight: 600; }
.lang-flag { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
@media (max-width: 600px) {
  .lang-toggle { padding: 0.32rem 0.6rem; font-size: 0.82rem; gap: 0.3rem; }
  .lang-toggle-globe { display: none; }
  .lang-menu { right: -10px; width: 220px; }
}
/* Lighter section-alt overlay so the live background bleeds through every section */
.section-alt {
  background: linear-gradient(180deg, rgba(20, 10, 28, 0.18), rgba(20, 10, 28, 0.32) 50%, rgba(20, 10, 28, 0.18));
  position: relative; z-index: 2;
}

/* ============================================================
   INLINE GENERATOR (embedded on landing page hero)
   ============================================================ */
/* Hero title with inline logo — eye-catching, dramatic, sized to match the headline */
.hero-title-with-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto 1.25rem;
}
.hero-title-text { display: inline-block; }

/* Logo-less hero headline (logo was removed; CTA sits below the sub) */
.hero-title {
  margin: 0 auto 1.1rem;
  font-weight: 800;
  line-height: 1.1;
}
/* Hero "Generate Now" — the page's primary CTA. Bigger than the nav
   button so it reads as the main action visitors should take. */
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.4rem 0 1.5rem;
  padding: 1.1rem 2.4rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 999px;
}

/* Compact nav CTA — smaller than the default .btn-neon-cta so the
   persistent header button doesn't dominate the page. */
.nav-cta-compact {
  padding: 0.42rem 0.95rem !important;
  font-size: 0.78rem !important;
  gap: 0.35rem !important;
}

.hero-logo-inline {
  position: relative;
  width: 120px; height: 120px;
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  animation: heroLogoFloat 4.5s ease-in-out infinite;
  box-shadow:
    0 0 32px rgba(255, 0, 136, 0.45),
    0 0 60px rgba(0, 240, 255, 0.25),
    0 12px 48px rgba(0, 0, 0, 0.5);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Outer rotating gradient ring — bigger, brighter, more visible */
.hero-logo-inline::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    #ff0066, #ff4fa3, #00f0ff, #ff8a65, #ff0066);
  filter: blur(14px);
  opacity: 0.85;
  z-index: -2;
  animation: heroLogoSpin 4s linear infinite;
}
/* Inner sharp gradient border that doesn't blur */
.hero-logo-inline::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 90deg, #ff0066, #00f0ff, #ff4fa3, #ff8a65, #ff0066);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: heroLogoSpin 8s linear infinite reverse;
}
.hero-logo-inline video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  z-index: 0;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-4px) rotate(-1.5deg); }
  75%      { transform: translateY(-2px) rotate(1.5deg); }
}
@keyframes heroLogoSpin {
  to { transform: rotate(360deg); }
}

/* Legacy small logo (still used in nav-brand if desired) — kept for compatibility */
.hero-logo {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: heroLogoFloat 5s ease-in-out infinite;
}
.hero-logo video { width: 100%; height: 100%; object-fit: cover; }

.hero-with-gen { padding-bottom: 4rem; min-height: auto; }
.hero-narrow { max-width: 720px; }
.hero-sub { margin-bottom: 1rem; }
.trust-line { font-size: 0.85rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }

/* Split-hero: text + generator clustered in the center, NOT spread to edges */
.hero-split { padding-top: 7rem; }
.hero-split.hero { display: flex; justify-content: center; align-items: center; }
.hero-grid {
  position: relative; z-index: 2;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* cluster items in viewport center */
  align-items: center;
  gap: 3rem;
}
.hero-split .hero-content.hero-col {
  flex: 0 1 460px;
  max-width: 460px;
  text-align: center;          /* every line of text centered */
  margin: 0;
}
.hero-split .hero-content.hero-col h1,
.hero-split .hero-content.hero-col p {
  text-align: center;
  margin-left: auto; margin-right: auto;
}
.hero-split .inline-gen.hero-col {
  flex: 0 1 580px;
  max-width: 580px;
}

.inline-gen {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  background: rgba(20, 10, 28, 0.65);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 0 80px rgba(232, 67, 147, 0.18), 0 8px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
}
.ig-steps {
  display: flex; gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.ig-step {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition);
}
.ig-step.active { background: rgba(232, 67, 147, 0.15); color: var(--accent-pink); border-color: rgba(232, 67, 147, 0.4); }
.ig-step.done   { color: #34d399; border-color: rgba(52, 211, 153, 0.3); }
.ig-step-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700;
}
.ig-step.active .ig-step-num { background: var(--accent); color: #fff; }

.ig-panel { display: none; animation: igFadeIn 0.3s ease; }
.ig-panel.active { display: block; }
@keyframes igFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* "Style picked" pill — shown on Step 1 once a gallery card has been clicked */
.ig-picked-style {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(0, 240, 255, 0.12));
  border: 1px solid rgba(255, 0, 136, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 0 16px rgba(255, 0, 136, 0.2) inset;
  animation: igFadeIn 0.3s ease;
}
.ig-picked-emoji {
  font-size: 1.7rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.ig-picked-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ig-picked-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.ig-picked-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-picked-prem-hint {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  vertical-align: middle;
}
.ig-picked-clear {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ig-picked-clear:hover {
  background: rgba(255, 0, 136, 0.25);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.ig-upload-zone {
  border: 2px dashed rgba(255, 107, 157, 0.35);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.02);
}
.ig-upload-zone:hover, .ig-upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(232, 67, 147, 0.06);
  transform: translateY(-2px);
}
.ig-upload-icon {
  font-size: 3rem; margin-bottom: 0.75rem;
  animation: gateBounce 2s ease-in-out infinite;
}
.ig-upload-text { color: var(--text-primary); font-weight: 600; }
.ig-upload-text span { color: var(--accent-pink); text-decoration: underline; }
.ig-upload-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.4rem; }

.ig-preview { text-align: center; }
.ig-preview img {
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  border: 1px solid var(--border-card);
}
.ig-preview-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

.ig-style-tabs {
  display: flex; gap: 0.4rem;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: 1rem;
}
.ig-style-tabs .style-tab { padding: 0.3rem 0.85rem; font-size: 0.78rem; }

.ig-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.ig-style-card {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.ig-style-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ig-style-card.selected {
  border-color: var(--accent);
  background: rgba(232, 67, 147, 0.12);
  box-shadow: 0 0 14px rgba(232, 67, 147, 0.3);
}
.ig-style-card.locked { opacity: 0.4; cursor: not-allowed; }
.ig-style-card .ig-style-emoji { font-size: 1.5rem; margin-bottom: 0.25rem; display: block; }
.ig-style-card .ig-style-name { font-size: 0.74rem; color: var(--text-primary); }
.ig-style-card.locked::after {
  content: '🔒'; position: absolute; top: 4px; right: 6px; font-size: 0.7rem;
}

.ig-actions {
  display: flex; gap: 0.6rem; justify-content: center;
  margin-top: 1.25rem; flex-wrap: wrap;
}

.ig-confirm {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.ig-confirm-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light);
}
.ig-confirm-row:last-child { border-bottom: none; }
.ig-confirm-label { color: var(--text-muted); font-size: 0.85rem; min-width: 80px; }
.ig-confirm-row img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; }

/* The MEGA glowing CTA */
.ig-megabtn-wrap { text-align: center; margin: 1.5rem 0 0.75rem; }
.btn-megabig {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.4rem 2.5rem;
  background: linear-gradient(135deg, #ff0066 0%, #e84393 50%, #ff8a65 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: transform 0.2s ease;
  animation: megaPulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(255, 0, 102, 0.4);
}
.btn-megabig:hover { transform: translateY(-2px) scale(1.02); }
.btn-megabig:active { transform: translateY(0) scale(0.99); }
.btn-megabig:disabled { opacity: 0.6; cursor: not-allowed; animation: none; }
.megabig-emoji { font-size: 2rem; }
.megabig-text { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.megabig-title { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.5px; }
.megabig-sub   { font-size: 0.78rem; opacity: 0.92; font-weight: 500; }
@keyframes megaPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 0, 102, 0.4), 0 0 0 0 rgba(255, 0, 102, 0.6); }
  50%      { box-shadow: 0 0 70px rgba(255, 0, 102, 0.65), 0 0 0 22px rgba(255, 0, 102, 0); }
}
.ig-megabtn-foot {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Loading */
.ig-loading { text-align: center; padding: 1.5rem 0.5rem; }
.loading-orb {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff0066, #ff8a65, #6c5ce7, #ff0066);
  margin: 0 auto 1.25rem;
  animation: orbSpin 2s linear infinite, orbPulse 1.4s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 40px rgba(255, 0, 102, 0.4);
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(255, 0, 102, 0.4); }
  50%      { box-shadow: 0 0 70px rgba(255, 0, 102, 0.7); }
}
.ig-loading h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.ig-loading p  { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 1.25rem; }
.ig-progress-bar {
  width: 100%; max-width: 300px; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin: 0 auto 0.75rem;
  overflow: hidden;
}
.ig-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff0066, #ff8a65);
  border-radius: 999px;
  transition: width 1s linear;
}
.ig-elapsed { color: var(--text-muted); font-size: 0.8rem; }

/* Result */
.ig-result { text-align: center; }
.ig-result-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border-radius: var(--radius-full);
  font-size: 0.82rem; font-weight: 600;
  margin-bottom: 1rem;
}
.ig-result video {
  max-width: 100%;
  max-height: 480px;
  border-radius: var(--radius);
  border: 1px solid var(--border-card);
  background: #000;
  box-shadow: 0 0 30px rgba(232, 67, 147, 0.25);
}
.ig-result-actions {
  display: flex; gap: 0.75rem; justify-content: center;
  margin-top: 1.25rem; flex-wrap: wrap;
}

/* Signup-incentive card (post-result) */
.signup-card {
  margin-top: 2rem;
  background: linear-gradient(135deg, rgba(255, 0, 102, 0.12), rgba(108, 92, 231, 0.1));
  border: 1px solid rgba(255, 107, 157, 0.35);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: signupSlideIn 0.6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes signupSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.signup-card.error-card {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.12), rgba(255, 138, 101, 0.1));
  border-color: rgba(244, 67, 54, 0.35);
}
.signup-confetti {
  font-size: 1.8rem;
  letter-spacing: 8px;
  animation: confettiBounce 2s ease-in-out infinite;
  margin-bottom: 0.5rem;
}
@keyframes confettiBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.signup-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  line-height: 1.4;
}
.signup-card p.muted { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.1rem; }
.signup-perks {
  list-style: none;
  text-align: left;
  max-width: 320px;
  margin: 0 auto 1.25rem;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.signup-perks li {
  padding: 0.3rem 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.signup-tiny { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.85rem; }

/* ============================================================
   BEFORE / AFTER — side-by-side cards (image OR video)
   ============================================================ */
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  gap: 1rem;
  max-width: 980px;
  margin: 0 auto;
  align-items: center;
}
.ba-figure {
  position: relative;
  margin: 0;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 0, 136, 0.22);
  box-shadow: 0 8px 32px rgba(255, 0, 136, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ba-figure:hover { transform: translateY(-4px); }
.ba-figure-before { box-shadow: 0 8px 32px rgba(255, 255, 255, 0.10); border-color: rgba(255,255,255,0.15); }
.ba-figure-after  { box-shadow: 0 8px 36px rgba(255, 0, 136, 0.32);  border-color: rgba(255, 0, 136, 0.4); }
.ba-media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  display: block;
  background: #0d0712;
}
.ba-media img,
.ba-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ba-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 2.5rem;
  color: var(--text-muted);
  background: linear-gradient(135deg, rgba(255,0,136,0.06), rgba(0,240,255,0.06));
}
.ba-placeholder span {
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--text-secondary);
}
.ba-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: rgba(0, 0, 0, 0.55);
  font-size: 0.78rem;
  position: relative; z-index: 2;
}
.ba-label {
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.ba-label-before { background: rgba(255,255,255,0.85); color: #1a0a24; }
.ba-label-after  { background: linear-gradient(135deg, var(--accent), var(--accent-pink)); color: #fff; box-shadow: 0 0 10px rgba(255,0,136,0.5); }
.ba-cap-meta { color: var(--text-secondary); font-size: 0.74rem; }

/* Animated arrow between the two cards */
.ba-arrow {
  position: relative;
  height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.ba-arrow-line {
  position: absolute; left: 0; right: 0;
  top: 50%; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), var(--accent-pink), var(--accent));
  transform: translateY(-50%);
}
.ba-arrow-icon {
  position: relative; z-index: 1;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,0,136,0.6);
  animation: arrowPulse 2.2s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 18px rgba(255,0,136,0.6); }
  50%      { transform: scale(1.10); box-shadow: 0 0 30px rgba(255,0,136,0.85); }
}
.ba-caption {
  text-align: center;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.ba-section-desc {
  max-width: 720px;
  margin: 0.85rem auto 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.ba-section-desc strong {
  color: var(--accent-cyan);
  font-weight: 700;
}
.ba-section-desc em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255, 0, 136, 0.4);
}
@media (max-width: 600px) {
  .ba-section-desc { font-size: 0.88rem; padding: 0 0.5rem; }
}

/* Coming-soon teaser under "See the Magic" headline */
.ba-coming-soon {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  max-width: 720px;
  margin: 1rem auto 0;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), rgba(0, 240, 255, 0.10));
  border: 1px dashed rgba(255, 0, 136, 0.45);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
.ba-coming-soon strong {
  color: var(--accent-cyan);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.ba-coming-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0088, #ffc400);
  color: #1a0e00;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(255, 0, 136, 0.35);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .ba-coming-soon { font-size: 0.85rem; padding: 0.6rem 0.8rem; }
}

@media (max-width: 768px) {
  .ba-pair { grid-template-columns: 1fr; gap: 0.75rem; }
  .ba-arrow { transform: rotate(90deg); height: 36px; }
  .ba-arrow-line { left: 30%; right: 30%; }
}

/* ============================================================
   BEFORE / AFTER SLIDER (legacy — used inside the result panel)
   ============================================================ */
.ba-slider {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  border: 1px solid var(--border-card);
  box-shadow: 0 8px 40px rgba(232, 67, 147, 0.25);
}
.ba-after, .ba-before {
  position: absolute; inset: 0;
}
.ba-after video, .ba-before img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.ba-before {
  width: 50%;
  border-right: 3px solid #fff;
  overflow: hidden;
}
.ba-before img { width: 200%; max-width: 200%; }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 3;
}
.ba-handle::before {
  content: '';
  position: absolute;
  width: 44px; height: 44px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(232, 67, 147, 0.7), 0 0 20px rgba(232, 67, 147, 0.5);
  z-index: -1;
}
.ba-handle i { color: var(--accent); position: relative; z-index: 1; }
/* Legacy slider-overlay label rules removed — labels now live in .ba-cap
   (figcaption) and are styled inline by the .ba-label rule earlier. */
.ba-caption {
  text-align: center;
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================================
   PRIVACY BANNER
   ============================================================ */
.privacy-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(232, 67, 147, 0.08));
  border: 1px solid rgba(108, 92, 231, 0.25);
  border-radius: var(--radius);
  padding: 2rem 2rem;
  flex-wrap: wrap;
}
.privacy-icon {
  font-size: 4rem;
  flex-shrink: 0;
}
.privacy-content { flex: 1; min-width: 280px; }
.privacy-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.privacy-list {
  list-style: none;
  padding: 0;
  font-size: 0.93rem;
  color: var(--text-secondary);
}
.privacy-list li {
  padding: 0.45rem 0;
  display: flex; align-items: center; gap: 0.85rem;
}
.privacy-list li span { font-size: 1.2rem; }
.privacy-list li strong { color: var(--text-primary); }

/* ============================================================
   DEMO GALLERY
   ============================================================ */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.demo-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(232, 67, 147, 0.15), rgba(108, 92, 231, 0.15));
  border: 1px solid var(--border-card);
  transition: var(--transition);
}
.demo-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(232, 67, 147, 0.3);
}
.demo-card .demo-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transition: transform 0.4s ease;
}
.demo-card:hover .demo-emoji { transform: scale(1.15) rotate(-4deg); }
.demo-card .demo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.demo-card .demo-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.85rem 1rem;
  z-index: 2;
}
.demo-card .demo-title { font-size: 0.92rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.demo-card .demo-sub   { font-size: 0.74rem; color: rgba(255,255,255,0.7); }
.demo-card .demo-spice {
  position: absolute; top: 8px; right: 8px;
  z-index: 2;
  font-size: 0.7rem;
  background: rgba(0,0,0,0.5);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 1px;
}

/* ============================================================
   PRICING — interactive
   ============================================================ */
.pricing-fancy .pricing-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.pricing-fancy .pricing-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, transparent, rgba(232, 67, 147, 0.5), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pricing-fancy .pricing-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--accent);
  box-shadow: 0 12px 50px rgba(232, 67, 147, 0.3);
}
.pricing-fancy .pricing-card:hover::before { opacity: 1; }
.pricing-fancy .pricing-card.popular::after {
  content: '🔥 MOST POPULAR';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff0066, #ff8a65);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(255, 0, 102, 0.5);
}
.pricing-fancy .pricing-card .savings-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ── 4-step grid ─────────────────────────────────────────────── */
.steps-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ── BA slider drag hint pill ────────────────────────────────── */
.ba-drag-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 1px;
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 0 16px rgba(255, 0, 136, 0.6);
  animation: dragHintPulse 2.4s ease-in-out infinite;
  backdrop-filter: blur(4px);
}
@keyframes dragHintPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
.ba-slider.touched .ba-drag-hint { display: none; }

/* ============================================================
   FANTASY / POPULAR STYLES GALLERY
   ============================================================ */
.fantasy-grid {
  display: grid;
  /* Match the Hot grid's min-width (440px) so regular cards render at the
     same physical height as the Hot cards — same aspect-ratio + same
     min-width = identical card sizes. */
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1rem;
}
.fantasy-card {
  position: relative;
  /* Taller aspect (4:5) — each BEFORE/AFTER half becomes a portrait frame
     (2:5 wide), perfect for selfie/profile content which dominates the
     gallery. Cards feel weightier and the videos read as full clips. */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(0, 240, 255, 0.12));
  border: 1px solid var(--border-card);
  transition: var(--transition);
  /* Localize layout/paint/style so video playback in one card doesn't
     trigger reflow/repaint of the entire grid. */
  contain: layout paint style;
  will-change: transform;
  transform: translateZ(0);
}
.fantasy-video {
  /* Keep video on its own GPU layer so playback frames don't repaint siblings */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.fantasy-card:hover {
  /* Lift only — NO scale. Scaling a card that contains a playing <video>
     forces Chrome/Safari to re-promote the GPU layer and the video
     visibly hiccups (looks like it stopped). translateY alone is safe. */
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 12px 40px rgba(255, 0, 136, 0.45),
              0 0 60px rgba(0, 240, 255, 0.15);
}
.fantasy-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.fantasy-card:hover .fantasy-emoji { transform: scale(1.18) rotate(-4deg); }
.fantasy-overlay {
  position: absolute; inset: 0;
  /* Tiny readability scrim only at the very bottom (where the name sits)
     — no broad dark cover over the video. */
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 25%);
  pointer-events: none;
}
.fantasy-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1rem 1.1rem;
  z-index: 2;
}
.fantasy-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.fantasy-meta { font-size: 0.76rem; color: rgba(255,255,255,0.75); }
.fantasy-spice {
  position: absolute; top: 10px; right: 10px;
  z-index: 2;
  font-size: 0.72rem;
  background: rgba(0,0,0,0.55);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 1px;
  backdrop-filter: blur(4px);
}
.fantasy-premium {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 10px rgba(255, 0, 136, 0.5);
}

/* "Hottest Right Now" group — pulled to the top of the gallery */
.hot-group { margin-bottom: 2rem; }
.hot-group-head {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0 0 1rem;
}
.hot-group .hot-flame {
  font-size: 2rem;
  filter: drop-shadow(0 0 12px rgba(255, 107, 0, 0.85));
  animation: flameWobble 1.3s ease-in-out infinite;
}
@keyframes flameWobble {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(5deg)  scale(1.1); }
}
.hot-group-title {
  font-size: 1.45rem;
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, #ff6b00 0%, #ff3838 50%, #ff0066 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.4px;
}
.hot-group-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3838;
  box-shadow: 0 0 8px #ff3838;
  animation: livePulse 1.6s ease-in-out infinite;
  display: inline-block;
}
.regular-group-head {
  margin: 1.2rem 0 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 1.2rem;
}
.regular-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.regular-group-count {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(255, 196, 0, 0.18));
  border: 1px solid rgba(255, 0, 136, 0.35);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* "+N more styles" teaser card — last cell of the regular grid. Visually
   distinct from real style cards so it reads as a CTA, not a real style. */
.fantasy-more-card {
  position: relative;
  display: flex; align-items: stretch; justify-content: stretch;
  text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(110, 0, 255, 0.22) 60%, rgba(0, 240, 255, 0.18));
  border: 1px dashed rgba(255, 255, 255, 0.25);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fantasy-more-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 136, 0.7);
  box-shadow: 0 14px 38px rgba(255, 0, 136, 0.30);
}
.fantasy-more-inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.fantasy-more-icons {
  font-size: 1.6rem;
  letter-spacing: 0.3rem;
  filter: drop-shadow(0 2px 6px rgba(255, 0, 136, 0.5));
}
.fantasy-more-num {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #fff, #ffc400 60%, #ff0088);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 22px rgba(255, 0, 136, 0.45);
  letter-spacing: -1px;
}
.fantasy-more-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.fantasy-more-cta {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0088, #ff5dd5);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 6px 18px rgba(255, 0, 136, 0.45);
}
.fantasy-more-cta i { font-size: 0.78rem; transition: transform 0.18s ease; }
.fantasy-more-card:hover .fantasy-more-cta i { transform: translateX(4px); }
.fantasy-more-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 0, 136, 0.35), transparent 60%);
  pointer-events: none;
  animation: fantasyMorePulse 2.6s ease-in-out infinite;
  z-index: 1;
}
@keyframes fantasyMorePulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 0.95; transform: scale(1.08); }
}

/* Hot grid: featured cards — bigger than the regular grid + glowy.
   Regular grid uses minmax(360px). Hot uses minmax(440px) so featured styles
   are clearly larger and read as the headliners. Two-up on most desktops. */
.fantasy-grid-hot {
  /* IDENTICAL to .fantasy-grid above so Hot and Regular cards render at
     the same physical size. (Same min track width + same gap + same
     aspect-ratio on .fantasy-card → exact-pixel match.) */
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1rem;
}
.fantasy-card.hot {
  /* Hot cards mirror the regular ratio (4:5) but are larger overall,
     keeping the headliners visibly taller too. */
  aspect-ratio: 4 / 5;
  border: 2px solid rgba(255, 107, 0, 0.6);
  box-shadow:
    0 0 30px rgba(255, 107, 0, 0.4),
    0 0 80px rgba(255, 56, 56, 0.22);
  transform: translateZ(0); /* gpu */
}
.fantasy-card.hot:hover {
  border-color: #ff6b00;
  box-shadow:
    0 14px 38px rgba(255, 107, 0, 0.55),
    0 0 80px rgba(255, 56, 56, 0.35);
}
.fantasy-card.hot::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.10), transparent 60%);
  z-index: 1;
}
.fantasy-hot-badge {
  position: absolute; top: 10px; left: 10px;
  z-index: 3;
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #ff6b00, #ff3838);
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 12px rgba(255, 56, 56, 0.65);
  animation: hotBadgePulse 1.8s ease-in-out infinite;
}
@keyframes hotBadgePulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 2px 12px rgba(255, 56, 56, 0.65); }
  50%      { transform: scale(1.07); box-shadow: 0 2px 18px rgba(255, 56, 56, 0.9); }
}

/* Looping video preview — placeholder emoji shows behind it until it plays */
.fantasy-card.has-video { background: #000; }
.fantasy-card.has-video .ph-emoji {
  z-index: 0;
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.10));
}
.fantasy-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: saturate(1.05);
  z-index: 1;
}
/* Mobile: keep emoji as fallback behind the video (so something always shows
   while the video is loading or if it fails to load). */
@media (max-width: 768px) {
  .fantasy-card .fantasy-emoji      { font-size: 3.4rem; filter: drop-shadow(0 4px 12px rgba(255,0,136,0.35)); }
  .dash-style-card .dash-style-emoji{ font-size: 3rem;   filter: drop-shadow(0 4px 12px rgba(255,0,136,0.35)); }
  .gen-style-card  .gen-style-emoji { font-size: 3rem;   filter: drop-shadow(0 4px 12px rgba(255,0,136,0.35)); }
}

/* ─── Split BEFORE | AFTER layout for gallery cards ─── */
.fantasy-pair {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Real gap between the two frames so each looks like its own box */
  gap: 6px;
  padding: 6px;
  z-index: 0;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), rgba(0, 240, 255, 0.06));
}
.fantasy-half {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.fantasy-half-before {
  /* Subtle separation: slightly cooler tone for BEFORE */
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(255, 255, 255, 0.04));
}
.fantasy-half-after {
  /* Pink-tinted hint for AFTER so the side is identifiable even before video plays */
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(0, 0, 0, 0.5));
  border-color: rgba(255, 0, 136, 0.3);
}
.fantasy-before-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.fantasy-half .fantasy-emoji {
  /* Override the absolute-fill emoji rule from the original card */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.fantasy-half .fantasy-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* BEFORE/AFTER tags — positioned at the bottom-center of each half so they
   don't collide with the HOT, PREMIUM, or SPICE badges in the top corners.
   z-index above .fantasy-info so the title overlay can pass behind them. */
.fantasy-half-tag {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a0a24;
  z-index: 6;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.fantasy-half-tag-after {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 0, 136, 0.5);
}
@media (max-width: 480px) {
  .fantasy-half-tag { font-size: 0.54rem; padding: 0.12rem 0.4rem; }
  .fantasy-half .fantasy-emoji { font-size: 2rem; }
}
/* Phone: when there's not enough horizontal room, stack BEFORE on top of AFTER
   so each frame still has full card width. Card becomes 9:16-ish overall. */
@media (max-width: 600px) {
  .fantasy-grid { grid-template-columns: 1fr; }
  .fantasy-card { aspect-ratio: 4 / 5; }
  .fantasy-pair {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
  }
}
/* Don't transform the <video> element on hover — Chrome re-promotes the
   GPU layer when scale changes on a playing video and the playback hiccups
   ("looks like the video stopped"). The parent card's hover-lift already
   gives plenty of motion feedback. */
.fantasy-card.has-video:hover { box-shadow: 0 14px 44px rgba(255, 0, 136, 0.5), 0 0 70px rgba(0, 240, 255, 0.18); }

/* Skeleton (loading) cards */
.fantasy-card.fantasy-skeleton {
  background: linear-gradient(110deg,
              rgba(255,255,255,0.04) 8%,
              rgba(255,0,136,0.10) 18%,
              rgba(255,255,255,0.04) 33%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  cursor: default;
}
.fantasy-card.fantasy-skeleton:hover { transform: none; box-shadow: none; }
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   FEATURES — 6 cards with cyan icon variant
   ============================================================ */
.features-6 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feature-icon.cyan {
  background: rgba(0, 240, 255, 0.12);
  color: var(--accent-cyan);
  text-shadow: 0 0 8px var(--accent-cyan);
}
.feature-card:hover {
  border-color: rgba(255, 0, 136, 0.45);
  box-shadow: 0 8px 30px rgba(255, 0, 136, 0.2),
              0 0 40px rgba(0, 240, 255, 0.08);
}

/* ============================================================
   PRICING PLANS — 3 cards
   ============================================================ */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}
.plan-skel {
  min-height: 360px;
  background: linear-gradient(110deg,
              rgba(255,255,255,0.04) 8%,
              rgba(255,0,136,0.10) 18%,
              rgba(255,255,255,0.04) 33%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
}
.plan-bonus {
  margin: 0.4rem 0 0.85rem;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(135deg, rgba(0,240,255,0.14), rgba(255,0,136,0.10));
  border: 1px solid rgba(0,240,255,0.3);
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-cyan);
  text-align: center;
}
/* First-purchase bonus tag — sits below the per-tier bonus, only rendered
   for users who have never paid before. Pink/warm gradient to differentiate
   from the cyan "regular" bonus pill. `.plan-fp-live` adds animation. */
.plan-fp-bonus {
  position: relative;
  overflow: hidden;
  margin: 0.25rem 0 0.85rem;
  padding: 0.4rem 0.75rem;
  background: linear-gradient(135deg, rgba(255,0,136,0.16), rgba(255,138,101,0.12));
  border: 1px solid rgba(255,0,136,0.35);
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-pink);
  text-align: center;
}
.plan-fp-bonus strong { color: #fff; font-weight: 800; }
.plan-fp-emoji { display: inline-block; transform-origin: 50% 70%; }

/* ── Live treatment: matches the dashboard banner's vocabulary so the
   offer reads as one consistent promo, not unrelated decoration. */
@keyframes planFpGlow {
  0%, 100% {
    box-shadow: 0 0 0 0   rgba(255,0,136,0.55),
                0 0 18px 0 rgba(255,0,136,0.12) inset;
    border-color: rgba(255,0,136,0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255,0,136,0.00),
                0 0 22px 4px rgba(255,0,136,0.35) inset;
    border-color: rgba(255,0,136,0.85);
  }
}
@keyframes planFpShimmer {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}
@keyframes planFpEmojiBounce {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  25%      { transform: translateY(-3px) rotate(8deg) scale(1.18); }
  50%      { transform: translateY(0)    rotate(-4deg) scale(1); }
  75%      { transform: translateY(-2px) rotate(6deg) scale(1.08); }
}
.plan-fp-bonus.plan-fp-live {
  animation: planFpGlow 2s ease-in-out infinite;
}
.plan-fp-bonus.plan-fp-live::before {
  /* Light streak that sweeps across the pill every 3s — the same trick
     used on shiny "new" buttons across modern dashboards. */
  content: '';
  position: absolute;
  top: 0; left: 0; height: 100%; width: 35%;
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.35) 50%,
              rgba(255,255,255,0) 100%);
  transform: translateX(-110%);
  animation: planFpShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
.plan-fp-bonus.plan-fp-live .plan-fp-emoji {
  animation: planFpEmojiBounce 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .plan-fp-bonus.plan-fp-live,
  .plan-fp-bonus.plan-fp-live::before,
  .plan-fp-bonus.plan-fp-live .plan-fp-emoji {
    animation: none !important;
  }
}

/* Checkout-invoice first-purchase callout — shown above the method-specific
   instructions (crypto / stars / local) so the bonus is impossible to miss
   before the user commits to paying. */
.pay-fp-callout {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(255,0,136,0.16), rgba(255,138,101,0.12));
  border: 1px solid rgba(255,0,136,0.35);
  border-radius: var(--radius);
  color: #ffe6f1;
  font-size: 0.92rem;
  line-height: 1.5;
}
.pay-fp-callout strong { color: #fff; font-weight: 800; }

/* Order-hero pill that breaks down "base + bonus" right beside the headline
   credit count. Inline with the main number so the bonus is visible at a glance. */
.order-hero-fp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255,0,136,0.18);
  border: 1px solid rgba(255,0,136,0.4);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.order-hero-fp-pill strong { color: #fff; font-weight: 800; }
.order-hero-fp-tag {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255,0,136,0.6);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.receipt-summary-row-bonus { background: rgba(255,0,136,0.06); }
.plan-badge.plan-badge-cyan {
  background: linear-gradient(135deg, var(--accent-cyan), #80f5ff);
  color: #001218;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.5);
}
.plan-card {
  position: relative;
  background: rgba(20, 10, 28, 0.7);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), border-color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(8px);
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 14px 50px rgba(255, 0, 136, 0.3);
}
.plan-popular {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.12), rgba(255, 79, 163, 0.06));
  box-shadow: 0 0 60px rgba(255, 0, 136, 0.25);
  transform: scale(1.05);
  /* Extra top padding so the centered ribbon-badge doesn't overlap content */
  padding-top: 2.5rem;
}
.plan-popular:hover { transform: scale(1.07) translateY(-6px); }
.plan-cyan {
  border-color: rgba(0, 240, 255, 0.35);
}
.plan-cyan:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 14px 50px rgba(0, 240, 255, 0.3);
}
/* Crown: floats high above everything; badge sits between crown and card top */
.plan-crown {
  position: absolute;
  top: -56px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.7rem;
  filter: drop-shadow(0 0 10px rgba(255, 0, 136, 0.7));
  animation: gateBounce 2s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.plan-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.5);
  white-space: nowrap;
  z-index: 2;
}
/* Best-value cyan ribbon sits in the same banner spot */
.plan-badge.plan-badge-cyan {
  background: linear-gradient(135deg, var(--accent-cyan), #80f5ff);
  color: #001218;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.5);
}
/* Plans grid needs vertical breathing room so the floating badges/crowns clear */
.plans-grid { padding-top: 3rem; }
.plan-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.plan-price {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.plan-cyan .plan-price {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #80f5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.plan-currency { font-size: 1.5rem; vertical-align: top; }
.plan-decimals { font-size: 1.5rem; }
.plan-period {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.25rem;
  -webkit-text-fill-color: var(--text-muted);
}
.plan-credit {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  min-height: 2.6em;
}
.plan-features {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 1.5rem;
  flex: 1;
}
.plan-features li {
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 0.6rem;
}
.plan-features li i { color: var(--accent); width: 14px; flex-shrink: 0; }
.plan-features li.muted { color: var(--text-muted); }
.plan-features li.muted i { color: var(--text-muted); }

/* Payment-method pills inside plan card */
.plan-pay-methods {
  margin: 0.4rem 0 1.1rem;
  padding: 0.7rem 0.6rem 0.55rem;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.plan-pay-h {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.5rem;
}
.plan-pay-row {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  justify-content: center;
}
.plan-pay-pill {
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Stars-priced plan card (price shown in Telegram Stars / XTR) */
.plan-price-stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.45rem;
  row-gap: 0.1rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  /* Move "Stars" onto its own line under the number so the unit is never
     clipped by a narrow card. */
}
.plan-price-stars .plan-stars-unit {
  flex-basis: 100%;
  text-align: center;
  margin-top: 0.1rem;
}
.plan-stars-icon {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(255, 200, 60, 0.45));
  /* Reset the gradient-text mask inherited from .plan-price so the emoji
     renders normally instead of as a transparent silhouette. */
  -webkit-text-fill-color: initial;
  background: none;
  background-clip: initial;
  -webkit-background-clip: initial;
}
.plan-stars-num {
  font-size: 2.4rem;
  background: linear-gradient(135deg, #ffce4b, #ff9d2c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
  line-height: 1;
}
.plan-stars-unit {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  -webkit-text-fill-color: var(--text-muted);
  background: none;
  background-clip: initial;
  -webkit-background-clip: initial;
}
.plan-price-est {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: -0.1rem 0 0.45rem;
}
.plan-stars-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0.4rem 0 1rem;
  padding: 0.55rem 0.6rem;
  background: rgba(255, 200, 60, 0.07);
  border: 1px solid rgba(255, 200, 60, 0.22);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* Local-tab: country picker shown before any prices are revealed */
.country-picker {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem 0;
}
.country-picker-h {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}
.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1rem 0.85rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.country-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(255, 0, 136, 0.22);
}
.country-flag { font-size: 2rem; line-height: 1; }
.country-name { font-weight: 700; }
.country-currency { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }

/* Provider chips inside a country card (only shown when a country exposes
   multiple PayGate providers — e.g. US: Stripe / PayPal / Robinhood). */
.country-providers {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.country-prov-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.32rem 0.65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.25;
}
.country-prov-chip:hover {
  background: rgba(255, 0, 136, 0.14);
  border-color: var(--accent);
  color: var(--accent);
}
.country-prov-name { white-space: nowrap; }
.country-prov-note {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(255, 200, 90, 0.85);   /* warning amber */
  white-space: normal;
  text-align: center;
}
/* Single-provider country note (no chip wrapper) */
.country-single-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.66rem;
  color: rgba(255, 200, 90, 0.85);
  text-align: center;
  line-height: 1.25;
}
/* Restriction caption above the active price grid */
.local-prov-note {
  margin: -0.4rem auto 0.85rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  color: rgba(255, 220, 150, 0.95);
  background: rgba(255, 184, 77, 0.10);
  border: 1px solid rgba(255, 184, 77, 0.4);
  border-radius: var(--radius-sm);
  text-align: center;
  max-width: 480px;
}

/* Provider switcher shown above the price grid when an active country has
   more than one provider — same look as the country chips, just inline. */
.local-prov-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 1rem;
}
.local-prov-chip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.local-prov-chip:hover {
  background: rgba(0, 240, 255, 0.10);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.local-prov-chip.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.32);
}

/* Bar shown above the local price grid with the picked country + change link */
.local-country-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  margin: 0 auto 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--text-primary);
  width: fit-content;
  max-width: 100%;
}
.local-country-current { font-weight: 600; }
.local-country-currency { color: var(--text-muted); font-weight: 500; }
.local-country-change {
  background: transparent;
  border: 1px solid var(--border-card);
  color: var(--accent-cyan);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.local-country-change:hover { background: rgba(0, 240, 255, 0.10); border-color: var(--accent-cyan); }

.plans-inner-grid {
  grid-column: 1 / -1;
  display: grid;
  /* Cap each cell to a sensible maximum so a single card (e.g. Canada's
     only-tier case) doesn't stretch across the whole row. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: 1.4rem;
}
.plan-price-local {
  text-align: center;
  font-size: 2.1rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
  margin: 0.2rem 0;
}
.local-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  padding: 1.5rem 1rem;
}

/* ── Celebrate-the-payment screen ── */
.success-celebrate {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(circle at 50% 30%, rgba(255, 0, 136, 0.20), rgba(12, 7, 18, 0.92) 60%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: successFade 0.35s ease-out;
}
@keyframes successFade { from { opacity: 0; } to { opacity: 1; } }
.success-confetti-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.success-card {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  background: rgba(20, 10, 28, 0.92);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 2.2rem 2rem 1.8rem;
  text-align: center;
  box-shadow: 0 30px 80px rgba(255, 0, 136, 0.5), 0 0 60px rgba(0, 240, 255, 0.25);
  animation: successPop 0.55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.success-checkmark {
  display: inline-block;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 6px 20px rgba(52, 211, 153, 0.55));
}
.success-circle {
  animation: successDraw 0.7s ease-out forwards;
}
.success-tick {
  animation: successDraw 0.4s ease-out 0.6s forwards;
}
@keyframes successDraw { to { stroke-dashoffset: 0; } }
.success-emojis {
  font-size: 1.8rem;
  letter-spacing: 0.3rem;
  margin: 0.4rem 0 0.6rem;
  animation: successWobble 1.4s ease-in-out infinite;
}
@keyframes successWobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.success-h {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0.35rem 0;
  background: linear-gradient(135deg, #34d399, var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.success-sub { color: var(--text-secondary); margin-bottom: 0.8rem; }
.success-amount {
  display: inline-block;
  margin: 0.6rem 0 1rem;
  padding: 0.7rem 1.2rem;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 14px;
}
.success-amount-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: #34d399;
  display: inline-block;
  margin-right: 0.4rem;
}
.success-amount-unit { color: var(--text-muted); font-weight: 600; }
.success-foot {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  margin: 0.5rem 0 1.1rem;
  text-align: left;
  line-height: 1.45;
}
.success-foot a { color: var(--accent-cyan); text-decoration: underline; }

/* ── Active-referral banner shown until login ──
   Inline flow (not sticky) so it scrolls away naturally with the rest of
   the page instead of looking wedged under the nav. Sits inside the page
   container with a soft pill shape that feels like a card, not a system bar. */
.ref-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 88px auto 0;     /* clear the fixed nav (~70px) */
  max-width: 880px;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.14), rgba(0, 240, 255, 0.14));
  border: 1px solid rgba(255, 0, 136, 0.35);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 0.9rem;
  flex-wrap: wrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: refBannerFade 0.35s ease-out;
}
@keyframes refBannerFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ref-banner-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.ref-banner-text { flex: 1; min-width: 220px; line-height: 1.4; }
.ref-banner-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.35);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.ref-banner-cta:hover { transform: translateY(-1px); color: #fff; }
.ref-banner-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.4rem;
  flex-shrink: 0;
}
.ref-banner-close:hover { color: var(--text-primary); }
@media (max-width: 600px) {
  .ref-banner {
    margin: 78px 0.75rem 0;
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
    gap: 0.55rem;
    border-radius: 12px;
  }
  .ref-banner-cta { padding: 0.32rem 0.7rem; font-size: 0.75rem; }
}

/* ── Notification bell in the nav ── */
.notif-bell-wrap { position: relative; display: inline-block; }
.notif-bell {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.notif-bell:hover {
  border-color: var(--accent);
  background: rgba(255, 0, 136, 0.10);
  color: var(--accent);
}
.notif-bell-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 0 2px rgba(12, 7, 18, 0.95);
}
.notif-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;            /* don't scroll the page when the list bottoms out */
  scroll-behavior: smooth;
  background: rgba(18, 9, 26, 0.98);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  z-index: 9999;
  padding: 0.4rem 0;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 0, 136, 0.55) transparent;
}
/* WebKit/Blink: slim, branded thumb that lives inside the rounded panel
   without breaking the corner radius. */
.notif-menu::-webkit-scrollbar { width: 8px; }
.notif-menu::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;                            /* avoid the rounded top/bottom */
}
.notif-menu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 0, 136, 0.55), rgba(0, 240, 255, 0.45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.notif-menu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 0, 136, 0.85), rgba(0, 240, 255, 0.7));
  background-clip: padding-box;
}
.notif-menu[hidden] { display: none; }
.notif-menu-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.55rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.notif-mark-read {
  background: transparent;
  border: 0;
  font-size: 0.7rem;
  color: var(--accent-cyan);
  cursor: pointer;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.notif-mark-read:hover { color: var(--accent); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-empty {
  padding: 1.2rem 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.85rem;
}
.notif-item {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background-color 0.15s ease;
}
.notif-item:hover { background: rgba(255, 255, 255, 0.03); }
.notif-item.is-unread { background: rgba(255, 0, 136, 0.06); }
.notif-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.notif-text { min-width: 0; flex: 1; }
.notif-title { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.notif-body  { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.notif-time  { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; opacity: 0.75; }
@media (max-width: 600px) {
  .notif-menu { right: -50px; width: 290px; }
}

/* Rating widget shown under the inline-gen result video */
.ig-rate {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  text-align: center;
}
.ig-rate-h {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.ig-rate-stars {
  display: inline-flex;
  gap: 0.25rem;
}
.ig-rate-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.6rem;
  padding: 0.15rem 0.25rem;
  filter: grayscale(100%) opacity(0.4);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ig-rate-star.hover,
.ig-rate-star.selected { filter: grayscale(0%) opacity(1); transform: scale(1.08); }
.ig-rate-star:disabled { cursor: default; transform: none; }
.ig-rate-thanks {
  margin-top: 0.5rem;
  color: var(--accent-cyan);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Soft pulsing highlight ring used to guide the user to the next required step */
.dash-flash {
  animation: dashFlash 1.6s ease-out;
  border-radius: var(--radius-sm);
}
@keyframes dashFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 136, 0.55); }
  50%  { box-shadow: 0 0 0 14px rgba(255, 0, 136, 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 136, 0.0); }
}
/* Floating hint toast that explains what to do next */
.dash-hint-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 12px 32px rgba(255, 0, 136, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 9999;
  max-width: 90vw;
  text-align: center;
}
.dash-hint-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Submit button when prerequisites aren't met — visibly blocked but still
   clickable so the click handler can guide the user. */
.btn-megabig.is-blocked {
  filter: grayscale(45%) brightness(0.85);
  cursor: help;
}
.btn-megabig.is-blocked:hover {
  filter: grayscale(20%) brightness(0.95);
}

/* Whole-card click target for plans */
.plan-card-clickable { cursor: pointer; }
.plan-card-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Payment-method tabs above the pricing grid */
.pay-method-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 1.5rem;
  padding: 0.35rem;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  background: rgba(20, 10, 28, 0.55);
  width: fit-content;
  max-width: 100%;
}

/* Card-region availability note — surfaces only when the Card tab is
   active so users outside US/Europe immediately know to switch to
   Local Payments instead of going through a failed checkout. */
.card-region-note {
  max-width: 720px;
  margin: -0.4rem auto 1.2rem;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.10), rgba(255, 0, 136, 0.06));
  border: 1px dashed rgba(255, 196, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: center;
}
.card-region-note strong { color: #ffc400; }
.card-region-note a {
  color: #00f0ff;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}
.card-region-note a:hover { color: #fff; }
@media (max-width: 600px) {
  .card-region-note { font-size: 0.83rem; padding: 0.65rem 0.85rem; }
}
.pay-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.pay-tab:hover { color: var(--text-primary); }
.pay-tab.is-active {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  box-shadow: 0 6px 20px rgba(255, 0, 136, 0.32);
}
.pay-tab-icon { font-size: 1.05rem; line-height: 1; }
.pay-tab-label { letter-spacing: 0.01em; }
/* Recommended-method tab: persistent neon outline + corner badge so it
   reads as the primary path even when not active. The Stars rail
   converts ~9% on the bot vs near-0% for card via PayGate, so this is
   where we want users to look first. */
.pay-tab-recommended {
  position: relative;
  border-color: rgba(255, 196, 0, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.18) inset;
}
.pay-tab-badge {
  position: absolute;
  top: -8px; right: -6px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffc400, #ff7e00);
  color: #1a0d00;
  box-shadow: 0 4px 12px rgba(255, 196, 0, 0.45);
  pointer-events: none;
}
.pay-stars-note {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.6rem auto 0.4rem;
  max-width: 620px;
}
@media (max-width: 600px) {
  .pay-tab { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
  .pay-tab-icon { font-size: 1rem; }
  .pay-tab-badge { font-size: 0.55rem; top: -6px; right: -4px; }
}

.btn-block { width: 100%; justify-content: center; }
.btn-cyan-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #80f5ff 100%);
  color: #001218 !important;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.4);
}
.btn-cyan-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.7);
  color: #001218 !important;
}

/* ============================================================
   FAQ — neon accordion
   ============================================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 0.6rem;
}
.faq-item {
  background: rgba(20, 10, 28, 0.6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 0;
  transition: var(--transition);
  backdrop-filter: blur(6px);
}
.faq-item[open] {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255, 0, 136, 0.18);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  position: relative;
  padding-right: 2.5rem;
  text-shadow: 0 0 6px rgba(255, 0, 136, 0.3);
  transition: var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--accent-cyan);
  text-shadow: 0 0 6px var(--accent-cyan);
  transition: transform 0.3s ease;
  font-weight: 300;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--accent-pink); }
.faq-answer {
  padding: 0 1.25rem 1.1rem;
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* "What styles are available?" — dynamic style listing */
.faq-styles-loading { color: var(--text-muted); font-size: 0.88rem; }
.faq-style-intro {
  margin: 0 0 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.faq-style-prem-note {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.faq-style-group { margin-bottom: 1rem; }
.faq-style-group:last-child { margin-bottom: 0; }
.faq-style-cat {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.faq-style-count {
  display: inline-block;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--accent-cyan);
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0.05rem 0.5rem;
  font-weight: 700;
}
.faq-style-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.faq-style-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-style-pill:hover {
  border-color: var(--accent);
  background: rgba(255, 0, 136, 0.08);
}
.faq-style-pill.is-premium {
  border-color: rgba(255, 0, 136, 0.45);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.1), rgba(0, 240, 255, 0.05));
}
.faq-style-prem {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  margin-left: 0.15rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.web-footer {
  position: relative; z-index: 2;
  padding: 2.5rem 1.5rem 1.5rem;
  /* Solid background — was rgba(8,4,14,0.85), but the live-bg blobs
     (pink/cyan/magenta) bled through and pushed the effective footer
     background brighter, which collapsed text contrast below WCAG 4.5:1
     on parts of the page. Solid kills that ambiguity. */
  background: #06030d;
  border-top: 1px solid var(--border-card);
  text-align: center;
}
/* Footer text overrides — meet WCAG AA contrast against #06030d.
   Lighthouse flagged: footer-links a, footer-pay-label, footer-copy. */
.web-footer .footer-links a { color: #e2d4f6; }       /* ~12:1 */
.web-footer .footer-pay,
.web-footer .footer-pay-label { color: #b9accc; }     /* ~6:1  */
.web-footer .footer-copy { color: #a89cba; }          /* ~5:1  */
/* Recent-articles internal-link block — short, unobtrusive list directly
   under the main footer link row. Helps Google index the blog posts
   faster by giving them sitewide internal links. */
.footer-articles {
  max-width: 920px;
  margin: 0.6rem auto 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}
.footer-articles-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9accc;
  margin-bottom: 0.45rem;
}
.footer-articles-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.25rem;
  text-align: left;
}
.footer-articles-list a {
  color: #e2d4f6;
  font-size: 0.86rem;
  text-decoration: none;
  line-height: 1.35;
}
.footer-articles-list a:hover { color: #ffaad4; text-decoration: underline; }
.footer-brand {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-brand .brand-glyph { -webkit-text-fill-color: var(--accent-cyan); margin-right: 0.4rem; }
.footer-links {
  display: flex; justify-content: center; align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  transition: var(--transition);
}
.footer-links a:hover { color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.footer-sep { color: var(--accent-cyan); opacity: 0.5; }
.footer-pay {
  display: flex; justify-content: center; align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.footer-pay-label { color: var(--text-muted); font-size: 0.78rem; }
.pay-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
}
.pay-icon:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.pay-icon.usdt { font-size: 0.7rem; color: #26a17b; }
.footer-warning {
  font-size: 0.78rem;
  color: var(--accent-peach);
  margin-bottom: 0.85rem;
  padding: 0.5rem 1rem;
  display: inline-block;
  background: rgba(255, 138, 101, 0.08);
  border: 1px solid rgba(255, 138, 101, 0.2);
  border-radius: var(--radius-full);
}
.footer-copy {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   PAGE-LEVEL POLISH — scroll progress, sticky CTA, scroll-to-top
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-pink), var(--accent-cyan));
  z-index: 9998;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(255, 0, 136, 0.7);
  pointer-events: none;
}

.sticky-cta {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff !important;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  z-index: 9990;
  box-shadow: 0 8px 32px rgba(255, 0, 136, 0.55);
  transform: translateY(80px) scale(0.85);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease, box-shadow 0.3s ease;
  animation: stickyCtaPulse 2.4s ease-in-out infinite;
}
.sticky-cta.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 40px rgba(255, 0, 136, 0.75);
  color: #fff !important;
}
@keyframes stickyCtaPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(255, 0, 136, 0.55), 0 0 0 0 rgba(255, 0, 136, 0.5); }
  50%      { box-shadow: 0 8px 32px rgba(255, 0, 136, 0.6),  0 0 0 14px rgba(255, 0, 136, 0); }
}

.scroll-top {
  position: fixed;
  left: 1.5rem; bottom: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20, 10, 28, 0.85);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 1rem;
  cursor: pointer;
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(80px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease, background 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 240, 255, 0.3);
}
.scroll-top.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.scroll-top:hover {
  background: rgba(0, 240, 255, 0.18);
  box-shadow: 0 6px 24px rgba(0, 240, 255, 0.6);
}

/* ============================================================
   HERO TRUST STRIP + STAT PILLS
   ============================================================ */
.trust-strip {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.4rem 0.95rem 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.trust-avatars {
  display: inline-flex;
  position: relative;
}
.trust-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #0a0a0a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  margin-left: -8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.trust-avatar:first-child { margin-left: 0; }
.trust-avatar:nth-child(1) { background: linear-gradient(135deg, #ff4fa3, #ff0088); }
.trust-avatar:nth-child(2) { background: linear-gradient(135deg, #00f0ff, #0080ff); }
.trust-avatar:nth-child(3) { background: linear-gradient(135deg, #ff8a65, #ff4fa3); }
.trust-avatar:nth-child(4) { background: linear-gradient(135deg, #6c5ce7, #00f0ff); }
.trust-strip strong { color: var(--text-primary); }

.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 0.8rem;
}
.hero-stat {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
}
.hero-stat .hero-stat-num {
  color: var(--accent-cyan);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  /* Reserve width so JS-updated counters (#heroStatGen, #liveOnline) don't
     trigger a layout shift when their digit count grows. CLS killer otherwise. */
  display: inline-block;
  min-width: 4ch;
  text-align: left;
}
#liveOnline {
  display: inline-block;
  min-width: 4ch;
  text-align: left;
}
.hero-stat .hero-stat-label { color: var(--text-secondary); }

/* ============================================================
   BUTTON RIPPLE + MAGNETIC EFFECT
   ============================================================ */
.btn-megabig, .btn-neon-cta, .btn-cyan-cta, .btn-gradient {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   IMPROVED FANTASY CARD — hover overlay with action button
   ============================================================ */
.fantasy-card { transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), border-color 0.3s ease, box-shadow 0.3s ease; }
.fantasy-card .fantasy-cta {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 5;
  padding: 0.6rem 1.1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 22px rgba(255, 0, 136, 0.6);
}
.fantasy-card:hover .fantasy-cta {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.fantasy-card .fantasy-overlay {
  transition: opacity 0.3s ease;
}
.fantasy-card:hover .fantasy-overlay {
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, transparent 30%);
}

/* Mobile: no hover available — anchor the Generate CTA at the bottom of the card
   and always show it. Also darken the overlay so the CTA reads well over video. */
@media (hover: none), (max-width: 768px) {
  .fantasy-card .fantasy-cta {
    top: auto; bottom: 0.7rem;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
    font-size: 0.72rem;
    padding: 0.5rem 0.9rem;
  }
  .fantasy-card .fantasy-info { bottom: 3.2rem; }
  .fantasy-card .fantasy-overlay {
    /* Mobile: keep a slightly larger bottom scrim because the always-on
       Generate CTA sits there and needs contrast. */
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 35%);
  }
}

/* ============================================================
   INLINE GENERATOR — undress.app/edit-style upgrades
   ============================================================ */

/* Free credit pill at top of generator */
.ig-credit-pill {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(255, 0, 136, 0.12));
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ig-credit-pill::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.18), transparent);
  animation: pillShine 3s ease-in-out infinite;
}
@keyframes pillShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ig-credit-pill .credit-gift {
  font-size: 1.1rem;
  animation: gateBounce 1.6s ease-in-out infinite;
}
.ig-credit-pill strong { color: var(--accent-cyan); text-shadow: 0 0 6px rgba(0,240,255,0.5); }

/* Sample-photo strip */
.ig-samples {
  margin-top: 1rem;
  text-align: center;
}
.ig-samples-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.ig-samples-row {
  display: flex; justify-content: center; gap: 0.6rem;
  flex-wrap: wrap;
}
.ig-sample {
  width: 56px; height: 56px;
  border-radius: 12px;
  border: 2px solid rgba(255, 0, 136, 0.25);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.12), rgba(0, 240, 255, 0.08));
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  font-family: inherit;
  padding: 0;
}
.ig-sample:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(255, 0, 136, 0.45);
}
.ig-sample-emoji { font-size: 1.6rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

/* Tips list */
.ig-tips {
  list-style: none;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
}
.ig-tips li {
  padding: 0.2rem 0;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.ig-tips li i { color: var(--accent-cyan); font-size: 0.7rem; flex-shrink: 0; }

/* Mode chips */
.ig-modes {
  margin: 1rem 0 0.5rem;
  text-align: center;
}
.ig-modes-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ig-modes-row {
  display: flex; justify-content: center; gap: 0.45rem;
  flex-wrap: wrap;
}
.ig-mode {
  padding: 0.45rem 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.ig-mode:hover { border-color: var(--accent); color: var(--text-primary); }
.ig-mode.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.5);
}

/* Phase ticker on loading */
.ig-phases {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  margin: 1rem 0;
  font-size: 0.85rem;
}
.ig-phase {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--text-muted);
  transition: var(--transition);
  opacity: 0.5;
}
.ig-phase.active {
  color: var(--accent-cyan);
  opacity: 1;
  text-shadow: 0 0 6px rgba(0,240,255,0.4);
}
.ig-phase.done { color: #34d399; opacity: 1; }
.ig-phase-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: var(--transition);
}
.ig-phase.active .ig-phase-dot {
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: livePulse 1.4s ease-in-out infinite;
}
.ig-phase.done .ig-phase-dot { background: #34d399; }

/* Built-in before/after compare on result */
/* Side-by-side result frames — BEFORE photo + AFTER video, no slider */
.ig-result-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.ig-result-frame {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
}
.ig-result-frame-before { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.ig-result-frame-after  {
  border-color: rgba(255, 0, 136, 0.45);
  box-shadow: 0 0 30px rgba(255, 0, 136, 0.25);
}
.ig-result-frame-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}
.ig-result-frame-media img,
.ig-result-frame-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.ig-result-frame-cap {
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(20, 10, 28, 0.7);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ig-result-frame-cap .ba-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.ig-result-frame-cap .ba-label-before { background: rgba(255, 255, 255, 0.15); color: #fff; }
.ig-result-frame-cap .ba-label-after  { background: linear-gradient(135deg, var(--accent), var(--accent-cyan)); color: #fff; }
.ig-result-video {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
  background: #000;
}
@media (max-width: 600px) {
  .ig-result-pair { grid-template-columns: 1fr; gap: 0.7rem; }
  .ig-result-frame-media { aspect-ratio: 4 / 5; }
}

/* mobile tweaks for new sections */
@media (max-width: 768px) {
  .ig-credit-pill { font-size: 0.78rem; padding: 0.5rem 0.85rem; }
  .ig-sample { width: 48px; height: 48px; }
  .ig-sample-emoji { font-size: 1.4rem; }
  .ig-modes-row { gap: 0.35rem; }
  .ig-mode { padding: 0.4rem 0.75rem; font-size: 0.74rem; }
  .ig-result-compare { aspect-ratio: 4/5; }
  .sticky-cta { right: 0.85rem; bottom: 0.85rem; padding: 0.7rem 1.1rem; font-size: 0.85rem; }
  .scroll-top { left: 0.85rem; bottom: 0.85rem; width: 38px; height: 38px; }
  .hero-stats { font-size: 0.74rem; }
  .trust-strip { font-size: 0.72rem; padding: 0.35rem 0.85rem 0.35rem 0.45rem; }
  .trust-avatar { width: 22px; height: 22px; font-size: 0.65rem; }
  .fantasy-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .fantasy-emoji { font-size: 3rem; }
  .fantasy-name { font-size: 0.9rem; }
  .plan-popular { transform: none; }
  .plan-popular:hover { transform: translateY(-4px); }
  .plan-card { padding: 1.5rem 1.25rem; }
  .plan-price { font-size: 2.4rem; }
  .footer-links { gap: 0.3rem; font-size: 0.78rem; }
  .footer-sep { display: none; }
  .footer-warning { font-size: 0.72rem; }
}

/* ── Mobile tweaks for new bits ──────────────────────────────── */
@media (max-width: 768px) {
  .live-ticker { font-size: 0.75rem; }
  .testi-card { padding: 1.5rem 1.2rem; }
  .testi-card p { font-size: 0.95rem; }
  .age-gate-card { padding: 2rem 1.25rem; }
  .age-gate h2 { font-size: 1.2rem; }
  .age-gate-actions { flex-direction: column; }
  .age-gate-actions .btn-gradient,
  .age-gate-actions .btn-outline { width: 100%; justify-content: center; }
  .step-card .step-emoji { font-size: 2rem; }
  .mouse-glow { display: none; }
  .hero-particles .heart-particle { font-size: 1.05rem; }
  .hero-split { padding-top: 5.5rem; }
  .hero-grid { gap: 1.5rem; flex-direction: column; }
  .hero-split .hero-content.hero-col,
  .hero-split .inline-gen.hero-col { flex: 0 0 auto; max-width: 100%; }
  .hero-split .hero-content h1 { font-size: 2rem; }
  .inline-gen { padding: 1.25rem 1rem; margin: 0 auto; }
  .ig-upload-zone { padding: 1.75rem 1rem; }
  .btn-megabig { padding: 1.1rem 1.4rem; gap: 0.7rem; }
  .megabig-emoji { font-size: 1.5rem; }
  .megabig-title { font-size: 0.95rem; }
  .megabig-sub   { font-size: 0.7rem; }
  .ba-slider { aspect-ratio: 4 / 5; }
  .privacy-banner { flex-direction: column; text-align: center; padding: 1.5rem 1.25rem; }
  .privacy-icon { font-size: 3rem; }
  .privacy-list li { justify-content: flex-start; text-align: left; }
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-card .demo-emoji { font-size: 3rem; }
  .live-bg .blob { filter: blur(60px); opacity: 0.4; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { gap: 0.75rem; }
  .nav-links a { font-size: 0.82rem; }
  .hero { padding: 5rem 1.5rem 3rem; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.95rem; }
  .trust-bar { gap: 1.5rem; }
  .section { padding: 3rem 1.5rem; }
  .gen-steps { gap: 0.75rem; }
  .gen-step span { display: none; }
  .duration-options { flex-direction: column; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .steps-grid { gap: 1.5rem; }
}
@media (max-width: 480px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .styles-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ============================================================
   COMPREHENSIVE MOBILE / TABLET ADAPTATIONS
   ============================================================ */

/* Tablet (≤980px): collapse 2-col hero to 1 column for breathing room */
@media (max-width: 980px) {
  .hero-split { padding-top: 6rem; }
  .hero-grid { flex-direction: column; gap: 1.75rem; }
  .hero-split .hero-content.hero-col,
  .hero-split .inline-gen.hero-col { flex: 0 0 auto; max-width: 100%; width: 100%; }
  .hero-split .hero-content.hero-col { max-width: 560px; margin: 0 auto; }
  .hero-split .inline-gen.hero-col   { max-width: 620px; margin: 0 auto; }
}

/* Tablet & phones (≤900px): hide all nav links except brand + CTA */
@media (max-width: 900px) {
  .nav-links a.hide-mobile { display: none !important; }
  .web-nav { padding: 0.55rem 1rem; }
  .nav-links { gap: 0.5rem; }
}

/* Phones (≤768px): main mobile layer */
@media (max-width: 768px) {
  /* Section padding tighten */
  .section { padding: 3rem 1rem; }
  .section-title h2 { font-size: 1.5rem; }
  .section-title p  { font-size: 0.9rem; }

  /* Hero text */
  .hero-split .hero-content h1 { font-size: 1.75rem; line-height: 1.2; }
  .hero-logo { width: 72px; height: 72px; border-radius: 18px; }
  .hero-title-with-logo { gap: 0.7rem; }
  .hero-logo-inline { width: 80px; height: 80px; border-radius: 20px; }
  .hero-sub { font-size: 0.92rem; }
  .hero-stats { gap: 0.4rem; }
  .hero-stat { padding: 0.3rem 0.7rem; font-size: 0.75rem; gap: 0.35rem; }
  .hero-stat-num { font-size: 0.85rem; }
  .trust-strip { font-size: 0.72rem; padding: 0.3rem 0.85rem 0.3rem 0.4rem; }
  .live-pill { font-size: 0.72rem; padding: 0.3rem 0.85rem; }

  /* Inline generator */
  .inline-gen { padding: 1.1rem 0.85rem; }
  .ig-credit-pill { font-size: 0.78rem; padding: 0.45rem 0.75rem; }
  .ig-steps { font-size: 0.72rem; gap: 0.3rem; }
  .ig-step { padding: 0.3rem 0.55rem; gap: 0.3rem; }
  .ig-step-num { width: 16px; height: 16px; font-size: 0.62rem; }
  .ig-upload-zone { padding: 1.5rem 0.85rem; }
  .ig-upload-icon { font-size: 2.4rem; }
  .ig-upload-text { font-size: 0.88rem; }
  .ig-tips { font-size: 0.74rem; padding: 0.7rem 0.75rem; }
  .ig-modes-row { gap: 0.3rem; }
  .ig-mode { padding: 0.4rem 0.7rem; font-size: 0.74rem; }

  /* Mega button: scale down so it doesn't dominate */
  .btn-megabig { padding: 1rem 1.25rem; gap: 0.6rem; min-height: 56px; width: 100%; max-width: 360px; }
  .megabig-emoji { font-size: 1.4rem; }
  .megabig-title { font-size: 0.9rem; }
  .megabig-sub   { font-size: 0.66rem; }

  /* Result compare: portrait aspect for phones */
  .ig-result-compare { aspect-ratio: 4 / 5; }
  .ig-compare-handle::before { width: 48px; height: 48px; }
  .ig-result-actions { flex-direction: column; gap: 0.5rem; }
  .ig-result-actions .btn-gradient,
  .ig-result-actions .btn-outline { width: 100%; justify-content: center; }

  /* Step indicator on tiny: keep "Upload" label visible but tighter; sub-768 stays as-is */

  /* Plan cards */
  .plans-grid { gap: 1rem; }
  .plan-popular { transform: none; box-shadow: 0 0 32px rgba(255, 0, 136, 0.18); }
  .plan-popular:hover { transform: translateY(-4px); }
  .plan-card { padding: 1.4rem 1.1rem; }
  .plan-price { font-size: 2.1rem; }
  .plan-currency, .plan-decimals { font-size: 1.1rem; }

  /* FAQ tighter */
  .faq-item summary { font-size: 0.88rem; padding: 0.85rem 1rem; padding-right: 2.25rem; }
  .faq-answer { font-size: 0.85rem; padding: 0 1rem 0.95rem; }

  /* Sticky CTA: hide scroll-top on phones to avoid finger collision */
  .scroll-top { display: none; }

  /* Footer compress */
  .web-footer { padding: 1.75rem 1rem 1.25rem; }
  .footer-pay { gap: 0.5rem; flex-wrap: wrap; }
  .pay-icon { min-width: 26px; height: 26px; padding: 0 0.4rem; font-size: 0.78rem; }

  /* Trust avatars slightly smaller */
  .trust-avatar { width: 22px; height: 22px; font-size: 0.65rem; }

  /* Before/After section slider on landing */
  .ba-slider { aspect-ratio: 4 / 5; }
  .ba-handle::before { width: 48px; height: 48px; }

  /* Fantasy grid: single column on small screens so each card has full width
     for the BEFORE | AFTER side-by-side split. */
  .fantasy-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .fantasy-card { aspect-ratio: 5 / 3; }
  .fantasy-emoji { font-size: 3rem; }
  .fantasy-name { font-size: 0.82rem; }
  .fantasy-meta { font-size: 0.68rem; }
  .fantasy-info { padding: 0.7rem 0.75rem; }
  .fantasy-cta { font-size: 0.7rem; padding: 0.5rem 0.8rem; }
  .fantasy-spice, .fantasy-premium { font-size: 0.62rem; padding: 2px 6px; }

  /* Demo gallery (if present) */
  .demo-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

  /* Live ticker readable */
  .live-ticker { padding: 0.45rem 0.75rem; }
  .ticker-track { font-size: 0.78rem; animation-duration: 130s; }

  /* Steps grid 4-up */
  .steps-grid.steps-4 { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
}

/* Extra-small phones (≤480px) */
@media (max-width: 480px) {
  .web-nav { padding: 0.5rem 0.75rem; }
  .nav-brand { font-size: 1.05rem; gap: 0.45rem; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-text { font-size: 1rem; }
  .btn-neon-cta { padding: 0.45rem 0.85rem; font-size: 0.78rem; }

  .section { padding: 2.5rem 0.85rem; }
  .section-title h2 { font-size: 1.35rem; }

  .hero-split { padding-top: 5rem; }
  .hero-split .hero-content h1 { font-size: 1.55rem; }
  .hero-sub { font-size: 0.86rem; }
  .hero-stats { font-size: 0.7rem; }

  /* Step labels collapse to numbers only */
  .ig-step span:not(.ig-step-num) { display: none; }
  .ig-step { padding: 0.35rem 0.55rem; }

  /* Plans single column */
  .plans-grid { grid-template-columns: 1fr; }
  .plan-popular { box-shadow: 0 0 24px rgba(255, 0, 136, 0.18); }

  /* Pricing grid (legacy API-fed) */
  .pricing-grid { grid-template-columns: 1fr; }

  /* Sticky CTA: very small */
  .sticky-cta { right: 0.7rem; bottom: 0.7rem; padding: 0.6rem 0.9rem; font-size: 0.78rem; }
  .sticky-cta i { font-size: 0.85rem; }

  /* Footer links: very tight */
  .footer-brand { font-size: 1rem; }
  .footer-links { font-size: 0.74rem; }
  .footer-warning { font-size: 0.7rem; padding: 0.4rem 0.7rem; }

  /* Live BG: kill 2 of 4 blobs to save GPU on tiny phones */
  .live-bg .blob-3, .live-bg .blob-4 { display: none; }

  /* Heart particles less spammy */
  .heart-particle { font-size: 0.85rem !important; }

  /* Age gate */
  .age-gate-card { padding: 1.5rem 1rem; }
  .age-gate-icon { font-size: 2.5rem; }
  .age-gate h2 { font-size: 1.05rem; }

  /* Tap target enforcement on key buttons */
  .btn-gradient, .btn-outline, .btn-neon-cta, .btn-cyan-cta, .btn-block {
    min-height: 44px;
  }

  /* Generator: full-width Next/Back */
  .ig-actions { flex-direction: column; }
  .ig-actions .btn-outline, .ig-actions .btn-gradient { width: 100%; justify-content: center; }
  .ig-preview-actions { flex-direction: column; }
  .ig-preview-actions .btn-outline, .ig-preview-actions .btn-gradient { width: 100%; justify-content: center; }

  /* Steps grid 4-up → single col */
  .steps-grid.steps-4 { grid-template-columns: 1fr; }
}

/* Tiny phones (≤360px) — extreme cases */
@media (max-width: 360px) {
  .hero-split .hero-content h1 { font-size: 1.4rem; }
  .fantasy-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .hero-stat { padding: 0.25rem 0.55rem; font-size: 0.7rem; }
}

/* ============================================================
   AUTH (login + signup) page
   ============================================================ */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6.5rem 1rem 3rem;
  position: relative; z-index: 2;
}
.auth-card {
  width: 100%; max-width: 440px;
  background: rgba(20, 10, 28, 0.78);
  border: 1px solid rgba(255, 0, 136, 0.28);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  box-shadow: 0 0 60px rgba(255, 0, 136, 0.18), 0 12px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
}
.auth-brand {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-brand .brand-glyph { -webkit-text-fill-color: var(--accent-cyan); }

.auth-tabs {
  display: flex;
  gap: 0.4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 4px;
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1;
  padding: 0.55rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}
.auth-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.4);
}

/* Social sign-in row — Google + Telegram. One unified style so the two
   buttons sit cleanly together regardless of label length. White card,
   neutral border, brand-colour icon. */
.auth-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  text-align: center;
  color: var(--text-primary);
}
.auth-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 1.1rem;
  line-height: 1.45;
}

.auth-socials {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
}
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.72rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.94rem;
  letter-spacing: 0.1px;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.btn-social:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-social:active {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(1px);
}
.btn-social-icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.btn-social-label { color: inherit; }

.auth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; animation: igFadeIn 0.3s ease; }

.auth-field {
  display: block;
  margin-bottom: 0.95rem;
}
.auth-field > span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.35rem;
  letter-spacing: 0.3px;
}
.auth-field .auth-opt {
  color: var(--text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.auth-field input {
  width: 100%;
  padding: 0.72rem 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 0, 136, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 0, 136, 0.18);
}
.auth-field input::placeholder { color: var(--text-muted); }

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.95rem;
}

.auth-foot {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.auth-foot a {
  color: var(--accent-cyan);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}
.auth-foot a:hover { color: var(--accent-pink); }
.signup-perks-line { font-size: 0.78rem; color: var(--text-muted); }
.auth-tos {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  text-align: center;
  color: var(--text-muted);
}

/* Telegram magic-link (collapsible) */
.auth-tg {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}
.auth-tg summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-size: 0.85rem;
  color: var(--accent-cyan);
  font-weight: 600;
  padding: 0.4rem 0;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.3);
}
.auth-tg summary::-webkit-details-marker { display: none; }
.auth-tg summary::after { content: ' ▾'; }
.auth-tg[open] summary::after { content: ' ▴'; }
.auth-tg-body {
  padding: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}
.auth-tg-body p { margin-bottom: 0.85rem; }
.auth-block { width: 100%; justify-content: center; }

@media (max-width: 480px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .auth-brand { font-size: 1.15rem; }
}

/* ============================================================
   USER DASHBOARD
   ============================================================ */
.user-dash {
  max-width: 960px;
  margin: 0 auto;
  padding: 6rem 1.25rem 3rem;
  position: relative; z-index: 2;
}
.profile-card {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255,0,136,0.10), rgba(0,240,255,0.06));
  border: 1px solid rgba(255, 0, 136, 0.28);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  backdrop-filter: blur(8px);
}
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255,0,136,0.45);
}
.profile-info { flex: 1; min-width: 180px; }
.profile-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.profile-meta {
  display: flex; gap: 0.85rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.profile-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.profile-method {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
}
.profile-method.method-google    { color: #4285F4; border-color: rgba(66,133,244,0.35); }
.profile-method.method-telegram  { color: #2AABEE; border-color: rgba(42,171,238,0.35); }
.profile-method.method-email     { color: var(--accent-cyan); border-color: rgba(0,240,255,0.4); }
.profile-actions { margin-left: auto; }

.dashboard-header { margin-bottom: 1.25rem; }
.dashboard-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.dashboard-header p  { color: var(--text-secondary); font-size: 0.9rem; }

.credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.credit-card {
  padding: 1.25rem 1.1rem;
  background: rgba(20, 10, 28, 0.6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}
.credit-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.credit-card .label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.credit-card .value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.2rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.credit-card .value.cyan {
  background: linear-gradient(135deg, var(--accent-cyan), #80f5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.credit-card .value.green {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.credit-sub { color: var(--text-muted); font-size: 0.78rem; }

.dash-actions {
  display: flex; gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.acct-card, .history-section .card {
  padding: 1.25rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  backdrop-filter: blur(8px);
}
.acct-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.85rem;
  text-shadow: 0 0 6px rgba(255,0,136,0.3);
}
.acct-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.88rem;
}
.acct-row:last-child { border-bottom: none; }
.acct-label { color: var(--text-secondary); }
.acct-val   { color: var(--text-primary); font-weight: 600; }
.acct-val code {
  background: rgba(0, 240, 255, 0.12);
  color: var(--accent-cyan);
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.85rem;
}
.acct-tip {
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px dashed rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.history-empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: var(--text-muted);
}
.history-empty i { font-size: 1.4rem; margin-bottom: 0.5rem; display: block; }

@media (max-width: 480px) {
  .user-dash { padding: 5rem 0.85rem 2rem; }
  .profile-card { padding: 1rem; }
  .profile-actions { margin-left: 0; width: 100%; }
  .profile-actions .btn-outline { width: 100%; justify-content: center; }
  .credit-card .value { font-size: 1.8rem; }
}

/* ============================================================
   USER DASHBOARD — simple, single-page view
   ============================================================ */
.user-dash-simple { max-width: 880px; }

/* Tiny profile strip at top */
.dash-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.95rem;
  margin-bottom: 1.25rem;
  background: rgba(20, 10, 28, 0.5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
}
.dash-strip-left { display: flex; align-items: center; gap: 0.7rem; }
.dash-avatar-sm {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255, 0, 136, 0.45);
}
.dash-strip-name { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.dash-strip-email { font-size: 0.74rem; color: var(--text-muted); }
.dash-strip-right {
  display: flex; align-items: center; gap: 0.5rem;
}
.dash-strip-admin {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 0, 136, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-strip-admin:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(255, 0, 136, 0.55);
}
.dash-strip-admin i { font-size: 0.85rem; }
/* Dealer-dashboard button — same size/shape as Admin, different gradient */
.dash-strip-dealer {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-decoration: none;
  background: linear-gradient(135deg, #34d399, #06b6d4);
  color: #fff;
  box-shadow: 0 2px 12px rgba(6, 182, 212, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-strip-dealer:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.55);
  color: #fff;
}
.dash-strip-dealer i { font-size: 0.85rem; }
@media (max-width: 480px) {
  .dash-strip-admin,
  .dash-strip-dealer { padding: 0.35rem 0.6rem; font-size: 0.72rem; }
  .dash-strip-admin i,
  .dash-strip-dealer i { font-size: 0.75rem; }
}
.dash-strip-out {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: var(--transition);
}
.dash-strip-out:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

/* Big credits hero with embedded GENERATE button */
.credits-hero {
  position: relative;
  text-align: center;
  padding: 2.25rem 1.5rem 2rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 0, 136, 0.32);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), rgba(0, 240, 255, 0.08));
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(255, 0, 136, 0.18);
}
.credits-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 0, 136, 0.18), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(0, 240, 255, 0.14), transparent 50%);
  z-index: 0;
}
.credits-hero > * { position: relative; z-index: 1; }
.credits-hero-label {
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
/* Two big credit blocks side-by-side (no total) */
.credits-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.credit-block {
  padding: 1.1rem 0.85rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
}
.credit-block:hover { transform: translateY(-2px); }
.credit-block-num {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 0.35rem;
}
.credit-block-premium {
  border-color: rgba(255, 0, 136, 0.4);
  box-shadow: 0 0 24px rgba(255, 0, 136, 0.15) inset;
}
.credit-block-premium .credit-block-num {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.credit-block-free {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.12) inset;
}
.credit-block-free .credit-block-num {
  background: linear-gradient(135deg, var(--accent-cyan), #80f5ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.credit-block-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.credit-block-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.credits-hero-cta {
  display: inline-flex;
  align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
}

/* Eye-catching Generate megabutton */
.generate-megabtn {
  position: relative;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.85rem;
  border: none;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #ff0066 0%, #e84393 50%, #ff8a65 100%);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 38px rgba(255, 0, 102, 0.55);
  animation: genMegaPulse 2.2s ease-in-out infinite;
  transition: transform 0.2s ease;
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  justify-content: center;
}
.generate-megabtn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: genMegaShine 3s linear infinite;
}
.generate-megabtn:hover { transform: translateY(-2px) scale(1.02); }
.generate-megabtn:active { transform: translateY(0) scale(0.99); }
.genmb-bolt {
  font-size: 2.2rem;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  animation: genMegaBolt 1.4s ease-in-out infinite;
}
.genmb-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; position: relative; z-index: 1; }
.genmb-title { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.6px; }
.genmb-sub   { font-size: 0.78rem; opacity: 0.92; font-weight: 500; }
.genmb-arrow {
  font-size: 1.5rem;
  position: relative; z-index: 1;
  animation: genMegaArrow 1.4s ease-in-out infinite;
}
@keyframes genMegaPulse {
  0%, 100% { box-shadow: 0 0 38px rgba(255, 0, 102, 0.55), 0 0 0 0 rgba(255, 0, 102, 0.5); }
  50%      { box-shadow: 0 0 60px rgba(255, 0, 102, 0.75), 0 0 0 18px rgba(255, 0, 102, 0); }
}
@keyframes genMegaShine {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes genMegaBolt {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg)  scale(1.12); }
}
@keyframes genMegaArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* Inline Generate panel — upload zone + duration toggle + submit */
.dash-gen-upload {
  border: 2px dashed rgba(255, 0, 136, 0.4);
  border-radius: var(--radius);
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.02);
}
.dash-gen-upload:hover, .dash-gen-upload.dragover {
  border-color: var(--accent);
  background: rgba(255, 0, 136, 0.06);
  transform: translateY(-2px);
}
.dash-gen-upload-icon { font-size: 2.6rem; margin-bottom: 0.5rem; }
.dash-gen-upload-text { color: var(--text-primary); font-weight: 600; }
.dash-gen-upload-text span { color: var(--accent-pink); text-decoration: underline; }
.dash-gen-upload-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.4rem; }
.dash-gen-preview { text-align: center; }
.dash-gen-preview img {
  max-width: 100%; max-height: 280px;
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
  border: 1px solid var(--border-card);
}

.dash-gen-style-row {
  margin: 1.1rem 0;
  padding: 0.7rem 0.95rem;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.dash-gen-style-label { color: var(--text-muted); margin-right: 0.5rem; }
.dash-gen-style-row a { color: var(--accent-cyan); }

.dash-gen-dur {
  display: flex; gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.dur-pill {
  padding: 0.55rem 1.1rem;
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}
.dur-pill:hover { border-color: var(--accent); }
.dur-pill.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.5);
}
.dash-gen-submit {
  display: flex !important;
  width: 100%;
  max-width: 420px;
  margin: 0.5rem auto 0;
  justify-content: center;
}
.dash-gen-foot {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  text-align: center;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .generate-megabtn { padding: 0.95rem 1.2rem; gap: 0.7rem; }
  .genmb-bolt { font-size: 1.6rem; }
  .genmb-title { font-size: 1rem; }
  .genmb-sub   { font-size: 0.68rem; }
  .genmb-arrow { font-size: 1.2rem; }
}

/* 4 action tiles row */
.action-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  /* Extra top margin gives the lifted-on-hover tiles breathing room so they
     don't appear pinned under the Your Videos / All Attempts strips above. */
  margin-top: 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 3;
}
.action-tile {
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition);
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.action-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 26px rgba(255, 0, 136, 0.28);
  z-index: 4;
}
.tile-icon {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 10px rgba(255, 0, 136, 0.3));
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.action-tile:hover .tile-icon { transform: scale(1.12) rotate(-3deg); }
.tile-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 3px; }
.tile-sub { color: var(--text-muted); font-size: 0.76rem; }
.tile-buy     { background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), transparent); }
.tile-refer   { background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), transparent); }
.tile-checkin { background: linear-gradient(135deg, rgba(255, 196, 0, 0.14), transparent); }

/* Linked accounts row — sits just below the dash profile strip. */
.linked-accounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1.1rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.linked-accounts-lbl {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-right: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.linked-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.82rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.linked-chip i { font-size: 0.95rem; color: #229ED9; }
.linked-chip-icon { display: inline-flex; align-items: center; }
.linked-chip-state {
  margin-left: 0.2rem;
  font-size: 0.7rem;
  font-weight: 800;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
}
.linked-chip-state.linked-on {
  background: rgba(34, 197, 94, 0.22);
  color: #22c55e;
}
.linked-chip.linked-action { cursor: pointer; }
.linked-chip.linked-action:hover {
  background: rgba(255, 0, 136, 0.10);
  border-color: rgba(255, 0, 136, 0.45);
}
.linked-chip.linked-done {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}
.tile-badge-pulse { animation: ciPulse 1.4s ease-in-out infinite; }
@keyframes ciPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 2px 8px rgba(239,68,68,0.6); }
  50%      { transform: scale(1.18); box-shadow: 0 2px 14px rgba(239,68,68,0.95); }
}

/* Daily check-in modal */
.checkin-card { max-width: 540px; }
.checkin-emoji { font-size: 3rem; text-align: center; margin-bottom: 0.4rem; }
.checkin-h { text-align: center; margin: 0 0 0.4rem; font-size: 1.4rem; font-weight: 700; }
.checkin-p { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1rem; line-height: 1.5; }
.checkin-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  margin-bottom: 1rem;
}
.checkin-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.7rem; text-align: center;
}
.checkin-stat-num { display: block; font-size: 1.5rem; font-weight: 800; color: var(--accent, #ff0088); }
.checkin-stat-lbl { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.checkin-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
/* Collapsed view: hide every day cell EXCEPT pinned (today + the next
   milestone). Drops the modal's height by ~80% so it fits any phone. */
.checkin-grid.is-collapsed {
  grid-template-columns: repeat(2, 1fr);
  max-width: 360px;
  margin-left: auto; margin-right: auto;
  gap: 0.5rem;
}
.checkin-grid.is-collapsed > .ci-cell { display: none; }
.checkin-grid.is-collapsed > .ci-cell.ci-pinned {
  display: flex;
  min-height: 78px;
  padding: 0.6rem 0.4rem;
}
.checkin-grid.is-collapsed > .ci-pinned .ci-day { font-size: 0.7rem; }
.checkin-grid.is-collapsed > .ci-pinned .ci-rew { font-size: 1rem; }
/* Expand-toggle button below the grid */
.checkin-expand {
  display: block;
  margin: 0 auto 1rem;
  padding: 0.45rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #c8b8e0;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.checkin-expand:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.ci-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.4rem 0.2rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  min-height: 50px;
  transition: transform 0.15s ease;
}
.ci-day { font-size: 0.62rem; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.4px; }
.ci-rew {
  font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin-top: 2px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15;
}
.ci-pill {
  font-size: 0.72rem; font-weight: 800; padding: 0 2px;
}
.ci-pill-prem { color: #ffc400; text-shadow: 0 0 8px rgba(255, 196, 0, 0.5); }
.ci-pill-free { color: inherit; }
.ci-has-prem { background: rgba(255, 196, 0, 0.06); border-color: rgba(255, 196, 0, 0.25); }
.ci-has-prem.ci-claimed { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.4); }

/* Spotlight styles unlocked block (shown after a successful claim) */
.checkin-grants {
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,196,0,0.08), rgba(255,0,136,0.08));
  border: 1px solid rgba(255,196,0,0.25);
}
.checkin-grants-h {
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffc400;
  margin-bottom: 0.7rem;
  letter-spacing: 0.3px;
}
.checkin-grants-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.55rem;
}
.checkin-grant {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  text-align: center;
}
.checkin-grant.is-prem { border-color: rgba(255,196,0,0.55); box-shadow: 0 0 0 1px rgba(255,196,0,0.20); }
.checkin-grant video, .checkin-grant img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.checkin-grant-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}
.checkin-grant-name {
  position: relative; z-index: 2;
  width: 100%; padding: 0.3rem 0.4rem 0.2rem;
  font-size: 0.74rem; font-weight: 700; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.checkin-grant-tag {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  font-size: 0.62rem; font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
}
.checkin-grant.is-prem .checkin-grant-tag { background: rgba(255,196,0,0.85); color: #1a0e00; }
.ci-claimed { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); }
.ci-claimed .ci-rew { color: #22c55e; }
.ci-today {
  background: linear-gradient(135deg, rgba(255,0,136,0.25), rgba(255,196,0,0.18));
  border-color: #ff0088;
  box-shadow: 0 0 0 2px rgba(255,0,136,0.35), 0 4px 14px rgba(255,0,136,0.35);
  transform: scale(1.04);
}
.ci-today .ci-rew { color: #fff; }
.ci-future { opacity: 0.55; }
.ci-milestone { font-weight: 800; }
.ci-milestone .ci-rew { font-size: 1.05rem; }
.ci-milestone.ci-future { background: rgba(255,196,0,0.06); border-color: rgba(255,196,0,0.20); opacity: 0.8; }
.checkin-claim {
  width: 100%;
  padding: 0.85rem 1.2rem;
  font-size: 1rem;
  font-weight: 700;
}
.checkin-claim:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.checkin-foot { text-align: center; color: var(--text-secondary); font-size: 0.82rem; margin: 0.7rem 0 0; }
@media (max-width: 480px) {
  .checkin-grid { gap: 0.25rem; }
  .ci-cell { min-height: 44px; padding: 0.3rem 0.15rem; }
  .ci-day { font-size: 0.55rem; }
  .ci-rew { font-size: 0.85rem; }
}
.tile-styles  { background: linear-gradient(135deg, rgba(108, 92, 231, 0.10), transparent); }
.tile-support { background: linear-gradient(135deg, rgba(255, 138, 101, 0.10), transparent); }
.action-tile.active {
  border-color: var(--accent);
  box-shadow: 0 8px 26px rgba(255, 0, 136, 0.45);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.18), rgba(0, 240, 255, 0.10)) !important;
}

/* Inline expanding panels (Buy / Styles) */
.inline-panel {
  background: rgba(20, 10, 28, 0.65);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
  animation: panelSlideIn 0.35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(-12px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);     max-height: 2000px; }
}
.inline-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border-light);
}
.inline-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.inline-panel-title i { color: var(--accent-cyan); }
.inline-panel-close {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}
.inline-panel-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}
.inline-panel-body {
  padding: 1.1rem;
}
.plans-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 0.75rem !important;
}
.plans-grid-compact .plan-card {
  padding: 1.25rem 0.95rem !important;
  min-height: auto !important;
}
.plans-grid-compact .plan-price { font-size: 2.2rem !important; }
.plans-grid-compact .plan-name  { font-size: 0.85rem !important; }

/* Recent strip */
.recent-strip {
  background: rgba(20, 10, 28, 0.5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
}

/* Auto-delete reminder shown above "Your Videos" + inside the result banner */
.autodelete-notice,
.agb-autodelete {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  background: rgba(255, 184, 77, 0.10);
  border: 1px solid rgba(255, 184, 77, 0.4);
  border-radius: var(--radius-sm);
  color: rgba(255, 220, 170, 0.95);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.autodelete-notice i,
.agb-autodelete i {
  color: #ffb84d;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.autodelete-notice strong,
.agb-autodelete strong { color: #ffd28a; }
.agb-autodelete { margin-top: 0.85rem; }

/* Payment history list inside the Buy Credits panel */
.payhist-section { margin-top: 1.25rem; }
.payhist-h {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin: 0 0 0.6rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.payhist-h i { font-size: 0.85rem; }
.payhist-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  text-align: center;
}
.payhist-list {
  display: flex; flex-direction: column;
  gap: 0.4rem;
}
/* Collapse rows beyond the first 5 unless expanded */
.payhist-list .payhist-row-extra { display: none; }
.payhist-list.payhist-list--expanded .payhist-row-extra { display: grid; }
.payhist-toggle, .results-toggle {
  margin-top: 0.85rem;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}
.payhist-toggle:hover, .results-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
  color: var(--accent);
}
/* Collapse extra result cards too */
.results-grid .result-card-extra { display: none; }
.results-grid.results-grid--expanded .result-card-extra { display: block; }
.payhist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}
.payhist-icon { font-size: 1.3rem; }
.payhist-credits { color: #fff; font-weight: 600; font-size: 0.88rem; }
.payhist-meta    { color: var(--text-muted); font-size: 0.74rem; }
.payhist-status {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pay-status-ok      { background: rgba(0,240,255,0.18);  color: var(--accent-cyan); border: 1px solid rgba(0,240,255,0.4); }
.pay-status-pending { background: rgba(255,184,77,0.16); color: #ffd28a; border: 1px solid rgba(255,184,77,0.4); }
.pay-status-fail    { background: rgba(255, 90, 90,0.18); color: #ff8a8a; border: 1px solid rgba(255,90,90,0.4); }

/* ─── Your Videos: gallery of playable result cards ─── */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.result-card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-light);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  contain: layout paint;
}
.result-card:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(255, 0, 136, 0.3);
}
.result-card video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.result-card-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  z-index: 0;
  background: linear-gradient(135deg, rgba(255,0,136,0.15), rgba(0,240,255,0.10));
}
.result-card-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.55rem 0.65rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
  z-index: 2;
}
.result-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-card-time {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
}
.result-card-dl, .result-card-play {
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  z-index: 3;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.result-card-dl  { top: 0.5rem; right: 0.5rem; text-decoration: none; }
.result-card-play{ top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; font-size: 1.4rem; opacity: 0; pointer-events: none; }
.result-card:hover .result-card-play { opacity: 1; pointer-events: auto; }
.result-card-dl:hover, .result-card-play:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  transform: translate(-50%, -50%) scale(1.08);
}
.result-card-dl:hover { transform: scale(1.1); }
@media (hover: none), (max-width: 768px) {
  /* Mobile: always show the play button so users see they can tap */
  .result-card-play { opacity: 0.85; pointer-events: auto; }
}

/* ─── All Attempts: compact log with status badges ─── */
.attempts-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Always honour the HTML `hidden` attribute, even when a more specific
   selector sets display:flex/grid. Easy footgun otherwise. */
[hidden] { display: none !important; }
.attempts-rest {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  animation: igFadeIn 0.2s ease;
}
.attempts-toggle {
  align-self: center;
  margin-top: 0.4rem;
  padding: 0.35rem 0.9rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.attempts-toggle:hover {
  background: rgba(255,0,136,0.10);
  border-color: rgba(255,0,136,0.45);
  color: #fff;
}
.attempt-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.attempt-row.is-failed {
  background: rgba(255, 90, 90, 0.06);
  border-color: rgba(255, 90, 90, 0.25);
}
.attempt-emoji  { font-size: 1.3rem; }
.attempt-name   { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attempt-time   { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.attempt-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.attempt-badge-ok      { background: rgba(0,240,255,0.18);  color: var(--accent-cyan); border: 1px solid rgba(0,240,255,0.4); }
.attempt-badge-fail    { background: rgba(255, 90, 90,0.18); color: #ff8a8a; border: 1px solid rgba(255,90,90,0.4); }
.attempt-badge-expired { background: rgba(255,255,255,0.08); color: var(--text-muted); border: 1px solid var(--border-light); }
.attempt-action {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,0,136,0.15);
  border: 1px solid rgba(255,0,136,0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
.attempt-action:hover { background: var(--accent); }

/* ─── Result lightbox modal (large player) ─── */
.result-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: rlbFade 0.2s ease-out;
}
@keyframes rlbFade { from { opacity: 0; } to { opacity: 1; } }
.result-lightbox[hidden] { display: none !important; }
.result-lightbox-card {
  position: relative;
  background: rgba(20,10,28,0.95);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(255,0,136,0.25);
}
.result-lightbox-close {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 5;
}
.result-lightbox-close:hover { background: var(--accent); border-color: var(--accent); }
.result-lightbox-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 2rem 0.75rem 0;
}
.result-lightbox-video {
  width: 100%;
  max-height: 65vh;
  background: #000;
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
}
.result-lightbox .btn-neon-cta {
  align-self: flex-start;
}
/* Prev/Next nav arrows on the lightbox + counter */
.result-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 10, 28, 0.6);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.result-lightbox-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.06);
}
.result-lightbox-prev { left: -24px; }
.result-lightbox-next { right: -24px; }
@media (max-width: 600px) {
  .result-lightbox-prev { left: 6px; }
  .result-lightbox-next { right: 6px; }
  .result-lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; }
}
.result-lightbox-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.result-lightbox-counter {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ─── Active Generation Banner — big eye-catching status / result ─── */
.active-gen-banner {
  position: relative;
  margin: 0 0 1.15rem 0;
  padding: 1.25rem 1.1rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(255,0,136,0.10), rgba(0,240,255,0.08));
  box-shadow: 0 12px 36px rgba(255, 0, 136, 0.18), 0 0 0 1px rgba(255,0,136,0.25) inset;
  animation: agbPop 0.4s ease-out;
}
@keyframes agbPop {
  from { transform: scale(0.97); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
/* Brief highlight when the user clicks the floating gen-tracker pill */
.active-gen-banner.agb-flash {
  animation: agbFlash 1.4s ease-out;
}
@keyframes agbFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 136, 0.55), 0 12px 36px rgba(255, 0, 136, 0.18); }
  50%  { box-shadow: 0 0 0 14px rgba(255, 0, 136, 0.0), 0 12px 36px rgba(255, 0, 136, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 136, 0.0), 0 12px 36px rgba(255, 0, 136, 0.18); }
}
.gt-pill { cursor: pointer; }

/* Multi-job stack: when there are several concurrent generations, the
   banner switches from a single big card into a vertical stack of small
   cards, one per job. Each card keeps the same visual language as the
   single-card layout but takes less vertical space. */
.active-gen-banner-stack {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.active-gen-banner-stack .agb-card {
  position: relative;
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(255,0,136,0.10), rgba(0,240,255,0.08));
  box-shadow: 0 8px 24px rgba(255, 0, 136, 0.15);
}
.active-gen-banner-stack .agb-card-processing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  align-items: center;
  border-color: rgba(255, 0, 136, 0.55);
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.12));
  box-shadow: 0 0 24px rgba(255, 0, 136, 0.30), 0 0 0 1px rgba(255,0,136,0.4) inset;
  animation: agbPulse 2.4s ease-in-out infinite;
}
.active-gen-banner-stack .agb-card-done {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(0,240,255,0.06));
}
.active-gen-banner-stack .agb-card-failed {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(255,0,136,0.06));
}
.active-gen-banner-stack .agb-video {
  width: 100%; max-height: 360px; border-radius: 10px; margin-top: 0.7rem;
}

/* Processing state — horizontal layout: orb + text */
.banner-processing {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  border-color: rgba(255, 0, 136, 0.55);
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.12));
  box-shadow: 0 0 32px rgba(255, 0, 136, 0.35), 0 0 0 1px rgba(255,0,136,0.4) inset;
  animation: agbPop 0.4s ease-out, agbPulse 2.4s ease-in-out infinite;
}
@keyframes agbPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255,0,136,0.30), 0 0 0 1px rgba(255,0,136,0.4) inset; }
  50%      { box-shadow: 0 0 48px rgba(255,0,136,0.55), 0 0 0 1px rgba(0,240,255,0.5) inset; }
}

.agb-orb {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
}
.agb-orb-spin {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent-cyan);
  animation: agbSpin 1.2s linear infinite;
  /* Promote to its own compositor layer so the rotation runs on the GPU.
     translateZ(0) is folded into the keyframes so it doesn't override the
     animation's transform value (which would freeze the rotation). */
  will-change: transform;
  backface-visibility: hidden;
}
.agb-orb-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  animation: agbBounce 1.8s ease-in-out infinite;
}
@keyframes agbSpin {
  from { transform: rotate(0deg)   translateZ(0); }
  to   { transform: rotate(360deg) translateZ(0); }
}
@keyframes agbBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.agb-text { min-width: 0; }
.agb-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}
.agb-title strong { color: var(--accent-cyan); }
.agb-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.55rem;
  font-weight: 600;
}
.agb-sub-light {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}
.agb-elapsed {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  margin-top: 0.45rem;
}

.agb-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.agb-fill {
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-cyan), transparent);
  border-radius: 999px;
  animation: agbBar 1.6s ease-in-out infinite;
}
@keyframes agbBar {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Done state — vertical layout: header + video + actions */
.banner-done {
  border-color: rgba(0, 240, 255, 0.55);
  background: linear-gradient(135deg, rgba(0,240,255,0.14), rgba(255,0,136,0.10));
  box-shadow: 0 0 32px rgba(0, 240, 255, 0.30), 0 0 0 1px rgba(0,240,255,0.4) inset;
}
.banner-failed {
  border-color: rgba(255, 90, 90, 0.55);
  background: linear-gradient(135deg, rgba(255,90,90,0.14), rgba(20,10,28,0.4));
  box-shadow: 0 0 24px rgba(255, 90, 90, 0.25);
}

.agb-done-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.9rem;
}
.agb-done-emoji {
  font-size: 2rem;
  line-height: 1;
}
.agb-done-text { min-width: 0; }

.agb-dismiss {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.agb-dismiss:hover {
  background: rgba(255,0,136,0.25);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.agb-video {
  width: 100%;
  max-height: 480px;
  border-radius: var(--radius-sm);
  background: #000;
  display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.agb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.agb-actions .btn-neon-cta,
.agb-actions .btn-outline {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
}

@media (max-width: 600px) {
  .active-gen-banner { padding: 1rem 0.85rem; }
  .banner-processing {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
  }
  .agb-orb { width: 64px; height: 64px; }
  .agb-orb-emoji { font-size: 1.8rem; }
  .agb-title { font-size: 1rem; }
  .agb-sub { font-size: 0.85rem; }
  .agb-elapsed { font-size: 0.72rem; }
  .agb-video { max-height: 360px; }
  .agb-actions .btn-neon-cta,
  .agb-actions .btn-outline { flex: 1 1 100%; }
}

.recent-strip-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
}
.recent-strip-title {
  font-size: 0.95rem; font-weight: 700;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
}
.recent-strip-title i { color: var(--accent-cyan); }
.recent-strip-count { color: var(--text-muted); font-size: 0.78rem; }
.recent-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}
.recent-tile {
  padding: 0.7rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: var(--transition);
}
.recent-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.recent-tile-emoji { font-size: 1.6rem; margin-bottom: 0.35rem; }
.recent-tile-name {
  font-weight: 600; color: var(--text-primary); font-size: 0.78rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-tile-time { color: var(--text-muted); font-size: 0.68rem; margin-top: 2px; }

/* Live placeholder card while a generation is running */
.recent-tile-live {
  border-color: rgba(255, 0, 136, 0.5);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), rgba(0, 240, 255, 0.06));
  position: relative;
  animation: recentLivePulse 2s ease-in-out infinite;
}
@keyframes recentLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 136, 0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 0, 136, 0); }
}
.recent-tile-spin {
  animation: rtSpin 1.6s linear infinite;
  filter: drop-shadow(0 0 8px rgba(255, 0, 136, 0.65));
}
@keyframes rtSpin {
  0%   { transform: rotateY(0deg)   scale(1); }
  50%  { transform: rotateY(180deg) scale(0.92); }
  100% { transform: rotateY(360deg) scale(1); }
}
.recent-tile-live-time {
  color: var(--accent-cyan) !important;
  font-weight: 700;
}
.recent-tile-bar {
  margin-top: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.recent-tile-fill {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, var(--accent), var(--accent-pink), var(--accent-cyan), var(--accent));
  background-size: 200% 100%;
  border-radius: 999px;
  animation: recentBar 1.6s linear infinite;
}
@keyframes recentBar {
  0%   { transform: translateX(-100%); background-position:   0% 50%; }
  100% { transform: translateX(280%);  background-position: 200% 50%; }
}

/* Referral modal */
.dash-modal {
  position: fixed; inset: 0;
  background: rgba(8, 4, 14, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow-y: auto;          /* let the overlay scroll if card is too tall */
  -webkit-overflow-scrolling: touch;
}
.dash-modal[hidden] { display: none !important; }
.dash-modal-card {
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 2rem);   /* never taller than the viewport */
  overflow-y: auto;                 /* scroll inside the card on overflow */
  -webkit-overflow-scrolling: touch;
  background: var(--bg-section);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px rgba(0, 240, 255, 0.25);
  animation: gatePopIn 0.35s cubic-bezier(.34,1.56,.64,1);
}
/* Mobile: tighter padding so all content fits without horizontal cramping,
   and shrink the gigantic tier-ladder block which dominates the modal. */
@media (max-width: 480px) {
  .dash-modal { padding: 0.5rem; align-items: flex-start; }
  .dash-modal-card {
    max-height: calc(100vh - 1rem);
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 16px;
  }
  .dash-modal-card .refer-emoji { font-size: 2.2rem; margin-bottom: 0.4rem; }
  .dash-modal-card .refer-h     { font-size: 1.1rem; margin-bottom: 0.35rem; }
  .dash-modal-card .refer-p     { font-size: 0.88rem; line-height: 1.35; margin-bottom: 0.6rem; }
  .dash-modal-card .refer-stats { gap: 0.5rem; margin: 0.5rem 0 0.6rem; }
  .dash-modal-card .refer-stat-num { font-size: 1.4rem; }
  .dash-modal-card .refer-stat-lbl { font-size: 0.7rem; }
  .dash-modal-card .refer-tier-block { padding: 0.75rem 0.85rem; margin: 0.6rem 0 0.4rem; }
  .dash-modal-card .refer-tier-head  { font-size: 0.92rem; }
  .dash-modal-card .refer-tier-bonus { font-size: 1.05rem; }
  .dash-modal-card .refer-tier-list  { gap: 0.3rem; margin-top: 0.55rem; }
  .dash-modal-card .refer-tier-list li { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
  .dash-modal-card .refer-tier-emoji   { font-size: 1.15rem; }
  .dash-modal-card .refer-tier-reward  { font-size: 0.9rem; }
  .dash-modal-card .refer-share { gap: 0.35rem; }
  .dash-modal-card .refer-share-btn { padding: 0.55rem 0.4rem; font-size: 0.82rem; }
}
.dash-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.dash-modal-close:hover { color: var(--text-primary); }

/* Premium-style nudge modal — shown when user clicks a premium style with no premium credits */
.premium-nudge-emoji {
  font-size: 3rem;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 4px 18px rgba(255, 0, 136, 0.45));
  animation: gateBounce 1.6s ease-in-out infinite;
}
.premium-nudge-h {
  font-size: 1.4rem;
  margin: 0 0 0.6rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.premium-nudge-p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.2rem;
}
.premium-nudge-p strong { color: var(--accent-cyan); }
.premium-nudge-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.premium-nudge-actions .btn-neon-cta,
.premium-nudge-actions .btn-outline {
  width: 100%;
  justify-content: center;
}
.refer-emoji {
  font-size: 3rem; margin-bottom: 0.75rem;
  animation: gateBounce 1.4s ease-in-out infinite;
}
.refer-h {
  font-size: 1.3rem; margin-bottom: 0.6rem;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.refer-p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 1.25rem; line-height: 1.55; }
.refer-link-row {
  display: flex; gap: 0.4rem;
  margin-bottom: 1rem;
}
.refer-link-input {
  flex: 1;
  padding: 0.65rem 0.9rem;
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 0;
}
.refer-copy { padding: 0 1rem; flex-shrink: 0; }
.refer-share { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.refer-share-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.refer-share-btn:hover { transform: translateY(-2px); }
.refer-share-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
/* Brand-coloured icons (background pill + white glyph) */
.refer-share-tg .refer-share-icon    { background: #229ED9; color: #fff; }
.refer-share-wa .refer-share-icon    { background: #25D366; color: #fff; }
.refer-share-x  .refer-share-icon    { background: #000;    color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.refer-share-email .refer-share-icon { background: linear-gradient(135deg, #ff0088, #ffc400); color: #fff; }
/* Hover: lift + brand-tinted border/glow */
.refer-share-tg:hover    { border-color: #229ED9; box-shadow: 0 4px 14px rgba(34,158,217,0.35); color: #fff; }
.refer-share-wa:hover    { border-color: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,0.35); color: #fff; }
.refer-share-x:hover     { border-color: #fff;    box-shadow: 0 4px 14px rgba(255,255,255,0.18); color: #fff; }
.refer-share-email:hover { border-color: #ff0088; box-shadow: 0 4px 14px rgba(255,0,136,0.35);   color: #fff; }
/* Referral stats summary inside the refer modal */
.refer-stats {
  display: flex; justify-content: center; gap: 1rem;
  margin: 0 0 1.1rem;
}
.refer-stat {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.refer-stat-num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.refer-stat-lbl {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.refer-recent {
  list-style: none; padding: 0; margin: 1rem 0 0;
  text-align: left;
}
.refer-recent-h {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.refer-recent-row {
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 0.3rem;
}

@media (max-width: 480px) {
  .credits-hero { padding: 1.75rem 1rem 1.5rem; }
  .credits-hero-num { font-size: 3.2rem; }
  .action-tiles { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .action-tile { padding: 1rem 0.6rem; }
  .tile-icon { font-size: 1.8rem; }
  .recent-strip-grid { grid-template-columns: repeat(3, 1fr); }
  .recent-tile-emoji { font-size: 1.3rem; }
}

/* ============================================================
   USER DASHBOARD — multi-tab interactive (legacy — unused now)
   ============================================================ */
.dash-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin: 1.25rem 0 1.5rem;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.dash-tab {
  flex: 1; min-width: 110px;
  padding: 0.6rem 0.85rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.84rem;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.dash-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.dash-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 0, 136, 0.45);
}

.dash-panel { display: none; animation: igFadeIn 0.3s ease; }
.dash-panel.active { display: block; }
.dash-h3 {
  font-size: 1rem; font-weight: 700;
  margin: 0.25rem 0 0.85rem;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(255, 0, 136, 0.3);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.dash-h3 i { color: var(--accent-cyan); text-shadow: 0 0 6px rgba(0, 240, 255, 0.4); }
.dash-p-muted { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }

/* Stats row (overview) */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 1.25rem 0 1.5rem;
}
.stat-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.stat-pill i { color: var(--accent-cyan); }
.stat-pill strong {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 800;
  margin-right: 0.15rem;
}

/* Recent generations grid */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
}
.recent-card {
  padding: 0.85rem 0.7rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: var(--transition);
}
.recent-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 6px 22px rgba(255, 0, 136, 0.25);
}
.recent-emoji { font-size: 1.8rem; margin-bottom: 0.45rem; }
.recent-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recent-meta { font-size: 0.7rem; color: var(--text-muted); }
.src-bot      { color: #2AABEE; }
.src-web      { color: var(--accent-cyan); }
.src-web_anon { color: var(--accent-peach); }
.src-bot_push { color: #6c5ce7; }

/* History */
.history-toolbar {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.history-search {
  flex: 1; min-width: 200px;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
}
.history-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,0,136,0.15); }
.history-filter {
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
}
.history-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 600px; overflow-y: auto;
  padding-right: 4px;
}
.history-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.history-row:hover { border-color: var(--accent); }
.history-emoji { font-size: 1.5rem; flex-shrink: 0; }
.history-info { flex: 1; min-width: 0; }
.history-name {
  font-weight: 600; color: var(--text-primary); font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-meta { color: var(--text-muted); font-size: 0.75rem; }
.history-tag {
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.tag-bot      { color: #2AABEE; border: 1px solid rgba(42,171,238,0.35); }
.tag-web      { color: var(--accent-cyan); border: 1px solid rgba(0,240,255,0.35); }
.tag-web_anon { color: var(--accent-peach); border: 1px solid rgba(255,138,101,0.35); }
.tag-bot_push { color: #6c5ce7; border: 1px solid rgba(108,92,231,0.35); }

/* Styles tab grid */
.dash-style-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.dash-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
}
.dash-style-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.10));
  border: 1px solid var(--border-card);
  text-decoration: none;
  transition: var(--transition);
}
/* Lift only — no scale. Scaling a card containing a playing <video>
   makes Chrome re-promote the GPU layer and the video visibly hiccups. */
.dash-style-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 26px rgba(255,0,136,0.35); }
.dash-style-card video,
.dash-style-card .dash-style-emoji {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; object-fit: cover;
}
.dash-style-card .dash-style-emoji { font-size: 2.6rem; }
/* Placeholder emoji shown beneath the video element until it actually plays */
.dash-style-card.has-video .ph-emoji {
  z-index: 0;
  background: linear-gradient(135deg, rgba(255,0,136,0.18), rgba(0,240,255,0.10));
}
.dash-style-card.has-video video { z-index: 1; background: transparent; }
.dash-style-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 25%);
  pointer-events: none;
}

/* SEO content block — visible to crawlers, subtle to users (small,
   muted, near footer). Don't display:none — Google penalises hidden
   text. Just style it as low-key informational content. */
.seo-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.2rem 2.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.65;
}
.seo-content .seo-h2 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.92);
}
.seo-content h3 {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.45rem;
  color: rgba(255, 255, 255, 0.88);
}
.seo-content p { margin: 0 0 0.75rem; }
.seo-content a { color: #00f0ff; }
.seo-content a:hover { color: #ff5dd5; }
.seo-content strong { color: #ff5dd5; }

/* Blog index + article */
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.blog-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transition: border-color 0.18s ease, transform 0.18s ease; }
.blog-card:hover { border-color: rgba(255, 0, 136, 0.5); transform: translateY(-2px); }
.blog-card-link { display: block; padding: 1.2rem; color: inherit; text-decoration: none; }
.blog-card-title { font-size: 1.1rem; margin: 0 0 0.4rem; color: var(--text-primary); }
.blog-card-meta { font-size: 0.78rem; color: var(--text-muted, #888); margin: 0 0 0.6rem; }
.blog-card-desc { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 0.7rem; line-height: 1.5; }
.blog-card-cta { color: #00f0ff; font-size: 0.85rem; font-weight: 600; }

.blog-article-title { font-size: 1.8rem; margin: 0 0 0.45rem; color: #fff; }
.blog-article-body { color: rgba(255,255,255,0.85); line-height: 1.75; font-size: 0.96rem; }
.blog-article-body h2 { font-size: 1.3rem; margin: 1.7rem 0 0.6rem; color: #fff; }
.blog-article-body h3 { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: rgba(255,255,255,0.92); }
.blog-article-body p { margin: 0 0 0.8rem; }
.blog-article-body a { color: #00f0ff; }
.blog-article-body strong { color: #ff5dd5; }
.blog-article-cta { margin-top: 2rem; padding: 1.2rem 1.4rem; border-radius: 14px; background: linear-gradient(135deg, rgba(255,0,136,0.10), rgba(0,240,255,0.05)); border: 1px solid rgba(255,0,136,0.30); }
.blog-article-cta h3 { margin-top: 0; }
.blog-related { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px dashed rgba(255,255,255,0.10); }
.blog-related ul { padding-left: 1.2rem; line-height: 1.85; }

/* Daily-reward popup — full-screen backdrop + centered card. Shown the
   moment the user has an unclaimed reward today. */
.reward-popup {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(8, 4, 18, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.reward-popup.is-visible { opacity: 1; }
.reward-popup-card {
  position: relative;
  max-width: 360px; width: 100%;
  /* Cap the modal height so it never dominates the screen — content
     above (and below the dashboard) stays partially visible so users
     immediately see the popup is dismissible. */
  max-height: min(52vh, 460px);
  overflow-y: auto;
  padding: 1.2rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.20), rgba(0, 240, 255, 0.10) 60%, rgba(255, 196, 0, 0.18));
  border: 1px solid rgba(255, 196, 0, 0.55);
  box-shadow: 0 18px 50px rgba(255, 0, 136, 0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
  color: #fff;
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.28s cubic-bezier(.34,1.56,.64,1);
}
.reward-popup.is-visible .reward-popup-card { transform: scale(1); }
.reward-popup-icon {
  font-size: 2.4rem; line-height: 1;
  margin-bottom: 0.35rem;
  animation: rwPulse 1.5s ease-in-out infinite;
}
@keyframes rwPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.reward-popup-title {
  font-size: 1.05rem; font-weight: 800;
  margin: 0 0 0.35rem;
}
.reward-popup-prize {
  font-size: 1.55rem; font-weight: 900;
  margin-bottom: 0.35rem;
  background: linear-gradient(135deg, #ffc400, #fff, #00f0ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 14px rgba(255,196,0,0.30);
  letter-spacing: 0.4px;
}
.reward-popup-sub {
  font-size: 0.82rem; color: rgba(255,255,255,0.85);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.reward-popup-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem;
}
.reward-popup-claim {
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 800;
}
.reward-popup-channel {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.reward-popup-channel:hover { background: rgba(255,255,255,0.20); color: #fff; }
.reward-popup-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1;
}
.reward-popup-close:hover { background: rgba(0, 0, 0, 0.85); }

/* Promo popup — compact limited-time bonus-credits announcement that
   replaces the old daily-reward auto-popup. Designed to fit in ~46vh with
   NO scrollbar so nothing flickers when the surrounding modal animates in. */
.promo-popup-card {
  max-width: 360px;
  /* Tight cap — the popup is short (pill, headline, best-deal card, 1-line
     premium hint, 2 buttons). If the host page somehow forces a scroll, we
     fall back to the themed thin scrollbar below. */
  max-height: min(60vh, 500px);
  background: linear-gradient(135deg, rgba(255, 38, 38, 0.28), rgba(255, 152, 0, 0.18) 50%, rgba(255, 196, 0, 0.28));
  border: 1px solid rgba(255, 196, 0, 0.45);
  box-shadow: 0 16px 48px rgba(255, 100, 0, 0.30), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  /* Themed thin scrollbar matches the rest of the site (notif-menu / lang-menu) */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 196, 0, 0.55) transparent;
}
.promo-popup-card::-webkit-scrollbar { width: 6px; }
.promo-popup-card::-webkit-scrollbar-track { background: transparent; }
.promo-popup-card::-webkit-scrollbar-thumb {
  background: rgba(255, 196, 0, 0.55);
  border-radius: 3px;
}
.promo-popup-card::-webkit-scrollbar-thumb:hover { background: rgba(255, 196, 0, 0.85); }

.promo-popup-pill {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3d3d, #ff8a00);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  box-shadow: 0 2px 10px rgba(255, 60, 60, 0.45);
}
.promo-popup-title {
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 0.7rem;
}
.promo-popup-title #promoPopupMaxPct {
  -webkit-text-fill-color: #ffe35e;
  background: none;
  text-shadow: 0 0 14px rgba(255, 196, 0, 0.55);
}
.promo-popup-best {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 196, 0, 0.40);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 0.7rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.promo-popup-best:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 196, 0, 0.85);
}
.promo-popup-best-line {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.18rem;
}
.promo-popup-best-price {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
}
.promo-popup-premium-line {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 0.75rem;
  line-height: 1.35;
}
.promo-popup-later {
  background: transparent !important;
  border: 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  cursor: pointer;
}
.promo-popup-later:hover { color: rgba(255, 255, 255, 0.85) !important; }

/* Calendar-cell type tints — single icon per day. */
.ci-type-premium       { background: rgba(255,196,0,0.07); border-color: rgba(255,196,0,0.30); }
.ci-type-style-free    { background: rgba(0,240,255,0.07);  border-color: rgba(0,240,255,0.30); }
.ci-type-style-premium { background: linear-gradient(135deg, rgba(255,196,0,0.12), rgba(0,240,255,0.08)); border-color: rgba(255,196,0,0.40); }
.ci-type-premium .ci-rew       { color: #ffc400; }
.ci-type-style-free .ci-rew    { color: #00f0ff; }
.ci-type-style-premium .ci-rew { color: #ffd966; }
.ci-claimed { background: rgba(34,197,94,0.18) !important; border-color: rgba(34,197,94,0.40) !important; }
.ci-claimed .ci-rew { color: #22c55e !important; }

/* Addon pills — optional prompt modifiers in the generation panel. */
.dash-gen-addons {
  margin: 0.85rem 0 0.4rem;
  padding: 0.7rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.dash-gen-addons-head {
  margin-bottom: 0.55rem;
}
.dash-gen-addons-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-gen-addons-label small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.35rem;
  color: var(--text-muted, #888);
}
.dash-gen-addons-row {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.addon-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.addon-pill:hover { background: rgba(255,0,136,0.10); border-color: rgba(255,0,136,0.40); }
.addon-pill.selected {
  background: linear-gradient(135deg, rgba(255,0,136,0.22), rgba(0,240,255,0.18));
  border-color: var(--accent, #ff0088);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,0,136,0.30);
}
.addon-pill-emoji { font-size: 0.95rem; }
.dash-style-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.6rem 0.7rem; z-index: 2; }
.dash-style-name { font-size: 0.82rem; font-weight: 700; color: #fff; }
.dash-style-meta { font-size: 0.66rem; color: rgba(255,255,255,0.7); }
.dash-style-prem {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 0.6rem; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff; padding: 2px 7px; border-radius: var(--radius-full);
}

/* Payments tab */
.tx-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tx-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(20, 10, 28, 0.55);
  border-left: 3px solid var(--text-muted);
  border-top: 1px solid var(--border-card);
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.tx-row.tx-ok     { border-left-color: #34d399; }
.tx-row.tx-pend   { border-left-color: #fbbf24; }
.tx-row.tx-cancel { border-left-color: #6b7280; }
.tx-row.tx-rej    { border-left-color: #ef4444; }
.tx-row.tx-disp   { border-left-color: var(--accent-cyan); }
.tx-left { min-width: 110px; }
.tx-code  code {
  background: rgba(0,240,255,0.12);
  color: var(--accent-cyan);
  padding: 2px 7px; border-radius: 4px;
  font-size: 0.85rem;
}
.tx-when { color: var(--text-muted); font-size: 0.74rem; margin-top: 4px; }
.tx-mid { flex: 1; min-width: 180px; }
.tx-amt {
  font-weight: 800; color: var(--text-primary);
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1rem;
}
.tx-pm   { color: var(--text-secondary); font-size: 0.78rem; margin-top: 2px; }
.tx-tip  { color: var(--accent-cyan); }
.tx-reason { color: var(--accent-peach); font-size: 0.78rem; margin-top: 4px; }
.tx-right { margin-left: auto; }
.tx-status {
  font-weight: 700; font-size: 0.82rem;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
}

/* Settings forms */
.settings-form { max-width: 500px; }
.settings-form .auth-field { margin-bottom: 0.85rem; }
.settings-form input[disabled] { color: var(--text-muted); cursor: not-allowed; }
.connect-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: 500px;
}
.connect-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
}
.connect-label { font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }

/* Empty states */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}
.empty-state .empty-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }
.empty-state p { margin-bottom: 1rem; }
.loading-line { color: var(--text-muted); padding: 1rem 0.5rem; text-align: center; }
.profile-id {
  font-family: monospace;
  background: rgba(0, 240, 255, 0.08);
  padding: 1px 7px;
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 0.72rem;
}

/* Toast notifications */
.dash-toast {
  position: fixed;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 0.7rem 1.2rem;
  background: rgba(20, 10, 28, 0.95);
  border: 1px solid var(--accent);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 22px rgba(255,0,136,0.4);
  backdrop-filter: blur(8px);
}
.dash-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dash-toast.success { border-color: #34d399; box-shadow: 0 6px 22px rgba(52,211,153,0.4); }
.dash-toast.danger  { border-color: #ef4444; box-shadow: 0 6px 22px rgba(239,68,68,0.4); }

@media (max-width: 768px) {
  .dash-tab { font-size: 0.74rem; min-width: 84px; padding: 0.5rem 0.5rem; }
  .stat-pill { font-size: 0.78rem; padding: 0.45rem 0.75rem; }
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-style-grid { grid-template-columns: repeat(2, 1fr); }
  .tx-row { padding: 0.75rem 0.85rem; gap: 0.6rem; }
  .tx-left { min-width: auto; }
  .tx-right { width: 100%; margin-left: 0; }
}

/* ============================================================
   CHECKOUT PAGES — payment method selector + session view
   ============================================================ */
.checkout-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 6rem 1.25rem 3rem;
  position: relative; z-index: 2;
}
.checkout-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 1rem;
}
.checkout-back:hover { color: var(--accent); }
.checkout-header h1 {
  font-size: 1.7rem;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.85rem;
}
/* HERO order summary — credits + price are the visual focal point */
.order-hero {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 0, 136, 0.32);
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.10), rgba(0, 240, 255, 0.08));
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(255, 0, 136, 0.18);
  flex-wrap: wrap;
  text-align: center;
}
.order-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 0, 136, 0.18), transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(0, 240, 255, 0.14), transparent 50%);
  z-index: 0;
}
.order-hero > * { position: relative; z-index: 1; }
.order-hero-credits, .order-hero-price {
  display: inline-flex; align-items: baseline;
  gap: 0.45rem;
  font-weight: 800;
  line-height: 1;
}
.order-hero-num {
  font-size: 3rem;
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}
.order-hero-price .order-hero-num {
  background: linear-gradient(135deg, #34d399, var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.order-hero-currency {
  font-size: 1.3rem;
  color: #34d399;
  font-weight: 800;
  align-self: flex-start;
  padding-top: 0.5rem;
}
/* Stars-currency variant: golden gradient + small USD estimate underneath */
.order-hero-price-stars { position: relative; }
.order-hero-price-stars .order-hero-num {
  background: linear-gradient(135deg, #ffce4b, #ff9d2c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.order-hero-stars-icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 4px 12px rgba(255, 200, 60, 0.45));
}
.order-hero-est {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.25rem;
  letter-spacing: 0;
}
/* Local-currency variant: same green/cyan gradient, currency shown inline */
.order-hero-price-local .order-hero-num {
  font-size: 2.2rem;
  background: linear-gradient(135deg, #34d399, var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
}
/* Dealer-picker view (no price yet) — let credits stand alone in the hero. */
.order-hero-no-price {
  justify-content: center;
}
.order-hero-no-price .order-hero-credits {
  font-size: 1.1em;
}
.order-hero-unit {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.order-hero-arrow {
  font-size: 2rem;
  color: var(--accent-pink);
  filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.7));
  animation: arrowSlide 1.6s ease-in-out infinite;
}
@keyframes arrowSlide {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

.checkout-h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 1.5rem 0 1rem;
  text-align: center;
  letter-spacing: 0.3px;
}

/* Receipt row beneath the order-hero — method / status / coin / reference */
.receipt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
  background: rgba(20, 10, 28, 0.55);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
}
.receipt-cell {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.receipt-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
}
.receipt-val {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.receipt-ref {
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--accent-cyan);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.78rem;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}

@media (max-width: 600px) {
  .order-hero { padding: 1.5rem 1rem; gap: 0.85rem; }
  .order-hero-num { font-size: 2.2rem; }
  .order-hero-currency { font-size: 1rem; padding-top: 0.4rem; }
  .order-hero-unit { font-size: 0.78rem; }
  .order-hero-arrow { font-size: 1.5rem; }
}
.status-badge {
  font-size: 0.72rem !important;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  font-weight: 800 !important;
  background: rgba(255,255,255,0.06);
  margin-left: 0.4rem !important;
}
.status-pending, .status-awaiting_proof { background: rgba(251, 191, 36, 0.15); color: #fbbf24 !important; }
.status-paid     { background: rgba(52, 211, 153, 0.15); color: #34d399 !important; }
.status-failed   { background: rgba(239, 68, 68, 0.15); color: #ef4444 !important; }
.status-cancelled{ background: rgba(107,114,128,0.18); color: #9ca3af !important; }

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.method-card {
  background: rgba(20, 10, 28, 0.6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  transition: var(--transition);
  position: relative;
  backdrop-filter: blur(8px);
  min-height: 290px;
}
.method-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 32px rgba(255, 0, 136, 0.3);
}
.method-card-clickable { cursor: pointer; }
.method-card-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.method-icon {
  font-size: 3rem;
  line-height: 1;
  margin: 0.35rem 0 0.6rem;
  filter: drop-shadow(0 4px 14px rgba(255,0,136,0.35));
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.method-card:hover .method-icon { transform: scale(1.12) rotate(-4deg); }
.method-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  letter-spacing: 0.3px;
}
.method-tag {
  display: inline-block;
  padding: 4px 12px; margin-bottom: 1rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--text-secondary);
}
.method-tag-best { background: linear-gradient(135deg, var(--accent), var(--accent-pink)); color: #fff; box-shadow: 0 3px 14px rgba(255,0,136,0.45); }
.method-tag-info { background: rgba(0,240,255,0.18); color: var(--accent-cyan); }
.method-line {
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  max-width: 240px;
}
.method-go {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  font-size: 0.92rem;
}

/* Dedicated coin/network picker grid */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.coin-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.1rem;
  background: rgba(20, 10, 28, 0.6);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  position: relative;
  backdrop-filter: blur(8px);
}
.coin-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 32px rgba(255, 0, 136, 0.3);
}
.coin-card-icon {
  font-size: 2.2rem;
  line-height: 1;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255, 0, 136, 0.15), rgba(0, 240, 255, 0.10));
  border-radius: 12px;
  flex-shrink: 0;
}
.coin-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.coin-card-net {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.coin-card > div:nth-child(2),
.coin-card > div.coin-card-name { /* allow name+net flex column */ }
.coin-card .coin-card-name + .coin-card-net { display: block; }
.coin-card-go {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}
.coin-card:hover .coin-card-go { transform: translateX(4px); }
.coin-card-loading { opacity: 0.6; cursor: wait; }

/* The center column has the name above the network — wrap them in flex column */
.coin-card { align-items: center; }
.coin-card .coin-card-name,
.coin-card .coin-card-net { flex: none; }
.coin-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.coin-card .coin-card-icon { grid-row: 1 / 3; }
.coin-card .coin-card-name { grid-column: 2; }
.coin-card .coin-card-net  { grid-column: 2; }
.coin-card .coin-card-go   { grid-column: 3; grid-row: 1 / 3; }

.method-coins {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  max-width: 100%;
}
.coin-chip {
  padding: 0.28rem 0.55rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: inherit;
  letter-spacing: 0.2px;
}
.coin-chip:hover { border-color: var(--accent); }
.coin-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(255,0,136,0.5);
}
.coin-emoji { font-size: 0.9rem; }

/* ── Payment session page ─────────────────────────────────────── */
.pay-card {
  background: rgba(20, 10, 28, 0.65);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}
.pay-h3 {
  font-size: 1.05rem; font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 0.85rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.pay-h4 {
  font-size: 0.95rem; font-weight: 700;
  margin: 1.5rem 0 0.85rem;
  color: var(--text-primary);
}
.pay-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.25rem; }
.pay-loading { color: var(--text-muted); }

.pay-amount-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pay-amount-row:last-of-type { border-bottom: none; }
.pay-amt-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 80px;
}
.pay-amt-value {
  display: inline-flex; align-items: center; gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
}
.pay-mono {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--accent-cyan);
  padding: 4px 10px;
  border-radius: 6px;
  word-break: break-all;
  font-size: 0.85rem;
}
.pay-address-mono { font-size: 0.72rem; }
.pay-coin {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
}
.pay-copy {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.75rem;
}
.pay-copy:hover { background: var(--accent); color: #fff; }

.pay-qr {
  text-align: center;
  margin: 1.25rem 0;
}
.pay-qr img {
  display: block;
  margin: 0 auto 0.6rem;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.pay-qr p { color: var(--text-muted); font-size: 0.8rem; }
.pay-warning {
  margin-top: 1rem;
  padding: 0.7rem 0.95rem;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 10px;
  font-size: 0.85rem;
  color: #fbbf24;
}

.card-form { max-width: 480px; }
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.card-secure {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.pay-card-result {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  border: 1px solid;
}
.pay-card-result.info    { background: rgba(0,240,255,0.08);  border-color: rgba(0,240,255,0.4);  color: var(--text-primary); }
.pay-card-result.success { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.5); color: #34d399; }
.pay-card-result.danger  { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.5);  color: #ef4444; }

.stars-steps { margin-bottom: 1.25rem; }
.stars-step {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.stars-step:last-child { border-bottom: none; }
.stars-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,240,255,0.18);
  border: 1px solid rgba(0,240,255,0.4);
  color: var(--accent-cyan);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.pay-foot { color: var(--text-muted); margin-top: 0.85rem; text-align: center; }
.pay-foot.small { font-size: 0.75rem; }

.dealers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.dealer-card {
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.dealer-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255,0,136,0.25);
}
.dealer-name { font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.dealer-meta { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 4px; }
.dealer-desc { color: var(--text-secondary); font-size: 0.78rem; }

.dealer-info { margin-bottom: 1rem; }

.qris-exact {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 87, 153, .12), rgba(155, 80, 255, .12));
  border: 1px solid rgba(255, 87, 153, .35);
  border-radius: 14px;
  text-align: center;
}

/* Prominent variant — used on the dealer checkout page where the EXACT
   amount with random suffix is the make-or-break detail for QRIS auto-
   confirmation. Big banner up top, huge gradient amount, copy button,
   bullet checklist, glowing border. */
.qris-exact-prominent {
  margin: 1rem 0 1.5rem;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 87, 153, .18), rgba(155, 80, 255, .12) 60%, rgba(155, 80, 255, .06));
  border: 2px solid rgba(255, 87, 153, .6);
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(255, 87, 153, .08),
              0 10px 32px rgba(255, 87, 153, .15);
  overflow: hidden;
  animation: qrisPulse 2.6s ease-in-out infinite;
}
@keyframes qrisPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 87, 153, .08), 0 10px 32px rgba(255, 87, 153, .15); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 87, 153, .15), 0 14px 36px rgba(255, 87, 153, .28); }
}
.qris-exact-banner {
  padding: .7rem 1rem;
  background: linear-gradient(135deg, #ff2d77, #d4426a);
  color: #fff;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.qris-exact-prominent .qris-exact-label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: .85;
  margin: 1rem 0 .35rem;
  text-align: center;
}
.qris-exact-amount-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0 1rem .65rem;
  flex-wrap: wrap;
}
.qris-exact-prominent .qris-exact-amount {
  font-size: 2.45rem;
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #ff2d77, #9b50ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: all;
}
.qris-exact-copy {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 87, 153, .5);
  background: rgba(255, 255, 255, .06);
  color: #ff5799;
  cursor: pointer;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.qris-exact-copy:hover { background: rgba(255, 87, 153, .15); transform: translateY(-1px); }
.qris-exact-copy:active { transform: translateY(0); }

.qris-exact-prominent .qris-exact-warn {
  margin: 0 1rem .85rem;
  padding: .65rem .85rem;
  background: rgba(255, 220, 120, .08);
  border-left: 3px solid #ffcd4b;
  border-radius: 8px;
  font-size: .86rem;
  line-height: 1.5;
  text-align: left;
  opacity: 1;
}
.qris-exact-checklist {
  margin: 0 1rem 1rem;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: .82rem;
  line-height: 1.7;
  opacity: .92;
}
.qris-exact-checklist li { padding: 0; }

.qris-exact-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
  margin-bottom: .35rem;
}
.qris-exact-amount {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #ff5799, #9b50ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qris-exact-warn {
  margin-top: .55rem;
  font-size: .82rem;
  line-height: 1.45;
  opacity: .85;
}

.dealer-row {
  display: flex; gap: 0.85rem; padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.9rem;
}
.dealer-row:last-of-type { border-bottom: none; }
.dealer-row > span { color: var(--text-muted); min-width: 100px; }
.dealer-row > strong { color: var(--text-primary); }
.dealer-info-text {
  background: rgba(0,0,0,0.4);
  padding: 0.7rem;
  border-radius: 8px;
  color: var(--text-primary);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: pre-wrap;
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
  flex: 1;
}
.dealer-payinfo { flex-direction: column; align-items: stretch; }
.dealer-qr {
  text-align: center;
  margin-top: 1.2rem;
}
.dealer-qr img,
.dealer-qr-img {
  max-width: 360px;
  width: 100%;
  border-radius: 12px;
  padding: 8px;
  background: #fff;
  cursor: zoom-in;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.dealer-qr img:hover,
.dealer-qr-img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(255, 0, 136, 0.35);
}
.qr-zoom-hint {
  color: var(--accent-cyan);
  text-decoration: underline;
  cursor: zoom-in;
}

/* Click-to-zoom lightbox for the dealer QR */
.qr-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: qrlbFade 0.18s ease-out;
}
@keyframes qrlbFade { from { opacity: 0; } to { opacity: 1; } }
.qr-lightbox[hidden] { display: none !important; }
.qr-lightbox-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 0, 136, 0.25);
}
.qr-lightbox-card img {
  display: block;
  max-width: min(640px, 80vw);
  max-height: 80vh;
  width: auto; height: auto;
}
.qr-lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 3px solid #fff;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  line-height: 1;
}
.qr-lightbox-close:hover { background: var(--accent-cyan); }
.qr-lightbox-cap {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: #1a0a24;
  font-weight: 600;
}

/* Receipt section — shown after the user uploads payment proof */
.pay-receipt {
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(255, 0, 136, 0.06));
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 240, 255, 0.18);
  animation: rxAppear 0.35s ease-out;
}
@keyframes rxAppear {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pay-receipt[hidden] { display: none !important; }
.receipt-emoji {
  font-size: 3rem;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 4px 12px rgba(0, 240, 255, 0.5));
  animation: gateBounce 1.6s ease-in-out infinite;
}
.receipt-h {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.receipt-p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 1.2rem;
}
.receipt-summary {
  max-width: 480px;
  margin: 0 auto 1.4rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  text-align: left;
}
.receipt-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.88rem;
}
.receipt-summary-row:last-child { border-bottom: none; }
.receipt-summary-row > span { color: var(--text-muted); }
.receipt-summary-row > strong { color: #fff; font-weight: 600; }
.receipt-summary-row .status-pending { color: #ffb84d; }
.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.receipt-actions .btn-neon-cta,
.receipt-actions .btn-outline {
  flex: 1 1 auto;
  min-width: 180px;
  justify-content: center;
}
@media (max-width: 600px) {
  .receipt-actions .btn-neon-cta,
  .receipt-actions .btn-outline { flex: 1 1 100%; }
}

.pay-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }

.pay-success {
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(0,240,255,0.08));
  border: 1px solid rgba(52,211,153,0.5);
  border-radius: var(--radius);
  text-align: center;
}
.pay-success h2 {
  font-size: 1.4rem;
  margin: 0.5rem 0 0.5rem;
  background: linear-gradient(135deg, #34d399, var(--accent-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pay-success p { color: var(--text-secondary); margin-bottom: 1.25rem; }

@media (max-width: 768px) {
  .checkout-wrap { padding: 5rem 0.85rem 2rem; }
  .checkout-header h1 { font-size: 1.35rem; }
  .method-grid { grid-template-columns: 1fr; }
  .method-card { padding: 1.25rem 1rem; }
  .card-row { grid-template-columns: 1fr; }
}

/* ── Support chat ─────────────────────────────────────────────── */
.tile-badge {
  position: absolute;
  top: 8px; right: 8px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
}
.action-tile { position: relative; }
.chat-window {
  display: flex; flex-direction: column;
  height: 460px;
  max-height: 70vh;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  background: rgba(0,0,0,0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
}
.chat-bubble {
  max-width: 78%;
  padding: 0.55rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  word-wrap: break-word;
  animation: igFadeIn 0.25s ease;
}
.chat-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent), var(--accent-pink));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble-admin {
  align-self: flex-start;
  background: rgba(0, 240, 255, 0.10);
  border: 1px solid rgba(0, 240, 255, 0.32);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.chat-bubble-meta {
  font-size: 0.66rem;
  opacity: 0.82;
  margin-bottom: 3px;
}
.chat-bubble-text { white-space: pre-wrap; }

/* Chat attachments — image/video bubble previews */
.chat-media {
  display: block;
  margin: 0.4rem 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: 260px;
  background: rgba(0,0,0,0.4);
}
.chat-media img, .chat-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
.chat-media-video video { background: #000; }
.chat-media-video iframe {
  display: block;
  width: 100%;
  height: 200px;
  border: 0;
  background: #000;
}

.chat-attach-preview[hidden] { display: none !important; }
.chat-attach-preview {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.45rem;
  border-radius: 8px;
  background: rgba(255, 0, 136, 0.10);
  border: 1px dashed rgba(255, 0, 136, 0.4);
  font-size: 0.82rem;
  color: var(--text-primary);
}
.chat-attach-name {
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-attach-clear {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-attach-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chat-attach-btn:hover {
  background: rgba(255, 0, 136, 0.15);
  color: #fff;
  border-color: rgba(255, 0, 136, 0.5);
}

.chat-input-row {
  display: flex; gap: 0.5rem; align-items: center;
}
.chat-input-row input {
  flex: 1;
  padding: 0.7rem 0.95rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.92rem;
  font-family: inherit;
}
.chat-input-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,0,136,0.18);
}
.chat-send {
  padding: 0.6rem 1rem;
  flex-shrink: 0;
}
.chat-foot {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}
.chat-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}
.chat-empty-emoji { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* Preset-style banner on /generate?style=ID */
.preset-banner {
  margin-bottom: 1rem;
  padding: 0.7rem 0.95rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(255, 0, 136, 0.08));
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.88rem;
  text-align: center;
  animation: igFadeIn 0.4s ease;
}
.preset-banner strong { color: var(--accent-cyan); }

/* ============================================================
   GLOBAL GENERATION TRACKER PILL (gen-tracker.js)
   ============================================================ */
.gt-pill {
  position: fixed;
  left: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  max-width: 320px;
  background: rgba(20, 10, 28, 0.92);
  border: 1px solid rgba(255, 0, 136, 0.4);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  z-index: 9991;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(255, 0, 136, 0.35);
  cursor: pointer;
  backdrop-filter: blur(10px);
  animation: gtSlideIn 0.45s cubic-bezier(.34, 1.56, .64, 1);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.gt-pill:hover { transform: translateY(-2px); }
@keyframes gtSlideIn {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gt-orb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff0066, #ff8a65, var(--accent-cyan), #ff0066);
  animation: gtSpin 1.6s linear infinite;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(255, 0, 136, 0.6);
}
@keyframes gtSpin { to { transform: rotate(360deg); } }
.gt-text { min-width: 0; }
.gt-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gt-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gt-close {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
  transition: var(--transition);
}
.gt-close:hover { background: rgba(239,68,68,0.18); color: #ef4444; }
.gt-pill.gt-done {
  border-color: rgba(52,211,153,0.55);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(52,211,153,0.4);
  animation: gtSlideIn 0.45s cubic-bezier(.34, 1.56, .64, 1), gtPulseDone 1.6s ease-in-out infinite 0.45s;
}
@keyframes gtPulseDone {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 22px rgba(52,211,153,0.4); }
  50%      { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 32px rgba(52,211,153,0.7); }
}
.gt-pill.gt-done .gt-orb {
  background: linear-gradient(135deg, #34d399, var(--accent-cyan));
  animation: none;
}
.gt-pill.gt-failed { border-color: rgba(239,68,68,0.55); }
.gt-pill.gt-failed .gt-orb {
  background: #ef4444;
  animation: none;
}
@media (max-width: 768px) {
  .gt-pill { left: 0.75rem; bottom: 0.75rem; max-width: calc(100vw - 1.5rem); }
}

/* ============================================================
   FLASH MESSAGES — dark-theme readable
   ============================================================ */
.flash-stack {
  position: fixed;
  top: 70px; left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: 90%;
  max-width: 480px;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}
.flash {
  padding: 0.85rem 1.1rem;
  background: rgba(20, 10, 28, 0.95);
  color: var(--text-primary);
  border: 1px solid rgba(255, 0, 136, 0.4);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: flashIn 0.35s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
  max-height: 200px;
  overflow: hidden;
}
.flash-msg { flex: 1; min-width: 0; }
.flash-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  flex-shrink: 0;
}
.flash-close:hover { color: var(--text-primary); }
/* Click × OR auto-fade after 6s — collapses out of layout */
.flash.flash-dismissed {
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}
.flash-success {
  border-color: rgba(52, 211, 153, 0.55);
  border-left-color: #34d399;
}
.flash-success::before { content: '✓ '; color: #34d399; font-weight: 800; }
.flash-warning, .flash-error, .flash-danger {
  border-color: rgba(239, 68, 68, 0.55);
  border-left-color: #ef4444;
}
.flash-warning::before, .flash-error::before, .flash-danger::before {
  content: '⚠ '; color: #ef4444; font-weight: 800;
}
.flash-info {
  border-color: rgba(0, 240, 255, 0.5);
  border-left-color: var(--accent-cyan);
}
.flash-info::before { content: 'ⓘ '; color: var(--accent-cyan); font-weight: 800; }
.flash-message::before { content: '→ '; color: var(--accent-pink); }
@keyframes flashIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Legal pages: Privacy Policy + Terms of Service ─── */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.legal-head {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-light);
}
.legal-head h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.legal-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.legal-body {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.7;
}
.legal-body h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 2rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 0, 136, 0.15);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; }
.legal-body p { margin: 0 0 0.9rem; }
.legal-body ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}
.legal-body li { margin-bottom: 0.45rem; }
.legal-body a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-decoration-color: rgba(0, 240, 255, 0.4);
  transition: color 0.2s ease;
}
.legal-body a:hover { color: var(--accent); }
.legal-body strong { color: #fff; }
.legal-foot {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 0, 136, 0.06);
  border: 1px solid rgba(255, 0, 136, 0.25);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 600px) {
  .legal-page { padding: 1.75rem 1rem 3rem; }
  .legal-body { font-size: 0.9rem; }
  .legal-body h2 { font-size: 1.05rem; }
}

/* Disable expensive effects when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .live-bg .blob,
  .heart-particle,
  .rotating-word,
  .pulse-glow,
  .btn-megabig,
  .sticky-cta,
  .pillShine,
  .live-dot,
  .age-gate-icon { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* On mobile devices, GPU/CPU is constrained — drop the heavy paint layers
   (huge blurred blobs, mouse-glow, particle layer). The hero gradient still
   shows through, but the page actually responds smoothly to scroll. */
@media (max-width: 768px) {
  .live-bg .blob-2,
  .live-bg .blob-3,
  .live-bg .blob-4,
  .hero-particles,
  .mouse-glow { display: none !important; }
  .live-bg .blob-1 { animation-duration: 60s; filter: blur(70px); opacity: 0.35; }
  .live-bg .bg-noise { display: none; }
}

/* Promote elements known to be transformed/animated to their own GPU layer.
   Avoids repaint storms when neighboring DOM updates each second. */
.gt-pill,
.btn-megabig,
.btn-neon-cta,
.hero-stat,
.plan-card,
.feature-card { will-change: transform; }

/* content-visibility: auto lets the browser skip rendering off-screen
   sections until they scroll near the viewport. Massive paint savings on
   the long landing page without changing the visual output.
   contain-intrinsic-size reserves space so the scrollbar doesn't jump.

   IMPORTANT: do NOT apply this to elements whose children animate outside
   their box on hover (action-tiles, plan cards, method cards, fantasy cards).
   `content-visibility: auto` implies `contain: paint` which clips overflow
   — the lift-up hover would get cut off and look like a black bar. */
.section,
.section-alt {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}
/* The hero is always visible on first paint — never skip it. */
.hero, .hero-with-gen { content-visibility: visible; }

/* Telegram-login install hint shown under the Continue-with-Telegram
   button on /web/login. Lets users without the app install it without
   hitting the dead tg:// scheme that produces "address is invalid". */
.tg-fallback-hint {
  text-align: center;
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
}
.tg-fallback-hint a { color: #00f0ff; text-decoration: underline; }
.tg-fallback-hint a:hover { color: #ff6b9d; }

/* Daily-reward style-grant UI — banner above the styles grid + ribbon
   on each granted card so users can actually find which random style
   their daily check-in unlocked. Without this, granted tickets sat
   unused because users had no way to discover them. */
.dash-grant-banner {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.8rem;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(255, 196, 0, 0.10));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 12px;
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.4;
}
.dash-grant-banner[hidden] { display: none; }
.grant-banner-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.grant-banner-text { flex: 1; min-width: 0; }
.grant-banner-text .grant-name {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.18);
  color: #d8faff;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
}
.grant-banner-hint { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; }

/* Granted-card highlight: cyan→gold neon ring + corner ribbon. The
   `is-free-grant` class is applied in renderDashStyles when the style id
   is in the user's active grant set. */
.dash-style-card.is-free-grant {
  outline: 2px solid #00f0ff;
  outline-offset: 0;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.55), 0 0 32px rgba(255, 196, 0, 0.25);
}
.dash-style-grant {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #00f0ff, #ffd966);
  color: #042033;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.45);
}
.dash-style-card.is-free-grant .dash-style-meta { color: #ffd966; font-weight: 700; }

/* "FREE TICKET" pill in the gen-panel header next to the picked style.
   Surfaces the grant at the action point so users know they won't be
   charged a credit. Cyan-gold gradient matches the gallery ribbon. */
.dash-gen-grant-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00f0ff, #ffd966);
  color: #042033;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.4);
}
/* When the submit button is in free-grant mode, switch its glow to
   cyan-gold so it matches the badge above. */
.dash-gen-submit.is-free-grant {
  box-shadow: 0 8px 24px rgba(0, 240, 255, 0.35), 0 0 0 1px rgba(255, 217, 102, 0.6);
}
.dash-gen-submit.is-free-grant .megabig-sub {
  color: #ffd966;
  font-weight: 700;
}

/* Promo banners — first-purchase discount + low-credit warning at the
   top of the dashboard. Force the paywall awareness moment most users
   never reached, paired with a time-boxed offer they can act on. */
.promo-banner {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1rem;
  margin: 0.6rem 0;
  border-radius: 12px;
  font-size: 0.9rem;
  color: #fff;
}
.promo-banner[hidden] { display: none; }
.promo-banner .promo-icon { font-size: 1.4rem; flex-shrink: 0; }
.promo-banner .promo-text { flex: 1; min-width: 0; line-height: 1.35; }
.promo-banner .promo-timer {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.promo-banner .promo-cta {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, #ffe9c2);
  color: #4a1a00;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.promo-banner .promo-cta-soft {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.promo-banner-firstbuy {
  background: linear-gradient(135deg, #ff7e00, #ff0066 60%, #b20066);
  box-shadow: 0 8px 28px rgba(255, 0, 102, 0.35);
}

/* ── Live banner animations ──────────────────────────────────────────────
   The first-purchase banner sits at the top of the dashboard and competes
   with the gen panel for attention. Without motion, the offer reads as
   static decoration and most users scroll past it. Three coordinated loops
   — icon bounce, CTA pulse, urgency flash — keep the offer visually loud
   without going carnival-tier. All animations are paused under
   prefers-reduced-motion so accessibility settings still rule. */
@keyframes promoIconBounce {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
  20%      { transform: translateY(-7px) rotate(10deg) scale(1.12); }
  40%      { transform: translateY(0)    rotate(-6deg) scale(1); }
  55%      { transform: translateY(-4px) rotate(6deg) scale(1.06); }
  70%      { transform: translateY(0)    rotate(-6deg) scale(1); }
}
@keyframes promoCtaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(255,255,255,0.25),
                0 0 0 0    rgba(255,255,255,0.55);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(255,255,255,0.45),
                0 0 0 10px rgba(255,255,255,0);
  }
}
@keyframes promoCtaArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@keyframes promoTimerFlash {
  0%, 100% {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(255, 215, 64, 0.7);
  }
  50% {
    background: #ffd740;
    color: #4a1a00;
    box-shadow: 0 0 0 6px rgba(255, 215, 64, 0);
  }
}
@keyframes promoBgShimmer {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.promo-banner.promo-live.promo-banner-firstbuy {
  /* Widen the gradient so the shimmer has somewhere to travel. */
  background: linear-gradient(135deg, #ff7e00 0%, #ff0066 40%, #ff7e00 70%, #b20066 100%);
  background-size: 220% 220%;
  animation: promoBgShimmer 7s ease-in-out infinite;
}
.promo-banner .promo-icon-bounce {
  display: inline-block;
  transform-origin: 50% 60%;
  animation: promoIconBounce 1.6s ease-in-out infinite;
}
.promo-banner .promo-cta-pulse {
  animation: promoCtaPulse 1.6s ease-in-out infinite;
}
.promo-banner .promo-cta-pulse:hover {
  /* Pausing the pulse on hover prevents the “transform fights pointer”
     jitter and lets the user click cleanly. */
  animation-play-state: paused;
  transform: scale(1.07);
}
.promo-banner .promo-cta-arrow {
  display: inline-block;
  animation: promoCtaArrow 1.6s ease-in-out infinite;
}
.promo-banner .promo-timer-alert {
  animation: promoTimerFlash 1.2s ease-in-out infinite;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Honor system-level reduced-motion. Everything still renders, just static. */
@media (prefers-reduced-motion: reduce) {
  .promo-banner.promo-live.promo-banner-firstbuy,
  .promo-banner .promo-icon-bounce,
  .promo-banner .promo-cta-pulse,
  .promo-banner .promo-cta-arrow,
  .promo-banner .promo-timer-alert {
    animation: none !important;
  }
}
.promo-banner-low {
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.18), rgba(255, 0, 102, 0.18));
  border: 1px solid rgba(255, 196, 0, 0.45);
}

/* Premium Lineup section on landing — horizontal-scroll strip showing
   locked premium styles so users see what's behind the paywall. */
.premium-lineup-section { padding: 2.5rem 0; }
.premium-lineup-sub {
  text-align: center; max-width: 620px; margin: 0.5rem auto 1.4rem;
  color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; line-height: 1.5;
}
/* Frame wrapper — hosts scroll arrows + gradient fade edges so the strip
   looks intentional instead of "browser scrollbar at the bottom". */
.premium-lineup-frame {
  position: relative;
  /* Right/left gradient fades mask content under the arrow buttons,
     hinting at horizontal overflow. Toggled off on .at-start / .at-end
     when the strip is fully scrolled. */
}
.premium-lineup-frame::before,
.premium-lineup-frame::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1rem;             /* leave room for the scrollbar gutter */
  width: 64px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.premium-lineup-frame::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-body) 5%, rgba(10,10,10,0));
}
.premium-lineup-frame::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-body) 5%, rgba(10,10,10,0));
}
.premium-lineup-frame.at-start::before { opacity: 0; }
.premium-lineup-frame.at-end::after    { opacity: 0; }

.premium-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 196, 0, 0.5);
  background: rgba(20, 10, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #ffd740;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, background 0.15s ease,
              opacity 0.2s ease, box-shadow 0.15s ease;
}
.premium-scroll-btn:hover {
  background: rgba(255, 196, 0, 0.18);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 26px rgba(255, 196, 0, 0.4);
}
.premium-scroll-btn:active { transform: translateY(-50%) scale(0.95); }
.premium-scroll-btn[hidden] { display: none; }
.premium-scroll-prev { left: 4px; }
.premium-scroll-next { right: 4px; }
@media (max-width: 600px) {
  .premium-lineup-frame::before,
  .premium-lineup-frame::after { width: 32px; }
  .premium-scroll-btn { width: 36px; height: 36px; font-size: 0.85rem; }
  .premium-scroll-prev { left: 2px; }
  .premium-scroll-next { right: 2px; }
}

.premium-lineup-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 260px);
  gap: 1rem;
  padding: 0.5rem 1.2rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 196, 0, 0.55) transparent;
}
/* WebKit / Blink — wider, branded, with a hover state */
.premium-lineup-strip::-webkit-scrollbar { height: 8px; }
.premium-lineup-strip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  margin: 0 1.2rem;
}
.premium-lineup-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(255, 196, 0, 0.5), rgba(255, 0, 136, 0.5));
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 0, 0.6);
}
.premium-lineup-strip::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, rgba(255, 196, 0, 0.85), rgba(255, 0, 136, 0.85));
}
.premium-card {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
  background: #0d0d18;
  border: 1px solid rgba(255, 196, 0, 0.4);
  box-shadow: 0 8px 32px rgba(255, 196, 0, 0.18);
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(255, 196, 0, 0.32), 0 0 0 1px #ffc400 inset;
}
.premium-card-vid, .premium-card-emoji {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, #1a0830, #20104a);
}
.premium-card-vid { background: #000; }
.premium-card.has-video .premium-card-emoji.ph-emoji { opacity: 0; }
.premium-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.0) 55%);
  pointer-events: none;
}
.premium-card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.7rem 0.85rem;
  z-index: 2;
}
.premium-card-name {
  font-size: 1rem; font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.premium-card-meta {
  font-size: 0.72rem;
  color: #ffd966;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.premium-card-lock {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffc400;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  z-index: 2;
}
.premium-skel {
  aspect-ratio: 4/5;
  border-radius: 14px;
  background: linear-gradient(110deg, #1a1a2a 8%, #2a2a40 18%, #1a1a2a 33%);
  background-size: 200% 100%;
  animation: skelShimmer 1.5s linear infinite;
  scroll-snap-align: start;
}
.premium-lineup-cta-wrap { text-align: center; margin-top: 1.2rem; }
.premium-lineup-cta { display: inline-flex; }
@media (max-width: 600px) {
  .promo-banner { flex-wrap: wrap; padding: 0.6rem 0.8rem; gap: 0.5rem; font-size: 0.82rem; }
  .promo-banner .promo-cta { width: 100%; padding: 0.55rem; }
}

/* Account link in nav — visible on every viewport so signed-in mobile
   users can reach their dashboard from the landing page. On phones the
   text label collapses to a tap-friendly icon-only chip. */
.nav-account { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (max-width: 768px) {
  .nav-account .nav-link-label { display: none; }
  .nav-account {
    width: 36px; height: 36px;
    padding: 0; justify-content: center; gap: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-account i { font-size: 1rem; }
}

/* ============================================================
   Mobile layout safety net
   ----------------------------------------------------------------
   Targets reported by users:
   1) Daily-reward popup blocked the whole screen with no visible
      close button on small phones → restyled as a bottom-sheet with
      a larger close target and capped height.
   2) Some buttons rendered off-screen → horizontal overflow guard
      on html/body + flex-wrap on action bars.
   3) Generated-video preview took the entire viewport, hiding the
      Download/Share buttons → capped to 55vh so actions stay in
      reach without scrolling.
   ============================================================ */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Anything inside the page should never push past the viewport edge. */
  img, video, canvas, iframe, svg { max-width: 100%; }
  /* Cap large media previews so the controls below them stay reachable. */
  .ig-result video,
  .ig-preview img,
  .ig-result-frame-media img,
  .ig-result-frame-media video,
  .ba-figure .ba-media img,
  .ba-figure .ba-media video { max-height: 55vh !important; height: auto; }
  /* Inline-gen + result action bars: wrap, share row width evenly,
     never overflow horizontally. */
  .ig-result-actions,
  .ig-preview-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }
  .ig-result-actions > *,
  .ig-preview-actions > * {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
  }
  /* Daily-reward popup on phones — small centered card, clearly NOT
     covering the whole viewport. Backdrop area around it is tap-to-
     dismiss. The bottom-sheet design covered too much screen in earlier
     iterations and was reported as "can't exit". */
  .reward-popup-card {
    max-width: 320px;
    max-height: min(50vh, 420px);
    padding: 1rem 0.9rem 0.95rem;
  }
  .reward-popup-close {
    width: 42px; height: 42px;
    top: 4px; right: 4px;
    font-size: 1.55rem;
  }
  .reward-popup-icon  { font-size: 2rem; }
  .reward-popup-title { font-size: 0.95rem; }
  .reward-popup-prize { font-size: 1.4rem; }
  .reward-popup-sub   { font-size: 0.78rem; }
}